Force-UI evidence . light theme . targeted mode

Dashboard logs page redesign

Sub-issue #1142 . parent #1138 . sibling backend #1141

Branch kai/feat/1138-logs-ui-redesign . target kai/feat/1138-logging-revamp (integration) . captures via ?mock=logs against local dashboard at 1440x900 (mobile at 390x844)

Targeted mode chosen: original "before" UI is captured in issue #1138 comment (contributor screenshot labeled "looks terrible"). This evidence shows the redesigned state with red callout boxes annotating new behaviors.

What changed

redesign-existing-projects . web-design-guidelines
  • Removed ornamental glow / radial gradients / faux-HUD copy from logs.tsx and components/logs/*.
  • Calm 3-pane shell on desktop, stacked + bottom-sheet on mobile.
  • List virtualized via react-virtuoso; trace-grouped rows by requestId.
  • Filters split into primary (search/level/source) + advanced (module/stage/requestId/time window).
  • Live-tail pause/resume with rotation-safe id-set diff for new-entries pill.
  • Detail panel: Overview / Context / Raw tabs; copy JSON, copy requestId, "Show trace" jump.
  • Designed states: empty (selection / no data / no results / out-of-scope) and error w/ retry.
  • Keyboard: j/k . Enter . Esc . / . Space . ? + visible ? button in header.
  • Reduced-motion respected; AA contrast tokens; visible focus rings.

1. Overview - default state

1440x900 . light . callouts on Live pill (1) and ? button (2)
Logs page default state
List + filters + detail panel populated. (1) connection status pill ("Live"). (2) new ? button surfaces keyboard shortcuts dialog.

2. Trace grouping

collapse-by-requestId . expanded vs collapsed states
Trace grouping with expanded and collapsed states
(1) expanded trace shows 5 indented stage rows (intake / auth / route / handler / provider) under the parent row, all sharing req_0001. (2) collapsed trace badge ("trace . 6 stages") with chevron - one click toggles.

3. Live-tail paused

pause/resume affordance
Live tail paused state
(1) sticky header swaps to "Resume tail" with play icon when paused (was "Pause tail" with pause icon). (2) connection pill stays "Live" - polling continues to count new entries; UI just stops auto-scrolling.

4. Advanced filters

primary + advanced split
Advanced filters expanded
Advanced filters expand inline below primary filters: module . stage . requestId . time window. Disclosure chevron flips on toggle. All inputs debounced 250ms; in-flight queries cancelled on filter change.

5. Empty state - filtered to nothing

designed empty + active filter chip
Empty state with active filter chip
Filter requestId: req_99999 matches nothing. Center pane shows centered icon + "No entries match your filters" + actionable copy. Active filter chip requestId: req_99999 with x to clear; "Clear all" link below. Right pane shows distinct "No entry selected" empty variant.

6. Keyboard shortcuts dialog

discoverable via ? button or ? keypress
Keyboard shortcuts dialog
(1) new ? button in header. (2) dialog lists all 7 keybindings: j/arrow-down next, k/arrow-up prev, Enter focus detail, Esc close mobile, / search, Space pause/resume, ? help. Background shows the upstream-errors view with multiple error traces visible.

7. Mobile - 390x844

stacked layout, no detail-pane fight
Mobile layout 390x844
Header collapses to icon row (Live pill, Refresh, ?, Settings). Filters stack vertically. Detail panel becomes bottom sheet on row tap (not shown here - empty state at small viewport just shows the list).

Capture metadata

  • Theme: light (default per force-UI rule).
  • Backend: mock fixture via ?mock=logs URL flag (150-entry deterministic fixture incl. 5 traces of 3-6 stages each).
  • User / dataset / fixture / theme / viewport held constant within each capture.
  • Callouts: DOM overlay injected via Playwright browser_evaluate, red #ef4444 3px solid border, 8px expanded padding (no ImageMagick).
  • Capture tool: Playwright MCP. Annotations baked into the PNG by injecting overlay divs before screenshot.
  • HEAD SHA: 1c814787a671be1121154b1c72f48932ec4f9904 - orchestrator pins after final commit.
  • PR number: 1146 - orchestrator renames asset directory after PR creation.