Agent state

ToolCallPanel

Four-phase function-call visualization: prompt → running → result → synthesis. Driven by the phase prop for external control, or use autoPlay for a self-animating demo. Optional renderResult lets you swap the default JSON dump for any custom component.

Sourcesrc/components/ai/tool-call-panel.tsx

Synthesis (phase=4)

All four cards rendered: the prompt, the invocation, the result, and the agent's final response. Pass renderResult to replace the JSON dump with a rich list.

Tool call · search_flights
412ms
User prompt

Find flights NYC → Tokyo under $1000

Calling search_flights
{
  "from": "JFK",
  "to": "HND",
  "maxPrice": 1000,
  "returnBy": "2026-05-14"
}
Result
  • United · $745 · 1 stop(s)
  • ANA · $812 · 0 stop(s)
  • Delta · $899 · 1 stop(s)
Agent response
Found 3 flights. Cheapest: United at $745.

Running (phase=2)

Mid-call state — the prompt and invocation are visible and the tool card shows a running… spinner. The result and synthesis cards are hidden until phase advances.

Tool call · search_flights
User prompt

Find flights NYC → Tokyo under $1000

Calling search_flightsrunning…
{
  "from": "JFK",
  "to": "HND",
  "maxPrice": 1000,
  "returnBy": "2026-05-14"
}

Tool error

Pass errorMessage to swap the Result card for a danger-tinted error card. The duration badge still surfaces at phase≥3.

Tool call · send_email
2104ms
User prompt

Send the updated invoice to vendor@acme.com

Calling send_email
{
  "to": "vendor@acme.com",
  "subject": "Invoice #4412"
}
Tool error

SMTP 421: service not available. Retry scheduled.