{
  "name": "prompt-versions",
  "type": "registry:ui",
  "title": "Prompt Versions",
  "description": "A prompt’s history with what each change did to the score. The pairing is the point: a history without outcomes says what happened, a score chart without edits says something changed, and neither answers which edit made it worse.",
  "category": "Prompts",
  "dependencies": [
    "lucide-react@^1.39.0"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "lib-motion",
    "lib-styles",
    "lib-utils"
  ],
  "files": [
    {
      "path": "components/ui/prompt-versions.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps, ReactNode } from 'react'\nimport { GitBranch, TrendingDown, TrendingUp } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { enterFade } from '@/lib/motion'\nimport { focusRing, radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * A prompt's version history, with what each change did to the score.\n *\n * The pairing that makes this useful: a version and its eval result on the same\n * row. A history that lists edits without outcomes tells you what happened; a\n * dashboard that shows scores without the edits tells you something changed.\n * Neither answers \"which edit made it worse\", which is the only question anyone\n * opens this for.\n *\n * **Deltas are against the previous version, not against the best.** Regression\n * hunting walks backwards one step at a time, and a delta against a distant\n * high-water mark makes every version after it look equally bad.\n *\n * The live version is marked rather than sorted to the top — its position in\n * the sequence is information, and moving it hides how many versions have\n * shipped since.\n */\nexport type PromptVersion = {\n  id: string\n  /** A label, tag or hash — whatever you version by. */\n  label: string\n  /** Already formatted — this component does not own your locale. */\n  at?: string\n  author?: string\n  /** One line on what changed. */\n  note?: ReactNode\n  /** Eval score, 0–1. Omit for a version that was never scored. */\n  score?: number\n  /** Currently deployed. */\n  live?: boolean\n}\n\ntype PromptVersionsProps = Omit<ComponentProps<'div'>, 'onSelect'> & {\n  /** Newest first. Order is preserved — position carries meaning. */\n  versions: PromptVersion[]\n  selectedId?: string\n  onSelect?: (version: PromptVersion) => void\n  /** Compare two versions — usually opens a PromptDiff. */\n  onCompare?: (a: PromptVersion, b: PromptVersion) => void\n  compareLabel?: string\n  liveLabel?: string\n  unscoredLabel?: string\n  emptyLabel?: string\n  formatScore?: (score: number) => string\n  label?: string\n}\n\nfunction PromptVersions({\n  versions,\n  selectedId,\n  onSelect,\n  onCompare,\n  compareLabel = 'Diff',\n  liveLabel = 'Live',\n  unscoredLabel = 'not scored',\n  emptyLabel = 'No versions yet.',\n  formatScore = (score) => `${Math.round(score * 100)}%`,\n  label = 'Versions',\n  className,\n  ...props\n}: PromptVersionsProps) {\n  if (versions.length === 0) {\n    return (\n      <div className={cn(surface, radius.surface, 'p-4', className)} {...props}>\n        <p className=\"text-muted-foreground text-xs\">{emptyLabel}</p>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      data-slot=\"prompt-versions\"\n      className={cn(enterFade, surface, radius.surface, 'overflow-hidden', className)}\n      {...props}\n    >\n      <p className=\"border-border bg-muted/40 text-muted-foreground/70 border-b px-4 py-2 text-[11px] font-medium tracking-[0.14em] uppercase\">\n        {label}\n      </p>\n\n      <ul className=\"divide-border list-none divide-y\">\n        {versions.map((version, index) => {\n          // Against the immediately previous version — regression hunting walks\n          // backwards one step at a time.\n          const previous = versions[index + 1]\n          const delta =\n            version.score !== undefined && previous?.score !== undefined\n              ? version.score - previous.score\n              : undefined\n\n          const selected = version.id === selectedId\n          const Row = onSelect ? 'button' : 'div'\n\n          return (\n            <li key={version.id} className=\"flex items-center gap-2\">\n              <Row\n                {...(onSelect\n                  ? { type: 'button' as const, onClick: () => onSelect(version) }\n                  : {})}\n                className={cn(\n                  'flex min-w-0 flex-1 items-center gap-3 px-4 py-3 text-start',\n                  onSelect && cn('hover:bg-accent/40', focusRing),\n                  selected && 'bg-accent/60',\n                )}\n              >\n                <GitBranch className=\"text-muted-foreground/50 size-3.5 shrink-0\" aria-hidden=\"true\" />\n\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    <code className=\"font-mono text-xs font-medium\">{version.label}</code>\n                    {version.live && (\n                      <Badge size=\"sm\" color=\"green\">\n                        {liveLabel}\n                      </Badge>\n                    )}\n                    {version.at && (\n                      <span className=\"text-muted-foreground/60 text-[11px] tabular-nums\">\n                        {version.at}\n                      </span>\n                    )}\n                    {version.author && (\n                      <span className=\"text-muted-foreground/60 text-[11px]\">{version.author}</span>\n                    )}\n                  </div>\n                  {version.note && (\n                    <p className=\"text-muted-foreground mt-1 text-xs leading-relaxed\">\n                      {version.note}\n                    </p>\n                  )}\n                </div>\n\n                <div className=\"flex shrink-0 items-center gap-2\">\n                  {version.score === undefined ? (\n                    <span className=\"text-muted-foreground/50 text-[11px]\">{unscoredLabel}</span>\n                  ) : (\n                    <span className=\"font-mono text-sm tabular-nums\">\n                      {formatScore(version.score)}\n                    </span>\n                  )}\n\n                  {delta !== undefined && Math.abs(delta) > 0.0001 && (\n                    <span\n                      className={cn(\n                        'flex items-center gap-0.5 font-mono text-[11px] tabular-nums',\n                        delta > 0\n                          ? 'text-[var(--green-soft-foreground)]'\n                          : 'text-[var(--destructive-soft-foreground)]',\n                      )}\n                    >\n                      {delta > 0 ? (\n                        <TrendingUp className=\"size-3\" aria-hidden=\"true\" />\n                      ) : (\n                        <TrendingDown className=\"size-3\" aria-hidden=\"true\" />\n                      )}\n                      {delta > 0 ? '+' : ''}\n                      {Math.round(delta * 100)}\n                    </span>\n                  )}\n                </div>\n              </Row>\n\n              {onCompare && previous && (\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"me-2 shrink-0\"\n                  onClick={() => onCompare(previous, version)}\n                >\n                  {compareLabel}\n                </Button>\n              )}\n            </li>\n          )\n        })}\n      </ul>\n    </div>\n  )\n}\n\nexport { PromptVersions }\nexport type { PromptVersionsProps }\n"
    }
  ]
}