Surfaces

Text

Accents role-coded — same meanings as TUI

Chart spectrum six-stop series — distinguishes without shouting

Type

Sans-serif (Inter) for prose; monospace (JetBrains Mono) for code, data, file paths, counts, glyphs, and section labels. Smaller text steps below 12px stay monospace — readability holds better at small sizes than narrow sans.

Glyphs single-char icons reused from the TUI

Cards

Every panel is a stack or grid of cards. The 2px left border encodes role: brand for in-progress, accent for plan/reasoning, warn for approval, err for failures.

Pills

Status chips. Always uppercase mono, always small. Use sparingly — too many pills in one row turns into noise.

Tables

Dense by default. Numeric columns are tabular-nums and right-aligned. Path / id columns get monospace. Header is uppercase 10.5px to keep the eye on the data.

Toasts

Top-right stack, auto-dismiss in 3s. Border-left encodes kind. One-line by default; expandable for tracebacks.

Code blocks

Kept close to the TUI's terminal feel — slightly darker than the panel surface, monospace, no ligatures-from-noise. Inline highlighting reuses accent colors.

Diff view

Unified by default; side-by-side toggle lives in the §7 Edit review panel. Add/remove rows tinted ~6% opacity over the code surface; syntax highlighting reuses the .kw / .str / .com tokens from the code block, so the diff blends with surrounding code visually. Word-level intra-line diff via .word-add / .word-rem highlights only the bytes that actually changed.

Charts

Title in 11px uppercase mono · current value in 22px mono · sparkline below. Hover drives a tooltip with the date and exact value (handled by the chart lib at impl time, not in the mockup). Series follow the spectrum tokens.

Progress replaces every default browser bar

The current dashboard leans on <progress> default styling — chrome-grey trough, OS-tinted fill, no role coding. Replace with a single .progress primitive: 6px tall, 3px thin variant, 10px thick variant, role tints (ok / warn / err / acc). Always paired with a tabular-nums numeric label. Indeterminate is a shimmer slice, not a spinning circle.

Form controls

Monospace inputs; the focus ring is a 1px brand-color border, no glow. Labels in 10.5px uppercase mono so they sit visually as "field tags" rather than competing with the input itself.

Composer states how the input bar reads in different conditions

One composer, four states. Border + foot copy carry the difference; geometry stays put so the eye doesn't reorient.

Approval modal tool-call confirmations mirror from the loop

When the model wants to run a non-allowlisted command, both the TUI and the dashboard show the same approval. Either side can resolve. The dashboard frames it as a centered dialog (more body, can show full diff/output preview), the TUI shows it inline as a card. Same dispatch path either way.

Command palette Ctrl/⌘+K opens a global jump bar

Slash commands, panels, sessions, even MCP tools — all addressable through one fuzzy search. The popover from inside the composer is the same component, just anchored differently and pre-filtered to slash commands. Avoids the dashboard ever needing menus.

Layout principles

Top row: 4 KPIs (balance · token volume · cache hit · tool calls) — the four numbers you check first when picking up an in-progress agent. Wider middle: current session + cost trend, side by side. Lower middle: plan history + tool feed — the "what's been happening" pair. Bottom KPIs: configuration health (tools / MCP / memory / version).

Every widget is a link into the corresponding panel. Hover reveals "open" affordance; click opens the deeper view.

Empty state first launch / fresh workspace

Don't show a sad cloud illustration — show what the user can do next.

Bulk operations

Select multiple rows (shift-click range, ⌘-click toggle) → action bar slides in at the bottom of the list pane: delete, archive (move to .archive/, hidden by default), export (zip with sidecars), tag. No bulk-rename — one session at a time keeps the timestamp invariant intact.

Multi-file summary

Top-of-page aggregator. Stat row, mode toggle, bulk approve/reject. The Apply all button is disabled until every file is either approved or explicitly skipped — same gate the kernel will enforce.

Per-file card · expanded

Default state for any file with under ~80 changed lines. Header shows path + per-file stat + per-file approve/reject. Clicking the chevron collapses to header-only. Approval is sticky across panel re-renders so a long review doesn't lose state.

Per-file card · collapsed

Default for files past the line-count threshold, or after the user has approved/rejected them. Header stays interactive — re-open with one click.

Side-by-side mode

Activates from the toggle in the top summary. Two panes share row alignment so the eye scans horizontally. Empty cells in either pane render as the elevated background, signalling pure adds/removes vs. modifications. Word diff inside the cells survives the mode swap.

Empty + error states

Three visual states for the panel:

• No pending edits — single line in elevated background: — no edit_file calls in this turn —. Clicking opens the most recent reviewed turn (read-only).
• One edit, all approved — summary collapses to a single chip: ✓ 1 file applied · src/cli/commands/chat.tsx. Re-expand from the chip.
• Test red after apply (RFC #25 stage 2) — diff stays visible, file card gains a red footer: test_run failed · vitest -t "<name>" · status fail · auto-reverted. Approve gate blocks until the model re-tries or the user opts into /refactor.

Wiring

Data source: events.jsonl via the dashboard's /api/events stream. Each tool.dispatched for edit_file + its paired tool.result + (post-#25) test_run compose one card. Apply / reject are no-ops in the design — the actual side-effect is in the kernel; the panel only reflects state.

Config preview dry-run output before saving

Clicking Preview on the index-config card POSTs the pending config to /api/index-config/preview, which runs the chunker walker without writing. Shows the projected delta + a sample of files that would change category. No state is mutated.

Build progress when index is being rebuilt

Settings · Raw JSON view when forms aren't enough

For everything not exposed via form (custom keymap, env passthroughs, exotic MCP transport overrides), the raw editor is one click away — same CodeMirror as the Editor panel, with JSON schema validation for autocomplete and warnings.

Take-over UX

When the dashboard takes input, does the TUI show the streaming response live (read-only), or pause until the dashboard releases? Lean toward live read so terminal-2 keeps reading while terminal-1 has the keyboard.

Sidebar grouping

Three groups (workspace · observe · configure) feel natural now. If the panel count grows past 14, may need a second axis (collapsible sub-sections) — defer until pressure exists.

Mobile / narrow

Out of scope for v1. The dashboard is a localhost development tool; phone-screen layout would only matter if Reasonix ever runs as a hosted service.

Theming

Single dark theme for v1. Light theme is a 1-week effort and not on the path right now — the TUI is dark-only too, theme parity is a non-goal.

Editor panel

Not mocked here. Lives in the same shell, but its core is a CodeMirror instance + tabs + tree view — those have their own design language already (CodeMirror's default dark + our palette overrides). A separate doc when we touch Editor.