Skip to content

feat(replay): interactive session replay with timeline scrubber - #265

Open
Mukller wants to merge 1 commit into
hoangsonww:masterfrom
Mukller:feat/session-replay
Open

feat(replay): interactive session replay with timeline scrubber#265
Mukller wants to merge 1 commit into
hoangsonww:masterfrom
Mukller:feat/session-replay

Conversation

@Mukller

@Mukller Mukller commented Jul 30, 2026

Copy link
Copy Markdown

Summary

Closes #2 — adds a full Session Replay page at /sessions/:id/replay.

Features

  • Timeline scrubber<input type="range"> that spans the entire event sequence; dragging or using arrow keys steps through events deterministically
  • Play / Pause with four speed settings: 0.5×, 1×, 2×, 5× (interval-based, restarts cleanly on speed change while playing)
  • Step controls — step back / forward one event at a time, jump to start / end
  • Lifecycle mini-map — compact visual bar showing SessionStart, Stop, SubagentStop, Compaction, and APIError markers; click any marker to jump there instantly
  • Agent state panel — shows the derived status (working / waiting / completed / error) of every agent seen up to the current cursor position
  • Windowed event list — renders only ±50 events around the cursor, so sessions with 10 000+ events stay smooth
  • Keyboard shortcuts: Space play/pause · / step · Home/End jump to start/end (ignored when focus is in a form field)

Implementation notes

  • Deterministic state engine — events sorted by created_at then id tie-break; applyEvent maps event_type → AgentStatus and accumulates per-agent state
  • Checkpoints every 100 eventsseekToIndex jumps to the nearest checkpoint then replays the tail, keeping seek cost O(checkpoint_interval) instead of O(n)
  • replay i18n namespace — full English locale; falls back to en for other languages (zh/vi/ko) until community translations land
  • detail.replay key added to all four existing sessions.json locales; "Replay" button added to the SessionDetail header bar

Test plan

  • Open any completed session → click Replay button in the header
  • Press Play — events step forward at the chosen speed
  • Drag the scrubber to an arbitrary position — agent states update instantly
  • Click a lifecycle marker on the mini-map — cursor jumps there
  • Press Space, , , Home, End — all work without focus issues
  • Open a session with > 1 000 events — no UI lockup during playback
  • cd client && npx tsc --noEmit — zero errors

…gsonww#2)

Adds a new Session Replay page at /sessions/:id/replay that reconstructs
agent/session state from persisted events and lets users scrub through time.

Features:
- Timeline scrubber (range input) with play/pause/step-forward/step-back
  and jump-to-start/end controls
- Speed selector: 0.5x / 1x / 2x / 5x (interval-based playback)
- Deterministic state engine: sorts events by created_at + id tie-break,
  applies event_type → AgentStatus mapping, builds checkpoints every 100
  events for O(1) seek to any arbitrary position
- Windowed event list (±50 events around cursor) for 10k+ event sessions
- Lifecycle mini-map (SessionStart / Stop / SubagentStop / Compaction /
  APIError markers) with click-to-jump support
- Agent state panel showing derived status of each agent at the cursor
- Keyboard shortcuts: Space play/pause, ← → step, Home/End jump
- i18n: replay namespace (en) wired; translations in English
- "Replay" button added to SessionDetail header (linked to /replay route)
- detail.replay key added to sessions.json for en/zh/vi/ko

Closes hoangsonww#2
@Mukller
Mukller requested a review from hoangsonww as a code owner July 30, 2026 18:57
@github-actions github-actions Bot added bug Something isn't working documentation Improvements or additions to documentation enhancement New feature or request good first issue Good for newcomers help wanted Extra attention is needed question Further information is requested labels Jul 30, 2026

@Dcastroro Dcastroro left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The replay cursor and playback state are not reset when the route id changes or when a new event set is loaded. React can reuse this page instance when navigating between sessions, so a cursor from a long session may remain beyond the end of a shorter session. That leaves currentEvent null, the range value outside its new max, and reconstructed state at an unrelated checkpoint until the user manually jumps or presses play. Reset cursor to zero and stop playback when id changes or immediately before applying the new session payload, and add a navigation test from a longer session to a shorter one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working documentation Improvements or additions to documentation enhancement New feature or request good first issue Good for newcomers help wanted Extra attention is needed question Further information is requested

Projects

Development

Successfully merging this pull request may close these issues.

Feature: Interactive Session Replay with Timeline Scrubber

3 participants