{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tool-call",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/registry/ui/tool-call.tsx",
      "content": "\"use client\";\n\nimport { Collapsible } from \"@base-ui/react/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ToolCallState = \"pending\" | \"running\" | \"success\" | \"error\";\n\nconst stateLabel: Record<ToolCallState, string> = {\n  pending: \"Pending\",\n  running: \"Running\",\n  success: \"Done\",\n  error: \"Failed\",\n};\n\nfunction StatusDot({ state }: { state: ToolCallState }) {\n  return (\n    <span\n      aria-hidden\n      className={cn(\n        \"size-2 rounded-[1px]\",\n        state === \"pending\" && \"bg-muted-foreground/40\",\n        state === \"running\" && \"animate-pulse motion-reduce:animate-none bg-primary\",\n        state === \"success\" && \"bg-emerald-500\",\n        state === \"error\" && \"bg-red-500\",\n      )}\n    />\n  );\n}\n\nfunction Json({ label, value }: { label: string; value: unknown }) {\n  return (\n    <div className=\"space-y-1\">\n      <div className=\"font-mono text-[11px] uppercase tracking-wider text-muted-foreground\">{label}</div>\n      <pre className=\"overflow-x-auto rounded-sm bg-muted/60 p-2.5 font-mono text-xs leading-relaxed\">\n        {typeof value === \"string\" ? value : JSON.stringify(value, null, 2)}\n      </pre>\n    </div>\n  );\n}\n\nexport function ToolCall({\n  name,\n  state,\n  input,\n  output,\n  error,\n  duration,\n  defaultOpen = false,\n  className,\n}: {\n  name: string;\n  state: ToolCallState;\n  input?: unknown;\n  output?: unknown;\n  error?: string;\n  /** Elapsed time, e.g. \"1.2s\". Shown beside the status. */\n  duration?: string;\n  defaultOpen?: boolean;\n  className?: string;\n}) {\n  return (\n    <Collapsible.Root\n      defaultOpen={defaultOpen}\n      className={cn(\"rounded border bg-muted/20\", className)}\n    >\n      <Collapsible.Trigger className=\"group flex w-full items-center gap-2.5 rounded px-3 py-2 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring\">\n        <StatusDot state={state} />\n        <span className=\"font-mono text-[13px]\">{name}</span>\n        <span\n          className={cn(\n            \"ml-auto font-mono text-xs text-muted-foreground\",\n            state === \"error\" && \"text-red-700 dark:text-red-400\",\n            state === \"success\" && \"text-emerald-700 dark:text-emerald-400\",\n          )}\n          aria-live=\"polite\"\n        >\n          {stateLabel[state]}\n          {duration && <span className=\"text-muted-foreground\"> · {duration}</span>}\n        </span>\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"size-3.5 text-muted-foreground transition-transform motion-reduce:transition-none group-data-[panel-open]:rotate-90\"\n        >\n          <path d=\"m6 4 4 4-4 4\" />\n        </svg>\n      </Collapsible.Trigger>\n      <Collapsible.Panel className=\"space-y-3 border-t p-3\">\n        {input !== undefined && <Json label=\"Input\" value={input} />}\n        {output !== undefined && <Json label=\"Output\" value={output} />}\n        {error && <Json label=\"Error\" value={error} />}\n      </Collapsible.Panel>\n    </Collapsible.Root>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}