phase4: full chat UI — shell, sidebar, transcript, model menu, input bar, settings, first-run; responsive + light/dark verified · 827df83 · zyquo-cloud-web

modified docs/PLAN.md +19 −1

+ a persistent profile: reload AND restart survival, exact export round-trip, and
+ vault behavior all green.
++## Phase 4 — Design system & UI
++
++- [x] 4.1 Light flagship theme via tokens (Phase 1 CSS vars) — light default, dark opt-in, 5 accents, reduced-motion respected
++- [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)
++- [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
++- [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
++- [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
++- [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)
++- [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)
++- [x] Toasts with undo (conversation delete)
++- [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)
++- [x] 4.4 Quality gate: screenshotted desktop+phone, light+dark, model menu, settings — reviewed and fixed (filter-chip clipping, cost precision, draft seeding)
++
++**Phase 4 summary.** The full chat UI is live and matches the family design:
++tokens-only styling, light flagship default, dark derived, responsive down to
++phone width with a drawer sidebar. The Model Menu is the headline surface —
++fuzzy-searchable, filterable, priced, favorited, keyboard-driven. Verified
++visually in headless Chromium at 1240px and 390px in both themes; found and
++fixed three issues in the review pass. `npm run check` green.
+ ## Phase 5 — Brand assets — pending

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

spb/zyquo-cloud-web

phase4: full chat UI — shell, sidebar, transcript, model menu, input bar, settings, first-run; responsive + light/dark verified

Theme