Checkpoint

A divider between messages that marks a saved point and lets you roll files back to it.

Loading preview…

Install

  1. 1

    Run this command in your Tailwind CSS project. It adds components/ai/checkpoint-default.tsx and installs its dependencies.

    $ npx shadcn@latest add https://gradientdeck.com/ai-components/r/checkpoint-default.json

Usage & API

Example

checkpoint-default.tsx
import { Checkpoint } from "@/components/ai/checkpoint-default"

<Checkpoint
  files={[]}
  onRestore={() => {}}
/>

Props Checkpoint

PropType & descriptionRequired
filesCheckpointFile[]Required
timestringe.g. "2 min ago"Optional
restoredbooleanOptional
onRestore() => voidRequired

Dependencies

  • React
  • Tailwind CSS
  • motion
  • lucide-react
Implementation notes

A horizontal rule is broken by a pill and, on the other side, Restore or the word Restored. The pill's button toggles the file list and carries a history mark, the word Checkpoint, the file count, time when set, and a chevron. The list is centered under the rule. Each row is path, additions and removals. Restore opens an alertdialog whose text says to undo everything after this point, that files go back, and that later messages are removed. Cancel closes it. The dialog's Restore calls onRestore and closes the dialog. It does not set restored by itself. You pass restored so the button swaps for a check and the word Restored. While restored is true, the confirm cannot open.

Choosing a layout

Use the divider when a turn changed files and the person may want the thread, and the files, back to the moment before a later attempt. The confirm copy is specific: files go back, and later messages are removed. Do not use it if your restore only reverts files and leaves the conversation, because the dialog would be promising a second effect you do not perform. Pass restored after your restore succeeds so the button cannot be activated again by mistake. The open file list is there so the person can see the size of the rewind before they ask for it.

Use the history when several points exist and the person is choosing among them, rather than acting on the one divider under a message. The history confirm talks only about restoring the files saved at that point. It does not mention messages. That difference matters. A file edit review shows the patch and cannot rewind. Tool approval is the pause before a command, not a saved point after one. If a restore should also move the conversation, the divider is the layout whose dialog says so, and your onRestore has to do both.

What does the confirm dialog claim will happen?

On the divider, it says files go back and later messages are removed. onRestore is called with no id, so you already know which point this divider is. On the history, the confirm only asks about restoring that checkpoint's files, and onRestore receives the id. Match your behavior to the dialog you showed. Passing restored is how the divider retires its button after you succeed.

Can the file list on the divider stay closed?

It starts closed. The pill still shows the count and, when time is set and the row is wide, the time. Opening it lists path, added and removed for each file. There is no diff in that list. The history layout starts open and has no paths to show, only the count on each saved point.

Tool approval2 variants

Asks the person before the agent runs a command or tool, with deny, allow once and always allow.

Question2 variants

A multiple-choice question from the agent. Pick with number or arrow keys, or type your own answer.

Decision inbox2 variants

Everything agents are waiting on you for, in one queue: what they want to do, why, and what happens if you say yes.