dashboard: session scrubber — sticky bottom track with per-event ticks, hover preview, kbd nav, replay #968

New issue

Closed

opened 2026-05-08 12:16:09 +00:00 by claude-desktop · 2 comments

claude-desktop commented

2026-05-08 12:16:09 +00:00

Collaborator

User story

As an operator post-mortem'ing an agent run, I want a sticky timeline scrubber at the bottom of the run view with one tick per event (color-coded by tool kind), where dragging or pressing , . jumps the chat scroll + workspace state to that event, so I can replay a 200-step run without infinite scrolling.

Context

Devin's draggable progress bar at the bottom of the workspace + linked chat scroll is the strongest reference; LangSmith / Langfuse / Helicone are explicitly criticized for not having one (dev.to critique). Adding it here is the single biggest copy-able UX win over the OSS observability tools.

Acceptance criteria

<SessionScrubber> position: sticky bottom-0 inside the run view. Track is full-width, ~24 px tall.
Tick per event, colored by ToolKind (taxonomy issue #954). Errors and approvals are larger / accent-tinted ticks. Compactions render as a different glyph (vertical bar w/ glyph).
Hover a tick: popover with the event's <ToolCard> summary (compact mode).
Click a tick or drag the playhead: chat scrolls to the matching event; subagent swimlane focuses; pinned PlanPanel updates if the plan-state-at-that-time differs.
Keyboard: , previous event, . next event, [ / ] previous-error / next-error.
When prefers-reduced-motion, scroll is instant (no smooth-scroll).
Performance budget: 1000 events should render the track in <50 ms; achieved by canvas-render of ticks (not 1000 DOM nodes) with hover-area mapping.

Out of scope

Time-warping the SSE state on the live run (i.e. "rewinding while still streaming"). Scrubbing only applies to settled runs; live runs render the playhead at the latest event with no rewind.
Sharing a scrubber position via URL (separate enhancement).

Dependencies

Depends on the subagent tree + swimlane ticket (timeline data is keyed by lanes for the popover focus).
Depends on #951 (delta events feed the tick density).

References

Devin scrubber: https://ppaolo.substack.com/p/in-depth-product-analysis-devin-cognition-labs
"The missing layer in LangSmith / Langfuse / Helicone": https://dev.to/custodiaadmin/the-missing-layer-in-langsmith-langfuse-and-helicone-visual-replay-21gk

## User story As an operator post-mortem'ing an agent run, I want a sticky timeline scrubber at the bottom of the run view with one tick per event (color-coded by tool kind), where dragging or pressing `,` `.` jumps the chat scroll + workspace state to that event, so I can replay a 200-step run without infinite scrolling. ## Context Devin's draggable progress bar at the bottom of the workspace + linked chat scroll is the strongest reference; LangSmith / Langfuse / Helicone are explicitly criticized for not having one ([dev.to critique](https://dev.to/custodiaadmin/the-missing-layer-in-langsmith-langfuse-and-helicone-visual-replay-21gk)). Adding it here is the single biggest copy-able UX win over the OSS observability tools. ## Acceptance criteria - [ ] `<SessionScrubber>` `position: sticky bottom-0` inside the run view. Track is full-width, ~24 px tall. - [ ] Tick per event, colored by `ToolKind` (taxonomy issue #954). Errors and approvals are larger / accent-tinted ticks. Compactions render as a different glyph (vertical bar w/ glyph). - [ ] Hover a tick: popover with the event's `<ToolCard>` summary (compact mode). - [ ] Click a tick or drag the playhead: chat scrolls to the matching event; subagent swimlane focuses; pinned PlanPanel updates if the plan-state-at-that-time differs. - [ ] Keyboard: `,` previous event, `.` next event, `[` / `]` previous-error / next-error. - [ ] When `prefers-reduced-motion`, scroll is instant (no smooth-scroll). - [ ] Performance budget: 1000 events should render the track in <50 ms; achieved by canvas-render of ticks (not 1000 DOM nodes) with hover-area mapping. ## Out of scope - Time-warping the SSE state on the live run (i.e. "rewinding while still streaming"). Scrubbing only applies to settled runs; live runs render the playhead at the latest event with no rewind. - Sharing a scrubber position via URL (separate enhancement). ## Dependencies - Depends on the subagent tree + swimlane ticket (timeline data is keyed by lanes for the popover focus). - Depends on #951 (delta events feed the tick density). ## References - Devin scrubber: https://ppaolo.substack.com/p/in-depth-product-analysis-devin-cognition-labs - "The missing layer in LangSmith / Langfuse / Helicone": https://dev.to/custodiaadmin/the-missing-layer-in-langsmith-langfuse-and-helicone-visual-replay-21gk

claude-desktop added the

area:dashboard

type:user-story

labels

2026-05-08 12:18:11 +00:00

claude-desktop added a new dependency

2026-05-08 12:19:18 +00:00

#965 dashboard: subagent tree (rail) + swimlane (timeline) for parallel agent runs

claude-desktop added a new dependency

2026-05-08 12:19:18 +00:00

#951 agents: stream cursor InteractionUpdate deltas (text, thinking, tool, shell, token, summary)

claude-desktop added a new dependency