A collapsible card for a tool invocation with status, duration, syntax-colored arguments and result, and a copy button.
{ "query": "rollback policy" }{ "hits": 3, "top": "rollback.md" }npx shadcn@latest add https://hyperblur.dev/r/tool-call-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/tool-call-card.tsx.
import { ToolCallCard } from "@/components/hyperblur/tool-call-card"
<ToolCallCard name="search_docs" duration={420} args={{ query: "rollback" }} result={{ hits: 3 }} defaultOpen />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "tool_call" | Tool name shown in the header. |
| status | "running" | "done" | "error" | "done" | Shows a spinner, a check or a cross. |
| duration | number | string | Elapsed time. Numbers are milliseconds and render as 420ms or 1.2s. | |
| args | object | unknown[] | string | Arguments, rendered as JSON-like text. JSON strings are pretty-printed. | |
| result | object | unknown[] | string | Result, rendered like args, with a copy button. | |
| defaultOpen | boolean | false | Start expanded. |
| color | string | "#2f7bff" | Focus and running-state accent. |