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>

backend/app/routers/invites.py

@@ -6,7 +6,7 @@ from sqlalchemy.ext.asyncio import AsyncSession
 from app.database import get_db
 from app.dependencies import get_current_user
 from app.models import User
-from app.schemas.invite import InviteRead
+from app.schemas.invite import InviteRead, MyInviteRead
 from app.schemas.room import RoomMemberRead
 from app.services.invite_service import (
     InviteExpiredError,
@@ -21,12 +21,26 @@ from app.services.invite_service import (
 router = APIRouter(prefix="/api/invites", tags=["invites"])
 
 
-@router.get("/mine", response_model=list[InviteRead])
+@router.get("/mine", response_model=list[MyInviteRead])
 async def list_my_invites_endpoint(
     current_user: User = Depends(get_current_user),
     db: AsyncSession = Depends(get_db),
 ):
-    return await list_my_invites(db, current_user.id)
+    invites = await list_my_invites(db, current_user.id)
+    return [
+        MyInviteRead(
+            id=i.id,
+            room_id=i.room_id,
+            invited_by=i.invited_by,
+            target_user_id=i.target_user_id,
+            status=i.status,
+            expires_at=i.expires_at,
+            created_at=i.created_at,
+            room_name=i.room.name,
+            invited_by_username=i.inviter.username,
+        )
+        for i in invites
+    ]
 
 
 @router.post("/{invite_id}/accept", response_model=RoomMemberRead)

backend/app/routers/rooms.py

@@ -257,7 +257,31 @@ async def get_room_messages_endpoint(
     db: AsyncSession = Depends(get_db),
 ):
     await require_room_member(room_id, current_user, db)
-    return await list_recent_messages(db, room_id, limit)
+    messages = await list_recent_messages(db, room_id, limit)
+    return [
+        MessageRead(
+            id=m.id,
+            room_id=m.room_id,
+            user_id=m.user_id,
+            username=m.user.username,
+            content=m.content,
+            created_at=m.created_at,
+        )
+        for m in messages
+    ]
+
+
+def _to_invite_read(invite) -> InviteRead:
+    return InviteRead(
+        id=invite.id,
+        room_id=invite.room_id,
+        invited_by=invite.invited_by,
+        target_user_id=invite.target_user_id,
+        target_username=invite.target_user.username if invite.target_user else None,
+        status=invite.status,
+        expires_at=invite.expires_at,
+        created_at=invite.created_at,
+    )
 
 
 @router.post("/{room_id}/invites", response_model=InviteRead, status_code=201)
@@ -269,13 +293,14 @@ async def create_invite_endpoint(
 ):
     await require_room_role(room_id, current_user, db, RoomRole.admin)
     try:
-        return await create_invite(db, room_id, current_user.id, data.target_username)
+        invite = await create_invite(db, room_id, current_user.id, data.target_username)
     except TargetUserNotFoundError:
         raise HTTPException(status_code=404, detail="No user with that username")
     except AlreadyMemberError:
         raise HTTPException(status_code=409, detail="That user is already a member")
     except DuplicateInviteError:
         raise HTTPException(status_code=409, detail="That user already has a pending invite")
+    return _to_invite_read(invite)
 
 
 @router.get("/{room_id}/invites", response_model=list[InviteRead])
@@ -285,7 +310,8 @@ async def list_room_invites_endpoint(
     db: AsyncSession = Depends(get_db),
 ):
     await require_room_role(room_id, current_user, db, RoomRole.admin)
-    return await list_room_invites(db, room_id)
+    invites = await list_room_invites(db, room_id)
+    return [_to_invite_read(i) for i in invites]
 
 
 @router.delete("/{room_id}/invites/{invite_id}", status_code=204)

backend/app/schemas/invite.py

@@ -17,6 +17,15 @@ class InviteRead(BaseModel):
     room_id: uuid.UUID
     invited_by: uuid.UUID
     target_user_id: uuid.UUID | None
+    target_username: str | None = None
     status: InviteStatus
     expires_at: datetime
     created_at: datetime
+
+
+class MyInviteRead(InviteRead):
+    """InviteRead plus context the recipient can't otherwise resolve client-side --
+    GET /api/invites/mine is for rooms the user isn't a member of yet."""
+
+    room_name: str
+    invited_by_username: str

backend/app/schemas/message.py

@@ -10,5 +10,6 @@ class MessageRead(BaseModel):
     id: uuid.UUID
     room_id: uuid.UUID
     user_id: uuid.UUID
+    username: str
     content: str
     created_at: datetime

backend/app/services/invite_service.py

@@ -72,14 +72,15 @@ async def create_invite(
     db.add(invite)
     await db.commit()
     await db.refresh(invite)
+    invite.target_user = target
     return invite
 
 
 async def list_room_invites(db: AsyncSession, room_id: uuid.UUID) -> list[RoomInvite]:
     result = await db.execute(
-        select(RoomInvite).where(
-            RoomInvite.room_id == room_id, RoomInvite.status == InviteStatus.pending
-        )
+        select(RoomInvite)
+        .where(RoomInvite.room_id == room_id, RoomInvite.status == InviteStatus.pending)
+        .options(selectinload(RoomInvite.target_user))
     )
     return list(result.scalars().all())
 
@@ -92,7 +93,7 @@ async def list_my_invites(db: AsyncSession, user_id: uuid.UUID) -> list[RoomInvi
             RoomInvite.status == InviteStatus.pending,
             RoomInvite.expires_at > datetime.now(timezone.utc),
         )
-        .options(selectinload(RoomInvite.room))
+        .options(selectinload(RoomInvite.room), selectinload(RoomInvite.inviter))
     )
     return list(result.scalars().all())
 

backend/app/services/message_service.py

@@ -2,6 +2,7 @@ import uuid
 
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
+from sqlalchemy.orm import selectinload
 
 from app.models import Message
 
@@ -22,6 +23,7 @@ async def list_recent_messages(
     result = await db.execute(
         select(Message)
         .where(Message.room_id == room_id)
+        .options(selectinload(Message.user))
         .order_by(Message.created_at.desc())
         .limit(limit)
     )

backend/tests/test_invites.py

@@ -49,6 +49,11 @@ async def test_invite_accept_flow(client, db_session):
     assert resp.status_code == 201
     invite = resp.json()
     assert invite["status"] == "pending"
+    assert invite["target_username"] == "bob"
+
+    resp = await client.get(f"/api/rooms/{room['id']}/invites")
+    assert resp.status_code == 200
+    assert resp.json()[0]["target_username"] == "bob"
 
     await client.post("/api/auth/logout")
     await login_as(client, "bob")
@@ -58,6 +63,8 @@ async def test_invite_accept_flow(client, db_session):
     mine = resp.json()
     assert len(mine) == 1
     assert mine[0]["id"] == invite["id"]
+    assert mine[0]["room_name"] == room["name"]
+    assert mine[0]["invited_by_username"] == "alice"
 
     resp = await client.post(f"/api/invites/{invite['id']}/accept")
     assert resp.status_code == 200

backend/tests/test_ws_chat.py

@@ -60,8 +60,8 @@ def test_ws_join_and_message_roundtrip(ws_client):
 
     resp = ws_client.get(f"/api/rooms/{room['id']}/messages")
     assert resp.status_code == 200
-    contents = [m["content"] for m in resp.json()]
-    assert "hello" in contents
+    history = resp.json()
+    assert any(m["content"] == "hello" and m["username"] == username for m in history)
 
 
 def test_ws_message_without_join_errors(ws_client):

frontend/src/App.tsx

@@ -2,8 +2,7 @@ import { Navigate, Route, Routes } from 'react-router-dom'
 import { AuthProvider } from './context/AuthContext'
 import { ProtectedRoute } from './components/ProtectedRoute'
 import { LoginPage } from './pages/LoginPage'
-import { RoomListPage } from './pages/RoomListPage'
-import { ChatRoomPage } from './pages/ChatRoomPage'
+import { ChatShellPage } from './pages/ChatShellPage'
 
 function App() {
   return (
@@ -14,7 +13,7 @@ function App() {
           path="/rooms"
           element={
             <ProtectedRoute>
-              <RoomListPage />
+              <ChatShellPage />
             </ProtectedRoute>
           }
         />
@@ -22,7 +21,7 @@ function App() {
           path="/rooms/:roomId"
           element={
             <ProtectedRoute>
-              <ChatRoomPage />
+              <ChatShellPage />
             </ProtectedRoute>
           }
         />

frontend/src/api/invites.ts

@@ -0,0 +1,29 @@
+import { apiFetch } from './client'
+import type { Invite, MyInvite, RoomMember } from '../types'
+
+export function createInvite(roomId: string, targetUsername: string): Promise<Invite> {
+  return apiFetch<Invite>(`/api/rooms/${roomId}/invites`, {
+    method: 'POST',
+    body: JSON.stringify({ target_username: targetUsername }),
+  })
+}
+
+export function listRoomInvites(roomId: string): Promise<Invite[]> {
+  return apiFetch<Invite[]>(`/api/rooms/${roomId}/invites`)
+}
+
+export function revokeInvite(roomId: string, inviteId: string): Promise<void> {
+  return apiFetch<void>(`/api/rooms/${roomId}/invites/${inviteId}`, { method: 'DELETE' })
+}
+
+export function listMyInvites(): Promise<MyInvite[]> {
+  return apiFetch<MyInvite[]>('/api/invites/mine')
+}
+
+export function acceptInvite(inviteId: string): Promise<RoomMember> {
+  return apiFetch<RoomMember>(`/api/invites/${inviteId}/accept`, { method: 'POST' })
+}
+
+export function declineInvite(inviteId: string): Promise<Invite> {
+  return apiFetch<Invite>(`/api/invites/${inviteId}/decline`, { method: 'POST' })
+}

frontend/src/api/rooms.ts

@@ -1,21 +1,73 @@
 import { apiFetch } from './client'
-import type { Message, Room, RoomListItem } from '../types'
+import type { Message, MyRoomItem, Room, RoomListItem, RoomMember, RoomRole } from '../types'
 
 export function listRooms(): Promise<RoomListItem[]> {
   return apiFetch<RoomListItem[]>('/api/rooms')
 }
 
-export function createRoom(name: string, description?: string): Promise<Room> {
+export function listMyRooms(): Promise<MyRoomItem[]> {
+  return apiFetch<MyRoomItem[]>('/api/rooms/mine')
+}
+
+export function createRoom(
+  name: string,
+  description?: string,
+  isPrivate = false,
+): Promise<Room> {
   return apiFetch<Room>('/api/rooms', {
     method: 'POST',
-    body: JSON.stringify({ name, description: description || null }),
+    body: JSON.stringify({ name, description: description || null, is_private: isPrivate }),
   })
 }
 
+export function updateRoom(
+  roomId: string,
+  data: { name?: string; description?: string },
+): Promise<Room> {
+  return apiFetch<Room>(`/api/rooms/${roomId}`, {
+    method: 'PATCH',
+    body: JSON.stringify(data),
+  })
+}
+
+export function deleteRoom(roomId: string): Promise<void> {
+  return apiFetch<void>(`/api/rooms/${roomId}`, { method: 'DELETE' })
+}
+
 export function joinRoom(roomId: string): Promise<Room> {
   return apiFetch<Room>(`/api/rooms/${roomId}/join`, { method: 'POST' })
 }
 
+export function leaveRoom(roomId: string): Promise<void> {
+  return apiFetch<void>(`/api/rooms/${roomId}/leave`, { method: 'POST' })
+}
+
+export function listRoomMembers(roomId: string): Promise<RoomMember[]> {
+  return apiFetch<RoomMember[]>(`/api/rooms/${roomId}/members`)
+}
+
+export function removeMember(roomId: string, userId: string): Promise<void> {
+  return apiFetch<void>(`/api/rooms/${roomId}/members/${userId}`, { method: 'DELETE' })
+}
+
+export function changeMemberRole(
+  roomId: string,
+  userId: string,
+  role: RoomRole,
+): Promise<RoomMember> {
+  return apiFetch<RoomMember>(`/api/rooms/${roomId}/members/${userId}`, {
+    method: 'PATCH',
+    body: JSON.stringify({ role }),
+  })
+}
+
+export function transferOwnership(roomId: string, newOwnerUserId: string): Promise<Room> {
+  return apiFetch<Room>(`/api/rooms/${roomId}/transfer-ownership`, {
+    method: 'POST',
+    body: JSON.stringify({ new_owner_user_id: newOwnerUserId }),
+  })
+}
+
 export function getRoomMessages(roomId: string): Promise<Message[]> {
   return apiFetch<Message[]>(`/api/rooms/${roomId}/messages`)
 }

frontend/src/components/BrowseRoomsModal.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react'
+import { ApiError } from '../api/client'
+import { joinRoom, listRooms } from '../api/rooms'
+import type { RoomListItem } from '../types'
+import { RoomAvatar } from './RoomAvatar'
+import './Modal.css'
+
+interface BrowseRoomsModalProps {
+  onClose: () => void
+  onJoined: (roomId: string) => void
+}
+
+export function BrowseRoomsModal({ onClose, onJoined }: BrowseRoomsModalProps) {
+  const [rooms, setRooms] = useState<RoomListItem[]>([])
+  const [loading, setLoading] = useState(true)
+  const [joiningId, setJoiningId] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    listRooms()
+      .then(setRooms)
+      .catch((err) => setError(err instanceof ApiError ? err.message : String(err)))
+      .finally(() => setLoading(false))
+  }, [])
+
+  async function handleJoin(roomId: string) {
+    setJoiningId(roomId)
+    setError(null)
+    try {
+      await joinRoom(roomId)
+      onJoined(roomId)
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : String(err))
+    } finally {
+      setJoiningId(null)
+    }
+  }
+
+  const joinable = rooms.filter((r) => !r.is_member)
+
+  return (
+    <div className="modal-scrim" onClick={onClose}>
+      <div className="modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>Browse open rooms</h2>
+          <button type="button" className="modal-close" onClick={onClose} aria-label="Close">
+            &times;
+          </button>
+        </div>
+
+        {error && <p className="modal-error">{error}</p>}
+
+        {loading ? (
+          <p className="modal-empty">Loading...</p>
+        ) : joinable.length === 0 ? (
+          <p className="modal-empty">No open rooms to join right now.</p>
+        ) : (
+          joinable.map((room, i) => (
+            <div key={room.id} className="modal-list-row">
+              <RoomAvatar colorIndex={i} size={30} />
+              <div className="modal-list-row-body">
+                <div className="modal-list-row-title">{room.name}</div>
+                {room.description && <div className="modal-list-row-sub">{room.description}</div>}
+              </div>
+              <button
+                type="button"
+                className="btn-secondary"
+                disabled={joiningId === room.id}
+                onClick={() => handleJoin(room.id)}
+              >
+                Join
+              </button>
+            </div>
+          ))
+        )}
+
+        <div className="modal-actions" style={{ marginTop: '1rem' }}>
+          <button type="button" className="btn-secondary" onClick={onClose}>
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/ChatPane.css

@@ -0,0 +1,72 @@
+.chat-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  background: var(--ds-void);
+}
+
+.chat-pane-header {
+  height: 56px;
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 0 var(--sp-4);
+  border-bottom: 1px solid var(--ds-border);
+  background: var(--ds-surface);
+}
+
+.chat-pane-back {
+  background: transparent;
+  border: none;
+  color: var(--ds-muted);
+  cursor: pointer;
+  display: flex;
+  padding: 4px;
+  flex: none;
+}
+
+.chat-pane-title-block {
+  min-width: 0;
+  flex: 1;
+}
+
+.chat-pane-title {
+  font-weight: 700;
+  font-size: 0.96rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chat-pane-subtitle {
+  font-size: 0.76rem;
+  color: var(--ds-muted);
+}
+
+.chat-pane-info-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius);
+  background: transparent;
+  border: 1px solid var(--ds-border);
+  color: var(--ds-accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex: none;
+}
+
+.chat-pane-info-btn-active {
+  background: var(--ds-surface-2);
+}
+
+.chat-pane-error {
+  color: var(--ds-danger);
+  font-size: 0.86rem;
+  padding: var(--sp-2) var(--sp-4) 0;
+  margin: 0;
+}

frontend/src/components/ChatPane.tsx

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { getRoomMessages } from '../api/rooms'
+import { useChatSocket } from '../ws/useChatSocket'
+import type { ChatMessageEnvelope, Message, MyRoomItem, RoomMember, ServerEnvelope } from '../types'
+import { Composer } from './Composer'
+import { MessageList } from './MessageList'
+import './ChatPane.css'
+
+interface ChatPaneProps {
+  room: MyRoomItem
+  members: RoomMember[]
+  isMobile: boolean
+  onBack: () => void
+  onToggleInfo: () => void
+  infoOpen: boolean
+}
+
+export function ChatPane({ room, members, isMobile, onBack, onToggleInfo, infoOpen }: ChatPaneProps) {
+  const navigate = useNavigate()
+  const [history, setHistory] = useState<Message[]>([])
+  const [live, setLive] = useState<ChatMessageEnvelope[]>([])
+  const [wsError, setWsError] = useState<string | null>(null)
+
+  useEffect(() => {
+    setHistory([])
+    setLive([])
+    setWsError(null)
+    getRoomMessages(room.id).then(setHistory).catch((err) => setWsError(String(err)))
+  }, [room.id])
+
+  const onMessage = useCallback((envelope: ServerEnvelope) => {
+    if (envelope.type === 'message') {
+      setLive((prev) => [...prev, envelope])
+    } else if (envelope.type === 'error') {
+      setWsError(envelope.detail)
+    }
+  }, [])
+
+  const onUnauthenticated = useCallback(() => navigate('/login'), [navigate])
+
+  const { connected, send } = useChatSocket({ roomId: room.id, onMessage, onUnauthenticated })
+
+  return (
+    <section className="chat-pane">
+      <header className="chat-pane-header">
+        {isMobile && (
+          <button type="button" className="chat-pane-back" onClick={onBack} aria-label="Back to rooms">
+            <svg width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+              <polyline points="14,4 6,10 14,16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </button>
+        )}
+        <div className="chat-pane-title-block">
+          <div className="chat-pane-title">#{room.name}</div>
+          <div className="chat-pane-subtitle">{members.length} member{members.length === 1 ? '' : 's'}</div>
+        </div>
+        <button
+          type="button"
+          className={`chat-pane-info-btn${infoOpen ? ' chat-pane-info-btn-active' : ''}`}
+          onClick={onToggleInfo}
+          aria-label="Room details"
+          aria-pressed={infoOpen}
+        >
+          <svg width="15" height="15" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+            <circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.6" />
+            <circle cx="10" cy="6.4" r="1" fill="currentColor" />
+            <rect x="9" y="9" width="2" height="6" rx="1" fill="currentColor" />
+          </svg>
+        </button>
+      </header>
+
+      {wsError && <p className="chat-pane-error">{wsError}</p>}
+
+      <MessageList messages={[...history, ...live]} members={members} />
+      <Composer roomName={room.name} disabled={!connected} onSend={send} />
+    </section>
+  )
+}

frontend/src/components/Composer.css

@@ -0,0 +1,44 @@
+.composer {
+  padding: var(--sp-3) var(--sp-4);
+  border-top: 1px solid var(--ds-border);
+  background: var(--ds-surface);
+  display: flex;
+  gap: var(--sp-2);
+  align-items: flex-end;
+}
+
+.composer textarea {
+  flex: 1;
+  resize: none;
+  background: var(--ds-surface-2);
+  border: 1px solid var(--ds-border);
+  border-radius: var(--radius);
+  padding: 9px 12px;
+  color: var(--ds-text);
+  font-size: 0.88rem;
+  outline: none;
+  max-height: 120px;
+}
+
+.composer textarea:focus {
+  border-color: var(--ds-accent);
+}
+
+.composer-send {
+  width: 36px;
+  height: 36px;
+  flex: none;
+  border-radius: var(--radius);
+  background: var(--ds-accent);
+  color: var(--ds-void);
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.composer-send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

frontend/src/components/Composer.tsx

@@ -0,0 +1,63 @@
+import { useRef, useState, type KeyboardEvent } from 'react'
+import './Composer.css'
+
+interface ComposerProps {
+  roomName: string
+  disabled?: boolean
+  onSend: (content: string) => void
+}
+
+export function Composer({ roomName, disabled, onSend }: ComposerProps) {
+  const [value, setValue] = useState('')
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  function autoGrow() {
+    const el = textareaRef.current
+    if (!el) return
+    el.style.height = 'auto'
+    el.style.height = `${Math.min(el.scrollHeight, 120)}px`
+  }
+
+  function handleSend() {
+    const trimmed = value.trim()
+    if (!trimmed) return
+    onSend(trimmed)
+    setValue('')
+    requestAnimationFrame(autoGrow)
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSend()
+    }
+  }
+
+  return (
+    <div className="composer">
+      <textarea
+        ref={textareaRef}
+        rows={1}
+        value={value}
+        disabled={disabled}
+        onChange={(e) => {
+          setValue(e.target.value)
+          autoGrow()
+        }}
+        onKeyDown={handleKeyDown}
+        placeholder={`Message #${roomName}`}
+      />
+      <button
+        type="button"
+        className="composer-send"
+        onClick={handleSend}
+        disabled={disabled || !value.trim()}
+        aria-label="Send message"
+      >
+        <svg width="15" height="15" viewBox="0 0 20 20" aria-hidden="true">
+          <polygon points="2,2 18,10 2,18 6,10" fill="currentColor" />
+        </svg>
+      </button>
+    </div>
+  )
+}

frontend/src/components/InvitesModal.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react'
+import { acceptInvite, declineInvite, listMyInvites } from '../api/invites'
+import { ApiError } from '../api/client'
+import type { MyInvite } from '../types'
+import './Modal.css'
+
+interface InvitesModalProps {
+  onClose: () => void
+  onAccepted: (roomId: string) => void
+  onInvitesChanged: (count: number) => void
+}
+
+export function InvitesModal({ onClose, onAccepted, onInvitesChanged }: InvitesModalProps) {
+  const [invites, setInvites] = useState<MyInvite[]>([])
+  const [loading, setLoading] = useState(true)
+  const [busyId, setBusyId] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  async function refresh() {
+    const list = await listMyInvites()
+    setInvites(list)
+    onInvitesChanged(list.length)
+  }
+
+  useEffect(() => {
+    refresh()
+      .catch((err) => setError(err instanceof ApiError ? err.message : String(err)))
+      .finally(() => setLoading(false))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  async function handleAccept(invite: MyInvite) {
+    setBusyId(invite.id)
+    setError(null)
+    try {
+      await acceptInvite(invite.id)
+      await refresh()
+      onAccepted(invite.room_id)
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : String(err))
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  async function handleDecline(invite: MyInvite) {
+    setBusyId(invite.id)
+    setError(null)
+    try {
+      await declineInvite(invite.id)
+      await refresh()
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : String(err))
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  return (
+    <div className="modal-scrim" onClick={onClose}>
+      <div className="modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>Your invites</h2>
+          <button type="button" className="modal-close" onClick={onClose} aria-label="Close">
+            &times;
+          </button>
+        </div>
+
+        {error && <p className="modal-error">{error}</p>}
+
+        {loading ? (
+          <p className="modal-empty">Loading...</p>
+        ) : invites.length === 0 ? (
+          <p className="modal-empty">No pending invites.</p>
+        ) : (
+          invites.map((invite) => (
+            <div key={invite.id} className="modal-list-row">
+              <div className="modal-list-row-body">
+                <div className="modal-list-row-title">{invite.room_name}</div>
+                <div className="modal-list-row-sub">Invited by {invite.invited_by_username}</div>
+              </div>
+              <div style={{ display: 'flex', gap: '0.5rem' }}>
+                <button
+                  type="button"
+                  className="btn-secondary"
+                  disabled={busyId === invite.id}
+                  onClick={() => handleDecline(invite)}
+                >
+                  Decline
+                </button>
+                <button
+                  type="button"
+                  className="btn-primary"
+                  disabled={busyId === invite.id}
+                  onClick={() => handleAccept(invite)}
+                >
+                  Accept
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+
+        <div className="modal-actions" style={{ marginTop: '1rem' }}>
+          <button type="button" className="btn-secondary" onClick={onClose}>
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/MessageInput.tsx

@@ -1,33 +0,0 @@
-import { useState, type FormEvent } from 'react'
-
-interface MessageInputProps {
-  disabled?: boolean
-  onSend: (content: string) => void
-}
-
-export function MessageInput({ disabled, onSend }: MessageInputProps) {
-  const [value, setValue] = useState('')
-
-  function handleSubmit(e: FormEvent) {
-    e.preventDefault()
-    const trimmed = value.trim()
-    if (!trimmed) return
-    onSend(trimmed)
-    setValue('')
-  }
-
-  return (
-    <form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.5rem', padding: '0.5rem' }}>
-      <input
-        style={{ flex: 1 }}
-        value={value}
-        disabled={disabled}
-        onChange={(e) => setValue(e.target.value)}
-        placeholder="Message..."
-      />
-      <button type="submit" disabled={disabled || !value.trim()}>
-        Send
-      </button>
-    </form>
-  )
-}

frontend/src/components/MessageList.css

@@ -0,0 +1,64 @@
+.message-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--sp-4);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.message-row {
+  display: flex;
+  gap: var(--sp-2);
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+
+.message-row-mine {
+  justify-content: flex-end;
+}
+
+.message-avatar-slot {
+  width: 28px;
+  flex: none;
+}
+
+.message-bubble-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: 65%;
+}
+
+.message-row-mine .message-bubble-wrap {
+  align-items: flex-end;
+}
+
+.message-author {
+  font-size: 0.76rem;
+  color: var(--ds-muted);
+  margin-bottom: 3px;
+  font-weight: 600;
+}
+
+.message-bubble {
+  background: var(--ds-surface-2);
+  color: var(--ds-text);
+  padding: 8px 12px;
+  border-radius: 10px;
+  font-size: 0.88rem;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.message-bubble-mine {
+  background: var(--ds-accent-2);
+}
+
+.message-time {
+  font-size: 0.68rem;
+  color: var(--ds-muted);
+  margin-top: 3px;
+  font-family: var(--mono);
+}

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>
   )

frontend/src/components/Modal.css

@@ -0,0 +1,184 @@
+.modal-scrim {
+  position: fixed;
+  inset: 0;
+  background: rgba(7, 8, 15, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 40;
+  padding: var(--sp-4);
+}
+
+.modal {
+  width: min(380px, 100%);
+  max-height: 80vh;
+  overflow-y: auto;
+  background: var(--ds-surface);
+  border: 1px solid var(--ds-border);
+  border-radius: var(--radius);
+  padding: var(--sp-6);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--sp-4);
+}
+
+.modal-header h2 {
+  font-weight: 700;
+  font-size: 1rem;
+  margin: 0;
+}
+
+.modal-close {
+  background: transparent;
+  border: none;
+  color: var(--ds-muted);
+  cursor: pointer;
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.modal-field-label {
+  font-size: 0.78rem;
+  color: var(--ds-muted);
+  margin-bottom: 6px;
+}
+
+.modal input[type='text'],
+.modal textarea {
+  width: 100%;
+  background: var(--ds-surface-2);
+  border: 1px solid var(--ds-border);
+  border-radius: var(--radius);
+  padding: 9px 10px;
+  color: var(--ds-text);
+  font-family: var(--sans);
+  font-size: 0.88rem;
+  outline: none;
+  margin-bottom: var(--sp-4);
+}
+
+.modal input[type='text']:focus,
+.modal textarea:focus {
+  border-color: var(--ds-accent);
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--sp-2);
+}
+
+.modal-error {
+  color: var(--ds-danger);
+  font-size: 0.82rem;
+  margin: -8px 0 var(--sp-3);
+}
+
+.toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-3);
+  margin-bottom: var(--sp-4);
+}
+
+.toggle-row .toggle-label {
+  display: flex;
+  flex-direction: column;
+}
+
+.toggle-row .toggle-label .t {
+  font-size: 0.86rem;
+  font-weight: 700;
+}
+
+.toggle-row .toggle-label .d {
+  font-size: 0.74rem;
+  color: var(--ds-muted);
+}
+
+.switch {
+  position: relative;
+  width: 38px;
+  height: 22px;
+  flex: none;
+}
+
+.switch input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.switch .track {
+  position: absolute;
+  inset: 0;
+  background: var(--ds-border);
+  border-radius: var(--radius-pill);
+  transition: background 0.15s ease;
+  pointer-events: none;
+}
+
+.switch .track::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--radius-pill);
+  background: var(--ds-text);
+  transition: transform 0.15s ease;
+}
+
+.switch input:checked + .track {
+  background: var(--ds-accent);
+}
+
+.switch input:checked + .track::after {
+  transform: translateX(16px);
+  background: var(--ds-void);
+}
+
+.modal-empty {
+  color: var(--ds-muted);
+  font-size: 0.86rem;
+  padding: var(--sp-4) 0;
+  text-align: center;
+}
+
+.modal-list-row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-2) 0;
+  border-bottom: 1px solid var(--ds-border);
+}
+
+.modal-list-row:last-child {
+  border-bottom: none;
+}
+
+.modal-list-row-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.modal-list-row-title {
+  font-weight: 600;
+  font-size: 0.88rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.modal-list-row-sub {
+  font-size: 0.76rem;
+  color: var(--ds-muted);
+}

frontend/src/components/NewRoomModal.tsx

@@ -0,0 +1,86 @@
+import { useState, type FormEvent } from 'react'
+import { ApiError } from '../api/client'
+import { createRoom } from '../api/rooms'
+import './Modal.css'
+
+interface NewRoomModalProps {
+  onClose: () => void
+  onCreated: (roomId: string) => void
+}
+
+export function NewRoomModal({ onClose, onCreated }: NewRoomModalProps) {
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [isPrivate, setIsPrivate] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault()
+    const trimmed = name.trim()
+    if (!trimmed) return
+    setSubmitting(true)
+    setError(null)
+    try {
+      const room = await createRoom(trimmed, description.trim(), isPrivate)
+      onCreated(room.id)
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : String(err))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="modal-scrim" onClick={onClose}>
+      <div className="modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>New Conversation</h2>
+          <button type="button" className="modal-close" onClick={onClose} aria-label="Close">
+            &times;
+          </button>
+        </div>
+        <form onSubmit={handleSubmit}>
+          <div className="modal-field-label">Room name</div>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="e.g. networking"
+            autoFocus
+          />
+          <div className="modal-field-label">Description (optional)</div>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="What's this room for?"
+            rows={2}
+          />
+          <div className="toggle-row">
+            <div className="toggle-label">
+              <span className="t">Private room</span>
+              <span className="d">Joinable by invite only</span>
+            </div>
+            <label className="switch">
+              <input
+                type="checkbox"
+                checked={isPrivate}
+                onChange={(e) => setIsPrivate(e.target.checked)}
+              />
+              <span className="track" />
+            </label>
+          </div>
+          {error && <p className="modal-error">{error}</p>}
+          <div className="modal-actions">
+            <button type="button" className="btn-secondary" onClick={onClose}>
+              Cancel
+            </button>
+            <button type="submit" className="btn-primary" disabled={submitting || !name.trim()}>
+              Create
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

frontend/src/components/RoomAvatar.css

@@ -0,0 +1,11 @@
+.room-avatar {
+  border-radius: var(--radius);
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--mono);
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--ds-void);
+}

frontend/src/components/RoomAvatar.tsx

@@ -0,0 +1,18 @@
+import { accentForIndex } from '../lib/avatar'
+import './RoomAvatar.css'
+
+interface RoomAvatarProps {
+  colorIndex: number
+  size?: number
+}
+
+export function RoomAvatar({ colorIndex, size = 34 }: RoomAvatarProps) {
+  return (
+    <div
+      className="room-avatar"
+      style={{ width: size, height: size, background: accentForIndex(colorIndex) }}
+    >
+      #
+    </div>
+  )
+}

frontend/src/components/RoomInfoPanel.css

@@ -0,0 +1,239 @@
+.room-info-panel {
+  width: 260px;
+  min-width: 260px;
+  border-left: 1px solid var(--ds-border);
+  background: var(--ds-void-2);
+  padding: var(--sp-4);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.room-info-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--sp-4);
+}
+
+.room-info-header-label {
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ds-muted);
+}
+
+.room-info-close {
+  background: transparent;
+  border: none;
+  color: var(--ds-muted);
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  padding: 2px;
+}
+
+.room-info-summary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: var(--sp-6);
+}
+
+.room-info-name {
+  font-weight: 700;
+}
+
+.room-info-sub {
+  font-size: 0.78rem;
+  color: var(--ds-muted);
+}
+
+.room-info-section {
+  margin-bottom: var(--sp-6);
+}
+
+.room-info-label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ds-muted);
+  margin-bottom: var(--sp-2);
+}
+
+.room-info-member-row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 6px 0;
+  flex-wrap: wrap;
+}
+
+.room-info-member-name {
+  font-size: 0.84rem;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.room-info-member-actions {
+  display: flex;
+  gap: 6px;
+  width: 100%;
+  padding-left: 32px;
+}
+
+.room-info-member-actions button {
+  background: transparent;
+  border: 1px solid var(--ds-border);
+  color: var(--ds-muted);
+  font-size: 0.7rem;
+  padding: 3px 7px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.room-info-member-actions button:hover {
+  color: var(--ds-text);
+  border-color: var(--ds-accent);
+}
+
+.role-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--radius-pill);
+  font-size: 0.68rem;
+  font-weight: 800;
+  padding: 2px 8px;
+  text-transform: capitalize;
+  flex: none;
+}
+
+.role-badge-owner {
+  border: 1px solid color-mix(in srgb, var(--ds-highlight) 50%, transparent);
+  background: color-mix(in srgb, var(--ds-highlight) 14%, transparent);
+  color: var(--ds-highlight);
+}
+
+.role-badge-admin {
+  border: 1px solid color-mix(in srgb, var(--ds-accent-2) 50%, transparent);
+  background: color-mix(in srgb, var(--ds-accent-2) 14%, transparent);
+  color: #b9b3ff;
+}
+
+.role-badge-member {
+  border: 1px solid var(--ds-border);
+  background: transparent;
+  color: var(--ds-muted);
+}
+
+.room-info-invite-form {
+  display: flex;
+  gap: var(--sp-2);
+}
+
+.room-info-invite-form input {
+  flex: 1;
+  background: var(--ds-surface-2);
+  border: 1px solid var(--ds-border);
+  border-radius: var(--radius);
+  padding: 7px 10px;
+  color: var(--ds-text);
+  font-size: 0.84rem;
+}
+
+.room-info-pending {
+  margin-top: var(--sp-2);
+}
+
+.room-info-pending-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.82rem;
+  color: var(--ds-text);
+  padding: 5px 0;
+}
+
+.room-info-error {
+  color: var(--ds-danger);
+  font-size: 0.78rem;
+  margin: 6px 0 0;
+}
+
+.room-info-settings-toggle {
+  background: transparent;
+  border: 1px solid var(--ds-border);
+  color: var(--ds-text);
+  border-radius: var(--radius);
+  padding: 7px 10px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+}
+
+.room-info-settings-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+  margin-top: var(--sp-2);
+}
+
+.room-info-settings-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 0.76rem;
+  color: var(--ds-muted);
+}
+
+.room-info-settings-form input,
+.room-info-settings-form textarea {
+  background: var(--ds-surface-2);
+  border: 1px solid var(--ds-border);
+  border-radius: var(--radius);
+  padding: 7px 10px;
+  color: var(--ds-text);
+  font-size: 0.84rem;
+  font-family: var(--sans);
+  resize: vertical;
+}
+
+.room-info-danger-link {
+  background: transparent;
+  border: none;
+  color: var(--ds-danger);
+  font-size: 0.78rem;
+  cursor: pointer;
+  padding: 4px 0;
+  text-align: left;
+}
+
+.room-info-leave {
+  margin-top: auto;
+  align-self: flex-start;
+  background: transparent;
+  border: 1px solid color-mix(in srgb, var(--ds-danger) 45%, transparent);
+  color: var(--ds-danger);
+  border-radius: var(--radius);
+  padding: 8px 14px;
+  font-size: 0.86rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.room-info-leave:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--ds-danger) 12%, transparent);
+}
+
+.room-info-leave:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

frontend/src/components/RoomInfoPanel.tsx

@@ -0,0 +1,297 @@
+import { useEffect, useState, type FormEvent } from 'react'
+import { ApiError } from '../api/client'
+import { createInvite, listRoomInvites, revokeInvite } from '../api/invites'
+import {
+  changeMemberRole,
+  deleteRoom,
+  leaveRoom,
+  removeMember,
+  transferOwnership,
+  updateRoom,
+} from '../api/rooms'
+import { useAuth } from '../context/AuthContext'
+import type { Invite, MyRoomItem, RoomMember, RoomRole } from '../types'
+import { RoomAvatar } from './RoomAvatar'
+import { UserAvatar } from './UserAvatar'
+import './RoomInfoPanel.css'
+
+interface RoomInfoPanelProps {
+  room: MyRoomItem
+  members: RoomMember[]
+  onClose: () => void
+  onMembersChanged: () => void
+  onRoomUpdated: () => void
+  onRoomDeleted: () => void
+  onLeft: () => void
+}
+
+export function RoomInfoPanel({
+  room,
+  members,
+  onClose,
+  onMembersChanged,
+  onRoomUpdated,
+  onRoomDeleted,
+  onLeft,
+}: RoomInfoPanelProps) {
+  const { user } = useAuth()
+  const myRole = room.role
+
+  const [inviteUsername, setInviteUsername] = useState('')
+  const [inviteError, setInviteError] = useState<string | null>(null)
+  const [pendingInvites, setPendingInvites] = useState<Invite[]>([])
+  const [busyUserId, setBusyUserId] = useState<string | null>(null)
+  const [settingsOpen, setSettingsOpen] = useState(false)
+  const [nameDraft, setNameDraft] = useState(room.name)
+  const [descDraft, setDescDraft] = useState(room.description ?? '')
+  const [roomError, setRoomError] = useState<string | null>(null)
+
+  const canManage = myRole === 'admin' || myRole === 'owner'
+
+  useEffect(() => {
+    setNameDraft(room.name)
+    setDescDraft(room.description ?? '')
+    if (canManage) {
+      listRoomInvites(room.id).then(setPendingInvites).catch(() => setPendingInvites([]))
+    } else {
+      setPendingInvites([])
+    }
+  }, [room.id, room.name, room.description, canManage])
+
+  async function handleInvite(e: FormEvent) {
+    e.preventDefault()
+    const username = inviteUsername.trim()
+    if (!username) return
+    setInviteError(null)
+    try {
+      await createInvite(room.id, username)
+      setInviteUsername('')
+      setPendingInvites(await listRoomInvites(room.id))
+    } catch (err) {
+      setInviteError(err instanceof ApiError ? err.message : String(err))
+    }
+  }
+
+  async function handleRevoke(inviteId: string) {
+    await revokeInvite(room.id, inviteId)
+    setPendingInvites(await listRoomInvites(room.id))
+  }
+
+  async function handleRemove(userId: string) {
+    setBusyUserId(userId)
+    try {
+      await removeMember(room.id, userId)
+      onMembersChanged()
+    } finally {
+      setBusyUserId(null)
+    }
+  }
+
+  async function handleRoleChange(userId: string, role: RoomRole) {
+    setBusyUserId(userId)
+    try {
+      await changeMemberRole(room.id, userId, role)
+      onMembersChanged()
+    } finally {
+      setBusyUserId(null)
+    }
+  }
+
+  async function handleTransfer(userId: string) {
+    if (!confirm('Transfer ownership to this member? You will become an admin.')) return
+    setBusyUserId(userId)
+    try {
+      await transferOwnership(room.id, userId)
+      onMembersChanged()
+      onRoomUpdated()
+    } finally {
+      setBusyUserId(null)
+    }
+  }
+
+  async function handleLeave() {
+    if (myRole === 'owner') return
+    if (!confirm(`Leave #${room.name}?`)) return
+    await leaveRoom(room.id)
+    onLeft()
+  }
+
+  async function handleSaveSettings(e: FormEvent) {
+    e.preventDefault()
+    setRoomError(null)
+    try {
+      await updateRoom(room.id, { name: nameDraft.trim(), description: descDraft.trim() })
+      onRoomUpdated()
+    } catch (err) {
+      setRoomError(err instanceof ApiError ? err.message : String(err))
+    }
+  }
+
+  async function handleDelete() {
+    if (!confirm(`Delete #${room.name}? This removes all messages and can't be undone.`)) return
+    await deleteRoom(room.id)
+    onRoomDeleted()
+  }
+
+  return (
+    <aside className="room-info-panel">
+      <div className="room-info-header">
+        <span className="room-info-header-label">Details</span>
+        <button type="button" className="room-info-close" onClick={onClose} aria-label="Close">
+          &times;
+        </button>
+      </div>
+
+      <div className="room-info-summary">
+        <RoomAvatar colorIndex={0} size={56} />
+        <div className="room-info-name">#{room.name}</div>
+        <div className="room-info-sub">
+          {members.length} member{members.length === 1 ? '' : 's'}
+          {room.is_private && ' · Private'}
+        </div>
+      </div>
+
+      <div className="room-info-section">
+        <div className="room-info-label">Members</div>
+        {members.map((m, i) => (
+          <div key={m.user_id} className="room-info-member-row">
+            <UserAvatar username={m.username} colorIndex={i} size={24} />
+            <span className="room-info-member-name">{m.username}</span>
+            <span className={`role-badge role-badge-${m.role}`}>{m.role}</span>
+            {myRole === 'owner' && m.user_id !== user?.id && (
+              <div className="room-info-member-actions">
+                {m.role === 'member' && (
+                  <button
+                    type="button"
+                    disabled={busyUserId === m.user_id}
+                    onClick={() => handleRoleChange(m.user_id, 'admin')}
+                    title="Promote to admin"
+                  >
+                    Promote
+                  </button>
+                )}
+                {m.role === 'admin' && (
+                  <button
+                    type="button"
+                    disabled={busyUserId === m.user_id}
+                    onClick={() => handleRoleChange(m.user_id, 'member')}
+                    title="Demote to member"
+                  >
+                    Demote
+                  </button>
+                )}
+                <button
+                  type="button"
+                  disabled={busyUserId === m.user_id}
+                  onClick={() => handleTransfer(m.user_id)}
+                  title="Transfer ownership"
+                >
+                  Make owner
+                </button>
+                <button
+                  type="button"
+                  className="room-info-danger-link"
+                  disabled={busyUserId === m.user_id}
+                  onClick={() => handleRemove(m.user_id)}
+                  title="Remove from room"
+                >
+                  Remove
+                </button>
+              </div>
+            )}
+            {myRole === 'admin' && m.role === 'member' && m.user_id !== user?.id && (
+              <div className="room-info-member-actions">
+                <button
+                  type="button"
+                  className="room-info-danger-link"
+                  disabled={busyUserId === m.user_id}
+                  onClick={() => handleRemove(m.user_id)}
+                  title="Remove from room"
+                >
+                  Remove
+                </button>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {canManage && (
+        <div className="room-info-section">
+          <div className="room-info-label">Invite someone</div>
+          <form className="room-info-invite-form" onSubmit={handleInvite}>
+            <input
+              type="text"
+              placeholder="Username"
+              value={inviteUsername}
+              onChange={(e) => setInviteUsername(e.target.value)}
+            />
+            <button type="submit" className="btn-secondary">
+              Invite
+            </button>
+          </form>
+          {inviteError && <p className="room-info-error">{inviteError}</p>}
+
+          {pendingInvites.length > 0 && (
+            <div className="room-info-pending">
+              {pendingInvites.map((inv) => (
+                <div key={inv.id} className="room-info-pending-row">
+                  <span>{inv.target_username ?? 'Unknown user'}</span>
+                  <button
+                    type="button"
+                    className="room-info-danger-link"
+                    onClick={() => handleRevoke(inv.id)}
+                    title="Revoke invite"
+                  >
+                    Revoke
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {myRole === 'owner' && (
+        <div className="room-info-section">
+          <button
+            type="button"
+            className="room-info-settings-toggle"
+            onClick={() => setSettingsOpen((v) => !v)}
+          >
+            Room settings {settingsOpen ? '−' : '+'}
+          </button>
+          {settingsOpen && (
+            <form className="room-info-settings-form" onSubmit={handleSaveSettings}>
+              <label>
+                Name
+                <input value={nameDraft} onChange={(e) => setNameDraft(e.target.value)} />
+              </label>
+              <label>
+                Description
+                <textarea value={descDraft} onChange={(e) => setDescDraft(e.target.value)} rows={2} />
+              </label>
+              {roomError && <p className="room-info-error">{roomError}</p>}
+              <button type="submit" className="btn-secondary">
+                Save
+              </button>
+              <button type="button" className="room-info-danger-link" onClick={handleDelete}>
+                Delete room
+              </button>
+            </form>
+          )}
+        </div>
+      )}
+
+      <button
+        type="button"
+        className="room-info-leave"
+        onClick={handleLeave}
+        disabled={myRole === 'owner'}
+        title={myRole === 'owner' ? 'Transfer ownership before leaving' : undefined}
+      >
+        Leave room
+      </button>
+    </aside>
+  )
+}

frontend/src/components/RoomListItem.tsx

@@ -1,26 +0,0 @@
-import { Link } from 'react-router-dom'
-import type { RoomListItem as RoomListItemType } from '../types'
-
-interface RoomListItemProps {
-  room: RoomListItemType
-  onJoin: (roomId: string) => void
-  joining: boolean
-}
-
-export function RoomListItem({ room, onJoin, joining }: RoomListItemProps) {
-  return (
-    <li style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.5rem 0' }}>
-      <div style={{ flex: 1 }}>
-        <strong>{room.name}</strong>
-        {room.description && <div style={{ color: '#666' }}>{room.description}</div>}
-      </div>
-      {room.is_member ? (
-        <Link to={`/rooms/${room.id}`}>Open</Link>
-      ) : (
-        <button disabled={joining} onClick={() => onJoin(room.id)}>
-          Join
-        </button>
-      )}
-    </li>
-  )
-}

frontend/src/components/RoomRow.css

@@ -0,0 +1,52 @@
+.room-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px var(--sp-4);
+  cursor: pointer;
+  background: transparent;
+  border-left: 2px solid transparent;
+  text-decoration: none;
+  color: inherit;
+}
+
+.room-row:hover {
+  background: color-mix(in srgb, var(--ds-text) 5%, transparent);
+}
+
+.room-row-active,
+.room-row-active:hover {
+  background: var(--ds-surface-2);
+  border-left-color: var(--ds-accent);
+}
+
+.room-row-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.room-row-name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--ds-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.room-row-lock {
+  flex: none;
+  color: var(--ds-muted);
+}
+
+.room-row-subtitle {
+  font-size: 0.8rem;
+  color: var(--ds-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+}

frontend/src/components/RoomRow.tsx

@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom'
+import type { MyRoomItem } from '../types'
+import { RoomAvatar } from './RoomAvatar'
+import './RoomRow.css'
+
+interface RoomRowProps {
+  room: MyRoomItem
+  colorIndex: number
+  active: boolean
+}
+
+export function RoomRow({ room, colorIndex, active }: RoomRowProps) {
+  return (
+    <Link to={`/rooms/${room.id}`} className={`room-row${active ? ' room-row-active' : ''}`}>
+      <RoomAvatar colorIndex={colorIndex} />
+      <div className="room-row-body">
+        <div className="room-row-name">
+          {room.name}
+          {room.is_private && (
+            <svg
+              className="room-row-lock"
+              width="12"
+              height="12"
+              viewBox="0 0 20 20"
+              fill="none"
+              aria-label="Private room"
+            >
+              <rect x="4" y="9" width="12" height="8" rx="2" stroke="currentColor" strokeWidth="1.6" />
+              <path d="M7 9V6.5a3 3 0 0 1 6 0V9" stroke="currentColor" strokeWidth="1.6" />
+            </svg>
+          )}
+        </div>
+        {room.description && <div className="room-row-subtitle">{room.description}</div>}
+      </div>
+    </Link>
+  )
+}

frontend/src/components/Sidebar.css

@@ -0,0 +1,105 @@
+.sidebar {
+  width: 300px;
+  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--ds-border);
+  background: var(--ds-void-2);
+  min-height: 0;
+}
+
+.sidebar-toolbar {
+  padding: var(--sp-3);
+  display: flex;
+  gap: var(--sp-2);
+  border-bottom: 1px solid var(--ds-border);
+}
+
+.sidebar-search {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  background: var(--ds-surface);
+  border: 1px solid var(--ds-border);
+  border-radius: var(--radius);
+  padding: 0 10px;
+  height: 36px;
+  color: var(--ds-muted);
+}
+
+.sidebar-search input {
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--ds-text);
+  font-size: 0.86rem;
+  width: 100%;
+}
+
+.sidebar-icon-btn {
+  width: 36px;
+  height: 36px;
+  flex: none;
+  border-radius: var(--radius);
+  background: transparent;
+  border: 1px solid var(--ds-border);
+  color: var(--ds-accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.sidebar-icon-btn:hover {
+  background: var(--ds-surface-2);
+}
+
+.sidebar-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--sp-2) 0;
+}
+
+.sidebar-entry {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--ds-text);
+  padding: 9px var(--sp-4);
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+
+.sidebar-entry:hover {
+  background: color-mix(in srgb, var(--ds-text) 5%, transparent);
+}
+
+.sidebar-badge {
+  margin-left: auto;
+  background: var(--ds-accent);
+  color: var(--ds-void);
+  font-size: 0.68rem;
+  font-weight: 800;
+  border-radius: var(--radius-pill);
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sidebar-section-label {
+  padding: 10px 16px 6px;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--ds-muted);
+  text-transform: uppercase;
+}

frontend/src/components/Sidebar.tsx

@@ -0,0 +1,84 @@
+import type { MyRoomItem } from '../types'
+import { RoomRow } from './RoomRow'
+import './Sidebar.css'
+
+interface SidebarProps {
+  rooms: MyRoomItem[]
+  activeRoomId: string | undefined
+  searchQuery: string
+  onSearchChange: (value: string) => void
+  onOpenNewRoom: () => void
+  onOpenBrowse: () => void
+  onOpenInvites: () => void
+  inviteCount: number
+}
+
+export function Sidebar({
+  rooms,
+  activeRoomId,
+  searchQuery,
+  onSearchChange,
+  onOpenNewRoom,
+  onOpenBrowse,
+  onOpenInvites,
+  inviteCount,
+}: SidebarProps) {
+  const query = searchQuery.trim().toLowerCase()
+  const filtered = query ? rooms.filter((r) => r.name.toLowerCase().includes(query)) : rooms
+
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-toolbar">
+        <div className="sidebar-search">
+          <svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+            <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.6" />
+            <line x1="12.5" y1="12.5" x2="17" y2="17" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+          </svg>
+          <input
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            placeholder="Search"
+            aria-label="Search rooms"
+          />
+        </div>
+        <button type="button" className="sidebar-icon-btn" onClick={onOpenNewRoom} aria-label="New room" title="New room">
+          <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+            <line x1="7" y1="1" x2="7" y2="13" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+            <line x1="1" y1="7" x2="13" y2="7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+          </svg>
+        </button>
+      </div>
+
+      <div className="sidebar-scroll">
+        <button type="button" className="sidebar-entry" onClick={onOpenInvites}>
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
+            <path d="M22 6 12 13 2 6" />
+            <rect x="2" y="4" width="20" height="16" rx="2" />
+          </svg>
+          Invites
+          {inviteCount > 0 && <span className="sidebar-badge">{inviteCount}</span>}
+        </button>
+
+        <button type="button" className="sidebar-entry" onClick={onOpenBrowse}>
+          <svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
+            <circle cx="9" cy="9" r="6" />
+            <line x1="13.5" y1="13.5" x2="18" y2="18" strokeLinecap="round" />
+          </svg>
+          Browse rooms
+        </button>
+
+        {filtered.length > 0 && <div className="sidebar-section-label">Rooms</div>}
+        <nav>
+          {filtered.map((room, i) => (
+            <RoomRow
+              key={room.id}
+              room={room}
+              colorIndex={i}
+              active={room.id === activeRoomId}
+            />
+          ))}
+        </nav>
+      </div>
+    </aside>
+  )
+}

frontend/src/components/TopBar.css

@@ -0,0 +1,96 @@
+.top-bar {
+  height: 56px;
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--sp-4);
+  background: var(--ds-surface);
+  border-bottom: 1px solid var(--ds-border);
+}
+
+.top-bar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.top-bar-logo {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  object-fit: cover;
+  flex: none;
+}
+
+.top-bar-title {
+  font-weight: 700;
+  font-size: 1.02rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.top-bar-user {
+  position: relative;
+  flex: none;
+}
+
+.top-bar-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius-pill);
+  background: var(--ds-accent-3);
+  border: none;
+  color: var(--ds-text);
+  font-size: 0.78rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.top-bar-menu-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+}
+
+.top-bar-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 31;
+  background: var(--card-bg);
+  border: 1px solid var(--ds-border);
+  border-radius: var(--radius);
+  padding: var(--sp-2);
+  min-width: 160px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.top-bar-menu-username {
+  font-size: 0.78rem;
+  color: var(--ds-muted);
+  padding: 6px 8px 4px;
+  font-weight: 700;
+}
+
+.top-bar-menu button[role='menuitem'] {
+  background: transparent;
+  border: none;
+  color: var(--ds-text);
+  text-align: left;
+  padding: 8px;
+  border-radius: 6px;
+  font-size: 0.86rem;
+  cursor: pointer;
+}
+
+.top-bar-menu button[role='menuitem']:hover {
+  background: var(--ds-surface-2);
+}

frontend/src/components/TopBar.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import logo from '../assets/logo.png'
+import { useAuth } from '../context/AuthContext'
+import { initials } from '../lib/avatar'
+import './TopBar.css'
+
+export function TopBar() {
+  const { user, logout } = useAuth()
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  if (!user) return null
+
+  return (
+    <header className="top-bar">
+      <div className="top-bar-brand">
+        <img src={logo} alt="" className="top-bar-logo" />
+        <span className="top-bar-title">KeepItTalking</span>
+      </div>
+
+      <div className="top-bar-user">
+        <button
+          type="button"
+          className="top-bar-avatar"
+          onClick={() => setMenuOpen((v) => !v)}
+          aria-expanded={menuOpen}
+          aria-label="Account menu"
+        >
+          {initials(user.username)}
+        </button>
+        {menuOpen && (
+          <>
+            <div className="top-bar-menu-scrim" onClick={() => setMenuOpen(false)} />
+            <div className="top-bar-menu" role="menu">
+              <div className="top-bar-menu-username">{user.username}</div>
+              <button type="button" role="menuitem" onClick={() => logout()}>
+                Log out
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </header>
+  )
+}

frontend/src/components/UserAvatar.css

@@ -0,0 +1,10 @@
+.user-avatar {
+  border-radius: var(--radius-pill);
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  color: var(--ds-text);
+  font-size: 0.68rem;
+}

frontend/src/components/UserAvatar.tsx

@@ -0,0 +1,19 @@
+import { accentForIndex, initials } from '../lib/avatar'
+import './UserAvatar.css'
+
+interface UserAvatarProps {
+  username: string
+  colorIndex: number
+  size?: number
+}
+
+export function UserAvatar({ username, colorIndex, size = 28 }: UserAvatarProps) {
+  return (
+    <div
+      className="user-avatar"
+      style={{ width: size, height: size, background: accentForIndex(colorIndex) }}
+    >
+      {initials(username)}
+    </div>
+  )
+}

frontend/src/hooks/useWindowWidth.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react'
+
+export function useWindowWidth(): number {
+  const [width, setWidth] = useState(() => window.innerWidth)
+
+  useEffect(() => {
+    const onResize = () => setWidth(window.innerWidth)
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+
+  return width
+}
+
+export const MOBILE_BREAKPOINT = 860

frontend/src/index.css

@@ -1,20 +1 @@
-:root {
-  font-family: system-ui, sans-serif;
-  color-scheme: light dark;
-}
-
-body {
-  margin: 0;
-}
-
-input,
-button {
-  font: inherit;
-  padding: 0.4rem;
-}
-
-label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
+@import './styles/tokens.css';

frontend/src/lib/avatar.ts

@@ -0,0 +1,20 @@
+const ACCENT_CYCLE = [
+  'var(--accent-cycle-1)',
+  'var(--accent-cycle-2)',
+  'var(--accent-cycle-3)',
+  'var(--accent-cycle-4)',
+]
+
+export function initials(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .map((w) => w[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase()
+}
+
+export function accentForIndex(index: number): string {
+  return ACCENT_CYCLE[((index % ACCENT_CYCLE.length) + ACCENT_CYCLE.length) % ACCENT_CYCLE.length]
+}

frontend/src/lib/messageGrouping.ts

@@ -0,0 +1,11 @@
+import type { RoomMember } from '../types'
+
+export function senderColorIndex(username: string, members: RoomMember[]): number {
+  const idx = members.findIndex((m) => m.username === username)
+  if (idx >= 0) return idx
+  // Fallback for a sender no longer in the room (e.g. they left): derive a
+  // stable index from the username instead of always colliding on 0.
+  let hash = 0
+  for (let i = 0; i < username.length; i++) hash = (hash * 31 + username.charCodeAt(i)) | 0
+  return Math.abs(hash)
+}

frontend/src/pages/ChatRoomPage.tsx

@@ -1,58 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
-import { getRoomMessages } from '../api/rooms'
-import { MessageInput } from '../components/MessageInput'
-import { MessageList } from '../components/MessageList'
-import { useAuth } from '../context/AuthContext'
-import { useChatSocket } from '../ws/useChatSocket'
-import type { ChatMessageEnvelope, Message, ServerEnvelope } from '../types'
-
-export function ChatRoomPage() {
-  const { roomId } = useParams<{ roomId: string }>()
-  const { user } = useAuth()
-  const navigate = useNavigate()
-  const [history, setHistory] = useState<Message[]>([])
-  const [live, setLive] = useState<ChatMessageEnvelope[]>([])
-  const [wsError, setWsError] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!roomId) return
-    setHistory([])
-    setLive([])
-    getRoomMessages(roomId).then(setHistory).catch((err) => setWsError(String(err)))
-  }, [roomId])
-
-  const onMessage = useCallback((envelope: ServerEnvelope) => {
-    if (envelope.type === 'message') {
-      setLive((prev) => [...prev, envelope])
-    } else if (envelope.type === 'error') {
-      setWsError(envelope.detail)
-    }
-  }, [])
-
-  const onUnauthenticated = useCallback(() => navigate('/login'), [navigate])
-
-  const { connected, send } = useChatSocket({
-    roomId: roomId ?? '',
-    onMessage,
-    onUnauthenticated,
-  })
-
-  if (!roomId) return null
-
-  const usernames = user ? { [user.id]: user.username } : {}
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', maxWidth: 640, margin: '0 auto' }}>
-      <header style={{ padding: '0.5rem', borderBottom: '1px solid #ddd' }}>
-        <button onClick={() => navigate('/rooms')}>&larr; Rooms</button>
-        {!connected && <span style={{ marginLeft: '1rem', color: '#888' }}>Connecting...</span>}
-      </header>
-
-      {wsError && <p style={{ color: 'red', padding: '0 0.5rem' }}>{wsError}</p>}
-
-      <MessageList messages={[...history, ...live]} usernames={usernames} />
-      <MessageInput disabled={!connected} onSend={send} />
-    </div>
-  )
-}

frontend/src/pages/ChatShellPage.css

@@ -0,0 +1,25 @@
+.chat-shell {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--ds-void);
+  overflow: hidden;
+}
+
+.chat-shell-body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  position: relative;
+}
+
+.chat-empty-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ds-muted);
+  font-size: 0.92rem;
+  background: var(--ds-void);
+}

frontend/src/pages/ChatShellPage.tsx

@@ -0,0 +1,149 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { listMyInvites } from '../api/invites'
+import { listMyRooms, listRoomMembers } from '../api/rooms'
+import { BrowseRoomsModal } from '../components/BrowseRoomsModal'
+import { ChatPane } from '../components/ChatPane'
+import { InvitesModal } from '../components/InvitesModal'
+import { NewRoomModal } from '../components/NewRoomModal'
+import { RoomInfoPanel } from '../components/RoomInfoPanel'
+import { Sidebar } from '../components/Sidebar'
+import { TopBar } from '../components/TopBar'
+import { MOBILE_BREAKPOINT, useWindowWidth } from '../hooks/useWindowWidth'
+import type { MyRoomItem, RoomMember } from '../types'
+import './ChatShellPage.css'
+
+type ModalKind = 'new' | 'browse' | 'invites' | null
+
+export function ChatShellPage() {
+  const { roomId } = useParams<{ roomId?: string }>()
+  const navigate = useNavigate()
+  const width = useWindowWidth()
+  const isMobile = width < MOBILE_BREAKPOINT
+
+  const [rooms, setRooms] = useState<MyRoomItem[]>([])
+  const [search, setSearch] = useState('')
+  const [members, setMembers] = useState<RoomMember[]>([])
+  const [inviteCount, setInviteCount] = useState(0)
+  const [infoOpen, setInfoOpen] = useState(false)
+  const [modal, setModal] = useState<ModalKind>(null)
+
+  const activeRoom = rooms.find((r) => r.id === roomId)
+
+  const refreshRooms = useCallback(async () => {
+    const list = await listMyRooms()
+    setRooms(list)
+    return list
+  }, [])
+
+  const refreshMembers = useCallback(() => {
+    if (!roomId) return
+    listRoomMembers(roomId).then(setMembers).catch(() => setMembers([]))
+  }, [roomId])
+
+  useEffect(() => {
+    refreshRooms().catch(() => {})
+  }, [refreshRooms])
+
+  useEffect(() => {
+    listMyInvites()
+      .then((list) => setInviteCount(list.length))
+      .catch(() => {})
+  }, [])
+
+  useEffect(() => {
+    refreshMembers()
+  }, [refreshMembers])
+
+  function goToRoom(id: string) {
+    navigate(`/rooms/${id}`)
+  }
+
+  return (
+    <div className="chat-shell">
+      <TopBar />
+      <div className="chat-shell-body">
+        {(!isMobile || !roomId) && (
+          <Sidebar
+            rooms={rooms}
+            activeRoomId={roomId}
+            searchQuery={search}
+            onSearchChange={setSearch}
+            onOpenNewRoom={() => setModal('new')}
+            onOpenBrowse={() => setModal('browse')}
+            onOpenInvites={() => setModal('invites')}
+            inviteCount={inviteCount}
+          />
+        )}
+
+        {(!isMobile || roomId) &&
+          (activeRoom ? (
+            <ChatPane
+              key={activeRoom.id}
+              room={activeRoom}
+              members={members}
+              isMobile={isMobile}
+              onBack={() => navigate('/rooms')}
+              onToggleInfo={() => setInfoOpen((v) => !v)}
+              infoOpen={infoOpen}
+            />
+          ) : (
+            !isMobile && (
+              <div className="chat-empty-state">
+                <p>Select a room to start chatting.</p>
+              </div>
+            )
+          ))}
+
+        {!isMobile && infoOpen && activeRoom && (
+          <RoomInfoPanel
+            room={activeRoom}
+            members={members}
+            onClose={() => setInfoOpen(false)}
+            onMembersChanged={refreshMembers}
+            onRoomUpdated={() => refreshRooms()}
+            onRoomDeleted={() => {
+              setInfoOpen(false)
+              navigate('/rooms')
+              refreshRooms()
+            }}
+            onLeft={() => {
+              setInfoOpen(false)
+              navigate('/rooms')
+              refreshRooms()
+            }}
+          />
+        )}
+      </div>
+
+      {modal === 'new' && (
+        <NewRoomModal
+          onClose={() => setModal(null)}
+          onCreated={(id) => {
+            setModal(null)
+            refreshRooms().then(() => goToRoom(id))
+          }}
+        />
+      )}
+      {modal === 'browse' && (
+        <BrowseRoomsModal
+          onClose={() => setModal(null)}
+          onJoined={(id) => {
+            setModal(null)
+            refreshRooms().then(() => goToRoom(id))
+          }}
+        />
+      )}
+      {modal === 'invites' && (
+        <InvitesModal
+          onClose={() => setModal(null)}
+          onInvitesChanged={setInviteCount}
+          onAccepted={(id) => {
+            setModal(null)
+            refreshRooms().then(() => goToRoom(id))
+          }}
+        />
+      )}
+    </div>
+  )
+}

frontend/src/pages/LoginPage.css

@@ -0,0 +1,92 @@
+.login-screen {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--sp-6);
+  background:
+    radial-gradient(600px 400px at 50% -10%, color-mix(in srgb, var(--ds-accent-3) 18%, transparent), transparent 70%),
+    var(--ds-void);
+}
+
+.login-card {
+  width: min(380px, 100%);
+  background: var(--card-bg);
+  border: 1px solid var(--ds-border);
+  border-radius: var(--radius);
+  padding: var(--sp-8) var(--sp-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-6);
+}
+
+.login-brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-2);
+}
+
+.login-brand img {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+.login-brand span {
+  font-weight: 800;
+  font-size: 1.45rem;
+}
+
+.login-copy {
+  text-align: center;
+  color: var(--ds-muted);
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin: calc(-1 * var(--sp-4)) 0 0;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-4);
+}
+
+.login-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 0.78rem;
+  color: var(--ds-muted);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.login-form input {
+  background: var(--ds-void);
+  border: 1px solid var(--ds-border);
+  border-radius: var(--radius);
+  padding: 9px 11px;
+  font-size: 0.9rem;
+  color: var(--ds-text);
+  text-transform: none;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+
+.login-form input:focus {
+  border-color: var(--ds-accent);
+  outline: none;
+}
+
+.login-error {
+  font-size: 0.86rem;
+  color: var(--ds-danger);
+  border: 1px solid color-mix(in srgb, var(--ds-danger) 40%, transparent);
+  background: color-mix(in srgb, var(--ds-danger) 10%, transparent);
+  border-radius: var(--radius);
+  padding: 8px 10px;
+  margin: 0;
+}

frontend/src/pages/LoginPage.tsx

@@ -2,6 +2,8 @@ import { useState, type FormEvent } from 'react'
 import { Navigate, useNavigate } from 'react-router-dom'
 import { useAuth } from '../context/AuthContext'
 import { ApiError } from '../api/client'
+import logo from '../assets/logo.png'
+import './LoginPage.css'
 
 export function LoginPage() {
   const { user, login } = useAuth()
@@ -28,28 +30,33 @@ export function LoginPage() {
   }
 
   return (
-    <div style={{ maxWidth: 360, margin: '4rem auto' }}>
-      <h1>KeepItTalking</h1>
-      <p style={{ color: '#888' }}>This is an invite-only site. Ask an admin for an account.</p>
-      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-        <label>
-          Username or email
-          <input value={username} onChange={(e) => setUsername(e.target.value)} required />
-        </label>
-        <label>
-          Password
-          <input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            required
-          />
-        </label>
-        {error && <p style={{ color: 'red' }}>{error}</p>}
-        <button type="submit" disabled={submitting}>
-          Log in
-        </button>
-      </form>
+    <div className="login-screen">
+      <div className="login-card">
+        <div className="login-brand">
+          <img src={logo} alt="" />
+          <span>KeepItTalking</span>
+        </div>
+        <p className="login-copy">This is an invite-only site. Ask an admin for an account.</p>
+        <form className="login-form" onSubmit={handleSubmit}>
+          <label>
+            Username or email
+            <input value={username} onChange={(e) => setUsername(e.target.value)} required autoFocus />
+          </label>
+          <label>
+            Password
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </label>
+          {error && <p className="login-error">{error}</p>}
+          <button type="submit" className="btn-primary" disabled={submitting}>
+            Log in
+          </button>
+        </form>
+      </div>
     </div>
   )
 }

frontend/src/pages/RoomListPage.tsx

@@ -1,85 +0,0 @@
-import { useEffect, useState, type FormEvent } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { createRoom, joinRoom, listRooms } from '../api/rooms'
-import { RoomListItem } from '../components/RoomListItem'
-import { useAuth } from '../context/AuthContext'
-import type { RoomListItem as RoomListItemType } from '../types'
-
-export function RoomListPage() {
-  const { user, logout } = useAuth()
-  const navigate = useNavigate()
-  const [rooms, setRooms] = useState<RoomListItemType[]>([])
-  const [newRoomName, setNewRoomName] = useState('')
-  const [joiningId, setJoiningId] = useState<string | null>(null)
-  const [error, setError] = useState<string | null>(null)
-
-  async function refresh() {
-    setRooms(await listRooms())
-  }
-
-  useEffect(() => {
-    refresh().catch((err) => setError(String(err)))
-  }, [])
-
-  async function handleCreate(e: FormEvent) {
-    e.preventDefault()
-    const name = newRoomName.trim()
-    if (!name) return
-    setError(null)
-    try {
-      await createRoom(name)
-      setNewRoomName('')
-      await refresh()
-    } catch (err) {
-      setError(String(err))
-    }
-  }
-
-  async function handleJoin(roomId: string) {
-    setJoiningId(roomId)
-    setError(null)
-    try {
-      await joinRoom(roomId)
-      await refresh()
-      navigate(`/rooms/${roomId}`)
-    } catch (err) {
-      setError(String(err))
-    } finally {
-      setJoiningId(null)
-    }
-  }
-
-  return (
-    <div style={{ maxWidth: 480, margin: '2rem auto' }}>
-      <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <h1>Rooms</h1>
-        <div>
-          <span style={{ marginRight: '1rem' }}>{user?.username}</span>
-          <button onClick={() => logout()}>Log out</button>
-        </div>
-      </header>
-
-      <form onSubmit={handleCreate} style={{ display: 'flex', gap: '0.5rem', margin: '1rem 0' }}>
-        <input
-          value={newRoomName}
-          onChange={(e) => setNewRoomName(e.target.value)}
-          placeholder="New room name"
-        />
-        <button type="submit">Create</button>
-      </form>
-
-      {error && <p style={{ color: 'red' }}>{error}</p>}
-
-      <ul style={{ listStyle: 'none', padding: 0 }}>
-        {rooms.map((room) => (
-          <RoomListItem
-            key={room.id}
-            room={room}
-            onJoin={handleJoin}
-            joining={joiningId === room.id}
-          />
-        ))}
-      </ul>
-    </div>
-  )
-}

frontend/src/styles/tokens.css

@@ -0,0 +1,142 @@
+:root {
+  color-scheme: dark;
+
+  /* DarkSingularity brand tokens (Style-Guide/BRAND_STYLE_GUIDE.md), verbatim */
+  --ds-void: #07080f;
+  --ds-surface: #101030;
+  --ds-surface-2: #181848;
+  --ds-border: #242478;
+  --ds-text: #fce4fc;
+  --ds-muted: #c0ccd8;
+  --ds-accent: #60d8fc;
+  --ds-accent-2: #6c60fc;
+  --ds-accent-3: #7848fc;
+  --ds-highlight: #f060fc;
+
+  /* Sidebar/list background used in the design handoff -- one step darker
+     than --ds-surface, not itself a named brand token. */
+  --ds-void-2: #0b0c1a;
+
+  /* Derived, not in the brand guide: destructive/danger action color, kept
+     in the same neon-on-black family since the guide has no semantic red. */
+  --ds-danger: #fc6060;
+
+  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+
+  --sp-1: 0.25rem;
+  --sp-2: 0.5rem;
+  --sp-3: 0.75rem;
+  --sp-4: 1rem;
+  --sp-6: 1.5rem;
+  --sp-8: 2rem;
+
+  --radius: 8px;
+  --radius-pill: 999px;
+
+  --card-bg: linear-gradient(180deg, rgba(24, 24, 72, 0.96), rgba(16, 16, 48, 0.96));
+
+  --accent-cycle-1: var(--ds-accent);
+  --accent-cycle-2: var(--ds-accent-2);
+  --accent-cycle-3: var(--ds-accent-3);
+  --accent-cycle-4: var(--ds-highlight);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--ds-void);
+  color: var(--ds-text);
+  font-family: var(--sans);
+  -webkit-font-smoothing: antialiased;
+}
+
+input,
+textarea,
+button {
+  font: inherit;
+  color: inherit;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--ds-border);
+  border-radius: var(--radius);
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+:focus-visible {
+  outline: 2px solid var(--ds-accent);
+  outline-offset: 2px;
+}
+
+/* Shared buttons -- used across modals, panels, and pages */
+.btn-primary {
+  background: var(--ds-accent);
+  color: var(--ds-void);
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  padding: 8px 14px;
+  font-size: 0.86rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+.btn-primary:hover {
+  background: #8ae4fc;
+}
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--ds-text);
+  border: 1px solid var(--ds-border);
+  border-radius: var(--radius);
+  padding: 7px 12px;
+  font-size: 0.84rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+.btn-secondary:hover {
+  border-color: var(--ds-accent);
+}
+.btn-secondary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@keyframes ds-typing-dot {
+  0%,
+  60%,
+  100% {
+    opacity: 0.25;
+    transform: translateY(0);
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.001ms !important;
+    transition-duration: 0.001ms !important;
+  }
+}

frontend/src/types.ts

@@ -7,6 +7,8 @@ export interface User {
   created_at: string
 }
 
+export type RoomRole = 'owner' | 'admin' | 'member'
+
 export interface Room {
   id: string
   name: string
@@ -20,10 +22,40 @@ export interface RoomListItem extends Room {
   is_member: boolean
 }
 
+export interface MyRoomItem extends Room {
+  role: RoomRole
+}
+
+export interface RoomMember {
+  user_id: string
+  username: string
+  role: RoomRole
+  joined_at: string
+}
+
+export type InviteStatus = 'pending' | 'accepted' | 'revoked'
+
+export interface Invite {
+  id: string
+  room_id: string
+  invited_by: string
+  target_user_id: string | null
+  target_username: string | null
+  status: InviteStatus
+  expires_at: string
+  created_at: string
+}
+
+export interface MyInvite extends Invite {
+  room_name: string
+  invited_by_username: string
+}
+
 export interface Message {
   id: string
   room_id: string
   user_id: string
+  username: string
   content: string
   created_at: string
 }