AiAgentTimeline

Agent Timeline

Rich timeline visualization with duration, connectors, and nested children.

Agent Run3/4 steps · 1.0s
thought 120ms
Analyzing the user request and planning a retrieval strategy.
action · search850ms
Searching knowledge base for relevant documents.
Query: "edge computing 2025"
Retrieved 12 chunks · top score 0.91
observation 50ms
Found 3 relevant documents above the relevance threshold.
action · generate
Generating response from retrieved context.

Usage 

const entries: AiTimelineEntry[] = [
  { id: '1', type: 'thought', content: 'Planning retrieval…', status: 'completed', duration: 120 },
  {
    id: '2',
    type: 'action',
    content: 'Searching knowledge base',
    tool: 'search',
    status: 'completed',
    duration: 850,
    children: [
      { id: '2a', type: 'observation', content: 'Retrieved 12 chunks', status: 'completed' },
    ],
  },
  { id: '3', type: 'action', content: 'Generating response', tool: 'generate', status: 'running' },
]

<AiAgentTimeline :entries="entries" title="Agent Run" :show-duration="true" />

Props

Prop Type Default Description
entries*AiTimelineEntry[]—Timeline entries to display
titlestring—Timeline header title
showDurationbooleantrueShow duration on entries
collapsedbooleanfalseCollapse the timeline entries

Slots

  • default
  • header
  • title
  • summary
  • entry
  • connector
  • entry-header
  • entry-body
  • children
  • child