client-architecturelisted

# Client Architecture The client is a React 19 SPA built with Vite and Tailwind CSS v4. State management uses Zustand stores. Communication with the server uses three channels: HTTP for reads/mutations, per-session WebSocket for streaming and real-time interaction, and SSE for global broadcasts. ## Entry Point `src/client/main.tsx` renders the app inside a `BrowserRouter` with an `ErrorBoundary`. Two route patterns: - `/session/:sessionId` — session view - `*` — catch-all (home screen, `/{slug}/new` for new repo sessions) `src/client/App.tsx` (~800 lines) is the main component. It wires together all hooks, stores, and UI components. Layout is a three-panel design: sidebar (sessions), center (chat), right (preview/files/git/terminal). ## State Management (Zustand) 11 domain-specific stores in `src/client/stores/`: | Store | File | Key State | |-------|------|-----------| | Session | `session-store.ts` | `sessionId`, `messages[]`, `isLoading`, `activity`, `sessions[]`, `authUrl`, `queuedMessages[]` | | Git | `git-store.ts` | `commits[]`, `identity`, `turnDiff`, `lastCommitPair` | | File | `file-store.ts` | `tree[]`, `viewingFile`, `viewingFileContent`, `docFiles[]` | | Preview | `preview-store.ts` | `status`, `selectedPort`, `installStatus`, `crashInfo` | | Terminal | `terminal-store.ts` | `entries[]`, `mode`, `shellStarted` | | Thread | `thread-store.ts` | `threads[]`, `activeThreadId` | | PR | `pr-store.ts` | `result`, `status`, `descGenerating` | | Settings | `settin