Tool call card

A single tool invocation in collapsed or expanded form. Status, scope, cost, and duration sit on the header row; payloads expand below.

Included in the single kansho full pack. Components are not offered as separate installs.

Row variant

Collapsed single line; click to expand to a bordered detail box

Status matrix — collapsed

Expanded — success

Click the header to collapse

Input

{
  "path": "/repo/app/page.tsx"
}

Output

import Link from "next/link";

export default function Home() {
  return <main>…</main>;
}

Expanded — error

Input

{
  "statement": "UPDATE invoices SET status = 'paid' WHERE id = $1",
  "params": [
    "inv_31KdA"
  ]
}

Error

error: permission denied for table invoices
  at Connection.parseE (pg/lib/connection.js:614:13)

Error & recovery

Static preview: onRetry exposes Retry tool in place; without it, the error is a dead end

Error

error: permission denied for table invoices

Error

error: permission denied for table invoices

Grid layout — useful when multiple agents fan out

Agent: researcher

Agent: code-writer

Included components

This page is the canonical destination for these components. All ship in the single Kansho pack.

Tool call card

components/agent/tool-call-card.tsx

Supporting sources

These installed helpers belong to components documented on this page. They do not increase the public component count.

lib/format-duration.ts

Shared short-duration formatter.

Component documentation

Tool call card

components/agent/tool-call-card.tsx

Purpose

Displays one tool call with status, duration, usage, input/output detail, scope, and optional retry.

Appropriate use

Use for inspectable tool execution where a compact row may expand into structured detail.

Example

components/agent/tool-call-card.tsx has a representative live example in the "Expanded — success" section on /components/tool-call.

States

Uses every shared tool status; card or row variants can be collapsed or open and may contain string or object input/output.

API and props

ToolCallCard accepts toolName, status, durationMs, tokens, cost, input, output, scope, summary, variant, defaultOpen, onRetry, and className.

Dependencies

Direct imports are React, Lucide icons, StatusPill, StatusGlyph, CostChip, Disclosure, status metadata, duration formatting, and cn.

Accessibility

The disclosure exposes expanded state; retry is rendered only for errors with a callback, and visible labels carry status meaning.

Limitations

Object detail is JSON-rendered without schema validation or secret redaction; the host owns retry and result updates.

Source

Source: components/agent/tool-call-card.tsx.

Full pack

components/agent/tool-call-card.tsx is documented at /components/tool-call and installs only through the single Kansho full pack; no individual component install is offered.