@post-print/agent-test 2.0.11 → 2.2.0

package/dist/viewer/v2-client.js

@@ -4,9 +4,11 @@ import { useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/rea
 import { createRootRoute, createRoute, createRouter, Link, Outlet, useNavigate, } from "@tanstack/react-router";
 import { createContext, useCallback, useContext, useEffect, useId, useRef, useState, } from "react";
 import Markdown from "react-markdown";
-import { viewerApi } from "./generated-api.js";
-import { assertionComparison, conversationPlaceholder, preferredExecutionId, stripAnsi, } from "./presentation.js";
-const SENTENCE_BOUNDARY = /(?<=[.!?])\s+/;
+import { assertionComparison, conversationPlaceholder, formatRunDate, median, preferredTestExecutionId, stripAnsi, testRunStatus, unwrapShellCommand, } from "./presentation.js";
+import { RunInboxPage, RunPage } from "./run-inbox.js";
+import { ToolImages, toolImages } from "./tool-images.js";
+import { cancelExecution, fetchExecution as fetchExecutionRecord, startSuite, startTest, startTestGroup, useCatalog, useExecutionHistory, } from "./viewer-queries.js";
+const fetchExecution = (id) => fetchExecutionRecord(id);
 const LOCAL_PATH_LINK = /\[([^\]]+)\]\(<local-path>[^)]*\)/g;
 const runningPulse = stylex.keyframes({
     "0%, 60%, 100%": { opacity: 0.3, transform: "translateY(0)" },
@@ -20,7 +22,7 @@ const rootRoute = createRootRoute({ component: ViewerLayout });
 const indexRoute = createRoute({
     getParentRoute: () => rootRoute,
     path: "/",
-    component: TestCatalogPage,
+    component: RunInboxPage,
 });
 const testRoute = createRoute({
     getParentRoute: () => rootRoute,
@@ -36,7 +38,7 @@ const testRoute = createRoute({
 const executionRoute = createRoute({
     getParentRoute: () => rootRoute,
     path: "/executions/$executionId",
-    component: ExecutionPage,
+    component: ExecutionRunPage,
 });
 const compareRoute = createRoute({
     getParentRoute: () => rootRoute,
@@ -374,6 +376,14 @@ const styles = stylex.create({
         border: "1px solid transparent",
         backgroundColor: { default: "transparent", ":hover": "var(--panel)" },
     },
+    batchRunLink: {
+        justifySelf: "start",
+        marginTop: "0.75rem",
+        color: { default: "var(--muted)", ":hover": "var(--text)" },
+        fontSize: "0.78rem",
+        textDecoration: "none",
+    },
+    runsLink: { display: "flex", alignItems: "center", gap: "0.5rem", fontWeight: 650 },
     navItemHeader: {
         display: "grid",
         gridTemplateColumns: "0.65rem minmax(0, 1fr)",
@@ -590,7 +600,7 @@ const styles = stylex.create({
     },
     quietHeader: {
         display: "flex",
-        justifyContent: "flex-end",
+        justifyContent: "flex-start",
         marginBottom: "0.75rem",
     },
     statusPanel: {
@@ -622,6 +632,47 @@ const styles = stylex.create({
         gap: "0.7rem",
     },
     attemptTitle: { fontSize: "0.84rem", lineHeight: 1.4 },
+    verdictPanel: {
+        display: "grid",
+        gap: "0.55rem",
+        padding: "0.7rem 0.8rem",
+        borderRadius: 10,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "var(--border)",
+        backgroundColor: "var(--panel-2)",
+    },
+    verdictPass: { borderColor: "oklch(0.79 0.16 155 / 0.45)", backgroundColor: "var(--pass-soft)" },
+    verdictFail: { borderColor: "oklch(0.73 0.18 25 / 0.5)", backgroundColor: "var(--fail-soft)" },
+    verdictHeadline: { margin: 0, fontSize: "0.92rem", fontWeight: 720, color: "var(--text)" },
+    verdictMetrics: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(7.5rem, 1fr))",
+        gap: "0.4rem 1rem",
+        margin: 0,
+    },
+    verdictMetric: { display: "grid", gap: "0.1rem", minWidth: 0 },
+    verdictAttachments: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "0.25rem 1rem",
+        margin: 0,
+        padding: 0,
+        listStyle: "none",
+        fontSize: "0.8rem",
+        overflowWrap: "anywhere",
+    },
+    verdictMetricValue: {
+        display: "grid",
+        margin: 0,
+        color: "var(--text)",
+        fontSize: "0.86rem",
+        fontWeight: 650,
+        fontVariantNumeric: "tabular-nums",
+    },
+    verdictMetricMedian: { color: "var(--subtle)", fontSize: "0.68rem", fontWeight: 500 },
+    verdictPassedChecks: { display: "grid", gap: "0.45rem" },
+    verdictCount: { color: "var(--muted)", fontWeight: 560 },
     resultPanel: {
         display: "grid",
         gap: "0.55rem",
@@ -712,9 +763,52 @@ const styles = stylex.create({
     },
     conversationHeader: {
         display: "flex",
-        alignItems: "center",
+        flexWrap: "wrap",
+        alignItems: "baseline",
         justifyContent: "flex-start",
-        gap: "0.75rem",
+        gap: "0.25rem 0.75rem",
+    },
+    sectionIntro: { margin: 0, color: "var(--subtle)", fontSize: "0.72rem", lineHeight: 1.4 },
+    ranRow: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "0.35rem" },
+    ranLabel: {
+        color: "var(--subtle)",
+        fontSize: "0.66rem",
+        fontWeight: 700,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+    },
+    ranChip: {
+        padding: "0.12rem 0.45rem",
+        borderRadius: 999,
+        backgroundColor: "var(--panel-3)",
+        color: "var(--muted)",
+        fontSize: "0.72rem",
+    },
+    judgeOutcomeSource: {
+        gridColumn: 2,
+        margin: 0,
+        color: "var(--subtle)",
+        fontSize: "0.68rem",
+        lineHeight: 1.4,
+    },
+    judgeReason: { margin: 0, color: "var(--muted)", fontSize: "0.74rem", lineHeight: 1.5 },
+    judgeAskedLabel: {
+        marginRight: "0.35rem",
+        color: "var(--subtle)",
+        fontSize: "0.61rem",
+        fontWeight: 750,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+    },
+    judgeContextDisclosure: {
+        borderTop: "1px solid var(--border)",
+        paddingTop: "0.45rem",
+    },
+    judgeContextSummary: {
+        cursor: "pointer",
+        color: { default: "var(--muted)", ":hover": "var(--text)" },
+        fontSize: "0.74rem",
+        fontWeight: 650,
     },
     runTabs: { display: "inline-flex", alignItems: "center", gap: "0.12rem" },
     runTab: {
@@ -846,15 +940,11 @@ const styles = stylex.create({
         display: "grid",
         justifySelf: "stretch",
         gap: "0.45rem",
-        padding: "0.7rem",
-        border: "1px solid oklch(0.75 0.12 175 / 0.3)",
-        borderRadius: 10,
-        backgroundColor: "var(--accent-soft)",
     },
     judgeQuestionText: {
         margin: 0,
-        color: "var(--text)",
-        fontSize: "0.79rem",
+        color: "var(--muted)",
+        fontSize: "0.76rem",
         lineHeight: 1.5,
     },
     judgeContext: {
@@ -863,14 +953,6 @@ const styles = stylex.create({
         paddingTop: "0.55rem",
         borderTop: "1px solid oklch(0.75 0.12 175 / 0.22)",
     },
-    judgeContextHeader: {
-        display: "flex",
-        alignItems: "baseline",
-        justifyContent: "space-between",
-        gap: "0.75rem",
-        color: "var(--text)",
-        fontSize: "0.7rem",
-    },
     judgeContextNote: { margin: 0, color: "var(--muted)", fontSize: "0.68rem", lineHeight: 1.4 },
     judgeContextGroup: { display: "grid", gap: "0.35rem" },
     judgeContextGroupHeading: {
@@ -944,13 +1026,12 @@ const styles = stylex.create({
     },
     judgeResponse: {
         display: "grid",
-        justifySelf: "start",
+        justifySelf: "stretch",
         gap: "0.4rem",
         padding: "0.65rem 0.7rem",
         border: "1px solid var(--border)",
         borderRadius: 10,
         backgroundColor: "var(--panel-2)",
-        maxWidth: "78%",
     },
     judgeResponseHeading: {
         margin: 0,
@@ -1044,7 +1125,7 @@ const styles = stylex.create({
     },
     criteriaList: { display: "grid", gap: "0.55rem", margin: 0, padding: 0, listStyle: "none" },
     criterion: { display: "flex", gap: "0.6rem", color: "var(--muted)", fontSize: "0.82rem" },
-    criterionIcon: { color: "var(--accent)", fontWeight: 800 },
+    criterionIcon: { color: "var(--subtle)", fontWeight: 800 },
     passReasonList: { display: "grid", gap: "0.35rem", margin: 0, padding: 0, listStyle: "none" },
     passReason: { display: "flex", gap: "0.5rem", color: "var(--text)", fontSize: "0.76rem" },
     passReasonIcon: { color: "var(--pass)", fontWeight: 800 },
@@ -1170,9 +1251,6 @@ function useNarrowViewer() {
     }, []);
     return narrow;
 }
-function useCatalog() {
-    return useQuery({ queryKey: ["test-catalog"], queryFn: fetchTestCatalog });
-}
 function MobileViewerHeader({ buttonRef, open, onOpen, }) {
     const catalog = useCatalog();
     return (_jsxs("header", { ...stylex.props(styles.mobileHeader), children: [_jsx("button", { ref: buttonRef, type: "button", "aria-haspopup": "dialog", "aria-controls": "mobile-test-drawer", "aria-expanded": open, "aria-label": "Open test menu", ...stylex.props(styles.buttonReset, styles.mobileMenuButton), onClick: onOpen, children: _jsx("span", { "aria-hidden": "true", children: "\u2630" }) }), _jsxs("div", { ...stylex.props(styles.mobileHeaderIdentity), children: [_jsx("span", { ...stylex.props(styles.mobileHeaderTitle), children: "Tests" }), _jsx("span", { ...stylex.props(styles.countBadge), children: catalog.data?.tests.length ?? 0 })] })] }));
@@ -1227,7 +1305,7 @@ function SidebarHeader({ mode, open, count, headingId, navigationId, onToggle, o
             onNavigate?.();
         },
     });
-    return (_jsx("header", { ...stylex.props(styles.sidebarHeader, !open && styles.sidebarHeaderCollapsed), children: open ? (_jsxs(_Fragment, { children: [_jsxs("div", { ...stylex.props(styles.sidebarTitleRow), children: [_jsxs("div", { ...stylex.props(styles.sidebarTitleIdentity), children: [_jsx("h1", { id: headingId, ...stylex.props(styles.title, styles.sidebarTitle), children: "Tests" }), _jsx("span", { ...stylex.props(styles.countBadge), children: count })] }), _jsx(SidebarToggle, { mode: mode, open: open, navigationId: navigationId, onToggle: onToggle })] }), _jsxs("div", { ...stylex.props(styles.suiteControls), children: [_jsxs("button", { type: "button", ...stylex.props(styles.buttonReset, styles.suiteRunButton), onClick: () => run.mutate(), disabled: run.isPending || count === 0, children: [_jsx("span", { "aria-hidden": "true", children: run.isPending ? "●" : "▶" }), run.isPending ? "Starting suite…" : "Run all tests"] }), _jsx(WorkerControl, {})] }), run.isError ? _jsx("p", { role: "alert", children: run.error.message }) : null] })) : (_jsx(SidebarToggle, { mode: mode, open: open, navigationId: navigationId, onToggle: onToggle })) }));
+    return (_jsx("header", { ...stylex.props(styles.sidebarHeader, !open && styles.sidebarHeaderCollapsed), children: open ? (_jsxs(_Fragment, { children: [_jsxs("div", { ...stylex.props(styles.sidebarTitleRow), children: [_jsxs("div", { ...stylex.props(styles.sidebarTitleIdentity), children: [_jsx("h1", { id: headingId, ...stylex.props(styles.title, styles.sidebarTitle), children: "Tests" }), _jsx("span", { ...stylex.props(styles.countBadge), children: count })] }), _jsx(SidebarToggle, { mode: mode, open: open, navigationId: navigationId, onToggle: onToggle })] }), _jsxs(Link, { to: "/", activeOptions: { exact: true }, ...stylex.props(styles.navLink, styles.runsLink), activeProps: stylex.props(styles.navLink, styles.runsLink, styles.active), onClick: onNavigate, children: [_jsx("span", { "aria-hidden": "true", children: "\u25F7" }), " Runs"] }), _jsxs("div", { ...stylex.props(styles.suiteControls), children: [_jsxs("button", { type: "button", ...stylex.props(styles.buttonReset, styles.suiteRunButton), onClick: () => run.mutate(), disabled: run.isPending || count === 0, children: [_jsx("span", { "aria-hidden": "true", children: run.isPending ? "●" : "▶" }), run.isPending ? "Starting suite…" : "Run all tests"] }), _jsx(WorkerControl, {})] }), run.isError ? _jsx("p", { role: "alert", children: run.error.message }) : null] })) : (_jsx(SidebarToggle, { mode: mode, open: open, navigationId: navigationId, onToggle: onToggle })) }));
 }
 function WorkerControl() {
     const { workers, setWorkers } = useContext(WorkerContext);
@@ -1264,9 +1342,6 @@ function TestLink({ test, status, onNavigate, }) {
 function TestStatus({ status }) {
     return (_jsx("span", { role: "img", "aria-label": `Latest execution: ${status}`, title: `Latest execution: ${status}`, ...stylex.props(styles.navStatus), children: _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.navStatusDot, status === "passed" && styles.navStatusDotPass, status === "failed" && styles.navStatusDotFail, status === "running" && styles.navStatusDotRunning) }) }));
 }
-function TestCatalogPage() {
-    return (_jsxs("section", { ...stylex.props(styles.hero), children: [_jsx("div", { ...stylex.props(styles.brand), children: "Test explorer" }), _jsx("h2", { ...stylex.props(styles.title), children: "Choose a test from the sidebar" }), _jsx("p", { ...stylex.props(styles.description), children: "Read what it checks, see its agents and judges, then start a run or inspect a saved execution." })] }));
-}
 function TestPage() {
     const { testId } = testRoute.useParams();
     const catalog = useCatalog();
@@ -1282,7 +1357,7 @@ function TestDetail({ test }) {
     const history = useExecutionHistory();
     const navigate = useNavigate();
     const runs = history.data?.filter((item) => item.testIds?.includes(test.id)) ?? [];
-    const selected = execution ?? preferredExecutionId(runs);
+    const selected = execution ?? preferredTestExecutionId(runs, test.id);
     const activeView = view ?? "current";
     const chooseExecution = (id) => void navigate({
         to: "/tests/$testId",
@@ -1294,7 +1369,14 @@ function TestDetail({ test }) {
         params: { testId: test.id },
         search: { execution, view: next === "current" ? undefined : next },
     });
-    return (_jsxs(_Fragment, { children: [_jsx(TestHeader, { test: test, onStarted: chooseExecution }), _jsx(TestTabs, { active: activeView, onChange: chooseView }), _jsx(TestViewPanel, { view: activeView, test: test, runs: runs, selected: selected, onChooseExecution: chooseExecution })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(TestHeader, { test: test, onStarted: chooseExecution }), _jsx(BatchRunLink, { run: runs.find((run) => run.id === selected) }), _jsx(TestTabs, { active: activeView, onChange: chooseView }), _jsx(TestViewPanel, { view: activeView, test: test, runs: runs, selected: selected, historyLoading: history.isPending, onChooseExecution: chooseExecution })] }));
+}
+/** Return path to the run inbox when this test was opened from a batch run. */
+function BatchRunLink({ run }) {
+    const count = run?.testIds?.length ?? 0;
+    if (!run || count < 2)
+        return null;
+    return (_jsxs(Link, { to: "/executions/$executionId", params: { executionId: run.id }, ...stylex.props(styles.batchRunLink), children: ["\u2190 Back to run \u00B7 ", formatRunDate(run.startedAt), " \u00B7 ", count, " tests"] }));
 }
 function TestHeader({ test, onStarted }) {
     return (_jsxs("header", { ...stylex.props(styles.hero), children: [_jsxs("div", { ...stylex.props(styles.heroTop), children: [_jsxs("div", { ...stylex.props(styles.heroCopy), children: [_jsx("div", { ...stylex.props(styles.brand), children: test.title.slice(0, -1).join(" / ") }), _jsx("h2", { ...stylex.props(styles.title), children: test.title.at(-1) }), _jsx("p", { ...stylex.props(styles.description), children: test.description ?? "This test has no additional description." })] }), _jsx(RunTestButton, { test: test, onStarted: onStarted })] }), _jsxs("div", { ...stylex.props(styles.path), children: [test.project, " \u00B7 ", test.file] })] }));
@@ -1324,16 +1406,21 @@ function handleTabKeyDown(event, active, onChange) {
     document.getElementById(`test-tab-${next.id}`)?.focus();
 }
 function TestViewPanel(props) {
-    return (_jsxs("div", { id: `test-panel-${props.view}`, role: "tabpanel", "aria-labelledby": `test-tab-${props.view}`, ...stylex.props(styles.tabPanel), children: [props.view === "setup" ? _jsx(TestResources, { test: props.test }) : null, props.view === "current" ? (_jsx(CurrentRun, { test: props.test, executionId: props.selected })) : null, props.view === "history" ? (_jsx(RunHistory, { runs: props.runs, onChoose: props.onChooseExecution })) : null] }));
+    return (_jsxs("div", { id: `test-panel-${props.view}`, role: "tabpanel", "aria-labelledby": `test-tab-${props.view}`, ...stylex.props(styles.tabPanel), children: [props.view === "setup" ? _jsx(TestResources, { test: props.test }) : null, props.view === "current" ? (_jsx(CurrentRun, { test: props.test, executionId: props.selected, loading: props.historyLoading })) : null, props.view === "history" ? (_jsx(RunHistory, { runs: props.runs, testId: props.test.id, onChoose: props.onChooseExecution })) : null] }));
+}
+function CurrentRun({ test, executionId, loading, }) {
+    return (_jsx("section", { ...stylex.props(styles.tabSection), children: loading && !executionId ? (_jsx("p", { ...stylex.props(styles.empty), children: "Loading runs\u2026" })) : executionId ? (_jsx(TestExecution, { id: executionId, test: test })) : (_jsx("p", { ...stylex.props(styles.empty), children: "No runs yet. Start this test to see its progress here." })) }));
 }
-function CurrentRun({ test, executionId }) {
-    return (_jsx("section", { ...stylex.props(styles.tabSection), children: executionId ? (_jsx(TestExecution, { id: executionId, test: test })) : (_jsx("p", { ...stylex.props(styles.empty), children: "No runs yet. Start this test to see its progress here." })) }));
+function RunHistory({ runs, testId, onChoose, }) {
+    return (_jsxs("section", { ...stylex.props(styles.tabSection), children: [_jsx("div", { ...stylex.props(styles.quietHeader), children: _jsxs("span", { ...stylex.props(styles.sectionIntro), children: [runs.length, " ", pluralize(runs.length, "run"), " included this test. Each shows this test's own result."] }) }), runs.length ? (_jsx("div", { ...stylex.props(styles.historyList), children: runs.map((run) => (_jsx(HistoryItem, { run: run, testId: testId, onChoose: onChoose }, run.id))) })) : (_jsx("p", { ...stylex.props(styles.empty), children: "No saved runs for this test." }))] }));
 }
-function RunHistory({ runs, onChoose, }) {
-    return (_jsxs("section", { ...stylex.props(styles.tabSection), children: [_jsx("div", { ...stylex.props(styles.quietHeader), children: _jsxs("span", { ...stylex.props(styles.resourceCount), children: [runs.length, " executions"] }) }), runs.length ? (_jsx("div", { ...stylex.props(styles.historyList), children: runs.map((run) => (_jsx(HistoryItem, { run: run, onChoose: onChoose }, run.id))) })) : (_jsx("p", { ...stylex.props(styles.empty), children: "No saved runs for this test." }))] }));
+function HistoryItem({ run, testId, onChoose, }) {
+    const status = testRunStatus(run, testId);
+    const others = (run.testIds?.length ?? 1) - 1;
+    return (_jsxs("button", { type: "button", "aria-label": `Open ${status} execution ${run.id.slice(0, 8)}`, ...stylex.props(styles.buttonReset, styles.historyButton), onClick: () => onChoose(run.id), children: [_jsxs("span", { ...stylex.props(styles.historyIdentity), children: [_jsx("span", { ...stylex.props(styles.historyDate), children: formatRunDate(run.startedAt) }), _jsxs("span", { ...stylex.props(styles.historyId), children: [run.id.slice(0, 8), others > 0 ? ` · with ${others} other ${pluralize(others, "test")}` : ""] })] }), _jsx(StatusPill, { status: status })] }));
 }
-function HistoryItem({ run, onChoose }) {
-    return (_jsxs("button", { type: "button", "aria-label": `Open ${run.status} execution ${run.id.slice(0, 8)}`, ...stylex.props(styles.buttonReset, styles.historyButton), onClick: () => onChoose(run.id), children: [_jsxs("span", { ...stylex.props(styles.historyIdentity), children: [_jsx("span", { ...stylex.props(styles.historyDate), children: new Date(run.startedAt).toLocaleString() }), _jsx("span", { ...stylex.props(styles.historyId), children: run.id.slice(0, 8) })] }), _jsx("span", { ...stylex.props(styles.status, run.status === "passed" && styles.statusPass, run.status === "failed" && styles.statusFail, run.status === "running" && styles.statusRunning), children: run.status })] }));
+function StatusPill({ status }) {
+    return (_jsx("span", { ...stylex.props(styles.status, status === "passed" && styles.statusPass, status === "failed" && styles.statusFail, (status === "running" || status === "queued") && styles.statusRunning), children: status }));
 }
 function RunTestButton({ test, onStarted }) {
     const { workers } = useContext(WorkerContext);
@@ -1355,7 +1442,7 @@ function TestResources({ test }) {
 }
 function CriteriaSetup({ test }) {
     const criteria = testCriteria(test);
-    return (_jsxs("section", { "aria-labelledby": "setup-criteria", ...stylex.props(styles.criteriaPanel), children: [_jsx("h3", { id: "setup-criteria", ...stylex.props(styles.contentHeading), children: "Pass criteria" }), criteria.length ? (_jsx("ul", { ...stylex.props(styles.criteriaList), children: criteria.map((criterion) => (_jsxs("li", { ...stylex.props(styles.criterion), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.criterionIcon), children: "\u2713" }), _jsx("span", { children: criterion })] }, criterion))) })) : (_jsx("p", { ...stylex.props(styles.meta), children: "No explicit pass criteria are declared." }))] }));
+    return (_jsxs("section", { "aria-labelledby": "setup-criteria", ...stylex.props(styles.criteriaPanel), children: [_jsx("h3", { id: "setup-criteria", ...stylex.props(styles.contentHeading), children: "Pass criteria" }), _jsx("p", { ...stylex.props(styles.sectionIntro), children: "Every one of these must hold for the test to pass." }), criteria.length ? (_jsx("ul", { ...stylex.props(styles.criteriaList), children: criteria.map((criterion) => (_jsxs("li", { ...stylex.props(styles.criterion), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.criterionIcon), children: "\u2022" }), _jsx("span", { children: criterion })] }, criterion))) })) : (_jsx("p", { ...stylex.props(styles.meta), children: "No explicit pass criteria are declared." }))] }));
 }
 function ResourceSection({ title, description, resources, }) {
     const id = `setup-${title.toLowerCase()}`;
@@ -1366,7 +1453,7 @@ function ResourceCard({ resource }) {
     return (_jsxs("article", { ...stylex.props(styles.card, styles.resourceCard), children: [_jsx("div", { ...stylex.props(styles.resourceHeader), children: _jsx("strong", { children: resource.name }) }), _jsx(ResourceContext, { resource: resource })] }));
 }
 function WorkspaceSetup({ test }) {
-    return (_jsxs("section", { "aria-labelledby": "setup-workspace", ...stylex.props(styles.setupSection), children: [_jsxs("div", { ...stylex.props(styles.setupSectionCopy), children: [_jsx("h3", { id: "setup-workspace", ...stylex.props(styles.contentHeading), children: "Workspace" }), _jsx("p", { ...stylex.props(styles.meta), children: "Starting files and execution target for this test." })] }), _jsxs("div", { ...stylex.props(styles.workspaceRow), children: [_jsx(ResourceFact, { label: "Source folder", value: test.workspace ?? "Project directory" }), _jsx(ResourceFact, { label: "Project", value: test.project }), _jsx(ResourceFact, { label: "Test file", value: test.file })] })] }));
+    return (_jsxs("section", { "aria-labelledby": "setup-workspace", ...stylex.props(styles.setupSection), children: [_jsxs("div", { ...stylex.props(styles.setupSectionCopy), children: [_jsx("h3", { id: "setup-workspace", ...stylex.props(styles.contentHeading), children: "Workspace" }), _jsx("p", { ...stylex.props(styles.meta), children: "Each agent run starts from a fresh copy of this folder." })] }), _jsx("div", { ...stylex.props(styles.workspaceRow), children: _jsx(ResourceFact, { label: "Source folder", value: test.workspace ?? "Project directory" }) })] }));
 }
 function testCriteria(test) {
     if (test.criteria?.length)
@@ -1391,19 +1478,20 @@ function TestExecution({ id, test }) {
     const attempts = detail.data.attempts.filter((attempt) => attempt.testId === test.id);
     if (detail.data.testIds && !detail.data.testIds.includes(test.id))
         return _jsx("p", { children: "This execution does not contain this test." });
-    return (_jsx(ExecutionDetailView, { execution: { ...detail.data, attempts }, criteria: testCriteria(test) }));
+    if (attempts.length === 0 && testRunStatus(detail.data, test.id) === "skipped")
+        return (_jsx("p", { ...stylex.props(styles.empty), children: "This test was skipped in this run. Open Run history to find a run that executed it." }));
+    return (_jsx(AgentDescriptions.Provider, { value: agentDescriptions(test), children: _jsx(ExecutionDetailView, { execution: { ...detail.data, attempts }, criteria: testCriteria(test) }) }));
+}
+/** What each agent in the selected test is for, from the test's own `agent({ description })`. */
+const AgentDescriptions = createContext(new Map());
+function agentDescriptions(test) {
+    return new Map((test.resources ?? []).flatMap((resource) => resource.kind === "agent" && resource.description
+        ? [[resource.name, resource.description]]
+        : []));
 }
-function ExecutionPage() {
+function ExecutionRunPage() {
     const { executionId } = executionRoute.useParams();
-    const detail = useQuery({
-        queryKey: ["execution", executionId],
-        queryFn: () => fetchExecution(executionId),
-    });
-    if (detail.isLoading)
-        return _jsx("p", { ...stylex.props(styles.empty), children: "Loading execution\u2026" });
-    if (detail.isError || !detail.data)
-        return _jsx("p", { ...stylex.props(styles.empty), children: "Execution is unavailable." });
-    return _jsx(ExecutionDetailView, { execution: detail.data });
+    return _jsx(RunPage, { executionId: executionId }, executionId);
 }
 function ExecutionDetailView({ execution, criteria = [], }) {
     const client = useQueryClient();
@@ -1413,7 +1501,7 @@ function ExecutionDetailView({ execution, criteria = [], }) {
     });
     const stopping = execution.status === "running" && (cancel.isPending || cancel.isSuccess);
     const stopLabel = (execution.testIds?.length ?? 0) > 1 ? "Stop suite run" : "Stop this run";
-    return (_jsxs("div", { ...stylex.props(styles.statusPanel), children: [execution.status === "running" && execution.cancellable ? (_jsx("div", { ...stylex.props(styles.runControls), children: _jsx("button", { type: "button", ...stylex.props(styles.buttonReset, styles.button, styles.secondaryButton), onClick: () => cancel.mutate(), disabled: stopping, children: stopping ? "Stopping…" : stopLabel }) })) : null, cancel.isError ? _jsx("p", { role: "alert", children: "The run could not be stopped." }) : null, _jsxs("section", { ...stylex.props(styles.list), children: [execution.attempts.map((attempt) => (_jsx(AttemptCard, { attempt: attempt, criteria: criteria }, attempt.id))), execution.attempts.length === 0 ? (_jsx("p", { ...stylex.props(styles.empty), children: emptyExecutionMessage(execution, stopping) })) : null] })] }));
+    return (_jsxs("div", { ...stylex.props(styles.statusPanel), children: [execution.status === "running" && execution.cancellable ? (_jsx("div", { ...stylex.props(styles.runControls), children: _jsx("button", { type: "button", ...stylex.props(styles.buttonReset, styles.button, styles.secondaryButton), onClick: () => cancel.mutate(), disabled: stopping, children: stopping ? "Stopping…" : stopLabel }) })) : null, cancel.isError ? _jsx("p", { role: "alert", children: "The run could not be stopped." }) : null, _jsxs("section", { ...stylex.props(styles.list), children: [execution.attempts.map((attempt) => (_jsx(AttemptCard, { attempt: attempt, criteria: criteria, showTitle: false }, attempt.id))), execution.attempts.length === 0 ? (_jsx("p", { ...stylex.props(styles.empty), children: emptyExecutionMessage(execution, stopping) })) : null] })] }));
 }
 function emptyExecutionMessage(execution, stopping) {
     if (stopping)
@@ -1444,19 +1532,113 @@ function ComparePage() {
 function ComparisonColumn({ execution, label }) {
     return (_jsxs("article", { ...stylex.props(styles.card), children: [_jsxs("strong", { children: [label, ": ", execution.status] }), _jsx("p", { ...stylex.props(styles.meta), children: execution.id.slice(0, 8) }), execution.attempts.map((attempt) => (_jsx(AttemptCard, { attempt: attempt }, attempt.id)))] }));
 }
-function AttemptCard({ attempt, criteria = [] }) {
+/** `showTitle` is off on a test page, whose header already names the test. */
+function AttemptCard({ attempt, criteria = [], showTitle = true, }) {
     const { operations, output, title } = attemptPresentation(attempt, criteria);
     const agents = operations.filter((operation) => operation.kind !== "evaluation");
     const judges = operations.filter((operation) => operation.kind === "evaluation");
-    return (_jsxs("article", { ...stylex.props(styles.attemptCard), children: [_jsxs("div", { ...stylex.props(styles.row), children: [_jsxs("div", { children: [_jsx("strong", { ...stylex.props(styles.attemptTitle), children: title }), _jsxs("p", { ...stylex.props(styles.meta), children: [attempt.project || "default", " \u00B7 ", attempt.operations.length, " named", " ", pluralize(attempt.operations.length, "operation")] })] }), _jsxs("div", { ...stylex.props(styles.attemptActions), children: [attempt.status === "failed" ? (_jsx(CopyFailureButton, { attempt: attempt, criteria: criteria })) : null, _jsx("span", { ...stylex.props(styles.status, attempt.status === "passed" && styles.statusPass, attempt.status === "failed" && styles.statusFail, attempt.status === "running" && styles.statusRunning), children: attempt.status })] })] }), _jsx(OperationList, { operations: operations }), _jsx(ConversationSection, { label: "Agents", sectionOperations: agents, allOperations: operations, attempt: attempt, criteria: criteria }), _jsx(ConversationSection, { label: "Judges", sectionOperations: judges, allOperations: operations, attempt: attempt, criteria: criteria }), _jsx(TechnicalDetails, { operations: operations, output: output })] }));
+    return (_jsxs("article", { ...stylex.props(styles.attemptCard), children: [_jsxs("div", { ...stylex.props(styles.row), children: [_jsxs("div", { children: [showTitle ? _jsx("strong", { ...stylex.props(styles.attemptTitle), children: title }) : null, _jsxs("p", { ...stylex.props(styles.meta), children: [attempt.project || "default", " \u00B7 ", attempt.operations.length, " named", " ", pluralize(attempt.operations.length, "operation")] })] }), _jsxs("div", { ...stylex.props(styles.attemptActions), children: [attempt.status === "failed" ? (_jsx(CopyFailureButton, { attempt: attempt, criteria: criteria })) : null, _jsx("span", { ...stylex.props(styles.status, attempt.status === "passed" && styles.statusPass, attempt.status === "failed" && styles.statusFail, attempt.status === "running" && styles.statusRunning), children: attempt.status })] })] }), _jsx(TestVerdict, { attempt: attempt, criteria: criteria, operations: operations }), _jsx(OperationList, { operations: operations }), _jsx(ConversationSection, { label: "Judges", sectionOperations: judges, allOperations: operations, attempt: attempt }), _jsx(ConversationSection, { label: "Agents", sectionOperations: agents, allOperations: operations, attempt: attempt }), _jsx(TechnicalDetails, { operations: operations, output: output })] }));
+}
+/** Test-level outcome first: every check with its result, including judge-decided checks. */
+function TestVerdict({ attempt, criteria, operations, }) {
+    const presentations = criterionPresentations({
+        criteria,
+        explanations: judgeCriterionExplanations(criteria, operations),
+        results: attempt.criterionResults,
+        status: attempt.status,
+        errors: attempt.errors,
+    });
+    return (_jsxs("section", { "aria-label": "Test verdict", ...stylex.props(styles.verdictPanel, attempt.status === "passed" && styles.verdictPass, attempt.status === "failed" && styles.verdictFail), children: [_jsxs("p", { ...stylex.props(styles.verdictHeadline), children: [capitalize(attempt.status), _jsx("span", { ...stylex.props(styles.verdictCount), children: checkSummary(presentations, attempt.status) })] }), attempt.status === "running" ? (_jsx("p", { ...stylex.props(styles.meta), children: "The test is still running." })) : null, _jsx(VerdictMetrics, { operations: operations, reported: attempt.metrics }), _jsx(VerdictChecks, { presentations: presentations }), _jsx(UnassignedFailures, { errors: attempt.errors, presentations: presentations }), _jsx(VerdictAttachments, { attachments: attempt.attachments })] }));
+}
+const SHORT_CHECK_LIST = 3;
+/** Checks needing attention always show; passing checks fold away once the list is long. */
+function VerdictChecks({ presentations }) {
+    const checks = presentations;
+    if (checks.length <= SHORT_CHECK_LIST)
+        return _jsx(CriterionResults, { presentations: checks });
+    const attention = checks.filter((check) => check.outcome !== "passed");
+    const passed = checks.filter((check) => check.outcome === "passed");
+    return (_jsxs(_Fragment, { children: [_jsx(CriterionResults, { presentations: attention }), passed.length ? (_jsxs("details", { "data-disclosure": true, ...stylex.props(styles.verdictPassedChecks), children: [_jsxs("summary", { ...stylex.props(styles.judgeContextSummary), children: [passed.length, " passed ", pluralize(passed.length, "check")] }), _jsx(CriterionResults, { presentations: passed, label: "Passed checks" })] })) : null] }));
+}
+/** Failures no check claimed, such as a crash before the first assertion. */
+function UnassignedFailures({ errors, presentations, }) {
+    const assigned = new Set(presentations.map((item) => item.failure).filter(Boolean));
+    return errors
+        .filter((error) => !assigned.has(error.message))
+        .map((error, index) => _jsx(FailureDetails, { message: error.message ?? "Test failed" }, index));
+}
+const VERDICT_METRICS = [
+    { key: "durationMs", label: "Duration", format: formatDuration },
+    { key: "totalTokens", label: "Tokens", format: (value) => Math.round(value).toLocaleString() },
+    { key: "toolCallCount", label: "Tool calls", format: (value) => String(Math.round(value)) },
+    {
+        key: "changedPathCount",
+        label: "Files changed",
+        format: (value) => String(Math.round(value)),
+    },
+];
+/** `p95LatencyMs` → "P95 latency"; numbers keyed `…Ms` read as durations. */
+function reportedMetricRows(reported) {
+    return Object.entries(reported ?? {}).map(([key, value]) => {
+        const duration = key.endsWith("Ms");
+        const words = (duration ? key.slice(0, -2) : key).replace(/([a-z0-9])([A-Z])/g, "$1 $2");
+        return {
+            key: `reported:${key}`,
+            label: capitalize(words.toLowerCase()),
+            value: duration
+                ? formatDuration(Math.round(value))
+                : value.toLocaleString(undefined, { maximumFractionDigits: 2 }),
+        };
+    });
+}
+/** Agent totals for the attempt; a median per run when the test made several agent runs. */
+function VerdictMetrics({ operations, reported, }) {
+    const runs = operations
+        .filter((operation) => operation.kind !== "evaluation")
+        .map((operation) => operationResult([operation]));
+    const rows = VERDICT_METRICS.flatMap((metric) => {
+        const values = runs.flatMap((run) => run[metric.key] === undefined ? [] : [run[metric.key] ?? 0]);
+        if (!values.length)
+            return [];
+        const total = values.reduce((sum, value) => sum + value, 0);
+        return [{ ...metric, total, median: median(values) ?? total }];
+    });
+    const reportedRows = reportedMetricRows(reported);
+    if (!rows.length && !reportedRows.length)
+        return null;
+    const repeated = runs.length > 1;
+    return (_jsxs("dl", { "aria-label": "Run metrics", ...stylex.props(styles.verdictMetrics), children: [rows.map((row) => (_jsxs("div", { ...stylex.props(styles.verdictMetric), children: [_jsx("dt", { ...stylex.props(styles.resourceFactLabel), children: row.label }), _jsxs("dd", { ...stylex.props(styles.verdictMetricValue), children: [row.format(row.total), repeated ? (_jsxs("span", { ...stylex.props(styles.verdictMetricMedian), children: ["median ", row.format(row.median), " per run"] })) : null] })] }, row.key))), reportedRows.map((row) => (_jsxs("div", { ...stylex.props(styles.verdictMetric), children: [_jsx("dt", { ...stylex.props(styles.resourceFactLabel), children: row.label }), _jsx("dd", { ...stylex.props(styles.verdictMetricValue), children: row.value })] }, row.key)))] }));
+}
+/** Files the test attached with a path, opened from the viewer server. */
+function VerdictAttachments({ attachments }) {
+    if (!attachments?.length)
+        return null;
+    return (_jsx("ul", { "aria-label": "Attachments", ...stylex.props(styles.verdictAttachments), children: attachments.map((attachment) => (_jsxs("li", { children: [_jsx("a", { href: attachment.url, target: "_blank", rel: "noreferrer", children: attachment.name }), _jsxs("span", { ...stylex.props(styles.verdictMetricMedian), children: [" ", attachment.contentType] })] }, attachment.url))) }));
+}
+function checkSummary(presentations, status) {
+    const total = presentations.length;
+    if (!total)
+        return "";
+    const failed = presentations.filter((item) => item.outcome === "failed").length;
+    const passed = presentations.filter((item) => item.outcome === "passed").length;
+    const checks = pluralize(total, "check");
+    if (failed)
+        return ` · ${failed} of ${total} ${checks} failed`;
+    return ` · ${passed} of ${total} ${checks} passed${status === "running" ? " so far" : ""}`;
+}
+function judgeCriterionExplanations(criteria, operations) {
+    const judges = operations.filter((operation) => operation.kind === "evaluation");
+    return criteria.map((_, index) => judges
+        .map((judge) => operationCriterionExplanations(criteria, judge)[index])
+        .find((explanation) => explanation !== undefined));
 }
-function ConversationSection({ label, sectionOperations, allOperations, attempt, criteria, }) {
+function ConversationSection({ label, sectionOperations, allOperations, attempt, }) {
     const [selectedId, setSelectedId] = useState(sectionOperations[0]?.id);
     if (!sectionOperations.length && (allOperations.length > 0 || label === "Judges"))
         return null;
     const selected = sectionOperations.find((operation) => operation.id === selectedId) ?? sectionOperations[0];
     const status = attempt.status === "running" ? (selected?.status ?? attempt.status) : attempt.status;
-    return (_jsx(Conversation, { label: label, operation: selected, operations: sectionOperations, allOperations: allOperations, select: setSelectedId, status: status, attemptStatus: attempt.status, result: _jsx(AttemptResult, { attempt: attempt, criteria: criteria, operation: selected, operations: allOperations, result: selectedOperationResult(selected) }) }));
+    return (_jsx(Conversation, { label: label, operation: selected, operations: sectionOperations, allOperations: allOperations, select: setSelectedId, status: status, attemptStatus: attempt.status, result: _jsx(AttemptResult, { result: selectedOperationResult(selected) }) }));
 }
 function attemptPresentation(attempt, criteria) {
     return {
@@ -1500,21 +1682,9 @@ function operationInvocationIndex(operation) {
         return [value.invocationIndex];
     })[0];
 }
-function AttemptResult({ attempt, criteria, operation, operations, result, }) {
-    const hasJudge = operations.some((item) => item.kind === "evaluation");
-    const includeShared = attempt.status !== "running" && (operation?.kind === "evaluation" || !hasJudge);
-    const indexes = selectedCriterionIndexes({ criteria, operation, operations, includeShared });
-    return (_jsx(RunResult, { result: result, status: attempt.status, criteria: selectIndexes(criteria, indexes), explanations: selectOptionalIndexes(operationCriterionExplanations(criteria, operation), indexes), errors: attempt.errors, criterionResults: selectIndexes(attempt.criterionResults, indexes) }));
-}
-function selectedCriterionIndexes(input) {
-    const { criteria, operation, operations, includeShared } = input;
-    const recorded = operationCriterionIndexes(criteria, operation);
-    const allRecorded = new Set(operations.flatMap((item) => operationCriterionIndexes(criteria, item)));
-    if (allRecorded.size)
-        return criteria.flatMap((_, index) => recorded.includes(index) || (includeShared && !allRecorded.has(index)) ? [index] : []);
-    if (!includeShared)
-        return [];
-    return inferredRepeatedRunCriterionIndexes(criteria, operation, operations);
+/** Per-run metrics for comparing runs. Totals and checks live in the test verdict. */
+function AttemptResult({ result }) {
+    return _jsx(RunResult, { result: result });
 }
 function operationCriterionIndexes(criteria, operation) {
     return [
@@ -1534,19 +1704,6 @@ function criterionRecordIndexes(criteria, value) {
 }
 const RUN_ORDINALS = ["first", "second", "third", "fourth", "fifth"];
 const CRITERION_WORD_SEPARATOR = /[^a-z0-9]+/;
-function inferredRepeatedRunCriterionIndexes(criteria, operation, operations) {
-    if (!operation)
-        return undefined;
-    const runs = operations.filter((item) => operationIdentity(item) === operationIdentity(operation));
-    if (runs.length < 2)
-        return undefined;
-    const selected = inferredOperationOrdinal(criteria, operation) ??
-        runs.findIndex((run) => run.id === operation.id);
-    const scopes = criteria.map(criterionRunOrdinal);
-    if (selected < 0 || !scopes.some((scope) => scope !== undefined))
-        return undefined;
-    return scopes.flatMap((scope, index) => scope === undefined || scope === selected ? [index] : []);
-}
 function inferredOperationOrdinal(criteria, operation) {
     const output = operationResult([operation]).output?.trim().toLowerCase();
     if (!output)
@@ -1571,14 +1728,6 @@ function criterionRunOrdinal(criterion) {
     const index = RUN_ORDINALS.findIndex((ordinal) => normalized.includes(`${ordinal} `));
     return index < 0 ? undefined : index;
 }
-function selectIndexes(values, indexes) {
-    return indexes
-        ? indexes.flatMap((index) => (values[index] === undefined ? [] : [values[index]]))
-        : values;
-}
-function selectOptionalIndexes(values, indexes) {
-    return indexes ? indexes.map((index) => values[index]) : values;
-}
 function CopyFailureButton({ attempt, criteria }) {
     const [state, setState] = useState("idle");
     const copy = async () => {
@@ -1678,6 +1827,7 @@ function toolCallsFromOperation(value) {
                 name: call.name,
                 args: isRecord(call.args) ? call.args : undefined,
                 result: optionalString(call.result),
+                images: toolImages(call.images),
                 succeeded: typeof call.succeeded === "boolean" ? call.succeeded : undefined,
                 exitCode: optionalNumber(call.exitCode),
                 seq: optionalNumber(call.seq),
@@ -1747,6 +1897,7 @@ function liveToolEvent(record, seq) {
             name: record.name,
             args: isRecord(record.args) ? record.args : undefined,
             result: optionalString(record.result),
+            images: toolImages(record.images),
             exitCode: optionalNumber(record.exitCode),
             succeeded: typeof record.succeeded === "boolean" ? record.succeeded : undefined,
             seq,
@@ -1816,18 +1967,8 @@ function nestedNumber(value, parent, child) {
 function nestedArrayLength(value, key) {
     return isRecord(value) ? optionalArrayLength(value[key]) : undefined;
 }
-function RunResult({ result, status, criteria, explanations, errors, criterionResults, }) {
-    const presentations = criterionPresentations({
-        criteria,
-        explanations,
-        results: criterionResults,
-        status,
-        errors,
-    });
-    const assignedFailures = new Set(presentations.map((item) => item.failure).filter(Boolean));
-    return (_jsxs("section", { "aria-label": "Result", ...stylex.props(styles.resultPanel), children: [_jsx("h3", { ...stylex.props(styles.contentHeading), children: "Result" }), _jsx(ResultVerdict, { status: status }), _jsx(CriterionResults, { presentations: presentations }), errors
-                .filter((error) => !assignedFailures.has(error.message))
-                .map((error, index) => (_jsx(FailureDetails, { message: error.message ?? "Test failed" }, index))), _jsx(ResultMetrics, { result: result })] }));
+function RunResult({ result }) {
+    return (_jsxs("section", { "aria-label": "Result", ...stylex.props(styles.resultPanel), children: [_jsx("h3", { ...stylex.props(styles.contentHeading), children: "Result" }), _jsx(ResultMetrics, { result: result })] }));
 }
 function FailureDetails({ message }) {
     const comparison = assertionComparison(message);
@@ -1838,9 +1979,6 @@ function FailureDetails({ message }) {
 function AssertionValue({ label, value }) {
     return (_jsxs("div", { ...stylex.props(styles.assertionValue), children: [_jsx("dt", { ...stylex.props(styles.assertionLabel), children: label }), _jsx("dd", { ...stylex.props(styles.assertionCode), children: value || "(empty)" })] }));
 }
-function ResultVerdict({ status }) {
-    return status === "running" ? (_jsx("p", { ...stylex.props(styles.resultOutput), children: "The test is still running." })) : null;
-}
 function criterionPresentations({ criteria, explanations, results, status, errors, }) {
     const presentations = criteria.map((criterion, index) => ({
         criterion,
@@ -1857,10 +1995,10 @@ function criterionPresentations({ criteria, explanations, results, status, error
         };
     });
 }
-function CriterionResults({ presentations }) {
+function CriterionResults({ presentations, label = "Criterion results", }) {
     if (!presentations.length)
         return null;
-    return (_jsx("section", { "aria-label": "Criterion results", ...stylex.props(styles.criterionResults), children: _jsx("ul", { ...stylex.props(styles.criterionResultList), children: presentations.map((presentation) => (_jsx(CriterionResultRow, { criterion: presentation.criterion, outcome: presentation.outcome, explanation: presentation.explanation, failure: presentation.failure }, presentation.criterion))) }) }));
+    return (_jsx("section", { "aria-label": label, ...stylex.props(styles.criterionResults), children: _jsx("ul", { ...stylex.props(styles.criterionResultList), children: presentations.map((presentation) => (_jsx(CriterionResultRow, { criterion: presentation.criterion, outcome: presentation.outcome, explanation: presentation.explanation, failure: presentation.failure }, presentation.criterion))) }) }));
 }
 function criterionDisplayOutcome(input) {
     const outcome = criterionOutcome(input);
@@ -1918,9 +2056,13 @@ function ResultMetrics({ result }) {
     ];
     return (_jsx("div", { ...stylex.props(styles.metricGrid), children: metrics.map(([label, value]) => (_jsxs("div", { ...stylex.props(styles.metric), children: [_jsx("span", { ...stylex.props(styles.resourceFactLabel), children: label }), _jsx("span", { ...stylex.props(styles.metricValue), children: value })] }, label))) }));
 }
+const SECTION_INTROS = {
+    Agents: "The task each agent received and how it answered.",
+    Judges: "A separate reviewer graded the agent answers below. Its findings feed the checks above.",
+};
 function Conversation({ label, operation, operations, allOperations, select, status, attemptStatus, result, }) {
     const { timeline, judge } = conversationContent(operation, operations);
-    return (_jsx("section", { "aria-label": label, ...stylex.props(styles.conversation), children: _jsxs("div", { ...stylex.props(styles.conversationSurface), children: [_jsx("header", { ...stylex.props(styles.conversationHeader), children: _jsx("h3", { ...stylex.props(styles.contentHeading), children: label }) }), _jsx(ConversationTabs, { label: label, operations: operations, selected: operation, select: select, attemptStatus: attemptStatus }), _jsx(ConversationRunTabs, { operation: operation, operations: operations, select: select }), operation?.kind === "evaluation" ? null : result, _jsxs("section", { "aria-label": `${label} messages`, ...stylex.props(styles.conversationThread), children: [judge ? (_jsx(JudgeQuestion, { review: judge, operations: allOperations })) : (_jsx(ConversationEvents, { timeline: timeline })), _jsx(JudgeResponse, { review: judge, operations: allOperations })] }), timeline.length === 0 && status !== "running" ? (_jsx("p", { ...stylex.props(styles.meta), children: conversationPlaceholder(status) })) : null, status === "running" ? _jsx(RunningIndicator, { kind: operation?.kind }) : null] }) }));
+    return (_jsx("section", { "aria-label": label, ...stylex.props(styles.conversation), children: _jsxs("div", { ...stylex.props(styles.conversationSurface), children: [_jsxs("header", { ...stylex.props(styles.conversationHeader), children: [_jsx("h3", { ...stylex.props(styles.contentHeading), children: label }), _jsx("p", { ...stylex.props(styles.sectionIntro), children: SECTION_INTROS[label] })] }), _jsx(ConversationTabs, { label: label, operations: operations, selected: operation, select: select, attemptStatus: attemptStatus }), _jsx(ConversationRunTabs, { operation: operation, operations: operations, select: select }), operation?.kind === "evaluation" || operations.length < 2 ? null : result, _jsx("section", { "aria-label": `${label} messages`, ...stylex.props(styles.conversationThread), children: judge ? (_jsxs(_Fragment, { children: [_jsx(JudgeAsked, { review: judge }), _jsx(JudgeResponse, { review: judge, operations: allOperations }), _jsx(JudgeInputs, { review: judge, operations: allOperations })] })) : (_jsx(ConversationEvents, { timeline: timeline })) }), timeline.length === 0 && status !== "running" ? (_jsx("p", { ...stylex.props(styles.meta), children: conversationPlaceholder(status) })) : null, status === "running" ? _jsx(RunningIndicator, { kind: operation?.kind }) : null] }) }));
 }
 function conversationContent(operation, operations) {
     if (operation?.kind === "evaluation") {
@@ -1952,17 +2094,26 @@ function recordedTimeline(result) {
 function ConversationEvents({ timeline }) {
     return timeline.map((event, index) => event.kind === "tool" ? (_jsx(ToolActivity, { tool: event.tool }, `tool:${event.tool.seq ?? index}:${event.tool.name}`)) : (_jsx(MessageBubble, { message: event.message }, `message:${event.message.seq ?? index}:${event.message.role}`)));
 }
-function JudgeQuestion({ review, operations, }) {
-    if (!review.question && !review.context.length)
+/** The judge's instruction comes first: it defines what each finding below means. */
+function JudgeAsked({ review }) {
+    if (!review.question)
         return null;
-    return (_jsxs("section", { "aria-label": "Judge question", ...stylex.props(styles.judgeQuestion), children: [_jsx("h4", { ...stylex.props(styles.judgeResponseHeading), children: "Judge question" }), review.question ? (_jsx("p", { ...stylex.props(styles.judgeQuestionText), children: review.question })) : null, review.context.length ? (_jsx(JudgeContext, { context: review.context, operations: operations })) : null] }));
+    return (_jsx("section", { "aria-label": "Judge question", ...stylex.props(styles.judgeQuestion), children: _jsxs("p", { ...stylex.props(styles.judgeQuestionText), children: [_jsx("span", { ...stylex.props(styles.judgeAskedLabel), children: "Asked" }), _jsx("span", { children: review.question })] }) }));
+}
+/** Everything the test sent the judge, folded away: it mostly repeats the agent answers. */
+function JudgeInputs({ review, operations, }) {
+    if (!review.context.length)
+        return null;
+    // Inputs matter most before findings exist and when a finding failed.
+    const inputsFirst = review.outcomes.length === 0 || review.outcomes.some((outcome) => !outcome.passed);
+    return (_jsx("section", { "aria-label": "Context included", children: _jsxs("details", { "data-disclosure": true, open: inputsFirst, ...stylex.props(styles.judgeContextDisclosure), children: [_jsxs("summary", { ...stylex.props(styles.judgeContextSummary), children: ["What the judge saw \u00B7 ", review.context.length, " selected", " ", pluralize(review.context.length, "field")] }), _jsx(JudgeContext, { context: review.context, operations: operations })] }) }));
 }
 function JudgeContext({ context, operations, }) {
     const { answers, supplied } = judgeContextGroups(context, operations);
     const [selectedId, setSelectedId] = useState(answers[0]?.id);
     const selected = answers.find((item) => item.id === selectedId) ?? answers[0];
     const panelId = useId();
-    return (_jsxs("section", { "aria-label": "Context included", ...stylex.props(styles.judgeContext), children: [_jsxs("div", { ...stylex.props(styles.judgeContextHeader), children: [_jsx("strong", { children: "Context included" }), _jsxs("span", { children: [context.length, " selected fields"] })] }), _jsx("p", { ...stylex.props(styles.judgeContextNote), children: "Only these explicitly selected fields were sent to this judge." }), answers.length ? (_jsxs("section", { "aria-label": "Agent answers", ...stylex.props(styles.judgeContextGroup), children: [_jsx("h5", { ...stylex.props(styles.judgeContextGroupHeading), children: "Agent answers" }), _jsx("div", { role: "tablist", "aria-label": "Agent answers included", ...stylex.props(styles.judgeContextTabs), children: answers.map((answer, index) => (_jsx("button", { type: "button", role: "tab", "aria-selected": answer.id === selected?.id, "aria-controls": panelId, ...stylex.props(styles.buttonReset, styles.judgeContextTab, answer.id === selected?.id && styles.judgeContextTabActive), onClick: () => setSelectedId(answer.id), onKeyDown: (event) => selectContextWithKeyboard({ event, answers, index, select: setSelectedId }), children: answer.tabLabel }, answer.id))) }), selected ? (_jsx("div", { id: panelId, role: "tabpanel", "aria-label": `Agent response from ${selected.tabLabel}`, ...stylex.props(styles.judgeContextAnswer), children: _jsx("div", { ...stylex.props(styles.judgeContextValue), children: _jsx("div", { className: "message-markdown", children: _jsx(Markdown, { children: normalizeTranscriptMarkdown(selected.value) }) }) }) })) : null] })) : null, supplied.length ? (_jsxs("section", { "aria-label": "Additional context", ...stylex.props(styles.judgeContextGroup), children: [_jsx("h5", { ...stylex.props(styles.judgeContextGroupHeading), children: "Additional context" }), _jsx("dl", { ...stylex.props(styles.judgeContextList), children: supplied.map((item) => (_jsxs("div", { ...stylex.props(styles.judgeContextItem), children: [_jsx("dt", { ...stylex.props(styles.judgeContextLabel), children: item.label }), _jsx("dd", { ...stylex.props(styles.judgeContextValue), children: item.value })] }, item.label))) })] })) : null] }));
+    return (_jsxs("div", { ...stylex.props(styles.judgeContext), children: [_jsx("p", { ...stylex.props(styles.judgeContextNote), children: "Only these fields, chosen by the test, were sent to the judge." }), answers.length ? (_jsxs("section", { "aria-label": "Agent answers", ...stylex.props(styles.judgeContextGroup), children: [_jsx("h5", { ...stylex.props(styles.judgeContextGroupHeading), children: "Agent answers" }), _jsx("div", { role: "tablist", "aria-label": "Agent answers included", ...stylex.props(styles.judgeContextTabs), children: answers.map((answer, index) => (_jsx("button", { type: "button", role: "tab", "aria-selected": answer.id === selected?.id, "aria-controls": panelId, ...stylex.props(styles.buttonReset, styles.judgeContextTab, answer.id === selected?.id && styles.judgeContextTabActive), onClick: () => setSelectedId(answer.id), onKeyDown: (event) => selectContextWithKeyboard({ event, answers, index, select: setSelectedId }), children: answer.tabLabel }, answer.id))) }), selected ? (_jsx("div", { id: panelId, role: "tabpanel", "aria-label": `Agent response from ${selected.tabLabel}`, ...stylex.props(styles.judgeContextAnswer), children: _jsx("div", { ...stylex.props(styles.judgeContextValue), children: _jsx("div", { className: "message-markdown", children: _jsx(Markdown, { children: normalizeTranscriptMarkdown(selected.value) }) }) }) })) : null] })) : null, supplied.length ? (_jsxs("section", { "aria-label": "Additional context", ...stylex.props(styles.judgeContextGroup), children: [_jsx("h5", { ...stylex.props(styles.judgeContextGroupHeading), children: "Additional context" }), _jsx("dl", { ...stylex.props(styles.judgeContextList), children: supplied.map((item) => (_jsxs("div", { ...stylex.props(styles.judgeContextItem), children: [_jsx("dt", { ...stylex.props(styles.judgeContextLabel), children: item.label }), _jsx("dd", { ...stylex.props(styles.judgeContextValue), children: item.value })] }, item.label))) })] })) : null] }));
 }
 function judgeContextGroups(context, operations) {
     const candidates = operations
@@ -1982,6 +2133,7 @@ function judgeContextGroups(context, operations) {
             ...item,
             id: `${match.operation.id}:${index}`,
             tabLabel: agentRunLabel(match.operation, operations),
+            agentName: match.operation.name,
         });
     }
     return { answers, supplied };
@@ -2026,15 +2178,50 @@ function selectContextWithKeyboard(input) {
 function JudgeResponse({ review, operations, }) {
     if (!review || (!review.outcomes.length && !review.reason))
         return null;
-    const { answers } = judgeContextGroups(review.context, operations);
-    return _jsx(JudgeFindings, { outcomes: review.outcomes, reason: review.reason, answers: answers });
-}
-function JudgeFindings({ outcomes, reason, answers = [], }) {
-    return (_jsxs("section", { "aria-label": "Judge response", ...stylex.props(styles.judgeResponse), children: [_jsx("h4", { ...stylex.props(styles.judgeResponseHeading), children: "Judge response" }), _jsx("div", { ...stylex.props(styles.judgeOutcomeList), children: outcomes.map((outcome) => (_jsxs("div", { ...stylex.props(styles.judgeOutcome), children: [_jsx(CriterionOutcomeIcon, { outcome: outcome.passed ? "passed" : "failed", label: outcome.passed ? "Passed" : "Failed" }), _jsx("span", { ...stylex.props(styles.judgeOutcomeLabel), children: judgeOutcomeLabel(outcome.label, answers) }), outcome.explanation ? (_jsx("p", { ...stylex.props(styles.judgeOutcomeExplanation), children: outcome.explanation })) : null] }, outcome.label))) }), reason && !outcomes.length ? (_jsx("p", { ...stylex.props(styles.judgeOutcomeExplanation), children: reason })) : null] }));
-}
-function judgeOutcomeLabel(label, answers) {
-    const answer = answers.find((item) => label === `${item.label} Correct` || label === item.label);
-    return answer?.tabLabel ?? label;
+    const { answers, supplied } = judgeContextGroups(review.context, operations);
+    return (_jsx(JudgeFindings, { outcomes: review.outcomes, reason: review.reason, answers: answers, references: supplied.filter((item) => item.value.length <= SHORT_REFERENCE) }));
+}
+const SHORT_REFERENCE = 120;
+const ANSWER_QUOTE = 160;
+/**
+ * One row per judged field, quoting the answer it judged, then the short reference values the
+ * test supplied and the judge's shared reason. Together they show why each row passed or failed.
+ */
+function JudgeFindings({ outcomes, reason, answers = [], references = [], }) {
+    return (_jsxs("section", { "aria-label": "Judge response", ...stylex.props(styles.judgeResponse), children: [_jsx("h4", { ...stylex.props(styles.judgeResponseHeading), children: "Findings" }), _jsx("div", { ...stylex.props(styles.judgeOutcomeList), children: outcomes.map((outcome) => (_jsx(JudgeFindingRow, { outcome: outcome, answers: answers }, outcome.label))) }), outcomes.length && references.length ? (_jsxs("p", { ...stylex.props(styles.judgeReason), children: [_jsx("span", { ...stylex.props(styles.judgeAskedLabel), children: "Compared with" }), references.map((item) => `${item.label}: ${item.value}`).join(" · ")] })) : null, reason ? (_jsxs("p", { ...stylex.props(styles.judgeReason), children: [outcomes.length ? _jsx("span", { ...stylex.props(styles.judgeAskedLabel), children: "Reason" }) : null, _jsx("span", { children: reason })] })) : null] }));
+}
+function JudgeFindingRow({ outcome, answers, }) {
+    const answer = judgedAnswer(outcome, answers);
+    return (_jsxs("div", { ...stylex.props(styles.judgeOutcome), children: [_jsx(CriterionOutcomeIcon, { outcome: outcome.passed ? "passed" : "failed", label: outcome.passed ? "Passed" : "Failed" }), _jsx("span", { ...stylex.props(styles.judgeOutcomeLabel), children: judgeOutcomeLabel(outcome, answer) }), outcome.explanation ? (_jsx("p", { ...stylex.props(styles.judgeOutcomeExplanation), children: outcome.explanation })) : null, answer ? _jsx(JudgedAnswerSource, { answer: answer }) : null, answer ? (_jsxs("p", { ...stylex.props(styles.judgeOutcomeExplanation), children: ["\u201C", answerQuote(answer.value), "\u201D"] })) : null] }));
+}
+/** Which agent run produced the judged answer, and what that agent is for when the test says. */
+function JudgedAnswerSource({ answer }) {
+    const descriptions = useContext(AgentDescriptions);
+    const description = answer.agentName ? descriptions.get(answer.agentName) : undefined;
+    return (_jsxs("p", { ...stylex.props(styles.judgeOutcomeSource), children: ["From ", answer.tabLabel, description ? ` — ${description}` : ""] }));
+}
+/** The answer a field is named after: "fileRoundOneCorrect" judges the "fileRoundOne" input. */
+function judgedAnswer(outcome, answers) {
+    return answers.find((item) => outcome.label === item.label || outcome.label.startsWith(`${item.label} `));
+}
+/**
+ * A finding is named by what the judge looked at, in the test's own words: the input label
+ * ("File round one") when the field judges an answer, otherwise the field ("Explains risk").
+ * The pass/fail icon carries the verdict, so the label never repeats it.
+ */
+function judgeOutcomeLabel(outcome, answer) {
+    return sentenceCase(answer?.label ?? outcome.label);
+}
+function sentenceCase(value) {
+    const lower = value.toLowerCase();
+    return lower.charAt(0).toUpperCase() + lower.slice(1);
+}
+function answerQuote(value) {
+    const plain = value
+        .replace(/[*_`#>]/g, "")
+        .replace(/\s+/g, " ")
+        .trim();
+    return plain.length > ANSWER_QUOTE ? `${plain.slice(0, ANSWER_QUOTE - 1)}…` : plain;
 }
 function judgeReviewData(operation) {
     const records = operation.data.filter(isRecord);
@@ -2044,7 +2231,7 @@ function judgeReviewData(operation) {
     return {
         question: judgeQuestion(record),
         context: judgeContext(record?.input),
-        outcomes: judgeOutcomes(output, reason),
+        outcomes: judgeOutcomes(output),
         reason,
     };
 }
@@ -2072,23 +2259,15 @@ function judgeQuestion(record) {
     const evaluation = isRecord(record?.evaluation) ? record.evaluation : undefined;
     return optionalString(evaluation?.prompt);
 }
-function judgeOutcomes(output, fallbackExplanation) {
+/** Only an explanation the judge gave for that field attaches to it; a shared reason never does. */
+function judgeOutcomes(output) {
     const entries = Object.entries(output).filter((entry) => typeof entry[1] === "boolean");
-    const fallbacks = splitJudgeExplanation(fallbackExplanation, entries.length);
-    return entries.map(([key, passed], index) => ({
+    return entries.map(([key, passed]) => ({
         label: humanizeKey(key),
         passed,
-        explanation: judgeOutcomeExplanation(output, key) ?? fallbacks[index],
+        explanation: judgeOutcomeExplanation(output, key),
     }));
 }
-function splitJudgeExplanation(value, count) {
-    if (!value || count < 1)
-        return [];
-    const sentences = value.split(SENTENCE_BOUNDARY).filter(Boolean);
-    if (sentences.length < count)
-        return Array.from({ length: count }, () => value);
-    return Array.from({ length: count }, (_, index) => index === count - 1 ? sentences.slice(index).join(" ") : (sentences[index] ?? value));
-}
 function judgeOutcomeExplanation(output, key) {
     const explanations = isRecord(output.explanations) ? output.explanations : {};
     return (optionalString(explanations[key]) ??
@@ -2205,7 +2384,7 @@ function RunningIndicator({ kind }) {
 function ToolActivity({ tool }) {
     const presentation = toolPresentation(tool);
     const [outputOpen, setOutputOpen] = useState(false);
-    return (_jsxs("article", { ...stylex.props(styles.toolEvent), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.toolIcon), children: presentation.icon }), _jsxs("div", { ...stylex.props(styles.toolCopy), children: [_jsx("strong", { ...stylex.props(styles.toolTitle), children: presentation.title }), presentation.detail ? (_jsx("span", { ...stylex.props(styles.toolDetail), children: presentation.detail })) : null] }), _jsxs("div", { role: "group", "aria-label": "Tool controls", ...stylex.props(styles.toolActions), children: [_jsx("span", { ...stylex.props(styles.toolOutcome, presentation.failed && styles.toolOutcomeFail), children: presentation.outcome }), tool.result ? (_jsx("button", { type: "button", ...stylex.props(styles.buttonReset, styles.toolResultSummary), onClick: () => setOutputOpen((open) => !open), children: outputOpen ? "Hide output" : "View output" })) : null] }), tool.result && outputOpen ? (_jsx("pre", { ...stylex.props(styles.toolResultPre), children: tool.result })) : null] }));
+    return (_jsxs("article", { ...stylex.props(styles.toolEvent), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.toolIcon), children: presentation.icon }), _jsxs("div", { ...stylex.props(styles.toolCopy), children: [_jsx("strong", { ...stylex.props(styles.toolTitle), children: presentation.title }), presentation.detail ? (_jsx("span", { title: presentation.detail, ...stylex.props(styles.toolDetail), children: presentation.detail })) : null] }), _jsxs("div", { role: "group", "aria-label": "Tool controls", ...stylex.props(styles.toolActions), children: [_jsx("span", { ...stylex.props(styles.toolOutcome, presentation.failed && styles.toolOutcomeFail), children: presentation.outcome }), tool.result ? (_jsx("button", { type: "button", ...stylex.props(styles.buttonReset, styles.toolResultSummary), onClick: () => setOutputOpen((open) => !open), children: outputOpen ? "Hide output" : "View output" })) : null] }), tool.result && outputOpen ? (_jsx("pre", { ...stylex.props(styles.toolResultPre), children: tool.result })) : null, tool.images ? _jsx(ToolImages, { images: tool.images, toolName: presentation.title }) : null] }));
 }
 function toolPresentation(tool) {
     const name = tool.name.toLowerCase();
@@ -2214,7 +2393,13 @@ function toolPresentation(tool) {
     if (name === "read" || name.includes("read_file"))
         return { icon: "↗", title: "Read file", detail: argument(tool, "path"), outcome, failed };
     if (["shell", "bash", "exec_command"].includes(name))
-        return { icon: ">", title: "Run command", detail: argument(tool, "command"), outcome, failed };
+        return {
+            icon: ">",
+            title: "Run command",
+            detail: unwrapShellCommand(argument(tool, "command")),
+            outcome,
+            failed,
+        };
     if (name.includes("edit") || name.includes("write"))
         return { icon: "✎", title: "Change file", detail: argument(tool, "path"), outcome, failed };
     return { icon: "◆", title: tool.name, detail: summarizeArgs(tool.args), outcome, failed };
@@ -2260,7 +2445,7 @@ function OperationList({ operations }) {
     if (operations.length === 0)
         return null;
     const summaries = summarizeOperations(operations);
-    return (_jsx("div", { ...stylex.props(styles.list), children: summaries.map((summary) => (_jsxs("div", { ...stylex.props(styles.meta), children: [summary.name, summary.count > 1 ? ` ×${summary.count}` : ""] }, summary.key))) }));
+    return (_jsxs("div", { ...stylex.props(styles.ranRow), children: [_jsx("span", { ...stylex.props(styles.ranLabel), children: "Ran" }), summaries.map((summary) => (_jsxs("span", { ...stylex.props(styles.ranChip), children: [summary.name, summary.count > 1 ? ` ×${summary.count}` : ""] }, summary.key)))] }));
 }
 function summarizeOperations(operations) {
     const summaries = new Map();
@@ -2275,40 +2460,14 @@ function summarizeOperations(operations) {
     }
     return [...summaries.values()];
 }
-function useExecutionHistory() {
-    return useQuery({
-        queryKey: ["execution-history"],
-        queryFn: fetchExecutionHistory,
-    });
-}
-async function fetchTestCatalog() {
-    return viewerApi.getTestCatalog();
-}
-async function fetchExecutionHistory() {
-    return (await viewerApi.listExecutions()).executions;
-}
-async function fetchExecution(id) {
-    return (await viewerApi.getExecution(id)).execution;
-}
-async function startTest(testId, workers) {
-    return viewerApi.startExecution(testId, workers);
-}
-async function startSuite(workers) {
-    return viewerApi.startSuiteExecution(workers);
-}
-async function startTestGroup(testIds, workers) {
-    return viewerApi.startTestGroup(testIds, workers);
-}
-async function cancelExecution(id) {
-    await viewerApi.cancelExecution(id);
-}
 function latestTestStatuses(executions) {
     const statuses = new Map();
     for (const execution of executions) {
         for (const testId of execution.testIds ?? []) {
-            if (statuses.has(testId))
-                continue;
-            statuses.set(testId, execution.testStatuses?.[testId] ?? execution.status);
+            const status = testRunStatus(execution, testId);
+            const known = statuses.get(testId);
+            if (known === undefined || (known === "skipped" && status !== "skipped"))
+                statuses.set(testId, status);
         }
     }
     return statuses;