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 divs 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

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.
High impact / low-medium effort - Replace hover-only and div-based interactions with accessible controls. Make conversation rows real buttons, add aria-labels to icon buttons, keep message/chat actions visible or tappable on touch, and add keyboard support.
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.
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.
Medium impact / low-medium effort - Add confirmation or undo for deletes. A lightweight confirm popover or toast-based undo will reduce accidental loss.
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

10 KiB Raw Blame History