{ "schemaVersion": 1, "target": "react", "name": "tool-call-card", "version": "0.2.0", "category": "agent", "title": "Tool Call Card", "description": "Show the status and result of an agent tool call.", "tags": [ "agent", "tool", "status", "ai" ], "requires": { "projectTypes": [ "next", "vite-react" ], "styling": "tailwind-v4" }, "npmDependencies": {}, "registryDependencies": [ { "name": "badge", "version": "0.2.0" } ], "docsPath": "/components/tool-call-card", "props": [ { "name": "name", "type": "string", "description": "Tool name, shown in monospace." }, { "name": "status", "type": "\"queued\" | \"running\" | \"success\" | \"error\"", "description": "Current state of the call." }, { "name": "summary", "type": "ReactNode", "description": "One line describing what the call does." }, { "name": "input", "type": "unknown", "description": "Arguments passed to the tool, rendered as formatted JSON." }, { "name": "output", "type": "ReactNode", "description": "Result shown on success. Strings render in a soft-wrapping well." }, { "name": "error", "type": "ReactNode", "description": "Message shown on failure in a red tinted box, always visible." }, { "name": "durationMs", "type": "number", "description": "Elapsed time, shown once the call finishes." }, { "name": "defaultOpen", "type": "boolean", "default": "false", "description": "Opens the input and output disclosure initially." } ], "accessibility": [ "The status label is a live region, so screen readers announce Running, Succeeded, or Failed as the status changes.", "Every state has a text label and its own stroke glyph (dashed circle, spinning arc, check, x); color is never the only signal.", "aria-busy is set while running.", "Input and output use native
/, which work with the keyboard out of the box. Height animates only where ::details-content is supported.", "With reduced motion the spinner holds still and the glyph swap, check draw, and disclosure are instant; the label still changes." ], "states": [ "queued", "running", "success", "error" ], "files": [ { "path": "agent/tool-call-card.tsx", "content": "import type { ComponentProps, ReactNode } from \"react\";\nimport { Badge, type BadgeTone } from \"../ui/badge\";\n\nexport type ToolCallStatus = \"queued\" | \"running\" | \"success\" | \"error\";\n\nconst statuses: Record = {\n queued: { label: \"Queued\", tone: \"neutral\", border: \"border-zinc-950/10 dark:border-white/10\" },\n running: { label: \"Running\", tone: \"info\", border: \"border-sky-500/35\" },\n success: { label: \"Succeeded\", tone: \"success\", border: \"border-zinc-950/10 dark:border-white/10\" },\n error: { label: \"Failed\", tone: \"danger\", border: \"border-red-500/35\" },\n};\n\nconst ease = \"ease-[cubic-bezier(0.23,1,0.32,1)]\";\n\nexport interface ToolCallCardProps extends Omit, \"children\"> {\n /** Tool name, for example `search_docs`. */\n name: string;\n status: ToolCallStatus;\n /** One line describing what the call does. */\n summary?: ReactNode;\n /** Arguments passed to the tool. Rendered as formatted JSON. */\n input?: unknown;\n /** Result shown when the call succeeds. Strings render as preformatted text. */\n output?: ReactNode;\n /** Message shown when the call fails. */\n error?: ReactNode;\n /** Elapsed time, shown once the call finishes. */\n durationMs?: number;\n /** Opens the input and output details initially. */\n defaultOpen?: boolean;\n}\n\n/** One agent tool call: its status, what it does, how long it took, and its input and output. */\nexport function ToolCallCard({\n name,\n status,\n summary,\n input,\n output,\n error,\n durationMs,\n defaultOpen = false,\n className,\n ...props\n}: ToolCallCardProps) {\n const meta = statuses[status];\n const finished = status === \"success\" || status === \"error\";\n const showOutput = status === \"success\" && output != null;\n const hasInput = input !== undefined;\n const detailsLabel = hasInput && showOutput ? \"Input and output\" : hasInput ? \"Input\" : \"Output\";\n\n return (\n \n
\n \n
\n
\n \n {name}\n \n
\n {finished && durationMs != null ? (\n {formatDuration(durationMs)}\n ) : null}\n \n {meta.label}\n \n
\n
\n {summary ?

{summary}

: null}\n {status === \"error\" && error != null ? (\n \n {error}\n

\n ) : null}\n
\n
\n\n {hasInput || showOutput ? (\n \n \n {detailsLabel}\n \n \n \n \n \n {/* The summary already names a lone section, so labels only appear when there are two. */}\n {hasInput ?
{JSON.stringify(input, null, 2)}
: null}\n {showOutput ? (\n
\n {output}\n
\n ) : null}\n \n
\n ) : null}\n \n );\n}\n\n/** A labeled well. `wrap` soft-wraps long lines (tool output); JSON keeps its layout and scrolls. */\nfunction Section({ label, wrap = false, children }: { label?: string; wrap?: boolean; children: ReactNode }) {\n return (\n
\n {label ?

{label}

: null}\n {typeof children === \"string\" ? (\n 
\n          {children}\n
\n ) : (\n
{children}
\n )}\n
\n );\n}\n\n/**\n * The shared status glyphs at 20px. Remounts on each status change (via `key`), so the\n * new shape scales in and the success check draws; both are instant with reduced motion.\n */\nfunction StatusIcon({ status }: { status: ToolCallStatus }) {\n const base = `size-5 shrink-0 transition-[opacity,scale] duration-200 ${ease} starting:scale-90 starting:opacity-0 motion-reduce:transition-none`;\n // A 16 unit box drawn at 20px: a 1.2 stroke renders at 1.5px.\n const stroke = { fill: \"none\", stroke: \"currentColor\", strokeWidth: 1.2, strokeLinecap: \"round\", strokeLinejoin: \"round\" } as const;\n\n if (status === \"running\") {\n return (\n \n \n \n \n );\n }\n if (status === \"success\") {\n return (\n \n \n \n \n );\n }\n if (status === \"error\") {\n return (\n \n \n \n \n );\n }\n return (\n \n \n \n );\n}\n\nfunction formatDuration(ms: number): string {\n return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(1)} s`;\n}\n" } ], "example": { "content": "import { ToolCallCard } from \"@/components/seamless/agent/tool-call-card\";\n\nexport default function ToolCallCardExample() {\n return (\n
\n \n \n
\n );\n}\n" } }