AI primitive
ToolUseTimeline
Visual timeline of agent tool calls with per-call status (pending / running / done / error), input/output preview and elapsed time. Drops into agent-flavored demos.
Usage
Pick your edition with the tabs. Selection syncs across all docs.
tsx
import { ToolUseTimeline } from '@/components/organisms'
<ToolUseTimeline
calls={[
{ id: 't1', name: 'web_search', status: 'done', durationMs: 412, summary: '3 results' },
{ id: 't2', name: 'read_file', status: 'running' },
{ id: 't3', name: 'write_file', status: 'pending' },
]}
/>Props
Same surface in both editions; HTML version exposes equivalents through Alpine x-data.
| Prop | Type | Default | Description |
|---|---|---|---|
| calls | ToolCall[] | [] | Ordered list of tool calls. |
| onCallClick | (call: ToolCall) => void | — | Optional click handler for inspecting a call. |
| compact | boolean | false | Single-line render without input/output preview. |
Accessibility
role
Renders an <ol> with one <li> per call. Status uses aria-label.
live
Running calls update via aria-live='polite'.
motion
Pulse animation respects prefers-reduced-motion.