@post-print/agent-test 2.0.0 → 2.0.1

package/dist/viewer/v2-client.js

@@ -0,0 +1,1862 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 Markdown from "react-markdown";
+import { viewerApi } from "./generated-api.js";
+import { assertionComparison, conversationPlaceholder, stripAnsi } from "./presentation.js";
+const SENTENCE_BOUNDARY = /(?<=[.!?])\s+/;
+const LOCAL_PATH_LINK = /\[([^\]]+)\]\(<local-path>[^)]*\)/g;
+const runningPulse = stylex.keyframes({
+    "0%, 60%, 100%": { opacity: 0.3, transform: "translateY(0)" },
+    "30%": { opacity: 1, transform: "translateY(-2px)" },
+});
+const CAMEL_CASE_BOUNDARY = /([a-z])([A-Z])/g;
+const INITIAL_CHARACTER = /^./;
+const WorkerContext = createContext({ workers: 1, setWorkers: () => undefined });
+const rootRoute = createRootRoute({ component: ViewerLayout });
+const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/",
+    component: TestCatalogPage,
+});
+const testRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/tests/$testId",
+    validateSearch: (search) => ({
+        execution: typeof search.execution === "string" ? search.execution : undefined,
+        view: search.view === "setup" || search.view === "history" || search.view === "current"
+            ? search.view
+            : undefined,
+    }),
+    component: TestPage,
+});
+const executionRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/executions/$executionId",
+    component: ExecutionPage,
+});
+const compareRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/compare/$left/$right",
+    component: ComparePage,
+});
+export const viewerRouter = createRouter({
+    routeTree: rootRoute.addChildren([indexRoute, testRoute, executionRoute, compareRoute]),
+});
+const styles = stylex.create({
+    skipLink: {
+        position: "fixed",
+        top: "0.75rem",
+        left: "0.75rem",
+        zIndex: 10,
+        padding: "0.55rem 0.75rem",
+        borderRadius: 8,
+        backgroundColor: "var(--accent)",
+        color: "oklch(0.18 0.03 175)",
+        fontSize: "0.8rem",
+        fontWeight: 750,
+        textDecoration: "none",
+        transform: { default: "translateY(-200%)", ":focus": "translateY(0)" },
+        transition: {
+            default: "transform 120ms ease",
+            "@media (prefers-reduced-motion: reduce)": "none",
+        },
+    },
+    shell: {
+        display: "grid",
+        gridTemplateColumns: {
+            default: "18rem minmax(0, 1fr)",
+            "@media (max-width: 820px)": "14rem minmax(0, 1fr)",
+            "@media (max-width: 620px)": "1fr",
+        },
+        height: "100dvh",
+        minHeight: 0,
+    },
+    shellCollapsed: { gridTemplateColumns: "3.75rem minmax(0, 1fr)" },
+    sidebar: {
+        borderRight: "1px solid var(--border)",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        padding: "1rem 0 0",
+        backgroundColor: "var(--sidebar)",
+        minHeight: 0,
+        height: { default: "100dvh", "@media (max-width: 620px)": "auto" },
+        maxHeight: { default: "none", "@media (max-width: 620px)": "18rem" },
+    },
+    sidebarCollapsed: { paddingTop: "1rem", height: "100dvh", maxHeight: "none" },
+    main: {
+        overflow: "auto",
+        minWidth: 0,
+        padding: {
+            default: "2rem clamp(1.5rem, 3vw, 3rem) 3rem",
+            "@media (max-width: 820px)": "1.5rem 1.25rem 3rem",
+            "@media (max-width: 620px)": "1rem 0.85rem 2rem",
+        },
+        maxWidth: "88rem",
+        width: "100%",
+        margin: "0 auto",
+    },
+    brand: {
+        color: "var(--accent)",
+        fontSize: "0.66rem",
+        fontWeight: 750,
+        letterSpacing: "0.11em",
+        textTransform: "uppercase",
+    },
+    sidebarHeader: {
+        display: "grid",
+        gap: "0.65rem",
+        padding: "0 0.45rem 1rem",
+        margin: "0 0.8rem",
+        borderBottom: "1px solid var(--border)",
+    },
+    sidebarHeaderCollapsed: {
+        padding: 0,
+        margin: 0,
+        borderBottom: 0,
+        display: "flex",
+        justifyContent: "center",
+    },
+    toggleButton: {
+        width: "1.85rem",
+        height: "1.85rem",
+        display: "inline-grid",
+        placeItems: "center",
+        flex: "none",
+        padding: 0,
+        borderRadius: 8,
+        backgroundColor: {
+            default: "var(--panel-2)",
+            ":hover": "var(--panel-3)",
+            ":active": "var(--panel-3)",
+        },
+        color: "var(--text)",
+        cursor: "pointer",
+        fontSize: "0.95rem",
+        lineHeight: 1,
+        boxShadow: "none",
+    },
+    sidebarTitleRow: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "0.75rem",
+    },
+    sidebarTitleIdentity: { display: "flex", alignItems: "center", gap: "0.65rem" },
+    suiteRunButton: {
+        width: "fit-content",
+        minHeight: "1.8rem",
+        padding: "0.3rem 0.55rem",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "var(--border)",
+        borderRadius: 8,
+        backgroundColor: {
+            default: "var(--panel-2)",
+            ":hover": "var(--panel-3)",
+            ":disabled": "var(--panel-2)",
+        },
+        color: "var(--text)",
+        cursor: { default: "pointer", ":disabled": "wait" },
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.45rem",
+        fontSize: "0.7rem",
+        fontWeight: 700,
+    },
+    suiteControls: {
+        display: "grid",
+        gridTemplateColumns: "max-content minmax(0, 1fr)",
+        alignItems: "center",
+        columnGap: "0.75rem",
+    },
+    workerControl: {
+        display: "flex",
+        alignItems: "center",
+        justifySelf: "end",
+        gap: "0.35rem",
+        color: "var(--muted)",
+        fontSize: "0.68rem",
+        fontWeight: 650,
+    },
+    workerInput: {
+        width: "2.8rem",
+        height: "1.8rem",
+        padding: "0.25rem 0.35rem",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: { default: "var(--border)", ":focus": "var(--accent)" },
+        borderRadius: 7,
+        backgroundColor: "var(--panel-2)",
+        color: "var(--text)",
+        fontSize: "0.72rem",
+        fontVariantNumeric: "tabular-nums",
+        outline: "none",
+    },
+    groupHeaderActions: { display: "flex", alignItems: "center", gap: "0.4rem" },
+    groupRunButton: {
+        width: "1.45rem",
+        height: "1.45rem",
+        padding: 0,
+        borderRadius: 6,
+        backgroundColor: { default: "transparent", ":hover": "var(--panel-3)" },
+        color: "var(--accent)",
+        cursor: { default: "pointer", ":disabled": "wait" },
+        fontSize: "0.62rem",
+        lineHeight: 1,
+    },
+    countBadge: {
+        padding: "0.22rem 0.55rem",
+        borderRadius: 999,
+        backgroundColor: "var(--panel-3)",
+        color: "var(--muted)",
+        fontSize: "0.72rem",
+        fontWeight: 700,
+        fontVariantNumeric: "tabular-nums",
+    },
+    title: {
+        margin: 0,
+        fontSize: { default: "clamp(1.08rem, 1.5vw, 1.3rem)", "@media (max-width: 620px)": "1.08rem" },
+        lineHeight: 1.18,
+        letterSpacing: "-0.025em",
+        fontWeight: 720,
+    },
+    sidebarTitle: { fontSize: "1.08rem" },
+    sectionTitle: { margin: 0, fontSize: "0.92rem", letterSpacing: "-0.01em" },
+    section: { display: "grid", gap: "0.75rem", marginTop: "1.5rem" },
+    list: { display: "grid", gap: "0.45rem" },
+    card: {
+        border: "1px solid var(--border)",
+        borderRadius: 14,
+        backgroundColor: "var(--panel-2)",
+        padding: "0.75rem",
+    },
+    link: { color: "var(--text)", textDecoration: "none" },
+    buttonReset: {
+        appearance: "none",
+        borderWidth: 0,
+        borderStyle: "solid",
+        borderColor: "transparent",
+        outlineWidth: { default: 0, ":focus-visible": 2 },
+        outlineStyle: "solid",
+        outlineColor: "var(--accent)",
+        outlineOffset: 2,
+    },
+    button: {
+        minHeight: "2.5rem",
+        padding: "0.6rem 0.95rem",
+        borderRadius: 8,
+        backgroundColor: {
+            default: "var(--accent)",
+            ":hover": "oklch(0.82 0.14 175)",
+            ":active": "oklch(0.72 0.14 175)",
+        },
+        color: "oklch(0.18 0.03 175)",
+        fontSize: "0.82rem",
+        fontWeight: 720,
+        letterSpacing: "0.01em",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.4rem",
+        cursor: "pointer",
+        boxShadow: "0 1px 2px oklch(0.08 0.02 258 / 0.35)",
+        transition: "background-color 120ms ease, border-color 120ms ease, transform 120ms ease",
+        transform: { default: "translateY(0)", ":active": "translateY(1px)" },
+    },
+    secondaryButton: {
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: { default: "var(--border)", ":hover": "var(--border-strong)" },
+        backgroundColor: {
+            default: "var(--panel-2)",
+            ":hover": "var(--panel-3)",
+            ":active": "var(--panel)",
+        },
+        color: "var(--text)",
+        boxShadow: "none",
+    },
+    buttonIcon: { fontSize: "0.68rem", opacity: 0.8 },
+    navigation: {
+        overflow: "auto",
+        minHeight: 0,
+        padding: "0.75rem 0.65rem 1rem",
+        display: "grid",
+        alignContent: "start",
+        gap: "0.75rem",
+    },
+    navSection: {
+        display: "grid",
+        gap: "0.18rem",
+        padding: "0.35rem",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "var(--border)",
+        borderRadius: 10,
+        backgroundColor: "var(--bg)",
+    },
+    groupHeader: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "0.75rem",
+        padding: "0.48rem 0.52rem 0.55rem",
+        borderBottom: "1px solid var(--border)",
+        marginBottom: "0.08rem",
+    },
+    groupLabel: {
+        color: "var(--text)",
+        fontSize: "0.66rem",
+        fontWeight: 780,
+        letterSpacing: "0.08em",
+        textTransform: "uppercase",
+    },
+    groupCount: { color: "var(--subtle)", fontSize: "0.66rem", fontVariantNumeric: "tabular-nums" },
+    navLink: {
+        display: "block",
+        padding: "0.55rem 0.6rem",
+        borderRadius: 8,
+        fontSize: "0.78rem",
+        fontWeight: 540,
+        lineHeight: 1.38,
+        color: "var(--muted)",
+        textDecoration: "none",
+        border: "1px solid transparent",
+        backgroundColor: { default: "transparent", ":hover": "var(--panel)" },
+    },
+    navItemHeader: {
+        display: "grid",
+        gridTemplateColumns: "0.65rem minmax(0, 1fr)",
+        alignItems: "flex-start",
+        gap: "0.5rem",
+    },
+    navItemTitle: { minWidth: 0 },
+    navStatus: {
+        display: "grid",
+        placeItems: "center",
+        width: "0.65rem",
+        height: "1.1rem",
+    },
+    navStatusDot: { width: 7, height: 7, borderRadius: 999, backgroundColor: "var(--muted)" },
+    navStatusDotPass: { backgroundColor: "var(--pass)" },
+    navStatusDotFail: { backgroundColor: "var(--fail)" },
+    navStatusDotRunning: { backgroundColor: "var(--skip)", boxShadow: "0 0 0 3px var(--skip-soft)" },
+    active: {
+        backgroundColor: "var(--panel-2)",
+        color: "var(--text)",
+        borderColor: "transparent",
+        boxShadow: "none",
+    },
+    hero: {
+        padding: { default: "1.1rem 1.25rem", "@media (max-width: 620px)": "1rem" },
+        border: "1px solid var(--border)",
+        borderRadius: 12,
+        backgroundColor: "var(--panel)",
+        display: "grid",
+        gap: "0.7rem",
+        boxShadow: "0 10px 30px oklch(0.08 0.02 258 / 0.14)",
+    },
+    heroTop: {
+        display: "grid",
+        gridTemplateColumns: {
+            default: "minmax(0, 1fr) max-content",
+            "@media (max-width: 620px)": "1fr",
+        },
+        alignItems: "flex-start",
+        gap: "1rem",
+    },
+    heroCopy: { display: "grid", gap: "0.35rem", maxWidth: "56rem", minWidth: 0 },
+    heroAction: {
+        justifySelf: { default: "end", "@media (max-width: 620px)": "start" },
+        alignSelf: "start",
+    },
+    description: { color: "var(--muted)", fontSize: "0.82rem", lineHeight: 1.5, maxWidth: "54rem" },
+    path: {
+        color: "var(--subtle)",
+        fontSize: "0.7rem",
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+        wordBreak: "break-word",
+        paddingTop: "0.6rem",
+        borderTopWidth: 1,
+        borderTopStyle: "solid",
+        borderTopColor: "var(--border)",
+    },
+    meta: { color: "var(--muted)", fontSize: "0.8rem", lineHeight: 1.45 },
+    contextPanel: {
+        border: "1px solid var(--border)",
+        borderRadius: 12,
+        backgroundColor: "var(--panel)",
+        overflow: "hidden",
+    },
+    contextHeader: {
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: "1rem",
+        padding: "0.75rem 0.9rem",
+        borderBottom: "1px solid var(--border)",
+    },
+    contextIntro: { display: "grid", gap: "0.2rem" },
+    resourceCount: { color: "var(--accent)", fontSize: "0.75rem", fontWeight: 700 },
+    detailsBody: { padding: "0.75rem", display: "grid", gap: "0.6rem" },
+    setupBody: { padding: "0.85rem 0.9rem", display: "grid", gap: "1.15rem" },
+    setupSection: { display: "grid", gap: "0.55rem" },
+    setupSectionHeader: {
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: "1rem",
+    },
+    setupSectionCopy: { display: "grid", gap: "0.12rem" },
+    resourceGrid: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(min(17rem, 100%), 22rem))",
+        gap: "0.6rem",
+    },
+    resourceCard: {
+        display: "grid",
+        alignContent: "start",
+        gap: "0.5rem",
+        padding: "0.7rem 0.75rem",
+    },
+    resourceHeader: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "0.75rem",
+    },
+    resourceKind: {
+        color: "var(--accent)",
+        backgroundColor: "var(--accent-soft)",
+        borderRadius: 999,
+        padding: "0.16rem 0.48rem",
+        fontSize: "0.65rem",
+        fontWeight: 750,
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+    },
+    resourceBody: { display: "grid", gap: "0.5rem" },
+    resourceFacts: { display: "grid", gap: "0.22rem" },
+    resourceDescription: {
+        color: "var(--text)",
+        fontSize: "0.77rem",
+        lineHeight: 1.5,
+        margin: 0,
+    },
+    resourceFact: {
+        display: "grid",
+        gridTemplateColumns: "4.5rem minmax(0, 1fr)",
+        gap: "0.65rem",
+        alignItems: "baseline",
+    },
+    resourceFactLabel: {
+        color: "var(--subtle)",
+        fontSize: "0.7rem",
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: "0.04em",
+    },
+    resourceFactValue: { color: "var(--muted)", fontSize: "0.78rem", wordBreak: "break-word" },
+    resourcePrompt: {
+        marginTop: "0.5rem",
+        padding: "0.55rem",
+        borderRadius: 8,
+        border: "1px solid var(--border)",
+        backgroundColor: "var(--bg)",
+        display: "grid",
+        gap: "0.25rem",
+    },
+    disclosureIcon: { color: "var(--accent)", fontSize: "0.8rem" },
+    workspaceRow: {
+        padding: "0.65rem 0.75rem",
+        border: "1px solid var(--border)",
+        borderRadius: 9,
+        backgroundColor: "var(--panel-2)",
+        display: "grid",
+        gap: "0.25rem",
+    },
+    tabList: {
+        display: "flex",
+        gap: "1.25rem",
+        marginTop: "0.75rem",
+        padding: "0 0.25rem",
+        borderBottomWidth: 1,
+        borderBottomStyle: "solid",
+        borderBottomColor: "var(--border)",
+        overflowX: "auto",
+        overflowY: "hidden",
+    },
+    tab: {
+        flex: "0 0 auto",
+        minHeight: "2.35rem",
+        marginBottom: -1,
+        padding: "0.7rem 0.15rem 0.65rem",
+        borderBottomWidth: 2,
+        borderBottomColor: "transparent",
+        borderRadius: 0,
+        backgroundColor: "transparent",
+        color: "var(--muted)",
+        fontSize: "0.8rem",
+        fontWeight: 680,
+        cursor: "pointer",
+        whiteSpace: "nowrap",
+    },
+    tabActive: {
+        color: "var(--text)",
+        borderBottomColor: "var(--accent)",
+    },
+    tabPanel: { marginTop: "0.7rem" },
+    tabSection: { display: "grid", gap: "1rem" },
+    historyList: { display: "grid", gap: "0.65rem", marginTop: "1rem" },
+    historyButton: {
+        width: "100%",
+        padding: "0.65rem 0.8rem",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: { default: "var(--border)", ":hover": "var(--border-strong)" },
+        borderRadius: 10,
+        backgroundColor: { default: "var(--panel-2)", ":hover": "var(--panel-3)" },
+        color: "var(--text)",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "1rem",
+        textAlign: "left",
+    },
+    historyIdentity: { display: "grid", gap: "0.2rem", minWidth: 0 },
+    historyDate: { color: "var(--muted)", fontSize: "0.78rem" },
+    historyId: {
+        color: "var(--subtle)",
+        fontSize: "0.72rem",
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+    },
+    sectionHeading: {
+        display: "flex",
+        alignItems: "flex-end",
+        justifyContent: "space-between",
+        gap: "1rem",
+        flexWrap: "wrap",
+    },
+    quietHeader: {
+        display: "flex",
+        justifyContent: "flex-end",
+        marginBottom: "0.75rem",
+    },
+    statusPanel: {
+        display: "grid",
+        gap: "0.85rem",
+    },
+    runControls: { display: "flex", justifyContent: "flex-end" },
+    row: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "1rem" },
+    attemptActions: { display: "flex", alignItems: "center", gap: "0.55rem", flex: "none" },
+    copyFailureButton: {
+        minHeight: "1.75rem",
+        padding: "0.3rem 0.55rem",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "var(--border)",
+        borderRadius: 7,
+        backgroundColor: { default: "var(--panel-2)", ":hover": "var(--panel-3)" },
+        color: "var(--text)",
+        fontSize: "0.68rem",
+        fontWeight: 680,
+        cursor: "pointer",
+    },
+    attemptCard: {
+        border: "1px solid var(--border)",
+        borderRadius: 12,
+        backgroundColor: "var(--panel)",
+        padding: "0.85rem",
+        display: "grid",
+        gap: "0.7rem",
+    },
+    attemptTitle: { fontSize: "0.84rem", lineHeight: 1.4 },
+    resultPanel: {
+        display: "grid",
+        gap: "0.55rem",
+        padding: "0.75rem",
+        borderRadius: 10,
+        backgroundColor: "var(--panel-2)",
+        border: "1px solid var(--border)",
+    },
+    contentHeading: { margin: 0, fontSize: "0.79rem", color: "var(--text)" },
+    resultOutput: {
+        margin: 0,
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        fontSize: "0.82rem",
+        lineHeight: 1.6,
+        color: "var(--text)",
+    },
+    assertionCard: {
+        display: "grid",
+        gap: "0.4rem",
+        marginTop: "-0.1rem",
+        marginLeft: "1.5rem",
+        padding: "0.15rem 0 0.15rem 0.75rem",
+        borderLeftWidth: 2,
+        borderLeftStyle: "solid",
+        borderLeftColor: "var(--fail)",
+    },
+    assertionTitle: { color: "var(--fail)", fontSize: "0.74rem" },
+    assertionValues: {
+        display: "grid",
+        gap: "0.35rem",
+        margin: 0,
+    },
+    assertionValue: {
+        display: "grid",
+        gridTemplateColumns: "5rem minmax(0, 1fr)",
+        alignItems: "baseline",
+        gap: "0.65rem",
+    },
+    assertionLabel: {
+        color: "var(--subtle)",
+        fontSize: "0.65rem",
+        fontWeight: 750,
+        letterSpacing: "0.05em",
+        textTransform: "uppercase",
+    },
+    assertionCode: {
+        margin: 0,
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+        fontSize: "0.75rem",
+        lineHeight: 1.5,
+        color: "var(--text)",
+    },
+    metricGrid: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(6rem, 1fr))",
+        gap: "0.4rem",
+    },
+    metric: {
+        display: "grid",
+        gap: "0.15rem",
+        padding: "0.5rem 0.6rem",
+        borderRadius: 8,
+        backgroundColor: "var(--bg)",
+        border: "1px solid var(--border)",
+    },
+    metricValue: { color: "var(--text)", fontSize: "0.77rem", fontWeight: 700 },
+    conversation: {
+        display: "grid",
+        gap: "0.55rem",
+        padding: "0.75rem",
+        border: "1px solid var(--border)",
+        borderRadius: 10,
+        backgroundColor: "var(--bg)",
+    },
+    conversationSwitcher: {
+        display: "flex",
+        alignItems: "center",
+        gap: "0.35rem",
+        padding: "0 0.15rem",
+    },
+    conversationHeader: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "0.75rem",
+    },
+    runTabs: { display: "inline-flex", alignItems: "center", gap: "0.12rem" },
+    runTab: {
+        padding: "0.12rem 0.3rem",
+        borderRadius: 4,
+        backgroundColor: { default: "transparent", ":hover": "var(--panel-3)" },
+        color: "var(--subtle)",
+        fontSize: "0.5rem",
+        fontWeight: 750,
+        letterSpacing: "0.04em",
+        textTransform: "uppercase",
+        cursor: "pointer",
+    },
+    runTabActive: { backgroundColor: "var(--accent-soft)", color: "var(--accent)" },
+    conversationTabs: { display: "flex", flexWrap: "wrap", gap: "0.25rem" },
+    conversationTab: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "0.2rem",
+        boxSizing: "border-box",
+        height: "1.1rem",
+        minHeight: 0,
+        lineHeight: 1,
+        padding: "0.08rem 0.32rem",
+        fontSize: "0.5rem",
+        fontWeight: 750,
+        letterSpacing: "0.04em",
+        textTransform: "uppercase",
+        borderColor: "var(--border)",
+        backgroundColor: { default: "transparent", ":hover": "var(--panel-3)" },
+        color: "var(--muted)",
+        cursor: "pointer",
+    },
+    conversationTabActive: {
+        borderColor: "var(--pass)",
+        backgroundColor: "var(--pass-soft)",
+        color: "var(--pass)",
+    },
+    conversationTabDot: {
+        width: "0.28rem",
+        height: "0.28rem",
+        borderRadius: 999,
+        backgroundColor: "var(--skip)",
+        animationName: runningPulse,
+        animationDuration: {
+            default: "1.2s",
+            "@media (prefers-reduced-motion: reduce)": "0.01ms",
+        },
+        animationIterationCount: {
+            default: "infinite",
+            "@media (prefers-reduced-motion: reduce)": 1,
+        },
+        animationTimingFunction: "ease-in-out",
+    },
+    conversationThread: { display: "grid", gap: "0.55rem" },
+    runningIndicator: {
+        display: "inline-flex",
+        alignItems: "baseline",
+        justifySelf: "start",
+        gap: "0.35rem",
+        padding: "0.48rem 0.65rem",
+        border: "1px solid var(--border)",
+        borderRadius: 999,
+        backgroundColor: "var(--panel-2)",
+        color: "var(--muted)",
+        fontSize: "0.74rem",
+        fontWeight: 650,
+    },
+    runningDots: { display: "inline-flex", gap: "0.15rem", color: "var(--accent)" },
+    runningDot: {
+        animationName: runningPulse,
+        animationDuration: {
+            default: "1.2s",
+            "@media (prefers-reduced-motion: reduce)": "0.01ms",
+        },
+        animationIterationCount: {
+            default: "infinite",
+            "@media (prefers-reduced-motion: reduce)": 1,
+        },
+        animationTimingFunction: "ease-in-out",
+    },
+    runningDotSecond: { animationDelay: "0.16s" },
+    runningDotThird: { animationDelay: "0.32s" },
+    message: {
+        display: "grid",
+        gap: "0.28rem",
+        padding: "0.65rem 0.75rem",
+        borderRadius: 10,
+        border: "1px solid var(--border)",
+        backgroundColor: "var(--panel-2)",
+        maxWidth: "78%",
+    },
+    messageUser: {
+        justifySelf: "end",
+        backgroundColor: "var(--accent-soft)",
+        borderColor: "oklch(0.75 0.12 175 / 0.3)",
+    },
+    messageAssistant: { justifySelf: "start", backgroundColor: "var(--panel-2)" },
+    messageJudge: {
+        justifySelf: "start",
+        backgroundColor: "var(--accent-soft)",
+        borderColor: "oklch(0.75 0.12 175 / 0.3)",
+    },
+    messageRole: {
+        color: "var(--subtle)",
+        fontSize: "0.61rem",
+        fontWeight: 750,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+    },
+    messageContent: { margin: 0, color: "var(--text)", fontSize: "0.79rem", lineHeight: 1.5 },
+    judgeResponse: {
+        display: "grid",
+        justifySelf: "start",
+        gap: "0.4rem",
+        padding: "0.65rem 0.7rem",
+        border: "1px solid var(--border)",
+        borderRadius: 10,
+        backgroundColor: "var(--panel-2)",
+        maxWidth: "78%",
+    },
+    judgeResponseHeading: {
+        margin: 0,
+        color: "var(--subtle)",
+        fontSize: "0.61rem",
+        fontWeight: 750,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+    },
+    judgeOutcomeList: { display: "grid", gap: "0.25rem" },
+    judgeOutcome: {
+        display: "grid",
+        gridTemplateColumns: "0.9rem minmax(0, 1fr)",
+        gap: "0.15rem 0.6rem",
+    },
+    judgeOutcomeLabel: { color: "var(--text)", fontSize: "0.75rem", lineHeight: 1.35 },
+    judgeOutcomeExplanation: {
+        gridColumn: 2,
+        margin: 0,
+        color: "var(--muted)",
+        fontSize: "0.75rem",
+        lineHeight: 1.5,
+    },
+    toolEvent: {
+        display: "grid",
+        gridTemplateColumns: "1.5rem minmax(0, 1fr) max-content",
+        alignItems: "center",
+        gap: "0.55rem",
+        width: "min(86%, 46rem)",
+        padding: "0.5rem 0.65rem",
+        borderRadius: 8,
+        border: "1px solid var(--border)",
+        backgroundColor: "var(--panel)",
+    },
+    toolIcon: {
+        width: "1.5rem",
+        height: "1.5rem",
+        display: "grid",
+        placeItems: "center",
+        borderRadius: 6,
+        backgroundColor: "var(--panel-3)",
+        color: "var(--accent)",
+        fontSize: "0.7rem",
+    },
+    toolCopy: { display: "grid", gap: "0.08rem", minWidth: 0 },
+    toolTitle: { color: "var(--text)", fontSize: "0.74rem", fontWeight: 680 },
+    toolDetail: {
+        color: "var(--muted)",
+        fontSize: "0.69rem",
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    toolOutcome: { color: "var(--pass)", fontSize: "0.64rem", fontWeight: 700 },
+    toolOutcomeFail: { color: "var(--fail)" },
+    toolActions: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: "0.45rem",
+    },
+    toolResultSummary: {
+        padding: "0.14rem 0.3rem",
+        borderRadius: 4,
+        backgroundColor: { default: "transparent", ":hover": "var(--accent-soft)" },
+        color: { default: "var(--accent)", ":hover": "var(--accent)" },
+        cursor: "pointer",
+        fontSize: "0.66rem",
+        fontWeight: 700,
+        whiteSpace: "nowrap",
+    },
+    toolResultPre: {
+        gridColumn: "2 / -1",
+        margin: 0,
+        paddingTop: "0.4rem",
+        borderTop: "1px solid var(--border)",
+        maxHeight: "12rem",
+        overflow: "auto",
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        fontSize: "0.66rem",
+        lineHeight: 1.45,
+        color: "var(--muted)",
+    },
+    criteriaPanel: {
+        display: "grid",
+        gap: "0.55rem",
+        padding: "0.75rem 0.9rem",
+        borderBottom: "1px solid var(--border)",
+    },
+    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 },
+    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 },
+    criterionResults: { display: "grid" },
+    criterionResultList: {
+        display: "grid",
+        gap: "0.55rem",
+        margin: 0,
+        padding: 0,
+        listStyle: "none",
+    },
+    criterionResult: {
+        display: "grid",
+        gap: "0.45rem",
+    },
+    criterionResultHeader: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "0.6rem",
+        color: "var(--muted)",
+        fontSize: "0.82rem",
+    },
+    criterionExplanation: {
+        margin: "0 0 0 1.5rem",
+        color: "var(--subtle)",
+        fontSize: "0.75rem",
+        lineHeight: 1.45,
+    },
+    criterionOutcome: {
+        display: "inline-flex",
+        justifyContent: "center",
+        width: "0.9rem",
+        flex: "0 0 0.9rem",
+        fontSize: "0.8rem",
+        fontWeight: 800,
+        lineHeight: 1.25,
+    },
+    criterionOutcomePass: { color: "var(--pass)" },
+    criterionOutcomeFail: { color: "var(--fail)" },
+    criterionOutcomePending: { color: "var(--skip)" },
+    criterionOutcomeUnknown: { color: "var(--subtle)" },
+    status: {
+        fontSize: "0.68rem",
+        fontWeight: 750,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+        padding: "0.2rem 0.55rem",
+        borderRadius: 999,
+        border: "1px solid var(--border)",
+        color: "var(--muted)",
+    },
+    statusPass: {
+        color: "var(--pass)",
+        borderColor: "var(--pass)",
+        backgroundColor: "var(--pass-soft)",
+    },
+    statusFail: {
+        color: "var(--fail)",
+        borderColor: "var(--fail)",
+        backgroundColor: "var(--fail-soft)",
+    },
+    statusRunning: {
+        color: "var(--skip)",
+        borderColor: "var(--skip)",
+        backgroundColor: "var(--skip-soft)",
+    },
+    error: {
+        margin: 0,
+        padding: "0.85rem 1rem",
+        border: "1px solid oklch(0.73 0.18 25 / 0.36)",
+        borderRadius: 9,
+        backgroundColor: "var(--fail-soft)",
+        color: "oklch(0.88 0.08 25)",
+    },
+    evidence: { borderTop: "1px solid var(--border)", paddingTop: "0.7rem" },
+    evidenceSummary: {
+        display: "flex",
+        alignItems: "center",
+        gap: "0.5rem",
+        cursor: "pointer",
+        color: "var(--muted)",
+        fontSize: "0.82rem",
+        fontWeight: 650,
+        padding: "0.2rem 0",
+    },
+    pre: {
+        margin: "0.7rem 0 0",
+        overflow: "auto",
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        fontSize: "0.76rem",
+        lineHeight: 1.55,
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+        color: "oklch(0.86 0.02 255)",
+        backgroundColor: "var(--bg)",
+        border: "1px solid var(--border)",
+        borderRadius: 9,
+        padding: "0.85rem",
+    },
+    empty: { color: "var(--muted)", fontStyle: "italic", padding: "1rem 0" },
+});
+function ViewerLayout() {
+    const [sidebarOpen, setSidebarOpen] = useState(true);
+    const [workers, setWorkers] = useState(1);
+    return (_jsx(WorkerContext.Provider, { value: { workers, setWorkers }, children: _jsxs("div", { ...stylex.props(styles.shell, !sidebarOpen && styles.shellCollapsed), children: [_jsx("a", { href: "#viewer-main", ...stylex.props(styles.skipLink), children: "Skip to content" }), _jsx(ViewerSidebar, { open: sidebarOpen, onToggle: () => setSidebarOpen((open) => !open) }), _jsx("main", { id: "viewer-main", tabIndex: -1, ...stylex.props(styles.main), children: _jsx(Outlet, {}) })] }) }));
+}
+function useCatalog() {
+    return useQuery({ queryKey: ["test-catalog"], queryFn: fetchTestCatalog });
+}
+function ViewerSidebar({ open, onToggle }) {
+    const catalog = useCatalog();
+    const history = useExecutionHistory();
+    const groups = groupTests(catalog.data?.tests ?? []);
+    const statuses = latestTestStatuses(history.data ?? []);
+    return (_jsxs("aside", { ...stylex.props(styles.sidebar, !open && styles.sidebarCollapsed), children: [_jsx(SidebarHeader, { open: open, count: catalog.data?.tests.length ?? 0, onToggle: onToggle }), open ? (_jsx(SidebarNavigation, { groups: groups, statuses: statuses, error: catalog.isError })) : null] }));
+}
+function SidebarHeader({ open, count, onToggle, }) {
+    const { workers } = useContext(WorkerContext);
+    const navigate = useNavigate();
+    const client = useQueryClient();
+    const run = useMutation({
+        mutationFn: () => startSuite(workers),
+        onSuccess: ({ executionId }) => {
+            void client.invalidateQueries({ queryKey: ["execution-history"] });
+            void navigate({ to: "/executions/$executionId", params: { executionId } });
+        },
+    });
+    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", { ...stylex.props(styles.title, styles.sidebarTitle), children: "Tests" }), _jsx("span", { ...stylex.props(styles.countBadge), children: count })] }), _jsx(SidebarToggle, { open: open, 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, { open: open, onToggle: onToggle })) }));
+}
+function WorkerControl() {
+    const { workers, setWorkers } = useContext(WorkerContext);
+    return (_jsxs("label", { ...stylex.props(styles.workerControl), children: [_jsx("span", { children: "Workers" }), _jsx("input", { type: "number", "aria-label": "Concurrent workers", min: 1, max: 32, value: workers, ...stylex.props(styles.workerInput), onChange: (event) => {
+                    const next = Number(event.currentTarget.value);
+                    if (Number.isInteger(next))
+                        setWorkers(Math.min(32, Math.max(1, next)));
+                } })] }));
+}
+function SidebarToggle({ open, onToggle }) {
+    return (_jsx("button", { type: "button", "aria-controls": "test-navigation", "aria-expanded": open, "aria-label": open ? "Collapse test sidebar" : "Expand test sidebar", ...stylex.props(styles.buttonReset, styles.toggleButton), onClick: onToggle, children: open ? "←" : "→" }));
+}
+function SidebarNavigation({ groups, statuses, error, }) {
+    return (_jsxs(_Fragment, { children: [error ? _jsx("p", { role: "alert", children: "Test discovery is unavailable." }) : null, _jsx("nav", { id: "test-navigation", "aria-label": "Tests", ...stylex.props(styles.navigation), children: [...groups].map(([name, tests]) => (_jsxs("section", { "aria-label": `${name} tests`, ...stylex.props(styles.navSection), children: [_jsxs("div", { ...stylex.props(styles.groupHeader), children: [_jsx("strong", { ...stylex.props(styles.groupLabel), children: name }), _jsxs("div", { ...stylex.props(styles.groupHeaderActions), children: [_jsx("span", { ...stylex.props(styles.groupCount), children: tests.length }), _jsx(RunTestGroupButton, { name: name, tests: tests })] })] }), tests.map((test) => (_jsx(TestLink, { test: test, status: statuses.get(test.id) }, test.id)))] }, name))) })] }));
+}
+function RunTestGroupButton({ name, tests }) {
+    const { workers } = useContext(WorkerContext);
+    const navigate = useNavigate();
+    const client = useQueryClient();
+    const run = useMutation({
+        mutationFn: () => startTestGroup(tests.map((test) => test.id), workers),
+        onSuccess: ({ executionId }) => {
+            void client.invalidateQueries({ queryKey: ["execution-history"] });
+            void navigate({ to: "/executions/$executionId", params: { executionId } });
+        },
+    });
+    return (_jsx("button", { type: "button", "aria-label": `Run ${name} suite`, title: `Run ${name} suite`, ...stylex.props(styles.buttonReset, styles.groupRunButton), onClick: () => run.mutate(), disabled: run.isPending, children: run.isPending ? "●" : "▶" }));
+}
+function TestLink({ test, status }) {
+    return (_jsxs(Link, { to: "/tests/$testId", params: { testId: test.id }, search: {}, ...stylex.props(styles.navLink), activeProps: stylex.props(styles.navLink, styles.active), children: [_jsxs("div", { ...stylex.props(styles.navItemHeader), children: [status ? _jsx(TestStatus, { status: status }) : _jsx("span", { "aria-hidden": "true" }), _jsx("span", { ...stylex.props(styles.navItemTitle), children: test.title.at(-1) })] }), test.project !== "default" ? _jsx("div", { ...stylex.props(styles.meta), children: test.project }) : null] }));
+}
+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();
+    if (catalog.isPending)
+        return _jsx("p", { children: "Loading test\u2026" });
+    const test = catalog.data?.tests.find((item) => item.id === testId);
+    if (!test)
+        return (_jsx("p", { role: "alert", children: "This test is no longer available. Choose another test in the sidebar." }));
+    return _jsx(TestDetail, { test: test }, test.id);
+}
+function TestDetail({ test }) {
+    const { execution, view } = testRoute.useSearch();
+    const history = useExecutionHistory();
+    const navigate = useNavigate();
+    const runs = history.data?.filter((item) => item.testIds?.includes(test.id)) ?? [];
+    const selected = execution ?? runs[0]?.id;
+    const activeView = view ?? "current";
+    const chooseExecution = (id) => void navigate({
+        to: "/tests/$testId",
+        params: { testId: test.id },
+        search: { execution: id },
+    });
+    const chooseView = (next) => void navigate({
+        to: "/tests/$testId",
+        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 })] }));
+}
+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] })] }));
+}
+const TEST_VIEWS = [
+    { id: "current", label: "Current run" },
+    { id: "setup", label: "Test setup" },
+    { id: "history", label: "Run history" },
+];
+function TestTabs({ active, onChange }) {
+    return (_jsx("div", { role: "tablist", "aria-label": "Test views", ...stylex.props(styles.tabList), children: TEST_VIEWS.map((view) => (_jsx("button", { id: `test-tab-${view.id}`, type: "button", role: "tab", "aria-controls": `test-panel-${view.id}`, "aria-selected": active === view.id, tabIndex: active === view.id ? 0 : -1, ...stylex.props(styles.buttonReset, styles.tab, active === view.id && styles.tabActive), onClick: () => onChange(view.id), onKeyDown: (event) => handleTabKeyDown(event, view.id, onChange), children: view.label }, view.id))) }));
+}
+function handleTabKeyDown(event, active, onChange) {
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key))
+        return;
+    event.preventDefault();
+    const index = TEST_VIEWS.findIndex((view) => view.id === active);
+    const nextIndex = event.key === "Home"
+        ? 0
+        : event.key === "End"
+            ? TEST_VIEWS.length - 1
+            : (index + (event.key === "ArrowRight" ? 1 : -1) + TEST_VIEWS.length) % TEST_VIEWS.length;
+    const next = TEST_VIEWS[nextIndex];
+    if (!next)
+        return;
+    onChange(next.id);
+    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] }));
+}
+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, 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, 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 RunTestButton({ test, onStarted }) {
+    const { workers } = useContext(WorkerContext);
+    const client = useQueryClient();
+    const run = useMutation({
+        mutationFn: () => startTest(test.id, workers),
+        onSuccess: ({ executionId }) => {
+            onStarted(executionId);
+            void client.invalidateQueries({ queryKey: ["execution-history"] });
+        },
+    });
+    return (_jsxs("div", { ...stylex.props(styles.heroAction), children: [_jsxs("button", { type: "button", ...stylex.props(styles.buttonReset, styles.button), onClick: () => run.mutate(), disabled: run.isPending, children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.buttonIcon), children: run.isPending ? "●" : "▶" }), run.isPending ? "Starting…" : "Run this test"] }), run.isError ? _jsx("p", { role: "alert", children: run.error.message }) : null] }));
+}
+function TestResources({ test }) {
+    const resources = test.resources ?? [];
+    const agents = resources.filter((resource) => resource.kind === "agent");
+    const judges = resources.filter((resource) => resource.kind === "judge");
+    return (_jsxs("section", { "aria-label": "Test setup details", ...stylex.props(styles.contextPanel), children: [_jsx(CriteriaSetup, { test: test }), _jsxs("div", { ...stylex.props(styles.setupBody), children: [_jsx(ResourceSection, { title: "Agents", description: "Task agents this test can start.", resources: agents }), _jsx(ResourceSection, { title: "Judges", description: "Reviewers that evaluate agent output.", resources: judges }), _jsx(WorkspaceSetup, { test: 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." }))] }));
+}
+function ResourceSection({ title, description, resources, }) {
+    const id = `setup-${title.toLowerCase()}`;
+    const noun = title === "Agents" ? "agent" : "judge";
+    return (_jsxs("section", { "aria-labelledby": id, ...stylex.props(styles.setupSection), children: [_jsxs("header", { ...stylex.props(styles.setupSectionHeader), children: [_jsxs("div", { ...stylex.props(styles.setupSectionCopy), children: [_jsx("h3", { id: id, ...stylex.props(styles.contentHeading), children: title }), _jsx("p", { ...stylex.props(styles.meta), children: description })] }), _jsxs("span", { ...stylex.props(styles.resourceCount), children: [resources.length, " ", pluralize(resources.length, noun)] })] }), resources.length ? (_jsx("div", { ...stylex.props(styles.resourceGrid), children: resources.map((resource) => (_jsx(ResourceCard, { resource: resource }, resource.name))) })) : (_jsx("p", { ...stylex.props(styles.meta), children: "None declared." }))] }));
+}
+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 })] })] }));
+}
+function testCriteria(test) {
+    if (test.criteria?.length)
+        return test.criteria;
+    return test.description ? [test.description] : [];
+}
+function ResourceContext({ resource }) {
+    return (_jsxs("div", { ...stylex.props(styles.resourceBody), children: [resource.description ? (_jsx("p", { ...stylex.props(styles.resourceDescription), children: resource.description })) : null, _jsxs("div", { ...stylex.props(styles.resourceFacts), children: [_jsx(ResourceFact, { label: "Host", value: resource.host ?? "Not configured" }), _jsx(ResourceFact, { label: "Model", value: resource.model ?? "Host default" }), resource.workspace ? _jsx(ResourceFact, { label: "Workspace", value: resource.workspace }) : null, resource.skills.length ? (_jsx(ResourceFact, { label: "Skills", value: resource.skills.join(", ") })) : null, resource.mcpServers.length ? (_jsx(ResourceFact, { label: "MCP", value: resource.mcpServers.join(", ") })) : null] }), resource.prompt ? (_jsxs("div", { ...stylex.props(styles.resourcePrompt), children: [_jsx("span", { ...stylex.props(styles.resourceFactLabel), children: "Prompt" }), _jsx("p", { ...stylex.props(styles.resourceFactValue), children: resource.prompt })] })) : null] }));
+}
+function ResourceFact({ label, value }) {
+    return (_jsxs("div", { ...stylex.props(styles.resourceFact), children: [_jsx("span", { ...stylex.props(styles.resourceFactLabel), children: label }), _jsx("span", { ...stylex.props(styles.resourceFactValue), children: value })] }));
+}
+function TestExecution({ id, test }) {
+    const detail = useQuery({
+        queryKey: ["execution", id],
+        queryFn: () => fetchExecution(id),
+    });
+    if (detail.isPending)
+        return _jsx("p", { children: "Loading execution\u2026" });
+    if (!detail.data)
+        return _jsx("p", { role: "alert", children: "Execution is unavailable." });
+    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) }));
+}
+function ExecutionPage() {
+    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 });
+}
+function ExecutionDetailView({ execution, criteria = [], }) {
+    const client = useQueryClient();
+    const cancel = useMutation({
+        mutationFn: () => cancelExecution(execution.id),
+        onSuccess: () => client.invalidateQueries({ queryKey: ["execution", execution.id] }),
+    });
+    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" ? (_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] })] }));
+}
+function emptyExecutionMessage(execution, stopping) {
+    if (stopping)
+        return "Stopping this run…";
+    if (execution.status === "interrupted")
+        return "Run stopped before the first test started.";
+    if (execution.status === "failed")
+        return "Run failed before the first test started.";
+    if (execution.status === "passed")
+        return "Run completed without starting a test.";
+    const count = execution.testIds?.length ?? 0;
+    return count ? `Starting ${count} ${pluralize(count, "test")}…` : "Starting the test run…";
+}
+function ComparePage() {
+    const { left, right } = compareRoute.useParams();
+    const [first, second] = useQueries({
+        queries: [left, right].map((id) => ({
+            queryKey: ["execution", id],
+            queryFn: () => fetchExecution(id),
+        })),
+    });
+    if (first.isLoading || second.isLoading)
+        return _jsx("p", { ...stylex.props(styles.empty), children: "Loading saved runs\u2026" });
+    if (!first.data || !second.data)
+        return _jsx("p", { ...stylex.props(styles.empty), children: "A selected execution is unavailable." });
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ...stylex.props(styles.brand), children: "Saved run comparison" }), _jsx("h2", { ...stylex.props(styles.title), children: "Two execution records" }), _jsxs("section", { ...stylex.props(styles.section), children: [_jsx(ComparisonColumn, { label: "First", execution: first.data }), _jsx(ComparisonColumn, { label: "Second", execution: second.data })] })] }));
+}
+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 })] }));
+}
+function CopyFailureButton({ attempt, criteria }) {
+    const [state, setState] = useState("idle");
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(failureDebugText(attempt, criteria));
+            setState("copied");
+        }
+        catch {
+            setState("failed");
+        }
+    };
+    return (_jsx("button", { type: "button", "aria-label": "Copy failure details", ...stylex.props(styles.buttonReset, styles.copyFailureButton), onClick: () => void copy(), children: state === "copied" ? "Copied" : state === "failed" ? "Copy failed" : "Copy details" }));
+}
+function failureDebugText(attempt, criteria) {
+    const result = operationResult(attempt.operations);
+    const title = attempt.title.filter(Boolean);
+    const output = [...attempt.output.stdout, ...attempt.output.stderr].join("\n");
+    return [
+        "Fix this agent test failure.",
+        "Use the evidence below. Preserve the test's intent unless its expectation is incorrect.",
+        "",
+        `Test: ${title.at(-1) ?? "Unnamed test"}`,
+        `Title path: ${title.join(" › ")}`,
+        `Attempt: ${attempt.id}`,
+        `Project: ${attempt.project || "default"}`,
+        `Status: ${attempt.status}`,
+        "",
+        "Criteria:",
+        ...failureCriterionLines(attempt, criteria),
+        "",
+        "Errors:",
+        ...(attempt.errors.length
+            ? attempt.errors.map((error) => error.message ?? "Test failed")
+            : ["(none)"]),
+        "",
+        "Conversation and tools:",
+        ...(result.timeline.length ? result.timeline.map(debugTimelineLine) : ["(none recorded)"]),
+        "",
+        "Test process output:",
+        output || "(none)",
+    ].join("\n");
+}
+function failureCriterionLines(attempt, criteria) {
+    return criteria.map((criterion, index) => {
+        const outcome = criterionDisplayOutcome({
+            criterion,
+            index,
+            results: attempt.criterionResults,
+            status: attempt.status,
+            errors: attempt.errors,
+        });
+        return `- [${outcome}] ${criterion}`;
+    });
+}
+function debugTimelineLine(event) {
+    if (event.kind === "message")
+        return `${event.message.role}: ${event.message.content}`;
+    const args = event.tool.args ? ` ${JSON.stringify(event.tool.args)}` : "";
+    const result = event.tool.result ? `\n  result: ${event.tool.result}` : "";
+    return `tool ${event.tool.name}:${args}${result}`;
+}
+function TechnicalDetails({ operations, output, }) {
+    return (_jsxs("details", { ...stylex.props(styles.evidence), children: [_jsxs("summary", { ...stylex.props(styles.evidenceSummary), children: [_jsx("span", { ...stylex.props(styles.disclosureIcon), children: "\u203A" }), "Technical details"] }), _jsx("p", { ...stylex.props(styles.meta), children: "Low-level evidence for debugging the test runner, separate from the agent conversation." }), _jsx(EvidencePanel, { label: "Test process logs (stdout / stderr)", value: output, empty: "The test process did not write to stdout or stderr." }), _jsx(EvidencePanel, { label: "Diagnostics", value: JSON.stringify(operations, null, 2), empty: "No diagnostics were captured." })] }));
+}
+function EvidencePanel({ label, value, empty }) {
+    return (_jsxs("details", { ...stylex.props(styles.evidence), children: [_jsxs("summary", { ...stylex.props(styles.evidenceSummary), children: [_jsx("span", { ...stylex.props(styles.disclosureIcon), children: "\u203A" }), label] }), value ? (_jsx("pre", { ...stylex.props(styles.pre), children: value })) : (_jsx("p", { ...stylex.props(styles.meta), children: empty }))] }));
+}
+function messagesFromOperation(value) {
+    if (!isRecord(value))
+        return [];
+    const trace = isRecord(value.trace)
+        ? value.trace
+        : isRecord(value.conversation)
+            ? value.conversation
+            : undefined;
+    if (!trace || !Array.isArray(trace.messages))
+        return [];
+    return uniqueMessages(trace.messages.flatMap((message) => isRecord(message) && typeof message.role === "string" && typeof message.content === "string"
+        ? [{ role: message.role, content: message.content, seq: optionalNumber(message.seq) }]
+        : []));
+}
+function toolCallsFromOperation(value) {
+    if (!isRecord(value))
+        return [];
+    const trace = isRecord(value.trace)
+        ? value.trace
+        : isRecord(value.conversation)
+            ? value.conversation
+            : undefined;
+    if (!trace || !Array.isArray(trace.toolCalls))
+        return [];
+    return trace.toolCalls.flatMap((call) => {
+        if (!isRecord(call) || typeof call.name !== "string")
+            return [];
+        return [
+            {
+                name: call.name,
+                args: isRecord(call.args) ? call.args : undefined,
+                result: optionalString(call.result),
+                succeeded: typeof call.succeeded === "boolean" ? call.succeeded : undefined,
+                exitCode: optionalNumber(call.exitCode),
+                seq: optionalNumber(call.seq),
+            },
+        ];
+    });
+}
+function operationResult(operations) {
+    const records = operations.flatMap((operation) => operation.data).filter(isRecord);
+    const completed = [...records].reverse().find((value) => value.output !== undefined);
+    const source = completed ?? records.at(-1);
+    if (!source)
+        return { timeline: [] };
+    const prompt = records.map((record) => optionalString(record.prompt)).find(Boolean);
+    return {
+        prompt,
+        output: conversationOutput(source.output),
+        durationMs: optionalNumber(source.durationMs),
+        totalTokens: nestedNumber(source.usage, "tokens", "total"),
+        toolCallCount: optionalArrayLength(source.toolCalls),
+        changedPathCount: nestedArrayLength(source.workspace, "changedPaths"),
+        timeline: completed
+            ? conversationTimeline(source, prompt)
+            : liveConversationTimeline(records, prompt),
+    };
+}
+function conversationOutput(value) {
+    if (typeof value === "string")
+        return value;
+    if (!isRecord(value))
+        return undefined;
+    const reason = optionalString(value.reason);
+    const facts = Object.entries(value)
+        .filter(([key]) => key !== "reason")
+        .map(([key, item]) => `${humanizeKey(key)}: ${formatConversationValue(item)}`);
+    return [reason, ...facts].filter(Boolean).join("\n\n");
+}
+function humanizeKey(value) {
+    return value
+        .replace(CAMEL_CASE_BOUNDARY, "$1 $2")
+        .replace(INITIAL_CHARACTER, (letter) => letter.toUpperCase());
+}
+function formatConversationValue(value) {
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean")
+        return String(value);
+    return JSON.stringify(value);
+}
+function liveConversationTimeline(records, prompt) {
+    const timeline = prompt
+        ? [{ kind: "message", message: { role: "user", content: prompt, seq: -1 } }]
+        : [];
+    for (const [index, record] of records.entries()) {
+        const tool = liveToolEvent(record, index);
+        if (tool)
+            timeline.push(tool);
+        if (record.type === "text" && typeof record.text === "string")
+            appendLiveText(timeline, record.text, index);
+    }
+    return timeline;
+}
+function liveToolEvent(record, seq) {
+    if (record.type !== "tool" || typeof record.name !== "string")
+        return undefined;
+    return {
+        kind: "tool",
+        tool: {
+            name: record.name,
+            args: isRecord(record.args) ? record.args : undefined,
+            result: optionalString(record.result),
+            exitCode: optionalNumber(record.exitCode),
+            succeeded: typeof record.succeeded === "boolean" ? record.succeeded : undefined,
+            seq,
+        },
+    };
+}
+function appendLiveText(timeline, content, seq) {
+    const last = timeline.at(-1);
+    if (last?.kind === "message" && last.message.role === "assistant") {
+        last.message.content = content;
+        return;
+    }
+    timeline.push({ kind: "message", message: { role: "assistant", content, seq } });
+}
+function conversationTimeline(source, prompt) {
+    const tools = toolCallsFromOperation(source);
+    const messages = messagesFromOperation(source).filter((message) => message.role !== "tool" || tools.length === 0);
+    const judgeInput = judgeInputMessages(source.input);
+    if (prompt && !messages.some((message) => message.role === "user" && message.content === prompt))
+        messages.unshift({ role: "user", content: prompt, seq: -1 });
+    const output = conversationOutput(source.output);
+    if (judgeInput.length && output && !messages.some((message) => message.role === "assistant"))
+        messages.push({ role: "assistant", content: output, seq: 1 });
+    return [
+        ...judgeInput.map((message) => ({ kind: "message", message })),
+        ...messages.map((message) => ({ kind: "message", message })),
+        ...tools.map((tool) => ({ kind: "tool", tool })),
+    ].sort((left, right) => eventOrder(left) - eventOrder(right));
+}
+function judgeInputMessages(value) {
+    if (!isRecord(value))
+        return [];
+    return Object.entries(value).flatMap(([key, item], index) => {
+        if (typeof item !== "string")
+            return [];
+        return [
+            {
+                role: key === "answer" ? "Agent response" : humanizeKey(key),
+                content: item,
+                seq: index - Object.keys(value).length - 1,
+            },
+        ];
+    });
+}
+function eventOrder(event) {
+    const value = event.kind === "message" ? event.message.seq : event.tool.seq;
+    if (value !== undefined)
+        return value;
+    if (event.kind === "tool")
+        return 0;
+    return event.message.role === "user" ? -1 : 1;
+}
+function optionalString(value) {
+    return typeof value === "string" ? value : undefined;
+}
+function optionalNumber(value) {
+    return typeof value === "number" ? value : undefined;
+}
+function optionalArrayLength(value) {
+    return Array.isArray(value) ? value.length : undefined;
+}
+function nestedNumber(value, parent, child) {
+    if (!isRecord(value) || !isRecord(value[parent]))
+        return undefined;
+    return optionalNumber(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 FailureDetails({ message }) {
+    const comparison = assertionComparison(message);
+    if (!comparison)
+        return _jsx("pre", { ...stylex.props(styles.pre, styles.error), children: stripAnsi(message) });
+    return (_jsxs("section", { "aria-label": "Expected vs received", ...stylex.props(styles.assertionCard), children: [_jsx("strong", { ...stylex.props(styles.assertionTitle), children: "Expected vs received" }), _jsxs("dl", { ...stylex.props(styles.assertionValues), children: [_jsx(AssertionValue, { label: "Expected", value: comparison.expected }), _jsx(AssertionValue, { label: "Received", value: comparison.received })] })] }));
+}
+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,
+        explanation: explanations[index],
+        outcome: criterionDisplayOutcome({ criterion, index, results, status, errors }),
+    }));
+    const failed = presentations.filter((item) => item.outcome === "failed");
+    return presentations.map((item) => {
+        const matched = errors.find((error) => criterionMatchesError(item.criterion, error.message));
+        const onlyFailure = failed.length === 1 && errors.length === 1 ? errors[0] : undefined;
+        return {
+            ...item,
+            failure: item.outcome === "failed" ? (matched?.message ?? onlyFailure?.message) : undefined,
+        };
+    });
+}
+function CriterionResults({ presentations }) {
+    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))) }) }));
+}
+function criterionDisplayOutcome(input) {
+    const outcome = criterionOutcome(input);
+    if (outcome !== "not-recorded" || input.status !== "failed")
+        return outcome;
+    return input.errors.some((error) => criterionMatchesError(input.criterion, error.message))
+        ? "failed"
+        : outcome;
+}
+function criterionMatchesError(criterion, message) {
+    if (!message)
+        return false;
+    const comparison = assertionComparison(message);
+    const expected = comparison?.expected.trim();
+    return Boolean(expected && criterion.includes(expected));
+}
+function criterionOutcome({ criterion, index, results, status, }) {
+    const recorded = results.find((result) => result.criterion === criterion) ?? results[index];
+    if (recorded)
+        return recorded.status;
+    if (status === "passed")
+        return "passed";
+    if (status === "running")
+        return "pending";
+    return "not-recorded";
+}
+function CriterionResultRow({ criterion, outcome, explanation, failure, }) {
+    const label = outcome === "not-recorded" ? "Not recorded" : capitalize(outcome);
+    return (_jsxs("li", { ...stylex.props(styles.criterionResult), children: [_jsxs("div", { ...stylex.props(styles.criterionResultHeader), children: [_jsx(CriterionOutcomeIcon, { outcome: outcome, label: label }), _jsx("span", { children: criterion })] }), explanation ? _jsx("p", { ...stylex.props(styles.criterionExplanation), children: explanation }) : null, failure ? _jsx(FailureDetails, { message: failure }) : null] }));
+}
+function CriterionOutcomeIcon({ outcome, label }) {
+    return (_jsx("span", { role: "img", "aria-label": label, ...stylex.props(styles.criterionOutcome, outcome === "passed" && styles.criterionOutcomePass, outcome === "failed" && styles.criterionOutcomeFail, outcome === "pending" && styles.criterionOutcomePending, outcome === "not-recorded" && styles.criterionOutcomeUnknown), children: criterionSymbol(outcome) }));
+}
+function criterionSymbol(outcome) {
+    if (outcome === "passed")
+        return "✓";
+    if (outcome === "failed")
+        return "×";
+    if (outcome === "pending")
+        return "…";
+    return "–";
+}
+function capitalize(value) {
+    return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+}
+function ResultMetrics({ result }) {
+    const metrics = [
+        ["Duration", result.durationMs === undefined ? "—" : formatDuration(result.durationMs)],
+        ["Tokens", result.totalTokens === undefined ? "—" : result.totalTokens.toLocaleString()],
+        ["Tool calls", result.toolCallCount === undefined ? "—" : String(result.toolCallCount)],
+        [
+            "Files changed",
+            result.changedPathCount === undefined ? "—" : String(result.changedPathCount),
+        ],
+    ];
+    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, }) {
+    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] }));
+}
+function conversationContent(operation, operations) {
+    if (operation?.kind === "evaluation") {
+        const judge = judgeReviewData(operation);
+        return {
+            judge,
+            timeline: judge.question
+                ? [
+                    {
+                        kind: "message",
+                        message: { role: "Judge question", content: judge.question, seq: -1 },
+                    },
+                ]
+                : [],
+        };
+    }
+    const result = operationResult(operation ? [operation] : []);
+    return {
+        timeline: [...legacyJudgeInput(operation, operations), ...recordedTimeline(result)],
+    };
+}
+function recordedTimeline(result) {
+    if (result.timeline.length)
+        return result.timeline;
+    if (!result.output)
+        return [];
+    return [{ kind: "message", message: { role: "assistant", content: result.output } }];
+}
+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 }) {
+    if (!review || (!review.outcomes.length && !review.reason))
+        return null;
+    return _jsx(JudgeFindings, { outcomes: review.outcomes, reason: review.reason });
+}
+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 judgeReviewData(operation) {
+    const records = operation.data.filter(isRecord);
+    const record = [...records].reverse().find((item) => item.output !== undefined) ?? records.at(-1);
+    const output = isRecord(record?.output) ? record.output : {};
+    const reason = optionalString(output.reason) ?? conversationOutput(record?.output);
+    return {
+        question: judgeQuestion(record),
+        outcomes: judgeOutcomes(output, reason),
+        reason,
+    };
+}
+function judgeQuestion(record) {
+    const evaluation = isRecord(record?.evaluation) ? record.evaluation : undefined;
+    return optionalString(evaluation?.prompt);
+}
+function judgeOutcomes(output, fallbackExplanation) {
+    const entries = Object.entries(output).filter((entry) => typeof entry[1] === "boolean");
+    const fallbacks = splitJudgeExplanation(fallbackExplanation, entries.length);
+    return entries.map(([key, passed], index) => ({
+        label: humanizeKey(key),
+        passed,
+        explanation: judgeOutcomeExplanation(output, key) ?? fallbacks[index],
+    }));
+}
+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]) ??
+        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 legacyJudgeInput(operation, operations) {
+    if (!operation || operation.kind !== "evaluation")
+        return [];
+    if (operation.data.some((item) => isRecord(item) && isRecord(item.input)))
+        return [];
+    const index = operations.findIndex((item) => item.id === operation.id);
+    const agent = operations
+        .slice(0, index)
+        .reverse()
+        .find((item) => item.kind === "agent");
+    if (!agent)
+        return [];
+    const result = operationResult([agent]);
+    const timeline = [];
+    if (result.prompt)
+        timeline.push({
+            kind: "message",
+            message: { role: "Task", content: result.prompt, seq: -3 },
+        });
+    if (result.output)
+        timeline.push({
+            kind: "message",
+            message: { role: "Agent response", content: result.output, seq: -2 },
+        });
+    return timeline;
+}
+function ConversationTabs({ 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({
+                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 conversationLabel(operation) {
+    return `${operation?.name ?? "Unnamed"} · ${operation?.kind === "evaluation" ? "Judge" : "Agent"}`;
+}
+function conversationGroups(operations) {
+    const groups = new Map();
+    for (const operation of operations) {
+        const key = operationIdentity(operation);
+        const group = groups.get(key);
+        if (group)
+            group.operations.push(operation);
+        else
+            groups.set(key, { key, operations: [operation] });
+    }
+    return [...groups.values()];
+}
+function operationIdentity(operation) {
+    return `${operation.name ?? "Unnamed"}\u0000${operation.kind}`;
+}
+function ConversationRunTabs({ operation, operations, select, }) {
+    if (!operation)
+        return null;
+    const runs = operations.filter((item) => operationIdentity(item) === operationIdentity(operation));
+    if (runs.length < 2)
+        return null;
+    return (_jsx("div", { role: "tablist", "aria-label": `${operation.name ?? "Agent"} runs`, ...stylex.props(styles.runTabs), children: runs.map((run, index) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": run.id === operation.id, ...stylex.props(styles.buttonReset, styles.runTab, run.id === operation.id && styles.runTabActive), onClick: () => select(run.id), onKeyDown: (event) => selectConversationWithKeyboard({ event, operations: runs, index, select }), children: ["Run ", index + 1] }, run.id))) }));
+}
+function selectConversationWithKeyboard(input) {
+    const { event, operations, index, select } = input;
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+        return;
+    event.preventDefault();
+    const direction = event.key === "ArrowRight" ? 1 : -1;
+    const next = operations[(index + direction + operations.length) % operations.length];
+    if (!next)
+        return;
+    select(next.id);
+    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 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] }));
+}
+function toolPresentation(tool) {
+    const name = tool.name.toLowerCase();
+    const failed = tool.succeeded === false || (tool.exitCode !== undefined && tool.exitCode !== 0);
+    const outcome = tool.exitCode !== undefined ? `Exit ${tool.exitCode}` : failed ? "Failed" : "Completed";
+    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 };
+    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 };
+}
+function argument(tool, key) {
+    const value = tool.args?.[key];
+    return typeof value === "string" ? value : summarizeArgs(tool.args);
+}
+function summarizeArgs(args) {
+    if (!args || Object.keys(args).length === 0)
+        return "";
+    const value = JSON.stringify(args);
+    return value.length > 140 ? `${value.slice(0, 137)}…` : value;
+}
+function MessageBubble({ message }) {
+    return (_jsxs("div", { ...stylex.props(styles.message, (message.role === "user" || message.role === "Task" || message.role === "Judge question") &&
+            styles.messageUser, (message.role === "assistant" || message.role === "Agent response") &&
+            styles.messageAssistant, message.role === "Judge response" && styles.messageJudge), children: [_jsx("span", { ...stylex.props(styles.messageRole), children: message.role }), _jsx("div", { ...stylex.props(styles.messageContent), children: _jsx("div", { className: "message-markdown", children: _jsx(Markdown, { children: normalizeTranscriptMarkdown(message.content) }) }) })] }));
+}
+function normalizeTranscriptMarkdown(content) {
+    return content.replace(LOCAL_PATH_LINK, (_match, label) => `\`${label}\``);
+}
+function uniqueMessages(messages) {
+    const seen = new Set();
+    return messages.filter((message) => {
+        const key = `${message.role}\u0000${message.content}`;
+        if (seen.has(key))
+            return false;
+        seen.add(key);
+        return true;
+    });
+}
+function formatDuration(durationMs) {
+    return durationMs < 1_000 ? `${durationMs} ms` : `${(durationMs / 1_000).toFixed(1)} s`;
+}
+function pluralize(count, noun) {
+    return count === 1 ? noun : `${noun}s`;
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+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))) }));
+}
+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 existing = summaries.get(key);
+        if (existing)
+            existing.count++;
+        else
+            summaries.set(key, { key, name, status: operation.status, count: 1 });
+    }
+    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);
+        }
+    }
+    return statuses;
+}
+function groupTests(tests) {
+    const groups = new Map();
+    for (const test of tests) {
+        const name = test.title.slice(0, -1).join(" › ") || test.file;
+        groups.set(name, [...(groups.get(name) ?? []), test]);
+    }
+    return groups;
+}
+//# sourceMappingURL=v2-client.js.map