Add #roomname references in chat messages (#47)

Mirrors the existing @-mention system's shape: a regex finds #roomname
tokens, extract_referenced_room_ids validates them against rooms the
*sender* actually belongs to (mirrors mentions' "must be a real member"
rule -- referencing a private room the sender isn't in would otherwise
leak its existence), and a MessageRoomReference join row is stored per
match in create_message. No notification/unread layer, unlike mentions --
referencing a room has no "you were referenced" semantics.

Rendering is the same markdown-link rewrite trick MessageContent.tsx
already uses for mentions (#username -> [#username](mention:username)),
but resolved against the *viewer's* own room list (threaded down from
ChatShellPage's room state through ChatPane/MessageList) rather than the
stored server-side reference -- a reference to a room the current viewer
isn't in quietly renders as plain text instead of a link, same as an
@mention of someone outside the room does. The href scheme renders a
real react-router Link instead of mentions' inert span, since a room
reference is meant to be navigable.

mention_service.strip_code_spans (was _strip_code_spans) is now shared
between both extraction paths rather than private to one module.

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

frontend/src/components/ChatPane.tsx

@@ -9,6 +9,7 @@ import './ChatPane.css'
 
 interface ChatPaneProps {
   room: MyRoomItem
+  rooms: MyRoomItem[]
   members: RoomMember[]
   isMobile: boolean
   onBack: () => void
@@ -20,6 +21,7 @@ interface ChatPaneProps {
 
 export function ChatPane({
   room,
+  rooms,
   members,
   isMobile,
   onBack,
@@ -192,6 +194,11 @@ export function ChatPane({
     [history, live],
   )
 
+  // #47: name -> id for every room this user belongs to, so #roomname
+  // references can resolve to a real link -- deliberately the viewer's own
+  // rooms, not the sender's (see MessageContent.tsx's myRooms prop comment).
+  const myRooms = useMemo(() => new Map(rooms.map((r) => [r.name, r.id])), [rooms])
+
   const connected = socket.connected
   const send = useCallback(
     (content: string, imageId?: string, fileId?: string) => socket.send(room.id, content, imageId, fileId),
@@ -246,6 +253,7 @@ export function ChatPane({
         roomId={room.id}
         messages={messages}
         members={members}
+        myRooms={myRooms}
         onEdit={sendEdit}
         onReact={sendReaction}
       />

frontend/src/components/MessageContent.tsx

@@ -1,5 +1,6 @@
 import Markdown from 'markdown-to-jsx'
 import type { ReactNode } from 'react'
+import { Link } from 'react-router-dom'
 import { EMOJI_SHORTCODES } from '../lib/emojiShortcodes'
 
 interface MessageContentProps {
@@ -9,6 +10,13 @@ interface MessageContentProps {
   // component for markdown file previews, where "@mentioning a person"
   // doesn't apply.
   memberUsernames?: Set<string>
+  // #47: room-name -> id, scoped to rooms the *viewer* belongs to (not the
+  // sender, and not every site room) -- resolving purely against the
+  // viewer's own room list means a reference to a private room the viewer
+  // isn't in quietly renders as plain text instead of a link, the same way
+  // an @mention of someone outside the room does. Optional for the same
+  // reason memberUsernames is (FilePreviewModal reuse).
+  myRooms?: Map<string, string>
 }
 
 interface MarkdownImageLinkProps {
@@ -38,12 +46,22 @@ interface MarkdownLinkProps {
 // highlightMentions (below) turns a validated @username into a
 // `[@username](mention:username)` link so markdown-to-jsx parses it as a
 // normal link node -- this override is what turns that back into a styled
-// span instead of an actual anchor. Everything else renders as a real link,
-// same as before mentions existed.
+// span instead of an actual anchor. highlightRoomReferences does the same
+// trick for #roomname, but a room reference *is* meant to be navigable, so
+// it becomes a real (client-side-routed) Link instead of an inert span.
+// Everything else renders as a real external link, same as before mentions
+// existed.
 function MarkdownLink({ href, children }: MarkdownLinkProps) {
   if (href?.startsWith('mention:')) {
     return <span className="message-mention">{children}</span>
   }
+  if (href?.startsWith('room:')) {
+    return (
+      <Link to={`/rooms/${href.slice('room:'.length)}`} className="message-room-reference">
+        {children}
+      </Link>
+    )
+  }
   return (
     <a href={href} target="_blank" rel="noopener noreferrer">
       {children}
@@ -118,6 +136,40 @@ function highlightMentions(text: string, memberUsernames: Set<string>): string {
     .join('\n')
 }
 
+const ROOM_REFERENCE_PATTERN = /#([a-zA-Z0-9_.-]+)/g
+
+// Same trick as highlightMentions, targeting #roomname instead of
+// @username -- turns a validated reference into `[#roomname](room:id)` so
+// the `a` override above renders it as a real link. Kept in sync with
+// backend/app/services/room_reference_service.py's matching pattern (which
+// decides what actually gets stored server-side; this is purely a display-
+// time lookup against rooms the viewer already knows about).
+function highlightRoomReferences(text: string, myRooms: Map<string, string>): string {
+  if (myRooms.size === 0) return text
+  const lines = text.split('\n')
+  let inFence = false
+  return lines
+    .map((line) => {
+      if (/^\s*```/.test(line)) {
+        inFence = !inFence
+        return line
+      }
+      if (inFence) return line
+      return line
+        .split(/(`+[^`]*`+)/g)
+        .map((part, i) =>
+          i % 2 === 0
+            ? part.replace(ROOM_REFERENCE_PATTERN, (match, roomName) => {
+                const roomId = myRooms.get(roomName)
+                return roomId ? `[${match}](room:${roomId})` : match
+              })
+            : part,
+        )
+        .join('')
+    })
+    .join('\n')
+}
+
 // CommonMark treats a single newline as a soft break (rendered as a space),
 // not a visible line break -- only a trailing double-space or blank line
 // produces one. The Composer's Shift+Enter has always inserted a plain
@@ -154,7 +206,8 @@ export const MARKDOWN_OPTIONS = {
   },
 }
 
-export function MessageContent({ content, memberUsernames }: MessageContentProps) {
+export function MessageContent({ content, memberUsernames, myRooms }: MessageContentProps) {
   const withMentions = memberUsernames ? highlightMentions(content, memberUsernames) : content
-  return <Markdown options={MARKDOWN_OPTIONS}>{preserveLineBreaks(convertShortcodes(withMentions))}</Markdown>
+  const withRoomRefs = myRooms ? highlightRoomReferences(withMentions, myRooms) : withMentions
+  return <Markdown options={MARKDOWN_OPTIONS}>{preserveLineBreaks(convertShortcodes(withRoomRefs))}</Markdown>
 }

frontend/src/components/MessageList.css

@@ -128,6 +128,19 @@
   font-weight: 700;
 }
 
+.message-room-reference {
+  background: color-mix(in srgb, var(--ds-accent) 18%, transparent);
+  color: var(--ds-accent);
+  border-radius: 5px;
+  padding: 0 4px;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.message-room-reference:hover {
+  text-decoration: underline;
+}
+
 .message-text code {
   background: var(--ds-surface-2);
   padding: 1px 5px;

frontend/src/components/MessageList.tsx

@@ -64,11 +64,12 @@ interface MessageListProps {
   roomId: string
   messages: (Message | ChatMessageEnvelope)[]
   members: RoomMember[]
+  myRooms: Map<string, string>
   onEdit: (messageId: string, content: string) => void
   onReact: (messageId: string, emoji: string) => void
 }
 
-export function MessageList({ roomId, messages, members, onEdit, onReact }: MessageListProps) {
+export function MessageList({ roomId, messages, members, myRooms, onEdit, onReact }: MessageListProps) {
   const { user } = useAuth()
   const bottomRef = useRef<HTMLDivElement>(null)
   const [editingId, setEditingId] = useState<string | null>(null)
@@ -168,7 +169,7 @@ export function MessageList({ roomId, messages, members, onEdit, onReact }: Mess
                   )}
                   {msg.content && (
                     <div className="message-text">
-                      <MessageContent content={msg.content} memberUsernames={memberUsernames} />
+                      <MessageContent content={msg.content} memberUsernames={memberUsernames} myRooms={myRooms} />
                       {msg.edited_at && <span className="message-edited"> (edited)</span>}
                     </div>
                   )}

frontend/src/pages/ChatShellPage.tsx

@@ -117,6 +117,7 @@ export function ChatShellPage() {
             <ChatPane
               key={activeRoom.id}
               room={activeRoom}
+              rooms={rooms}
               members={members}
               isMobile={isMobile}
               onBack={() => navigate('/rooms')}