Run replayPro

Replay a finished agent run step by step with a scrubber, play at 1x to 8x and jump to tool calls.

Markdown

On this page

ProReplay the triage run step by step at 1x to 8x, and jump to tool calls.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/run-replay

Usage

tsx

import { RunReplay } from "@/components/ui/chatcn/pro/run-replay"

<RunReplay steps={run.steps} meta={run.id} />

The step list fills in as the playhead passes. The current step shows its input, and its output arrives the way it did: answers and reasoning reveal by word as time passes, tool results land when the call finished, approvals wait and then show who approved. Built on run-scrubber.

Playback is content, not decoration, so it runs under reduced motion too; it pauses while the tab is hidden.

Examples

States

ProBefore play, paused on a failed tool call, paused on an approval, and nothing recorded.

Props

Prop	Type	Notes
`steps`	`RunStep[]`	`{ id, kind, atMs, durationMs, title, detail?, input?, output?, tokens?, costUsd?, status? }`
`value`, `defaultValue`, `onValueChange`	`number`	Playhead in ms
`speed`, `defaultSpeed`, `onSpeedChange`	`1 \| 2 \| 4 \| 8`	Default 2
`playing`, `defaultPlaying`, `onPlayingChange`	`boolean`
`durationMs`	`number`	Default: the end of the last step
`meta`, `labels`, `locale`

Keyboard

Key	Action
`K`, `Space` on the scrubber	Play or pause
`N`, `P`	Next and previous step
`T`	Next tool call
`[`, `]` on the scrubber	Previous and next tool call, approval or error

Accessibility

The current step is marked with aria-current in the list.
While paused, the current step's title is a polite live region; during playback it stays quiet.

Motion

No animation beyond the scrubber's. Text reveals by word, never per character.