+
+
= 0.5 ? 'var(--status-success)' : 'var(--status-failure)',
+ }}
+ />
+
+
{pct}%
+
+ );
+ },
+ },
+ {
+ title: 'Duration',
+ key: 'duration',
+ align: 'right',
+ render: (_: unknown, run: Run) => (
+
{formatDuration(runDurationMs(run))}
+ ),
+ },
+ {
+ title: 'Models',
+ key: 'models',
+ render: (_: unknown, run: Run) => {
+ const models = run.summary?.performance_metrics?.models;
+ if (!Array.isArray(models) || models.length === 0) return
- ;
+ return
{models.join(', ')} ;
+ },
+ },
+ ];
+
+ return (
+
+
+ rowKey="runId"
+ columns={columns}
+ dataSource={rows}
+ pagination={{ pageSize: 10, hideOnSinglePage: true }}
+ size="small"
+ onRow={run => ({
+ onClick: () => onSelectRun?.(run.runId),
+ style: { cursor: onSelectRun ? 'pointer' : 'default' },
+ })}
+ />
+
+ );
+};
+
+const tableStyle = css`
+ .ant-table {
+ background: var(--bg-surface);
+ border: 1px solid var(--border-default);
+ border-radius: 8px;
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+ }
+
+ .ant-table-thead > tr > th {
+ background: var(--bg-elevated);
+ color: var(--text-primary);
+ font-weight: 600;
+ border-bottom: 2px solid var(--border-default);
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ padding: 12px 16px;
+ }
+
+ .ant-table-tbody > tr {
+ cursor: pointer;
+ transition: all 0.2s ease;
+ border-bottom: 1px solid var(--border-subtle);
+ border-left: 4px solid transparent;
+ background: transparent !important;
+ outline: 2px solid transparent;
+ outline-offset: -2px;
+
+ &:hover {
+ border-left-color: var(--accent-primary);
+ outline-color: var(--accent-primary);
+ background: transparent !important;
+ }
+ }
+
+ .ant-table-tbody > tr > td {
+ padding: 12px 16px;
+ color: var(--text-secondary);
+ background: transparent !important;
+ }
+
+ .ant-table-tbody > tr:hover > td {
+ background: transparent !important;
+ }
+
+ .ant-pagination .ant-pagination-item a,
+ .ant-pagination .ant-pagination-item-link {
+ color: var(--text-secondary);
+ }
+
+ .ant-pagination .ant-pagination-item-active {
+ background: var(--bg-elevated);
+ border-color: var(--accent-primary);
+ }
+
+ .ant-pagination .ant-pagination-item-active a {
+ color: var(--accent-primary);
+ }
+`;
+
+const monoStyle = css`
+ font-family: var(--font-mono);
+ font-size: 0.8125rem;
+ color: var(--text-secondary);
+`;
+
+const statusStyle = css`
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ text-transform: capitalize;
+ font-size: 0.8125rem;
+ color: var(--text-primary);
+`;
+
+const dotStyle = css`
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ display: inline-block;
+`;
+
+const evalSetCellStyle = css`
+ color: var(--text-primary);
+ font-size: 0.8125rem;
+`;
+
+const agentCellStyle = css`
+ font-family: var(--font-mono);
+ font-size: 0.8125rem;
+ color: var(--accent-primary);
+`;
+
+const countsStyle = css`
+ display: inline-flex;
+ gap: 8px;
+ font-family: var(--font-mono);
+ font-size: 0.8125rem;
+ font-weight: 600;
+`;
+
+const barCellStyle = css`
+ display: flex;
+ align-items: center;
+ gap: 8px;
+`;
+
+const barTrackStyle = css`
+ width: 64px;
+ height: 6px;
+ border-radius: 3px;
+ background: var(--bg-elevated);
+ overflow: hidden;
+`;
+
+const barFillStyle = css`
+ height: 100%;
+ border-radius: 3px;
+ transition: width 0.3s ease;
+`;
+
+const mutedStyle = css`
+ color: var(--text-tertiary);
+`;
+
+const modelsStyle = css`
+ font-family: var(--font-mono);
+ font-size: 0.75rem;
+ color: var(--text-tertiary);
+`;
diff --git a/ui/src/components/runs/RunsView.tsx b/ui/src/components/runs/RunsView.tsx
new file mode 100644
index 0000000..3c9d1c5
--- /dev/null
+++ b/ui/src/components/runs/RunsView.tsx
@@ -0,0 +1,376 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { css } from '@emotion/react';
+import { Segmented, Select } from 'antd';
+import { RefreshCw, History, AlertCircle } from 'lucide-react';
+import type { Run } from '../../lib/types';
+import { listRuns, StorageUnavailableError } from '../../api/client';
+import {
+ groupRuns,
+ metricNamesAcross,
+ passRate,
+ sortByCreatedAsc,
+ type GroupBy,
+} from './runHistory';
+import { PassRateTrendChart } from './PassRateTrendChart';
+import { PerMetricTrendChart } from './PerMetricTrendChart';
+import { RunsHistoryTable } from './RunsHistoryTable';
+import { RunDetailView } from './RunDetailView';
+
+const ALL_GROUPS = '__all__';
+
+export const RunsView: React.FC = () => {
+ const [runs, setRuns] = useState
([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [storageUnavailable, setStorageUnavailable] = useState(false);
+ const [groupBy, setGroupBy] = useState('evalSet');
+ const [selectedGroup, setSelectedGroup] = useState(ALL_GROUPS);
+ const [detailRunId, setDetailRunId] = useState(null);
+
+ // Group keys differ per dimension, so reset the picker to "all" when the
+ // grouping dimension changes to avoid pointing at a now-nonexistent group.
+ const changeGroupBy = (next: GroupBy) => {
+ setGroupBy(next);
+ setSelectedGroup(ALL_GROUPS);
+ };
+
+ const load = async () => {
+ setLoading(true);
+ setError(null);
+ setStorageUnavailable(false);
+ try {
+ const fetched = await listRuns({ limit: 200 });
+ setRuns(fetched);
+ } catch (err) {
+ if (err instanceof StorageUnavailableError) {
+ setStorageUnavailable(true);
+ } else {
+ setError(err instanceof Error ? err.message : 'Failed to load runs');
+ }
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ load();
+ }, []);
+
+ const groups = useMemo(() => groupRuns(runs, groupBy), [runs, groupBy]);
+
+ const selectedRuns = useMemo(() => {
+ if (selectedGroup === ALL_GROUPS) return runs;
+ return groups.find(g => g.group.key === selectedGroup)?.runs ?? [];
+ }, [runs, groups, selectedGroup]);
+
+ const trendRuns = useMemo(() => sortByCreatedAsc(selectedRuns), [selectedRuns]);
+
+ const stats = useMemo(() => {
+ const rates = trendRuns.map(passRate).filter((r): r is number => r !== null);
+ const latest = rates.length ? rates[rates.length - 1] : null;
+ const avg = rates.length ? rates.reduce((a, b) => a + b, 0) / rates.length : null;
+ return {
+ total: selectedRuns.length,
+ latest,
+ avg,
+ metrics: metricNamesAcross(selectedRuns).length,
+ };
+ }, [selectedRuns, trendRuns]);
+
+ if (detailRunId) {
+ return setDetailRunId(null)} />;
+ }
+
+ return (
+
+
+
+
Run history
+
+
+ {runs.length > 0 && (
+
+ value={groupBy}
+ onChange={changeGroupBy}
+ options={[
+ { value: 'evalSet', label: 'Eval set' },
+ { value: 'agent', label: 'Agent' },
+ ]}
+ />
+ )}
+ {groups.length > 0 && (
+ ({
+ value: g.group.key,
+ label: `${g.group.label} (${g.runs.length})`,
+ })),
+ ]}
+ />
+ )}
+
+
+
+
+
+ {storageUnavailable && (
+
+
+
+ Run history requires the durable storage backend. Start the server with{' '}
+ AGENTEVALS_STORAGE_BACKEND=postgres and AGENTEVALS_DATABASE_URL{' '}
+ set, then run an evaluation to populate it.
+
+
+ )}
+
+ {error && (
+
+ )}
+
+ {loading &&
Loading runs...
}
+
+ {!loading && !storageUnavailable && !error && runs.length === 0 && (
+
+
+
No evaluation runs recorded yet.
+
Run an evaluation and it will appear here, tracked over time.
+
+ )}
+
+ {!loading && !storageUnavailable && runs.length > 0 && (
+ <>
+
+
+
+
+
+
+
+ )}
+
= ({ label, value, accent }) => {
+ const color =
+ accent === 'failure'
+ ? 'var(--status-failure)'
+ : accent === 'success'
+ ? 'var(--status-success)'
+ : 'var(--accent-primary)';
+ return (
+
+
+ {value}
+
+
{label}
+
RunGroup> = {
+ evalSet: evalSetGroup,
+ agent: agentGroup,
+};
+
+export interface GroupedRuns {
+ group: RunGroup;
+ runs: Run[];
+}
+
+// Returns groups sorted by run count desc, so the busiest group surfaces first.
+export function groupRuns(runs: Run[], groupBy: GroupBy = 'evalSet'): GroupedRuns[] {
+ const grouper = GROUPERS[groupBy];
+ const byKey = new Map();
+ for (const run of runs) {
+ const group = grouper(run);
+ const existing = byKey.get(group.key);
+ if (existing) existing.runs.push(run);
+ else byKey.set(group.key, { group, runs: [run] });
+ }
+ return [...byKey.values()].sort((a, b) => b.runs.length - a.runs.length);
+}
+
+// Pass rate over decided (pass/fail) results. Errored/skipped are excluded from
+// the denominator so a config that only errors doesn't read as 0% quality.
+// Returns null when nothing was decided, so trend lines render a gap rather
+// than a misleading zero.
+export function passRate(run: Run): number | null {
+ const counts = run.summary?.result_counts;
+ if (!counts) return null;
+ const decided = counts.passed + counts.failed;
+ if (decided === 0) return null;
+ return counts.passed / decided;
+}
+
+export function runDurationMs(run: Run): number | null {
+ if (!run.startedAt || !run.finishedAt) return null;
+ const ms = Date.parse(run.finishedAt) - Date.parse(run.startedAt);
+ return Number.isFinite(ms) && ms >= 0 ? ms : null;
+}
+
+export function formatDuration(ms: number | null): string {
+ if (ms == null) return '-';
+ if (ms < 1000) return `${ms} ms`;
+ const seconds = ms / 1000;
+ if (seconds < 60) return `${seconds.toFixed(1)}s`;
+ const minutes = Math.floor(seconds / 60);
+ return `${minutes}m ${Math.round(seconds % 60)}s`;
+}
+
+export function formatTimestamp(iso: string): string {
+ const date = new Date(iso);
+ if (Number.isNaN(date.getTime())) return iso;
+ return date.toLocaleString(undefined, {
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ });
+}
+
+// Oldest first, so trends read left-to-right as time advances.
+export function sortByCreatedAsc(runs: Run[]): Run[] {
+ return [...runs].sort((a, b) => Date.parse(a.createdAt) - Date.parse(b.createdAt));
+}
+
+export function runAgents(run: Run): string[] {
+ const agents = run.summary?.agents;
+ return Array.isArray(agents) ? agents : [];
+}
+
+// Union of agent identities (service.name) across runs, ordered by frequency so
+// the most active agent leads the legend. Used to draw one trend line per agent.
+export function agentNamesAcross(runs: Run[]): string[] {
+ const frequency = new Map();
+ for (const run of runs) {
+ for (const agent of runAgents(run)) {
+ frequency.set(agent, (frequency.get(agent) ?? 0) + 1);
+ }
+ }
+ return [...frequency.entries()].sort((a, b) => b[1] - a[1]).map(([name]) => name);
+}
+
+// Union of evaluator names seen across a set of runs, ordered by how often they
+// appear so the most consistently-tracked metrics lead the legend.
+export function metricNamesAcross(runs: Run[]): string[] {
+ const frequency = new Map();
+ for (const run of runs) {
+ const perMetric = run.summary?.per_metric;
+ if (!perMetric) continue;
+ for (const name of Object.keys(perMetric)) {
+ frequency.set(name, (frequency.get(name) ?? 0) + 1);
+ }
+ }
+ return [...frequency.entries()].sort((a, b) => b[1] - a[1]).map(([name]) => name);
+}
+
+export const STATUS_COLORS: Record = {
+ succeeded: 'var(--status-success)',
+ failed: 'var(--status-failure)',
+ cancelled: 'var(--text-tertiary)',
+ running: 'var(--accent-primary)',
+ queued: 'var(--text-secondary)',
+};
+
+// Canvas (chart.js) can't read CSS variables, so trend charts use literal
+// theme-matched hex values; DOM elements keep using the CSS variables above.
+export const CHART_COLORS = {
+ passRate: '#7cff6b',
+ passRateFill: 'rgba(124, 255, 107, 0.12)',
+ grid: 'rgba(209, 213, 219, 0.12)',
+ text: 'rgb(168, 178, 193)',
+};
+
+export const METRIC_PALETTE = [
+ '#A855F7',
+ '#36a2eb',
+ '#ff9f43',
+ '#7cff6b',
+ '#ff5757',
+ '#ffce56',
+ '#4bc0c0',
+ '#c77dff',
+ '#f78fb3',
+];
diff --git a/ui/src/components/sidebar/Sidebar.tsx b/ui/src/components/sidebar/Sidebar.tsx
index 31ee52d..1de3150 100644
--- a/ui/src/components/sidebar/Sidebar.tsx
+++ b/ui/src/components/sidebar/Sidebar.tsx
@@ -1,12 +1,12 @@
import React, { useRef, useState } from 'react';
import { css } from '@emotion/react';
-import { Radio, Play, FileJson, Bug } from 'lucide-react';
+import { Radio, Play, FileJson, Bug, History } from 'lucide-react';
import { useTraceContext } from '../../context/TraceContext';
import type { ViewType } from '../../lib/types';
import { BugReportModal } from '../bug-report/BugReportModal';
import { loadBugReport } from '../../api/client';
-type SidebarSection = 'streaming' | 'offline' | 'builder';
+type SidebarSection = 'streaming' | 'offline' | 'builder' | 'runs';
function getActiveSection(currentView: ViewType): SidebarSection | null {
switch (currentView) {
@@ -17,6 +17,7 @@ function getActiveSection(currentView: ViewType): SidebarSection | null {
case 'comparison':
return 'offline';
case 'builder': return 'builder';
+ case 'runs': return 'runs';
default: return null;
}
}
@@ -67,6 +68,14 @@ export const Sidebar: React.FC = () => {
Evaluations
+ actions.setCurrentView('runs')}
+ >
+
+
actions.setCurrentView('builder')}
diff --git a/ui/src/components/streaming/LiveStreamingView.tsx b/ui/src/components/streaming/LiveStreamingView.tsx
index 85d229b..9f1758b 100644
--- a/ui/src/components/streaming/LiveStreamingView.tsx
+++ b/ui/src/components/streaming/LiveStreamingView.tsx
@@ -441,7 +441,12 @@ export function LiveStreamingView() {
if (import.meta.env.DEV) {
console.log('Fetching traces for all sessions');
}
+ // Include the golden alongside the other sessions so its performance is
+ // plotted as a reference in the charts. It's tagged via goldenTraceId so
+ // the results view keeps it out of pass/fail scoring (scoring it against
+ // the eval set derived from itself is a trivial pass).
const sessionIds = Array.from(activeSessions.keys());
+ const goldenTraceId = activeSessions.get(selectedGoldenId)?.traceId ?? null;
const traceFiles = await Promise.all(
sessionIds.map(async (sessionId) => {
@@ -480,6 +485,7 @@ export function LiveStreamingView() {
actions.setEvaluationOrigin('streaming');
actions.setTraceFiles(validTraceFiles);
actions.setEvalSet(evalSetFile);
+ actions.setGoldenTraceId(goldenTraceId);
actions.setCurrentView('upload');
} catch (error) {
diff --git a/ui/src/config.ts b/ui/src/config.ts
index daf7a2c..5346f1f 100644
--- a/ui/src/config.ts
+++ b/ui/src/config.ts
@@ -13,6 +13,7 @@ export const config = {
metrics: `${API_BASE_URL}/api/metrics`,
evaluate: `${API_BASE_URL}/api/evaluate`,
evaluateStream: `${API_BASE_URL}/api/evaluate/stream`,
+ runs: `${API_BASE_URL}/api/runs`,
validateEvalSet: `${API_BASE_URL}/api/validate/eval-set`,
streamingCreateEvalSet: `${API_BASE_URL}/api/streaming/create-eval-set`,
streamingGetTrace: `${API_BASE_URL}/api/streaming/get-trace`,
diff --git a/ui/src/context/TraceContext.tsx b/ui/src/context/TraceContext.tsx
index dee1d79..aeb52b2 100644
--- a/ui/src/context/TraceContext.tsx
+++ b/ui/src/context/TraceContext.tsx
@@ -32,6 +32,9 @@ export interface TraceState {
currentView: ViewType;
evaluationOrigin: ViewType | null;
selectedTraceId: string | null;
+ // Trace id of the golden/reference session in the current results, if any.
+ // Plotted in the performance charts but excluded from pass/fail scoring.
+ goldenTraceId: string | null;
version: string | null;
// Streaming state
@@ -63,6 +66,7 @@ export interface TraceContextType {
removeSession: (sessionId: string) => void;
clearAllSessions: () => void;
selectTrace: (traceId: string | null) => void;
+ setGoldenTraceId: (traceId: string | null) => void;
clearResults: () => void;
// Annotation queue actions
diff --git a/ui/src/context/TraceProvider.tsx b/ui/src/context/TraceProvider.tsx
index 556bee1..c5e3d0a 100644
--- a/ui/src/context/TraceProvider.tsx
+++ b/ui/src/context/TraceProvider.tsx
@@ -30,6 +30,7 @@ export const TraceProvider: React.FC = ({ children }) => {
currentView: 'welcome',
evaluationOrigin: null,
selectedTraceId: null,
+ goldenTraceId: null,
version: null,
streamingSessions: new Map(),
annotationQueues: [],
@@ -292,11 +293,15 @@ export const TraceProvider: React.FC = ({ children }) => {
selectTrace: (traceId: string | null) =>
setState((prev) => ({ ...prev, selectedTraceId: traceId })),
+ setGoldenTraceId: (traceId: string | null) =>
+ setState((prev) => ({ ...prev, goldenTraceId: traceId })),
+
clearResults: () =>
setState((prev) => ({
...prev,
results: [],
errors: [],
+ goldenTraceId: null,
currentView: 'upload',
})),
diff --git a/ui/src/lib/types.ts b/ui/src/lib/types.ts
index 02a26ad..49cd295 100644
--- a/ui/src/lib/types.ts
+++ b/ui/src/lib/types.ts
@@ -233,7 +233,100 @@ export interface EvalSet {
}
// View types
-export type ViewType = 'welcome' | 'upload' | 'dashboard' | 'inspector' | 'comparison' | 'builder' | 'streaming' | 'annotation-queue';
+export type ViewType = 'welcome' | 'upload' | 'dashboard' | 'inspector' | 'comparison' | 'builder' | 'streaming' | 'annotation-queue' | 'runs';
+
+// Persisted run history (durable storage, GET /api/runs)
+export type RunStatus = 'queued' | 'running' | 'succeeded' | 'failed' | 'cancelled';
+
+export interface ResultCounts {
+ passed: number;
+ failed: number;
+ errored: number;
+ skipped: number;
+}
+
+// One entry per evaluator in summary.per_metric. avg_score is null when no
+// invocation of that evaluator produced a numeric score (e.g. it only errored).
+export interface PerMetricSummary extends ResultCounts {
+ avg_score: number | null;
+}
+
+// summary is a free-form dict on the backend, so its keys stay snake_case on
+// the wire (the camelCase alias generator only renames declared model fields).
+export interface RunSummary {
+ trace_count: number;
+ result_counts: ResultCounts;
+ per_metric?: Record;
+ agents?: string[];
+ errors?: string[];
+ performance_metrics?: { models?: string[] } & Record;
+}
+
+// spec.evalSet/evalConfig are stored as raw dicts, so their inner keys keep
+// the original snake_case (e.g. ADK eval_set_id) rather than being camelCased.
+export interface RunEvaluatorConfig {
+ name?: string;
+ type?: string;
+ threshold?: number;
+ judge_model?: string;
+ trajectory_match_type?: string;
+}
+
+export interface RunSpecSummary {
+ approach?: string;
+ evalSet?: { eval_set_id?: string; name?: string; eval_cases?: unknown[] } | null;
+ evalConfig?: { evaluators?: RunEvaluatorConfig[] } & Record;
+ target?: { kind?: string; trace_count?: number; trace_files?: string[] } & Record;
+}
+
+// One persisted Result row (GET /api/runs/{id}/results). Top-level fields are
+// camelCased by the API; the free-form `details` keeps snake_case inner keys.
+export type ResultStatus2 = 'passed' | 'failed' | 'errored' | 'skipped';
+
+export interface PersistedComparison {
+ invocation_id?: string | null;
+ matched?: boolean;
+ expected?: ToolCallComparison[];
+ actual?: ToolCallComparison[];
+}
+
+export interface ResultDetails {
+ comparisons?: PersistedComparison[];
+ [key: string]: unknown;
+}
+
+export interface RunResultRow {
+ resultId: string;
+ runId: string;
+ evalSetItemId: string;
+ evalSetItemName: string;
+ evaluatorName: string;
+ evaluatorType: string;
+ status: ResultStatus2;
+ score: number | null;
+ perInvocationScores: (number | null)[];
+ traceId?: string | null;
+ spanId?: string | null;
+ details?: ResultDetails;
+ errorText?: string | null;
+ tokensUsed?: Record | null;
+ latencyMs?: number | null;
+ createdAt: string;
+}
+
+export interface Run {
+ runId: string;
+ status: RunStatus;
+ spec: RunSpecSummary;
+ attempt?: number;
+ workerId?: string | null;
+ error?: string | null;
+ summary?: RunSummary | null;
+ createdAt: string;
+ startedAt?: string | null;
+ finishedAt?: string | null;
+ cancelRequested?: boolean;
+}
// Metric metadata type
export interface MetricMetadata {