Skip to content

Planning & Execution

Checkpoint Timeline

Checkpoints the agent made along the way — scrub through turns, see what changed, restore to any point.

2 variantsMIT

Preview

Checkpoints

8 turns

Checkpoint 8 · current1m ago

Update snapshots after the flag change

  • test/__snapshots__/cli.spec.ts.snap+40−38
+40 −38 at checkpoint 8Current state

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/checkpoint-timeline.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { CheckpointTimeline } from "@/components/ui/checkpoint-timeline";

export function SessionHistory({ session }: { session: AgentSession }) {
  return (
    <CheckpointTimeline
      data={session.checkpoints.map((c) => ({
        id: c.id,
        label: c.summary,
        at: formatRelative(c.createdAt),
        files: c.diffStat, // [{ path, additions, deletions }]
      }))}
      onRestore={async (checkpoint) => {
        await session.rewind(checkpoint.id); // reverts files and drops later turns
      }}
    />
  );
}

Props

PropTypeDefaultDescription
data*Checkpoint[]—Checkpoints oldest first. The last one is treated as the current state.
variant"timeline" | "compact""timeline"A scrubber with a preview of the hovered or selected checkpoint, or a single row with previous / next.
selectedIdstring—Controlled selection. Defaults to the latest checkpoint.
onSelect(checkpoint: Checkpoint) => void—Called on click, focus or arrow keys (← → Home End).
onRestore(checkpoint: Checkpoint) => void—Called after the inline confirmation. Remove the later checkpoints from data — the track trims with an animation.
confirmingboolean—Controls the confirmation step. Leave unset to let the component own it.
onConfirmingChange(confirming: boolean) => void—Called when the user opens or cancels the confirmation.
classNamestring—Extra classes for the root element.
type Checkpoint = {
  id: string;
  label: string; // what the turn did
  at: string; // display time, e.g. "4m ago"
  files: { path: string; additions: number; deletions: number }[];
};