---

## ToolCallCard
**Stability:** experimental — shipped to be used and judged, but the API may change in any release without notice.
Collapsible disclosure for one agent tool-call part (`type: 'tool-call'`)
— a status indicator + monospaced tool name in the header, and the JSON input/output (or an
error message) in the expandable body. It is the default renderer ChatMessage reaches for on
`tool-call` parts (wire it in via `partRenderers`). By default it renders `plain`: one muted
line in the message flow, in the same register as ReasoningDisclosure, because a reader
following prose is not reading the machinery. Switch to `variant="card"` where the call is
the content — an agent trace, a tool-run log.
Opens itself when a call fails so the error is visible without a click; a manual toggle always
wins afterwards. Pass a `children` snippet to replace the default JSON body with a
domain-specific view of the same part.

**Import:** `import { ToolCallCard } from '@urbicon-ui/blocks';`

### Examples
```svelte
<ToolCallCard toolCall={part} />
```

```svelte
<ToolCallCard toolCall={part} variant="card" />
```

```svelte
<ToolCallCard {toolCall}>
{#snippet children(call)}
<WeatherResult data={call.output} />
{/snippet}
</ToolCallCard>
```

### Variants
- variant: card, plain (default: plain)
- callState: complete, error, pending, running (default: pending)
- open: false, true (default: false)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| toolCall | `ChatToolCallPart` | yes |  | The tool-call part to render. Required. |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'class' | 'children') |
| children | `Snippet<[ChatToolCallPart]>` | no |  | Replace the default JSON input/output body with a custom rendering of the tool-call part. Receives the same `toolCall`. When provided, the built-in error line + input/output sections are not rendered. |
| class | `string` | no |  | Extra classes merged onto the root element. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| completeLabel | `string` | no | 'Done' | Header status label for the `complete` state. |
| defaultOpen | `boolean` | no |  | Initial expanded state for uncontrolled usage. Defaults to `true` when the call is already in the `error` state, `false` otherwise. |
| errorLabel | `string` | no | 'Failed' | Header status label for the `error` state. |
| inputLabel | `string` | no | 'Input' | Caption in the input payload's header. |
| onOpenChange | `(open: boolean) => void` | no |  | Fired once per toggle, after the new open state is applied. |
| open | `boolean` | no |  | Whether the card is expanded. Supports `bind:open`. Left uncontrolled, the card starts collapsed for `pending` / `running` / `complete` and expanded for `error`. |
| outputLabel | `string` | no | 'Output' | Caption in the output payload's header. |
| pendingLabel | `string` | no | 'Pending' | Header status label for the `pending` state. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ ToolCallCard: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette. |
| runningLabel | `string` | no | 'Running' | Header status label for the `running` state. |
| slotClasses | `Partial<Record<ToolCallCardSlots, string>>` | no |  | Per-slot class overrides. Slots: `trigger` (header button), `triggerLeft`, `triggerRight`, `spinner`, `toolName`, `statusText` (the plain header's status; `card` uses a Badge instead), `chevron`, `body`, `section`, `errorMessage`. The payloads render as `variant="plain"` CodeBlocks — style those through `<BlocksProvider presets={{ CodeBlock: {...} }}>`. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| unstyled | `boolean` | no |  | Strip the component's default tv() classes, the underlying Collapsible's and the status Badge's. |
| variant | `'plain' | 'card'` | no | 'plain' | How prominent the header is. `plain` is one muted line in the message flow, with no outline, surface, or badge, as wide as its own text. `card` is a framed header (outline, radius, shadow, status badge, the container's full width) for surfaces where the tool call is the subject. |
| callState | `'complete' | 'error' | 'pending' | 'running'` | no | pending | Controls the callState behavior and appearance of the ToolCallCard component. Available options: complete, error, pending, running. |

Inherited from:
- Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> (omit-pattern)

### Types
```ts
type ChatToolCallPart = Extract<ChatMessagePart, { type: 'tool-call' }>
```

```ts
type ChatMessagePart = | { type: 'text'; text: string }
  /** Model reasoning. Collapsed, tertiary presentation; `durationMs` feeds the "Thought for Xs" label. */
  | { type: 'reasoning'; text: string; durationMs?: number }
  /** A tool invocation with its lifecycle state. Rendered as a ToolCallCard by default; override via `partRenderers`. */
  | {
      type: 'tool-call';
      id: string;
      name: string;
      state: 'pending' | 'running' | 'complete' | 'error';
      input?: unknown;
      output?: unknown;
      errorMessage?: string;
    }
  /** A cited source. Same shape as CitationSource — also feeds StreamingMarkdown's `sources` for `[id]` markers. */
  | ({ type: 'source' } & CitationSource)
  /**
   * A file attached to the message. `url` is only ever rendered as a
   * policy-checked download link (never as an inline image/iframe) — LLM- or
   * server-supplied URLs are untrusted input.
   */
  | { type: 'attachment'; name: string; mimeType: string; size?: number; url?: string }
  /** Declarative A2UI payload (P4). Validated fail-loud by A2UIView; ignored by default renderers until then. */
  | { type: 'a2ui'; payload: unknown }
```

```ts
type SlotNames = keyof ReturnType<T> & string
```

```ts
interface CitationSource {
/** Stable id — matches the `[id]` marker in the streamed markdown. */
  id: string;
  /** Human-readable source title, always shown in the popover (and as the chip label under `citationStyle="label"`). */
  title: string;
  /** Source URL. Rendered as an outbound link only when it passes the `urlPolicy`; a blocked or absent URL shows title/snippet with no link. */
  url?: string;
  /** Short excerpt shown under the title, clamped to ~3 lines. */
  snippet?: string;
}
```

### Slots (slotClasses keys)
`trigger`, `triggerLeft`, `triggerRight`, `spinner`, `toolName`, `statusText`, `chevron`, `body`, `section`, `errorMessage`