UI componentsHooks
useTranscript
Returns the structured turns, the raw chat history, and the highlighted-turn state — the data the built-in TurnTranscriptSection consumes.
Signature
useTranscript(): { turns, chatHistory, metrics, 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 { useTranscript } from '@/lib/observability-hooks'
function TurnCount() {
const { turns } = useTranscript()
return <span>{turns.length} turns</span>
}Returns
{ turns: TurnRecord[], chatHistory: ChatItem[] | null, metrics: SessionMetrics | null, highlightedTurn: number | null, setHighlightedTurn: (n: number | null) => void }useTimeline
Derives timeline-specific data from the current session: per-turn metrics, the recording URL, and the highlighted-turn state shared with the transcript.
usePerformance
Extracts metrics + the MetricsSummary roll-up from the current session. Used by all the chart components to build their data series.