@post-print/agent-test 2.0.4 → 2.0.6

package/dist/viewer/v2-client.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import * as stylex from "@stylexjs/stylex";
 import { useMutation, useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createRootRoute, createRoute, createRouter, Link, Outlet, useNavigate, } from "@tanstack/react-router";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useId, useState, } from "react";
 import Markdown from "react-markdown";
 import { viewerApi } from "./generated-api.js";
 import { assertionComparison, conversationPlaceholder, preferredExecutionId, stripAnsi, } from "./presentation.js";
@@ -646,6 +646,11 @@ const styles = stylex.create({
     },
     metricValue: { color: "var(--text)", fontSize: "0.77rem", fontWeight: 700 },
     conversation: {
+        display: "grid",
+        gap: "0.55rem",
+        padding: "0.2rem 0",
+    },
+    conversationSurface: {
         display: "grid",
         gap: "0.55rem",
         padding: "0.75rem",
@@ -662,7 +667,7 @@ const styles = stylex.create({
     conversationHeader: {
         display: "flex",
         alignItems: "center",
-        justifyContent: "space-between",
+        justifyContent: "flex-start",
         gap: "0.75rem",
     },
     runTabs: { display: "inline-flex", alignItems: "center", gap: "0.12rem" },
@@ -678,34 +683,49 @@ const styles = stylex.create({
         cursor: "pointer",
     },
     runTabActive: { backgroundColor: "var(--accent-soft)", color: "var(--accent)" },
-    conversationTabs: { display: "flex", flexWrap: "wrap", gap: "0.25rem" },
+    conversationTabs: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "0.9rem",
+        padding: "0 0.15rem",
+        borderBottomWidth: 1,
+        borderBottomStyle: "solid",
+        borderBottomColor: "var(--border)",
+    },
     conversationTab: {
         display: "inline-flex",
         alignItems: "center",
-        gap: "0.2rem",
+        gap: "0.3rem",
         boxSizing: "border-box",
-        height: "1.1rem",
-        minHeight: 0,
+        height: "1.85rem",
+        minHeight: "1.85rem",
         lineHeight: 1,
-        padding: "0.08rem 0.32rem",
-        fontSize: "0.5rem",
+        padding: "0.2rem 0.1rem",
+        marginBottom: -1,
+        fontSize: "0.58rem",
         fontWeight: 750,
         letterSpacing: "0.04em",
         textTransform: "uppercase",
-        borderColor: "var(--border)",
-        backgroundColor: { default: "transparent", ":hover": "var(--panel-3)" },
+        borderBottomWidth: 2,
+        borderBottomStyle: "solid",
+        borderBottomColor: "transparent",
+        borderRadius: 0,
+        backgroundColor: "transparent",
         color: "var(--muted)",
         cursor: "pointer",
     },
     conversationTabActive: {
-        borderColor: "var(--pass)",
-        backgroundColor: "var(--pass-soft)",
-        color: "var(--pass)",
+        borderBottomColor: "var(--accent)",
+        color: "var(--text)",
     },
     conversationTabDot: {
         width: "0.28rem",
         height: "0.28rem",
         borderRadius: 999,
+        flex: "none",
+    },
+    conversationTabDotDone: { backgroundColor: "var(--pass)" },
+    conversationTabDotRunning: {
         backgroundColor: "var(--skip)",
         animationName: runningPulse,
         animationDuration: {
@@ -718,6 +738,7 @@ const styles = stylex.create({
         },
         animationTimingFunction: "ease-in-out",
     },
+    conversationTabDotStopped: { backgroundColor: "var(--fail)" },
     conversationThread: { display: "grid", gap: "0.55rem" },
     runningIndicator: {
         display: "inline-flex",
@@ -775,6 +796,106 @@ const styles = stylex.create({
         textTransform: "uppercase",
     },
     messageContent: { margin: 0, color: "var(--text)", fontSize: "0.79rem", lineHeight: 1.5 },
+    judgeQuestion: {
+        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",
+        lineHeight: 1.5,
+    },
+    judgeContext: {
+        display: "grid",
+        gap: "0.4rem",
+        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: {
+        margin: 0,
+        color: "var(--subtle)",
+        fontSize: "0.64rem",
+        fontWeight: 750,
+        letterSpacing: "0.04em",
+        textTransform: "uppercase",
+    },
+    judgeContextTabs: {
+        display: "flex",
+        flexWrap: "nowrap",
+        gap: "0.55rem",
+        overflowX: "auto",
+        scrollbarWidth: "none",
+        "::-webkit-scrollbar": { display: "none" },
+        borderBottomWidth: 1,
+        borderBottomStyle: "solid",
+        borderBottomColor: "oklch(0.75 0.12 175 / 0.22)",
+    },
+    judgeContextTab: {
+        flex: "0 0 auto",
+        minHeight: "1.75rem",
+        padding: "0.25rem 0.05rem",
+        marginBottom: -1,
+        borderBottomWidth: 2,
+        borderBottomStyle: "solid",
+        borderBottomColor: "transparent",
+        backgroundColor: { default: "transparent", ":hover": "var(--panel-3)" },
+        color: "var(--muted)",
+        fontSize: "0.58rem",
+        fontWeight: 750,
+        whiteSpace: "nowrap",
+        cursor: "pointer",
+    },
+    judgeContextTabActive: { borderBottomColor: "var(--accent)", color: "var(--text)" },
+    judgeContextAnswer: {
+        display: "grid",
+        gap: "0.3rem",
+        padding: "0.5rem",
+        borderRadius: 6,
+        backgroundColor: "var(--bg)",
+    },
+    judgeContextList: { display: "grid", gap: "0.3rem", margin: 0 },
+    judgeContextItem: {
+        display: "grid",
+        gridTemplateColumns: {
+            default: "minmax(7.5rem, 0.3fr) minmax(0, 1fr)",
+            "@media (max-width: 620px)": "1fr",
+        },
+        gap: "0.65rem",
+        padding: "0.4rem 0.5rem",
+        borderRadius: 6,
+        backgroundColor: "var(--bg)",
+    },
+    judgeContextLabel: {
+        color: "var(--subtle)",
+        fontSize: "0.64rem",
+        fontWeight: 750,
+        letterSpacing: "0.03em",
+        textTransform: "uppercase",
+    },
+    judgeContextValue: {
+        margin: 0,
+        color: "var(--text)",
+        fontSize: "0.72rem",
+        lineHeight: 1.45,
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+    },
     judgeResponse: {
         display: "grid",
         justifySelf: "start",
@@ -1221,15 +1342,139 @@ 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 = [] }) {
-    const output = [...attempt.output.stdout, ...attempt.output.stderr].join("\n");
-    const result = operationResult(attempt.operations);
-    const title = attempt.title.filter(Boolean).at(-1) ?? "Unnamed test";
-    const [selectedConversationId, setSelectedConversationId] = useState(attempt.operations[0]?.id);
-    const selectedConversation = attempt.operations.find((operation) => operation.id === selectedConversationId) ??
-        attempt.operations[0];
-    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: attempt.operations }), _jsx(RunResult, { result: result, status: attempt.status, criteria: criteria, explanations: judgeCriterionExplanations(attempt.operations), errors: attempt.errors, criterionResults: attempt.criterionResults }), attempt.operations.length > 0 ? (_jsx(ConversationTabs, { operations: attempt.operations, selected: selectedConversation, select: setSelectedConversationId, attemptStatus: attempt.status })) : null, _jsx(Conversation, { operation: selectedConversation, operations: attempt.operations, select: setSelectedConversationId, status: attempt.status === "running"
-                    ? (selectedConversation?.status ?? attempt.status)
-                    : attempt.status }), _jsx(TechnicalDetails, { operations: attempt.operations, output: output })] }));
+    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 })] }));
+}
+function ConversationSection({ label, sectionOperations, allOperations, attempt, criteria, }) {
+    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) }) }));
+}
+function attemptPresentation(attempt, criteria) {
+    return {
+        operations: orderedAttemptOperations(attempt.operations, criteria),
+        output: [...attempt.output.stdout, ...attempt.output.stderr].join("\n"),
+        title: attempt.title.filter(Boolean).at(-1) ?? "Unnamed test",
+    };
+}
+function selectedOperationResult(operation) {
+    return operationResult(operation ? [operation] : []);
+}
+function orderedAttemptOperations(operations, criteria) {
+    const entries = operations.map((operation, index) => ({
+        operation,
+        index,
+        invocationIndex: operationInvocationIndex(operation),
+    }));
+    if (entries.some((entry) => entry.invocationIndex !== undefined))
+        return entries
+            .sort((left, right) => (left.invocationIndex ?? Number.POSITIVE_INFINITY) -
+            (right.invocationIndex ?? Number.POSITIVE_INFINITY) || left.index - right.index)
+            .map((entry) => entry.operation);
+    return entries
+        .sort((left, right) => {
+        if (operationIdentity(left.operation) !== operationIdentity(right.operation))
+            return left.index - right.index;
+        const leftOrdinal = inferredOperationOrdinal(criteria, left.operation);
+        const rightOrdinal = inferredOperationOrdinal(criteria, right.operation);
+        if (leftOrdinal === undefined || rightOrdinal === undefined)
+            return left.index - right.index;
+        return leftOrdinal - rightOrdinal || left.index - right.index;
+    })
+        .map((entry) => entry.operation);
+}
+function operationInvocationIndex(operation) {
+    if (typeof operation.invocationIndex === "number")
+        return operation.invocationIndex;
+    return operation.data.flatMap((value) => {
+        if (!isRecord(value) || typeof value.invocationIndex !== "number")
+            return [];
+        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);
+}
+function operationCriterionIndexes(criteria, operation) {
+    return [
+        ...new Set(operation?.data.flatMap((item) => criterionRecordIndexes(criteria, item)) ?? []),
+    ];
+}
+function criterionRecordIndexes(criteria, value) {
+    if (!isRecord(value))
+        return [];
+    if (typeof value.criterion === "string") {
+        const index = criteria.indexOf(value.criterion);
+        return index < 0 ? [] : [index];
+    }
+    if (Array.isArray(value.criterionIndexes))
+        return value.criterionIndexes.filter((index) => Number.isInteger(index));
+    return Number.isInteger(value.criterionIndex) ? [Number(value.criterionIndex)] : [];
+}
+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)
+        return undefined;
+    const matches = criteria.flatMap((criterion) => {
+        const ordinal = criterionRunOrdinal(criterion);
+        const score = criterionOutputScore(criterion, output);
+        return ordinal === undefined || score === 0 ? [] : [{ ordinal, score }];
+    });
+    const bestScore = Math.max(0, ...matches.map((match) => match.score));
+    const ordinals = new Set(matches.filter((match) => match.score === bestScore).map((match) => match.ordinal));
+    return ordinals.size === 1 ? [...ordinals][0] : undefined;
+}
+function criterionOutputScore(criterion, output) {
+    const normalized = criterion.toLowerCase();
+    if (normalized.includes(`exactly ${output}`))
+        return 2;
+    return normalized.split(CRITERION_WORD_SEPARATOR).includes(output) ? 1 : 0;
+}
+function criterionRunOrdinal(criterion) {
+    const normalized = criterion.toLowerCase();
+    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");
@@ -1570,9 +1815,9 @@ 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))) }));
 }
-function Conversation({ operation, operations, select, status, }) {
+function Conversation({ label, operation, operations, allOperations, select, status, attemptStatus, result, }) {
     const { timeline, judge } = conversationContent(operation, operations);
-    return (_jsxs("section", { "aria-label": "Conversation", ...stylex.props(styles.conversation), children: [_jsxs("header", { ...stylex.props(styles.conversationHeader), children: [_jsx("h3", { ...stylex.props(styles.contentHeading), children: "Conversation" }), _jsx(ConversationRunTabs, { operation: operation, operations: operations, select: select })] }), _jsxs("div", { ...stylex.props(styles.conversationThread), children: [_jsx(ConversationEvents, { timeline: timeline }), _jsx(JudgeResponse, { review: judge })] }), timeline.length === 0 && status !== "running" ? (_jsx("p", { ...stylex.props(styles.meta), children: conversationPlaceholder(status) })) : null, status === "running" ? _jsx(RunningIndicator, {}) : null] }));
+    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] }) }));
 }
 function conversationContent(operation, operations) {
     if (operation?.kind === "evaluation") {
@@ -1604,13 +1849,89 @@ 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 JudgeResponse({ review }) {
+function JudgeQuestion({ review, operations, }) {
+    if (!review.question && !review.context.length)
+        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] }));
+}
+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] }));
+}
+function judgeContextGroups(context, operations) {
+    const candidates = operations
+        .filter((operation) => operation.kind !== "evaluation")
+        .map((operation) => ({ operation, output: operationOutput(operation) }));
+    const claimed = new Set();
+    const answers = [];
+    const supplied = [];
+    for (const [index, item] of context.entries()) {
+        const match = candidates.find((candidate) => !claimed.has(candidate.operation.id) && sameContextValue(item.rawValue, candidate.output));
+        if (!match) {
+            supplied.push(item);
+            continue;
+        }
+        claimed.add(match.operation.id);
+        answers.push({
+            ...item,
+            id: `${match.operation.id}:${index}`,
+            tabLabel: agentRunLabel(match.operation, operations),
+        });
+    }
+    return { answers, supplied };
+}
+function operationOutput(operation) {
+    const records = operation.data.filter(isRecord);
+    return [...records].reverse().find((record) => record.output !== undefined)?.output;
+}
+function sameContextValue(left, right) {
+    if (right === undefined)
+        return false;
+    if (left === right)
+        return true;
+    try {
+        return JSON.stringify(left) === JSON.stringify(right);
+    }
+    catch {
+        return false;
+    }
+}
+function agentRunLabel(operation, operations) {
+    const peers = operations.filter((item) => item.kind !== "evaluation" && operationIdentity(item) === operationIdentity(operation));
+    const name = conversationLabel(operation);
+    if (peers.length < 2)
+        return name;
+    return `${name} · Run ${peers.findIndex((item) => item.id === operation.id) + 1}`;
+}
+function selectContextWithKeyboard(input) {
+    const { event, answers, index, select } = input;
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+        return;
+    event.preventDefault();
+    const direction = event.key === "ArrowRight" ? 1 : -1;
+    const nextIndex = (index + direction + answers.length) % answers.length;
+    const next = answers[nextIndex];
+    if (!next)
+        return;
+    select(next.id);
+    event.currentTarget.parentElement
+        ?.querySelectorAll("[role=tab]")[nextIndex]?.focus();
+}
+function JudgeResponse({ review, operations, }) {
     if (!review || (!review.outcomes.length && !review.reason))
         return null;
-    return _jsx(JudgeFindings, { outcomes: review.outcomes, reason: review.reason });
+    const { answers } = judgeContextGroups(review.context, operations);
+    return _jsx(JudgeFindings, { outcomes: review.outcomes, reason: review.reason, answers: answers });
 }
-function JudgeFindings({ outcomes, reason, }) {
-    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: outcome.label }), 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 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;
 }
 function judgeReviewData(operation) {
     const records = operation.data.filter(isRecord);
@@ -1619,10 +1940,31 @@ function judgeReviewData(operation) {
     const reason = optionalString(output.reason) ?? conversationOutput(record?.output);
     return {
         question: judgeQuestion(record),
+        context: judgeContext(record?.input),
         outcomes: judgeOutcomes(output, reason),
         reason,
     };
 }
+function judgeContext(value) {
+    if (value === undefined)
+        return [];
+    if (!isRecord(value))
+        return [{ label: "Selected input", value: judgeContextValue(value), rawValue: value }];
+    return Object.entries(value).map(([key, item]) => ({
+        label: humanizeKey(key),
+        value: judgeContextValue(item),
+        rawValue: item,
+    }));
+}
+function judgeContextValue(value) {
+    if (typeof value === "string")
+        return value;
+    if (value === null || value === undefined)
+        return String(value);
+    if (typeof value === "number" || typeof value === "boolean")
+        return String(value);
+    return JSON.stringify(value, null, 2);
+}
 function judgeQuestion(record) {
     const evaluation = isRecord(record?.evaluation) ? record.evaluation : undefined;
     return optionalString(evaluation?.prompt);
@@ -1650,10 +1992,16 @@ function judgeOutcomeExplanation(output, key) {
         optionalString(output[`${key}Explanation`]) ??
         optionalString(output[`${key}Reason`]));
 }
-function judgeCriterionExplanations(operations) {
-    return operations
-        .flatMap((operation) => operation.kind === "evaluation" ? judgeReviewData(operation).outcomes : [])
-        .map((outcome) => outcome.explanation);
+function operationCriterionExplanations(criteria, operation) {
+    const explanations = Array(criteria.length);
+    if (operation?.kind !== "evaluation")
+        return explanations;
+    const indexes = operationCriterionIndexes(criteria, operation);
+    const outcomes = judgeReviewData(operation).outcomes;
+    indexes.forEach((criterionIndex, outcomeIndex) => {
+        explanations[criterionIndex] = outcomes[outcomeIndex]?.explanation;
+    });
+    return explanations;
 }
 function legacyJudgeInput(operation, operations) {
     if (!operation || operation.kind !== "evaluation")
@@ -1681,25 +2029,24 @@ function legacyJudgeInput(operation, operations) {
         });
     return timeline;
 }
-function ConversationTabs({ operations, selected, select, attemptStatus, }) {
+function ConversationTabs({ label, operations, selected, select, attemptStatus, }) {
     if (!operations.length)
         return null;
     const groups = conversationGroups(operations);
     const representatives = groups.map((group) => group.operations[0]);
     const selectedGroup = selected ? operationIdentity(selected) : undefined;
-    return (_jsx("div", { role: "tablist", "aria-label": "Conversation participants", ...stylex.props(styles.conversationSwitcher, styles.conversationTabs), children: groups.map((group, index) => (_jsx(ConversationTab, { operation: group.operations[0], active: group.key === selectedGroup, running: attemptStatus === "running" &&
-                group.operations.some((operation) => operation.status === "running"), onSelect: () => select(group.operations[0].id), onKeyDown: (event) => selectConversationWithKeyboard({
+    return (_jsx("div", { role: "tablist", "aria-label": `${label} participants`, ...stylex.props(styles.conversationSwitcher, styles.conversationTabs), children: groups.map((group, index) => (_jsx(ConversationTab, { operation: group.operations[0], active: group.key === selectedGroup, status: conversationGroupStatus(group.operations, attemptStatus), onSelect: () => select(group.operations[0].id), onKeyDown: (event) => selectConversationWithKeyboard({
                 event,
                 operations: representatives,
                 index,
                 select,
             }) }, group.key))) }));
 }
-function ConversationTab({ operation, active, running, onSelect, onKeyDown, }) {
-    return (_jsxs("button", { type: "button", role: "tab", "aria-label": conversationLabel(operation), "aria-selected": active, ...stylex.props(styles.buttonReset, styles.status, styles.conversationTab, active && styles.conversationTabActive), onClick: onSelect, onKeyDown: onKeyDown, children: [running ? (_jsx("span", { role: "status", "aria-label": `${operation?.name ?? "Agent"} is running`, ...stylex.props(styles.conversationTabDot) })) : null, conversationLabel(operation)] }));
+function ConversationTab({ operation, active, status, onSelect, onKeyDown, }) {
+    return (_jsxs("button", { type: "button", role: "tab", "aria-label": conversationLabel(operation), "aria-selected": active, ...stylex.props(styles.buttonReset, styles.conversationTab, active && styles.conversationTabActive), onClick: onSelect, onKeyDown: onKeyDown, children: [_jsx("span", { role: "status", "aria-label": `${operation?.name ?? "Operation"} is ${status}`, ...stylex.props(styles.conversationTabDot, status === "done" && styles.conversationTabDotDone, status === "running" && styles.conversationTabDotRunning, status === "stopped" && styles.conversationTabDotStopped) }), conversationLabel(operation)] }));
 }
 function conversationLabel(operation) {
-    return `${operation?.name ?? "Unnamed"} · ${operation?.kind === "evaluation" ? "Judge" : "Agent"}`;
+    return operation?.name ?? "Unnamed";
 }
 function conversationGroups(operations) {
     const groups = new Map();
@@ -1713,6 +2060,17 @@ function conversationGroups(operations) {
     }
     return [...groups.values()];
 }
+function conversationGroupStatus(operations, attemptStatus) {
+    if (operations.some((operation) => operation.status === "failed" || operation.status === "interrupted"))
+        return "stopped";
+    if (operations.some((operation) => operation.status === "running")) {
+        if (attemptStatus === "running")
+            return "running";
+        if (attemptStatus === "interrupted" || attemptStatus === "failed")
+            return "stopped";
+    }
+    return "done";
+}
 function operationIdentity(operation) {
     return `${operation.name ?? "Unnamed"}\u0000${operation.kind}`;
 }
@@ -1737,8 +2095,9 @@ function selectConversationWithKeyboard(input) {
     const tabs = event.currentTarget.parentElement?.querySelectorAll("[role=tab]");
     tabs?.[(index + direction + operations.length) % operations.length]?.focus();
 }
-function RunningIndicator() {
-    return (_jsxs("div", { role: "status", "aria-label": "Agent is running", ...stylex.props(styles.runningIndicator), children: [_jsx("span", { children: "Running" }), _jsxs("span", { "aria-hidden": "true", ...stylex.props(styles.runningDots), children: [_jsx("span", { ...stylex.props(styles.runningDot), children: "\u2022" }), _jsx("span", { ...stylex.props(styles.runningDot, styles.runningDotSecond), children: "\u2022" }), _jsx("span", { ...stylex.props(styles.runningDot, styles.runningDotThird), children: "\u2022" })] })] }));
+function RunningIndicator({ kind }) {
+    const participant = kind === "evaluation" ? "Judge" : "Agent";
+    return (_jsxs("div", { role: "status", "aria-label": `${participant} is running`, ...stylex.props(styles.runningIndicator), children: [_jsx("span", { children: "Running" }), _jsxs("span", { "aria-hidden": "true", ...stylex.props(styles.runningDots), children: [_jsx("span", { ...stylex.props(styles.runningDot), children: "\u2022" }), _jsx("span", { ...stylex.props(styles.runningDot, styles.runningDotSecond), children: "\u2022" }), _jsx("span", { ...stylex.props(styles.runningDot, styles.runningDotThird), children: "\u2022" })] })] }));
 }
 function ToolActivity({ tool }) {
     const presentation = toolPresentation(tool);
@@ -1798,18 +2157,18 @@ 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, " \u00B7 ", summary.status, summary.count > 1 ? ` ×${summary.count}` : ""] }, summary.key))) }));
+    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))) }));
 }
 function summarizeOperations(operations) {
     const summaries = new Map();
     for (const operation of operations) {
         const name = operation.name ?? operation.kind;
-        const key = `${operationIdentity(operation)}\u0000${operation.status}`;
+        const key = operationIdentity(operation);
         const existing = summaries.get(key);
         if (existing)
             existing.count++;
         else
-            summaries.set(key, { key, name, status: operation.status, count: 1 });
+            summaries.set(key, { key, name, count: 1 });
     }
     return [...summaries.values()];
 }