Phase 1: auth, room CRUD, WebSocket chat, PWA frontend

Invite-only FastAPI + SQLAlchemy(async) + Postgres backend (session-cookie
auth via CLI-provisioned accounts, open-room CRUD, single-instance /ws/chat)
and a React + Vite PWA frontend (login, room list, chat view). Backend tests
pass against a local Postgres DB. See README.md and backend/README.md for
setup, and ARCHITECTURE.md for the full phased design.

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

frontend/src/pages/ChatRoomPage.tsx

@@ -0,0 +1,58 @@
+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/LoginPage.tsx

@@ -0,0 +1,55 @@
+import { useState, type FormEvent } from 'react'
+import { Navigate, useNavigate } from 'react-router-dom'
+import { useAuth } from '../context/AuthContext'
+import { ApiError } from '../api/client'
+
+export function LoginPage() {
+  const { user, login } = useAuth()
+  const navigate = useNavigate()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+
+  if (user) return <Navigate to="/rooms" replace />
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault()
+    setError(null)
+    setSubmitting(true)
+    try {
+      await login(username, password)
+      navigate('/rooms')
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : 'Something went wrong')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  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>
+  )
+}

frontend/src/pages/RoomListPage.tsx

@@ -0,0 +1,85 @@
+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>
+  )
+}