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