@sanity/ailf-studio 0.1.27 → 0.2.0

package/dist/index.js

@@ -3045,14 +3045,14 @@ import { route } from "sanity/router";
 // src/components/Dashboard.tsx
 import {
   Container,
-  Flex as Flex22,
-  Stack as Stack24,
+  Flex as Flex28,
+  Stack as Stack29,
   Tab as Tab2,
   TabList as TabList2,
   TabPanel as TabPanel2,
-  Text as Text29
+  Text as Text36
 } from "@sanity/ui";
-import { useCallback as useCallback20 } from "react";
+import { useCallback as useCallback21 } from "react";
 import { useRouter as useRouter3 } from "sanity/router";
 
 // src/components/ComparisonView.tsx
@@ -3094,6 +3094,20 @@ var GLOSSARY = {
   // -- Grader judgments ------------------------------------------------------
   lowScoringJudgments: "The grading model's explanations for tests that scored below 70/100.",
   judgmentReason: "The grading model's natural language explanation of what went wrong.",
+  // -- Diagnostics overview ---------------------------------------------------
+  healthStrong: "Feature areas scoring 80 or above. The docs are working well for these features \u2014 AI agents produce correct, complete implementations.",
+  healthAttention: "Feature areas scoring 70\u201379. These are okay but could be improved \u2014 there may be gaps in specific dimensions like doc coverage or code correctness.",
+  healthWeak: "Feature areas scoring below 70. The docs are not providing enough support for AI agents to implement these features correctly.",
+  negativeDocLiftMetric: "Number of areas where the documentation actually hurts AI performance \u2014 the model scores higher without docs than with them. This usually means the docs contain outdated patterns or incorrect examples.",
+  weakAreas: "Feature areas where the overall score is below 70. These need the most attention \u2014 low scores mean AI agents consistently struggle to implement these features.",
+  docsHurt: "Areas where the floor score (no docs) is higher than the ceiling score (with docs). The documentation is actively misleading the model. These docs need to be rewritten or removed.",
+  retrievalIssues: "Areas where AI agents can find less than 70% of the available doc quality. The docs exist and are good, but agents can't discover them through search. Consider improving page titles, metadata, or search engine indexing.",
+  dimWeaknesses: "Individual grading dimensions scoring below 50 within an area. These are the specific skills where AI agents fail most \u2014 task completion (can it build the feature?), code correctness (is the code right?), or doc coverage (did it use the docs?).",
+  efficiencyAnomalies: "Areas where agent efficiency exceeds 100% \u2014 meaning agents perform better with self-found docs than with gold-standard docs injected directly. This can indicate doc quality issues (injected docs confuse the model) or agent memorization.",
+  docLiftWins: "Areas where documentation boosts AI performance by 5 or more points. Higher doc lift means the docs are providing crucial information that the model doesn't already know.",
+  retrievalExcellence: "Areas where AI agents successfully find and use at least 85% of the available doc quality through web search. Good retrieval means your docs are well-indexed and easy for agents to discover.",
+  // -- Strengths (positive diagnostics) ---------------------------------------
+  strengths: "What's working well: high-scoring areas, dimensions where the docs are strong, and areas where AI agents successfully find and use the documentation.",
   // -- Recommendations / gap analysis ----------------------------------------
   recommendations: "Prioritized remediation plan from gap analysis. Each recommendation identifies a documentation problem, the affected feature area, and the estimated score lift from fixing it.",
   totalPotentialLift: "Aggregate potential score lift if all identified gaps were fixed. This is a conservative estimate \u2014 each gap targets the median of non-bottlenecked dimensions, not 100.",
@@ -4606,20 +4620,21 @@ function LatestReports({
 // src/components/report-detail/ReportDetail.tsx
 import { ArrowLeftIcon as ArrowLeftIcon2 } from "@sanity/icons";
 import {
-  Box as Box14,
+  Box as Box20,
   Button as Button5,
-  Stack as Stack22,
+  Flex as Flex24,
+  Stack as Stack24,
   Tab,
   TabList,
   TabPanel,
-  Text as Text27,
-  Tooltip as Tooltip8
+  Text as Text30,
+  Tooltip as Tooltip9
 } from "@sanity/ui";
 import {
-  useCallback as useCallback18,
+  useCallback as useCallback19,
   useEffect as useEffect7,
-  useMemo as useMemo6,
-  useState as useState13
+  useMemo as useMemo7,
+  useState as useState15
 } from "react";
 import { useClient as useClient10 } from "sanity";
 
@@ -4892,306 +4907,581 @@ function GlossaryTip({ text }) {
   );
 }
 
-// src/components/report-detail/AreaScoreTable.tsx
-import React2 from "react";
-import { Card as Card11, Stack as Stack13, Text as Text18 } from "@sanity/ui";
+// src/components/report-detail/DiagnosticsOverview.tsx
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CheckmarkCircleIcon,
+  ErrorOutlineIcon,
+  WarningOutlineIcon
+} from "@sanity/icons";
+import { Box as Box11, Flex as Flex12, Stack as Stack13, Text as Text18 } from "@sanity/ui";
 
-// src/lib/scoring.ts
-var TONE_MAP = {
-  good: "positive",
-  warning: "caution",
-  "needs-work": "default",
-  critical: "critical"
+// src/components/report-detail/diagnostics-styles.ts
+var COLORS = {
+  emerald: {
+    bg: "rgba(16,185,129,0.15)",
+    border: "rgba(16,185,129,0.30)",
+    text: "#34d399"
+  },
+  amber: {
+    bg: "rgba(245,158,11,0.15)",
+    border: "rgba(245,158,11,0.30)",
+    text: "#fbbf24"
+  },
+  orange: {
+    bg: "rgba(249,115,22,0.15)",
+    border: "rgba(249,115,22,0.30)",
+    text: "#fb923c"
+  },
+  red: {
+    bg: "rgba(239,68,68,0.15)",
+    border: "rgba(239,68,68,0.30)",
+    text: "#f87171"
+  },
+  muted: {
+    bg: "transparent",
+    border: "var(--card-border-color)",
+    text: "var(--card-muted-fg-color)"
+  }
 };
-function gradeTone(grade) {
-  return TONE_MAP[grade];
+function colorForScore(score) {
+  if (score >= 80) return "emerald";
+  if (score >= 70) return "amber";
+  if (score >= 50) return "orange";
+  return "red";
 }
-function scoreTone(score) {
-  return gradeTone(scoreGrade(Math.round(score)));
+function scoreColor(score) {
+  return COLORS[colorForScore(score)].text;
 }
-var HEX_MAP = {
-  good: "#2ecc71",
-  warning: "#f1c40f",
-  "needs-work": "#e67e22",
-  critical: "#e74c3c"
-};
-function gradeHex(grade) {
-  return HEX_MAP[grade];
+function scoreBg(score) {
+  return COLORS[colorForScore(score)].bg;
 }
-function scoreHex(score) {
-  return gradeHex(scoreGrade(Math.round(score)));
+function scoreBorder(score) {
+  return COLORS[colorForScore(score)].border;
+}
+function scoreBoxStyle(score) {
+  const key = colorForScore(score);
+  return {
+    alignItems: "center",
+    backgroundColor: COLORS[key].bg,
+    borderRadius: 6,
+    color: COLORS[key].text,
+    display: "flex",
+    fontFamily: "var(--font-code-size)",
+    fontWeight: 700,
+    height: 48,
+    justifyContent: "center",
+    width: 48
+  };
+}
+function barFillColor(score) {
+  const key = colorForScore(score);
+  switch (key) {
+    case "emerald":
+      return "rgba(16,185,129,0.6)";
+    case "amber":
+      return "rgba(245,158,11,0.6)";
+    case "orange":
+      return "rgba(249,115,22,0.6)";
+    case "red":
+      return "rgba(239,68,68,0.6)";
+    default:
+      return "var(--card-border-color)";
+  }
 }
-function rowBackground(index) {
-  return index % 2 === 1 ? "var(--card-muted-bg-color)" : void 0;
+function deltaColor(delta) {
+  if (delta > 0) return COLORS.emerald.text;
+  if (delta < 0) return COLORS.red.text;
+  return "var(--card-muted-fg-color)";
+}
+function efficiencyColor(eff) {
+  if (eff == null) return "var(--card-muted-fg-color)";
+  if (eff >= 0.9) return COLORS.emerald.text;
+  if (eff >= 0.7) return COLORS.amber.text;
+  return COLORS.red.text;
+}
+function sectionStyle(color) {
+  return {
+    backgroundColor: COLORS[color].bg,
+    border: `1px solid ${COLORS[color].border}`,
+    borderRadius: 6
+  };
 }
+var neutralCardStyle = {
+  backgroundColor: "var(--card-bg-color)",
+  border: "1px solid var(--card-border-color)",
+  borderRadius: 6
+};
+var dividerStyle = {
+  borderTop: "1px solid var(--card-border-color)"
+};
 
-// src/components/primitives/ScoreCell.tsx
-import { Card as Card10, Text as Text17 } from "@sanity/ui";
+// src/components/report-detail/InfoTip.tsx
+import { HelpCircleIcon as HelpCircleIcon6 } from "@sanity/icons";
+import { Box as Box10, Text as Text17, Tooltip as Tooltip5 } from "@sanity/ui";
 import { jsx as jsx19 } from "react/jsx-runtime";
-function ScoreCell({ score, size = 2 }) {
-  const rounded = Math.round(score);
+function InfoTip({ text }) {
   return /* @__PURE__ */ jsx19(
-    Card10,
+    Tooltip5,
     {
-      padding: 1,
-      radius: 2,
-      style: {
-        alignItems: "center",
-        display: "flex",
-        flex: 1,
-        justifyContent: "center"
-      },
-      tone: scoreTone(rounded),
-      children: /* @__PURE__ */ jsx19(Text17, { align: "center", size, weight: "medium", children: rounded })
+      content: /* @__PURE__ */ jsx19(Box10, { padding: 2, style: { maxWidth: 280 }, children: typeof text === "string" ? /* @__PURE__ */ jsx19(Text17, { size: 2, children: text }) : text }),
+      placement: "bottom",
+      portal: true,
+      children: /* @__PURE__ */ jsx19(
+        "span",
+        {
+          style: {
+            color: "var(--card-muted-fg-color)",
+            cursor: "help",
+            display: "inline-flex",
+            fontSize: 15,
+            verticalAlign: "middle"
+          },
+          children: /* @__PURE__ */ jsx19(HelpCircleIcon6, {})
+        }
+      )
     }
   );
 }
 
-// src/components/report-detail/AreaScoreTable.tsx
+// src/components/report-detail/DiagnosticsOverview.tsx
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
-function AreaScoreTable({ scores }) {
-  return /* @__PURE__ */ jsx20(Card11, { overflow: "auto", padding: 4, radius: 2, shadow: 1, children: /* @__PURE__ */ jsxs16(Stack13, { space: 4, children: [
-    /* @__PURE__ */ jsx20(Text18, { size: 3, weight: "semibold", children: "Per-Area Scores" }),
+function DiagnosticsOverview({
+  scores,
+  overall,
+  comparison,
+  durationMs,
+  totalTests
+}) {
+  if (scores.length === 0) return null;
+  const strong = scores.filter((s) => s.totalScore >= 80);
+  const attention = scores.filter(
+    (s) => s.totalScore >= 70 && s.totalScore < 80
+  );
+  const weak = scores.filter((s) => s.totalScore < 70);
+  const negativeDocLiftCount = scores.filter((s) => s.docLift < 0).length;
+  const improved = comparison?.improved ?? [];
+  const regressed = comparison?.regressed ?? [];
+  const unchanged = comparison?.unchanged ?? [];
+  const hasComparison = improved.length > 0 || regressed.length > 0 || unchanged.length > 0;
+  return /* @__PURE__ */ jsxs16(Stack13, { space: 4, children: [
     /* @__PURE__ */ jsxs16(
       "div",
       {
         style: {
           display: "grid",
-          gap: "0 8px",
-          gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr 1fr 1fr"
+          gap: 12,
+          gridTemplateColumns: "repeat(4, 1fr)"
         },
         children: [
-          /* @__PURE__ */ jsx20(ColumnHeader, { borderBottom: true, label: "Area" }),
-          /* @__PURE__ */ jsx20(ColumnHeader, { borderBottom: true, label: "Score", tooltip: GLOSSARY.score }),
           /* @__PURE__ */ jsx20(
-            ColumnHeader,
+            ScoreCard,
             {
-              borderBottom: true,
-              label: "Task",
-              tooltip: GLOSSARY.taskCompletion
+              delta: comparison?.deltas.overall,
+              infoTip: GLOSSARY.overallScore,
+              label: "AVG SCORE",
+              subtitle: "Overall quality score",
+              value: Math.round(overall.avgScore)
             }
           ),
           /* @__PURE__ */ jsx20(
-            ColumnHeader,
+            ScoreCard,
             {
-              borderBottom: true,
-              label: "Code",
-              tooltip: GLOSSARY.codeCorrectness
+              delta: comparison?.deltas.docLift,
+              infoTip: GLOSSARY.docLift,
+              label: "AVG DOC LIFT",
+              subtitle: "Improvement with docs",
+              value: Math.round(overall.avgDocLift)
             }
           ),
           /* @__PURE__ */ jsx20(
-            ColumnHeader,
+            ScoreCard,
             {
-              borderBottom: true,
-              label: "Docs",
-              tooltip: GLOSSARY.docCoverage
+              infoTip: GLOSSARY.ceiling,
+              label: "AVG CEILING",
+              subtitle: "Best case performance",
+              value: Math.round(overall.avgCeilingScore ?? 0)
             }
           ),
-          /* @__PURE__ */ jsx20(ColumnHeader, { borderBottom: true, label: "Lift", tooltip: GLOSSARY.docLift }),
-          /* @__PURE__ */ jsx20(ColumnHeader, { borderBottom: true, label: "Tests", tooltip: GLOSSARY.tests }),
-          scores.map((score, i) => /* @__PURE__ */ jsxs16(React2.Fragment, { children: [
-            /* @__PURE__ */ jsx20(
-              "div",
-              {
-                style: {
-                  background: rowBackground(i),
-                  borderRadius: 4,
-                  padding: "8px 0 8px 4px"
-                },
-                children: /* @__PURE__ */ jsx20(Text18, { size: 2, weight: "medium", children: score.feature })
-              }
-            ),
-            /* @__PURE__ */ jsx20(
-              "div",
-              {
-                style: {
-                  background: rowBackground(i),
-                  display: "flex",
-                  padding: "2px 0"
-                },
-                children: /* @__PURE__ */ jsx20(ScoreCell, { score: score.totalScore })
-              }
-            ),
-            /* @__PURE__ */ jsx20(
-              "div",
-              {
-                style: {
-                  background: rowBackground(i),
-                  display: "flex",
-                  padding: "2px 0"
-                },
-                children: /* @__PURE__ */ jsx20(ScoreCell, { score: score.taskCompletion })
-              }
-            ),
-            /* @__PURE__ */ jsx20(
-              "div",
-              {
-                style: {
-                  background: rowBackground(i),
-                  display: "flex",
-                  padding: "2px 0"
-                },
-                children: /* @__PURE__ */ jsx20(ScoreCell, { score: score.codeCorrectness })
-              }
-            ),
-            /* @__PURE__ */ jsx20(
-              "div",
-              {
-                style: {
-                  background: rowBackground(i),
-                  display: "flex",
-                  padding: "2px 0"
-                },
-                children: /* @__PURE__ */ jsx20(ScoreCell, { score: score.docCoverage })
-              }
-            ),
+          overall.avgInfrastructureEfficiency != null ? /* @__PURE__ */ jsx20(
+            ScoreCard,
+            {
+              infoTip: GLOSSARY.infraEfficiency,
+              label: "EFFICIENCY",
+              subtitle: "Infra utilization",
+              suffix: "%",
+              value: Math.round(overall.avgInfrastructureEfficiency * 100)
+            }
+          ) : /* @__PURE__ */ jsx20(
+            ScoreCard,
+            {
+              infoTip: GLOSSARY.floor,
+              label: "AVG FLOOR",
+              subtitle: "Model-only baseline",
+              value: Math.round(overall.avgFloorScore ?? 0)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        style: { display: "grid", gap: 12, gridTemplateColumns: "1fr 1fr 1fr" },
+        children: [
+          /* @__PURE__ */ jsx20(
+            HealthCard,
+            {
+              color: "emerald",
+              count: strong.length,
+              icon: /* @__PURE__ */ jsx20(CheckmarkCircleIcon, {}),
+              infoTip: GLOSSARY.healthStrong,
+              label: "Strong (80+)"
+            }
+          ),
+          /* @__PURE__ */ jsx20(
+            HealthCard,
+            {
+              color: "amber",
+              count: attention.length,
+              icon: /* @__PURE__ */ jsx20(WarningOutlineIcon, {}),
+              infoTip: GLOSSARY.healthAttention,
+              label: "Attention (70-79)"
+            }
+          ),
+          /* @__PURE__ */ jsx20(
+            HealthCard,
+            {
+              color: "red",
+              count: weak.length,
+              icon: /* @__PURE__ */ jsx20(ErrorOutlineIcon, {}),
+              infoTip: GLOSSARY.healthWeak,
+              label: "Weak (<70)"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gap: 12,
+          gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))"
+        },
+        children: [
+          /* @__PURE__ */ jsx20(
+            MetricCard,
+            {
+              infoTip: GLOSSARY.floor,
+              label: "Avg Floor",
+              value: String(Math.round(overall.avgFloorScore ?? 0))
+            }
+          ),
+          overall.avgActualScore != null && /* @__PURE__ */ jsx20(
+            MetricCard,
+            {
+              infoTip: GLOSSARY.actualScore,
+              label: "Avg Actual",
+              value: String(Math.round(overall.avgActualScore))
+            }
+          ),
+          overall.avgRetrievalGap != null && /* @__PURE__ */ jsx20(
+            MetricCard,
+            {
+              infoTip: GLOSSARY.retrievalGap,
+              label: "Avg Retrieval Gap",
+              value: overall.avgRetrievalGap.toFixed(1)
+            }
+          ),
+          /* @__PURE__ */ jsx20(
+            MetricCard,
+            {
+              highlight: negativeDocLiftCount > 0,
+              infoTip: GLOSSARY.negativeDocLiftMetric,
+              label: "Negative Doc Lift",
+              value: `${negativeDocLiftCount} area${negativeDocLiftCount === 1 ? "" : "s"}`
+            }
+          ),
+          totalTests != null && /* @__PURE__ */ jsx20(
+            MetricCard,
+            {
+              infoTip: GLOSSARY.tests,
+              label: "Tests",
+              value: String(totalTests)
+            }
+          ),
+          durationMs != null && durationMs > 0 && /* @__PURE__ */ jsx20(MetricCard, { label: "Duration", value: formatDuration(durationMs) })
+        ]
+      }
+    ),
+    hasComparison && /* @__PURE__ */ jsxs16(Box11, { style: neutralCardStyle, children: [
+      /* @__PURE__ */ jsx20(
+        Box11,
+        {
+          padding: 4,
+          style: { borderBottom: "1px solid var(--card-border-color)" },
+          children: /* @__PURE__ */ jsx20(Text18, { size: 3, weight: "semibold", children: "Change from Previous Run" })
+        }
+      ),
+      /* @__PURE__ */ jsxs16(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr 1fr"
+          },
+          children: [
+            /* @__PURE__ */ jsx20(Box11, { padding: 4, children: /* @__PURE__ */ jsxs16(Stack13, { space: 3, children: [
+              /* @__PURE__ */ jsxs16(Flex12, { align: "center", gap: 2, children: [
+                /* @__PURE__ */ jsx20(ArrowUpIcon, { style: { color: "#34d399" } }),
+                /* @__PURE__ */ jsxs16(Text18, { size: 2, style: { color: "#34d399" }, weight: "medium", children: [
+                  "Improved (",
+                  improved.length,
+                  ")"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx20(Flex12, { gap: 2, wrap: "wrap", children: improved.length > 0 ? improved.map((area) => /* @__PURE__ */ jsx20(Pill, { color: "emerald", label: area }, area)) : /* @__PURE__ */ jsx20(Text18, { muted: true, size: 2, children: "None" }) })
+            ] }) }),
             /* @__PURE__ */ jsx20(
-              "div",
+              Box11,
               {
-                style: {
-                  alignItems: "center",
-                  background: rowBackground(i),
-                  display: "flex"
-                },
-                children: /* @__PURE__ */ jsx20(Text18, { size: 2, children: formatDelta(score.docLift) })
+                padding: 4,
+                style: { borderLeft: "1px solid var(--card-border-color)" },
+                children: /* @__PURE__ */ jsxs16(Stack13, { space: 3, children: [
+                  /* @__PURE__ */ jsxs16(Flex12, { align: "center", gap: 2, children: [
+                    /* @__PURE__ */ jsx20(ArrowDownIcon, { style: { color: "#f87171" } }),
+                    /* @__PURE__ */ jsxs16(Text18, { size: 2, style: { color: "#f87171" }, weight: "medium", children: [
+                      "Regressed (",
+                      regressed.length,
+                      ")"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx20(Flex12, { gap: 2, wrap: "wrap", children: regressed.length > 0 ? regressed.map((area) => /* @__PURE__ */ jsx20(Pill, { color: "red", label: area }, area)) : /* @__PURE__ */ jsx20(Text18, { muted: true, size: 2, children: "None" }) })
+                ] })
               }
             ),
             /* @__PURE__ */ jsx20(
-              "div",
+              Box11,
               {
-                style: {
-                  alignItems: "center",
-                  background: rowBackground(i),
-                  display: "flex"
-                },
-                children: /* @__PURE__ */ jsx20(Text18, { muted: true, size: 2, children: score.testCount })
+                padding: 4,
+                style: { borderLeft: "1px solid var(--card-border-color)" },
+                children: /* @__PURE__ */ jsxs16(Stack13, { space: 3, children: [
+                  /* @__PURE__ */ jsxs16(Flex12, { align: "center", gap: 2, children: [
+                    /* @__PURE__ */ jsx20(
+                      "span",
+                      {
+                        style: {
+                          color: "var(--card-muted-fg-color)",
+                          fontSize: 18,
+                          lineHeight: 1
+                        },
+                        children: "\u2014"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs16(Text18, { muted: true, size: 2, weight: "medium", children: [
+                      "Unchanged (",
+                      unchanged.length,
+                      ")"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx20(Flex12, { gap: 2, wrap: "wrap", children: unchanged.length > 0 ? unchanged.map((area) => /* @__PURE__ */ jsx20(Pill, { color: "muted", label: area }, area)) : /* @__PURE__ */ jsx20(Text18, { muted: true, size: 2, children: "None" }) })
+                ] })
               }
             )
-          ] }, score.feature))
-        ]
-      }
-    )
-  ] }) });
-}
-
-// src/components/report-detail/ComparisonSummary.tsx
-import { Badge as Badge6, Box as Box10, Card as Card12, Flex as Flex12, Grid as Grid3, Stack as Stack14, Text as Text19, Tooltip as Tooltip5 } from "@sanity/ui";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
-function ComparisonSummary({ comparison }) {
-  return /* @__PURE__ */ jsx21(Card12, { padding: 4, radius: 2, shadow: 1, children: /* @__PURE__ */ jsxs17(Stack14, { space: 4, children: [
-    /* @__PURE__ */ jsxs17(Flex12, { align: "center", gap: 3, wrap: "wrap", children: [
-      /* @__PURE__ */ jsx21(Text19, { size: 3, weight: "semibold", children: "Comparison" }),
-      /* @__PURE__ */ jsx21(
-        DeltaCard,
-        {
-          delta: comparison.deltas.overall,
-          label: "pts overall",
-          tooltip: GLOSSARY.overallDelta
-        }
-      ),
-      comparison.deltas.actualDelta != null && /* @__PURE__ */ jsx21(
-        DeltaCard,
-        {
-          delta: comparison.deltas.actualDelta,
-          label: "actual",
-          tooltip: GLOSSARY.actualDelta
-        }
-      ),
-      comparison.deltas.retrievalGapDelta != null && /* @__PURE__ */ jsx21(
-        DeltaCard,
-        {
-          delta: comparison.deltas.retrievalGapDelta,
-          invertedPolarity: true,
-          label: "ret. gap",
-          tooltip: GLOSSARY.retGapDelta
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs17(Grid3, { columns: [1, 1, 3], gap: 3, children: [
-      comparison.improved.length > 0 && /* @__PURE__ */ jsx21(
-        AreaBadgeGroup,
-        {
-          areas: comparison.improved,
-          label: "Improved",
-          tone: "positive"
-        }
-      ),
-      comparison.regressed.length > 0 && /* @__PURE__ */ jsx21(
-        AreaBadgeGroup,
-        {
-          areas: comparison.regressed,
-          label: "Regressed",
-          tone: "critical"
-        }
-      ),
-      comparison.unchanged.length > 0 && /* @__PURE__ */ jsx21(
-        AreaBadgeGroup,
-        {
-          areas: comparison.unchanged,
-          label: "Unchanged",
-          tone: "default"
+          ]
         }
       )
     ] })
-  ] }) });
+  ] });
 }
-function DeltaCard({
+function ScoreCard({
   delta,
-  invertedPolarity = false,
+  infoTip,
   label,
-  tooltip
+  subtitle,
+  suffix,
+  value
 }) {
-  const isPositive = invertedPolarity ? delta < 0 : delta > 0;
-  const isNegative = invertedPolarity ? delta > 0 : delta < 0;
-  return /* @__PURE__ */ jsx21(
-    Tooltip5,
+  const color = scoreColor(value);
+  return /* @__PURE__ */ jsx20(
+    Box11,
     {
-      content: /* @__PURE__ */ jsx21(Box10, { padding: 2, style: { maxWidth: 260 }, children: /* @__PURE__ */ jsx21(Text19, { size: 2, children: tooltip }) }),
-      placement: "bottom",
-      portal: true,
-      children: /* @__PURE__ */ jsx21(
-        Card12,
-        {
-          padding: 2,
-          radius: 2,
-          tone: isPositive ? "positive" : isNegative ? "critical" : "default",
-          children: /* @__PURE__ */ jsxs17(Text19, { size: 2, weight: "bold", children: [
-            formatDelta(delta),
-            " ",
-            label
+      padding: 4,
+      style: {
+        backgroundColor: "var(--card-bg2-color, var(--card-bg-color))",
+        border: "1px solid var(--card-border-color)",
+        borderRadius: 6
+      },
+      children: /* @__PURE__ */ jsxs16(Stack13, { space: 3, children: [
+        /* @__PURE__ */ jsxs16(Flex12, { align: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx20(
+            Text18,
+            {
+              muted: true,
+              size: 1,
+              style: {
+                letterSpacing: "0.08em",
+                textTransform: "uppercase"
+              },
+              children: label
+            }
+          ),
+          infoTip && /* @__PURE__ */ jsx20(InfoTip, { text: infoTip })
+        ] }),
+        /* @__PURE__ */ jsxs16(Flex12, { align: "baseline", gap: 2, children: [
+          /* @__PURE__ */ jsxs16(
+            "span",
+            {
+              style: {
+                color,
+                fontFamily: "var(--font-code-size, monospace)",
+                fontSize: 42,
+                fontWeight: 700,
+                lineHeight: 1
+              },
+              children: [
+                value,
+                suffix && /* @__PURE__ */ jsx20("span", { style: { fontSize: 24 }, children: suffix })
+              ]
+            }
+          ),
+          delta != null && delta !== 0 && /* @__PURE__ */ jsxs16(
+            "span",
+            {
+              style: {
+                color: deltaColor(delta),
+                fontFamily: "var(--font-code-size, monospace)",
+                fontSize: 15,
+                fontWeight: 500
+              },
+              children: [
+                "~",
+                formatDelta(delta)
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx20(Text18, { muted: true, size: 1, children: subtitle })
+      ] })
+    }
+  );
+}
+function HealthCard({
+  color,
+  count,
+  icon,
+  infoTip,
+  label
+}) {
+  const textColor = color === "emerald" ? "#34d399" : color === "amber" ? "#fbbf24" : "#f87171";
+  return /* @__PURE__ */ jsx20(
+    Box11,
+    {
+      padding: 4,
+      style: {
+        ...sectionStyle(color),
+        minHeight: 80
+      },
+      children: /* @__PURE__ */ jsxs16(Flex12, { align: "center", gap: 3, children: [
+        /* @__PURE__ */ jsx20("span", { style: { color: textColor, fontSize: 28 }, children: icon }),
+        /* @__PURE__ */ jsxs16(Stack13, { space: 1, children: [
+          /* @__PURE__ */ jsx20(
+            "span",
+            {
+              style: {
+                color: textColor,
+                fontFamily: "var(--font-code-size, monospace)",
+                fontSize: 36,
+                fontWeight: 700,
+                lineHeight: 1
+              },
+              children: count
+            }
+          ),
+          /* @__PURE__ */ jsxs16(Flex12, { align: "center", gap: 1, children: [
+            /* @__PURE__ */ jsx20(Text18, { muted: true, size: 2, children: label }),
+            infoTip && /* @__PURE__ */ jsx20(InfoTip, { text: infoTip })
           ] })
-        }
-      )
+        ] })
+      ] })
     }
   );
 }
-function AreaBadgeGroup({
-  areas,
+function MetricCard({
+  highlight,
+  infoTip,
   label,
-  tone
+  value
 }) {
-  return /* @__PURE__ */ jsxs17(Stack14, { space: 2, children: [
-    /* @__PURE__ */ jsx21(
-      Text19,
+  const style = highlight ? {
+    ...sectionStyle("red"),
+    padding: 16
+  } : {
+    backgroundColor: "var(--card-bg2-color, var(--card-bg-color))",
+    border: "1px solid var(--card-border-color)",
+    borderRadius: 6,
+    padding: 16
+  };
+  return /* @__PURE__ */ jsx20(Box11, { style, children: /* @__PURE__ */ jsxs16(Stack13, { space: 2, children: [
+    /* @__PURE__ */ jsxs16(Flex12, { align: "center", gap: 1, children: [
+      /* @__PURE__ */ jsx20(Text18, { muted: true, size: 2, children: label }),
+      infoTip && /* @__PURE__ */ jsx20(InfoTip, { text: infoTip })
+    ] }),
+    /* @__PURE__ */ jsx20(
+      "span",
       {
-        muted: true,
-        size: 1,
-        style: { letterSpacing: "0.05em", textTransform: "uppercase" },
-        weight: "semibold",
-        children: label
+        style: {
+          color: highlight ? "#f87171" : "var(--card-fg-color)",
+          fontFamily: "var(--font-code-size, monospace)",
+          fontSize: 28,
+          fontWeight: 600,
+          lineHeight: 1.2
+        },
+        children: value
       }
-    ),
-    /* @__PURE__ */ jsx21(Flex12, { gap: 1, wrap: "wrap", children: areas.map((a) => /* @__PURE__ */ jsx21(Badge6, { tone, children: a }, a)) })
-  ] });
+    )
+  ] }) });
+}
+function Pill({
+  color,
+  label
+}) {
+  const colors = {
+    emerald: { bg: "rgba(16,185,129,0.25)", text: "#34d399" },
+    red: { bg: "rgba(239,68,68,0.25)", text: "#f87171" },
+    muted: {
+      bg: "var(--card-muted-bg-color, rgba(255,255,255,0.06))",
+      text: "var(--card-muted-fg-color)"
+    }
+  };
+  const c = colors[color];
+  return /* @__PURE__ */ jsx20(
+    "span",
+    {
+      style: {
+        backgroundColor: c.bg,
+        borderRadius: 4,
+        color: c.text,
+        fontSize: 14,
+        fontWeight: 500,
+        padding: "4px 10px",
+        whiteSpace: "nowrap"
+      },
+      children: label
+    }
+  );
 }
 
 // src/components/report-detail/LineageCard.tsx
 import { LinkIcon as LinkIcon2 } from "@sanity/icons";
-import { Badge as Badge7, Card as Card13, Flex as Flex13, Stack as Stack15, Text as Text20 } from "@sanity/ui";
+import { Badge as Badge6, Card as Card10, Flex as Flex13, Stack as Stack14, Text as Text19 } from "@sanity/ui";
 import { useCallback as useCallback11, useEffect as useEffect6, useState as useState7 } from "react";
 import { useClient as useClient5 } from "sanity";
 import { useRouter as useRouter2 } from "sanity/router";
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var REPORT_TYPE2 = "ailf.report";
 var SPAWNED_REPORTS_QUERY = (
   /* groq */
@@ -5223,12 +5513,12 @@ function LineageCard({ provenance, reportId }) {
   }, [client, reportId]);
   const hasLineage = lineage?.rerunOf || lineage?.comparedAgainst;
   if (!hasLineage && spawned.length === 0) return null;
-  return /* @__PURE__ */ jsx22(Card13, { padding: 4, radius: 2, shadow: 1, children: /* @__PURE__ */ jsxs18(Stack15, { space: 4, children: [
-    /* @__PURE__ */ jsx22(Flex13, { align: "center", gap: 2, children: /* @__PURE__ */ jsxs18(Text20, { size: 3, weight: "semibold", children: [
-      /* @__PURE__ */ jsx22(LinkIcon2, {}),
+  return /* @__PURE__ */ jsx21(Card10, { padding: 4, radius: 2, shadow: 1, children: /* @__PURE__ */ jsxs17(Stack14, { space: 4, children: [
+    /* @__PURE__ */ jsx21(Flex13, { align: "center", gap: 2, children: /* @__PURE__ */ jsxs17(Text19, { size: 3, weight: "semibold", children: [
+      /* @__PURE__ */ jsx21(LinkIcon2, {}),
       " Lineage"
     ] }) }),
-    lineage?.rerunOf && /* @__PURE__ */ jsx22(
+    lineage?.rerunOf && /* @__PURE__ */ jsx21(
       LineageLink,
       {
         label: "Re-run of",
@@ -5236,7 +5526,7 @@ function LineageCard({ provenance, reportId }) {
         router
       }
     ),
-    lineage?.comparedAgainst && /* @__PURE__ */ jsx22(
+    lineage?.comparedAgainst && /* @__PURE__ */ jsx21(
       LineageLink,
       {
         label: "Compared against",
@@ -5244,9 +5534,9 @@ function LineageCard({ provenance, reportId }) {
         router
       }
     ),
-    spawned.length > 0 && /* @__PURE__ */ jsxs18(Stack15, { space: 2, children: [
-      /* @__PURE__ */ jsx22(Text20, { muted: true, size: 1, weight: "semibold", children: "SPAWNED RE-RUNS" }),
-      spawned.map((s) => /* @__PURE__ */ jsx22(SpawnedReportRow, { report: s, router }, s.reportId))
+    spawned.length > 0 && /* @__PURE__ */ jsxs17(Stack14, { space: 2, children: [
+      /* @__PURE__ */ jsx21(Text19, { muted: true, size: 1, weight: "semibold", children: "SPAWNED RE-RUNS" }),
+      spawned.map((s) => /* @__PURE__ */ jsx21(SpawnedReportRow, { report: s, router }, s.reportId))
     ] })
   ] }) });
 }
@@ -5258,12 +5548,12 @@ function LineageLink({
   const handleClick = useCallback11(() => {
     router.navigate({ reportId });
   }, [reportId, router]);
-  return /* @__PURE__ */ jsxs18(Flex13, { align: "center", gap: 2, children: [
-    /* @__PURE__ */ jsxs18(Text20, { muted: true, size: 2, weight: "semibold", children: [
+  return /* @__PURE__ */ jsxs17(Flex13, { align: "center", gap: 2, children: [
+    /* @__PURE__ */ jsxs17(Text19, { muted: true, size: 2, weight: "semibold", children: [
       label,
       ":"
     ] }),
-    /* @__PURE__ */ jsx22(Text20, { size: 2, children: /* @__PURE__ */ jsxs18(
+    /* @__PURE__ */ jsx21(Text19, { size: 2, children: /* @__PURE__ */ jsxs17(
       "a",
       {
         href: "#",
@@ -5289,8 +5579,8 @@ function SpawnedReportRow({
   }, [report.reportId, router]);
   const dateLabel = formatShortDate(report.completedAt);
   const label = report.tag ?? dateLabel;
-  return /* @__PURE__ */ jsxs18(Flex13, { align: "center", gap: 2, children: [
-    /* @__PURE__ */ jsx22(Text20, { size: 2, children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs17(Flex13, { align: "center", gap: 2, children: [
+    /* @__PURE__ */ jsx21(Text19, { size: 2, children: /* @__PURE__ */ jsx21(
       "a",
       {
         href: "#",
@@ -5302,8 +5592,8 @@ function SpawnedReportRow({
         children: label
       }
     ) }),
-    report.tag && /* @__PURE__ */ jsx22(Text20, { muted: true, size: 1, children: dateLabel }),
-    /* @__PURE__ */ jsx22(Badge7, { fontSize: 1, mode: "outline", tone: "default", children: report.reportId.slice(0, 8) })
+    report.tag && /* @__PURE__ */ jsx21(Text19, { muted: true, size: 1, children: dateLabel }),
+    /* @__PURE__ */ jsx21(Badge6, { fontSize: 1, mode: "outline", tone: "default", children: report.reportId.slice(0, 8) })
   ] });
 }
 function formatShortDate(iso) {
@@ -5320,15 +5610,15 @@ function formatShortDate(iso) {
 
 // src/components/report-detail/JudgmentList.tsx
 import { useState as useState8 } from "react";
-import { HelpCircleIcon as HelpCircleIcon6 } from "@sanity/icons";
-import { Badge as Badge8, Box as Box11, Card as Card14, Flex as Flex14, Stack as Stack16, Text as Text21, Tooltip as Tooltip6 } from "@sanity/ui";
+import { ErrorOutlineIcon as ErrorOutlineIcon2, HelpCircleIcon as HelpCircleIcon7 } from "@sanity/icons";
+import { Box as Box12, Flex as Flex14, Stack as Stack15, Text as Text20, Tooltip as Tooltip6 } from "@sanity/ui";
 
 // src/components/primitives/InlineCode.tsx
-import { Fragment as Fragment7, jsx as jsx23 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx22 } from "react/jsx-runtime";
 function InlineCode({ text }) {
   const parts = text.split(/`([^`]+)`/);
-  return /* @__PURE__ */ jsx23(Fragment7, { children: parts.map(
-    (part, i) => i % 2 === 1 ? /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx22(Fragment7, { children: parts.map(
+    (part, i) => i % 2 === 1 ? /* @__PURE__ */ jsx22(
       "code",
       {
         style: {
@@ -5340,12 +5630,12 @@ function InlineCode({ text }) {
         children: part
       },
       i
-    ) : /* @__PURE__ */ jsx23("span", { children: part }, i)
+    ) : /* @__PURE__ */ jsx22("span", { children: part }, i)
   ) });
 }
 
 // src/components/report-detail/JudgmentList.tsx
-import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 function groupByArea(judgments) {
   const byArea = /* @__PURE__ */ new Map();
   for (const j of judgments) {
@@ -5360,108 +5650,182 @@ var DIMENSION_LABELS = DIMENSION_LABELS_KEBAB;
 function JudgmentList({ judgments }) {
   if (judgments.length === 0) return null;
   const grouped = groupByArea(judgments);
-  return /* @__PURE__ */ jsx24(Card14, { padding: 4, radius: 2, shadow: 1, children: /* @__PURE__ */ jsxs19(Stack16, { space: 4, children: [
-    /* @__PURE__ */ jsxs19(Flex14, { align: "center", gap: 3, wrap: "wrap", children: [
-      /* @__PURE__ */ jsx24(Text21, { size: 3, weight: "semibold", children: "Low-Scoring Judgments" }),
-      /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs18(Stack15, { space: 3, children: [
+    /* @__PURE__ */ jsxs18(Flex14, { align: "center", gap: 2, children: [
+      /* @__PURE__ */ jsx23(ErrorOutlineIcon2, { style: { color: "#f87171" } }),
+      /* @__PURE__ */ jsx23(Text20, { size: 2, weight: "medium", children: "Low-Scoring Judgments" }),
+      /* @__PURE__ */ jsx23(
         Tooltip6,
         {
-          content: /* @__PURE__ */ jsx24(Box11, { padding: 2, style: { maxWidth: 260 }, children: /* @__PURE__ */ jsx24(Text21, { size: 2, children: GLOSSARY.lowScoringJudgments }) }),
+          content: /* @__PURE__ */ jsx23(Box12, { padding: 2, style: { maxWidth: 260 }, children: /* @__PURE__ */ jsx23(Text20, { size: 2, children: GLOSSARY.lowScoringJudgments }) }),
           placement: "bottom",
           portal: true,
-          children: /* @__PURE__ */ jsx24(Text21, { muted: true, size: 1, children: /* @__PURE__ */ jsx24(HelpCircleIcon6, {}) })
+          children: /* @__PURE__ */ jsx23(Text20, { muted: true, size: 1, children: /* @__PURE__ */ jsx23(HelpCircleIcon7, {}) })
         }
       ),
-      /* @__PURE__ */ jsx24(Card14, { padding: 2, radius: 2, tone: "critical", children: /* @__PURE__ */ jsxs19(Text21, { size: 2, weight: "bold", children: [
-        judgments.length,
-        " judgment",
-        judgments.length === 1 ? "" : "s",
-        " below 70"
-      ] }) })
+      /* @__PURE__ */ jsxs18(
+        "span",
+        {
+          style: {
+            backgroundColor: "rgba(239,68,68,0.2)",
+            borderRadius: 999,
+            color: "#f87171",
+            fontSize: 13,
+            fontWeight: 500,
+            marginLeft: 4,
+            padding: "2px 10px"
+          },
+          children: [
+            judgments.length,
+            " below 70"
+          ]
+        }
+      )
     ] }),
-    grouped.map(([area, areaJudgments]) => /* @__PURE__ */ jsx24(Card14, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsxs19(Stack16, { space: 3, children: [
-      /* @__PURE__ */ jsxs19(Text21, { size: 2, weight: "semibold", children: [
-        area,
-        " ",
-        /* @__PURE__ */ jsxs19(Text21, { muted: true, size: 2, weight: "regular", as: "span", children: [
-          "(",
-          areaJudgments.length,
-          ")"
+    /* @__PURE__ */ jsx23(Box12, { style: neutralCardStyle, children: grouped.map(([area, areaJudgments], groupIndex) => /* @__PURE__ */ jsx23(
+      Box12,
+      {
+        padding: 4,
+        style: groupIndex > 0 ? dividerStyle : void 0,
+        children: /* @__PURE__ */ jsxs18(Stack15, { space: 3, children: [
+          /* @__PURE__ */ jsxs18(Text20, { size: 2, weight: "semibold", children: [
+            area,
+            " ",
+            /* @__PURE__ */ jsxs18(
+              "span",
+              {
+                style: {
+                  color: "var(--card-muted-fg-color)",
+                  fontWeight: 400
+                },
+                children: [
+                  "(",
+                  areaJudgments.length,
+                  ")"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx23(Stack15, { space: 2, children: areaJudgments.map((j, i) => /* @__PURE__ */ jsx23(JudgmentCard, { judgment: j }, `${area}-${i}`)) })
         ] })
-      ] }),
-      areaJudgments.map((j, i) => /* @__PURE__ */ jsx24(JudgmentCard, { judgment: j }, `${area}-${i}`))
-    ] }) }, area))
-  ] }) });
+      },
+      area
+    )) })
+  ] });
 }
 function JudgmentCard({ judgment }) {
   const [expanded, setExpanded] = useState8(false);
   const dimLabel = DIMENSION_LABELS[judgment.dimension] ?? judgment.dimension;
   const sep = judgment.taskId.indexOf(" - ");
   const taskName = sep > 0 ? judgment.taskId.substring(sep + 3) : judgment.taskId;
-  return /* @__PURE__ */ jsx24(
-    Card14,
+  return /* @__PURE__ */ jsx23(
+    Box12,
     {
-      padding: 3,
-      radius: 2,
-      shadow: 1,
-      style: { cursor: "pointer" },
+      style: {
+        ...neutralCardStyle,
+        cursor: "pointer",
+        padding: 16
+      },
       onClick: () => setExpanded(!expanded),
-      children: /* @__PURE__ */ jsxs19(Stack16, { space: 3, children: [
-        /* @__PURE__ */ jsxs19(Flex14, { align: "center", gap: 2, wrap: "wrap", children: [
-          /* @__PURE__ */ jsx24(Card14, { padding: 2, radius: 2, tone: scoreTone(judgment.score), children: /* @__PURE__ */ jsx24(
-            Text21,
+      children: /* @__PURE__ */ jsxs18(Stack15, { space: 3, children: [
+        /* @__PURE__ */ jsxs18(Flex14, { align: "center", gap: 3, wrap: "wrap", children: [
+          /* @__PURE__ */ jsx23(
+            "span",
             {
-              align: "center",
-              size: 2,
-              style: { minWidth: 28 },
-              weight: "bold",
+              style: {
+                backgroundColor: scoreBg(judgment.score),
+                borderRadius: 4,
+                color: scoreColor(judgment.score),
+                fontFamily: "var(--font-code-size, monospace)",
+                fontSize: 14,
+                fontWeight: 600,
+                padding: "3px 10px"
+              },
               children: judgment.score
             }
-          ) }),
-          /* @__PURE__ */ jsx24(Badge8, { tone: "default", children: dimLabel }),
-          /* @__PURE__ */ jsx24(Text21, { size: 2, weight: "medium", children: taskName }),
-          /* @__PURE__ */ jsx24(Text21, { muted: true, size: 1, children: judgment.modelId }),
-          /* @__PURE__ */ jsx24(Text21, { muted: true, size: 1, style: { marginLeft: "auto" }, children: expanded ? "\u25B2" : "\u25BC" })
+          ),
+          /* @__PURE__ */ jsx23(
+            "span",
+            {
+              style: {
+                backgroundColor: "var(--card-muted-bg-color, rgba(255,255,255,0.06))",
+                borderRadius: 4,
+                color: "var(--card-muted-fg-color)",
+                fontSize: 13,
+                padding: "3px 8px"
+              },
+              children: dimLabel
+            }
+          ),
+          /* @__PURE__ */ jsx23(Text20, { size: 2, weight: "medium", children: taskName }),
+          /* @__PURE__ */ jsx23(Text20, { muted: true, size: 1, children: judgment.modelId }),
+          /* @__PURE__ */ jsx23(
+            "span",
+            {
+              style: {
+                color: "var(--card-muted-fg-color)",
+                fontSize: 14,
+                marginLeft: "auto"
+              },
+              children: expanded ? "\u25B2" : "\u25BC"
+            }
+          )
         ] }),
-        expanded && /* @__PURE__ */ jsxs19(Stack16, { space: 3, children: [
-          /* @__PURE__ */ jsx24(Card14, { padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsx24(
-            Text21,
+        expanded && /* @__PURE__ */ jsxs18(Stack15, { space: 3, children: [
+          /* @__PURE__ */ jsx23(
+            Box12,
             {
-              muted: true,
-              size: 2,
-              style: { lineHeight: 1.6, whiteSpace: "pre-wrap" },
-              children: /* @__PURE__ */ jsx24(InlineCode, { text: judgment.reason })
+              style: {
+                backgroundColor: "var(--card-muted-bg-color, rgba(255,255,255,0.04))",
+                borderRadius: 4,
+                padding: 16
+              },
+              children: /* @__PURE__ */ jsx23(
+                Text20,
+                {
+                  muted: true,
+                  size: 2,
+                  style: { lineHeight: 1.6, whiteSpace: "pre-wrap" },
+                  children: /* @__PURE__ */ jsx23(InlineCode, { text: judgment.reason })
+                }
+              )
             }
-          ) }),
-          judgment.canonicalDocs && judgment.canonicalDocs.length > 0 && /* @__PURE__ */ jsxs19(Flex14, { align: "center", gap: 2, wrap: "wrap", children: [
-            /* @__PURE__ */ jsx24(Text21, { muted: true, size: 1, children: "Docs:" }),
-            judgment.canonicalDocs.map((doc) => /* @__PURE__ */ jsx24(DocBadge, { doc }, doc.slug))
+          ),
+          judgment.canonicalDocs && judgment.canonicalDocs.length > 0 && /* @__PURE__ */ jsxs18(Flex14, { align: "center", gap: 2, wrap: "wrap", children: [
+            /* @__PURE__ */ jsx23(Text20, { muted: true, size: 1, children: "Docs:" }),
+            judgment.canonicalDocs.map((doc) => /* @__PURE__ */ jsx23(DocBadge, { doc }, doc.slug))
           ] })
         ] })
       ] })
     }
   );
 }
-var editLinkStyle = {
-  cursor: "pointer",
-  display: "inline-block",
-  textDecoration: "none",
-  transition: "opacity 150ms ease"
-};
 function DocBadge({
   doc
 }) {
   const [hovered, setHovered] = useState8(false);
   const isLinked = Boolean(doc.documentId);
   const tooltipLabel = isLinked ? `Edit "${doc.title || doc.slug}"` : doc.title || doc.slug;
-  const badge = /* @__PURE__ */ jsx24(Badge8, { mode: "outline", tone: isLinked && hovered ? "caution" : "primary", children: doc.slug });
-  return /* @__PURE__ */ jsx24(
+  const badge = /* @__PURE__ */ jsx23(
+    "span",
+    {
+      style: {
+        backgroundColor: isLinked && hovered ? "rgba(245,158,11,0.2)" : "rgba(59,130,246,0.15)",
+        borderRadius: 4,
+        color: isLinked && hovered ? "#fbbf24" : "#60a5fa",
+        fontSize: 13,
+        padding: "3px 8px"
+      },
+      children: doc.slug
+    }
+  );
+  return /* @__PURE__ */ jsx23(
     Tooltip6,
     {
-      content: /* @__PURE__ */ jsx24(Box11, { padding: 2, children: /* @__PURE__ */ jsx24(Text21, { size: 2, children: tooltipLabel }) }),
+      content: /* @__PURE__ */ jsx23(Box12, { padding: 2, children: /* @__PURE__ */ jsx23(Text20, { size: 2, children: tooltipLabel }) }),
       placement: "bottom",
       portal: true,
-      children: isLinked ? /* @__PURE__ */ jsx24(
+      children: isLinked ? /* @__PURE__ */ jsx23(
         "a",
         {
           href: `/intent/edit/id=${doc.documentId}`,
@@ -5469,110 +5833,45 @@ function DocBadge({
           onMouseEnter: () => setHovered(true),
           onMouseLeave: () => setHovered(false),
           style: {
-            ...editLinkStyle,
-            opacity: hovered ? 0.8 : 1
+            cursor: "pointer",
+            display: "inline-block",
+            opacity: hovered ? 0.8 : 1,
+            textDecoration: "none",
+            transition: "opacity 150ms ease"
           },
           children: badge
         }
-      ) : /* @__PURE__ */ jsx24("span", { children: badge })
+      ) : /* @__PURE__ */ jsx23("span", { children: badge })
     }
   );
 }
 
-// src/components/report-detail/OverviewStats.tsx
-import { Grid as Grid4 } from "@sanity/ui";
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
-function OverviewStats({
-  overall,
-  durationMs,
-  totalTests,
-  isFullMode
-}) {
-  const overallTone = scoreTone(overall.avgScore);
-  return /* @__PURE__ */ jsxs20(Grid4, { columns: [1, 1, 2, isFullMode ? 4 : 4], gap: 3, children: [
-    /* @__PURE__ */ jsx25(
-      StatCard,
-      {
-        label: "Overall Score",
-        tooltip: GLOSSARY.overallScore,
-        tone: overallTone,
-        value: overall.avgScore.toFixed(1)
-      }
-    ),
-    /* @__PURE__ */ jsx25(
-      StatCard,
-      {
-        label: "Doc Lift",
-        suffix: "pts",
-        tooltip: GLOSSARY.docLift,
-        value: overall.avgDocLift.toFixed(1)
-      }
-    ),
-    isFullMode && overall.avgActualScore != null && /* @__PURE__ */ jsx25(
-      StatCard,
-      {
-        label: "Actual Score",
-        suffix: "(agent)",
-        tooltip: GLOSSARY.actualScore,
-        value: overall.avgActualScore.toFixed(1)
-      }
-    ),
-    isFullMode && overall.avgRetrievalGap != null && /* @__PURE__ */ jsx25(
-      StatCard,
-      {
-        label: "Retrieval Gap",
-        suffix: "pts",
-        tooltip: GLOSSARY.retrievalGap,
-        tone: overall.avgRetrievalGap > 15 ? "critical" : overall.avgRetrievalGap > 5 ? "caution" : "positive",
-        value: overall.avgRetrievalGap.toFixed(1)
-      }
-    ),
-    isFullMode && overall.avgInfrastructureEfficiency != null && /* @__PURE__ */ jsx25(
-      StatCard,
-      {
-        label: "Infra Efficiency",
-        tooltip: GLOSSARY.infraEfficiency,
-        value: formatPercent(overall.avgInfrastructureEfficiency)
-      }
-    ),
-    /* @__PURE__ */ jsx25(StatCard, { label: "Duration", value: formatDuration(durationMs) }),
-    /* @__PURE__ */ jsx25(
-      StatCard,
-      {
-        label: "Tests",
-        tooltip: GLOSSARY.tests,
-        value: String(totalTests)
-      }
-    )
-  ] });
-}
-
 // src/components/report-detail/ProvenanceCard.tsx
-import { Card as Card15, Flex as Flex15, Grid as Grid5, Stack as Stack17, Text as Text22 } from "@sanity/ui";
-import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Card as Card11, Flex as Flex15, Grid as Grid3, Stack as Stack16, Text as Text21 } from "@sanity/ui";
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var VIEWABLE_PROMPTFOO_MODES = /* @__PURE__ */ new Set(["agentic", "observed"]);
 function ProvenanceCard({ provenance }) {
-  return /* @__PURE__ */ jsx26(Card15, { padding: 4, radius: 2, shadow: 1, children: /* @__PURE__ */ jsxs21(Stack17, { space: 4, children: [
-    /* @__PURE__ */ jsx26(Text22, { size: 3, weight: "semibold", children: "Provenance" }),
-    /* @__PURE__ */ jsxs21(Grid5, { columns: [1, 2, 3], gap: 4, children: [
-      /* @__PURE__ */ jsx26(Field, { label: "Mode", value: provenance.mode }),
-      /* @__PURE__ */ jsx26(Field, { label: "Source", value: provenance.source.name }),
-      /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx24(Card11, { padding: 4, radius: 2, shadow: 1, children: /* @__PURE__ */ jsxs19(Stack16, { space: 4, children: [
+    /* @__PURE__ */ jsx24(Text21, { size: 3, weight: "semibold", children: "Provenance" }),
+    /* @__PURE__ */ jsxs19(Grid3, { columns: [1, 2, 3], gap: 4, children: [
+      /* @__PURE__ */ jsx24(Field, { label: "Mode", value: provenance.mode }),
+      /* @__PURE__ */ jsx24(Field, { label: "Source", value: provenance.source.name }),
+      /* @__PURE__ */ jsx24(
         Field,
         {
           label: "Trigger",
           value: provenance.trigger.type + (provenance.trigger.workflow ? ` (${provenance.trigger.workflow})` : "")
         }
       ),
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx24(
         Field,
         {
           label: "Models",
           value: provenance.models.map((m) => m.label).join(", ")
         }
       ),
-      /* @__PURE__ */ jsx26(Field, { label: "Grader Model", mono: true, value: provenance.graderModel }),
-      provenance.contextHash && /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx24(Field, { label: "Grader Model", mono: true, value: provenance.graderModel }),
+      provenance.contextHash && /* @__PURE__ */ jsx24(
         Field,
         {
           label: "Context Hash",
@@ -5581,8 +5880,8 @@ function ProvenanceCard({ provenance }) {
         }
       )
     ] }),
-    provenance.git && /* @__PURE__ */ jsx26(GitInfo, { git: provenance.git }),
-    /* @__PURE__ */ jsx26(PromptfooLinks, { provenance })
+    provenance.git && /* @__PURE__ */ jsx24(GitInfo, { git: provenance.git }),
+    /* @__PURE__ */ jsx24(PromptfooLinks, { provenance })
   ] }) });
 }
 function Field({
@@ -5590,9 +5889,9 @@ function Field({
   mono,
   value
 }) {
-  return /* @__PURE__ */ jsxs21(Stack17, { space: 1, children: [
-    /* @__PURE__ */ jsx26(
-      Text22,
+  return /* @__PURE__ */ jsxs19(Stack16, { space: 1, children: [
+    /* @__PURE__ */ jsx24(
+      Text21,
       {
         muted: true,
         size: 1,
@@ -5601,7 +5900,7 @@ function Field({
         children: label
       }
     ),
-    /* @__PURE__ */ jsx26(Text22, { size: 2, style: mono ? { fontFamily: "monospace" } : void 0, children: value })
+    /* @__PURE__ */ jsx24(Text21, { size: 2, style: mono ? { fontFamily: "monospace" } : void 0, children: value })
   ] });
 }
 function GitInfo({ git }) {
@@ -5609,15 +5908,15 @@ function GitInfo({ git }) {
   const branchUrl = `${repoUrl}/tree/${git.branch}`;
   const commitUrl = `${repoUrl}/commit/${git.sha}`;
   const prUrl = git.prNumber ? `${repoUrl}/pull/${git.prNumber}` : null;
-  return /* @__PURE__ */ jsx26(Card15, { border: true, padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsxs21(Flex15, { align: "center", gap: 3, wrap: "wrap", children: [
-    /* @__PURE__ */ jsx26(Text22, { muted: true, size: 2, weight: "semibold", children: "Git" }),
-    /* @__PURE__ */ jsxs21(Text22, { size: 2, children: [
-      /* @__PURE__ */ jsx26("a", { href: repoUrl, rel: "noopener noreferrer", target: "_blank", children: git.repo }),
+  return /* @__PURE__ */ jsx24(Card11, { border: true, padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsxs19(Flex15, { align: "center", gap: 3, wrap: "wrap", children: [
+    /* @__PURE__ */ jsx24(Text21, { muted: true, size: 2, weight: "semibold", children: "Git" }),
+    /* @__PURE__ */ jsxs19(Text21, { size: 2, children: [
+      /* @__PURE__ */ jsx24("a", { href: repoUrl, rel: "noopener noreferrer", target: "_blank", children: git.repo }),
       " / ",
-      /* @__PURE__ */ jsx26("a", { href: branchUrl, rel: "noopener noreferrer", target: "_blank", children: git.branch })
+      /* @__PURE__ */ jsx24("a", { href: branchUrl, rel: "noopener noreferrer", target: "_blank", children: git.branch })
     ] }),
-    /* @__PURE__ */ jsx26(Text22, { muted: true, size: 2, style: { fontFamily: "monospace" }, children: /* @__PURE__ */ jsx26("a", { href: commitUrl, rel: "noopener noreferrer", target: "_blank", children: git.sha.slice(0, 12) }) }),
-    prUrl && /* @__PURE__ */ jsx26(Text22, { size: 2, children: /* @__PURE__ */ jsxs21("a", { href: prUrl, rel: "noopener noreferrer", target: "_blank", children: [
+    /* @__PURE__ */ jsx24(Text21, { muted: true, size: 2, style: { fontFamily: "monospace" }, children: /* @__PURE__ */ jsx24("a", { href: commitUrl, rel: "noopener noreferrer", target: "_blank", children: git.sha.slice(0, 12) }) }),
+    prUrl && /* @__PURE__ */ jsx24(Text21, { size: 2, children: /* @__PURE__ */ jsxs19("a", { href: prUrl, rel: "noopener noreferrer", target: "_blank", children: [
       "PR #",
       git.prNumber,
       " \u2192"
@@ -5632,14 +5931,14 @@ function PromptfooLinks({
       (e) => VIEWABLE_PROMPTFOO_MODES.has(e.mode)
     );
     if (viewable.length === 0) return null;
-    return /* @__PURE__ */ jsx26(Flex15, { gap: 3, wrap: "wrap", children: viewable.map((entry) => /* @__PURE__ */ jsx26(Text22, { size: 2, children: /* @__PURE__ */ jsxs21("a", { href: entry.url, rel: "noopener noreferrer", target: "_blank", children: [
+    return /* @__PURE__ */ jsx24(Flex15, { gap: 3, wrap: "wrap", children: viewable.map((entry) => /* @__PURE__ */ jsx24(Text21, { size: 2, children: /* @__PURE__ */ jsxs19("a", { href: entry.url, rel: "noopener noreferrer", target: "_blank", children: [
       "View in Promptfoo (",
       entry.mode,
       ") \u2192"
     ] }) }, entry.mode)) });
   }
   if (provenance.promptfooUrl && VIEWABLE_PROMPTFOO_MODES.has(provenance.mode)) {
-    return /* @__PURE__ */ jsx26(Text22, { size: 2, children: /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx24(Text21, { size: 2, children: /* @__PURE__ */ jsx24(
       "a",
       {
         href: provenance.promptfooUrl,
@@ -5653,181 +5952,248 @@ function PromptfooLinks({
 }
 
 // src/components/report-detail/RecommendationsSection.tsx
-import React4 from "react";
-import { Badge as Badge9, Box as Box12, Card as Card16, Flex as Flex16, Stack as Stack18, Text as Text23, Tooltip as Tooltip7 } from "@sanity/ui";
-import { HelpCircleIcon as HelpCircleIcon7 } from "@sanity/icons";
-import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { HelpCircleIcon as HelpCircleIcon8, BoltIcon } from "@sanity/icons";
+import { Box as Box14, Flex as Flex16, Stack as Stack17, Text as Text23, Tooltip as Tooltip8 } from "@sanity/ui";
+
+// src/components/report-detail/HoverTip.tsx
+import { useState as useState9 } from "react";
+import { Box as Box13, Text as Text22, Tooltip as Tooltip7 } from "@sanity/ui";
+import { jsx as jsx25 } from "react/jsx-runtime";
+function HoverTip({
+  text,
+  children,
+  placement = "bottom"
+}) {
+  const [hovered, setHovered] = useState9(false);
+  return /* @__PURE__ */ jsx25(
+    Tooltip7,
+    {
+      content: /* @__PURE__ */ jsx25(Box13, { padding: 2, style: { maxWidth: 280 }, children: typeof text === "string" ? /* @__PURE__ */ jsx25(Text22, { size: 2, children: text }) : text }),
+      placement,
+      portal: true,
+      children: /* @__PURE__ */ jsx25(
+        "span",
+        {
+          onMouseEnter: () => setHovered(true),
+          onMouseLeave: () => setHovered(false),
+          style: {
+            borderRadius: 4,
+            cursor: "help",
+            display: "inline-flex",
+            outline: hovered ? "1px solid rgba(255,255,255,0.15)" : "1px solid transparent",
+            transition: "background 150ms ease, outline 150ms ease",
+            ...hovered ? { background: "rgba(255,255,255,0.06)" } : {}
+          },
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/components/report-detail/RecommendationsSection.tsx
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 function RecommendationsSection({
   recommendations
 }) {
   if (recommendations.gaps.length === 0) return null;
-  return /* @__PURE__ */ jsx27(Card16, { padding: 4, radius: 2, shadow: 1, children: /* @__PURE__ */ jsxs22(Stack18, { space: 4, children: [
-    /* @__PURE__ */ jsxs22(Flex16, { align: "center", gap: 3, wrap: "wrap", children: [
-      /* @__PURE__ */ jsx27(Text23, { size: 3, weight: "semibold", children: "Recommendations" }),
-      /* @__PURE__ */ jsx27(
-        Tooltip7,
+  return /* @__PURE__ */ jsxs20(Stack17, { space: 3, children: [
+    /* @__PURE__ */ jsxs20(Flex16, { align: "center", gap: 2, children: [
+      /* @__PURE__ */ jsx26(BoltIcon, { style: { color: "#fbbf24" } }),
+      /* @__PURE__ */ jsx26(Text23, { size: 2, weight: "medium", children: "Recommendations" }),
+      /* @__PURE__ */ jsx26(
+        Tooltip8,
         {
-          content: /* @__PURE__ */ jsx27(Box12, { padding: 2, style: { maxWidth: 260 }, children: /* @__PURE__ */ jsx27(Text23, { size: 2, children: GLOSSARY.recommendations }) }),
+          content: /* @__PURE__ */ jsx26(Box14, { padding: 2, style: { maxWidth: 260 }, children: /* @__PURE__ */ jsx26(Text23, { size: 2, children: GLOSSARY.recommendations }) }),
           placement: "bottom",
           portal: true,
-          children: /* @__PURE__ */ jsx27(Text23, { muted: true, size: 1, children: /* @__PURE__ */ jsx27(HelpCircleIcon7, {}) })
+          children: /* @__PURE__ */ jsx26(Text23, { muted: true, size: 1, children: /* @__PURE__ */ jsx26(HelpCircleIcon8, {}) })
         }
       ),
-      /* @__PURE__ */ jsx27(
-        Tooltip7,
+      /* @__PURE__ */ jsxs20(
+        "span",
         {
-          content: /* @__PURE__ */ jsx27(Box12, { padding: 2, style: { maxWidth: 260 }, children: /* @__PURE__ */ jsx27(Text23, { size: 2, children: GLOSSARY.totalPotentialLift }) }),
-          placement: "bottom",
-          portal: true,
-          children: /* @__PURE__ */ jsx27(Card16, { padding: 2, radius: 2, tone: "positive", children: /* @__PURE__ */ jsxs22(Text23, { size: 2, weight: "bold", children: [
+          style: {
+            backgroundColor: "rgba(16,185,129,0.2)",
+            borderRadius: 999,
+            color: "#34d399",
+            fontSize: 13,
+            fontWeight: 500,
+            marginLeft: 4,
+            padding: "2px 10px"
+          },
+          children: [
             "+",
             recommendations.totalPotentialLift.toFixed(1),
-            " pts potential lift"
-          ] }) })
+            " pts lift"
+          ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs22(
-      "div",
-      {
-        style: {
-          display: "grid",
-          gap: "0 8px",
-          gridTemplateColumns: "auto 2fr 2fr 1fr 1fr 1fr"
-        },
-        children: [
-          /* @__PURE__ */ jsx27(ColumnHeader, { borderBottom: true, label: "#" }),
-          /* @__PURE__ */ jsx27(ColumnHeader, { borderBottom: true, label: "Area" }),
-          /* @__PURE__ */ jsx27(
-            ColumnHeader,
-            {
-              borderBottom: true,
-              label: "Failure Mode",
-              tooltip: GLOSSARY.failureMode
-            }
-          ),
-          /* @__PURE__ */ jsx27(ColumnHeader, { borderBottom: true, label: "Action" }),
-          /* @__PURE__ */ jsx27(
-            ColumnHeader,
-            {
-              borderBottom: true,
-              label: "Lift",
-              tooltip: GLOSSARY.estimatedLift
-            }
-          ),
-          /* @__PURE__ */ jsx27(
-            ColumnHeader,
-            {
-              borderBottom: true,
-              label: "Confidence",
-              tooltip: GLOSSARY.confidence
-            }
-          ),
-          recommendations.gaps.map((gap, i) => /* @__PURE__ */ jsx27(RecommendationRow, { gap, index: i }, `gap-${i}`))
-        ]
-      }
-    )
-  ] }) });
+    /* @__PURE__ */ jsxs20(Box14, { style: neutralCardStyle, children: [
+      /* @__PURE__ */ jsxs20(
+        Flex16,
+        {
+          align: "center",
+          gap: 3,
+          padding: 4,
+          style: { borderBottom: "1px solid var(--card-border-color)" },
+          children: [
+            /* @__PURE__ */ jsx26(Box14, { style: { width: 32 }, children: /* @__PURE__ */ jsx26(Text23, { muted: true, size: 1, children: "#" }) }),
+            /* @__PURE__ */ jsx26(Box14, { flex: 2, children: /* @__PURE__ */ jsx26(Text23, { muted: true, size: 1, children: "Area" }) }),
+            /* @__PURE__ */ jsx26(Box14, { flex: 2, children: /* @__PURE__ */ jsxs20(Flex16, { align: "center", gap: 1, children: [
+              /* @__PURE__ */ jsx26(Text23, { muted: true, size: 1, children: "Failure Mode" }),
+              /* @__PURE__ */ jsx26(
+                Tooltip8,
+                {
+                  content: /* @__PURE__ */ jsx26(Box14, { padding: 2, style: { maxWidth: 260 }, children: /* @__PURE__ */ jsx26(Text23, { size: 2, children: GLOSSARY.failureMode }) }),
+                  placement: "bottom",
+                  portal: true,
+                  children: /* @__PURE__ */ jsx26(Text23, { muted: true, size: 1, children: /* @__PURE__ */ jsx26(HelpCircleIcon8, {}) })
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx26(Box14, { flex: 2, children: /* @__PURE__ */ jsx26(Text23, { muted: true, size: 1, children: "Action" }) }),
+            /* @__PURE__ */ jsx26(Box14, { style: { textAlign: "right", width: 72 }, children: /* @__PURE__ */ jsxs20(Flex16, { align: "center", gap: 1, justify: "flex-end", children: [
+              /* @__PURE__ */ jsx26(Text23, { muted: true, size: 1, children: "Lift" }),
+              /* @__PURE__ */ jsx26(
+                Tooltip8,
+                {
+                  content: /* @__PURE__ */ jsx26(Box14, { padding: 2, style: { maxWidth: 260 }, children: /* @__PURE__ */ jsx26(Text23, { size: 2, children: GLOSSARY.estimatedLift }) }),
+                  placement: "bottom",
+                  portal: true,
+                  children: /* @__PURE__ */ jsx26(Text23, { muted: true, size: 1, children: /* @__PURE__ */ jsx26(HelpCircleIcon8, {}) })
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx26(Box14, { style: { textAlign: "right", width: 90 }, children: /* @__PURE__ */ jsxs20(Flex16, { align: "center", gap: 1, justify: "flex-end", children: [
+              /* @__PURE__ */ jsx26(Text23, { muted: true, size: 1, children: "Confidence" }),
+              /* @__PURE__ */ jsx26(
+                Tooltip8,
+                {
+                  content: /* @__PURE__ */ jsx26(Box14, { padding: 2, style: { maxWidth: 260 }, children: /* @__PURE__ */ jsx26(Text23, { size: 2, children: GLOSSARY.confidence }) }),
+                  placement: "bottom",
+                  portal: true,
+                  children: /* @__PURE__ */ jsx26(Text23, { muted: true, size: 1, children: /* @__PURE__ */ jsx26(HelpCircleIcon8, {}) })
+                }
+              )
+            ] }) })
+          ]
+        }
+      ),
+      recommendations.gaps.map((gap, i) => /* @__PURE__ */ jsx26(RecommendationRow, { gap, index: i }, `gap-${i}`))
+    ] })
+  ] });
+}
+var FAILURE_MODE_COLORS = {
+  "missing-docs": { bg: "rgba(239,68,68,0.2)", text: "#f87171" },
+  "incorrect-docs": { bg: "rgba(239,68,68,0.2)", text: "#f87171" },
+  "outdated-docs": { bg: "rgba(245,158,11,0.2)", text: "#fbbf24" },
+  "poor-structure": { bg: "rgba(245,158,11,0.2)", text: "#fbbf24" }
+};
+var fmLabel = {
+  fontWeight: 600
+};
+var FAILURE_MODE_DESCS = {
+  "missing-docs": "This feature has no documentation at all. AI agents have nothing to reference when implementing it.",
+  "incorrect-docs": "The documentation contains factual errors \u2014 wrong API signatures, incorrect parameters, or misleading examples.",
+  "outdated-docs": "The docs describe old APIs or deprecated patterns. AI agents follow them and produce code that doesn't work with current versions.",
+  "poor-structure": "The docs exist but are hard to find or understand. AI agents struggle to locate the right information or misinterpret it."
+};
+function failureModeTip(mode) {
+  const desc = FAILURE_MODE_DESCS[mode];
+  if (!desc) return GLOSSARY.failureMode;
+  return /* @__PURE__ */ jsxs20(Text23, { size: 2, style: { lineHeight: 1.5 }, children: [
+    /* @__PURE__ */ jsx26("span", { style: fmLabel, children: mode }),
+    " \u2014 ",
+    desc
+  ] });
+}
+var CONFIDENCE_DESCS = {
+  high: "Strong keyword and structural signal agreement \u2014 this diagnosis is reliable.",
+  medium: "Partial signal agreement \u2014 likely correct but worth verifying manually.",
+  low: "Weak signals only \u2014 treat as a hypothesis to investigate, not a confirmed diagnosis."
+};
+function confidenceTip(level) {
+  const desc = CONFIDENCE_DESCS[level];
+  if (!desc) return GLOSSARY.confidence;
+  const icons = { high: "\u{1F7E2}", medium: "\u{1F7E1}", low: "\u{1F534}" };
+  return /* @__PURE__ */ jsxs20(Text23, { size: 2, style: { lineHeight: 1.5 }, children: [
+    icons[level],
+    " ",
+    /* @__PURE__ */ jsxs20("span", { style: fmLabel, children: [
+      level,
+      " confidence"
+    ] }),
+    " \u2014 ",
+    desc
+  ] });
 }
 function RecommendationRow({
   gap,
   index
 }) {
   const confIcon = gap.confidence === "high" ? "\u{1F7E2}" : gap.confidence === "medium" ? "\u{1F7E1}" : "\u{1F534}";
-  const bg = rowBackground(index);
-  return /* @__PURE__ */ jsxs22(React4.Fragment, { children: [
-    /* @__PURE__ */ jsx27(
-      "div",
-      {
-        style: {
-          alignItems: "center",
-          background: bg,
-          borderRadius: 4,
-          display: "flex",
-          padding: "8px 4px"
-        },
-        children: /* @__PURE__ */ jsx27(Text23, { muted: true, size: 2, children: index + 1 })
-      }
-    ),
-    /* @__PURE__ */ jsx27(
-      "div",
-      {
-        style: {
-          alignItems: "center",
-          background: bg,
-          display: "flex",
-          padding: "8px 0"
-        },
-        children: /* @__PURE__ */ jsx27(Text23, { size: 2, weight: "medium", children: gap.area })
-      }
-    ),
-    /* @__PURE__ */ jsx27(
-      "div",
-      {
-        style: {
-          alignItems: "center",
-          background: bg,
-          display: "flex",
-          padding: "8px 0"
-        },
-        children: /* @__PURE__ */ jsx27(
-          Badge9,
+  const fmColors = FAILURE_MODE_COLORS[gap.failureMode] ?? {
+    bg: "var(--card-muted-bg-color)",
+    text: "var(--card-muted-fg-color)"
+  };
+  return /* @__PURE__ */ jsxs20(
+    Flex16,
+    {
+      align: "center",
+      gap: 3,
+      padding: 4,
+      style: index > 0 ? dividerStyle : void 0,
+      children: [
+        /* @__PURE__ */ jsx26(Box14, { style: { width: 32 }, children: /* @__PURE__ */ jsx26(Text23, { muted: true, size: 2, children: index + 1 }) }),
+        /* @__PURE__ */ jsx26(Box14, { flex: 2, children: /* @__PURE__ */ jsx26(Text23, { size: 2, weight: "medium", children: gap.area }) }),
+        /* @__PURE__ */ jsx26(Box14, { flex: 2, children: /* @__PURE__ */ jsx26(HoverTip, { text: failureModeTip(gap.failureMode), children: /* @__PURE__ */ jsx26(
+          "span",
           {
-            tone: gap.failureMode === "missing-docs" ? "critical" : gap.failureMode === "incorrect-docs" ? "critical" : gap.failureMode === "outdated-docs" ? "caution" : "default",
+            style: {
+              backgroundColor: fmColors.bg,
+              borderRadius: 4,
+              color: fmColors.text,
+              fontSize: 13,
+              fontWeight: 500,
+              padding: "3px 8px"
+            },
             children: gap.failureMode
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx27(
-      "div",
-      {
-        style: {
-          alignItems: "center",
-          background: bg,
-          display: "flex",
-          padding: "8px 0"
-        },
-        children: /* @__PURE__ */ jsx27(Text23, { muted: true, size: 2, children: gap.remediation })
-      }
-    ),
-    /* @__PURE__ */ jsx27(
-      "div",
-      {
-        style: {
-          alignItems: "center",
-          background: bg,
-          display: "flex",
-          padding: "8px 0"
-        },
-        children: /* @__PURE__ */ jsx27(Card16, { padding: 2, radius: 2, tone: "positive", children: /* @__PURE__ */ jsxs22(Text23, { align: "center", size: 2, weight: "medium", children: [
-          "+",
-          gap.estimatedLift.toFixed(1)
-        ] }) })
-      }
-    ),
-    /* @__PURE__ */ jsx27(
-      "div",
-      {
-        style: {
-          alignItems: "center",
-          background: bg,
-          display: "flex",
-          padding: "8px 0"
-        },
-        children: /* @__PURE__ */ jsxs22(Text23, { size: 2, children: [
+        ) }) }),
+        /* @__PURE__ */ jsx26(Box14, { flex: 2, children: /* @__PURE__ */ jsx26(Text23, { muted: true, size: 2, children: gap.remediation }) }),
+        /* @__PURE__ */ jsx26(Box14, { style: { textAlign: "right", width: 72 }, children: /* @__PURE__ */ jsxs20(
+          "span",
+          {
+            style: {
+              backgroundColor: "rgba(16,185,129,0.2)",
+              borderRadius: 4,
+              color: "#34d399",
+              fontFamily: "var(--font-code-size, monospace)",
+              fontSize: 14,
+              fontWeight: 600,
+              padding: "3px 8px"
+            },
+            children: [
+              "+",
+              gap.estimatedLift.toFixed(1)
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx26(Box14, { style: { textAlign: "right", width: 90 }, children: /* @__PURE__ */ jsx26(HoverTip, { text: confidenceTip(gap.confidence), children: /* @__PURE__ */ jsxs20(Text23, { size: 2, children: [
           confIcon,
           " ",
           gap.confidence
-        ] })
-      }
-    )
-  ] });
+        ] }) }) })
+      ]
+    }
+  );
 }
 
 // src/components/report-detail/ReportHeader.tsx
 import { ArrowLeftIcon } from "@sanity/icons";
-import { Badge as Badge10, Button as Button4, Flex as Flex19, Stack as Stack20, Text as Text25 } from "@sanity/ui";
+import { Badge as Badge7, Button as Button4, Flex as Flex19, Stack as Stack19, Text as Text25 } from "@sanity/ui";
 
 // src/components/report-detail/report-actions/ReportActions.tsx
 import { ChevronDownIcon, CopyIcon as CopyIcon2 } from "@sanity/icons";
@@ -5839,19 +6205,19 @@ import {
   MenuDivider,
   useToast as useToast7
 } from "@sanity/ui";
-import { useCallback as useCallback17, useState as useState12 } from "react";
+import { useCallback as useCallback17, useState as useState13 } from "react";
 import { useClient as useClient9 } from "sanity";
 
 // src/components/report-detail/report-actions/CopyReportAction.tsx
 import { ClipboardIcon } from "@sanity/icons";
 import { MenuItem, useToast as useToast2 } from "@sanity/ui";
-import { useCallback as useCallback12, useState as useState9 } from "react";
+import { useCallback as useCallback12, useState as useState10 } from "react";
 import { useClient as useClient6 } from "sanity";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function CopyReportAction({ documentId }) {
   const client = useClient6({ apiVersion: API_VERSION });
   const toast = useToast2();
-  const [copying, setCopying] = useState9(false);
+  const [copying, setCopying] = useState10(false);
   const handleClick = useCallback12(async () => {
     setCopying(true);
     try {
@@ -5884,7 +6250,7 @@ function CopyReportAction({ documentId }) {
       setCopying(false);
     }
   }, [client, documentId, toast]);
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx27(
     MenuItem,
     {
       disabled: copying,
@@ -5899,7 +6265,7 @@ function CopyReportAction({ documentId }) {
 import { CopyIcon } from "@sanity/icons";
 import { MenuItem as MenuItem2, useToast as useToast3 } from "@sanity/ui";
 import { useCallback as useCallback13 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function CopyReportIdAction({ reportId }) {
   const toast = useToast3();
   const handleClick = useCallback13(() => {
@@ -5920,14 +6286,14 @@ function CopyReportIdAction({ reportId }) {
       }
     );
   }, [reportId, toast]);
-  return /* @__PURE__ */ jsx29(MenuItem2, { icon: CopyIcon, onClick: handleClick, text: "Copy report ID" });
+  return /* @__PURE__ */ jsx28(MenuItem2, { icon: CopyIcon, onClick: handleClick, text: "Copy report ID" });
 }
 
 // src/components/report-detail/report-actions/CopyVisionQueryAction.tsx
 import { SearchIcon as SearchIcon4 } from "@sanity/icons";
 import { MenuItem as MenuItem3, useToast as useToast4 } from "@sanity/ui";
 import { useCallback as useCallback14 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function CopyVisionQueryAction({
   reportId
 }) {
@@ -5952,7 +6318,7 @@ function CopyVisionQueryAction({
       }
     );
   }, [reportId, toast]);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx29(
     MenuItem3,
     {
       icon: SearchIcon4,
@@ -5963,24 +6329,24 @@ function CopyVisionQueryAction({
 }
 
 // src/components/report-detail/report-actions/DeleteConfirmDialog.tsx
-import { Box as Box13, Button as Button2, Card as Card17, Dialog, Flex as Flex17, Stack as Stack19, Text as Text24 } from "@sanity/ui";
-import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Box as Box15, Button as Button2, Card as Card12, Dialog, Flex as Flex17, Stack as Stack18, Text as Text24 } from "@sanity/ui";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 function DeleteConfirmDialog({
   isDeleting,
   onClose,
   onConfirm,
   reportId
 }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx30(
     Dialog,
     {
       header: "Delete Report",
       id: "delete-report-dialog",
       onClose,
       width: 1,
-      children: /* @__PURE__ */ jsx31(Box13, { padding: 4, children: /* @__PURE__ */ jsxs23(Stack19, { space: 4, children: [
-        /* @__PURE__ */ jsx31(Text24, { children: "Are you sure you want to delete this report? This action cannot be undone." }),
-        /* @__PURE__ */ jsx31(Card17, { border: true, padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsx31(
+      children: /* @__PURE__ */ jsx30(Box15, { padding: 4, children: /* @__PURE__ */ jsxs21(Stack18, { space: 4, children: [
+        /* @__PURE__ */ jsx30(Text24, { children: "Are you sure you want to delete this report? This action cannot be undone." }),
+        /* @__PURE__ */ jsx30(Card12, { border: true, padding: 3, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsx30(
           Text24,
           {
             muted: true,
@@ -5989,8 +6355,8 @@ function DeleteConfirmDialog({
             children: reportId
           }
         ) }),
-        /* @__PURE__ */ jsxs23(Flex17, { gap: 2, justify: "flex-end", children: [
-          /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsxs21(Flex17, { gap: 2, justify: "flex-end", children: [
+          /* @__PURE__ */ jsx30(
             Button2,
             {
               disabled: isDeleting,
@@ -5999,7 +6365,7 @@ function DeleteConfirmDialog({
               text: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx30(
             Button2,
             {
               disabled: isDeleting,
@@ -6017,11 +6383,11 @@ function DeleteConfirmDialog({
 // src/components/report-detail/report-actions/DeleteReportAction.tsx
 import { TrashIcon } from "@sanity/icons";
 import { MenuItem as MenuItem4 } from "@sanity/ui";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function DeleteReportAction({
   onRequestDelete
 }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx31(
     MenuItem4,
     {
       icon: TrashIcon,
@@ -6035,16 +6401,16 @@ function DeleteReportAction({
 // src/components/report-detail/report-actions/DownloadReportAction.tsx
 import { DownloadIcon } from "@sanity/icons";
 import { MenuItem as MenuItem5, useToast as useToast5 } from "@sanity/ui";
-import { useCallback as useCallback15, useState as useState10 } from "react";
+import { useCallback as useCallback15, useState as useState11 } from "react";
 import { useClient as useClient7 } from "sanity";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function DownloadReportAction({
   documentId,
   reportId
 }) {
   const client = useClient7({ apiVersion: API_VERSION });
   const toast = useToast5();
-  const [downloading, setDownloading] = useState10(false);
+  const [downloading, setDownloading] = useState11(false);
   const handleClick = useCallback15(async () => {
     setDownloading(true);
     try {
@@ -6085,7 +6451,7 @@ function DownloadReportAction({
       setDownloading(false);
     }
   }, [client, documentId, reportId, toast]);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(
     MenuItem5,
     {
       disabled: downloading,
@@ -6099,7 +6465,7 @@ function DownloadReportAction({
 // src/components/report-detail/report-actions/RerunEvaluationAction.tsx
 import { PlayIcon as PlayIcon2 } from "@sanity/icons";
 import { MenuItem as MenuItem6, useToast as useToast6 } from "@sanity/ui";
-import { useCallback as useCallback16, useState as useState11 } from "react";
+import { useCallback as useCallback16, useState as useState12 } from "react";
 import { useClient as useClient8, useCurrentUser as useCurrentUser3 } from "sanity";
 
 // src/lib/eval-scope.ts
@@ -6115,7 +6481,7 @@ function extractEvalScope(provenance) {
 }
 
 // src/components/report-detail/report-actions/RerunEvaluationAction.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var EVAL_REQUEST_TYPE2 = "ailf.evalRequest";
 function slugify2(s) {
   return s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 40);
@@ -6154,7 +6520,7 @@ function RerunEvaluationAction({
   const client = useClient8({ apiVersion: API_VERSION });
   const currentUser = useCurrentUser3();
   const toast = useToast6();
-  const [requesting, setRequesting] = useState11(false);
+  const [requesting, setRequesting] = useState12(false);
   const handleClick = useCallback16(async () => {
     setRequesting(true);
     try {
@@ -6182,7 +6548,7 @@ function RerunEvaluationAction({
       setRequesting(false);
     }
   }, [client, currentUser?.id, provenance, reportId, toast]);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx33(
     MenuItem6,
     {
       disabled: requesting,
@@ -6194,7 +6560,7 @@ function RerunEvaluationAction({
 }
 
 // src/components/report-detail/report-actions/ReportActions.tsx
-import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 function ReportActions({
   documentId,
   onDeleted,
@@ -6221,8 +6587,8 @@ function ReportActions({
       }
     );
   }, [reportId, toast]);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState12(false);
-  const [deleting, setDeleting] = useState12(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState13(false);
+  const [deleting, setDeleting] = useState13(false);
   const handleRequestDelete = useCallback17(() => {
     setDeleteDialogOpen(true);
   }, []);
@@ -6250,9 +6616,9 @@ function ReportActions({
       setDeleting(false);
     }
   }, [client, documentId, onDeleted, toast]);
-  return /* @__PURE__ */ jsxs24(Fragment8, { children: [
-    /* @__PURE__ */ jsxs24(Flex18, { children: [
-      /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs22(Fragment8, { children: [
+    /* @__PURE__ */ jsxs22(Flex18, { children: [
+      /* @__PURE__ */ jsx34(
         Button3,
         {
           icon: CopyIcon2,
@@ -6266,10 +6632,10 @@ function ReportActions({
           text: "Copy Report ID"
         }
       ),
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx34(
         MenuButton,
         {
-          button: /* @__PURE__ */ jsx35(
+          button: /* @__PURE__ */ jsx34(
             Button3,
             {
               icon: ChevronDownIcon,
@@ -6282,33 +6648,33 @@ function ReportActions({
             }
           ),
           id: "report-actions-menu",
-          menu: /* @__PURE__ */ jsxs24(Menu, { children: [
-            /* @__PURE__ */ jsx35(CopyReportIdAction, { reportId }),
-            /* @__PURE__ */ jsx35(
+          menu: /* @__PURE__ */ jsxs22(Menu, { children: [
+            /* @__PURE__ */ jsx34(CopyReportIdAction, { reportId }),
+            /* @__PURE__ */ jsx34(
               RerunEvaluationAction,
               {
                 provenance,
                 reportId
               }
             ),
-            /* @__PURE__ */ jsx35(MenuDivider, {}),
-            /* @__PURE__ */ jsx35(
+            /* @__PURE__ */ jsx34(MenuDivider, {}),
+            /* @__PURE__ */ jsx34(
               DownloadReportAction,
               {
                 documentId,
                 reportId
               }
             ),
-            /* @__PURE__ */ jsx35(CopyReportAction, { documentId }),
-            /* @__PURE__ */ jsx35(CopyVisionQueryAction, { reportId }),
-            /* @__PURE__ */ jsx35(MenuDivider, {}),
-            /* @__PURE__ */ jsx35(DeleteReportAction, { onRequestDelete: handleRequestDelete })
+            /* @__PURE__ */ jsx34(CopyReportAction, { documentId }),
+            /* @__PURE__ */ jsx34(CopyVisionQueryAction, { reportId }),
+            /* @__PURE__ */ jsx34(MenuDivider, {}),
+            /* @__PURE__ */ jsx34(DeleteReportAction, { onRequestDelete: handleRequestDelete })
           ] }),
           popover: { placement: "bottom-end", portal: true }
         }
       )
     ] }),
-    deleteDialogOpen && /* @__PURE__ */ jsx35(
+    deleteDialogOpen && /* @__PURE__ */ jsx34(
       DeleteConfirmDialog,
       {
         isDeleting: deleting,
@@ -6321,7 +6687,7 @@ function ReportActions({
 }
 
 // src/components/report-detail/ReportHeader.tsx
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 function ReportHeader({
   completedAt,
   documentId,
@@ -6336,16 +6702,16 @@ function ReportHeader({
   const dateLabel = formatCardDate(completedAt);
   const title = tag ?? dateLabel;
   const hasTag = Boolean(tag);
-  return /* @__PURE__ */ jsxs25(Flex19, { align: "center", gap: 3, children: [
-    /* @__PURE__ */ jsx36(Button4, { icon: ArrowLeftIcon, mode: "bleed", onClick: onBack, text: "Back" }),
-    /* @__PURE__ */ jsxs25(Stack20, { flex: 1, space: 1, children: [
-      /* @__PURE__ */ jsx36(Text25, { size: 4, weight: "bold", children: title }),
-      hasTag && /* @__PURE__ */ jsx36(Text25, { muted: true, size: 2, children: dateLabel })
+  return /* @__PURE__ */ jsxs23(Flex19, { align: "center", gap: 3, children: [
+    /* @__PURE__ */ jsx35(Button4, { icon: ArrowLeftIcon, mode: "bleed", onClick: onBack, text: "Back" }),
+    /* @__PURE__ */ jsxs23(Stack19, { flex: 1, space: 1, children: [
+      /* @__PURE__ */ jsx35(Text25, { size: 4, weight: "bold", children: title }),
+      hasTag && /* @__PURE__ */ jsx35(Text25, { muted: true, size: 2, children: dateLabel })
     ] }),
-    /* @__PURE__ */ jsxs25(Flex19, { align: "center", gap: 2, children: [
-      /* @__PURE__ */ jsx36(Badge10, { mode: "outline", tone: "default", children: sourceName }),
-      /* @__PURE__ */ jsx36(Badge10, { tone: "primary", children: mode }),
-      /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsxs23(Flex19, { align: "center", gap: 2, children: [
+      /* @__PURE__ */ jsx35(Badge7, { mode: "outline", tone: "default", children: sourceName }),
+      /* @__PURE__ */ jsx35(Badge7, { tone: "primary", children: mode }),
+      /* @__PURE__ */ jsx35(
         ReportActions,
         {
           documentId,
@@ -6358,137 +6724,1286 @@ function ReportHeader({
   ] });
 }
 
-// src/components/report-detail/ThreeLayerTable.tsx
-import React5 from "react";
-import { Badge as Badge11, Card as Card18, Flex as Flex20, Stack as Stack21, Text as Text26 } from "@sanity/ui";
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
-function ThreeLayerTable({ scores }) {
-  const filtered = scores.filter((s) => s.actualScore != null);
-  if (filtered.length === 0) return null;
-  const hasInverted = filtered.some((s) => s.invertedRetrievalGap);
-  return /* @__PURE__ */ jsx37(Card18, { overflow: "auto", padding: 4, radius: 2, shadow: 1, children: /* @__PURE__ */ jsxs26(Stack21, { space: 4, children: [
-    /* @__PURE__ */ jsxs26(Flex20, { align: "center", gap: 3, children: [
-      /* @__PURE__ */ jsx37(Text26, { size: 3, weight: "semibold", children: "Three-Layer Decomposition" }),
-      /* @__PURE__ */ jsx37(Badge11, { tone: "primary", children: "full mode" })
-    ] }),
-    /* @__PURE__ */ jsxs26(
+// src/components/report-detail/StrengthsList.tsx
+import { CheckmarkCircleIcon as CheckmarkCircleIcon2, SearchIcon as SearchIcon5, ChartUpwardIcon } from "@sanity/icons";
+import { Box as Box17, Flex as Flex21, Stack as Stack21, Text as Text27 } from "@sanity/ui";
+
+// src/components/report-detail/StrengthsTable.tsx
+import {
+  useCallback as useCallback18,
+  useMemo as useMemo6,
+  useState as useState14
+} from "react";
+import { WarningOutlineIcon as WarningOutlineIcon2 } from "@sanity/icons";
+import { Box as Box16, Flex as Flex20, Stack as Stack20, Text as Text26 } from "@sanity/ui";
+import { jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
+var GRID2 = "96px 1fr 1fr 1fr 1fr 80px 120px 80px";
+function StrengthsTable({
+  scores,
+  improved = [],
+  regressed = [],
+  unchanged = []
+}) {
+  const [sortField, setSortField] = useState14("score");
+  const [sortDir, setSortDir] = useState14("desc");
+  const handleSort = useCallback18(
+    (field) => {
+      if (field === sortField) {
+        setSortDir((d) => d === "asc" ? "desc" : "asc");
+      } else {
+        setSortField(field);
+        setSortDir("desc");
+      }
+    },
+    [sortField]
+  );
+  const sorted = useMemo6(() => {
+    const dir = sortDir === "asc" ? 1 : -1;
+    return [...scores].sort((a, b) => {
+      switch (sortField) {
+        case "score":
+          return (a.totalScore - b.totalScore) * dir;
+        case "area":
+          return a.feature.localeCompare(b.feature) * dir;
+        case "task":
+          return (a.taskCompletion - b.taskCompletion) * dir;
+        case "code":
+          return (a.codeCorrectness - b.codeCorrectness) * dir;
+        case "docs":
+          return (a.docCoverage - b.docCoverage) * dir;
+        case "lift":
+          return (a.docLift - b.docLift) * dir;
+        case "ceiling":
+          return ((a.ceilingScore ?? 0) - (b.ceilingScore ?? 0)) * dir;
+        default:
+          return 0;
+      }
+    });
+  }, [scores, sortField, sortDir]);
+  return /* @__PURE__ */ jsxs24(Box16, { style: { ...neutralCardStyle, overflow: "auto" }, children: [
+    /* @__PURE__ */ jsxs24(
       "div",
       {
         style: {
+          borderBottom: "1px solid var(--card-border-color)",
           display: "grid",
-          gap: "0 8px",
-          gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr 1fr"
+          gap: "0 12px",
+          gridTemplateColumns: GRID2,
+          padding: "12px 16px 8px"
         },
         children: [
-          /* @__PURE__ */ jsx37(ColumnHeader, { borderBottom: true, label: "Area" }),
-          /* @__PURE__ */ jsx37(ColumnHeader, { borderBottom: true, label: "Floor", tooltip: GLOSSARY.floor }),
-          /* @__PURE__ */ jsx37(
-            ColumnHeader,
+          /* @__PURE__ */ jsx36(
+            ColHeader2,
             {
-              borderBottom: true,
-              label: "Ceiling",
-              tooltip: GLOSSARY.ceiling
+              active: sortField === "score",
+              direction: sortDir,
+              label: "Score",
+              onClick: () => handleSort("score"),
+              tooltip: GLOSSARY.score
             }
           ),
-          /* @__PURE__ */ jsx37(ColumnHeader, { borderBottom: true, label: "Actual", tooltip: GLOSSARY.actual }),
-          /* @__PURE__ */ jsx37(
-            ColumnHeader,
+          /* @__PURE__ */ jsx36(
+            ColHeader2,
             {
-              borderBottom: true,
-              label: "Ret. Gap",
-              tooltip: GLOSSARY.retGap
+              active: sortField === "area",
+              direction: sortDir,
+              label: "Area",
+              onClick: () => handleSort("area")
             }
           ),
-          /* @__PURE__ */ jsx37(
-            ColumnHeader,
+          /* @__PURE__ */ jsx36(
+            ColHeader2,
             {
-              borderBottom: true,
-              label: "Efficiency",
-              tooltip: GLOSSARY.efficiency
+              active: sortField === "task",
+              direction: sortDir,
+              label: "Task",
+              onClick: () => handleSort("task"),
+              tooltip: GLOSSARY.taskCompletion
             }
           ),
-          filtered.map((score, i) => /* @__PURE__ */ jsxs26(React5.Fragment, { children: [
-            /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx36(
+            ColHeader2,
+            {
+              active: sortField === "code",
+              direction: sortDir,
+              label: "Code",
+              onClick: () => handleSort("code"),
+              tooltip: GLOSSARY.codeCorrectness
+            }
+          ),
+          /* @__PURE__ */ jsx36(
+            ColHeader2,
+            {
+              active: sortField === "docs",
+              direction: sortDir,
+              label: "Docs",
+              onClick: () => handleSort("docs"),
+              tooltip: GLOSSARY.docCoverage
+            }
+          ),
+          /* @__PURE__ */ jsx36(
+            ColHeader2,
+            {
+              active: sortField === "lift",
+              direction: sortDir,
+              label: "Lift",
+              onClick: () => handleSort("lift"),
+              tooltip: GLOSSARY.docLift
+            }
+          ),
+          /* @__PURE__ */ jsx36(
+            ColHeader2,
+            {
+              active: sortField === "ceiling",
+              direction: sortDir,
+              label: "Floor\u2192Ceil",
+              onClick: () => handleSort("ceiling")
+            }
+          ),
+          /* @__PURE__ */ jsx36(ColHeader2, { label: "Trend" })
+        ]
+      }
+    ),
+    sorted.map((area) => /* @__PURE__ */ jsx36(
+      AreaRow,
+      {
+        area,
+        improved,
+        regressed,
+        unchanged
+      },
+      area.feature
+    ))
+  ] });
+}
+function AreaRow({
+  area,
+  improved,
+  regressed,
+  unchanged
+}) {
+  const trend = improved.includes(area.feature) ? "improved" : regressed.includes(area.feature) ? "regressed" : unchanged.includes(area.feature) ? "unchanged" : null;
+  return /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      style: {
+        alignItems: "center",
+        borderBottom: "1px solid var(--card-border-color)",
+        display: "grid",
+        gap: "0 12px",
+        gridTemplateColumns: GRID2,
+        padding: "10px 16px"
+      },
+      children: [
+        /* @__PURE__ */ jsx36(
+          HoverTip,
+          {
+            text: /* @__PURE__ */ jsxs24(Text26, { size: 2, style: { lineHeight: 1.5 }, children: [
+              /* @__PURE__ */ jsx36("span", { style: { fontWeight: 600 }, children: area.feature }),
+              " composite:",
+              " ",
+              /* @__PURE__ */ jsx36(
+                "span",
+                {
+                  style: {
+                    color: scoreColor(area.totalScore),
+                    fontFamily: "var(--font-code-size, monospace)",
+                    fontWeight: 600
+                  },
+                  children: Math.round(area.totalScore)
+                }
+              ),
+              /* @__PURE__ */ jsx36("span", { style: { color: "var(--card-muted-fg-color)" }, children: "/100" }),
+              ".",
+              " ",
+              GLOSSARY.score
+            ] }),
+            children: /* @__PURE__ */ jsx36(
               "div",
               {
                 style: {
-                  background: rowBackground(i),
-                  borderRadius: 4,
-                  padding: "8px 0 8px 4px"
+                  alignItems: "center",
+                  backgroundColor: scoreBg(area.totalScore),
+                  border: `1px solid ${scoreBorder(area.totalScore)}`,
+                  borderRadius: 6,
+                  color: scoreColor(area.totalScore),
+                  display: "flex",
+                  fontSize: 16,
+                  fontWeight: 700,
+                  height: 36,
+                  justifyContent: "center",
+                  width: 44
                 },
-                children: /* @__PURE__ */ jsx37(Text26, { size: 2, weight: "medium", children: score.feature })
+                children: Math.round(area.totalScore)
               }
-            ),
-            /* @__PURE__ */ jsx37(
-              "div",
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs24(Flex20, { align: "center", gap: 2, wrap: "wrap", children: [
+          /* @__PURE__ */ jsx36(Text26, { size: 2, weight: "medium", children: area.feature }),
+          area.negativeDocLift && /* @__PURE__ */ jsx36(HoverTip, { text: GLOSSARY.docsHurt, children: /* @__PURE__ */ jsx36(
+            "span",
+            {
+              style: {
+                alignItems: "center",
+                backgroundColor: "rgba(239,68,68,0.2)",
+                borderRadius: 3,
+                color: "#f87171",
+                display: "inline-flex",
+                fontSize: 11,
+                gap: 3,
+                padding: "1px 5px"
+              },
+              children: /* @__PURE__ */ jsx36(WarningOutlineIcon2, {})
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx36(
+          DimCell,
+          {
+            area: area.feature,
+            dim: "Task Completion",
+            value: area.taskCompletion
+          }
+        ),
+        /* @__PURE__ */ jsx36(
+          DimCell,
+          {
+            area: area.feature,
+            dim: "Code Correctness",
+            value: area.codeCorrectness
+          }
+        ),
+        /* @__PURE__ */ jsx36(
+          DimCell,
+          {
+            area: area.feature,
+            dim: "Doc Coverage",
+            value: area.docCoverage
+          }
+        ),
+        /* @__PURE__ */ jsx36(
+          HoverTip,
+          {
+            text: /* @__PURE__ */ jsxs24(Text26, { size: 2, style: { lineHeight: 1.5 }, children: [
+              /* @__PURE__ */ jsx36("span", { style: { fontWeight: 600 }, children: area.feature }),
+              " doc lift:",
+              " ",
+              /* @__PURE__ */ jsxs24(
+                "span",
+                {
+                  style: {
+                    color: area.docLift >= 0 ? "#34d399" : "#f87171",
+                    fontFamily: "var(--font-code-size, monospace)",
+                    fontWeight: 600
+                  },
+                  children: [
+                    area.docLift > 0 ? "+" : "",
+                    area.docLift
+                  ]
+                }
+              ),
+              " ",
+              "pts. ",
+              GLOSSARY.docLift
+            ] }),
+            children: /* @__PURE__ */ jsxs24(
+              Text26,
               {
+                size: 2,
                 style: {
-                  background: rowBackground(i),
-                  display: "flex",
-                  padding: "2px 0"
+                  color: area.docLift >= 5 ? "#34d399" : area.docLift < 0 ? "#f87171" : "var(--card-fg-color)",
+                  fontFamily: "var(--font-code-size, monospace)",
+                  fontWeight: 600
                 },
-                children: /* @__PURE__ */ jsx37(ScoreCell, { score: score.floorScore ?? 0 })
+                children: [
+                  area.docLift > 0 ? "+" : "",
+                  area.docLift
+                ]
               }
-            ),
-            /* @__PURE__ */ jsx37(
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs24(
+          Text26,
+          {
+            muted: true,
+            size: 1,
+            style: { fontFamily: "var(--font-code-size, monospace)" },
+            children: [
+              Math.round(area.floorScore ?? 0),
+              " \u2192",
+              " ",
+              Math.round(area.ceilingScore ?? 0)
+            ]
+          }
+        ),
+        trend && /* @__PURE__ */ jsx36(
+          "span",
+          {
+            style: {
+              backgroundColor: trend === "improved" ? "rgba(16,185,129,0.2)" : trend === "regressed" ? "rgba(239,68,68,0.2)" : "var(--card-muted-bg-color)",
+              borderRadius: 4,
+              color: trend === "improved" ? "#34d399" : trend === "regressed" ? "#f87171" : "var(--card-muted-fg-color)",
+              fontSize: 12,
+              fontWeight: 500,
+              padding: "3px 8px",
+              whiteSpace: "nowrap"
+            },
+            children: trend
+          }
+        )
+      ]
+    }
+  );
+}
+function DimCell({
+  area,
+  dim,
+  value
+}) {
+  const glossary = {
+    "Task Completion": GLOSSARY.taskCompletion,
+    "Code Correctness": GLOSSARY.codeCorrectness,
+    "Doc Coverage": GLOSSARY.docCoverage
+  };
+  return /* @__PURE__ */ jsx36(
+    HoverTip,
+    {
+      text: /* @__PURE__ */ jsxs24(Text26, { size: 2, style: { lineHeight: 1.5 }, children: [
+        /* @__PURE__ */ jsx36("span", { style: { fontWeight: 600 }, children: area }),
+        " \u2192",
+        " ",
+        /* @__PURE__ */ jsx36("span", { style: { fontWeight: 600 }, children: dim }),
+        ":",
+        " ",
+        /* @__PURE__ */ jsx36(
+          "span",
+          {
+            style: {
+              color: scoreColor(value),
+              fontFamily: "var(--font-code-size, monospace)",
+              fontWeight: 600
+            },
+            children: Math.round(value)
+          }
+        ),
+        /* @__PURE__ */ jsx36("span", { style: { color: "var(--card-muted-fg-color)" }, children: "/100" }),
+        ".",
+        " ",
+        glossary[dim] ?? ""
+      ] }),
+      children: /* @__PURE__ */ jsxs24(Stack20, { space: 1, style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx36(
+          Text26,
+          {
+            size: 1,
+            style: {
+              color: scoreColor(value),
+              fontFamily: "var(--font-code-size, monospace)",
+              fontWeight: 600
+            },
+            children: Math.round(value)
+          }
+        ),
+        /* @__PURE__ */ jsx36(
+          "div",
+          {
+            style: {
+              backgroundColor: "var(--card-border-color)",
+              borderRadius: 999,
+              height: 4,
+              overflow: "hidden",
+              width: "100%"
+            },
+            children: /* @__PURE__ */ jsx36(
               "div",
               {
                 style: {
-                  background: rowBackground(i),
-                  display: "flex",
-                  padding: "2px 0"
-                },
-                children: /* @__PURE__ */ jsx37(ScoreCell, { score: score.ceilingScore ?? score.totalScore })
+                  backgroundColor: barFillColor(value),
+                  borderRadius: 999,
+                  height: "100%",
+                  transition: "width 0.3s",
+                  width: `${Math.min(value, 100)}%`
+                }
               }
-            ),
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+function ColHeader2({
+  active,
+  direction,
+  label,
+  onClick,
+  tooltip
+}) {
+  const handleKeyDown = useCallback18(
+    (e) => {
+      if (onClick && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        onClick();
+      }
+    },
+    [onClick]
+  );
+  const arrow = active ? direction === "asc" ? " \u2191" : " \u2193" : "";
+  return /* @__PURE__ */ jsxs24(Flex20, { align: "center", gap: 1, children: [
+    /* @__PURE__ */ jsx36(
+      "div",
+      {
+        onClick,
+        onKeyDown: onClick ? handleKeyDown : void 0,
+        role: onClick ? "button" : void 0,
+        style: {
+          cursor: onClick ? "pointer" : "default",
+          userSelect: "none"
+        },
+        tabIndex: onClick ? 0 : void 0,
+        children: /* @__PURE__ */ jsxs24(
+          Text26,
+          {
+            muted: true,
+            size: 1,
+            style: {
+              letterSpacing: "0.06em",
+              textTransform: "uppercase"
+            },
+            weight: "semibold",
+            children: [
+              label,
+              arrow
+            ]
+          }
+        )
+      }
+    ),
+    tooltip && /* @__PURE__ */ jsx36(InfoTip, { text: tooltip })
+  ] });
+}
+
+// src/components/report-detail/StrengthsList.tsx
+import { jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
+var EFFICIENCY_THRESHOLD = 0.85;
+function StrengthsList({ scores, comparison }) {
+  const retrievalSuccesses = scores.filter(
+    (s) => s.infrastructureEfficiency != null && s.infrastructureEfficiency >= EFFICIENCY_THRESHOLD && !s.invertedRetrievalGap
+  ).sort(
+    (a, b) => (b.infrastructureEfficiency ?? 0) - (a.infrastructureEfficiency ?? 0)
+  );
+  const improved = comparison?.improved ?? [];
+  if (scores.length === 0) return null;
+  return /* @__PURE__ */ jsxs25(Stack21, { space: 5, children: [
+    /* @__PURE__ */ jsxs25(Stack21, { space: 3, children: [
+      /* @__PURE__ */ jsxs25(Flex21, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx37(CheckmarkCircleIcon2, { style: { color: "#34d399" } }),
+        /* @__PURE__ */ jsx37(Text27, { size: 2, weight: "medium", children: "All Areas \u2014 Scores & Doc Lift" }),
+        /* @__PURE__ */ jsx37(InfoTip, { text: GLOSSARY.strengths })
+      ] }),
+      /* @__PURE__ */ jsx37(
+        StrengthsTable,
+        {
+          improved: comparison?.improved ?? [],
+          regressed: comparison?.regressed ?? [],
+          scores,
+          unchanged: comparison?.unchanged ?? []
+        }
+      )
+    ] }),
+    retrievalSuccesses.length > 0 && /* @__PURE__ */ jsxs25(Box17, { style: neutralCardStyle, children: [
+      /* @__PURE__ */ jsx37(
+        Box17,
+        {
+          padding: 4,
+          style: { borderBottom: "1px solid var(--card-border-color)" },
+          children: /* @__PURE__ */ jsxs25(Flex21, { align: "center", gap: 2, children: [
+            /* @__PURE__ */ jsx37(SearchIcon5, { style: { color: "#34d399" } }),
+            /* @__PURE__ */ jsxs25(Text27, { size: 2, weight: "medium", children: [
+              "Retrieval Successes (",
+              Math.round(EFFICIENCY_THRESHOLD * 100),
+              "%+ efficiency)"
+            ] }),
+            /* @__PURE__ */ jsx37(InfoTip, { text: GLOSSARY.retrievalExcellence })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx37(Stack21, { children: retrievalSuccesses.map((area, i) => /* @__PURE__ */ jsxs25(
+        Flex21,
+        {
+          align: "center",
+          justify: "space-between",
+          padding: 4,
+          style: i > 0 ? dividerStyle : void 0,
+          children: [
+            /* @__PURE__ */ jsx37(Text27, { size: 2, children: area.feature }),
             /* @__PURE__ */ jsx37(
-              "div",
+              "span",
               {
                 style: {
-                  background: rowBackground(i),
-                  display: "flex",
-                  padding: "2px 0"
+                  color: efficiencyColor(
+                    area.infrastructureEfficiency ?? null
+                  ),
+                  fontFamily: "var(--font-code-size, monospace)",
+                  fontSize: 16,
+                  fontWeight: 600
                 },
-                children: /* @__PURE__ */ jsx37(ScoreCell, { score: score.actualScore ?? 0 })
+                children: formatPercent(area.infrastructureEfficiency)
               }
-            ),
-            /* @__PURE__ */ jsx37(
-              "div",
+            )
+          ]
+        },
+        area.feature
+      )) })
+    ] }),
+    improved.length > 0 && /* @__PURE__ */ jsxs25(Box17, { style: neutralCardStyle, children: [
+      /* @__PURE__ */ jsx37(
+        Box17,
+        {
+          padding: 4,
+          style: { borderBottom: "1px solid var(--card-border-color)" },
+          children: /* @__PURE__ */ jsxs25(Flex21, { align: "center", gap: 2, children: [
+            /* @__PURE__ */ jsx37(ChartUpwardIcon, { style: { color: "#34d399" } }),
+            /* @__PURE__ */ jsx37(Text27, { size: 2, weight: "medium", children: "Improved Since Last Run" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx37(Stack21, { children: improved.map((featureName, i) => {
+        const area = scores.find((s) => s.feature === featureName);
+        return /* @__PURE__ */ jsxs25(
+          Flex21,
+          {
+            align: "center",
+            justify: "space-between",
+            padding: 4,
+            style: i > 0 ? dividerStyle : void 0,
+            children: [
+              /* @__PURE__ */ jsx37(Text27, { size: 2, children: featureName }),
+              area && /* @__PURE__ */ jsx37(
+                "span",
+                {
+                  style: {
+                    backgroundColor: scoreBg(area.totalScore),
+                    borderRadius: 4,
+                    color: scoreColor(area.totalScore),
+                    fontFamily: "var(--font-code-size, monospace)",
+                    fontSize: 14,
+                    fontWeight: 500,
+                    padding: "3px 10px"
+                  },
+                  children: Math.round(area.totalScore)
+                }
+              )
+            ]
+          },
+          featureName
+        );
+      }) })
+    ] })
+  ] });
+}
+
+// src/components/report-detail/WeaknessesList.tsx
+import {
+  ErrorOutlineIcon as ErrorOutlineIcon3,
+  SearchIcon as SearchIcon6,
+  WarningOutlineIcon as WarningOutlineIcon4,
+  BoltIcon as BoltIcon2,
+  ArrowDownIcon as ArrowDownIcon2
+} from "@sanity/icons";
+import { Box as Box19, Flex as Flex23, Stack as Stack23, Text as Text29 } from "@sanity/ui";
+
+// src/components/report-detail/AreaScoreRow.tsx
+import { WarningOutlineIcon as WarningOutlineIcon3 } from "@sanity/icons";
+import { Box as Box18, Flex as Flex22, Stack as Stack22, Text as Text28 } from "@sanity/ui";
+import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
+function AreaScoreRow({ area, showTrend }) {
+  return /* @__PURE__ */ jsx38(Box18, { style: { ...neutralCardStyle, padding: 20 }, children: /* @__PURE__ */ jsxs26(Stack22, { space: 4, children: [
+    /* @__PURE__ */ jsxs26(Flex22, { align: "flex-start", gap: 3, justify: "space-between", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxs26(Flex22, { align: "center", gap: 3, children: [
+        /* @__PURE__ */ jsx38(
+          HoverTip,
+          {
+            text: /* @__PURE__ */ jsxs26(Text28, { size: 2, style: { lineHeight: 1.5 }, children: [
+              /* @__PURE__ */ jsx38("span", { style: tipBold, children: area.feature }),
+              " composite score:",
+              " ",
+              /* @__PURE__ */ jsx38(
+                "span",
+                {
+                  style: { ...tipValue, color: scoreColor(area.totalScore) },
+                  children: Math.round(area.totalScore)
+                }
+              ),
+              /* @__PURE__ */ jsx38("span", { style: { color: "var(--card-muted-fg-color)" }, children: "/100" }),
+              ". ",
+              GLOSSARY.score
+            ] }),
+            children: /* @__PURE__ */ jsx38(Box18, { style: scoreBoxStyle(area.totalScore), children: /* @__PURE__ */ jsx38("span", { style: { fontSize: 20 }, children: Math.round(area.totalScore) }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs26(Stack22, { space: 2, children: [
+          /* @__PURE__ */ jsxs26(Flex22, { align: "center", gap: 2, wrap: "wrap", children: [
+            /* @__PURE__ */ jsx38(Text28, { size: 3, weight: "semibold", children: area.feature }),
+            area.negativeDocLift && /* @__PURE__ */ jsx38(HoverTip, { text: GLOSSARY.docsHurt, children: /* @__PURE__ */ jsxs26(
+              "span",
               {
                 style: {
                   alignItems: "center",
-                  background: rowBackground(i),
-                  display: "flex",
-                  padding: "6px 0"
+                  backgroundColor: "rgba(239,68,68,0.2)",
+                  borderRadius: 4,
+                  color: "#f87171",
+                  display: "inline-flex",
+                  fontSize: 13,
+                  gap: 4,
+                  padding: "3px 8px"
                 },
-                children: /* @__PURE__ */ jsx37(Text26, { size: 2, children: score.retrievalGap != null ? score.retrievalGap.toFixed(1) : "\u2014" })
+                children: [
+                  /* @__PURE__ */ jsx38(WarningOutlineIcon3, {}),
+                  "Docs Hurt"
+                ]
               }
-            ),
-            /* @__PURE__ */ jsx37(
-              "div",
+            ) }),
+            area.invertedRetrievalGap && /* @__PURE__ */ jsx38(HoverTip, { text: GLOSSARY.invertedRetGap, children: /* @__PURE__ */ jsx38(
+              "span",
               {
                 style: {
-                  alignItems: "center",
-                  background: rowBackground(i),
-                  display: "flex",
-                  padding: "6px 0"
+                  backgroundColor: "rgba(245,158,11,0.2)",
+                  borderRadius: 4,
+                  color: "#fbbf24",
+                  fontSize: 13,
+                  padding: "3px 8px"
                 },
-                children: /* @__PURE__ */ jsxs26(Text26, { size: 2, children: [
-                  formatPercent(score.infrastructureEfficiency),
-                  score.invertedRetrievalGap && " \u26A0\uFE0F"
-                ] })
+                children: "Inverted Retrieval"
               }
-            )
-          ] }, score.feature))
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs26(Text28, { muted: true, size: 2, children: [
+            area.testCount,
+            " test",
+            area.testCount === 1 ? "" : "s"
+          ] })
+        ] })
+      ] }),
+      showTrend && /* @__PURE__ */ jsx38(
+        "span",
+        {
+          style: {
+            backgroundColor: showTrend === "improved" ? "rgba(16,185,129,0.2)" : showTrend === "regressed" ? "rgba(239,68,68,0.2)" : "var(--card-muted-bg-color)",
+            borderRadius: 4,
+            color: showTrend === "improved" ? "#34d399" : showTrend === "regressed" ? "#f87171" : "var(--card-muted-fg-color)",
+            fontSize: 13,
+            fontWeight: 500,
+            padding: "4px 10px"
+          },
+          children: showTrend
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs26(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gap: 16,
+          gridTemplateColumns: "1fr 1fr 1fr"
+        },
+        children: [
+          /* @__PURE__ */ jsx38(
+            DimBar,
+            {
+              label: "Task Completion",
+              tip: dimBarTip(
+                area.feature,
+                "Task Completion",
+                area.taskCompletion,
+                GLOSSARY.taskCompletion
+              ),
+              value: area.taskCompletion
+            }
+          ),
+          /* @__PURE__ */ jsx38(
+            DimBar,
+            {
+              label: "Code Correctness",
+              tip: dimBarTip(
+                area.feature,
+                "Code Correctness",
+                area.codeCorrectness,
+                GLOSSARY.codeCorrectness
+              ),
+              value: area.codeCorrectness
+            }
+          ),
+          /* @__PURE__ */ jsx38(
+            DimBar,
+            {
+              label: "Doc Coverage",
+              tip: dimBarTip(
+                area.feature,
+                "Doc Coverage",
+                area.docCoverage,
+                GLOSSARY.docCoverage
+              ),
+              value: area.docCoverage
+            }
+          )
         ]
       }
     ),
-    hasInverted && /* @__PURE__ */ jsx37(Text26, { muted: true, size: 1, children: GLOSSARY.invertedRetGap })
+    /* @__PURE__ */ jsxs26(Flex22, { gap: 5, style: { ...dividerStyle, paddingTop: 12 }, wrap: "wrap", children: [
+      /* @__PURE__ */ jsx38(
+        MetricPair,
+        {
+          color: area.negativeDocLift ? "#f87171" : "#34d399",
+          label: "Doc Lift",
+          tip: metricTip(
+            area.feature,
+            "Doc Lift",
+            `${area.docLift > 0 ? "+" : ""}${area.docLift}`,
+            GLOSSARY.docLift
+          ),
+          value: `${area.docLift > 0 ? "+" : ""}${area.docLift}`
+        }
+      ),
+      /* @__PURE__ */ jsx38(
+        MetricPair,
+        {
+          label: "Ceiling",
+          tip: metricTip(
+            area.feature,
+            "Ceiling",
+            String(Math.round(area.ceilingScore ?? 0)),
+            GLOSSARY.ceiling
+          ),
+          value: String(Math.round(area.ceilingScore ?? 0))
+        }
+      ),
+      /* @__PURE__ */ jsx38(
+        MetricPair,
+        {
+          label: "Floor",
+          tip: metricTip(
+            area.feature,
+            "Floor",
+            String(Math.round(area.floorScore ?? 0)),
+            GLOSSARY.floor
+          ),
+          value: String(Math.round(area.floorScore ?? 0))
+        }
+      ),
+      area.actualScore != null && /* @__PURE__ */ jsx38(
+        MetricPair,
+        {
+          label: "Actual",
+          tip: metricTip(
+            area.feature,
+            "Actual",
+            String(Math.round(area.actualScore)),
+            GLOSSARY.actualScore
+          ),
+          value: String(Math.round(area.actualScore))
+        }
+      ),
+      area.infrastructureEfficiency != null && /* @__PURE__ */ jsx38(
+        MetricPair,
+        {
+          color: efficiencyColor(area.infrastructureEfficiency),
+          label: "Efficiency",
+          tip: metricTip(
+            area.feature,
+            "Efficiency",
+            formatPercent(area.infrastructureEfficiency),
+            GLOSSARY.infraEfficiency
+          ),
+          value: formatPercent(area.infrastructureEfficiency)
+        }
+      ),
+      area.retrievalGap != null && /* @__PURE__ */ jsx38(
+        MetricPair,
+        {
+          label: "Ret Gap",
+          tip: metricTip(
+            area.feature,
+            "Retrieval Gap",
+            String(area.retrievalGap),
+            GLOSSARY.retrievalGap
+          ),
+          value: String(area.retrievalGap)
+        }
+      )
+    ] })
   ] }) });
 }
+var tipValue = {
+  fontFamily: "var(--font-code-size, monospace)",
+  fontWeight: 600
+};
+var tipBold = { fontWeight: 600 };
+function dimBarTip(area, dim, score, description) {
+  return /* @__PURE__ */ jsxs26(Text28, { size: 2, style: { lineHeight: 1.5 }, children: [
+    /* @__PURE__ */ jsx38("span", { style: tipBold, children: area }),
+    " \u2192 ",
+    /* @__PURE__ */ jsx38("span", { style: tipBold, children: dim }),
+    ":",
+    " ",
+    /* @__PURE__ */ jsx38("span", { style: { ...tipValue, color: scoreColor(score) }, children: Math.round(score) }),
+    /* @__PURE__ */ jsx38("span", { style: { color: "var(--card-muted-fg-color)" }, children: "/100" }),
+    ".",
+    " ",
+    description
+  ] });
+}
+function DimBar({
+  label,
+  value,
+  tip
+}) {
+  const bar = /* @__PURE__ */ jsxs26(Stack22, { space: 2, style: { flex: 1 }, children: [
+    /* @__PURE__ */ jsxs26(Flex22, { align: "center", justify: "space-between", children: [
+      /* @__PURE__ */ jsx38(Text28, { muted: true, size: 1, children: label }),
+      /* @__PURE__ */ jsx38(
+        "span",
+        {
+          style: {
+            color: scoreColor(value),
+            fontFamily: "var(--font-code-size, monospace)",
+            fontSize: 14,
+            fontWeight: 600
+          },
+          children: Math.round(value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx38(
+      Box18,
+      {
+        style: {
+          backgroundColor: "var(--card-border-color)",
+          borderRadius: 999,
+          height: 6,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx38(
+          Box18,
+          {
+            style: {
+              backgroundColor: barFillColor(value),
+              borderRadius: 999,
+              height: "100%",
+              transition: "width 0.3s",
+              width: `${Math.min(value, 100)}%`
+            }
+          }
+        )
+      }
+    )
+  ] });
+  if (tip) {
+    return /* @__PURE__ */ jsx38(HoverTip, { text: tip, children: bar });
+  }
+  return bar;
+}
+function metricTip(area, metric, displayValue, description) {
+  return /* @__PURE__ */ jsxs26(Text28, { size: 2, style: { lineHeight: 1.5 }, children: [
+    /* @__PURE__ */ jsx38("span", { style: tipBold, children: area }),
+    " \u2192",
+    " ",
+    /* @__PURE__ */ jsx38("span", { style: tipBold, children: metric }),
+    ":",
+    " ",
+    /* @__PURE__ */ jsx38("span", { style: tipValue, children: displayValue }),
+    ". ",
+    description
+  ] });
+}
+function MetricPair({
+  color,
+  label,
+  value,
+  tip
+}) {
+  const content = /* @__PURE__ */ jsxs26(Text28, { muted: true, size: 1, children: [
+    label,
+    ":",
+    " ",
+    /* @__PURE__ */ jsx38(
+      "span",
+      {
+        style: {
+          color: color ?? "var(--card-fg-color)",
+          fontFamily: "var(--font-code-size, monospace)",
+          fontWeight: 500
+        },
+        children: value
+      }
+    )
+  ] });
+  if (tip) {
+    return /* @__PURE__ */ jsx38(HoverTip, { text: tip, children: content });
+  }
+  return content;
+}
+
+// src/components/report-detail/WeaknessesList.tsx
+import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
+function WeaknessesList({ scores, comparison }) {
+  const weakAreas = scores.filter((s) => s.totalScore < 70).sort((a, b) => a.totalScore - b.totalScore);
+  const docsHurt = scores.filter((s) => s.negativeDocLift);
+  const retrievalIssues = scores.filter(
+    (s) => s.infrastructureEfficiency != null && s.infrastructureEfficiency < 0.7 && !s.invertedRetrievalGap
+  );
+  const dimWeaknesses = scores.map((s) => ({ area: s, dims: getDimensionWeaknesses(s) })).filter(({ dims }) => dims.length > 0);
+  const regressed = comparison?.regressed ?? [];
+  const improved = comparison?.improved ?? [];
+  const unchanged = comparison?.unchanged ?? [];
+  const efficiencyAnomalies = scores.filter(
+    (s) => s.infrastructureEfficiency != null && s.infrastructureEfficiency > 1.05
+  );
+  const hasContent = weakAreas.length > 0 || docsHurt.length > 0 || retrievalIssues.length > 0 || dimWeaknesses.length > 0 || regressed.length > 0 || efficiencyAnomalies.length > 0;
+  if (!hasContent) return null;
+  const trendFor = (feature) => {
+    if (improved.includes(feature)) return "improved";
+    if (regressed.includes(feature)) return "regressed";
+    if (unchanged.includes(feature)) return "unchanged";
+    return null;
+  };
+  return /* @__PURE__ */ jsxs27(Stack23, { space: 5, children: [
+    weakAreas.length > 0 && /* @__PURE__ */ jsxs27(Stack23, { space: 3, children: [
+      /* @__PURE__ */ jsxs27(Flex23, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx39(ErrorOutlineIcon3, { style: { color: "#f87171" } }),
+        /* @__PURE__ */ jsx39(Text29, { size: 2, weight: "medium", children: "Weak Areas (<70)" }),
+        /* @__PURE__ */ jsx39(InfoTip, { text: GLOSSARY.weakAreas })
+      ] }),
+      /* @__PURE__ */ jsx39(Stack23, { space: 3, children: weakAreas.map((area) => /* @__PURE__ */ jsx39(
+        AreaScoreRow,
+        {
+          area,
+          showTrend: trendFor(area.feature)
+        },
+        area.feature
+      )) })
+    ] }),
+    docsHurt.length > 0 && /* @__PURE__ */ jsxs27(Stack23, { space: 3, children: [
+      /* @__PURE__ */ jsxs27(Flex23, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx39(ErrorOutlineIcon3, { style: { color: "#f87171" } }),
+        /* @__PURE__ */ jsx39(Text29, { size: 2, weight: "medium", children: "Docs Hurt Performance (Negative Doc Lift)" }),
+        /* @__PURE__ */ jsx39(InfoTip, { text: GLOSSARY.docsHurt })
+      ] }),
+      /* @__PURE__ */ jsx39(Box19, { style: sectionStyle("red"), children: docsHurt.map((area, i) => /* @__PURE__ */ jsxs27(
+        Box19,
+        {
+          padding: 4,
+          style: i > 0 ? { borderTop: "1px solid rgba(239,68,68,0.2)" } : void 0,
+          children: [
+            /* @__PURE__ */ jsxs27(Flex23, { align: "center", justify: "space-between", wrap: "wrap", children: [
+              /* @__PURE__ */ jsxs27(Flex23, { align: "center", gap: 2, children: [
+                /* @__PURE__ */ jsx39(Text29, { size: 2, weight: "medium", children: area.feature }),
+                /* @__PURE__ */ jsx39(
+                  "span",
+                  {
+                    style: {
+                      backgroundColor: scoreBg(area.totalScore),
+                      borderRadius: 4,
+                      color: scoreColor(area.totalScore),
+                      fontSize: 13,
+                      fontWeight: 500,
+                      padding: "3px 8px"
+                    },
+                    children: Math.round(area.totalScore)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx39(
+                "span",
+                {
+                  style: {
+                    color: "#f87171",
+                    fontFamily: "var(--font-code-size, monospace)",
+                    fontSize: 16,
+                    fontWeight: 600
+                  },
+                  children: area.docLift
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx39(Box19, { paddingTop: 2, children: /* @__PURE__ */ jsxs27(Text29, { muted: true, size: 2, children: [
+              area.invertedRetrievalGap && /* @__PURE__ */ jsxs27("span", { style: { color: "#fbbf24" }, children: [
+                "Agent does better by NOT finding these docs.",
+                " "
+              ] }),
+              "Floor (",
+              Math.round(area.floorScore ?? 0),
+              ") is higher than ceiling (",
+              Math.round(area.ceilingScore ?? 0),
+              ")."
+            ] }) })
+          ]
+        },
+        area.feature
+      )) })
+    ] }),
+    retrievalIssues.length > 0 && /* @__PURE__ */ jsxs27(Stack23, { space: 3, children: [
+      /* @__PURE__ */ jsxs27(Flex23, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx39(SearchIcon6, { style: { color: "#fbbf24" } }),
+        /* @__PURE__ */ jsx39(Text29, { size: 2, weight: "medium", children: "Retrieval Issues (<70% efficiency)" }),
+        /* @__PURE__ */ jsx39(InfoTip, { text: GLOSSARY.retrievalIssues })
+      ] }),
+      /* @__PURE__ */ jsx39(Box19, { style: sectionStyle("amber"), children: retrievalIssues.map((area, i) => /* @__PURE__ */ jsxs27(
+        Box19,
+        {
+          padding: 4,
+          style: i > 0 ? { borderTop: "1px solid rgba(245,158,11,0.2)" } : void 0,
+          children: [
+            /* @__PURE__ */ jsxs27(Flex23, { align: "center", justify: "space-between", wrap: "wrap", children: [
+              /* @__PURE__ */ jsxs27(Flex23, { align: "center", gap: 2, children: [
+                /* @__PURE__ */ jsx39(Text29, { size: 2, weight: "medium", children: area.feature }),
+                /* @__PURE__ */ jsx39(
+                  "span",
+                  {
+                    style: {
+                      backgroundColor: scoreBg(area.totalScore),
+                      borderRadius: 4,
+                      color: scoreColor(area.totalScore),
+                      fontSize: 13,
+                      fontWeight: 500,
+                      padding: "3px 8px"
+                    },
+                    children: Math.round(area.totalScore)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx39(
+                "span",
+                {
+                  style: {
+                    color: "#fbbf24",
+                    fontFamily: "var(--font-code-size, monospace)",
+                    fontSize: 16,
+                    fontWeight: 600
+                  },
+                  children: formatPercent(area.infrastructureEfficiency)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx39(Box19, { paddingTop: 2, children: /* @__PURE__ */ jsxs27(Text29, { muted: true, size: 2, children: [
+              "Actual score (",
+              Math.round(area.actualScore ?? 0),
+              ") is much lower than ceiling (",
+              Math.round(area.ceilingScore ?? 0),
+              "). Agent struggles to find the right docs (retrieval gap:",
+              " ",
+              area.retrievalGap,
+              ")."
+            ] }) })
+          ]
+        },
+        area.feature
+      )) })
+    ] }),
+    dimWeaknesses.length > 0 && /* @__PURE__ */ jsxs27(Stack23, { space: 3, children: [
+      /* @__PURE__ */ jsxs27(Flex23, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx39(WarningOutlineIcon4, { style: { color: "#fbbf24" } }),
+        /* @__PURE__ */ jsx39(Text29, { size: 2, weight: "medium", children: "Dimension Weaknesses (<50)" }),
+        /* @__PURE__ */ jsx39(InfoTip, { text: GLOSSARY.dimWeaknesses })
+      ] }),
+      /* @__PURE__ */ jsx39(Box19, { style: neutralCardStyle, children: dimWeaknesses.map(({ area, dims }, i) => /* @__PURE__ */ jsxs27(
+        Box19,
+        {
+          padding: 4,
+          style: i > 0 ? dividerStyle : void 0,
+          children: [
+            /* @__PURE__ */ jsxs27(Flex23, { align: "center", gap: 2, paddingBottom: 2, children: [
+              /* @__PURE__ */ jsx39(Text29, { size: 2, weight: "medium", children: area.feature }),
+              /* @__PURE__ */ jsx39(
+                "span",
+                {
+                  style: {
+                    backgroundColor: scoreBg(area.totalScore),
+                    borderRadius: 4,
+                    color: scoreColor(area.totalScore),
+                    fontSize: 13,
+                    fontWeight: 500,
+                    padding: "3px 8px"
+                  },
+                  children: Math.round(area.totalScore)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx39(Flex23, { gap: 2, wrap: "wrap", children: dims.map((w) => /* @__PURE__ */ jsx39(HoverTip, { text: w.tip, children: /* @__PURE__ */ jsxs27(
+              "span",
+              {
+                style: {
+                  backgroundColor: "rgba(239,68,68,0.2)",
+                  borderRadius: 4,
+                  color: "#f87171",
+                  fontSize: 13,
+                  padding: "4px 10px"
+                },
+                children: [
+                  w.dimension,
+                  ": ",
+                  w.value
+                ]
+              }
+            ) }, w.dimension)) })
+          ]
+        },
+        area.feature
+      )) })
+    ] }),
+    regressed.length > 0 && /* @__PURE__ */ jsxs27(Box19, { style: neutralCardStyle, children: [
+      /* @__PURE__ */ jsx39(
+        Box19,
+        {
+          padding: 4,
+          style: { borderBottom: "1px solid var(--card-border-color)" },
+          children: /* @__PURE__ */ jsxs27(Flex23, { align: "center", gap: 2, children: [
+            /* @__PURE__ */ jsx39(ArrowDownIcon2, { style: { color: "#f87171" } }),
+            /* @__PURE__ */ jsx39(Text29, { size: 2, weight: "medium", children: "Regressed Since Last Run" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx39(Stack23, { children: regressed.map((featureName, i) => {
+        const area = scores.find((s) => s.feature === featureName);
+        return /* @__PURE__ */ jsxs27(
+          Flex23,
+          {
+            align: "center",
+            justify: "space-between",
+            padding: 4,
+            style: i > 0 ? dividerStyle : void 0,
+            children: [
+              /* @__PURE__ */ jsx39(Text29, { size: 2, children: featureName }),
+              area && /* @__PURE__ */ jsx39(
+                "span",
+                {
+                  style: {
+                    backgroundColor: scoreBg(area.totalScore),
+                    borderRadius: 4,
+                    color: scoreColor(area.totalScore),
+                    fontFamily: "var(--font-code-size, monospace)",
+                    fontSize: 14,
+                    fontWeight: 500,
+                    padding: "3px 10px"
+                  },
+                  children: Math.round(area.totalScore)
+                }
+              )
+            ]
+          },
+          featureName
+        );
+      }) })
+    ] }),
+    efficiencyAnomalies.length > 0 && /* @__PURE__ */ jsxs27(Box19, { style: neutralCardStyle, children: [
+      /* @__PURE__ */ jsx39(
+        Box19,
+        {
+          padding: 4,
+          style: { borderBottom: "1px solid var(--card-border-color)" },
+          children: /* @__PURE__ */ jsxs27(Stack23, { space: 2, children: [
+            /* @__PURE__ */ jsxs27(Flex23, { align: "center", gap: 2, children: [
+              /* @__PURE__ */ jsx39(BoltIcon2, { style: { color: "#fbbf24" } }),
+              /* @__PURE__ */ jsx39(Text29, { size: 2, weight: "medium", children: "Efficiency Anomalies (>100%)" }),
+              /* @__PURE__ */ jsx39(InfoTip, { text: GLOSSARY.efficiencyAnomalies })
+            ] }),
+            /* @__PURE__ */ jsx39(Text29, { muted: true, size: 2, children: "Agent outperforms injected docs \u2014 may indicate doc quality issues or agent memorization." })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx39(Stack23, { children: efficiencyAnomalies.map((area, i) => /* @__PURE__ */ jsxs27(
+        Flex23,
+        {
+          align: "center",
+          justify: "space-between",
+          padding: 4,
+          style: i > 0 ? dividerStyle : void 0,
+          children: [
+            /* @__PURE__ */ jsx39(Text29, { size: 2, children: area.feature }),
+            /* @__PURE__ */ jsx39(
+              "span",
+              {
+                style: {
+                  color: "#fbbf24",
+                  fontFamily: "var(--font-code-size, monospace)",
+                  fontSize: 16,
+                  fontWeight: 600
+                },
+                children: formatPercent(area.infrastructureEfficiency)
+              }
+            )
+          ]
+        },
+        area.feature
+      )) })
+    ] })
+  ] });
+}
+var tipValue2 = {
+  color: "#f87171",
+  fontFamily: "var(--font-code-size, monospace)",
+  fontWeight: 600
+};
+var tipArea = {
+  fontWeight: 600
+};
+function dimTip(area, dim, score, description) {
+  return /* @__PURE__ */ jsxs27(Text29, { size: 2, style: { lineHeight: 1.5 }, children: [
+    /* @__PURE__ */ jsx39("span", { style: tipArea, children: area }),
+    " scores",
+    " ",
+    /* @__PURE__ */ jsx39("span", { style: tipValue2, children: score }),
+    /* @__PURE__ */ jsx39("span", { style: { color: "var(--card-muted-fg-color)" }, children: "/100" }),
+    " on",
+    " ",
+    dim.toLowerCase(),
+    ". ",
+    description
+  ] });
+}
+function getDimensionWeaknesses(area) {
+  const result = [];
+  if (area.taskCompletion < 50)
+    result.push({
+      dimension: "Task Completion",
+      tip: dimTip(
+        area.feature,
+        "Task Completion",
+        Math.round(area.taskCompletion),
+        GLOSSARY.taskCompletion
+      ),
+      value: Math.round(area.taskCompletion)
+    });
+  if (area.codeCorrectness < 50)
+    result.push({
+      dimension: "Code Correctness",
+      tip: dimTip(
+        area.feature,
+        "Code Correctness",
+        Math.round(area.codeCorrectness),
+        GLOSSARY.codeCorrectness
+      ),
+      value: Math.round(area.codeCorrectness)
+    });
+  if (area.docCoverage < 50)
+    result.push({
+      dimension: "Doc Coverage",
+      tip: dimTip(
+        area.feature,
+        "Doc Coverage",
+        Math.round(area.docCoverage),
+        GLOSSARY.docCoverage
+      ),
+      value: Math.round(area.docCoverage)
+    });
+  return result;
+}
 
 // src/components/report-detail/ReportDetail.tsx
-import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
 var OVERVIEW_TAB = { id: "overview", label: "Overview" };
 var DIAGNOSTICS_TAB = { id: "diagnostics", label: "Diagnostics" };
 var ACTIVITY_TAB = { id: "activity", label: "Agent Activity" };
@@ -6503,8 +8018,8 @@ function ReportDetail({
   reportId
 }) {
   const client = useClient10({ apiVersion: API_VERSION });
-  const [loading, setLoading] = useState13(true);
-  const [report, setReport] = useState13(null);
+  const [loading, setLoading] = useState15(true);
+  const [report, setReport] = useState15(null);
   useEffect7(() => {
     let cancelled = false;
     setLoading(true);
@@ -6521,39 +8036,42 @@ function ReportDetail({
     };
   }, [client, reportId]);
   const { summary } = report ?? {};
-  const hasDiagnostics = Boolean(
+  const hasWeaknesses = Boolean(
     summary?.recommendations && summary.recommendations.gaps.length > 0 || summary?.lowScoringJudgments && summary.lowScoringJudgments.length > 0
   );
+  const hasDiagnostics = Boolean(
+    summary?.scores && summary.scores.length > 0 || hasWeaknesses
+  );
   const hasAgentActivity = Boolean(
     summary?.agentBehavior && summary.agentBehavior.length > 0
   );
-  const tabs = useMemo6(
+  const tabs = useMemo7(
     () => [OVERVIEW_TAB, DIAGNOSTICS_TAB, ACTIVITY_TAB],
     []
   );
-  const disabledTabs = useMemo6(() => {
+  const disabledTabs = useMemo7(() => {
     const set2 = /* @__PURE__ */ new Set();
     if (!hasDiagnostics) set2.add("diagnostics");
     if (!hasAgentActivity) set2.add("activity");
     return set2;
   }, [hasDiagnostics, hasAgentActivity]);
-  const currentTab = useMemo6(() => {
+  const currentTab = useMemo7(() => {
     const parsed = parseTab(activeTab);
     if (disabledTabs.has(parsed)) return "overview";
     return tabs.some((t) => t.id === parsed) ? parsed : "overview";
   }, [activeTab, disabledTabs, tabs]);
-  const handleTabClick = useCallback18(
+  const handleTabClick = useCallback19(
     (tabId) => {
       onTabChange(tabId === "overview" ? null : tabId);
     },
     [onTabChange]
   );
   if (loading) {
-    return /* @__PURE__ */ jsx38(LoadingState, { message: "Loading report\u2026" });
+    return /* @__PURE__ */ jsx40(LoadingState, { message: "Loading report\u2026" });
   }
   if (!report || !summary) {
-    return /* @__PURE__ */ jsx38(Box14, { padding: 5, children: /* @__PURE__ */ jsxs27(Stack22, { space: 4, children: [
-      /* @__PURE__ */ jsx38(
+    return /* @__PURE__ */ jsx40(Box20, { padding: 5, children: /* @__PURE__ */ jsxs28(Stack24, { space: 4, children: [
+      /* @__PURE__ */ jsx40(
         Button5,
         {
           icon: ArrowLeftIcon2,
@@ -6562,14 +8080,13 @@ function ReportDetail({
           text: "Back"
         }
       ),
-      /* @__PURE__ */ jsx38(Text27, { align: "center", muted: true, size: 3, children: "Report not found" })
+      /* @__PURE__ */ jsx40(Text30, { align: "center", muted: true, size: 3, children: "Report not found" })
     ] }) });
   }
   const { comparison, provenance } = report;
   const totalTests = summary.scores.reduce((n, s) => n + s.testCount, 0);
-  const isFullMode = summary.evaluationMode === "full" || summary.scores.some((s) => s.actualScore != null);
-  return /* @__PURE__ */ jsx38(Box14, { padding: 4, children: /* @__PURE__ */ jsxs27(Stack22, { space: 5, children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx40(Box20, { padding: 4, children: /* @__PURE__ */ jsxs28(Stack24, { space: 5, children: [
+    /* @__PURE__ */ jsx40(
       ReportHeader,
       {
         completedAt: report.completedAt,
@@ -6583,10 +8100,10 @@ function ReportDetail({
         tag: report.tag
       }
     ),
-    /* @__PURE__ */ jsx38(TabList, { space: 1, children: tabs.map((tab) => {
+    /* @__PURE__ */ jsx40(TabList, { space: 1, children: tabs.map((tab) => {
       const isDisabled = disabledTabs.has(tab.id);
       const tooltip = getDisabledTabTooltip(tab.id, summary);
-      const tabElement = /* @__PURE__ */ jsx38(
+      const tabElement = /* @__PURE__ */ jsx40(
         Tab,
         {
           "aria-controls": `panel-${tab.id}`,
@@ -6597,65 +8114,55 @@ function ReportDetail({
           selected: currentTab === tab.id
         }
       );
-      return isDisabled && tooltip ? /* @__PURE__ */ jsx38(
-        Tooltip8,
+      return isDisabled && tooltip ? /* @__PURE__ */ jsx40(
+        Tooltip9,
         {
-          content: /* @__PURE__ */ jsx38(Box14, { padding: 2, style: { maxWidth: 280 }, children: tooltip }),
+          content: /* @__PURE__ */ jsx40(Box20, { padding: 2, style: { maxWidth: 280 }, children: tooltip }),
           placement: "bottom",
           portal: true,
-          children: /* @__PURE__ */ jsx38("span", { style: { display: "inline-block" }, children: tabElement })
+          children: /* @__PURE__ */ jsx40("span", { style: { display: "inline-block" }, children: tabElement })
         },
         tab.id
-      ) : /* @__PURE__ */ jsx38("span", { children: tabElement }, tab.id);
+      ) : /* @__PURE__ */ jsx40("span", { children: tabElement }, tab.id);
     }) }),
-    currentTab === "overview" && /* @__PURE__ */ jsx38(
+    currentTab === "overview" && /* @__PURE__ */ jsx40(
       TabPanel,
       {
         "aria-labelledby": "tab-overview",
         hidden: currentTab !== "overview",
         id: "panel-overview",
-        children: /* @__PURE__ */ jsxs27(Stack22, { space: 5, children: [
-          /* @__PURE__ */ jsx38(
-            OverviewStats,
+        children: /* @__PURE__ */ jsxs28(Stack24, { space: 5, children: [
+          /* @__PURE__ */ jsx40(
+            DiagnosticsOverview,
             {
+              comparison,
               durationMs: report.durationMs,
-              isFullMode,
               overall: summary.overall,
+              scores: summary.scores,
               totalTests
             }
           ),
-          isFullMode && /* @__PURE__ */ jsx38(ThreeLayerTable, { scores: summary.scores }),
-          /* @__PURE__ */ jsx38(AreaScoreTable, { scores: summary.scores }),
-          comparison && /* @__PURE__ */ jsx38(ComparisonSummary, { comparison }),
-          /* @__PURE__ */ jsx38(LineageCard, { provenance, reportId: report.reportId }),
-          /* @__PURE__ */ jsx38(ProvenanceCard, { provenance })
+          /* @__PURE__ */ jsx40(LineageCard, { provenance, reportId: report.reportId }),
+          /* @__PURE__ */ jsx40(ProvenanceCard, { provenance })
         ] })
       }
     ),
-    currentTab === "diagnostics" && hasDiagnostics && /* @__PURE__ */ jsx38(
-      TabPanel,
+    currentTab === "diagnostics" && hasDiagnostics && /* @__PURE__ */ jsx40(
+      DiagnosticsPanel,
       {
-        "aria-labelledby": "tab-diagnostics",
-        hidden: currentTab !== "diagnostics",
-        id: "panel-diagnostics",
-        children: /* @__PURE__ */ jsxs27(Stack22, { space: 5, children: [
-          summary.recommendations && summary.recommendations.gaps.length > 0 && /* @__PURE__ */ jsx38(
-            RecommendationsSection,
-            {
-              recommendations: summary.recommendations
-            }
-          ),
-          summary.lowScoringJudgments && summary.lowScoringJudgments.length > 0 && /* @__PURE__ */ jsx38(JudgmentList, { judgments: summary.lowScoringJudgments })
-        ] })
+        comparison,
+        judgments: summary.lowScoringJudgments,
+        recommendations: summary.recommendations,
+        scores: summary.scores
       }
     ),
-    currentTab === "activity" && hasAgentActivity && /* @__PURE__ */ jsx38(
+    currentTab === "activity" && hasAgentActivity && /* @__PURE__ */ jsx40(
       TabPanel,
       {
         "aria-labelledby": "tab-activity",
         hidden: currentTab !== "activity",
         id: "panel-activity",
-        children: /* @__PURE__ */ jsx38(
+        children: /* @__PURE__ */ jsx40(
           AgentActivitySection,
           {
             agentBehavior: summary.agentBehavior,
@@ -6666,6 +8173,79 @@ function ReportDetail({
     )
   ] }) });
 }
+var DIAG_TABS = [
+  { id: "strengths", label: "Strengths" },
+  { id: "issues", label: "Issues" }
+];
+function DiagnosticsPanel({
+  comparison,
+  judgments,
+  recommendations,
+  scores
+}) {
+  const [subTab, setSubTab] = useState15("strengths");
+  const issueCount = scores.filter((s) => s.totalScore < 70).length + scores.filter((s) => s.negativeDocLift).length + scores.filter(
+    (s) => s.infrastructureEfficiency != null && s.infrastructureEfficiency < 0.7 && !s.invertedRetrievalGap
+  ).length;
+  return /* @__PURE__ */ jsx40(TabPanel, { "aria-labelledby": "tab-diagnostics", id: "panel-diagnostics", children: /* @__PURE__ */ jsxs28(Stack24, { space: 4, children: [
+    /* @__PURE__ */ jsx40(
+      Flex24,
+      {
+        align: "center",
+        gap: 1,
+        style: {
+          borderBottom: "1px solid var(--card-border-color)",
+          paddingBottom: 8
+        },
+        wrap: "wrap",
+        children: DIAG_TABS.map((tab) => /* @__PURE__ */ jsxs28(
+          "button",
+          {
+            onClick: () => setSubTab(tab.id),
+            style: {
+              alignItems: "center",
+              background: subTab === tab.id ? "var(--card-muted-bg-color)" : "transparent",
+              border: "none",
+              borderRadius: 6,
+              color: subTab === tab.id ? "var(--card-fg-color)" : "var(--card-muted-fg-color)",
+              cursor: "pointer",
+              display: "inline-flex",
+              fontSize: 15,
+              fontWeight: 500,
+              gap: 8,
+              padding: "8px 16px"
+            },
+            type: "button",
+            children: [
+              tab.label,
+              tab.id === "issues" && issueCount > 0 && /* @__PURE__ */ jsx40(
+                "span",
+                {
+                  style: {
+                    backgroundColor: "rgba(239,68,68,0.2)",
+                    borderRadius: 999,
+                    color: "#f87171",
+                    fontSize: 13,
+                    marginLeft: 4,
+                    padding: "2px 8px"
+                  },
+                  children: issueCount
+                }
+              )
+            ]
+          },
+          tab.id
+        ))
+      }
+    ),
+    subTab === "strengths" && /* @__PURE__ */ jsx40(StrengthsList, { comparison, scores }),
+    subTab === "issues" && /* @__PURE__ */ jsxs28(Stack24, { space: 5, children: [
+      /* @__PURE__ */ jsx40(WeaknessesList, { comparison, scores }),
+      recommendations && recommendations.gaps.length > 0 && /* @__PURE__ */ jsx40(RecommendationsSection, { recommendations }),
+      judgments && judgments.length > 0 && /* @__PURE__ */ jsx40(JudgmentList, { judgments })
+    ] })
+  ] }) });
+}
 var inlineCodeStyle = {
   background: "var(--card-code-bg-color, rgba(255,255,255,0.06))",
   borderRadius: 3,
@@ -6677,27 +8257,65 @@ function getDisabledTabTooltip(tabId, summary) {
   if (!summary) return null;
   switch (tabId) {
     case "diagnostics":
-      return /* @__PURE__ */ jsx38(Text27, { muted: true, size: 2, children: "No diagnostic data available. Diagnostics require low-scoring judgments or gap analysis recommendations." });
+      return /* @__PURE__ */ jsx40(Text30, { muted: true, size: 2, children: "No diagnostic data available. Diagnostics require at least one scored feature area." });
     case "activity":
-      return summary.evaluationMode === "baseline" ? /* @__PURE__ */ jsxs27(Text27, { muted: true, size: 2, children: [
+      return summary.evaluationMode === "baseline" ? /* @__PURE__ */ jsxs28(Text30, { muted: true, size: 2, children: [
         "Not available for baseline-only evaluations. Run with",
         " ",
-        /* @__PURE__ */ jsx38("code", { style: inlineCodeStyle, children: "--mode full" }),
+        /* @__PURE__ */ jsx40("code", { style: inlineCodeStyle, children: "--mode full" }),
         " or",
         " ",
-        /* @__PURE__ */ jsx38("code", { style: inlineCodeStyle, children: "--mode agentic" }),
+        /* @__PURE__ */ jsx40("code", { style: inlineCodeStyle, children: "--mode agentic" }),
         " to capture agent browsing behavior."
-      ] }) : /* @__PURE__ */ jsx38(Text27, { muted: true, size: 2, children: "No agent activity data was recorded for this evaluation." });
+      ] }) : /* @__PURE__ */ jsx40(Text30, { muted: true, size: 2, children: "No agent activity data was recorded for this evaluation." });
     default:
       return null;
   }
 }
 
+// src/components/report-detail/AreaScoreTable.tsx
+import React4 from "react";
+import { Card as Card14, Stack as Stack25, Text as Text32 } from "@sanity/ui";
+
+// src/lib/scoring.ts
+var HEX_MAP = {
+  good: "#2ecc71",
+  warning: "#f1c40f",
+  "needs-work": "#e67e22",
+  critical: "#e74c3c"
+};
+function gradeHex(grade) {
+  return HEX_MAP[grade];
+}
+function scoreHex(score) {
+  return gradeHex(scoreGrade(Math.round(score)));
+}
+
+// src/components/primitives/ScoreCell.tsx
+import { Card as Card13, Text as Text31 } from "@sanity/ui";
+import { jsx as jsx41 } from "react/jsx-runtime";
+
+// src/components/report-detail/AreaScoreTable.tsx
+import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
+
+// src/components/report-detail/ComparisonSummary.tsx
+import { Badge as Badge8, Box as Box21, Card as Card15, Flex as Flex25, Grid as Grid4, Stack as Stack26, Text as Text33, Tooltip as Tooltip10 } from "@sanity/ui";
+import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
+
+// src/components/report-detail/OverviewStats.tsx
+import { Grid as Grid5 } from "@sanity/ui";
+import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
+
+// src/components/report-detail/ThreeLayerTable.tsx
+import React5 from "react";
+import { Badge as Badge9, Card as Card16, Flex as Flex26, Stack as Stack27, Text as Text34 } from "@sanity/ui";
+import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
+
 // src/components/ScoreTimeline.tsx
-import { Card as Card19, Flex as Flex21, Select as Select2, Stack as Stack23, Text as Text28 } from "@sanity/ui";
-import { useCallback as useCallback19, useEffect as useEffect8, useMemo as useMemo7, useState as useState14 } from "react";
+import { Card as Card17, Flex as Flex27, Select as Select2, Stack as Stack28, Text as Text35 } from "@sanity/ui";
+import { useCallback as useCallback20, useEffect as useEffect8, useMemo as useMemo8, useState as useState16 } from "react";
 import { useClient as useClient11 } from "sanity";
-import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs33 } from "react/jsx-runtime";
 var CHART_HEIGHT = 220;
 var CHART_WIDTH = 800;
 var PAD_BOTTOM = 30;
@@ -6732,11 +8350,11 @@ function scoreForPoint(point, area) {
 }
 function ScoreTimeline({ mode = null, source = null }) {
   const client = useClient11({ apiVersion: API_VERSION });
-  const [dataPoints, setDataPoints] = useState14([]);
-  const [loading, setLoading] = useState14(true);
-  const [rangeDays, setRangeDays] = useState14(30);
-  const [selectedArea, setSelectedArea] = useState14(null);
-  const areaNames = useMemo7(() => {
+  const [dataPoints, setDataPoints] = useState16([]);
+  const [loading, setLoading] = useState16(true);
+  const [rangeDays, setRangeDays] = useState16(30);
+  const [selectedArea, setSelectedArea] = useState16(null);
+  const areaNames = useMemo8(() => {
     const names = /* @__PURE__ */ new Set();
     for (const dp of dataPoints) {
       for (const s of dp.scores) {
@@ -6745,7 +8363,7 @@ function ScoreTimeline({ mode = null, source = null }) {
     }
     return Array.from(names).sort();
   }, [dataPoints]);
-  const fetchData = useCallback19(async () => {
+  const fetchData = useCallback20(async () => {
     setLoading(true);
     try {
       const startDate = rangeDays ? daysAgo(rangeDays) : "1970-01-01T00:00:00Z";
@@ -6763,7 +8381,7 @@ function ScoreTimeline({ mode = null, source = null }) {
   useEffect8(() => {
     void fetchData();
   }, [fetchData]);
-  const chartPoints = useMemo7(() => {
+  const chartPoints = useMemo8(() => {
     const pts = [];
     const scored = dataPoints.map((dp) => ({
       date: dp.completedAt,
@@ -6777,18 +8395,18 @@ function ScoreTimeline({ mode = null, source = null }) {
     });
     return pts;
   }, [dataPoints, selectedArea]);
-  const avgScore = useMemo7(() => {
+  const avgScore = useMemo8(() => {
     if (chartPoints.length === 0) return 0;
     return chartPoints.reduce((sum, p) => sum + p.score, 0) / chartPoints.length;
   }, [chartPoints]);
-  const handleRangeChange = useCallback19(
+  const handleRangeChange = useCallback20(
     (e) => {
       const val = e.currentTarget.value;
       setRangeDays(val === "all" ? null : Number(val));
     },
     []
   );
-  const handleAreaChange = useCallback19(
+  const handleAreaChange = useCallback20(
     (e) => {
       const val = e.currentTarget.value;
       setSelectedArea(val || null);
@@ -6796,22 +8414,22 @@ function ScoreTimeline({ mode = null, source = null }) {
     []
   );
   const polylinePoints = chartPoints.map((p) => `${p.x},${p.y}`).join(" ");
-  return /* @__PURE__ */ jsxs28(Stack23, { space: 4, children: [
-    /* @__PURE__ */ jsxs28(Flex21, { gap: 3, children: [
-      /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsxs33(Stack28, { space: 4, children: [
+    /* @__PURE__ */ jsxs33(Flex27, { gap: 3, children: [
+      /* @__PURE__ */ jsx46(
         Select2,
         {
           onChange: handleRangeChange,
           value: rangeDays?.toString() ?? "all",
-          children: TIME_RANGES.map((r) => /* @__PURE__ */ jsx39("option", { value: r.days?.toString() ?? "all", children: r.label }, r.label))
+          children: TIME_RANGES.map((r) => /* @__PURE__ */ jsx46("option", { value: r.days?.toString() ?? "all", children: r.label }, r.label))
         }
       ),
-      /* @__PURE__ */ jsxs28(Select2, { onChange: handleAreaChange, value: selectedArea ?? "", children: [
-        /* @__PURE__ */ jsx39("option", { value: "", children: "Overall" }),
-        areaNames.map((name) => /* @__PURE__ */ jsx39("option", { value: name, children: name }, name))
+      /* @__PURE__ */ jsxs33(Select2, { onChange: handleAreaChange, value: selectedArea ?? "", children: [
+        /* @__PURE__ */ jsx46("option", { value: "", children: "Overall" }),
+        areaNames.map((name) => /* @__PURE__ */ jsx46("option", { value: name, children: name }, name))
       ] })
     ] }),
-    /* @__PURE__ */ jsx39(Card19, { padding: 3, radius: 2, shadow: 1, children: loading ? /* @__PURE__ */ jsx39(Flex21, { align: "center", justify: "center", style: { height: 200 }, children: /* @__PURE__ */ jsx39(Text28, { muted: true, size: 2, children: "Loading\u2026" }) }) : chartPoints.length === 0 ? /* @__PURE__ */ jsx39(Flex21, { align: "center", justify: "center", style: { height: 200 }, children: /* @__PURE__ */ jsx39(Text28, { muted: true, size: 2, children: "No reports found for this time range" }) }) : /* @__PURE__ */ jsxs28(
+    /* @__PURE__ */ jsx46(Card17, { padding: 3, radius: 2, shadow: 1, children: loading ? /* @__PURE__ */ jsx46(Flex27, { align: "center", justify: "center", style: { height: 200 }, children: /* @__PURE__ */ jsx46(Text35, { muted: true, size: 2, children: "Loading\u2026" }) }) : chartPoints.length === 0 ? /* @__PURE__ */ jsx46(Flex27, { align: "center", justify: "center", style: { height: 200 }, children: /* @__PURE__ */ jsx46(Text35, { muted: true, size: 2, children: "No reports found for this time range" }) }) : /* @__PURE__ */ jsxs33(
       "svg",
       {
         style: { display: "block", width: "100%" },
@@ -6819,8 +8437,8 @@ function ScoreTimeline({ mode = null, source = null }) {
         children: [
           Y_TICKS.map((tick) => {
             const y = PAD_TOP + PLOT_HEIGHT - tick / Y_MAX * PLOT_HEIGHT;
-            return /* @__PURE__ */ jsxs28("g", { children: [
-              /* @__PURE__ */ jsx39(
+            return /* @__PURE__ */ jsxs33("g", { children: [
+              /* @__PURE__ */ jsx46(
                 "line",
                 {
                   stroke: "#ccc",
@@ -6831,7 +8449,7 @@ function ScoreTimeline({ mode = null, source = null }) {
                   y2: y
                 }
               ),
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx46(
                 "text",
                 {
                   dominantBaseline: "middle",
@@ -6851,7 +8469,7 @@ function ScoreTimeline({ mode = null, source = null }) {
             chartPoints.length - 1
           ].map((idx) => {
             const p = chartPoints[idx];
-            return /* @__PURE__ */ jsx39(
+            return /* @__PURE__ */ jsx46(
               "text",
               {
                 fill: "#999",
@@ -6863,7 +8481,7 @@ function ScoreTimeline({ mode = null, source = null }) {
               },
               idx
             );
-          }) : chartPoints.map((p, idx) => /* @__PURE__ */ jsx39(
+          }) : chartPoints.map((p, idx) => /* @__PURE__ */ jsx46(
             "text",
             {
               fill: "#999",
@@ -6875,7 +8493,7 @@ function ScoreTimeline({ mode = null, source = null }) {
             },
             idx
           )),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx46(
             "polyline",
             {
               fill: "none",
@@ -6885,7 +8503,7 @@ function ScoreTimeline({ mode = null, source = null }) {
               strokeWidth: 2.5
             }
           ),
-          chartPoints.map((p, idx) => /* @__PURE__ */ jsx39(
+          chartPoints.map((p, idx) => /* @__PURE__ */ jsx46(
             "circle",
             {
               cx: p.x,
@@ -6894,7 +8512,7 @@ function ScoreTimeline({ mode = null, source = null }) {
               r: 4,
               stroke: "#fff",
               strokeWidth: 1.5,
-              children: /* @__PURE__ */ jsxs28("title", { children: [
+              children: /* @__PURE__ */ jsxs33("title", { children: [
                 formatDate(p.date),
                 ": ",
                 Math.round(p.score)
@@ -6905,7 +8523,7 @@ function ScoreTimeline({ mode = null, source = null }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs28(Text28, { muted: true, size: 2, children: [
+    /* @__PURE__ */ jsxs33(Text35, { muted: true, size: 2, children: [
       chartPoints.length,
       " data point",
       chartPoints.length !== 1 ? "s" : ""
@@ -6915,7 +8533,7 @@ function ScoreTimeline({ mode = null, source = null }) {
 var ScoreTimeline_default = ScoreTimeline;
 
 // src/components/Dashboard.tsx
-import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs34 } from "react/jsx-runtime";
 var VIEW_PARAM_MAP = {
   compare: "compare",
   timeline: "timeline"
@@ -6926,7 +8544,7 @@ function Dashboard() {
   const reportId = routerState.reportId ?? null;
   const isDetail = reportId !== null;
   const activeTab = isDetail ? "latest" : VIEW_PARAM_MAP[routerState.view ?? ""] ?? "latest";
-  const navigateToTab = useCallback20(
+  const navigateToTab = useCallback21(
     (tab) => {
       if (tab === "latest") {
         router.navigate({});
@@ -6936,13 +8554,13 @@ function Dashboard() {
     },
     [router]
   );
-  const handleSelectReport = useCallback20(
+  const handleSelectReport = useCallback21(
     (id) => {
       router.navigate({ reportId: id });
     },
     [router]
   );
-  const handleTabChange = useCallback20(
+  const handleTabChange = useCallback21(
     (tab) => {
       if (!routerState.reportId) return;
       if (tab) {
@@ -6953,16 +8571,16 @@ function Dashboard() {
     },
     [router, routerState.reportId]
   );
-  const handleBack = useCallback20(() => {
+  const handleBack = useCallback21(() => {
     router.navigate({});
   }, [router]);
-  return /* @__PURE__ */ jsx40(Container, { width: 4, children: /* @__PURE__ */ jsxs29(Stack24, { padding: 4, space: 4, children: [
-    /* @__PURE__ */ jsx40(Flex22, { align: "center", gap: 3, children: /* @__PURE__ */ jsxs29(Stack24, { flex: 1, space: 1, children: [
-      /* @__PURE__ */ jsx40(Text29, { size: 4, weight: "bold", children: "AI Literacy Framework" }),
-      /* @__PURE__ */ jsx40(Text29, { muted: true, size: 2, children: "Evaluation reports and score trends" })
+  return /* @__PURE__ */ jsx47(Container, { width: 4, children: /* @__PURE__ */ jsxs34(Stack29, { padding: 4, space: 4, children: [
+    /* @__PURE__ */ jsx47(Flex28, { align: "center", gap: 3, children: /* @__PURE__ */ jsxs34(Stack29, { flex: 1, space: 1, children: [
+      /* @__PURE__ */ jsx47(Text36, { size: 4, weight: "bold", children: "AI Literacy Framework" }),
+      /* @__PURE__ */ jsx47(Text36, { muted: true, size: 2, children: "Evaluation reports and score trends" })
     ] }) }),
-    !isDetail && /* @__PURE__ */ jsxs29(TabList2, { space: 1, children: [
-      /* @__PURE__ */ jsx40(
+    !isDetail && /* @__PURE__ */ jsxs34(TabList2, { space: 1, children: [
+      /* @__PURE__ */ jsx47(
         Tab2,
         {
           "aria-controls": "latest-panel",
@@ -6972,7 +8590,7 @@ function Dashboard() {
           selected: activeTab === "latest"
         }
       ),
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx47(
         Tab2,
         {
           "aria-controls": "timeline-panel",
@@ -6982,7 +8600,7 @@ function Dashboard() {
           selected: activeTab === "timeline"
         }
       ),
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx47(
         Tab2,
         {
           "aria-controls": "compare-panel",
@@ -6993,10 +8611,10 @@ function Dashboard() {
         }
       )
     ] }),
-    !isDetail && activeTab === "latest" && /* @__PURE__ */ jsx40(TabPanel2, { "aria-labelledby": "latest-tab", id: "latest-panel", children: /* @__PURE__ */ jsx40(LatestReports, { onSelectReport: handleSelectReport }) }),
-    !isDetail && activeTab === "timeline" && /* @__PURE__ */ jsx40(TabPanel2, { "aria-labelledby": "timeline-tab", id: "timeline-panel", children: /* @__PURE__ */ jsx40(ScoreTimeline_default, {}) }),
-    !isDetail && activeTab === "compare" && /* @__PURE__ */ jsx40(TabPanel2, { "aria-labelledby": "compare-tab", id: "compare-panel", children: /* @__PURE__ */ jsx40(ComparisonView, {}) }),
-    isDetail && reportId && /* @__PURE__ */ jsx40(
+    !isDetail && activeTab === "latest" && /* @__PURE__ */ jsx47(TabPanel2, { "aria-labelledby": "latest-tab", id: "latest-panel", children: /* @__PURE__ */ jsx47(LatestReports, { onSelectReport: handleSelectReport }) }),
+    !isDetail && activeTab === "timeline" && /* @__PURE__ */ jsx47(TabPanel2, { "aria-labelledby": "timeline-tab", id: "timeline-panel", children: /* @__PURE__ */ jsx47(ScoreTimeline_default, {}) }),
+    !isDetail && activeTab === "compare" && /* @__PURE__ */ jsx47(TabPanel2, { "aria-labelledby": "compare-tab", id: "compare-panel", children: /* @__PURE__ */ jsx47(ComparisonView, {}) }),
+    isDetail && reportId && /* @__PURE__ */ jsx47(
       ReportDetail,
       {
         activeTab: routerState.tab ?? null,
@@ -7026,7 +8644,7 @@ function ailfTool(options = {}) {
 // src/actions/RunEvaluationAction.tsx
 import { BarChartIcon as BarChartIcon2 } from "@sanity/icons";
 import { useToast as useToast8 } from "@sanity/ui";
-import { useCallback as useCallback21, useEffect as useEffect9, useRef as useRef4, useState as useState15 } from "react";
+import { useCallback as useCallback22, useEffect as useEffect9, useRef as useRef4, useState as useState17 } from "react";
 import {
   getReleaseIdFromReleaseDocumentId as getReleaseIdFromReleaseDocumentId3,
   useClient as useClient12,
@@ -7057,7 +8675,7 @@ function createRunEvaluationAction(options = {}) {
     const projectId = useProjectId2();
     const currentUser = useCurrentUser4();
     const toast = useToast8();
-    const [state, setState] = useState15({ status: "loading" });
+    const [state, setState] = useState17({ status: "loading" });
     const requestedAtRef = useRef4(null);
     const perspectiveId = getReleaseIdFromReleaseDocumentId3(release._id);
     useEffect9(() => {
@@ -7153,7 +8771,7 @@ function createRunEvaluationAction(options = {}) {
       }, 15e3);
       return () => clearTimeout(timer);
     }, [client, perspectiveId, state]);
-    const handleRequest = useCallback21(async () => {
+    const handleRequest = useCallback22(async () => {
       const releaseTitle = release.metadata?.title ?? perspectiveId ?? "release";
       const tag = `release-${slugify3(releaseTitle)}-${dateStamp3()}`;
       const now = Date.now();