---
title: Tool Call Card
description: A status card for a single tool call.
category: AiAgent
status: beta
since: 0.3.9
tags: [ai, tool, status]
syncStatus: reviewed
verified: true
---

## Usage

### Basic
The host advances `toolCall.status`; the expanded body switches content with it.
::::TuffDemoWrapper{demo="ToolCallCardToolCallCardDemo" code-lang="vue"}
---
code: |
  <script setup lang="ts">
  const toolCall = {
    type: 'tool-call',
    id: 'call-1',
    name: 'read_file',
    status: 'done',
    summary: 'Read src/main.ts',
    input: '{ "path": "src/main.ts" }',
    output: 'export function main() {}',
  }
  </script>

  <template>
    <TxToolCallCard :tool-call="toolCall" @retry="onRetry" />
  </template>
---
::::

### Best Practices

- Put structured results (a table, a chart, a widget) in the `result` slot and keep `output` as the plain-text fallback.
- On `retry`, set `status` back to `running` right away so users don't click repeatedly.
- Append logs line by line instead of replacing the block, so tail-following stays smooth.
- On non-English surfaces, override all six label props together to avoid a mixed-language card.
- Write `summary` as what the call did, not the tool name again; the collapsed row is all users scan.

## API Reference

### Props

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `toolCall` | `AiToolCallPart` | — | The call to render. Required. |
| `defaultExpanded` | `boolean` | `false` | Initial expanded state; read once, on mount. |
| `retryLabel` | `string` | `'Retry'` | Label of the retry button. |
| `pendingLabel` | `string` | `'Queued'` | Label for `pending`. |
| `runningLabel` | `string` | `'Running'` | Label for `running`. |
| `doneLabel` | `string` | `'Done'` | Label for `done` and any unmatched status. |
| `errorLabel` | `string` | `'Failed'` | Label for `error`. |
| `inputLabel` | `string` | `'Input'` | Heading of the input section. |

`AiToolCallPart` is `{ type, id, name, status, summary?, input?, output?, error?, logs? }`, where `status` is `'pending' | 'running' | 'done' | 'error'`.

### Events

| Name | Payload | Description |
|------|---------|-------------|
| `retry` | `(id: string)` | Fires when retry is clicked, with `toolCall.id`. |
| `toggle` | `(expanded: boolean)` | Fires when the header is clicked, with the new expanded state. |

### Slots

| Name | Scope | Description |
|------|-------|-------------|
| `summary` | `{ toolCall }` | Replaces the summary in the collapsed header. |
| `result` | `{ toolCall }` | Result surface for the host's own rendering; replaces `output` when provided. |
| `icon` | `{ status }` | Replaces the status icon. |

## Overview

- The body follows `status`: `running` shows `logs`, `done` shows the `result` slot (falling back to `output`), and `error` shows `error` with a retry button; `input` shows whenever it is set.
- Every change to `logs` scrolls the log region to the bottom.
- `status` is mirrored onto the root's `data-status` for styling.

## Technologies

- `AiToolCallPart` is defined and exported by `ai-elements`.
- Source: `packages/tuffex/packages/components/src/tool-call-card/`.