{
  "name": "tool",
  "type": "registry:ui",
  "registryDependencies": [
    "collapsible",
    "button"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "description": "Displays tool call details including input, output, status, and errors. Ideal for visualizing AI tool usage in chat UIs.",
  "files": [
    {
      "path": "tool.tsx",
      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { cn } from \"@/lib/utils\"\nimport {\n  CheckCircle,\n  ChevronDown,\n  Loader2,\n  Settings,\n  XCircle,\n} from \"lucide-react\"\nimport { useState } from \"react\"\n\nexport type ToolPart = {\n  type: string\n  state:\n    | \"input-streaming\"\n    | \"input-available\"\n    | \"output-available\"\n    | \"output-error\"\n  input?: Record<string, unknown>\n  output?: Record<string, unknown>\n  toolCallId?: string\n  errorText?: string\n}\n\nexport type ToolProps = {\n  toolPart: ToolPart\n  defaultOpen?: boolean\n  className?: string\n}\n\nconst Tool = ({ toolPart, defaultOpen = false, className }: ToolProps) => {\n  const [isOpen, setIsOpen] = useState(defaultOpen)\n\n  const { state, input, output, toolCallId } = toolPart\n\n  const getStateIcon = () => {\n    switch (state) {\n      case \"input-streaming\":\n        return <Loader2 className=\"h-4 w-4 animate-spin text-blue-500\" />\n      case \"input-available\":\n        return <Settings className=\"h-4 w-4 text-orange-500\" />\n      case \"output-available\":\n        return <CheckCircle className=\"h-4 w-4 text-green-500\" />\n      case \"output-error\":\n        return <XCircle className=\"h-4 w-4 text-red-500\" />\n      default:\n        return <Settings className=\"text-muted-foreground h-4 w-4\" />\n    }\n  }\n\n  const getStateBadge = () => {\n    const baseClasses = \"px-2 py-1 rounded-full text-xs font-medium\"\n    switch (state) {\n      case \"input-streaming\":\n        return (\n          <span\n            className={cn(\n              baseClasses,\n              \"bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400\"\n            )}\n          >\n            Processing\n          </span>\n        )\n      case \"input-available\":\n        return (\n          <span\n            className={cn(\n              baseClasses,\n              \"bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400\"\n            )}\n          >\n            Ready\n          </span>\n        )\n      case \"output-available\":\n        return (\n          <span\n            className={cn(\n              baseClasses,\n              \"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400\"\n            )}\n          >\n            Completed\n          </span>\n        )\n      case \"output-error\":\n        return (\n          <span\n            className={cn(\n              baseClasses,\n              \"bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400\"\n            )}\n          >\n            Error\n          </span>\n        )\n      default:\n        return (\n          <span\n            className={cn(\n              baseClasses,\n              \"bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400\"\n            )}\n          >\n            Pending\n          </span>\n        )\n    }\n  }\n\n  const formatValue = (value: unknown): string => {\n    if (value === null) return \"null\"\n    if (value === undefined) return \"undefined\"\n    if (typeof value === \"string\") return value\n    if (typeof value === \"object\") {\n      return JSON.stringify(value, null, 2)\n    }\n    return String(value)\n  }\n\n  return (\n    <div\n      className={cn(\n        \"border-border mt-3 overflow-hidden rounded-lg border\",\n        className\n      )}\n    >\n      <Collapsible open={isOpen} onOpenChange={setIsOpen}>\n        <CollapsibleTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"bg-background h-auto w-full justify-between rounded-b-none px-3 py-2 font-normal\"\n          >\n            <div className=\"flex items-center gap-2\">\n              {getStateIcon()}\n              <span className=\"font-mono text-sm font-medium\">\n                {toolPart.type}\n              </span>\n              {getStateBadge()}\n            </div>\n            <ChevronDown className={cn(\"h-4 w-4\", isOpen && \"rotate-180\")} />\n          </Button>\n        </CollapsibleTrigger>\n        <CollapsibleContent\n          className={cn(\n            \"border-border border-t\",\n            \"data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden\"\n          )}\n        >\n          <div className=\"bg-background space-y-3 p-3\">\n            {input && Object.keys(input).length > 0 && (\n              <div>\n                <h4 className=\"text-muted-foreground mb-2 text-sm font-medium\">\n                  Input\n                </h4>\n                <div className=\"bg-background rounded border p-2 font-mono text-sm\">\n                  {Object.entries(input).map(([key, value]) => (\n                    <div key={key} className=\"mb-1\">\n                      <span className=\"text-muted-foreground\">{key}:</span>{\" \"}\n                      <span>{formatValue(value)}</span>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            )}\n\n            {output && (\n              <div>\n                <h4 className=\"text-muted-foreground mb-2 text-sm font-medium\">\n                  Output\n                </h4>\n                <div className=\"bg-background max-h-60 overflow-auto rounded border p-2 font-mono text-sm\">\n                  <pre className=\"whitespace-pre-wrap\">\n                    {formatValue(output)}\n                  </pre>\n                </div>\n              </div>\n            )}\n\n            {state === \"output-error\" && toolPart.errorText && (\n              <div>\n                <h4 className=\"mb-2 text-sm font-medium text-red-500\">Error</h4>\n                <div className=\"bg-background rounded border border-red-200 p-2 text-sm dark:border-red-950 dark:bg-red-900/20\">\n                  {toolPart.errorText}\n                </div>\n              </div>\n            )}\n\n            {state === \"input-streaming\" && (\n              <div className=\"text-muted-foreground text-sm\">\n                Processing tool call...\n              </div>\n            )}\n\n            {toolCallId && (\n              <div className=\"text-muted-foreground border-t border-blue-200 pt-2 text-xs\">\n                <span className=\"font-mono\">Call ID: {toolCallId}</span>\n              </div>\n            )}\n          </div>\n        </CollapsibleContent>\n      </Collapsible>\n    </div>\n  )\n}\n\nexport { Tool }\n",
      "type": "registry:ui"
    }
  ]
}