UI componentsPages
Eval Run Detail Page
Single-run breakdown: pass-rate hero tile, passed/failed/errored/skipped counters, CI metadata, and a cases table with a drawer for per-case transcript and judgments.
Preview
Loading eval run detail page preview…
Installation
pnpm dlx agent-observability-ui@latest add eval-run-detail-pagenpx agent-observability-ui@latest add eval-run-detail-pageyarn dlx agent-observability-ui@latest add eval-run-detail-pagebunx --bun agent-observability-ui@latest add eval-run-detail-pageUsage
import { AgentObservabilityProvider } from '@/lib/observability-provider'
import { EvalRunDetailPage } from '@/components/eval-run-detail-page'
import { useParams } from 'react-router'
export function EvalRunDetailRoute() {
const { runId } = useParams<{ runId: string }>()
if (!runId) return null
return (
<AgentObservabilityProvider baseUrl="https://observability.example.com/api">
<EvalRunDetailPage
runId={runId}
// Omit onCaseClick to use the built-in drawer; provide it to
// route to a standalone case page instead.
/>
</AgentObservabilityProvider>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
runIdrequired | string | — | The run to load and display. Typically read from the route. |
onCaseClick | (caseId: string) => void | — | Called when a row in the cases table is clicked. When omitted, the page opens a Sheet drawer with EvalCaseDetailPage inline; when provided, the drawer is suppressed so you can route to a full page instead. |
Evals Page
Tabular index of eval runs across your pytest / vitest suites. Pass-rate meters, framework badges, CI commit trail, and drill-in navigation.
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.