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/components/MessageInput.tsx

@@ -0,0 +1,33 @@
+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.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'react'
+import type { ChatMessageEnvelope, Message } from '../types'
+
+interface DisplayMessage {
+  id: string
+  username: string
+  content: string
+  created_at: string
+}
+
+interface MessageListProps {
+  messages: (Message | ChatMessageEnvelope)[]
+  usernames: Record<string, string>
+}
+
+export function MessageList({ messages, usernames }: MessageListProps) {
+  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 ref={bottomRef} />
+    </div>
+  )
+}

frontend/src/components/ProtectedRoute.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react'
+import { Navigate } from 'react-router-dom'
+import { useAuth } from '../context/AuthContext'
+
+export function ProtectedRoute({ children }: { children: ReactNode }) {
+  const { user, loading } = useAuth()
+
+  if (loading) return <p>Loading...</p>
+  if (!user) return <Navigate to="/login" replace />
+
+  return <>{children}</>
+}

frontend/src/components/RoomListItem.tsx

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