{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agent-status-orbit",
  "type": "registry:ui",
  "title": "Agent status orbit",
  "description": "Expresses idle, thinking, working, waiting, and complete states through a compact orbit.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "agent"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/components/agent-status-orbit/",
  "meta": {
    "engines": [
      "motion"
    ],
    "runtimeCost": "light",
    "signature": "Orbit count and speed encode agent status"
  },
  "files": [
    {
      "path": "src/registry/components/agent-status-orbit.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/agent-status-orbit.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\n\nexport type AgentStatus =\n  | \"idle\"\n  | \"thinking\"\n  | \"working\"\n  | \"waiting\"\n  | \"complete\";\nexport type AgentStatusOrbitProps = {\n  status: AgentStatus;\n  label?: string;\n  detail?: string;\n  elapsed?: string;\n  className?: string;\n};\n\nconst copy: Record<\n  AgentStatus,\n  { tone: string; points: number; speed: number }\n> = {\n  idle: { tone: \"#a1a1aa\", points: 1, speed: 0 },\n  thinking: { tone: \"#737373\", points: 3, speed: 2.8 },\n  working: { tone: \"#171717\", points: 5, speed: 1.7 },\n  waiting: { tone: \"#f59e0b\", points: 2, speed: 0 },\n  complete: { tone: \"#10b981\", points: 1, speed: 0 },\n};\n\nexport function AgentStatusOrbit({\n  status,\n  label = \"Agent\",\n  detail,\n  elapsed,\n  className = \"\",\n}: AgentStatusOrbitProps) {\n  const reduced = useReducedMotion();\n  const state = copy[status];\n  return (\n    <div\n      role=\"status\"\n      className={`inline-flex min-h-12 items-center gap-3 rounded-[10px] border border-neutral-200 bg-white px-2.5 pr-4 text-neutral-950 dark:border-white/10 dark:bg-[#1b1b1b] dark:text-neutral-50 ${className}`}\n    >\n      <span\n        className=\"relative grid size-8 place-items-center rounded-full bg-neutral-100 dark:bg-neutral-800\"\n        aria-hidden=\"true\"\n      >\n        <span\n          className=\"size-1.5 rounded-full\"\n          style={{ background: state.tone }}\n        />\n        {Array.from({ length: state.points }).map((_, index) => (\n          <motion.i\n            key={index}\n            className=\"absolute left-1/2 top-1/2 size-1 rounded-full\"\n            style={{\n              background: state.tone,\n              margin: -2,\n              transformOrigin: `${2 + index * 2}px ${2 + index * 2}px`,\n            }}\n            animate={\n              state.speed && !reduced\n                ? { rotate: 360, x: [7 + index * 1.5, 7 + index * 1.5] }\n                : { x: 7 + index * 1.5 }\n            }\n            transition={{\n              duration: state.speed || 0,\n              repeat: Infinity,\n              ease: \"linear\",\n              delay: index * -0.22,\n            }}\n          />\n        ))}\n      </span>\n      <span className=\"min-w-0\">\n        <strong className=\"block text-[11px] font-medium\">{label}</strong>\n        <span className=\"block truncate text-[9px] capitalize text-neutral-400\">\n          {detail ?? status}\n        </span>\n      </span>\n      {elapsed ? (\n        <code className=\"ml-1 text-[9px] tabular-nums text-neutral-400\">\n          {elapsed}\n        </code>\n      ) : null}\n    </div>\n  );\n}\n"
    }
  ]
}