UI componentsHooks
useSession
Returns the single session loaded by the provider. Read-only convenience wrapper — the actual fetch is done by AgentObservabilityProvider when a sessionId is passed to it.
Signature
useSession(): { session, loading, error }Installation
pnpm dlx agent-observability-ui@latest add observability-hooksnpx agent-observability-ui@latest add observability-hooksyarn dlx agent-observability-ui@latest add observability-hooksbunx --bun agent-observability-ui@latest add observability-hooksUsage
import { useSession } from '@/lib/observability-hooks'
function SessionTitle() {
const { session, loading, error } = useSession()
if (loading) return <span>Loading…</span>
if (error || !session) return <span>—</span>
return <h1>{session.session_id}</h1>
}Returns
{ session: AgentSessionRow | null, loading: boolean, error: string | null }useSessions
Paginated session list fetcher. Holds its own cursor — pass a stable initialOffset and drive pagination with setOffset. Refetches automatically whenever filters or offset change.
useTimeline
Derives timeline-specific data from the current session: per-turn metrics, the recording URL, and the highlighted-turn state shared with the transcript.