UI componentsPages
Sessions Page
Tabular index of captured sessions. Monospace IDs, tabular-number duration, capability badges, row-hover navigation, and server-backed pagination.
Preview
Loading sessions page preview…
Installation
pnpm dlx agent-observability-ui@latest add sessions-pagenpx agent-observability-ui@latest add sessions-pageyarn dlx agent-observability-ui@latest add sessions-pagebunx --bun agent-observability-ui@latest add sessions-pageUsage
import { AgentObservabilityProvider } from '@/lib/observability-provider'
import { SessionsPage } from '@/components/sessions-page'
import { useNavigate } from 'react-router'
export function SessionsRoute() {
const navigate = useNavigate()
return (
<AgentObservabilityProvider baseUrl="https://observability.example.com/api">
<SessionsPage onSessionClick={(id) => navigate(`/sessions/${id}`)} />
</AgentObservabilityProvider>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
onSessionClick | (sessionId: string) => void | — | Fires when a row is clicked. Wire it up to your router for navigation. Omit to render a non-interactive list. |
useOptions
Snapshot of the agent configuration captured with the session — model IDs, voice settings, tool list, runtime options. Returns null before load.
Session Detail Page
Full drill-in view for a single session. Combines the session header, a tabbed timeline / transcript / events / config / performance layout, and the recording player.