{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tool-call-card",
  "type": "registry:ui",
  "title": "Tool call card",
  "description": "Agent tool call card showing the tool name, argument preview, duration and a running, done or failed status chip, with collapsible monospace output below.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/tool-call-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/tool-call-card.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { CheckIcon, ChevronRightIcon, LoaderCircleIcon, TerminalIcon, XIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * ToolCallCard — one tool invocation inside an agent turn: the call, its\n * status, and (optionally) its output, collapsible.\n */\nfunction ToolCallCard({\n  name,\n  status = \"done\",\n  args,\n  duration,\n  children,\n  defaultOpen = true,\n  className,\n}: {\n  name: string\n  status?: \"running\" | \"done\" | \"error\"\n  /** Short argument preview, e.g. `path=\"DESIGN.md\"`. */\n  args?: string\n  /** e.g. \"0.4s\" */\n  duration?: string\n  children?: React.ReactNode\n  defaultOpen?: boolean\n  className?: string\n}) {\n  const [open, setOpen] = React.useState(defaultOpen)\n  const hasBody = children != null\n  return (\n    <div data-slot=\"tool-call-card\" data-status={status} className={cn(\"overflow-hidden rounded-xl border border-border bg-surface shadow-xs\", className)}>\n      <button\n        type=\"button\"\n        disabled={!hasBody}\n        onClick={() => setOpen((o) => !o)}\n        aria-expanded={hasBody ? open : undefined}\n        className=\"flex h-10 w-full items-center gap-2.5 px-3 text-left outline-none focus-visible:bg-sunken enabled:cursor-pointer enabled:hover:bg-sunken/60\"\n      >\n        <span className=\"grid size-5 shrink-0 place-items-center rounded-md border border-border bg-sunken text-fg-subtle\">\n          <TerminalIcon className=\"size-3\" />\n        </span>\n        <span className=\"min-w-0 flex-1 truncate font-mono text-xs\">\n          <span className=\"text-fg\">{name}</span>\n          {args ? <span className=\"text-fg-subtle\">({args})</span> : null}\n        </span>\n        {duration && status !== \"running\" ? <span className=\"font-mono text-[11px] text-fg-subtle\">{duration}</span> : null}\n        <span\n          className={cn(\n            \"inline-flex h-5 items-center gap-1 rounded-full px-1.5 text-[11px] font-medium\",\n            status === \"running\" && \"bg-accent-soft text-accent-fg\",\n            status === \"done\" && \"bg-success/10 text-success\",\n            status === \"error\" && \"bg-danger/10 text-danger\"\n          )}\n        >\n          {status === \"running\" ? <LoaderCircleIcon className=\"size-3 animate-spin\" /> : status === \"done\" ? <CheckIcon className=\"size-3\" strokeWidth={2.5} /> : <XIcon className=\"size-3\" strokeWidth={2.5} />}\n          {status === \"running\" ? \"Running\" : status === \"done\" ? \"Done\" : \"Failed\"}\n        </span>\n        {hasBody ? <ChevronRightIcon className={cn(\"size-3.5 text-fg-subtle transition-transform duration-200 ease-hairline\", open && \"rotate-90\")} /> : null}\n      </button>\n      {hasBody ? (\n        <div className={cn(\"grid transition-[grid-template-rows] duration-200 ease-hairline\", open ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\")}>\n          <div className=\"min-h-0 overflow-hidden\">\n            <div className=\"border-t border-border bg-sunken/60 px-3 py-2.5 font-mono text-[11.5px] leading-[1.6] text-fg-muted\">{children}</div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\nexport { ToolCallCard }\n"
    }
  ]
}