feat: personal room name overrides (MSC4431-style)

Users can right-click any room and 'Rename for me...' to set a local
display name visible only to them. Stored in account data under
io.lotus.room_names. Shows a pencil indicator on renamed rooms.
useLocalRoomName() hook overrides useRoomName() when a local name exists.

Also includes:
- Rich room topic rendering via RoomTopicContent object (formatted_body
  support in RoomTopicViewer with HTML sanitization via sanitizeCustomHtml)
- Edit history viewer: clicking '(edited)' on a message opens a modal
  showing all prior versions with timestamps (EditHistoryModal.tsx)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

README.md

@@ -73,6 +73,8 @@ A full custom theme engine layered on top of Cinny's vanilla-extract theming:
 
 ### Messaging Enhancements
 
+- **Rich room topics**: Room topics that contain formatted text (bold, links, italic) are now rendered with full HTML formatting. Falls back to plain text if no `formatted_body` is present. Activates when any room admin sets a formatted topic.
+- **Edit history viewer**: Clicking the "edited" label on any edited message opens a modal showing every prior version with timestamps. Fetches all `m.replace` relations for the event and displays them oldest-to-newest. Previously the "edited" label was visible but unclickable.
 - **GIF picker**: Giphy-powered GIF search and send. Button appears in the message composer only when `gifApiKey` is set in `config.json`. Sends GIF as `m.image` — fetches blob, uploads via `mx.uploadContent`, sends with `mx.sendMessage`. `FocusTrap` handles click-outside / Escape to close. When TDS is active: dark navy background (`#060c14`), orange dim border, `// GIF_SEARCH` header, CSS overrides for Giphy SDK search bar (dark bg, orange border/focus ring, JetBrains Mono), custom orange scrollbar. All TDS styles live in `lotus-terminal.css.ts` — no runtime `<style>` injection, eliminating flash of unstyled content.
 - **Message forwarding**: Forward any message to any room from the message context menu.
 - **Draft persistence**: Unsent message drafts survive page reload via `localStorage` (`draft-msg-<roomId>`). Jotai in-memory atom is primary; localStorage is used as fallback on reload and cleared on send.
@@ -81,6 +83,10 @@ A full custom theme engine layered on top of Cinny's vanilla-extract theming:
 - **Location sharing**: Map embed view for incoming location events + static share button. Renders `m.location` events inline with a map tile.
 - **Deleted message placeholders**: Redacted `m.room.message`, `m.room.encrypted`, and `m.sticker` events render as "This message has been deleted" with reason (if provided) rather than disappearing. One-line change in the `eventRenderer` filter in `RoomTimeline.tsx`.
 
+### Room Customization
+
+- **Personal room name overrides**: Right-click any room in the sidebar → "Rename for me…" to set a local display name visible only to you. Other members see the original name unchanged. A small pencil icon marks rooms with a custom local name. Stored in Matrix account data (`io.lotus.room_names`). Uses `io.lotus.room_names` account data key (based on MSC4431).
+
 ### Per-Message Read Receipts
 
 Full per-message read receipt system — shows who has read each message directly in the timeline.

src/app/components/RenderMessageContent.tsx

@@ -38,6 +38,7 @@ type RenderMessageContentProps = {
   msgType: string;
   ts: number;
   edited?: boolean;
+  onEditHistoryClick?: () => void;
   getContent: <T>() => T;
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
@@ -51,6 +52,7 @@ export function RenderMessageContent({
   msgType,
   ts,
   edited,
+  onEditHistoryClick,
   getContent,
   mediaAutoLoad,
   urlPreview,
@@ -77,6 +79,7 @@ export function RenderMessageContent({
         <MText
           style={{ marginTop: config.space.S200 }}
           edited={edited}
+          onEditHistoryClick={onEditHistoryClick}
           content={content}
           renderBody={(props) => (
             <RenderBody
@@ -133,6 +136,7 @@ export function RenderMessageContent({
     return (
       <MText
         edited={edited}
+        onEditHistoryClick={onEditHistoryClick}
         content={getContent()}
         renderBody={(props) => (
           <RenderBody
@@ -152,6 +156,7 @@ export function RenderMessageContent({
       <MEmote
         displayName={displayName}
         edited={edited}
+        onEditHistoryClick={onEditHistoryClick}
         content={getContent()}
         renderBody={(props) => (
           <RenderBody
@@ -170,6 +175,7 @@ export function RenderMessageContent({
     return (
       <MNotice
         edited={edited}
+        onEditHistoryClick={onEditHistoryClick}
         content={getContent()}
         renderBody={(props) => (
           <RenderBody

src/app/components/message/MsgTypeRenderers.tsx

@@ -80,12 +80,20 @@ type RenderBodyProps = {
 };
 type MTextProps = {
   edited?: boolean;
+  onEditHistoryClick?: () => void;
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
   style?: CSSProperties;
 };
-export function MText({ edited, content, renderBody, renderUrlsPreview, style }: MTextProps) {
+export function MText({
+  edited,
+  onEditHistoryClick,
+  content,
+  renderBody,
+  renderUrlsPreview,
+  style,
+}: MTextProps) {
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
@@ -104,7 +112,7 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
           body: trimmedBody,
           customBody: typeof customBody === 'string' ? customBody : undefined,
         })}
-        {edited && <MessageEditedContent />}
+        {edited && <MessageEditedContent onEditHistoryClick={onEditHistoryClick} />}
       </MessageTextBody>
       {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
     </>
@@ -114,6 +122,7 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
 type MEmoteProps = {
   displayName: string;
   edited?: boolean;
+  onEditHistoryClick?: () => void;
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
@@ -121,6 +130,7 @@ type MEmoteProps = {
 export function MEmote({
   displayName,
   edited,
+  onEditHistoryClick,
   content,
   renderBody,
   renderUrlsPreview,
@@ -144,7 +154,7 @@ export function MEmote({
           body: trimmedBody,
           customBody: typeof customBody === 'string' ? customBody : undefined,
         })}
-        {edited && <MessageEditedContent />}
+        {edited && <MessageEditedContent onEditHistoryClick={onEditHistoryClick} />}
       </MessageTextBody>
       {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
     </>
@@ -153,11 +163,18 @@ export function MEmote({
 
 type MNoticeProps = {
   edited?: boolean;
+  onEditHistoryClick?: () => void;
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
 };
-export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNoticeProps) {
+export function MNotice({
+  edited,
+  onEditHistoryClick,
+  content,
+  renderBody,
+  renderUrlsPreview,
+}: MNoticeProps) {
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
@@ -176,7 +193,7 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot
           body: trimmedBody,
           customBody: typeof customBody === 'string' ? customBody : undefined,
         })}
-        {edited && <MessageEditedContent />}
+        {edited && <MessageEditedContent onEditHistoryClick={onEditHistoryClick} />}
       </MessageTextBody>
       {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
     </>

src/app/components/message/content/FallbackContent.tsx

@@ -66,8 +66,25 @@ export const MessageVerificationRequestContent = as<'div', { children?: never }>
   ),
 );
 
-export const MessageEditedContent = as<'span', { children?: never }>(({ ...props }, ref) => (
+export const MessageEditedContent = as<
-  <Text as="span" size="T200" priority="300" {...props} ref={ref}>
+  'span',
-    {' (edited)'}
+  { children?: never; onEditHistoryClick?: () => void }
-  </Text>
+>(({ onEditHistoryClick, ...props }, ref) =>
-));
+  onEditHistoryClick ? (
+    <span ref={ref} {...(props as React.HTMLAttributes<HTMLSpanElement>)}>
+      <button
+        type="button"
+        onClick={onEditHistoryClick}
+        style={{ cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}
+      >
+        <Text as="span" size="T200" priority="300">
+          {' (edited)'}
+        </Text>
+      </button>
+    </span>
+  ) : (
+    <Text as="span" size="T200" priority="300" {...props} ref={ref}>
+      {' (edited)'}
+    </Text>
+  ),
+);

src/app/components/room-intro/RoomIntro.tsx

@@ -66,7 +66,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
             {name}
           </Text>
           <Text size="T400" priority="400">
-            {typeof topic === 'string' ? topic : 'This is the beginning of conversation.'}
+            {topic?.topic ?? 'This is the beginning of conversation.'}
           </Text>
           {creatorName && ts && (
             <Text size="T200" priority="300">

src/app/components/room-topic-viewer/RoomTopicViewer.tsx

@@ -1,42 +1,58 @@
 import React from 'react';
+import parse from 'html-react-parser';
 import { as, Box, Header, Icon, IconButton, Icons, Modal, Scroll, Text } from 'folds';
 import classNames from 'classnames';
 import Linkify from 'linkify-react';
 import * as css from './style.css';
 import { LINKIFY_OPTS, scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
+import { sanitizeCustomHtml } from '../../utils/sanitize';
+import { RoomTopicContent } from '../../hooks/useRoomMeta';
 
 export const RoomTopicViewer = as<
   'div',
   {
     name: string;
-    topic: string;
+    topic: string | RoomTopicContent;
     requestClose: () => void;
   }
->(({ name, topic, requestClose, className, ...props }, ref) => (
+>(({ name, topic, requestClose, className, ...props }, ref) => {
-  <Modal
+  const topicStr = typeof topic === 'string' ? topic : topic.topic;
-    size="300"
+  const isFormatted =
-    flexHeight
+    typeof topic !== 'string' &&
-    className={classNames(css.ModalFlex, className)}
+    topic.format === 'org.matrix.custom.html' &&
-    aria-labelledby="room-topic-title"
+    typeof topic.formatted_body === 'string';
-    {...props}
+
-    ref={ref}
+  return (
-  >
+    <Modal
-    <Header className={css.ModalHeader} variant="Surface" size="500">
+      size="300"
-      <Box grow="Yes">
+      flexHeight
-        <Text as="h2" size="H4" truncate id="room-topic-title">
+      className={classNames(css.ModalFlex, className)}
-          {name}
+      aria-labelledby="room-topic-title"
-        </Text>
+      {...props}
-      </Box>
+      ref={ref}
-      <IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
+    >
-        <Icon src={Icons.Cross} />
+      <Header className={css.ModalHeader} variant="Surface" size="500">
-      </IconButton>
+        <Box grow="Yes">
-    </Header>
+          <Text as="h2" size="H4" truncate id="room-topic-title">
-    <Scroll className={css.ModalScroll} size="300" hideTrack>
+            {name}
-      <Box className={css.ModalContent} direction="Column" gap="100">
+          </Text>
-        <Text size="T300" className={css.ModalTopic} priority="400">
+        </Box>
-          <Linkify options={LINKIFY_OPTS}>{scaleSystemEmoji(topic)}</Linkify>
+        <IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
-        </Text>
+          <Icon src={Icons.Cross} />
-      </Box>
+        </IconButton>
-    </Scroll>
+      </Header>
-  </Modal>
+      <Scroll className={css.ModalScroll} size="300" hideTrack>
-));
+        <Box className={css.ModalContent} direction="Column" gap="100">
+          <Text size="T300" className={css.ModalTopic} priority="400">
+            {isFormatted ? (
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              parse(sanitizeCustomHtml((topic as RoomTopicContent).formatted_body!))
+            ) : (
+              <Linkify options={LINKIFY_OPTS}>{scaleSystemEmoji(topicStr)}</Linkify>
+            )}
+          </Text>
+        </Box>
+      </Scroll>
+    </Modal>
+  );
+});

src/app/features/common-settings/general/RoomProfile.tsx

@@ -303,7 +303,7 @@ export function RoomProfile({ permissions }: RoomProfileProps) {
             canEditTopic={canEditTopic}
             avatar={avatar}
             name={name ?? ''}
-            topic={topic ?? ''}
+            topic={topic?.topic ?? ''}
             onClose={handleCloseEdit}
           />
         ) : (
@@ -315,7 +315,7 @@ export function RoomProfile({ permissions }: RoomProfileProps) {
                 </Text>
                 {topic && (
                   <Text className={classNames(BreakWord, LineClamp3)} size="T200">
-                    <Linkify options={LINKIFY_OPTS}>{topic}</Linkify>
+                    <Linkify options={LINKIFY_OPTS}>{topic.topic}</Linkify>
                   </Text>
                 )}
               </Box>

src/app/features/lobby/LobbyHero.tsx

@@ -71,7 +71,7 @@ export function LobbyHero() {
                   size="Inherit"
                   priority="300"
                 >
-                  {topic}
+                  {topic.topic}
                 </Text>
               </>
             )}

src/app/features/room-nav/RoomNavItem.tsx

@@ -1,14 +1,21 @@
-import React, { MouseEventHandler, forwardRef, useState } from 'react';
+import React, { MouseEventHandler, forwardRef, useCallback, useRef, useState } from 'react';
 import { Room } from 'matrix-js-sdk';
 import {
   Avatar,
   Box,
+  Button,
+  Dialog,
+  Header,
   Icon,
   IconButton,
   Icons,
+  Input,
   Text,
   Menu,
   MenuItem,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
   config,
   PopOut,
   toRem,
@@ -52,7 +59,12 @@ import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationS
 import { getRoomCreatorsForRoomId, useRoomCreators } from '../../hooks/useRoomCreators';
 import { getRoomPermissionsAPI, useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
-import { useRoomName } from '../../hooks/useRoomMeta';
+import {
+  LOCAL_ROOM_NAMES_KEY,
+  LocalRoomNamesContent,
+  useHasLocalRoomName,
+  useLocalRoomName,
+} from '../../hooks/useRoomMeta';
 import { useCallMembers, useCallSession } from '../../hooks/useCall';
 import { useCallEmbed, useCallStart } from '../../hooks/useCallEmbed';
 import { callChatAtom } from '../../state/callEmbed';
@@ -62,6 +74,139 @@ import { livekitSupport } from '../../hooks/useLivekitSupport';
 import { StateEvent } from '../../../types/matrix/room';
 import { webRTCSupported } from '../../utils/rtc';
 
+type RenameRoomDialogProps = {
+  room: Room;
+  onClose: () => void;
+};
+function RenameRoomDialog({ room, onClose }: RenameRoomDialogProps) {
+  const mx = useMatrixClient();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const getExistingContent = useCallback((): LocalRoomNamesContent => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const raw: unknown = (mx as any).getAccountData(LOCAL_ROOM_NAMES_KEY)?.getContent();
+    if (
+      raw &&
+      typeof raw === 'object' &&
+      'rooms' in raw &&
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      typeof (raw as any).rooms === 'object'
+    ) {
+      return raw as LocalRoomNamesContent;
+    }
+    return { rooms: {} };
+  }, [mx]);
+
+  const getCurrentLocalName = useCallback((): string => {
+    const content = getExistingContent();
+    return content.rooms[room.roomId] ?? '';
+  }, [getExistingContent, room.roomId]);
+
+  const handleSave = useCallback(() => {
+    const newName = inputRef.current?.value.trim() ?? '';
+    const existing = getExistingContent();
+    if (newName === '') {
+      const { [room.roomId]: _removed, ...rest } = existing.rooms;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mx as any).setAccountData(LOCAL_ROOM_NAMES_KEY, { rooms: rest });
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (mx as any).setAccountData(LOCAL_ROOM_NAMES_KEY, {
+        rooms: { ...existing.rooms, [room.roomId]: newName },
+      });
+    }
+    onClose();
+  }, [mx, room.roomId, getExistingContent, onClose]);
+
+  const handleClear = useCallback(() => {
+    const existing = getExistingContent();
+    const { [room.roomId]: _removed, ...rest } = existing.rooms;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (mx as any).setAccountData(LOCAL_ROOM_NAMES_KEY, { rooms: rest });
+    onClose();
+  }, [mx, room.roomId, getExistingContent, onClose]);
+
+  const handleKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>) => {
+    if (evt.key === 'Enter') handleSave();
+    if (evt.key === 'Escape') onClose();
+  };
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: onClose,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog variant="Surface" aria-labelledby="rename-room-dialog-title">
+            <Header
+              style={{
+                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                borderBottomWidth: config.borderWidth.B300,
+              }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text as="h2" size="H4" id="rename-room-dialog-title">
+                  Rename room (for you only)
+                </Text>
+              </Box>
+              <IconButton size="300" onClick={onClose} radii="300" aria-label="Cancel">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+              <Box direction="Column" gap="200">
+                <Text size="L400">Custom name</Text>
+                <Input
+                  ref={inputRef}
+                  defaultValue={getCurrentLocalName()}
+                  placeholder={room.name}
+                  variant="Secondary"
+                  radii="300"
+                  onKeyDown={handleKeyDown}
+                  autoFocus
+                />
+                <Text size="T300" priority="300">
+                  Only visible to you. Leave blank to use the original name.
+                </Text>
+              </Box>
+              <Box gap="300">
+                <Box grow="Yes">
+                  <Button
+                    onClick={handleClear}
+                    variant="Secondary"
+                    fill="Soft"
+                    radii="300"
+                    style={{ width: '100%' }}
+                  >
+                    <Text size="B400">Clear</Text>
+                  </Button>
+                </Box>
+                <Box grow="Yes">
+                  <Button
+                    onClick={handleSave}
+                    variant="Primary"
+                    radii="300"
+                    style={{ width: '100%' }}
+                  >
+                    <Text size="B400">Save</Text>
+                  </Button>
+                </Box>
+              </Box>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
+
 type RoomNavItemMenuProps = {
   room: Room;
   requestClose: () => void;
@@ -81,6 +226,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
     const space = useSpaceOptionally();
 
     const [invitePrompt, setInvitePrompt] = useState(false);
+    const [renameDialog, setRenameDialog] = useState(false);
 
     const handleMarkAsRead = () => {
       markAsRead(mx, room.roomId, hideActivity);
@@ -114,6 +260,15 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
             }}
           />
         )}
+        {renameDialog && (
+          <RenameRoomDialog
+            room={room}
+            onClose={() => {
+              setRenameDialog(false);
+              requestClose();
+            }}
+          />
+        )}
         <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <MenuItem
             onClick={handleMarkAsRead}
@@ -174,6 +329,17 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
               Copy Link
             </Text>
           </MenuItem>
+          <MenuItem
+            onClick={() => setRenameDialog(true)}
+            size="300"
+            after={<Icon size="100" src={Icons.Pencil} />}
+            radii="300"
+            aria-pressed={renameDialog}
+          >
+            <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+              Rename for me…
+            </Text>
+          </MenuItem>
           <MenuItem
             onClick={handleRoomSettings}
             size="300"
@@ -264,7 +430,8 @@ function RoomNavItem_({
     (receipt) => receipt.userId !== mx.getUserId(),
   );
 
-  const roomName = useRoomName(room);
+  const roomName = useLocalRoomName(room);
+  const hasLocalName = useHasLocalRoomName(room.roomId);
 
   const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
     evt.preventDefault();
@@ -357,10 +524,18 @@ function RoomNavItem_({
                 />
               )}
             </Avatar>
-            <Box as="span" grow="Yes">
+            <Box as="span" grow="Yes" alignItems="Center" gap="100">
               <Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
                 {roomName}
               </Text>
+              {hasLocalName && (
+                <Icon
+                  size="50"
+                  src={Icons.Pencil}
+                  aria-label="Custom local name"
+                  style={{ opacity: 0.6, flexShrink: 0 }}
+                />
+              )}
             </Box>
             {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
               <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>

src/app/features/room/RoomTimeline.tsx

@@ -128,6 +128,7 @@ import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/u
 import { useTheme } from '../../hooks/useTheme';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
 import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
+import { EditHistoryModal } from './message/EditHistoryModal';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -480,6 +481,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const canSendReaction = permissions.event(MessageEvent.Reaction, mx.getSafeUserId());
   const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, mx.getSafeUserId());
   const [editId, setEditId] = useState<string>();
+  const [editHistoryEvent, setEditHistoryEvent] = useState<MatrixEvent | undefined>();
 
   const roomToParents = useAtomValue(roomToParentsAtom);
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
@@ -1123,6 +1125,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 msgType={mEvent.getContent().msgtype ?? ''}
                 ts={mEvent.getTs()}
                 edited={!!editedEvent}
+                onEditHistoryClick={
+                  editedEvent ? () => setEditHistoryEvent(mEvent) : undefined
+                }
                 getContent={getContent}
                 mediaAutoLoad={mediaAutoLoad}
                 urlPreview={showUrlPreview}
@@ -1229,6 +1234,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                       msgType={mEvent.getContent().msgtype ?? ''}
                       ts={mEvent.getTs()}
                       edited={!!editedEvent}
+                      onEditHistoryClick={
+                        editedEvent ? () => setEditHistoryEvent(mEvent) : undefined
+                      }
                       getContent={getContent}
                       mediaAutoLoad={mediaAutoLoad}
                       urlPreview={showUrlPreview}
@@ -2191,6 +2199,13 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           </TimelineFloat>
         )}
       </Box>
+      {editHistoryEvent && (
+        <EditHistoryModal
+          room={room}
+          mEvent={editHistoryEvent}
+          onClose={() => setEditHistoryEvent(undefined)}
+        />
+      )}
     </ReadPositionsContext.Provider>
   );
 }

src/app/features/room/RoomViewHeader.tsx

@@ -544,7 +544,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
                       priority="300"
                       truncate
                     >
-                      {topic}
+                      {topic.topic}
                     </Text>
                   </>
                 )}

src/app/features/room/message/EditHistoryModal.tsx

@@ -0,0 +1,186 @@
+import React, { useCallback, useEffect } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Box,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Spinner,
+  Text,
+} from 'folds';
+import { MatrixEvent, Method, Room } from 'matrix-js-sdk';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { stopPropagation } from '../../../utils/keyboard';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { timeDayMonYear, timeHourMinute } from '../../../utils/time';
+import { useSetting } from '../../../state/hooks/settings';
+import { settingsAtom } from '../../../state/settings';
+
+type EditHistoryResponse = {
+  chunk: Array<Record<string, unknown>>;
+  next_batch?: string;
+};
+
+type EditHistoryModalProps = {
+  room: Room;
+  mEvent: MatrixEvent;
+  onClose: () => void;
+};
+
+export function EditHistoryModal({ room, mEvent, onClose }: EditHistoryModalProps) {
+  const mx = useMatrixClient();
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
+  const eventId = mEvent.getId();
+  const roomId = room.roomId;
+
+  const [historyState, fetchHistory] = useAsyncCallback<MatrixEvent[], unknown, []>(
+    useCallback(async () => {
+      const path = `/rooms/${encodeURIComponent(roomId)}/relations/${encodeURIComponent(eventId ?? '')}/m.replace`;
+      const res = await mx.http.authedRequest<EditHistoryResponse>(Method.Get, path, {
+        limit: '50',
+      });
+      const rawEvents = res.chunk ?? [];
+      // Sort oldest first
+      const events = rawEvents
+        .map((raw) => {
+          // Build a lightweight representation for display; we just need content + ts
+          return raw as { type: string; content: Record<string, unknown>; origin_server_ts: number; event_id: string };
+        })
+        .sort((a, b) => a.origin_server_ts - b.origin_server_ts);
+
+      // Convert to MatrixEvent-like objects using the raw data
+      // We use MatrixEvent if available from the timeline, otherwise parse the raw data
+      return events.map((raw) => {
+        const existing = room.findEventById(raw.event_id);
+        if (existing) return existing;
+        // Create a minimal event wrapper
+        const evt = new MatrixEvent({
+          type: raw.type,
+          content: raw.content,
+          origin_server_ts: raw.origin_server_ts,
+          event_id: raw.event_id,
+          room_id: roomId,
+          sender: mEvent.getSender() ?? '',
+        });
+        return evt;
+      });
+    }, [mx, roomId, eventId, room, mEvent]),
+  );
+
+  useEffect(() => {
+    fetchHistory();
+  }, [fetchHistory]);
+
+  const formatTs = (ts: number): string => {
+    const time = timeHourMinute(ts, hour24Clock);
+    const date = timeDayMonYear(ts, dateFormatString);
+    return `${date} at ${time}`;
+  };
+
+  const getVersionBody = (evt: MatrixEvent): string => {
+    const content = evt.getContent();
+    const newContent = content['m.new_content'] as Record<string, unknown> | undefined;
+    const body = newContent?.body ?? content.body;
+    return typeof body === 'string' ? body : '(no text)';
+  };
+
+  // The original message body (before any edits)
+  const originalBody = (() => {
+    const content = mEvent.getContent();
+    const body = content.body;
+    return typeof body === 'string' ? body : '(no text)';
+  })();
+
+  const originalTs = mEvent.getTs();
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            clickOutsideDeactivates: true,
+            onDeactivate: onClose,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Modal variant="Surface" size="500">
+            <Header variant="Surface" size="500" style={{ padding: '0 var(--mx-spacing-s200) 0 var(--mx-spacing-s400)' }}>
+              <Box grow="Yes">
+                <Text as="h2" size="H4" truncate>
+                  Edit History
+                </Text>
+              </Box>
+              <IconButton size="300" onClick={onClose} radii="300" aria-label="Close">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+
+            <Scroll size="300" hideTrack style={{ maxHeight: '60vh' }}>
+              <Box direction="Column" gap="200" style={{ padding: 'var(--mx-spacing-s400)', paddingBottom: 'var(--mx-spacing-s700)' }}>
+                {historyState.status === AsyncStatus.Loading && (
+                  <Box justifyContent="Center" alignItems="Center" style={{ padding: 'var(--mx-spacing-s400)' }}>
+                    <Spinner size="200" />
+                  </Box>
+                )}
+                {historyState.status === AsyncStatus.Error && (
+                  <Text size="T300" priority="300">
+                    Failed to load edit history.
+                  </Text>
+                )}
+                {historyState.status === AsyncStatus.Success && (
+                  <Box direction="Column" gap="300">
+                    {/* Original message always shown first */}
+                    <Box direction="Column" gap="100">
+                      <Box gap="200" alignItems="Center">
+                        <Text size="L400">Original</Text>
+                        <Text size="T200" priority="300">
+                          {formatTs(originalTs)}
+                        </Text>
+                      </Box>
+                      <Text size="T300" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+                        {originalBody}
+                      </Text>
+                    </Box>
+
+                    {historyState.data.map((editEvt, index) => (
+                      <Box key={editEvt.getId() ?? index} direction="Column" gap="100">
+                        <Box gap="200" alignItems="Center">
+                          <Text size="L400">
+                            {index === historyState.data.length - 1
+                              ? `Edit ${index + 1} (current)`
+                              : `Edit ${index + 1}`}
+                          </Text>
+                          <Text size="T200" priority="300">
+                            {formatTs(editEvt.getTs())}
+                          </Text>
+                        </Box>
+                        <Text size="T300" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+                          {getVersionBody(editEvt)}
+                        </Text>
+                      </Box>
+                    ))}
+
+                    {historyState.data.length === 0 && (
+                      <Text size="T300" priority="300">
+                        No edit history found.
+                      </Text>
+                    )}
+                  </Box>
+                )}
+              </Box>
+            </Scroll>
+          </Modal>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}

src/app/hooks/useRoomMeta.ts

@@ -1,8 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
-import { Room, RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
+import { ClientEvent, MatrixEvent, Room, RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
 import { StateEvent } from '../../types/matrix/room';
 import { useStateEvent } from './useStateEvent';
+import { useMatrixClient } from './useMatrixClient';
 
 export const useRoomAvatar = (room: Room, dm?: boolean): string | undefined => {
   const avatarEvent = useStateEvent(room, StateEvent.RoomAvatar);
@@ -34,13 +35,102 @@ export const useRoomName = (room: Room): string => {
   return name;
 };
 
-export const useRoomTopic = (room: Room): string | undefined => {
+export const LOCAL_ROOM_NAMES_KEY = 'io.lotus.room_names';
+
+export type LocalRoomNamesContent = { rooms: Record<string, string> };
+
+function getLocalRoomNamesContent(mx: ReturnType<typeof useMatrixClient>): LocalRoomNamesContent {
+  // Use any-cast because LOCAL_ROOM_NAMES_KEY is not in matrix-js-sdk AccountDataEvents
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const raw: unknown = (mx as any).getAccountData(LOCAL_ROOM_NAMES_KEY)?.getContent();
+  if (
+    raw &&
+    typeof raw === 'object' &&
+    'rooms' in raw &&
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    typeof (raw as any).rooms === 'object'
+  ) {
+    return raw as LocalRoomNamesContent;
+  }
+  return { rooms: {} };
+}
+
+export const useLocalRoomName = (room: Room): string => {
+  const mx = useMatrixClient();
+
+  const getLocalName = useCallback((): string => {
+    const content = getLocalRoomNamesContent(mx);
+    return content.rooms[room.roomId] ?? room.name;
+  }, [mx, room]);
+
+  const [name, setName] = useState(getLocalName);
+
+  useEffect(() => {
+    setName(getLocalName());
+
+    const handleAccountData = (event: MatrixEvent) => {
+      if (event.getType() !== LOCAL_ROOM_NAMES_KEY) return;
+      setName(getLocalName());
+    };
+    mx.on(ClientEvent.AccountData, handleAccountData);
+
+    const handleRoomNameChange: RoomEventHandlerMap[RoomEvent.Name] = () => {
+      setName(getLocalName());
+    };
+    room.on(RoomEvent.Name, handleRoomNameChange);
+
+    return () => {
+      mx.removeListener(ClientEvent.AccountData, handleAccountData);
+      room.removeListener(RoomEvent.Name, handleRoomNameChange);
+    };
+  }, [mx, room, getLocalName]);
+
+  return name;
+};
+
+export const useHasLocalRoomName = (roomId: string): boolean => {
+  const mx = useMatrixClient();
+
+  const check = useCallback((): boolean => {
+    const content = getLocalRoomNamesContent(mx);
+    return !!content.rooms[roomId];
+  }, [mx, roomId]);
+
+  const [hasLocal, setHasLocal] = useState(check);
+
+  useEffect(() => {
+    setHasLocal(check());
+
+    const handleAccountData = (event: MatrixEvent) => {
+      if (event.getType() !== LOCAL_ROOM_NAMES_KEY) return;
+      setHasLocal(check());
+    };
+    mx.on(ClientEvent.AccountData, handleAccountData);
+    return () => {
+      mx.removeListener(ClientEvent.AccountData, handleAccountData);
+    };
+  }, [mx, check]);
+
+  return hasLocal;
+};
+
+export type RoomTopicContent = {
+  topic: string;
+  formatted_body?: string;
+  format?: string;
+};
+
+export const useRoomTopic = (room: Room): RoomTopicContent | undefined => {
   const topicEvent = useStateEvent(room, StateEvent.RoomTopic);
 
   const content = topicEvent?.getContent();
-  const topic = content && typeof content.topic === 'string' ? content.topic : undefined;
+  if (!content || typeof content.topic !== 'string') return undefined;
 
-  return topic;
+  return {
+    topic: content.topic,
+    formatted_body: typeof content.formatted_body === 'string' ? content.formatted_body : undefined,
+    format: typeof content.format === 'string' ? content.format : undefined,
+  };
 };
 
 export const useRoomJoinRule = (room: Room): RoomJoinRulesEventContent | undefined => {