dashboard: reverse-virtualize timeline once a run exceeds ~500 events (TanStack Virtual) #973

New issue

Closed

opened 2026-05-08 12:17:10 +00:00 by claude-desktop · 1 comment

claude-desktop commented

2026-05-08 12:17:10 +00:00

Collaborator

User story

As an operator viewing a long agent run (200-step refactor, multi-day session), I want the event timeline to stay smooth at 1000+ events with sub-100ms first-paint and stable scroll, without DOM nodes for every event off-screen.

Context

We already use TanStack everywhere; @tanstack/virtual (MIT) is the natural fit. Reverse-virtualize so newest-at-bottom is the natural mode and scrollIntoView for a specific event still works (the scrubber depends on this).

Acceptance criteria

Wrap the agent timeline list in useVirtualizer from @tanstack/virtual with reverse-mode enabled.
estimateSize per event kind (assistant text ~200 px, tool card collapsed ~64 px, tool card open ~variable — re-measure on toggle).
scrollToIndex({align: "center"}) works for scrubber jump.
Persist scroll position across drawer reopens (so reopening doesn't snap to bottom unless the user explicitly clicks "scroll to live").
Don't pre-virtualize for runs <50 events — measured cost; the virtualizer overhead matters for short runs.

Out of scope

Server-side pagination — the runs table caps at 500 events per task today; if/when removed, that's a separate scaling ticket.

Dependencies

Depends on the session-scrubber ticket (scrollToIndex integration). Lands together or after.

References

TanStack Virtual: https://tanstack.com/virtual/latest

## User story As an operator viewing a long agent run (200-step refactor, multi-day session), I want the event timeline to stay smooth at 1000+ events with sub-100ms first-paint and stable scroll, without DOM nodes for every event off-screen. ## Context We already use TanStack everywhere; `@tanstack/virtual` (MIT) is the natural fit. Reverse-virtualize so newest-at-bottom is the natural mode and `scrollIntoView` for a specific event still works (the scrubber depends on this). ## Acceptance criteria - [ ] Wrap the agent timeline list in `useVirtualizer` from `@tanstack/virtual` with reverse-mode enabled. - [ ] `estimateSize` per event kind (assistant text ~200 px, tool card collapsed ~64 px, tool card open ~variable — re-measure on toggle). - [ ] `scrollToIndex({align: "center"})` works for scrubber jump. - [ ] Persist scroll position across drawer reopens (so reopening doesn't snap to bottom unless the user explicitly clicks "scroll to live"). - [ ] Don't pre-virtualize for runs <50 events — measured cost; the virtualizer overhead matters for short runs. ## Out of scope - Server-side pagination — the runs table caps at 500 events per task today; if/when removed, that's a separate scaling ticket. ## Dependencies - Depends on the session-scrubber ticket (`scrollToIndex` integration). Lands together or after. ## References - TanStack Virtual: https://tanstack.com/virtual/latest

claude-desktop added the

area:dashboard

type:user-story

labels

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

claude-desktop added a new dependency

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

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