feat(ui): paint trial glyph by QA verdict, keep shape as outcome

A GOOD_FAILURE trial rendered as a red X with a nearly invisible 4px
green corner dot, and the analyzer legend labeled that dot "Pass" — an
expected failure was indistinguishable from a bad one, or read as a
success. The mirror case (BAD_SUCCESS) showed an unqualified green
check.

Make the cell semiotics uniform: glyph shape encodes the execution
outcome (check/cross), fill color encodes the QA verdict once the trial
is classified (green = good, red = bad). A good failure is now a green
X, a bad success a red check; good-success and bad-failure look exactly
as before.

- status-config: getQaGlyphMatrixClass(status, classification) holds the
  2x2 rule; shared ANALYSIS_CLASSIFICATION_LABELS. Only binary outcomes
  take the tone — partials keep the warm ramp, transitional states stay
  neutral.
- trials matrix: apply the tone fill, show the corner dot only when it
  still carries information (QA running/failed, classified partial or
  error), and use the classification label in aria-label/tooltip.
- legend: rename tone chips Pass/Fail to Good/Bad rendered as a check+X
  glyph pair, and rewrite the anatomy demo to teach shape=result,
  color=QA verdict.
- trial-detail navigator: same override via the shared helper.

Verified with tsc, eslint, and a browser-rendered harness covering all
classification x outcome combinations (harness removed after).

Author: kyle-compute

frontend/src/components/experiment-trials-table.tsx

@@ -76,11 +76,14 @@ import {
   taskHasCancellableWork,
 } from "@/lib/job-status";
 import {
+  ANALYSIS_CLASSIFICATION_LABELS,
   formatPartialRewardBadgeValue,
   formatRewardPercent,
   formatRewardValue,
   getMatrixStatus,
+  getQaGlyphMatrixClass,
   getRewardStyle,
+  QA_TONE_MATRIX_CLASS,
   STATUS_CONFIG,
   STATUS_GLYPH_BOX,
   type MatrixStatus,
@@ -331,12 +334,12 @@ const ANALYSIS_LEGEND_ITEMS: Array<{
   },
   {
     key: "good",
-    label: "Pass",
+    label: "Good",
     dotClass: ANALYSIS_CONFIG.GOOD_SUCCESS.dotClass,
   },
   {
     key: "bad",
-    label: "Fail",
+    label: "Bad",
     dotClass: ANALYSIS_CONFIG.BAD_SUCCESS.dotClass,
   },
   {
@@ -1562,6 +1565,22 @@ export function ExperimentTrialsTable({
     "analysis-failed": "var(--paper-a-failed)",
   };
 
+  // Good/bad chips show the tone painted on both outcome shapes — a ✓✗
+  // pair — so the legend teaches the cell semiotics (shape = outcome,
+  // color = QA verdict) instead of implying green means "pass".
+  const renderToneGlyphPair = (tone: "good" | "bad") => (
+    <span className="inline-flex items-center gap-[2px]">
+      {(["pass", "fail"] as const).map((shape) => (
+        <span
+          key={shape}
+          className={`inline-flex h-[14px] w-[16px] items-center justify-center rounded-[3px] border ${QA_TONE_MATRIX_CLASS[tone]}`}
+        >
+          <StatusIcon status={shape} className="h-2 w-2" />
+        </span>
+      ))}
+    </span>
+  );
+
   const renderAnalyzerChip = (item: (typeof ANALYSIS_LEGEND_ITEMS)[number]) => {
     const isDimmed = dimmedAnalysisKeys.has(item.key);
     return (
@@ -1575,10 +1594,14 @@ export function ExperimentTrialsTable({
               isDimmed ? "line-through opacity-[0.38]" : ""
             }`}
           >
-            <span
-              className={`inline-block h-2 w-2 rounded-full ${item.animate ? "animate-pulse" : ""}`}
-              style={{ background: ANALYZER_CHIP_COLOR[item.key] }}
-            />
+            {item.key === "good" || item.key === "bad" ? (
+              renderToneGlyphPair(item.key)
+            ) : (
+              <span
+                className={`inline-block h-2 w-2 rounded-full ${item.animate ? "animate-pulse" : ""}`}
+                style={{ background: ANALYZER_CHIP_COLOR[item.key] }}
+              />
+            )}
             <span>{item.label}</span>
           </Button>
         </TooltipTrigger>
@@ -1593,31 +1616,46 @@ export function ExperimentTrialsTable({
     <Tooltip>
       <TooltipTrigger asChild>
         <div className="flex items-center gap-2.5 border-r border-dashed border-[color:var(--paper-line)] pr-2.5 pl-1.5 font-mono text-[9.5px] leading-tight text-[color:var(--paper-ink-3)]">
-          <span className="relative inline-flex">
+          <span className="relative inline-flex gap-[3px]">
             <span
               className={`flex items-center justify-center border-transparent bg-[color:var(--paper-pass)] text-white ${STATUS_GLYPH_BOX}`}
             >
               <StatusIcon status="pass" />
             </span>
+            <span
+              className={`flex items-center justify-center border-transparent text-white ${STATUS_GLYPH_BOX} ${
+                showAnalysis
+                  ? "bg-[color:var(--paper-pass)]"
+                  : "bg-[color:var(--paper-fail)]"
+              }`}
+            >
+              <StatusIcon status="fail" />
+            </span>
             {showAnalysis && (
-              <span className="absolute -top-[2px] -right-[2px] h-[7px] w-[7px] rounded-full bg-[color:var(--paper-a-good)] ring-[1.5px] ring-[color:var(--paper-surface)]" />
+              <span className="absolute -top-[2px] -right-[2px] h-[7px] w-[7px] animate-pulse rounded-full bg-[color:var(--paper-a-analyzing)] ring-[1.5px] ring-[color:var(--paper-surface)]" />
             )}
           </span>
           <span className="flex flex-col gap-0.5">
             <span className="inline-flex items-center gap-1.5 whitespace-nowrap">
-              <span className="inline-block h-2.5 w-2.5 rounded-[2px] bg-[color:var(--paper-pass)]" />
-              trial result
+              <StatusIcon status="pass" className="h-2.5 w-2.5" />
+              <StatusIcon status="fail" className="h-2.5 w-2.5" />
+              shape = trial result
             </span>
             {showAnalysis && (
               <span className="inline-flex items-center gap-1.5 whitespace-nowrap">
-                <span className="mx-[1px] inline-block h-2 w-2 rounded-full bg-[color:var(--paper-a-good)]" />
-                QA result
+                <span className="inline-block h-2.5 w-2.5 rounded-[2px] bg-[color:var(--paper-pass)]" />
+                <span className="inline-block h-2.5 w-2.5 rounded-[2px] bg-[color:var(--paper-fail)]" />
+                color = QA verdict
               </span>
             )}
           </span>
         </div>
       </TooltipTrigger>
-      <TooltipContent>How to read a cell</TooltipContent>
+      <TooltipContent>
+        How to read a cell: ✓/✗ is the trial outcome; once QA classifies a
+        trial, green means the outcome is good (expected) and red means bad — a
+        green ✗ is a good failure. A pulsing dot means QA is still running.
+      </TooltipContent>
     </Tooltip>
   );
 
@@ -2435,6 +2473,25 @@ export function ExperimentTrialsTable({
                                     dimmedAnalysisKeys.has(analysisLegendKey)
                                       ? "opacity-25"
                                       : "";
+                                  // A classified binary outcome takes its QA
+                                  // tone as the glyph fill: shape = outcome,
+                                  // color = QA verdict. A good failure is a
+                                  // green ✗, a bad success a red ✓.
+                                  const classification =
+                                    trial.analysis_status === "success"
+                                      ? (trial.analysis?.classification ?? null)
+                                      : null;
+                                  const qaGlyphClass = showAnalysis
+                                    ? getQaGlyphMatrixClass(
+                                        status,
+                                        classification
+                                      )
+                                    : null;
+                                  const cellLabel = classification
+                                    ? ANALYSIS_CLASSIFICATION_LABELS[
+                                        classification
+                                      ]
+                                    : config.shortLabel;
                                   const baseTitle = getTrialTitle(
                                     trial,
                                     status
@@ -2476,9 +2533,9 @@ export function ExperimentTrialsTable({
                                             trialGroups,
                                           });
                                         }}
-                                        className={`relative grid place-items-center gap-0 p-0 leading-none transition-transform hover:-translate-y-px ${STATUS_GLYPH_BOX} ${config.matrixClass} ${isPartial ? "font-mono text-[9.5px] font-semibold tracking-[-0.02em] tabular-nums" : ""}`}
+                                        className={`relative grid place-items-center gap-0 p-0 leading-none transition-transform hover:-translate-y-px ${STATUS_GLYPH_BOX} ${qaGlyphClass ?? config.matrixClass} ${isPartial ? "font-mono text-[9.5px] font-semibold tracking-[-0.02em] tabular-nums" : ""}`}
                                         style={getRewardStyle(trial.reward)}
-                                        aria-label={`Trial ${trialIndex + 1} ${config.shortLabel}`}
+                                        aria-label={`Trial ${trialIndex + 1} ${cellLabel}`}
                                         title={fullTitle}
                                       >
                                         {isPartial ? (
@@ -2487,7 +2544,7 @@ export function ExperimentTrialsTable({
                                           <StatusIcon status={status} />
                                         )}
                                       </Button>
-                                      {analysisIndicator && (
+                                      {analysisIndicator && !qaGlyphClass && (
                                         <span
                                           aria-hidden="true"
                                           className={`pointer-events-none absolute -top-[1px] -right-[1px] h-[4px] w-[4px] rounded-full ring-[1px] ring-[color:var(--paper-surface)] ${analysisIndicator.dotClass} ${analysisIndicator.animate ? "animate-pulse" : ""}`}

frontend/src/components/trial-detail-panel.tsx

@@ -74,10 +74,12 @@ import {
   sumTaskTrialCost,
 } from "@/lib/format";
 import {
+  ANALYSIS_CLASSIFICATION_LABELS,
   formatPartialRewardBadgeValue,
   formatRewardPercent,
   formatRewardValue,
   getMatrixStatus,
+  getQaGlyphMatrixClass,
   getRewardStyle,
   STATUS_CONFIG,
   STATUS_GLYPH_BOX,
@@ -1255,6 +1257,20 @@ export function TrialDetailPanel({
                     groupTrial.error_message,
                   );
                   const groupConfig = STATUS_CONFIG[groupStatus];
+                  // Same cell semiotics as the experiment matrix: a
+                  // classified binary outcome takes its QA tone as the
+                  // glyph fill (good failure = green ✗, bad success = red ✓).
+                  const groupClassification =
+                    groupTrial.analysis_status === "success"
+                      ? (groupTrial.analysis?.classification ?? null)
+                      : null;
+                  const groupQaGlyphClass = getQaGlyphMatrixClass(
+                    groupStatus,
+                    groupClassification,
+                  );
+                  const groupLabel = groupClassification
+                    ? ANALYSIS_CLASSIFICATION_LABELS[groupClassification]
+                    : groupConfig.shortLabel;
                   const isPartial = groupStatus === "partial";
                   const partialLabel = isPartial
                     ? formatPartialRewardBadgeValue(groupTrial.reward)
@@ -1270,7 +1286,7 @@ export function TrialDetailPanel({
                       className={cn(
                         "flex items-center justify-center p-0 leading-none transition hover:opacity-90",
                         STATUS_GLYPH_BOX,
-                        groupConfig.matrixClass,
+                        groupQaGlyphClass ?? groupConfig.matrixClass,
                         isPartial
                           ? "font-mono text-[9.5px] font-semibold tracking-[-0.02em] tabular-nums"
                           : "",
@@ -1279,8 +1295,8 @@ export function TrialDetailPanel({
                           : "",
                       )}
                       style={getRewardStyle(groupTrial.reward)}
-                      aria-label={`Trial ${index + 1} ${groupConfig.shortLabel}`}
-                      title={`${groupConfig.shortLabel} • Trial ${index + 1}`}
+                      aria-label={`Trial ${index + 1} ${groupLabel}`}
+                      title={`${groupLabel} • Trial ${index + 1}`}
                     >
                       {isPartial ? (
                         partialLabel

frontend/src/lib/status-config.ts

@@ -10,6 +10,8 @@ import {
 } from "lucide-react";
 import type { CSSProperties } from "react";
 
+import type { AnalysisClassification } from "@/lib/types";
+
 /**
  * Trial status types that map to visual states in the UI.
  * These are derived from trial.status and trial.reward values.
@@ -25,6 +27,59 @@ export type MatrixStatus =
   | "queued"
   | "running";
 
+/**
+ * QA judgment tone for a classified trial. The glyph semiotics are:
+ * shape = execution outcome (✓ pass / ✗ fail), fill color = QA verdict
+ * (green = good, red = bad). This makes an expected "good failure" render
+ * as a green ✗ instead of a red ✗ with a nearly-invisible green dot, and
+ * a "bad success" as a red ✓ instead of an unqualified green ✓.
+ */
+export type QaTone = "good" | "bad";
+
+/**
+ * Matrix glyph fill for a QA tone. Reuses the pass/fail paper tokens so a
+ * recolored cell is indistinguishable in hue from an unclassified one —
+ * only the shape-vs-color meaning changes.
+ */
+export const QA_TONE_MATRIX_CLASS: Record<QaTone, string> = {
+  good: "bg-paper-pass text-white border-paper-pass hover:opacity-90",
+  bad: "bg-paper-fail text-white border-paper-fail hover:opacity-90",
+};
+
+/** Human label per QA classification, shared by every trial-glyph surface. */
+export const ANALYSIS_CLASSIFICATION_LABELS: Record<
+  AnalysisClassification,
+  string
+> = {
+  GOOD_SUCCESS: "Good success",
+  GOOD_FAILURE: "Good failure",
+  BAD_SUCCESS: "Bad success",
+  BAD_FAILURE: "Bad failure",
+  HARNESS_ERROR: "Harness error",
+};
+
+/**
+ * Glyph fill override for a classified trial, or null when the outcome
+ * glyph keeps its default color. Only binary outcomes (pass/fail) take the
+ * QA tone; partials keep their warm ramp and non-terminal or non-scored
+ * states keep their neutral styling, with the QA tone still surfaced
+ * through the corner dot. GOOD_SUCCESS pass and BAD_FAILURE fail resolve
+ * to the same color they already had — the rule stays uniform.
+ */
+export function getQaGlyphMatrixClass(
+  status: MatrixStatus,
+  classification: AnalysisClassification | null | undefined
+): string | null {
+  if (status !== "pass" && status !== "fail") return null;
+  if (classification === "GOOD_SUCCESS" || classification === "GOOD_FAILURE") {
+    return QA_TONE_MATRIX_CLASS.good;
+  }
+  if (classification === "BAD_SUCCESS" || classification === "BAD_FAILURE") {
+    return QA_TONE_MATRIX_CLASS.bad;
+  }
+  return null;
+}
+
 /**
  * Status configuration for consistent styling across the UI.
  *