{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-ai-chain-of-thought",
  "title": "Aurora AI Chain of Thought",
  "author": "jmagar <https://github.com/jmagar>",
  "description": "Aurora-native chain of thought parity surface from AI Elements.",
  "dependencies": [
    "lucide-react@^0.487.0"
  ],
  "registryDependencies": [
    "@aurora/aurora-tokens",
    "@aurora/aurora-ai-elements",
    "@aurora/aurora-thinking",
    "@aurora/aurora-components"
  ],
  "files": [
    {
      "path": "registry/aurora/blocks/ai/elements/chain-of-thought.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Brain, Check, ChevronDown } from \"lucide-react\"\nimport { Button } from \"@/registry/aurora/ui/button\"\n\n// ChainOfThought — collapsible reasoning timeline with per-step status + streaming.\n// Visual spec ported 1:1 from the Claude Design source. Axon orange is the\n// AI/automation identity accent here (violet was removed from the system).\n// Status colors come from the semantic token layer (success / error / muted).\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport type CotStepStatus = \"pending\" | \"inprog\" | \"done\" | \"error\"\n\nexport interface CotStep {\n  /** Primary line of the step. */\n  label: string\n  /** Optional secondary line below the label. */\n  detail?: string\n  /** Step state — drives the status node + tinting. Defaults to \"inprog\". */\n  status?: CotStepStatus\n  /** Optional right-aligned timing label (e.g. \"0.4s\"). */\n  duration?: string\n}\n\nexport interface ChainOfThoughtProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Ordered reasoning steps. */\n  steps?: CotStep[]\n  /** Header summary on the right (e.g. \"Thought for 4.2s\"). */\n  summary?: string\n  /** Show the orange \"AI\" identity badge next to the title. */\n  badge?: boolean\n  /** Streaming mode — pulses the orange accent and adds a cursor to the active step. */\n  isStreaming?: boolean\n  /** Whether the timeline starts expanded. Defaults to open. */\n  defaultOpen?: boolean\n  /** Header title. Defaults to \"Chain of thought\". */\n  title?: string\n}\n\n// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).\n\nconst AXON = \"var(--axon-orange)\"\n\n// ---------------------------------------------------------------------------\n// Streaming cursor\n// ---------------------------------------------------------------------------\n\nfunction Cursor() {\n  return (\n    <span\n      aria-hidden=\"true\"\n      style={{\n        display: \"inline-block\",\n        width: \"2px\",\n        height: \"1em\",\n        background: AXON,\n        marginLeft: \"3px\",\n        verticalAlign: \"text-bottom\",\n        borderRadius: \"1px\",\n        animation: \"aurora-cot-blink 1s step-end infinite\",\n      }}\n    />\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Status node — circular timeline marker\n// ---------------------------------------------------------------------------\n\nfunction StatusNode({ status }: { status: CotStepStatus }) {\n  // done — success ring + check\n  if (status === \"done\") {\n    return (\n      <span\n        aria-label=\"Done\"\n        style={{\n          width: \"34px\",\n          height: \"34px\",\n          borderRadius: \"50%\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          border: \"1.5px solid var(--aurora-success-border)\",\n          background: \"var(--aurora-success-surface)\",\n          color: \"var(--aurora-success)\",\n          flexShrink: 0,\n        }}\n      >\n        <Check size={16} strokeWidth={2.4} aria-hidden=\"true\" />\n      </span>\n    )\n  }\n\n  // error — error ring + dash\n  if (status === \"error\") {\n    return (\n      <span\n        aria-label=\"Error\"\n        style={{\n          width: \"34px\",\n          height: \"34px\",\n          borderRadius: \"50%\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          border: \"1.5px solid var(--aurora-error-border)\",\n          background: \"var(--aurora-error-surface)\",\n          color: \"var(--aurora-error)\",\n          fontSize: \"15px\",\n          fontWeight: 700,\n          lineHeight: 1,\n          flexShrink: 0,\n        }}\n      >\n        !\n      </span>\n    )\n  }\n\n  // pending — muted hollow ring\n  if (status === \"pending\") {\n    return (\n      <span\n        aria-label=\"Pending\"\n        style={{\n          width: \"34px\",\n          height: \"34px\",\n          borderRadius: \"50%\",\n          border: \"1.5px solid var(--aurora-border-strong)\",\n          background: \"var(--aurora-control-surface)\",\n          flexShrink: 0,\n        }}\n      />\n    )\n  }\n\n  // inprog — orange ring with a spinning arc\n  return (\n    <span\n      aria-label=\"In progress\"\n      style={{\n        width: \"34px\",\n        height: \"34px\",\n        borderRadius: \"50%\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        border: \"1.5px solid var(--axon-orange-border)\",\n        background: \"var(--axon-orange-surface)\",\n        flexShrink: 0,\n      }}\n    >\n      <span\n        aria-hidden=\"true\"\n        style={{\n          width: \"16px\",\n          height: \"16px\",\n          borderRadius: \"50%\",\n          border: `2px solid ${AXON}`,\n          borderTopColor: \"transparent\",\n          animation: \"aurora-cot-spin 0.8s linear infinite\",\n        }}\n      />\n    </span>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Main component\n// ---------------------------------------------------------------------------\n\nexport const ChainOfThought = function ChainOfThought(\n    { ref,\n      steps = [],\n      summary,\n      badge,\n      isStreaming,\n      defaultOpen = true,\n      title = \"Chain of Thought\",\n      style,\n      ...rest\n    }: ChainOfThoughtProps & { ref?: React.Ref<HTMLDivElement> },\n  ) {\n    const [open, setOpen] = React.useState(defaultOpen)\n    const lastStreamingIndex = isStreaming ? steps.length - 1 : -1\n\n    return (\n      <div\n        ref={ref}\n        style={{\n          background: \"var(--aurora-surface-raised)\",\n          border: \"1px solid var(--aurora-border-strong)\",\n          borderRadius: \"var(--aurora-radius-3)\",\n          boxShadow: \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\",\n          overflow: \"hidden\",\n          ...style,\n        }}\n        {...rest}\n      >\n        {/* Header */}\n        <Button\n          variant=\"plain\"\n          size=\"unstyled\"\n          onClick={() => setOpen((o) => !o)}\n          aria-expanded={open}\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            flexWrap: \"wrap\",\n            gap: \"10px\",\n            width: \"100%\",\n            minWidth: 0,\n            padding: \"16px 20px\",\n            background: \"none\",\n            border: \"none\",\n            cursor: \"pointer\",\n            textAlign: \"left\",\n          }}\n        >\n          <Brain\n            size={17}\n            strokeWidth={1.9}\n            aria-hidden=\"true\"\n            style={{\n              color: AXON,\n              flexShrink: 0,\n              animation: isStreaming ? \"aurora-cot-pulse 1.8s ease-in-out infinite\" : \"none\",\n            }}\n          />\n          <span\n            style={{\n              fontSize: \"16px\",\n              fontWeight: 700,\n              color: \"var(--aurora-text-primary)\",\n              minWidth: 0,\n            }}\n          >\n            {title}\n          </span>\n\n          {badge && (\n            <span\n              className=\"aurora-text-caption\"\n              style={{\n                fontWeight: 600,\n                letterSpacing: \"0.075em\",\n                color: \"var(--axon-orange-strong)\",\n                background: \"var(--axon-orange-surface)\",\n                border: \"1px solid var(--axon-orange-border)\",\n                borderRadius: \"7px\",\n                padding: \"2px 7px\",\n                flexShrink: 0,\n              }}\n            >\n              AI\n            </span>\n          )}\n\n          {summary && (\n            <span\n              className=\"aurora-text-meta tabular-nums\"\n              style={{\n                marginLeft: \"auto\",\n                color: \"var(--aurora-text-muted)\",\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              {summary}\n            </span>\n          )}\n\n          <ChevronDown\n            size={16}\n            aria-hidden=\"true\"\n            style={{\n              marginLeft: summary ? \"10px\" : \"auto\",\n              color: \"var(--aurora-text-muted)\",\n              transform: open ? \"rotate(180deg)\" : \"rotate(0deg)\",\n              transition: \"transform 0.2s\",\n              flexShrink: 0,\n            }}\n          />\n        </Button>\n\n        {/* Timeline */}\n        {open && (\n          <ol\n            style={{\n              listStyle: \"none\",\n              margin: 0,\n              padding: \"2px 20px 18px\",\n            }}\n          >\n            {steps.map((step, i) => {\n              const status = step.status ?? \"inprog\"\n              const isLast = i === steps.length - 1\n              return (\n                <li\n                  key={i}\n                  style={{\n                    display: \"flex\",\n                    gap: \"16px\",\n                    position: \"relative\",\n                    paddingBottom: isLast ? \"0\" : \"20px\",\n                  }}\n                >\n                  {/* Connector line */}\n                  {!isLast && (\n                    <div\n                      aria-hidden=\"true\"\n                      style={{\n                        position: \"absolute\",\n                        left: \"17px\",\n                        top: \"34px\",\n                        bottom: \"0\",\n                        width: \"1px\",\n                        background: \"var(--aurora-border-default)\",\n                      }}\n                    />\n                  )}\n\n                  <StatusNode status={status} />\n\n                  <div style={{ flex: 1, minWidth: 0, paddingTop: \"5px\" }}>\n                    <div\n                      style={{\n                        display: \"flex\",\n                        alignItems: \"baseline\",\n                        gap: \"12px\",\n                      }}\n                    >\n                      <div\n                        style={{\n                          flex: 1,\n                          minWidth: 0,\n                          fontSize: \"17px\",\n                          fontWeight: 500,\n                          lineHeight: \"1.3\",\n                          color: \"var(--aurora-text-primary)\",\n                        }}\n                      >\n                        {step.label}\n                        {i === lastStreamingIndex && <Cursor />}\n                      </div>\n                      {step.duration && (\n                        <span\n                          className=\"aurora-text-meta tabular-nums\"\n                          style={{\n                            color: \"var(--aurora-text-muted)\",\n                            whiteSpace: \"nowrap\",\n                            flexShrink: 0,\n                          }}\n                        >\n                          {step.duration}\n                        </span>\n                      )}\n                    </div>\n                    {step.detail && (\n                      <div\n                        style={{\n                          marginTop: \"4px\",\n                          fontSize: \"15px\",\n                          lineHeight: \"1.4\",\n                          color: \"var(--aurora-text-muted)\",\n                        }}\n                      >\n                        {step.detail}\n                      </div>\n                    )}\n                  </div>\n                </li>\n              )\n            })}\n          </ol>\n        )}\n      </div>\n    )\n  }\n\nChainOfThought.displayName = \"ChainOfThought\"\n\nexport default ChainOfThought\n",
      "type": "registry:component",
      "target": "@components/aurora/ai/chain-of-thought.tsx"
    }
  ],
  "meta": {
    "namespace": "@aurora",
    "style": "aurora",
    "family": "block",
    "requiresTokens": true,
    "sourcePath": "registry/aurora/blocks/ai/elements/chain-of-thought.tsx",
    "installTarget": "@components/aurora/ai/chain-of-thought.tsx",
    "taxonomy": "ai"
  },
  "docs": "Aurora block that installs Aurora AI Chain of Thought.\n\nInstall `aurora-tokens`, `aurora-ai-elements`, `aurora-thinking`, and `aurora-components` first; the shadcn CLI resolves these automatically through the @aurora registry namespace.\n\nDefault install target: `@components/aurora/ai/chain-of-thought.tsx`.\n\nRegistry dependencies: `aurora-tokens`, `aurora-ai-elements`, `aurora-thinking`, `aurora-components`.",
  "categories": [
    "aurora",
    "block",
    "ai"
  ],
  "type": "registry:block"
}