Primitive

Tool-call panel

Disclosure panel for agent tool-call status, input code, and output.

ToolCallPanel owns tool disclosure DOM, status chip, code-block bridge, body stack, and output surface. Components own tool status mapping, execution data, and message composition.
feedback
DOM renderImage render
Tool-call panelDefault
searchFilesrunning1.2s
ts
await searchFiles({ query: 'trace-panel' })
Found 4 matching files.

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Open running tool call with code input and output.
searchFilesrunning1.2s
ts
await searchFiles({ query: 'trace-panel' })
Found 4 matching files.
Render state

Queued

Queued collapsed tool call.
visualSmokequeuedqueued
Waiting for the docs server.
Render state

Success

Successful collapsed tool call.
typechecksuccess840ms
No errors.
Render state

Error

Failed tool call with diagnostic output.
catalogAuditerror210ms
ts
await renderRoute('/render/primitive/trace-panel')
Route returned a server-rendered prop error.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
name *ReactNode-Tool name.
status'queued' | 'running' | 'success' | 'error'runningTool-call status.
durationReactNode-Optional duration label.
toolIconIconNameterminalLeading tool glyph.
childrenReactNode-Code and output content.