{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agent-thinking-trace",
  "type": "registry:ui",
  "title": "Agent thinking trace",
  "description": "Organizes reasoning phases, current focus, and elapsed time into an expandable evidence trail.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "agent"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/components/agent-thinking-trace/",
  "meta": {
    "engines": [
      "motion"
    ],
    "runtimeCost": "light",
    "signature": "Thinking stages revealed along a signal rail"
  },
  "files": [
    {
      "path": "src/registry/components/agent-thinking-trace.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/agent-thinking-trace.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useState } from \"react\";\n\nexport type ThinkingTraceStep = {\n  id: string;\n  label: string;\n  detail?: string;\n  status: \"complete\" | \"active\" | \"queued\";\n};\n\nexport type AgentThinkingTraceProps = {\n  steps: readonly ThinkingTraceStep[];\n  duration?: string;\n  label?: string;\n  defaultExpanded?: boolean;\n  className?: string;\n};\n\nconst ease = [0.23, 1, 0.32, 1] as const;\n\nexport function AgentThinkingTrace({\n  steps,\n  duration = \"4.2s\",\n  label = \"Thinking\",\n  defaultExpanded = true,\n  className = \"\",\n}: AgentThinkingTraceProps) {\n  const [expanded, setExpanded] = useState(defaultExpanded);\n  const reduced = useReducedMotion();\n  const active = steps.find((step) => step.status === \"active\") ?? steps.at(-1);\n\n  return (\n    <section\n      className={`w-full overflow-hidden rounded-[10px] border border-neutral-200 bg-white text-neutral-950 dark:border-white/10 dark:bg-[#1b1b1b] dark:text-neutral-50 ${className}`}\n    >\n      <button\n        type=\"button\"\n        aria-expanded={expanded}\n        onClick={() => setExpanded((value) => !value)}\n        className=\"flex min-h-14 w-full items-center gap-3 px-4 text-left outline-none hover:bg-neutral-50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 dark:hover:bg-white/[.03]\"\n      >\n        <span\n          className=\"relative flex h-4 w-7 shrink-0 items-center justify-between\"\n          aria-hidden=\"true\"\n        >\n          {[0, 1, 2].map((index) => (\n            <motion.i\n              key={index}\n              className=\"size-1 rounded-full bg-neutral-950 dark:bg-neutral-50\"\n              animate={\n                reduced\n                  ? undefined\n                  : { x: [-5, 0, 5], opacity: [0.25, 1, 0.25] }\n              }\n              transition={{\n                duration: 1.2,\n                delay: index * 0.14,\n                repeat: Infinity,\n                ease,\n              }}\n            />\n          ))}\n        </span>\n        <span className=\"min-w-0 flex-1\">\n          <strong className=\"block text-[13px] font-semibold\">{label}</strong>\n          <span className=\"block truncate text-[11px] text-neutral-500 dark:text-neutral-400\">\n            {active?.label}\n          </span>\n        </span>\n        <code className=\"text-[10px] tabular-nums text-neutral-500 dark:text-neutral-400\">\n          {duration}\n        </code>\n        <motion.svg\n          aria-hidden=\"true\"\n          viewBox=\"0 0 16 16\"\n          className=\"size-4 fill-none stroke-current text-neutral-400\"\n          strokeWidth=\"1.5\"\n          animate={{ rotate: expanded ? 180 : 0 }}\n          transition={reduced ? { duration: 0 } : { duration: 0.28, ease }}\n        >\n          <path d=\"m4 6 4 4 4-4\" />\n        </motion.svg>\n      </button>\n      <AnimatePresence initial={false}>\n        {expanded ? (\n          <motion.div\n            initial={reduced ? false : { height: 0, opacity: 0 }}\n            animate={{ height: \"auto\", opacity: 1 }}\n            exit={reduced ? { display: \"none\" } : { height: 0, opacity: 0 }}\n            transition={{ duration: reduced ? 0 : 0.32, ease }}\n            className=\"overflow-hidden\"\n          >\n            <ol className=\"border-t border-neutral-100 px-4 py-3 dark:border-white/8\">\n              {steps.map((step, index) => (\n                <li\n                  key={step.id}\n                  className=\"relative grid grid-cols-[20px_1fr] gap-3 pb-3 last:pb-0\"\n                >\n                  {index < steps.length - 1 ? (\n                    <span\n                      className=\"absolute left-[9px] top-4 h-[calc(100%-4px)] w-px bg-neutral-200 dark:bg-white/10\"\n                      aria-hidden=\"true\"\n                    />\n                  ) : null}\n                  <motion.span\n                    aria-hidden=\"true\"\n                    className={`relative z-10 mt-1 grid size-5 place-items-center rounded-full border ${step.status === \"complete\" ? \"border-emerald-600 bg-emerald-600 text-white\" : step.status === \"active\" ? \"border-neutral-950 bg-white text-neutral-950 dark:border-neutral-50 dark:bg-[#1b1b1b] dark:text-neutral-50\" : \"border-neutral-200 bg-white text-neutral-300 dark:border-white/15 dark:bg-[#1b1b1b]\"}`}\n                    animate={\n                      step.status === \"active\" && !reduced\n                        ? {\n                            boxShadow: [\n                              \"0 0 0 0 rgba(23,23,23,.2)\",\n                              \"0 0 0 5px rgba(23,23,23,0)\",\n                            ],\n                          }\n                        : undefined\n                    }\n                    transition={{ duration: 1.4, repeat: Infinity }}\n                  >\n                    <span className=\"size-1.5 rounded-full bg-current\" />\n                  </motion.span>\n                  <div>\n                    <strong className=\"block text-[12px] font-medium\">\n                      {step.label}\n                    </strong>\n                    {step.detail ? (\n                      <p className=\"mt-0.5 text-[11px] leading-5 text-neutral-500 dark:text-neutral-400\">\n                        {step.detail}\n                      </p>\n                    ) : null}\n                  </div>\n                </li>\n              ))}\n            </ol>\n          </motion.div>\n        ) : null}\n      </AnimatePresence>\n    </section>\n  );\n}\n"
    }
  ]
}