Run Snapshot Timeline React component
Step back through an AI agent's run: drag along the line to see each saved state, with its files, tests and cost, then restore to any point.
About the Run Snapshot Timeline component
Run Snapshot Timeline lets people rewind an AI agent's work. Two curves show how the tests and the budget moved, and dragging along them shows the run at that moment: what changed, how the tests stood and what it had cost so far.
If the run went wrong somewhere, restore to the last good point. Later work is set aside instead of deleted, so one click on Undo brings it back.
When to use it
Use it in coding agents, automation tools and anywhere a long run saves checkpoints.
It works best with a handful of meaningful snapshots. Saving one every few seconds makes the line hard to read.
Installation
Add the Run Snapshot Timeline component to your project with the shadcn CLI. It lands in components/run-snapshot-timeline.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/run-snapshot-timelineProps
<RunSnapshotTimeline /> accepts 6 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Move invoices to the new billing API" |
| subtitle | string | "Run 482, finished in 12 minutes" |
| snapshots Oldest first. | RunSnapshot[] | DEFAULT_SNAPSHOTS |
| onRestore Fires with the snapshot the run goes back to. | (snapshot: RunSnapshot) => void | — |
| onUndoRestore | () => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Move invoices to the new billing API"
- subtitlestringDefault: "Run 482, finished in 12 minutes"
- snapshots
Oldest first.
RunSnapshot[]Default: DEFAULT_SNAPSHOTS - onRestore
Fires with the snapshot the run goes back to.
(snapshot: RunSnapshot) => void - onUndoRestore() => void
Run Snapshot Timeline FAQ
- Does it restore anything by itself?
- No. onRestore tells you which snapshot was chosen, and your backend does the work.
- Can I use the keyboard?
- Yes. Focus the line, then use the arrow keys, Home and End.
- What happens to later snapshots?
- The line turns dashed after that point and they are marked as set aside. Undo brings them back.
- Does the card change height while scrubbing?
- No. Every snapshot shares one grid cell.
