#23778: feat: chat UI facelift — speech, themes, config categories, and polish

## Summary - **Problem:** The web chat UI needed modernization — missing speech capabilities, limited theme options, no context usage visibility, and inconsistent styling across light/dark modes. - **Why it matters:** Users interact with the chat UI daily; better UX (voice input/output, theme customization, context awareness) directly improves productivity and accessibility. - **What changed:** Added STT/TTS speech features, theme selection in config, context window usage display with warnings, per-message metadata (tokens/cost/model), config section categorization, welcome suggestions, code block copy, login gate/cron UI polish, and a warm parchment light-mode palette. - **What did NOT change (scope boundary):** No gateway/backend logic changes (one minor chat sanitization cleanup removed). No API contract changes. No CLI changes. ## Change Type (select all) - [ ] Bug fix - [x] Feature - [x] Refactor - [ ] Docs - [ ] Security hardening - [x] Chore/infra ## Scope (select all touched areas) - [ ] Gateway / orchestration - [ ] Skills / tool execution - [ ] Auth / tokens - [ ] Memory / storage - [ ] Integrations - [ ] API / contracts - [x] UI / DX - [ ] CI/CD / infra ## Linked Issue/PR - None ## User-visible / Behavior Changes - **Speech-to-text (STT):** Users can dictate messages via a microphone button in the chat input area. - **Text-to-speech (TTS):** A speaker button on chat message groups reads messages aloud. - **Theme selection:** New appearance/theme options in the config view (dashboard customization). - **Context window notice:** Visual indicator when context usage exceeds 85%, helping users manage conversation length. - **Per-message metadata:** Token count, cost, and model info displayed per chat group. - **Config categorization:** Config sections are now grouped into categories for easier navigation. - **Welcome suggestions:** New users see suggested prompts in an empty chat. - **Code block copy:** Markdown code blocks now have a copy-to-clipboard button. - **Light mode palette:** Softer warm parchment colors with wider contrast spread. - **Login gate & cron UI:** Improved layout, spacing, and visual consistency. - **Skills view:** Added link to browse skills externally. - **Dependency bump:** `@mariozechner/pi-*` packages updated from 0.54.0 → 0.54.1. ## Security Impact (required) - New permissions/capabilities? `Yes` — browser microphone access for STT (user-granted, standard Web Speech API) - Secrets/tokens handling changed? `No` - New/changed network calls? `No` (speech APIs are browser-native) - Command/tool execution surface changed? `No` - Data access scope changed? `No` - If any `Yes`, explain risk + mitigation: STT uses the browser's built-in Web Speech API; microphone permission is gated by browser prompt. No audio data leaves the browser beyond what the browser's speech engine does natively. TTS is also browser-native (SpeechSynthesis API). ## Repro + Verification ### Environment - OS: macOS - Runtime/container: Browser (Chrome/Safari) - Model/provider: Any - Integration/channel: Web UI ### Steps 1. Open the web chat UI 2. Verify welcome suggestions appear on empty chat 3. Send a message → verify per-message metadata (tokens, cost, model) is displayed 4. Click microphone button → grant permission → dictate a message (STT) 5. Click speaker button on a response → hear TTS playback 6. Open config → verify categorized sections and theme selection 7. Toggle light mode → verify warm parchment palette 8. Send enough messages to exceed 85% context → verify context usage warning 9. Verify code blocks have copy buttons ### Expected - All features above work as described ### Actual - Verified working in local dev ## Evidence - Visual verification during development - New test: `ui/src/ui/views/config.browser.test.ts` added ## Human Verification (required) - Verified scenarios: STT/TTS in Chrome, theme switching, context notice at high usage, config categories, welcome suggestions, code copy, light/dark mode palettes - Edge cases checked: STT permission denial (graceful fallback), TTS on empty messages (no-op), context notice threshold boundary - What you did **not** verify: Cross-browser STT/TTS (Firefox, Safari mobile), accessibility screen reader compatibility ## Compatibility / Migration - Backward compatible? `Yes` - Config/env changes? `No` - Migration needed? `No` ## Failure Recovery (if this breaks) - How to disable/revert this change quickly: Revert the branch merge; all changes are UI-only with no backend migration. - Files/config to restore: None - Known bad symptoms reviewers should watch for: Broken styles in dark/light mode, STT button appearing in browsers without Web Speech API support, layout regressions on mobile. ## Risks and Mitigations - Risk: Web Speech API availability varies across browsers (STT not supported in Firefox). - Mitigation: STT/TTS buttons should degrade gracefully; core chat functionality is unaffected. - Risk: CSS changes could cause layout regressions on untested viewport sizes. - Mitigation: Styles follow existing patterns; mobile-specific overrides included in `layout.mobile.css`. - Risk: `@mariozechner/pi-*` dependency bump (0.54.0 → 0.54.1) could introduce subtle behavior changes. - Mitigation: Patch-level bump; lockfile updated; no breaking changes expected. <!-- greptile_comment --> <h3>Greptile Summary</h3> This PR modernizes the web chat UI with speech capabilities, theme selection, context awareness, and visual polish. **Key additions:** - **Speech features:** Browser-native STT/TTS using Web Speech API with graceful fallback - **Theme selection:** New appearance config section with 5 theme options (Claw/Light/Knot/Field/Chrome) - **Context window notice:** Visual warning when usage exceeds 85% (amber → red gradient) - **Per-message metadata:** Displays tokens (↑input/↓output), cache (R/W), cost, context %, and model per assistant message group - **Config categorization:** Settings organized into 6 categories (Core, AI & Agents, Communication, Automation, Infrastructure, Appearance & Setup) with collapsible navigation - **Welcome suggestions:** Four prompt suggestions on empty chat - **Code block enhancements:** Copy buttons with lang labels and header styling - **Light mode refresh:** New warm parchment palette with improved contrast - **Slash command improvements:** Arg picker mode for commands with predefined options **Notable changes:** - Gateway `chat.ts` no longer strips `usage`/`cost` from messages (enables UI metadata display) - Dependency bump: `@mariozechner/pi-*` packages 0.54.0 → 0.54.1 - New test file `config.browser.test.ts` validates config view rendering and interaction The implementation is well-structured with proper browser API feature detection, graceful degradation when APIs are unavailable, and follows existing UI patterns. Speech functionality properly manages state and cleanup. CSS changes are extensive but follow existing theme structure. <h3>Confidence Score: 4/5</h3> - Safe to merge with attention to cross-browser testing - The PR is well-implemented UI-only work with no backend logic changes. Code follows existing patterns, includes test coverage, and properly handles feature detection for browser APIs. Speech APIs use native browser features with appropriate permission gating. The removal of usage/cost sanitization in gateway enables the metadata display feature. Score is 4 (not 5) due to limited cross-browser testing coverage noted in the PR description (STT unsupported in Firefox, Safari mobile untested, accessibility verification incomplete). - No files require special attention — the speech implementation in `ui/src/ui/chat/speech.ts` is clean with proper error handling, and the extensive CSS changes follow existing theme structure _{Last reviewed commit: 7f91e10} <!-- greptile_other_comments_section --> <!-- /greptile_comment -->