Checkpoint

A conversation marker with an async restore action, retry feedback, and stable cancellation.

Preview

Before editing the brief

A saved point in the conversation.

In action

Restore a saved conversation

Before editing the brief

A saved point in the conversation.

When to use

Use it for

  • Mark a saved point in history and supply onRestore to restore it.
  • A rejected promise keeps the restore action available and explains the failure.

Avoid

  • Assuming the component saves model or tool state. The application owns persistence and restoration.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { Checkpoint } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/checkpoint.

Copy the source

npx @noorddev/vlak-cli add checkpoint

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/checkpoint.json

Installs the same source through the shadcn CLI.

React

import { Checkpoint } from "@noorddev/vlak-react";

export function SavedCheckpoint({ onRestore }: { onRestore: () => void | Promise<void> }) {
  return <Checkpoint label="Before editing" onRestore={onRestore} />;
}

See the integration example to compose these components with your application's model and data.

Props

Checkpoint

A restore marker. The application owns saved history and the async restore operation.

PropTypeDefaultDescription
labelrequiredReactNode
onRestore() => void | Promise<void>
restoreLabelstring"Restore checkpoint"
disabledboolean
onError(error: unknown) => void

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "onError">.

The ref reaches HTMLDivElement.

Keyboard

KeysDoes
TabMoves through the supplied native controls in reading order
Enter, SpaceActivates focused buttons and disclosure summaries

Accessibility

  • Native attributes, className, style, and the forwarded ref reach the outer element.
  • Interactive content requires accessible names; progress text is not announced for every streamed token.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak
import "@noorddev/vlak/css";
<div class="rs-checkpoint"><span class="rs-checkpoint-line"></span><span>Before editing</span><button class="rs-btn-subtle" type="button">Restore checkpoint</button><span class="rs-checkpoint-line"></span></div>

Classes

.rs-checkpoint.rs-checkpoint-line.rs-checkpoint-error

Depends on

Button

Use elsewhere

Markdown referenceRegistry JSONSourceAI integration guide
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageOpen in chatWidget patternsHighlighted codeAgentFile treeArtifactSnippetCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas