ToolCallCard

// Controlled usage — pass a toolCall object
import { ToolCallCard } from './ToolCallCard.jsx';

const toolCall = {
  id:          'tc_01',
  name:        'search_knowledge_base',
  args:        '{"query":"AI agent frameworks","limit":5}',
  status:      'success',              // 'pending'|'running'|'success'|'error'
  result:      '{"results":[...]}',
  startedAt:   Date.now() - 1200,
  completedAt: Date.now(),
};

return <ToolCallCard toolCall={toolCall} theme="light" defaultExpanded={true} />;

// AG-UI stream mode — wire to an event bus
import { ToolCallCardContainer } from './ToolCallCard.jsx';

const bus = new EventTarget();

// Your agent runtime dispatches these:
bus.dispatchEvent(new CustomEvent('TOOL_CALL_START',  { detail: { toolCallId: 'tc_01', toolName: 'search_kb' }}));
bus.dispatchEvent(new CustomEvent('TOOL_CALL_ARGS',   { detail: { toolCallId: 'tc_01', delta: '{"query"' }}));
bus.dispatchEvent(new CustomEvent('TOOL_CALL_ARGS',   { detail: { toolCallId: 'tc_01', delta: ':"hello"}' }}));
bus.dispatchEvent(new CustomEvent('TOOL_CALL_END',    { detail: { toolCallId: 'tc_01' }}));
bus.dispatchEvent(new CustomEvent('TOOL_CALL_RESULT', { detail: { toolCallId: 'tc_01', result: { ok: true }}}));

return <ToolCallCardContainer
  toolCallId="tc_01"
  eventSource={bus}
  theme="dark"
  defaultExpanded={true}
/>;