ToolCallCard

Display block for LLM tool invocations. One call renders a quiet row; several collapse behind a summary showing the latest call. Rows with detail expand to results.

Examples

Single call

read_file src/auth/passkeys.ts 80ms

<ToolCallCard calls={[
  {name: 'read_file', status: 'complete', target: 'src/auth/passkeys.ts', duration: '80ms'},
]} />

Expandable result

<ToolCallCard calls={[
  {name: 'run_tests', status: 'complete', target: 'auth suite',
   duration: '4.2s', detail: '47 passed, 0 failed…'},
]} />

Grouped calls

read_file Button.tsx 61ms

edit_file Button.tsx +12 −3

run_tests 2 snapshot failures

edit_file Button.test.tsx

<ToolCallCard calls={[
  {name: 'read_file', status: 'complete', target: 'Button.tsx', duration: '61ms'},
  {name: 'edit_file', status: 'complete', target: 'Button.tsx', additions: 12, deletions: 3},
  {name: 'run_tests', status: 'error', error: '2 snapshot failures'},
  {name: 'edit_file', status: 'running', target: 'Button.test.tsx'},
]} />

Props

Prop	Type	Default	Description
`calls`	`ToolCall[]`	`—`	{name, status?, target?, duration?, additions?, deletions?, error?, detail?}[] — matches LLM API shapes.
`label`	`string`	`—`	Group summary label. Default "N tool calls".
`expanded`	`boolean (bindable)`	`—`	Group open state. Default false.

Install

CLI

npx @a3tai/mittsu add tool-call-card