UI componentsPages
Evals Page
Tabular index of eval runs across your pytest / vitest suites. Pass-rate meters, framework badges, CI commit trail, and drill-in navigation.
Preview
Loading evals page preview…
Installation
pnpm dlx agent-observability-ui@latest add evals-pagenpx agent-observability-ui@latest add evals-pageyarn dlx agent-observability-ui@latest add evals-pagebunx --bun agent-observability-ui@latest add evals-pageUsage
import { AgentObservabilityProvider } from '@/lib/observability-provider'
import { EvalsPage } from '@/components/evals-page'
import { useNavigate } from 'react-router'
export function EvalsRoute() {
const navigate = useNavigate()
return (
<AgentObservabilityProvider baseUrl="https://observability.example.com/api">
<EvalsPage onRunClick={(id) => navigate(`/evals/${id}`)} />
</AgentObservabilityProvider>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
onRunClick | (runId: string) => void | — | Fires when a row is clicked. Wire it up to your router for navigation to the eval-run detail page. Omit to render a non-interactive list. |
Session Detail Page
Full drill-in view for a single session. Combines the session header, a tabbed timeline / transcript / events / config / performance layout, and the recording player.
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.