{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chain-of-thought",
  "title": "Chain of Thought",
  "description": "Ordered, status-aware visualization of a model's chain of thought with per-step state.",
  "dependencies": [
    "@vllnt/ui@^0.2.1",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/chain-of-thought/chain-of-thought.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Check, LoaderCircle, X } from \"lucide-react\";\n\nimport { cn } from \"@vllnt/ui\";\n\nconst markerVariants = cva(\n  \"flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-medium\",\n  {\n    defaultVariants: {\n      status: \"pending\",\n    },\n    variants: {\n      status: {\n        active: \"border-primary bg-primary/10 text-primary\",\n        complete: \"border-transparent bg-primary text-primary-foreground\",\n        error: \"border-transparent bg-destructive text-destructive-foreground\",\n        pending: \"border-border bg-muted text-muted-foreground\",\n      },\n    },\n  },\n);\n\nexport type ChainOfThoughtStatus = NonNullable<\n  VariantProps<typeof markerVariants>[\"status\"]\n>;\n\nexport type ChainOfThoughtStep = {\n  /** Optional supporting detail shown under the title. */\n  description?: string;\n  /** Current status of the step. Defaults to \"pending\". */\n  status?: ChainOfThoughtStatus;\n  /** Short step title. */\n  title: string;\n};\n\nexport type ChainOfThoughtProps = {\n  className?: string;\n  /** Ordered steps to render. */\n  steps: ChainOfThoughtStep[];\n};\n\nfunction StepMarkerIcon({\n  index,\n  status,\n}: {\n  index: number;\n  status: ChainOfThoughtStatus;\n}) {\n  if (status === \"complete\") {\n    return <Check className=\"size-3.5\" />;\n  }\n  if (status === \"error\") {\n    return <X className=\"size-3.5\" />;\n  }\n  if (status === \"active\") {\n    return <LoaderCircle className=\"size-3.5 animate-spin\" />;\n  }\n  return <span>{index + 1}</span>;\n}\n\nfunction ChainOfThoughtItem({\n  index,\n  isLast,\n  step,\n}: {\n  index: number;\n  isLast: boolean;\n  step: ChainOfThoughtStep;\n}) {\n  const status = step.status ?? \"pending\";\n\n  return (\n    <li className=\"flex gap-3\">\n      <div className=\"flex flex-col items-center\">\n        <span className={markerVariants({ status })}>\n          <StepMarkerIcon index={index} status={status} />\n        </span>\n        {isLast ? null : <span className=\"my-1 w-px flex-1 bg-border\" />}\n      </div>\n      <div className={cn(\"pb-4\", isLast && \"pb-0\")}>\n        <p\n          className={cn(\n            \"text-sm font-medium\",\n            status === \"pending\" ? \"text-muted-foreground\" : \"text-foreground\",\n          )}\n        >\n          {step.title}\n        </p>\n        {step.description ? (\n          <p className=\"mt-0.5 text-xs text-muted-foreground\">\n            {step.description}\n          </p>\n        ) : null}\n      </div>\n    </li>\n  );\n}\n\n/**\n * Ordered, status-aware visualization of a model's chain of thought.\n *\n * Renders a numbered vertical step list where each step carries a status\n * (\"pending\" | \"active\" | \"complete\" | \"error\") reflected in its marker icon\n * and color. A vertical rail links the steps.\n *\n * @example\n * <ChainOfThought\n *   steps={[\n *     { status: \"complete\", title: \"Read the file\" },\n *     { status: \"active\", title: \"Apply the edit\" },\n *     { title: \"Run the tests\" },\n *   ]}\n * />\n */\nexport const ChainOfThought = ({\n  className,\n  ref,\n  steps,\n}: ChainOfThoughtProps & { ref?: React.Ref<HTMLOListElement> }) => (\n  <ol className={cn(\"flex flex-col\", className)} ref={ref}>\n    {steps.map((step, index) => (\n      <ChainOfThoughtItem\n        index={index}\n        isLast={index === steps.length - 1}\n        key={`${index}-${step.title}`}\n        step={step}\n      />\n    ))}\n  </ol>\n);\nChainOfThought.displayName = \"ChainOfThought\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}