Aurora AI Checkpoint

1"use client"
2 
3import * as React from "react"
4import { Clock, Database, Eye, Hexagon, RotateCcw, Save } from "lucide-react"
5import { Badge } from "@/registry/aurora/ui/badge"
6import { Button } from "@/registry/aurora/ui/button"
7 
8// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
9 
10/**
11 * Checkpoint — a saved agent checkpoint card.
12 *
13 * Architecture is the canonical shadcn-registry pattern: a self-contained
14 * `forwardRef` component with a typed prop API. Visuals match the Aurora /
15 * Claude Design source 1:1 — a raised panel with a cyan save-icon tile, a
16 * status badge, an optional "AUTO" tag, a monospace metadata row, and the
17 * Diff / Restore action pair. A `compact` variant drops the meta + actions.
18 */
19 
20export type CheckpointStatus = "current" | "saved" | "stale"
21 
22export interface CheckpointProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
23  /** Primary checkpoint label. */
24  label: string
25  /** Secondary description (default variant only). */
26  description?: string
27  /** Lifecycle status — drives the right-aligned badge. */
28  status?: CheckpointStatus
29  /** Step index this checkpoint captured. */
30  step?: number
31  /** Relative time the checkpoint was taken. */
32  time?: string
33  /** Human-readable snapshot size. */
34  size?: string
35  /** Render the "AUTO" tag beside the label. */
36  badge?: boolean
37  /** Layout density. `compact` = single dense row, no meta/actions. */
38  variant?: "default" | "compact"
39  /** Diff / view-changes action. Renders the "Diff" button when provided. */
40  onView?: () => void
41  /** Restore-to-checkpoint action. Renders the "Restore" button when provided. */
42  onRestore?: () => void
43  /** Whole-card click (compact variant — makes the row interactive). */
44  onClick?: () => void
45}
46 
47const STATUS_LABEL: Record<CheckpointStatus, string> = {
48  current: "Current",
49  saved: "Saved",
50  stale: "Stale",
51}
52 
53const STATUS_TONE = {
54  current: "success",
55  saved: "neutral",
56  stale: "warn",
57} as const
58 
59function MetaItem({ icon: Icon, children }: { icon: typeof Clock; children: React.ReactNode }) {
60  return (
61    <span
62      className="aurora-text-meta inline-flex items-center gap-1.5 tabular-nums"
63      style={{ color: "var(--aurora-text-muted)" }}
64    >
65      <Icon className="size-3.5" aria-hidden style={{ color: "var(--aurora-text-muted)", opacity: 0.85 }} />
66      {children}
67    </span>
68  )
69}
70 
71function AutomationTag() {
72  return (
73    <span
74// … truncated