Compact narrative of the actions, targets, state and timing in an AI agent run.
import ToolTimeline from '@/components/ui/tool-timeline'
export default function Demo() {
return (
<ToolTimeline
className="w-full max-w-lg"
items={[
{
id: 'search',
verb: 'Searched',
target: 'assistant-ui registry',
detail: 'Found 31 search and retrieval patterns.',
status: 'complete',
time: '0.8s',
},
{
id: 'create',
verb: 'Created',
target: 'background-inbox.tsx',
detail: 'Authored locally with Pasta UI tokens.',
status: 'complete',
time: '1.4s',
},
{
id: 'verify',
verb: 'Verifying',
target: 'documentation routes',
status: 'running',
time: '3.2s',
},
{ id: 'preview', verb: 'Preview', target: 'visual states', status: 'pending' },
]}
summary="1 file · 1 check running"
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.