Koala UICheckpoint
ProA restore point inside an agent conversation. At rest it is one hairline between turns; hover it and Restore rolls into place, confirm and the code and the thread go back to that moment, with Undo one click away.
Installation#
Usage#
The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.
Have a license? Unlock it here
Anatomy#
One row: the glyph, the label, a hairline that stretches to fill, and the meta at the end. Restore lives in the meta's slot and Undo takes its place after a restore. The confirmation is a popover off Restore, and CheckpointAfter wraps the turns that a restore sets aside.
import {
Checkpoint,
CheckpointIcon,
CheckpointLabel,
CheckpointMeta,
CheckpointRestore,
CheckpointUndo,
CheckpointConfirm,
CheckpointConfirmHeading,
CheckpointConfirmTitle,
CheckpointConfirmDescription,
CheckpointConfirmList,
CheckpointConfirmItem,
CheckpointConfirmActions,
CheckpointTimeline,
CheckpointAfter,
} from "@/components/ui/checkpoint"
<Checkpoint>
<CheckpointIcon />
<CheckpointLabel />
<CheckpointMeta />
<CheckpointRestore />
<CheckpointUndo />
<CheckpointConfirm>
<CheckpointConfirmHeading>
<CheckpointConfirmTitle />
<CheckpointConfirmDescription />
</CheckpointConfirmHeading>
<CheckpointConfirmList>
<CheckpointConfirmItem />
</CheckpointConfirmList>
<CheckpointConfirmActions />
</CheckpointConfirm>
</Checkpoint>
<CheckpointAfter />
<CheckpointTimeline>
<Checkpoint />
</CheckpointTimeline>Restore flow#
Hover or tab to the row and the meta rises out of its slot as Restore rises into it, so nothing in the thread moves. Restore opens a confirmation that grows out of the button and lists what will be set aside. Confirm and the button holds a spinner until onRestore settles.
Restored and undo#
A restored checkpoint swaps its flag for a counter-clockwise arrow and offers Undo where Restore was. The turns after it are not removed: wrap them in CheckpointAfter and they dim to half strength on their own, because it reads the status of the checkpoint before it. Undo brings them back.
States#
Five states. available is the quiet default. current is where the workspace is now, in full ink and with nothing to restore. restoring keeps Restore out with its spinner and sweeps the label. restored offers Undo. unavailable fades the row and dashes the hairline for a point that can no longer be reached, such as files edited outside the agent.
Without a confirmation#
Leave out CheckpointConfirm and Restore acts in one click. Undo is the safety net, and it takes focus as soon as it appears, so a keyboard user can reverse the restore with Enter.
History#
CheckpointTimeline lists the same checkpoints as a history panel: each one on a vertical rail, labelled with the prompt it came from. The rows keep the inline row's behaviour, and restoring one dims every row after it.
- Add Google sign-in4 files · 12:03
- Keep sessions for 30 days2 files · 12:09
- Rename the auth helpers, unavailableEdited outside Koala
- Fix the redirect after sign-out1 file · 12:21
- Show the account menu on mobile, current3 files · 12:30
API reference#
Checkpoint
The restore point, and the context every part reads. A hairline row in a thread, or a <li> inside CheckpointTimeline. Holds the confirmation popover. Every part accepts className, merged last, and every part is droppable.
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "available" | "current" | "restoring" | "restored" | "unavailable" | - | Controlled status. Leave it out and the checkpoint runs the restore and undo flow on its own. |
| defaultStatus | CheckpointState | "available" | Initial status when uncontrolled. |
| onStatusChange | (status: CheckpointState) => void | - | Called with restoring, restored and available as the flow moves. Required to follow along when status is controlled. |
| onRestore | () => void | Promise<unknown> | - | Roll the workspace back. Return a promise to hold the row in restoring until it settles; a rejection returns it to available. |
| onUndo | () => void | Promise<unknown> | - | Reapply what the restore set aside. The row returns to available once it settles. |
| Data attribute | Description |
|---|---|
| data-status | The checkpoint's status. |
| data-open | Present while the confirmation is open; keeps Restore revealed. |
CheckpointIcon
The 16px glyph column. A flag by default; pass your own as children. Turns into a counter-clockwise arrow once restored. aria-hidden. Renders a <span>.
CheckpointLabel
What the point is called. Checkpoint by default; in a timeline, the prompt it came from. Carries the status in an sr-only word and names the row. Renders a <span>.
CheckpointMeta
What changed and when, in tabular-nums. Sits after the hairline and rolls up out of the way when Restore arrives. Renders a <span>.
CheckpointRestore
The ghost xs Button that reveals in place on hover or focus, in the slot CheckpointMeta vacates. Opens CheckpointConfirm when there is one, restores directly when there is not. Renders only while available or restoring, when it shows the spinner. Forwards Button props.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | "Restore" | The label. |
| wrapperClassName | string | - | Classes for the slot that holds the button and masks the hairline under it. |
CheckpointUndo
The ghost xs Button that appears where Restore was once the restore lands, and takes focus if Restore had it. Renders only while restored. Forwards Button props.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | "Undo" | The label. |
CheckpointConfirm
The confirmation. A PopoverContent that grows out of Restore, aligned to its end edge. Drop it to restore in one click and lean on Undo instead. Forwards PopoverContent props.
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "start" | "center" | "end" | "end" | Edge of Restore it lines up with. |
CheckpointConfirmHeading
Stacks the title and description. Renders a <div>.
CheckpointConfirmTitle
The question. A PopoverTitle at text-sm.
CheckpointConfirmDescription
One line on what happens. A PopoverDescription.
CheckpointConfirmList
What will be set aside. Renders a <ul>.
CheckpointConfirmItem
One loss: files, messages, a branch. Renders an <li>.
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | React.ReactNode | - | A muted 16px glyph before the line. |
| meta | React.ReactNode | - | A trailing read-out in tabular-nums, such as a diff count. |
CheckpointConfirmActions
The decision: a ghost Cancel that closes the popover, then a destructive Restore that runs the flow. Pass children to replace both. Renders a <div>.
| Prop | Type | Default | Description |
|---|---|---|---|
| cancelLabel | React.ReactNode | "Cancel" | The secondary label. |
| confirmLabel | React.ReactNode | "Restore" | The primary label. |
CheckpointTimeline
A history panel. Renders an <ol>; each Checkpoint inside becomes an <li> on a vertical rail, label left, meta right. List oldest first, the way the thread reads.
CheckpointAfter
Wraps what came after a checkpoint. Dims to half strength whenever an earlier sibling Checkpoint is restored, with no prop, and inherits the thread's gap. Renders a <div>.
| Prop | Type | Default | Description |
|---|---|---|---|
| dimmed | boolean | - | Dim regardless of siblings, for threads you structure differently. |
| Data attribute | Description |
|---|---|
| data-dimmed | Present when dimmed. |