{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tool-call-card",
  "title": "Tool call card",
  "description": "an action the assistant took · `status` running/done/error/stopped · details collapsed",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-utils",
    "@kit-native/spinner",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/tool-call-card.tsx",
      "content": "import { Spinner } from '@/components/kit/spinner';\nimport { Icon } from '@/components/ui/icon';\nimport { Text } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport { CheckCircle2Icon, ChevronDownIcon, CircleAlertIcon, CircleSlashIcon, WrenchIcon } from 'lucide-react-native';\nimport * as React from 'react';\nimport { Pressable, ScrollView, View } from 'react-native';\n\ntype Props = {\n  /** What the tool does, in words: \"Searched orders\", not \"search_orders\". */\n  title: string;\n  /** `stopped`: the person cancelled it before it finished. Neutral, not an error. */\n  status: 'running' | 'done' | 'error' | 'stopped';\n  /** The call's inputs and result, for people who want to check. Collapsed by default. */\n  input?: string;\n  output?: string;\n  className?: string;\n};\n\nconst STATUS = {\n  running: { icon: null, label: 'Running', tone: 'text-muted-foreground' },\n  done: { icon: CheckCircle2Icon, label: 'Done', tone: 'text-success' },\n  error: { icon: CircleAlertIcon, label: 'Failed', tone: 'text-destructive' },\n  stopped: { icon: CircleSlashIcon, label: 'Stopped', tone: 'text-muted-foreground' },\n} as const;\n\nfunction Code({ children }: { children: string }) {\n  return (\n    <ScrollView horizontal className=\"bg-muted rounded-md\" contentContainerClassName=\"p-2\">\n      <Text className=\"font-mono text-xs\">{children}</Text>\n    </ScrollView>\n  );\n}\n\n/** One action the assistant took, shown in the conversation so people can see what it did. */\nexport function ToolCallCard({ title, status, input, output, className }: Props) {\n  const [open, setOpen] = React.useState(false);\n  const s = STATUS[status];\n  const details = !!(input || output);\n  return (\n    <View className={cn('border-border bg-card overflow-hidden rounded-xl border', className)}>\n      <Pressable\n        disabled={!details}\n        onPress={() => setOpen((o) => !o)}\n        accessibilityRole=\"button\"\n        accessibilityLabel={`${title}, ${s.label}`}\n        accessibilityState={details ? { expanded: open } : undefined}\n        className=\"min-h-11 flex-row items-center gap-3 px-3 py-2.5 active:opacity-80\">\n        <Icon as={WrenchIcon} size={16} className=\"text-muted-foreground\" />\n        <Text numberOfLines={1} className=\"flex-1 text-sm font-medium\">\n          {title}\n        </Text>\n        <View className=\"flex-row items-center gap-1\">\n          {s.icon ? <Icon as={s.icon} size={16} className={s.tone} /> : <Spinner tone=\"muted\" accessibilityLabel=\"Running\" />}\n          <Text className={cn('text-sm', s.tone)}>{s.label}</Text>\n        </View>\n        {details ? <Icon as={ChevronDownIcon} size={16} className={cn('text-muted-foreground', open && 'rotate-180')} /> : null}\n      </Pressable>\n      {details && open ? (\n        <View className=\"border-border gap-2 border-t px-3 py-2.5\">\n          {input ? <Code>{input}</Code> : null}\n          {output ? <Code>{output}</Code> : null}\n        </View>\n      ) : null}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/tool-call-card.tsx"
    }
  ],
  "meta": {
    "exports": [
      "ToolCallCard"
    ],
    "api": "<ToolCallCard title status input? output? />"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "ai"
  ],
  "type": "registry:component"
}