{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-tool-call-display",
  "type": "registry:component",
  "title": "AI Tool Call Display",
  "description": "Structured card for tool invocation traces, statuses, serialized input, and returned output.",
  "dependencies": [
    "@vllnt/ui@^0.2.1",
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/ai-tool-call-display/ai-tool-call-display.tsx",
      "content": "import { forwardRef } from \"react\";\n\nimport { 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 = forwardRef<HTMLDivElement, AIToolCallDisplayProps>(\n  (\n    {\n      className,\n      description,\n      duration,\n      input,\n      output,\n      status = \"queued\",\n      toolName,\n      ...props\n    },\n    ref,\n  ) => {\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);\n\nAIToolCallDisplay.displayName = \"AIToolCallDisplay\";\n\nexport { AIToolCallDisplay };\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}