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.
+
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)
+
+
+
+
+ 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
+
+
+
+
+ (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
+
+
+
+
+ (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 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
+
+
+
+
+ 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
+
+
+
+
+ (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
+
+
+
+
+
+
+ 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: {HEAD_SHA_PLACEHOLDER} - orchestrator pins after final commit.
+ 
+ 
+ 
+ 
+ 
+ 
+