UI componentsComponents
Session Events
Chronological stream of raw pipeline events captured during the session — function calls, agent handoffs, state changes. Filterable by event type.
Preview
Loading session events preview…
Installation
pnpm dlx agent-observability-ui@latest add session-eventsnpx agent-observability-ui@latest add session-eventsyarn dlx agent-observability-ui@latest add session-eventsbunx --bun agent-observability-ui@latest add session-eventsUsage
import { SessionEvents } from '@/components/session-events'
// Default badge palette
<SessionEvents />
// Recolor a specific event type
<SessionEvents
typeBadgeClass={{
function_call: 'bg-orange-100 text-orange-800',
}}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
typeBadgeClass | Partial<Record<string, string>> | — | Per-event-type Tailwind className overrides. Merged over the built-in defaults so you only need to specify the types you want to recolor. |
fallbackBadgeClass | string | 'bg-muted text-muted-foreground' | Fallback className used when an event type has no mapping in the defaults or overrides. |
Turn Transcript
Two-column conversation transcript with per-turn metadata. Agent and user messages are paired; each pair links back to the corresponding timeline segment.
Session Config
Snapshot of the agent configuration used for the session: model IDs, voice settings, active tools, and any runtime options that shaped the conversation.