Agent Observability
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-page
npx agent-observability-ui@latest add eval-run-detail-page
yarn dlx agent-observability-ui@latest add eval-run-detail-page
bunx --bun agent-observability-ui@latest add eval-run-detail-page

Usage

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

PropTypeDefaultDescription
runIdrequiredstringThe run to load and display. Typically read from the route.
onCaseClick(caseId: string) => voidCalled 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.

On this page