Checkpoint

Overview

Checkpoint é um marcador entre mensagens — uma horizontal rule sutil com ícone e botão pra restaurar o estado da conversa naquele ponto. Útil em fluxos onde o user pode "voltar" e re-fazer a conversa a partir de uma mensagem específica.

Anatomy

<Checkpoint>
  ├─ <CheckpointIcon />
  └─ <CheckpointTrigger>{label}</CheckpointTrigger>
</Checkpoint>

Usage

<Checkpoint>
  <CheckpointIcon />
  <CheckpointTrigger onClick={handleRestore}>
    Voltar pra este ponto
  </CheckpointTrigger>
</Checkpoint>

Props

Checkpoint (Root)

Aceita HTMLAttributes<HTMLDivElement>. Container flex com Separator.

CheckpointIcon

Aceita LucideProps. Default é BookmarkIcon size-4. Você pode substituir passando children:

<CheckpointIcon><Save className="size-4" /></CheckpointIcon>

CheckpointTrigger

Herda de Button — variant, size, onClick, etc. Default variant="ghost" size="sm".

Subcomponents

• Checkpoint — flex wrapper com Separator visual sutil.
• CheckpointIcon — ícone à esquerda. Aceita override via children ou customização via LucideProps.
• CheckpointTrigger — botão clicável com optional tooltip.

When to use

• Conversas longas onde rebobinar é útil (debug, exploração).
• Editor de prompts iterativo — checkpoint a cada versão.
• Replay de conversas com IA pra revisão.

When not to use

• Confirmação destrutiva — use AlertDialog.
• Restore de versões persistidas em backend — use DropdownMenu com lista de timestamps em vez de markers inline.

Best practices

• Inline entre messages. Posicione entre <Message>s pra marcar o boundary visual.
• Tooltip explica. "Restaurar checkpoint" é vago — use tooltip pra dizer "Volta pra antes de você pedir refactor".
• Confirmation se destrutivo. Restaurar checkpoint apaga mensagens posteriores — combine com AlertDialog.

Accessibility

Related

• AlertDialog — confirmação destrutiva.
• Conversation — onde checkpoints aparecem.
• Tooltip — usado internamente.