Skip to content
Kura

Checkpoints

experimental

Restore points across an agent run: a compact rail of auto and saved checkpoints with relative times, a current marker and inline-confirmed Restore.

@kura-ui/react/checkpointsCopy for agentsMarkdownRegistry JSON

Three checkpoints

minimal

Checkpoints3

  1. Patched src/middleware.tsCurrent
  2. Replaced fetchUser() in 9 files
  3. Run started on kura/auth-client

Live, with save and restore

A new automatic checkpoint lands while you watch; Restore confirms inline and resolves after a simulated 900ms; Save checkpoint adds a manual one.

full

Checkpoints5

  1. Updated login and session testsCurrent
  2. Patched src/middleware.ts
  3. Before middleware changesSaved
  4. Replaced fetchUser() with auth.getSession()
  5. Run started on kura/auth-client

After a rewind

The current checkpoint is in the middle; newer ones read as undone and can be restored forward.

state

Checkpoints5

  1. Updated login and session tests(undone)
  2. Patched src/middleware.ts(undone)
  3. Before middleware changesSavedCurrent
  4. Replaced fetchUser() with auth.getSession()
  5. Run started on kura/auth-client

Empty

state

Checkpoints0

No checkpoints yet

One is saved automatically before the agent edits files.

With run-header

Restoring rewinds the run's step count and pauses it; Resume returns to the latest checkpoint.

composition

Migrate session API to @acme/auth

Elapsed
–:––
Run running

Checkpoints5

  1. Updated login and session testsCurrent
  2. Patched src/middleware.ts
  3. Before middleware changesSaved
  4. Replaced fetchUser() with auth.getSession()
  5. Run started on kura/auth-client

Installation

npx shadcn@latest add https://kuro.abstergo.fyi/r/checkpoints.json

Copies the source into components/kura/checkpoints with its dependencies (kura-theme, button, utils). Tokens come from the kura-theme item.

When to use it

Use it for

  • A coding agent snapshots the workspace before edits (Claude Code rewind, Cursor checkpoints) and the human should be able to roll files back.
  • Showing where the workspace is after a rewind: checkpoints newer than the current one read as undone and can be restored forward.
  • Letting people save a manual checkpoint before a risky step (onCreate).

Reach for something else when

  • The agent's plan or steps — use task-list or agent-timeline.
  • Reviewing what changed in files — use diff-view or file-changes.
  • Git history or commits — this is for harness snapshots, not a commit log.

Props

PropTypeDefaultDescription
checkpoints*Checkpoint[]—{ id, label, at, filesChanged?, kind: 'auto' | 'manual', current? }, newest first. Mark exactly one current.
titleReact.ReactNode"Checkpoints"Header title; the count follows it.
onRestore(id: string) => void | Promise<void>—Restore handler, called after the inline confirm. Return a promise to show a spinner until it settles. Without it no Restore buttons render.
onCreate() => void—Shows 'Save checkpoint' in the header. Add a kind:'manual' checkpoint marked current.
confirmbooleantrueAsk inline before restoring. false calls onRestore directly.
emptyReact.ReactNode—Replaces the default empty state ('No checkpoints yet').

All native attributes of the root element, className and ref pass through.

Anatomy

  1. CheckpointsRoot panel (a size container).data-slot="checkpoints"
  2. HeaderTitle, count and the optional checkpoints-create button.data-slot="checkpoints-header"
  3. Item<li> with `data-kind`, `data-current`, `data-ahead` (newer than current = undone) and `data-state='confirming'`. Node on a hairline rail: hollow ring = auto, diamond = saved, ink dot with halo = current.data-slot="checkpoints-item"
  4. LabelWhat the agent had just done. Truncates.data-slot="checkpoints-label"
  5. Current'Current' pill.data-slot="checkpoints-current"
  6. Files'3 files' in mono (hidden when narrow).data-slot="checkpoints-files"
  7. RestoreGhost button that swaps in for the relative time on hover/focus (always visible on touch); aria-expanded when confirming.data-slot="checkpoints-restore"
  8. ConfirmInline confirm under the row: what will be undone (or re-applied), Cancel and Restore.data-slot="checkpoints-confirm"
  9. EmptyEmpty state.data-slot="checkpoints-empty"

Accessibility

  • Role: list (ol)
  • An ordered list labelled by the title. Times are <time datetime> with the absolute time as a tooltip.
  • Restore buttons are named 'Restore to <label>'. Opening the confirm moves focus to its Restore button; Escape or Cancel closes it and returns focus to the trigger.
  • Undone checkpoints carry visually hidden '(undone)'. A polite status region announces 'Restored to …'.
  • Relative times render after mount only, so server and client markup match.
  • Reduced motion: Rows fade in without rising; the confirm opens with a fade instead of a height transition.
KeysAction
TabReach each Restore button (it becomes visible on focus)
Enter / SpaceOpen the inline confirm, then confirm
EscapeCancel the confirm

Notes for agents

  • Pass checkpoints newest first and mark exactly one current; the component uses `at` to work out which are undone.
  • Restore only rewinds files in your harness; keep the conversation and say so in your UI copy if that differs.
  • Make onRestore async when restoring takes time so the confirm shows a spinner and blocks double restores.