UI componentsHooks
useTimeline
Derives timeline-specific data from the current session: per-turn metrics, the recording URL, and the highlighted-turn state shared with the transcript.
Signature
useTimeline(): { metrics, recordUrl, sessionCreatedAt, highlightedTurn, setHighlightedTurn }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 { useTimeline } from '@/lib/observability-hooks'
function CustomTimeline() {
const { metrics, setHighlightedTurn } = useTimeline()
// Click a turn → both timeline AND transcript scroll into view
return metrics?.turns.map((t) => (
<button
key={t.turn_number}
onClick={() => setHighlightedTurn(t.turn_number)}
>
Turn {t.turn_number}
</button>
))
}Returns
{ metrics: SessionMetrics | null, recordUrl: string | null, sessionCreatedAt: string | undefined, highlightedTurn: number | null, setHighlightedTurn: (n: number | null) => void }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.
useTranscript
Returns the structured turns, the raw chat history, and the highlighted-turn state — the data the built-in TurnTranscriptSection consumes.