User Interface — Design

Mirrored from docs/design/user-interface/2_design.md. Edit the source document in the repository, not this generated page.

This document describes the current Orbit UI implementation: the local dashboard assets, the Canon Refined visual rules they rely on, and the telemetry behaviors that must stay consistent with backend data.

1. Dense Layout

The dashboard favors wide, dense tables and panels over narrative screens. Tight spacing, small radii, and expandable sunken detail rows preserve hierarchy without hiding root lists. The scoreboard compresses companion metrics into pairs: tokens is total/output, tool fail/all is failed over total tool calls, and duel w/all is wins over participated duels. The primary friction column remains reported count only [T20260428-15].

2. Layered Palette

The UI uses layered dark surfaces instead of flat black: base canvas, elevated panels, sunken wells, and accent washes. Status color should stay muted and distinct; exact token values live in ./specs/theme.md and the dashboard CSS.

3. Typography

Inter carries labels, headings, and prose. JetBrains Mono is reserved for IDs, metrics, timestamps, code, and log streams so numeric and diagnostic data stays aligned.

4. Live Status

Live processing is visible through pulsing dots, spinners, buffered-log counters, periodically refreshed tiles, and compact ticker-style values. The orbit.log panel is viewport-bounded; overflowing rows scroll inside the log stream so footer filters and follow-tail controls remain visible [T20260430-29]. Motion is functional: it points to active work without making the operator read raw logs first.

5. Dashboard Telemetry Consistency

Summary tiles and drill-down panels must agree. Audit > Policy is the detail view for the Denials 24h tile, so /api/diagnostics/denials combines v2 loop JSONL denial rows with SQLite status = denied audit events. SQLite filesystem boundary denials without an activity fsProfile use the stable workspace-boundary label [T20260428-13].

6. Concerns & Honest Limitations

Accessibility still needs a real WCAG pass; responsive behavior remains optimized for wide desktop viewports; raw HTML, CSS variables, and dashboard JavaScript keep the runtime simple but leave duplication across project surfaces.

Task References

• [T20260427-29] introduced the Canon Refined UI direction.
• [T20260428-13] unified dashboard denial sources for the policy drill-down.
• [T20260428-15] compacted scoreboard ratio columns.
• [T20260430-24] shortened this design doc while preserving current behavior statements.
• [T20260430-29] bounded the live orbit.log panel to the viewport.

Resolve any task above with orbit task show <ID> or git log --grep=<ID>.