# UI Review **Audited:** 2026-03-28 **Baseline:** Abstract UI/UX standards (no `UI-SPEC.md` found) **Screenshots:** Captured. CLI screenshots saved in `.planning/ui-reviews/audit-20260328-180142/`; loaded-state validation captured via browser at `loaded-shell.png`, `loaded-mobile.png`, and `loaded-tablet.png`. --- ## Pillar Scores | Pillar | Score | Key Finding | |--------|-------|-------------| | 1. Copywriting | 3/4 | Product framing is clear, but some controls are vague or overly system-oriented. | | 2. Visuals | 3/4 | Desktop hierarchy is strong, but the main canvas feels sparse and mobile breaks badly. | | 3. Color | 3/4 | Palette is cohesive and intentional, with a few hardcoded accents and status colors bypassing tokens. | | 4. Typography | 3/4 | Type scale is disciplined and readable, though contrast and emphasis are a bit muted in secondary text. | | 5. Spacing | 2/4 | Desktop spacing is solid, but fixed sidebar widths create overflow on smaller screens. | | 6. Experience Design | 2/4 | Good empty-state foundation, but accessibility, destructive flows, and runtime error handling need work. | **Overall: 16/24** --- ## Major UX Strengths - Clear information architecture on desktop: runtime controls live in the sidebar and chat lives in the main pane, which reduces mode confusion. - Strong visual hierarchy in the runtime summary card; status, mode, endpoint, and next action are easy to scan in `tauri-app/src/features/runtime/components/RuntimeStatusCard.tsx:30`. - Consistent dark visual language with shared tokens in `tauri-app/src/index.css:4` and polished gradients in `tauri-app/src/components/Sidebar.css:4`. - Helpful empty state with product promise and persistent-history cue in `tauri-app/src/components/ChatView.tsx:281`. - Thoughtful advanced UX touches like token summaries, TPS badges, live reasoning, edit-and-resend, and copy actions in `tauri-app/src/components/ChatView.tsx:256` and `tauri-app/src/components/MessageBubble.tsx:121`. ## Major UI/UX Weaknesses - Mobile responsiveness is currently broken: the 280px fixed sidebar plus full chat pane causes horizontal clipping and partially hidden content, visible in `loaded-mobile.png` and driven by `tauri-app/src/components/Sidebar.css:2` plus `tauri-app/src/App.css:1`. - The app ships with severe console noise and broken highlight loading. `tauri-app/src/lib/markdown.ts:17` injects CDN language scripts that throw repeated runtime errors, undermining confidence in code rendering. - Several interactive elements are mouse-centric instead of keyboard/touch friendly: chat rows are clickable `div`s in `tauri-app/src/components/Sidebar.tsx:103`, destructive affordances are hover-revealed in `tauri-app/src/components/Sidebar.css:317` and `tauri-app/src/components/MessageBubble.css:128`, and icon-only buttons rely on `title` instead of accessible labels in `tauri-app/src/components/Sidebar.tsx:45` and `tauri-app/src/components/Sidebar.tsx:82`. - Error handling is not product-grade yet. Missing model/server cases use blocking `alert()` calls in `tauri-app/src/components/ChatView.tsx:95`, while backend failures surface as assistant text rather than inline actionable UI in `tauri-app/src/components/ChatView.tsx:205`. - Destructive actions have no confirmation or undo path for deleting chats/messages in `tauri-app/src/components/Sidebar.tsx:111` and `tauri-app/src/components/MessageBubble.tsx:167`. - The main canvas feels visually under-filled when there is no conversation; the large central void weakens first-run momentum in `loaded-shell.png`. --- ## Improvement Ideas Prioritized By Impact/Effort 1. **High impact / medium effort - Fix the responsive shell.** Convert the sidebar into a drawer or overlay below tablet widths, let the chat pane own the viewport, and add a mobile header/menu trigger. This resolves the biggest usability failure shown in `loaded-mobile.png`. 2. **High impact / low-medium effort - Replace hover-only and div-based interactions with accessible controls.** Make conversation rows real buttons, add `aria-label`s to icon buttons, keep message/chat actions visible or tappable on touch, and add keyboard support. 3. **High impact / medium effort - Remove the highlight.js CDN script-loading failure.** Bundle/register languages properly in app code or lazy-load an ESM-safe client path so Markdown/code rendering does not throw on every load. 4. **Medium impact / low effort - Replace blocking alerts with inline guidance.** Show validation banners near the composer/model picker for missing model, offline server, or runtime setup issues. 5. **Medium impact / low-medium effort - Add confirmation or undo for deletes.** A lightweight confirm popover or toast-based undo will reduce accidental loss. 6. **Medium impact / low effort - Improve empty and offline states.** Add suggested starter prompts, explain why model loading failed, and offer a direct CTA to open runtime setup when the endpoint is offline. ## Quick Wins For Design Polish - Add a subtle empty-state prompt grid or starter chips so the center pane does not feel empty before first use. - Increase contrast on secondary helper text like the empty conversation copy and footer version label. - Turn the top-right toggles into a labeled settings cluster so they do not feel detached from the composer. - Add a compact page title or chat title in the top bar to reduce the long strip of unused header space. - Standardize hardcoded accent/link/status colors onto tokens; examples are in `tauri-app/src/components/ChatView.css:144`, `tauri-app/src/features/runtime/components/RuntimeStatusCard.css:110`, and `tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.css:309`. --- ## Detailed Findings ### 1. Copywriting (3/4) - The app explains its purpose well in the empty state and runtime summary (`tauri-app/src/components/ChatView.tsx:284`, `tauri-app/src/features/runtime/components/RuntimeStatusCard.tsx:41`). - Some button labels are too generic for a mixed local/remote runtime flow: `Manage`, `Set up`, `Start`, `Stop`, and `Browse` require extra interpretation (`tauri-app/src/features/runtime/components/RuntimeStatusCard.tsx:26`, `tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.tsx:311`). - System-oriented fallback copy like `Start server to load models` is functional but not especially user-friendly in `tauri-app/src/components/Sidebar.tsx:75`. ### 2. Visuals (3/4) - Desktop composition is good: the runtime card gives the left rail a clear focal object while the chat pane stays visually calm. - The runtime card uses strong visual hierarchy through kicker/title/meta/actions in `tauri-app/src/features/runtime/components/RuntimeStatusCard.css:24`. - The center pane is too empty on first load, leaving a lot of dead space with little guidance, visible in `loaded-shell.png`. - Mobile visual integrity breaks because the app preserves desktop proportions instead of reflowing, visible in `loaded-mobile.png`. ### 3. Color (3/4) - The shared dark palette is coherent and modern, defined centrally in `tauri-app/src/index.css:4`. - Accent use is focused mostly on primary actions and runtime emphasis, which helps hierarchy. - Some UI colors bypass tokens and create maintenance drift, including link blue and warning/error foregrounds in `tauri-app/src/components/ChatView.css:144`, `tauri-app/src/features/runtime/components/RuntimeStatusCard.css:110`, and `tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.css:309`. ### 4. Typography (3/4) - The project uses a restrained scale with strong headings and readable body text across the runtime card, empty state, and composer. - The font stack is more intentional than default system-only UI and includes mono support for technical values in `tauri-app/src/index.css:39` and `tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.css:127`. - Secondary text often trends too faint on the dark background, especially empty/sidebar helper copy in `tauri-app/src/components/Sidebar.css:248` and `tauri-app/src/components/ChatView.css:78`. ### 5. Spacing (2/4) - Desktop spacing is consistent and componentized across cards, bubbles, and control groups. - Responsiveness is the main spacing failure: `tauri-app/src/components/Sidebar.css:2` hard-locks a 280px sidebar while `tauri-app/src/App.css:1` keeps a two-column flex shell with no mobile fallback. - Only the chat top bar and runtime drawer receive mobile breakpoints (`tauri-app/src/components/ChatView.css:303`, `tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.css:339`), so the global layout does not adapt as a system. ### 6. Experience Design (2/4) - Empty state, loading spinner, disabled send button, streaming stop button, and runtime status feedback are all positive signs (`tauri-app/src/App.tsx:50`, `tauri-app/src/components/ChatView.tsx:363`). - Accessibility is partial: the drawer has dialog semantics (`tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.tsx:225`), but conversation rows are not keyboard-native and icon buttons depend on `title` text. - Deletion actions lack confirmation/undo and are hidden until hover, which is risky for both touch and desktop (`tauri-app/src/components/Sidebar.tsx:111`, `tauri-app/src/components/MessageBubble.css:121`). - Runtime and Markdown behavior generate repeated console failures, documented in `.planning/ui-reviews/playwright-console.md:4`, which hurts perceived reliability before the user even chats. - Offline model loading keeps failing against `http://127.0.0.1:8080/v1/models` without an inline recovery affordance, documented in `.planning/ui-reviews/playwright-network.md:1`. --- ## Files Audited - `tauri-app/src/App.tsx` - `tauri-app/src/App.css` - `tauri-app/src/index.css` - `tauri-app/src/components/Sidebar.tsx` - `tauri-app/src/components/Sidebar.css` - `tauri-app/src/components/ChatView.tsx` - `tauri-app/src/components/ChatView.css` - `tauri-app/src/components/MessageBubble.tsx` - `tauri-app/src/components/MessageBubble.css` - `tauri-app/src/features/runtime/components/RuntimeStatusCard.tsx` - `tauri-app/src/features/runtime/components/RuntimeStatusCard.css` - `tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.tsx` - `tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.css` - `tauri-app/src/features/runtime/api.ts` - `tauri-app/src/features/runtime/useRuntimeManager.ts` - `tauri-app/src/hooks/useModels.ts` - `tauri-app/src/hooks/useDB.ts` - `tauri-app/src/lib/db.ts` - `tauri-app/src/lib/markdown.ts`