CheckpointList
StableA list of earlier steps you can go back to, with restore and summarize buttons and a confirm step.
Also known as checkpoints, restore points, snapshots
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Rewind list
- Current
Make the upload try again if it fails
2 min ago · 2 files changed
Split the settings form into sections
14 min ago · 5 files changed
Set up the project
1 hr ago · 0 files changed
<CheckpointList
currentId={current}
checkpoints={[
{ id: "c3", prompt: "Add a retry to the upload step", time: "2 min ago", files: 2 },
{ id: "c2", prompt: "Split the settings form into sections", time: "14 min ago", files: 5 },
{ id: "c1", prompt: "Set up the project", time: "1 hr ago", files: 0 },
]}
onRestore={(id) => setCurrent(id)}
limitations="Edits made by shell commands are not tracked."
/>In this demo, restoring moves the marker to the chosen step. A step with no changed files cannot use Restore work only.
When to use it
Lets people go back to an earlier step of their work or chat. Restores ask for confirmation inside the row, so people see what they are about to undo.
Made of: Request · Time and file count · Current marker · Rewind button · Choices · Confirm step · Note about what is not covered
Use it for
- An agent or coding session where each request changes files.
- Undoing the conversation, the work, or both, back to one request.
- Shortening a long chat from one point with Summarize from here.
Not for
- Stepping between versions of one message: use VersionPager.
- Named saves of a document or design: use VersionHistory.
- Undoing one AI edit to a short piece of text: use RevertToggle.
Do and avoid
- Current
Add a tip line to the invoice
2 min ago · 1 file changed
Round totals to two decimals
10 min ago · 2 files changed
Make the invoice template
25 min ago · 3 files changed
- Add a tip line to the invoice
- Round totals to two decimals
- Make the invoice template
Do
- Keep the confirm step in the row so the person sees what they are acting on.
- Show the file count so people see what a restore will change.
- Fill in the limitations note when some changes are not tracked, so people know before they restore.
Avoid
- Do not skip the confirm step for the restores.
- Do not use a pop-up window for the confirmation.
- Do not offer choices on the current step. There is nothing to restore.
On a phone
- Each row shows the prompt on one line and cuts it off with an ellipsis. The full text is in a title attribute, which a touch screen does not show, so on a phone it is not available.
- Rewind opens the restore choices under the row; they wrap, and every button has a 44px tap area on a touch screen.
- The confirm text and its warning wrap, so the destructive step stays readable on a narrow screen.
Seen in products
- Claude Code creates a checkpoint at every prompt and retains 100. Esc Esc or /rewind opens a list of prompts with the actions Restore code and conversation, Restore conversation, Restore code, Summarize from here, Summarize up to here and Never mind.
- In Claude Code the restored prompt returns to the input field and a Summarized conversation marker appears in the transcript.
- Claude Code does not track Bash and subagent edits, and it skips symlinks with a warning.
- Cursor lets people click a checkpoint in the chat timeline to preview files and then restore.
- Windsurf has named snapshots and its reverts are irreversible. Replit can roll back to any savepoint.
- Vercel AI Elements ships a Checkpoint component.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| checkpointsrequired | Checkpoint[] | none | Rows with id, prompt, time and files. Rendered in the order given. |
| currentId | string | none | Id of the current checkpoint. It is marked and has no actions. |
| onRestore | (id: string, mode: RestoreMode) => void | none | Called after the person confirms. Mode is everything, conversation or work. |
| onSummarize | (id: string) => void | none | Called when Summarize from here is chosen. It has no confirm step. |
| limitations | ReactNode | none | Slot under the list for what checkpoints do not cover. |
| labels | Partial<Record<RestoreMode | "summarize" | "confirm" | "cancel" | "current" | "rewind", string>> | none | Overrides for visible labels. |
| className | string | none | Extra classes on the wrapper. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- current
- The checkpoint whose id matches currentId shows a Current badge in place of the Rewind button.
- rewind options
- Pressing Rewind opens the restore choices under that checkpoint.
- confirm
- Choosing a restore mode shows a plain warning with a Confirm and a Cancel button before anything happens.
- no files changed
- Restore work only is disabled for a checkpoint where files is 0.
Tokens
Change one of these and every part that uses it follows.
--surface--surface-sunken--danger--border--radius-card
Built in
- The rows are a numbered list, and the current row is marked as the current step for screen readers.
- Rewind tells screen readers whether its choices are open.
- The confirm step is a named group that says what the restore will remove.
- Restore work only is turned off for a step with no changed files.
- Keyboard focus follows the choices: picking a restore moves it to the confirm step, so the warning is read; Cancel returns it to that choice; after a restore or a summary it returns to the row's Rewind button, or to the row itself if it became the current one.
What you need to do
- Pass currentId, so screen readers can tell which step is the current one.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide