Rebuild frontend from the Claude Design handoff, DarkSingularity brand

Replaces the Phase 1 placeholder UI with a single persistent app shell (top
bar + sidebar + chat pane, 860px responsive breakpoint) matching the
"PWA chat system UI" design handoff: message bubbles with consecutive-run
avatar/name grouping, auto-growing composer, room search, and the real
DarkSingularity logo (also used to regenerate the PWA icons).

The handoff didn't cover Phase 2 (private rooms, roles, invites) or
browsing/joining open rooms, so those are added using the same visual
language: a room info panel with role badges, invite-by-username with a
pending-invites list, member management (remove/promote/demote/transfer
ownership), room settings (rename/describe/delete), and separate
browse-rooms/invites-inbox modals. Unread badges, last-message preview, and
the typing indicator are deliberately deferred -- both need new backend
features (read-tracking, a WS typing event) that weren't in scope this pass.

Two small backend additions round out data the new UI needs but the API
didn't expose: MessageRead.username (historic messages had no sender name)
and InviteRead.target_username / MyInviteRead.room_name+invited_by_username
(a recipient's invite list can't otherwise resolve a room they're not in).
Both are additive; 35 backend tests still pass.

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

frontend/src/components/MessageList.tsx

@@ -1,43 +1,50 @@
 import { useEffect, useRef } from 'react'
-import type { ChatMessageEnvelope, Message } from '../types'
-
-interface DisplayMessage {
-  id: string
-  username: string
-  content: string
-  created_at: string
-}
+import { useAuth } from '../context/AuthContext'
+import { senderColorIndex } from '../lib/messageGrouping'
+import type { ChatMessageEnvelope, Message, RoomMember } from '../types'
+import { UserAvatar } from './UserAvatar'
+import './MessageList.css'
 
 interface MessageListProps {
   messages: (Message | ChatMessageEnvelope)[]
-  usernames: Record<string, string>
+  members: RoomMember[]
 }
 
-export function MessageList({ messages, usernames }: MessageListProps) {
+export function MessageList({ messages, members }: MessageListProps) {
+  const { user } = useAuth()
   const bottomRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ block: 'end' })
   }, [messages.length])
 
-  const display: DisplayMessage[] = messages.map((m) => ({
-    id: m.id,
-    content: m.content,
-    created_at: m.created_at,
-    username: 'username' in m ? m.username : usernames[m.user_id] ?? m.user_id,
-  }))
-
   return (
-    <div style={{ flex: 1, overflowY: 'auto', padding: '0.5rem' }}>
-      {display.map((m) => (
-        <div key={m.id} style={{ marginBottom: '0.5rem' }}>
-          <strong>{m.username}</strong>{' '}
-          <span style={{ color: '#888', fontSize: '0.8em' }}>
-            {new Date(m.created_at).toLocaleTimeString()}
-          </span>
-          <div>{m.content}</div>
-        </div>
-      ))}
+    <div className="message-list">
+      {messages.map((msg, i) => {
+        const mine = msg.user_id === user?.id
+        const prev = messages[i - 1]
+        const showAvatar = !mine && (!prev || prev.user_id !== msg.user_id)
+        const showName = showAvatar
+
+        return (
+          <div key={msg.id} className={`message-row${mine ? ' message-row-mine' : ''}`}>
+            {!mine && (
+              <div className="message-avatar-slot">
+                {showAvatar && (
+                  <UserAvatar username={msg.username} colorIndex={senderColorIndex(msg.username, members)} />
+                )}
+              </div>
+            )}
+            <div className="message-bubble-wrap">
+              {showName && <div className="message-author">{msg.username}</div>}
+              <div className={`message-bubble${mine ? ' message-bubble-mine' : ''}`}>{msg.content}</div>
+              <div className="message-time">
+                {new Date(msg.created_at).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
+              </div>
+            </div>
+          </div>
+        )
+      })}
       <div ref={bottomRef} />
     </div>
   )