UI componentsComponents
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.
Preview
Loading session header preview…
Installation
pnpm dlx agent-observability-ui@latest add session-headernpx agent-observability-ui@latest add session-headeryarn dlx agent-observability-ui@latest add session-headerbunx --bun agent-observability-ui@latest add session-headerUsage
import { SessionHeader } from '@/components/session-header'
// Context-driven (preferred)
<SessionHeader />
// With an explicit session row
<SessionHeader session={mySession} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
session | AgentSessionRow | — | Override the session resolved from provider context. Handy when embedding the header in a list or custom page. |
Metric Summary Cards
A row of compact metric tiles for the headline observability numbers — turn count, avg latency, token totals. Small, dense, and meant to sit above the fold on the session detail page.
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.