{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-tool-call-display",
  "title": "AI Tool Call Display",
  "description": "Structured card for tool invocation traces, statuses, serialized input, and returned output.",
  "dependencies": [
    "@vllnt/ui@^0.3.0",
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/ai-tool-call-display/ai-tool-call-display.tsx",
      "content": "import { cva } from \"class-variance-authority\";\nimport { AlertCircle, CheckCircle2, Clock3, Wrench } from \"lucide-react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Badge } from \"@vllnt/ui\";\n\nconst statusVariants = cva(\n  \"rounded-full px-2 py-0 text-[10px] uppercase tracking-wide\",\n  {\n    defaultVariants: {\n      status: \"queued\",\n    },\n    variants: {\n      status: {\n        complete: \"bg-emerald-500/10 text-emerald-700 dark:text-emerald-300\",\n        error: \"bg-red-500/10 text-red-700 dark:text-red-300\",\n        queued: \"bg-muted text-muted-foreground\",\n        running: \"bg-blue-500/10 text-blue-700 dark:text-blue-300\",\n      },\n    },\n  },\n);\n\nexport type AIToolCallStatus = \"complete\" | \"error\" | \"queued\" | \"running\";\n\nexport type AIToolCallDisplayProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /** Short description of the tool output. */\n  description?: string;\n  /** Optional execution duration label. */\n  duration?: string;\n  /** Serialized tool arguments or input payload. */\n  input?: string;\n  /** Serialized tool result or output payload. */\n  output?: string;\n  /** Current tool execution state. */\n  status?: AIToolCallStatus;\n  /** Name of the tool. */\n  toolName: string;\n};\n\nconst statusIconMap: Record<AIToolCallStatus, React.ReactNode> = {\n  complete: <CheckCircle2 className=\"size-4\" />,\n  error: <AlertCircle className=\"size-4\" />,\n  queued: <Clock3 className=\"size-4\" />,\n  running: <Wrench className=\"size-4 animate-pulse\" />,\n};\n\nconst AIToolCallDisplay = ({\n  className,\n  description,\n  duration,\n  input,\n  output,\n  ref,\n  status = \"queued\",\n  toolName,\n  ...props\n}: AIToolCallDisplayProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  return (\n    <div\n      className={cn(\n        \"rounded-2xl border border-border/70 bg-card p-4 shadow-sm\",\n        className,\n      )}\n      ref={ref}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-start justify-between gap-3\">\n        <div className=\"min-w-0 space-y-1\">\n          <div className=\"flex items-center gap-2 text-sm font-medium text-foreground\">\n            {statusIconMap[status]}\n            <span>{toolName}</span>\n          </div>\n          {description ? (\n            <p className=\"text-sm text-muted-foreground\">{description}</p>\n          ) : null}\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {duration ? (\n            <span className=\"text-xs text-muted-foreground\">{duration}</span>\n          ) : null}\n          <Badge className={statusVariants({ status })} variant=\"secondary\">\n            {status}\n          </Badge>\n        </div>\n      </div>\n\n      {input ? (\n        <details\n          className=\"mt-4 rounded-xl border border-border/60 bg-muted/20 p-3\"\n          open={status !== \"complete\"}\n        >\n          <summary className=\"cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground\">\n            Tool input\n          </summary>\n          <pre className=\"mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground\">\n            {input}\n          </pre>\n        </details>\n      ) : null}\n\n      {output ? (\n        <details\n          className=\"mt-3 rounded-xl border border-border/60 bg-muted/20 p-3\"\n          open={status !== \"complete\"}\n        >\n          <summary className=\"cursor-pointer text-xs font-medium uppercase tracking-wide text-muted-foreground\">\n            Tool output\n          </summary>\n          <pre className=\"mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-5 text-foreground\">\n            {output}\n          </pre>\n        </details>\n      ) : null}\n    </div>\n  );\n};\n\nAIToolCallDisplay.displayName = \"AIToolCallDisplay\";\n\nexport { AIToolCallDisplay };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable"
}