UI componentsComponents
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.
Preview
Loading metric summary cards preview…
Installation
pnpm dlx agent-observability-ui@latest add metric-summary-cardsnpx agent-observability-ui@latest add metric-summary-cardsyarn dlx agent-observability-ui@latest add metric-summary-cardsbunx --bun agent-observability-ui@latest add metric-summary-cardsUsage
import { MetricSummaryCards } from '@/components/metric-summary-cards'
// Inside a provider tree — reads the current session via context
<MetricSummaryCards />
// Or pass your own metrics
<MetricSummaryCards metrics={customMetrics} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
metrics | SessionMetrics | null | — | Override the metrics resolved from provider context. Useful when rendering ad-hoc aggregates or in stories. Defaults to the current session’s metrics. |
Eval Case Detail
Single-case drill-in — header with status chip, metric tiles (avg TTFT / speaking time / turn count), user input, full transcript, judgments list, and a collapsible failure block. Ships rendered inside the EvalRunDetailPage drawer by default; reuse it directly when you want a standalone route.
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.