phase4: full chat UI — shell, sidebar, transcript, model menu, input bar, settings, first-run; responsive + light/dark verified
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
22 changed files +6,539 −69
modified
docs/PLAN.md
+19 −1
@@ -92,7 +92,25 @@ with WebCrypto AES-GCM and is honestly framed. Gate ran in a real browser with | ||
| 92 | 92 | a persistent profile: reload AND restart survival, exact export round-trip, and |
| 93 | 93 | vault behavior all green. |
| 94 | 94 | |
| 95 | −## Phase 4 — Design system & UI — pending | |
| 95 | +## Phase 4 — Design system & UI | |
| 96 | + | |
| 97 | +- [x] 4.1 Light flagship theme via tokens (Phase 1 CSS vars) — light default, dark opt-in, 5 accents, reduced-motion respected | |
| 98 | +- [x] 4.2 Shell: sidebar (wordmark, search ⌘F, New Chat ⌘N, Pinned/Today/Yesterday/7 Days/Older groups, hover pin/delete, usage footer) + chat area (header 52px with editable title, centered model chip, compare/export/info actions) | |
| 99 | +- [x] 4.2.1 Model Menu: ⌘K command-palette style — fuzzy search, capability filter chips (Vision/Tools/Reasoning/JSON/Long context/Cheapest), Aliases + Favorites + Recents groups, keyed-providers-first sections, capability/context/price badges, star favorites, "Add key" affordance, keyboard nav (↑↓/↵/⌘↵ default/esc), footer hints | |
| 100 | +- [x] Transcript: centered 760px column, user right accent-subtle / assistant left surface+avatar, GFM markdown + tables + zebra rows + syntax-highlighted code (language label, copy, wrap), collapsible reasoning, citation chips, streaming caret, scroll-lock + jump-to-latest pill, hover metadata (time, tokens, cost) + actions (copy/edit-resend/regenerate/quote/branch/read-aloud/delete), variant switcher | |
| 101 | +- [x] Input bar: floating card, auto-grow, image+text-file attach (click/drag/paste), thumbnails, params popover (support-gated controls with enable checkboxes), circular send ⌘↩ / Stop, context-usage bar + token/cost HUD | |
| 102 | +- [x] Settings modal: Providers & Keys (masked, Test + latency + status dot, per-provider proxy URL, honesty notice), Models (catalog browser, favorites, set-default), Appearance (theme/accent/font-size/density + live preview), Data (export incl.-keys warning / import / confirm-twice clear), Advanced (default system prompt, passphrase lock, streaming toggle) | |
| 103 | +- [x] First-run honest welcome + root empty state (glyph, greeting, model chip, 4 suggestion cards — self-contained ones send immediately, input-expecting ones seed the draft) | |
| 104 | +- [x] Toasts with undo (conversation delete) | |
| 105 | +- [x] 4.3 Responsive: sidebar drawer <768px with scrim, full-width transcript, code blocks scroll internally, no horizontal overflow; motion tokens (80ms hover, 150ms message-in, blinking caret) | |
| 106 | +- [x] 4.4 Quality gate: screenshotted desktop+phone, light+dark, model menu, settings — reviewed and fixed (filter-chip clipping, cost precision, draft seeding) | |
| 107 | + | |
| 108 | +**Phase 4 summary.** The full chat UI is live and matches the family design: | |
| 109 | +tokens-only styling, light flagship default, dark derived, responsive down to | |
| 110 | +phone width with a drawer sidebar. The Model Menu is the headline surface — | |
| 111 | +fuzzy-searchable, filterable, priced, favorited, keyboard-driven. Verified | |
| 112 | +visually in headless Chromium at 1240px and 390px in both themes; found and | |
| 113 | +fixed three issues in the review pass. `npm run check` green. | |
| 96 | 114 | |
| 97 | 115 | ## Phase 5 — Brand assets — pending |
| 98 | 116 | |
modified
package-lock.json
+1599 −49
Large diff (1,888 lines) is not loaded by default to keep the page fast.Load diff
modified
package.json
+4 −0
Large diff (12 lines) is not loaded by default to keep the page fast.Load diff
modified
src/App.tsx
+122 −18
Large diff (153 lines) is not loaded by default to keep the page fast.Load diff
added
src/components/ChatView.tsx
+277 −0
Large diff (277 lines) is not loaded by default to keep the page fast.Load diff
added
src/components/FirstRun.tsx
+63 −0
Large diff (63 lines) is not loaded by default to keep the page fast.Load diff
added
src/components/InputBar.tsx
+249 −0
Large diff (249 lines) is not loaded by default to keep the page fast.Load diff
added
src/components/Markdown.tsx
+89 −0
Large diff (89 lines) is not loaded by default to keep the page fast.Load diff
added
src/components/MessageBubble.tsx
+305 −0
Large diff (305 lines) is not loaded by default to keep the page fast.Load diff
added
src/components/ModelMenu.tsx
+331 −0
Large diff (331 lines) is not loaded by default to keep the page fast.Load diff
added
src/components/ParamsPanel.tsx
+147 −0
Large diff (147 lines) is not loaded by default to keep the page fast.Load diff
added
src/components/SettingsModal.tsx
+596 −0
Large diff (596 lines) is not loaded by default to keep the page fast.Load diff
added
src/components/Sidebar.tsx
+179 −0
Large diff (179 lines) is not loaded by default to keep the page fast.Load diff
added
src/components/SuggestionGrid.tsx
+68 −0
Large diff (68 lines) is not loaded by default to keep the page fast.Load diff
added
src/components/Toasts.tsx
+42 −0
Large diff (42 lines) is not loaded by default to keep the page fast.Load diff
added
src/components/ZyquoGlyph.tsx
+40 −0
Large diff (40 lines) is not loaded by default to keep the page fast.Load diff
added
src/components/icons.tsx
+318 −0
Large diff (318 lines) is not loaded by default to keep the page fast.Load diff
added
src/design/components.css
+1373 −0
Large diff (1,373 lines) is not loaded by default to keep the page fast.Load diff
added
src/features/catalogHelpers.ts
+38 −0
Large diff (38 lines) is not loaded by default to keep the page fast.Load diff
added
src/features/exporters.ts
+60 −0
Large diff (60 lines) is not loaded by default to keep the page fast.Load diff
added
src/state/store.ts
+619 −0
Large diff (619 lines) is not loaded by default to keep the page fast.Load diff
modified
tsconfig.app.tsbuildinfo
+1 −1
Large diff (5 lines) is not loaded by default to keep the page fast.Load diff