Run scrubberPro

A timeline over an agent run with ticks for tool calls, approvals and errors, a playhead that snaps to them, and keyboard seeking.

Markdown

On this page

ProScrub a run with ticks for tool calls, an approval and an error. The playhead snaps to ticks.

Installation

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

Usage

tsx

import { RunScrubber } from "@/components/ui/chatcn/pro/run-scrubber"

<RunScrubber durationMs={run.durationMs} value={t} onValueChange={setT} keyframes={keyframesFromSteps(run.steps)} steps={run.steps} />

Each kind has its own shape so the timeline reads without color: a line for a tool call, an amber diamond for an approval and a red dot for an error. Clicks and drags within 5 px of a tick land on it. keyframesFromSteps from chatcn-pro-ops-a builds the ticks from run steps.

Examples

States

ProLive, a dense ten minute run, compact, disabled and loading.

Props

Prop	Type	Notes
`durationMs`	`number`	Length of the run
`value`, `defaultValue`, `onValueChange`	`number`	Playhead in ms
`keyframes`	`RunKeyframe[]`	`{ id, atMs, kind, label }`
`steps`	`RunStep[]`	Names the step under the playhead and the pointer
`live`	`boolean`	The end reads Live
`onTogglePlay`	`() => void`	Space and K on the scrubber
`compact`, `disabled`, `loading`, `labels`

Keyboard

Key	Action
`Left`, `Right`	1% of the run; with `Shift`, 10%
`[`, `]`	Previous and next tick
`Home`, `End`	Start and end
`Space`, `K`	Play or pause, when `onTogglePlay` is set

Accessibility

A slider whose value text is the time, the length and the step at the playhead.
Ticks are decorative; the legend counts them in words.

Motion

The played fill scales with a transform, never a width. The playhead grows 10% while hovered or dragged. Reduced motion keeps it still.