Private
Public Access
ksmithandClaude Sonnet 5
dddda19238
The 12 color pickers (Background, Sidebar background, Surface, Border, etc.) gave no indication of what each one actually affects without trial and error. Adds a miniature, self-contained mockup of the real chat UI above the picker grid -- a sidebar with room rows, a message with an avatar/mention/role badge, a composer, a danger button -- styled from inline styles bound to the draft colors (not the --ds-* custom properties, since those reflect whatever theme is currently active, not necessarily the one being edited). Hovering or focusing either a color input or its matching element in the mockup highlights both, using a fixed amber outline that stays visible regardless of the theme's own palette -- makes the mapping between the 12 fields and where they actually show up immediately obvious in either direction, without needing to activate the theme and go look around the rest of the app. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
DS Chat frontend (Phase 1)
React + Vite PWA. Login, room list, and chat views wired to the backend's
REST API and /ws/chat WebSocket endpoint. See ../README.md
and ../backend/README.md for full local setup.
Dev
npm install
npm run dev
The dev server proxies /api and /ws to http://localhost:8000 (see
vite.config.ts), so the backend must be running for anything beyond the
login page to work.
Build
npm run build
Generates the PWA manifest and service worker via vite-plugin-pwa into dist/.
Layout
src/
main.tsx, App.tsx routes: /login, /rooms, /rooms/:roomId
api/ fetch wrappers (client, auth, rooms)
ws/useChatSocket.ts WebSocket hook (join/send/receive)
context/AuthContext.tsx current-user state, hydrated via GET /api/auth/me
components/ ProtectedRoute, RoomListItem, MessageList, MessageInput
pages/ LoginPage, RoomListPage, ChatRoomPage