UI componentsPages
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.
Preview
Loading eval case detail preview…
Installation
pnpm dlx agent-observability-ui@latest add eval-case-detail-pagenpx agent-observability-ui@latest add eval-case-detail-pageyarn dlx agent-observability-ui@latest add eval-case-detail-pagebunx --bun agent-observability-ui@latest add eval-case-detail-pageUsage
import { AgentObservabilityProvider } from '@/lib/observability-provider'
import { EvalCaseDetailPage } from '@/components/eval-case-detail-page'
import { useNavigate, useParams } from 'react-router'
export function EvalCaseRoute() {
const { runId, caseId } = useParams<{ runId: string; caseId: string }>()
const navigate = useNavigate()
if (!runId || !caseId) return null
return (
<AgentObservabilityProvider baseUrl="https://observability.example.com/api">
<EvalCaseDetailPage
runId={runId}
caseId={caseId}
onBack={() => navigate(`/evals/${runId}`)}
/>
</AgentObservabilityProvider>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
runIdrequired | string | — | Run that owns the case. |
caseIdrequired | string | — | The case to load. |
onBack | () => void | — | Handler for the drawer close / back-to-run action. Omit to render without a back control. |
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.
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.