Docs / Tool calls /

ToolCallCard

Expandable receipt showing a tool's name, status, duration, token cost, input, and output. Supports card and row variants.

Preview

Input

{
  "path": "src/db/schema.prisma",
  "encoding": "utf-8"
}

Output

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  createdAt DateTime @default(now())
}

model Session {
  id        String   @id @default(cuid())
  userId    String
  expiresAt DateTime
}

Variants

Row variant

Error state

Input

{
  "command": "npm run build",
  "cwd": "/workspace/frontend"
}

Error

Error: ENOENT: no such file or directory, open '/workspace/frontend/package.json'
    at Object.openSync (node:fs:600:3)
    at Object.readFileSync (node:fs:468:35)

Pending state

Atoms

StatusPill

PendingRunningSuccessFailedSkippedPaused

CostChip

1.8k$0.0124k$0.1499k$0.58

Props

Prop	Type	Description
toolName*	string	Name of the tool being called, rendered in monospace.
status*	"pending" \| "running" \| "success" \| "error" \| "skipped" \| "paused"	Current execution status — drives the StatusPill colour and error/output label.
durationMs	number	Wall-clock time the tool call took, displayed as a short duration string (e.g. 420 ms, 1.4 s).
tokens	number	Token count for this call, shown inside a CostChip when provided.
cost	number	USD cost for this call (e.g. 0.01), shown inside a CostChip when provided.
input	Record<string, unknown> \| string	Tool input — object is pretty-printed as JSON; string is shown verbatim. Rendered in a collapsible block.
output	Record<string, unknown> \| string	Tool output or error — same rendering as input. Label changes to "Error" when status is "error".
scope	string	Short scope badge shown in the card header (e.g. "filesystem", "network", "sandbox").
summary	string	Short summary appended after the tool name in the row variant (e.g. "2 read", "14 entries").
variant	"card" \| "row"	"card" (default) renders a full card with a header row; "row" renders a compact single-line disclosure.
defaultOpen	boolean	Whether the disclosure starts open. Defaults to false.
className	string	Extra classes applied to the outermost element.

* required.

Usage

import { ToolCallCard } from "@/components/agent/tool-call-card";

<ToolCallCard
  toolName="read_file"
  status="success"
  durationMs={420}
  tokens={1840}
  cost={0.01}
  scope="filesystem"
  input={{ path: "src/db/schema.prisma" }}
  output="model User { id String @id }"
  defaultOpen
/>