UI componentsComponents
Session Timeline
Scrollable per-turn timeline synchronized with the recording. Each turn is a band with STT, LLM, and TTS segments; hover to scrub, click to jump.
Preview
Loading session timeline preview…
Installation
pnpm dlx agent-observability-ui@latest add session-timelinenpx agent-observability-ui@latest add session-timelineyarn dlx agent-observability-ui@latest add session-timelinebunx --bun agent-observability-ui@latest add session-timelineUsage
import { SessionTimeline } from '@/components/session-timeline/session-timeline'
<SessionTimeline />
// Custom turn-click handling (e.g. scroll a sibling panel)
<SessionTimeline onTurnClick={(n) => focusTurn(n)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
metrics | SessionMetrics | null | — | Override per-turn metrics resolved from provider context. |
recordUrl | string | null | — | Recording URL. Override only when your audio URL does not ship with the session detail response. |
onTurnClick | (turnNumber: number) => void | — | Handler for clicks on individual turn chips. Defaults to the provider’s setHighlightedTurn (which scrolls the transcript). |
sessionCreatedAt | string | — | ISO timestamp used to align the recording playback cursor with turn timestamps. Defaults to the session’s created_at. |
Session Header
The identity strip at the top of every session detail page. Shows session ID, capability badges, duration, start/end timestamps, and a download-recording action.
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.