selftune 0.2.9 → 0.2.12

package/packages/ui/src/components/EvidenceViewer.tsx

@@ -1,8 +1,3 @@
-import { useMemo, useState } from "react"
-import { Badge } from "../primitives/badge"
-import { Card, CardContent, CardHeader, CardTitle } from "../primitives/card"
-import type { EvidenceEntry, EvolutionEntry } from "../types"
-import { formatRate, timeAgo } from "../lib/format"
 import {
   CheckCircleIcon,
   ChevronDownIcon,
@@ -19,8 +14,14 @@ import {
   TrendingUpIcon,
   TrendingDownIcon,
   ListChecksIcon,
-} from "lucide-react"
-import Markdown from "react-markdown"
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import Markdown from "react-markdown";
+
+import { formatRate, timeAgo } from "../lib/format";
+import { Badge } from "../primitives/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "../primitives/card";
+import type { EvidenceEntry, EvolutionEntry } from "../types";
 
 const ACTION_ICON: Record<string, React.ReactNode> = {
   created: <CircleDotIcon className="size-3.5" />,
@@ -28,7 +29,7 @@ const ACTION_ICON: Record<string, React.ReactNode> = {
   deployed: <RocketIcon className="size-3.5" />,
   rejected: <XCircleIcon className="size-3.5" />,
   rolled_back: <UndoIcon className="size-3.5" />,
-}
+};
 
 const ACTION_VARIANT: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
   created: "outline",
@@ -36,34 +37,49 @@ const ACTION_VARIANT: Record<string, "default" | "secondary" | "destructive" | "
   deployed: "default",
   rejected: "destructive",
   rolled_back: "destructive",
-}
+};
 
 interface Props {
-  proposalId: string
-  evolution: EvolutionEntry[]
-  evidence: EvidenceEntry[]
+  proposalId: string;
+  evolution: EvolutionEntry[];
+  evidence: EvidenceEntry[];
 }
 
 /** Parse YAML-ish frontmatter from text, returns { meta, body } */
 function parseFrontmatter(text: string): { meta: Record<string, string>; body: string } {
-  const match = text.match(/^---\s*\n([\s\S]*?)\n---\s*\n([\s\S]*)$/)
-  if (!match) return { meta: {}, body: text }
+  const lines = text.split("\n");
+  if (lines.length < 3 || lines[0].trim() !== "---") {
+    return { meta: {}, body: text };
+  }
+
+  let closingIndex = -1;
+  for (let i = 1; i < lines.length; i++) {
+    if (lines[i].trim() === "---") {
+      closingIndex = i;
+      break;
+    }
+  }
+
+  if (closingIndex === -1) {
+    return { meta: {}, body: text };
+  }
 
-  const meta: Record<string, string> = {}
-  for (const line of match[1].split("\n")) {
-    const idx = line.indexOf(":")
+  const meta: Record<string, string> = {};
+  for (const line of lines.slice(1, closingIndex)) {
+    const idx = line.indexOf(":");
     if (idx > 0) {
-      const key = line.slice(0, idx).trim()
-      const val = line.slice(idx + 1).trim()
-      if (key && val) meta[key] = val
+      const key = line.slice(0, idx).trim();
+      const val = line.slice(idx + 1).trim();
+      if (key && val) meta[key] = val;
     }
   }
-  return { meta, body: match[2] }
+
+  return { meta, body: lines.slice(closingIndex + 1).join("\n") };
 }
 
 function FrontmatterTable({ meta }: { meta: Record<string, string> }) {
-  const entries = Object.entries(meta)
-  if (entries.length === 0) return null
+  const entries = Object.entries(meta);
+  if (entries.length === 0) return null;
 
   return (
     <div className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
@@ -74,20 +90,32 @@ function FrontmatterTable({ meta }: { meta: Record<string, string> }) {
         </div>
       ))}
     </div>
-  )
+  );
 }
 
-function SkillContentBlock({ label, text, variant }: { label: string; text: string; variant: "original" | "proposed" }) {
-  const { meta, body } = parseFrontmatter(text)
-  const hasMeta = Object.keys(meta).length > 0
+function SkillContentBlock({
+  label,
+  text,
+  variant,
+}: {
+  label: string;
+  text: string;
+  variant: "original" | "proposed";
+}) {
+  const { meta, body } = parseFrontmatter(text);
+  const hasMeta = Object.keys(meta).length > 0;
 
   return (
     <div className="flex-1 min-w-0 space-y-3">
       <div className="flex items-center gap-2">
         <FileTextIcon className="size-3.5 text-muted-foreground" />
-        <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">{label}</span>
+        <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+          {label}
+        </span>
         {variant === "proposed" && (
-          <Badge variant="secondary" className="text-[10px]">New</Badge>
+          <Badge variant="secondary" className="text-[10px]">
+            New
+          </Badge>
         )}
       </div>
 
@@ -103,61 +131,73 @@ function SkillContentBlock({ label, text, variant }: { label: string; text: stri
         <Markdown>{body}</Markdown>
       </div>
     </div>
-  )
+  );
 }
 
 /** Smart formatting for a single validation value */
 function formatValidationValue(key: string, val: unknown): React.ReactNode {
   // Booleans
   if (typeof val === "boolean") {
-    return val
-      ? <CheckCircleIcon className="size-3.5 text-emerald-500 inline" />
-      : <XCircleIcon className="size-3.5 text-red-500 inline" />
+    return val ? (
+      <CheckCircleIcon className="size-3.5 text-emerald-500 inline" />
+    ) : (
+      <XCircleIcon className="size-3.5 text-red-500 inline" />
+    );
   }
   // Numbers that look like rates (0-1 range, or key contains "rate"/"change")
   if (typeof val === "number") {
-    const isRate = key.includes("rate") || key.includes("change") || (val >= -1 && val <= 1 && key !== "count")
+    const isRate =
+      key.includes("rate") || key.includes("change") || (val >= -1 && val <= 1 && key !== "count");
     if (isRate) {
-      const pct = (val * 100).toFixed(1)
-      const prefix = val > 0 && key.includes("change") ? "+" : ""
-      return <span className="font-mono">{prefix}{pct}%</span>
+      const pct = (val * 100).toFixed(1);
+      const prefix = val > 0 && key.includes("change") ? "+" : "";
+      return (
+        <span className="font-mono">
+          {prefix}
+          {pct}%
+        </span>
+      );
     }
-    return <span className="font-mono">{val}</span>
+    return <span className="font-mono">{val}</span>;
   }
   // null/undefined
-  if (val === null || val === undefined) return <span className="text-muted-foreground">--</span>
+  if (val === null || val === undefined) return <span className="text-muted-foreground">--</span>;
   // Strings
-  if (typeof val === "string") return <span>{val}</span>
+  if (typeof val === "string") return <span>{val}</span>;
   // Arrays — render as list of items
   if (Array.isArray(val)) {
-    if (val.length === 0) return <span className="text-muted-foreground italic">none</span>
-    return <span className="font-mono">{val.length} entries</span>
+    if (val.length === 0) return <span className="text-muted-foreground italic">none</span>;
+    return <span className="font-mono">{val.length} entries</span>;
   }
   // Objects
-  if (typeof val === "object") return <span className="font-mono">1 entry</span>
-  return <span>{String(val)}</span>
+  if (typeof val === "object") return <span className="font-mono">1 entry</span>;
+  return <span>{String(val)}</span>;
 }
 
 /** Render a per_entry_result row — handles both flat EvalEntry and nested { entry, before_pass, after_pass } */
 function PerEntryResult({ entry }: { entry: Record<string, unknown> }) {
   // Handle nested shape: { entry: { query, should_trigger }, before_pass, after_pass }
-  const nested = entry.entry as Record<string, unknown> | undefined
-  const query = nested?.query ?? entry.query ?? entry.prompt ?? entry.input ?? entry.text
-  const shouldTrigger = nested?.should_trigger ?? entry.should_trigger
-  const invocationType = nested?.invocation_type ?? entry.invocation_type
-  const beforePass = entry.before_pass ?? entry.before ?? entry.original_triggered ?? entry.baseline
-  const afterPass = entry.after_pass ?? entry.after ?? entry.triggered ?? entry.result
-  const passed = entry.passed ?? entry.matched
+  const nested = entry.entry as Record<string, unknown> | undefined;
+  const query = nested?.query ?? entry.query ?? entry.prompt ?? entry.input ?? entry.text;
+  const shouldTrigger = nested?.should_trigger ?? entry.should_trigger;
+  const invocationType = nested?.invocation_type ?? entry.invocation_type;
+  const beforePass =
+    entry.before_pass ?? entry.before ?? entry.original_triggered ?? entry.baseline;
+  const afterPass = entry.after_pass ?? entry.after ?? entry.triggered ?? entry.result;
+  const passed = entry.passed ?? entry.matched;
 
   // Determine icon: use after_pass for per_entry_results, passed for others
-  const isPass = typeof afterPass === "boolean" ? afterPass : typeof passed === "boolean" ? passed : null
+  const isPass =
+    typeof afterPass === "boolean" ? afterPass : typeof passed === "boolean" ? passed : null;
 
   return (
     <div className="flex items-start gap-2 text-xs py-1.5 border-b border-border/50 last:border-0">
       {isPass !== null ? (
-        isPass
-          ? <CheckCircleIcon className="size-3.5 text-emerald-500 shrink-0 mt-0.5" />
-          : <XCircleIcon className="size-3.5 text-red-500 shrink-0 mt-0.5" />
+        isPass ? (
+          <CheckCircleIcon className="size-3.5 text-emerald-500 shrink-0 mt-0.5" />
+        ) : (
+          <XCircleIcon className="size-3.5 text-red-500 shrink-0 mt-0.5" />
+        )
       ) : (
         <CircleDotIcon className="size-3.5 text-muted-foreground shrink-0 mt-0.5" />
       )}
@@ -182,21 +222,32 @@ function PerEntryResult({ entry }: { entry: Record<string, unknown> }) {
         )}
       </div>
     </div>
-  )
+  );
 }
 
 function ValidationResults({ validation }: { validation: Record<string, unknown> }) {
-  const { improved, before_pass_rate, after_pass_rate, net_change, regressions, new_passes, per_entry_results, ...rest } = validation
-
-  const regressionsArr = Array.isArray(regressions) ? regressions : []
-  const newPassesArr = Array.isArray(new_passes) ? new_passes : []
-  const perEntryArr = Array.isArray(per_entry_results) ? per_entry_results : []
+  const {
+    improved,
+    before_pass_rate,
+    after_pass_rate,
+    net_change,
+    regressions,
+    new_passes,
+    per_entry_results,
+    ...rest
+  } = validation;
+
+  const regressionsArr = Array.isArray(regressions) ? regressions : [];
+  const newPassesArr = Array.isArray(new_passes) ? new_passes : [];
+  const perEntryArr = Array.isArray(per_entry_results) ? per_entry_results : [];
 
   return (
     <div className="rounded-md border bg-muted/30 p-3 space-y-3">
       <p className="text-xs font-medium text-muted-foreground">
         Validation Results
-        <span className="font-normal text-muted-foreground/60 ml-1.5">&mdash; Before/after comparison from eval tests</span>
+        <span className="font-normal text-muted-foreground/60 ml-1.5">
+          &mdash; Before/after comparison from eval tests
+        </span>
       </p>
 
       {/* Summary bar */}
@@ -212,8 +263,11 @@ function ValidationResults({ validation }: { validation: Record<string, unknown>
           </span>
         )}
         {typeof net_change === "number" && (
-          <span className={`text-xs font-mono font-semibold ${net_change > 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-500"}`}>
-            {net_change > 0 ? "+" : ""}{(net_change * 100).toFixed(1)}%
+          <span
+            className={`text-xs font-mono font-semibold ${net_change > 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-500"}`}
+          >
+            {net_change > 0 ? "+" : ""}
+            {(net_change * 100).toFixed(1)}%
           </span>
         )}
       </div>
@@ -226,7 +280,14 @@ function ValidationResults({ validation }: { validation: Record<string, unknown>
           </p>
           <div className="rounded border bg-card p-2">
             {newPassesArr.map((entry, j) => (
-              <PerEntryResult key={j} entry={typeof entry === "object" && entry !== null ? entry as Record<string, unknown> : { value: entry }} />
+              <PerEntryResult
+                key={j}
+                entry={
+                  typeof entry === "object" && entry !== null
+                    ? (entry as Record<string, unknown>)
+                    : { value: entry }
+                }
+              />
             ))}
           </div>
         </div>
@@ -240,16 +301,21 @@ function ValidationResults({ validation }: { validation: Record<string, unknown>
           </p>
           <div className="rounded border border-red-200 dark:border-red-900/50 bg-card p-2">
             {regressionsArr.map((entry, j) => (
-              <PerEntryResult key={j} entry={typeof entry === "object" && entry !== null ? entry as Record<string, unknown> : { value: entry }} />
+              <PerEntryResult
+                key={j}
+                entry={
+                  typeof entry === "object" && entry !== null
+                    ? (entry as Record<string, unknown>)
+                    : { value: entry }
+                }
+              />
             ))}
           </div>
         </div>
       )}
 
       {/* Per-entry results (collapsible if many) */}
-      {perEntryArr.length > 0 && (
-        <PerEntryResultsSection entries={perEntryArr} />
-      )}
+      {perEntryArr.length > 0 && <PerEntryResultsSection entries={perEntryArr} />}
 
       {/* Any remaining keys */}
       {Object.keys(rest).length > 0 && (
@@ -263,18 +329,24 @@ function ValidationResults({ validation }: { validation: Record<string, unknown>
         </div>
       )}
     </div>
-  )
+  );
 }
 
 function PerEntryResultsSection({ entries }: { entries: unknown[] }) {
-  const [expanded, setExpanded] = useState(false)
+  const [expanded, setExpanded] = useState(false);
   const passCount = entries.filter((e) => {
-    if (typeof e !== "object" || e === null) return false
-    const obj = e as Record<string, unknown>
-    return obj.passed === true || obj.matched === true || obj.triggered === true || obj.after === true || obj.result === true
-  }).length
-
-  const display = expanded ? entries : entries.slice(0, 5)
+    if (typeof e !== "object" || e === null) return false;
+    const obj = e as Record<string, unknown>;
+    return (
+      obj.passed === true ||
+      obj.matched === true ||
+      obj.triggered === true ||
+      obj.after === true ||
+      obj.result === true
+    );
+  }).length;
+
+  const display = expanded ? entries : entries.slice(0, 5);
 
   return (
     <div>
@@ -303,41 +375,48 @@ function PerEntryResultsSection({ entries }: { entries: unknown[] }) {
         {display.map((entry, j) => (
           <PerEntryResult
             key={j}
-            entry={typeof entry === "object" && entry !== null ? entry as Record<string, unknown> : { value: entry }}
+            entry={
+              typeof entry === "object" && entry !== null
+                ? (entry as Record<string, unknown>)
+                : { value: entry }
+            }
           />
         ))}
       </div>
     </div>
-  )
+  );
 }
 
 /** Extract after_pass_rate from an evidence entry's validation data */
 function getAfterPassRate(entry: EvidenceEntry): number | null {
-  if (!entry.validation) return null
-  const rate = entry.validation.after_pass_rate
-  return typeof rate === "number" ? rate : null
+  if (!entry.validation) return null;
+  const rate = entry.validation.after_pass_rate;
+  return typeof rate === "number" ? rate : null;
 }
 
 /** Render a delta badge between two pass rates, returns null if not computable */
 function DeltaBadge({ prev, curr }: { prev: number | null; curr: number | null }) {
-  if (prev === null || curr === null) return null
-  const delta = curr - prev
-  if (delta === 0) return null
-  const pct = (delta * 100).toFixed(1)
-  const positive = delta > 0
+  if (prev === null || curr === null) return null;
+  const delta = curr - prev;
+  if (delta === 0) return null;
+  const pct = (delta * 100).toFixed(1);
+  const positive = delta > 0;
   return (
-    <span className={`text-[10px] font-mono font-semibold ${positive ? "text-emerald-600 dark:text-emerald-400" : "text-red-500"}`}>
-      {positive ? "+" : ""}{pct}% vs previous
+    <span
+      className={`text-[10px] font-mono font-semibold ${positive ? "text-emerald-600 dark:text-emerald-400" : "text-red-500"}`}
+    >
+      {positive ? "+" : ""}
+      {pct}% vs previous
     </span>
-  )
+  );
 }
 
 function EvalSetSection({ evalSet }: { evalSet: Array<Record<string, unknown>> }) {
-  const [expanded, setExpanded] = useState(false)
+  const [expanded, setExpanded] = useState(false);
   const passCount = evalSet.filter((e) => {
-    const passed = e.passed ?? e.result
-    return passed === true
-  }).length
+    const passed = e.passed ?? e.result;
+    return passed === true;
+  }).length;
 
   return (
     <div className="rounded-md border bg-muted/30 p-3 space-y-2">
@@ -346,9 +425,11 @@ function EvalSetSection({ evalSet }: { evalSet: Array<Record<string, unknown>> }
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-1.5 w-full text-left"
       >
-        {expanded
-          ? <ChevronDownIcon className="size-3.5 text-muted-foreground shrink-0" />
-          : <ChevronRightIcon className="size-3.5 text-muted-foreground shrink-0" />}
+        {expanded ? (
+          <ChevronDownIcon className="size-3.5 text-muted-foreground shrink-0" />
+        ) : (
+          <ChevronRightIcon className="size-3.5 text-muted-foreground shrink-0" />
+        )}
         <ListChecksIcon className="size-3.5 text-muted-foreground" />
         <span className="text-xs font-medium text-muted-foreground">
           Eval Set ({passCount}/{evalSet.length} passed)
@@ -357,34 +438,41 @@ function EvalSetSection({ evalSet }: { evalSet: Array<Record<string, unknown>> }
       {expanded && (
         <div className="space-y-1">
           {evalSet.map((evalEntry, j) => {
-            const query = evalEntry.query ?? evalEntry.prompt ?? evalEntry.input
-            const expected = evalEntry.expected ?? evalEntry.should_trigger
-            const passed = evalEntry.passed ?? evalEntry.result
+            const query = evalEntry.query ?? evalEntry.prompt ?? evalEntry.input;
+            const expected = evalEntry.expected ?? evalEntry.should_trigger;
+            const passed = evalEntry.passed ?? evalEntry.result;
             return (
-              <div key={j} className="flex items-start gap-2 text-xs py-1 border-b border-border/50 last:border-0">
+              <div
+                key={j}
+                className="flex items-start gap-2 text-xs py-1 border-b border-border/50 last:border-0"
+              >
                 {typeof passed === "boolean" ? (
-                  passed
-                    ? <CheckCircleIcon className="size-3.5 text-emerald-500 shrink-0 mt-0.5" />
-                    : <XCircleIcon className="size-3.5 text-red-500 shrink-0 mt-0.5" />
+                  passed ? (
+                    <CheckCircleIcon className="size-3.5 text-emerald-500 shrink-0 mt-0.5" />
+                  ) : (
+                    <XCircleIcon className="size-3.5 text-red-500 shrink-0 mt-0.5" />
+                  )
                 ) : (
                   <CircleDotIcon className="size-3.5 text-muted-foreground shrink-0 mt-0.5" />
                 )}
-                <span className="flex-1 min-w-0 line-clamp-2">{String(query ?? JSON.stringify(evalEntry))}</span>
+                <span className="flex-1 min-w-0 line-clamp-2">
+                  {String(query ?? JSON.stringify(evalEntry))}
+                </span>
                 {expected !== undefined && (
                   <Badge variant="secondary" className="text-[9px] shrink-0">
                     expect: {String(expected)}
                   </Badge>
                 )}
               </div>
-            )
+            );
           })}
         </div>
       )}
     </div>
-  )
+  );
 }
 
-type RoundStatus = "single" | "intermediate" | "final"
+type RoundStatus = "single" | "intermediate" | "final";
 
 /** Render a single evidence card — used for both expanded and collapsed states */
 function EvidenceCard({
@@ -394,13 +482,13 @@ function EvidenceCard({
   prevPassRate,
   currPassRate,
 }: {
-  entry: EvidenceEntry
-  roundLabel: string | null
-  roundStatus: RoundStatus
-  prevPassRate: number | null
-  currPassRate: number | null
+  entry: EvidenceEntry;
+  roundLabel: string | null;
+  roundStatus: RoundStatus;
+  prevPassRate: number | null;
+  currPassRate: number | null;
 }) {
-  const showRound = roundStatus !== "single"
+  const showRound = roundStatus !== "single";
   return (
     <Card className={roundStatus === "final" ? "border-primary/50 shadow-sm" : undefined}>
       <CardHeader className="pb-3">
@@ -412,15 +500,25 @@ function EvidenceCard({
               <span className="text-[10px] font-mono text-muted-foreground">{roundLabel}</span>
             )}
             {roundStatus === "final" && (
-              <Badge variant="default" className="text-[10px]">Final</Badge>
+              <Badge variant="default" className="text-[10px]">
+                Final
+              </Badge>
             )}
           </CardTitle>
           <div className="flex items-center gap-2">
             {showRound && <DeltaBadge prev={prevPassRate} curr={currPassRate} />}
-            <Badge variant="secondary" className="text-[10px]">{entry.stage}</Badge>
+            <Badge variant="secondary" className="text-[10px]">
+              {entry.stage}
+            </Badge>
             {entry.confidence !== null && (
               <Badge
-                variant={entry.confidence >= 0.8 ? "default" : entry.confidence >= 0.5 ? "secondary" : "destructive"}
+                variant={
+                  entry.confidence >= 0.8
+                    ? "default"
+                    : entry.confidence >= 0.5
+                      ? "secondary"
+                      : "destructive"
+                }
                 className="text-[10px] font-mono"
               >
                 {formatRate(entry.confidence)} confidence
@@ -457,9 +555,7 @@ function EvidenceCard({
         )}
 
         {/* Eval set — test cases used for validation (collapsible) */}
-        {entry.eval_set && entry.eval_set.length > 0 && (
-          <EvalSetSection evalSet={entry.eval_set} />
-        )}
+        {entry.eval_set && entry.eval_set.length > 0 && <EvalSetSection evalSet={entry.eval_set} />}
 
         {/* Validation details */}
         {entry.validation && Object.keys(entry.validation).length > 0 && (
@@ -467,7 +563,7 @@ function EvidenceCard({
         )}
       </CardContent>
     </Card>
-  )
+  );
 }
 
 /** Collapsed summary for earlier iteration rounds */
@@ -476,12 +572,12 @@ function CollapsedEvidenceCard({
   roundLabel,
   onExpand,
 }: {
-  entry: EvidenceEntry
-  roundLabel: string
-  onExpand: () => void
+  entry: EvidenceEntry;
+  roundLabel: string;
+  onExpand: () => void;
 }) {
-  const passRate = getAfterPassRate(entry)
-  const improved = entry.validation?.improved
+  const passRate = getAfterPassRate(entry);
+  const improved = entry.validation?.improved;
 
   return (
     <button
@@ -504,62 +600,66 @@ function CollapsedEvidenceCard({
             {improved ? "Improved" : "Regressed"}
           </Badge>
         )}
-        <Badge variant="secondary" className="text-[10px]">{entry.stage}</Badge>
+        <Badge variant="secondary" className="text-[10px]">
+          {entry.stage}
+        </Badge>
         <span className="text-[10px] text-muted-foreground">{timeAgo(entry.timestamp)}</span>
       </div>
     </button>
-  )
+  );
 }
 
 export function EvidenceViewer({ proposalId, evolution, evidence }: Props) {
   const steps = useMemo(
-    () => evolution
-      .filter((e) => e.proposal_id === proposalId)
-      .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()),
+    () =>
+      evolution
+        .filter((e) => e.proposal_id === proposalId)
+        .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()),
     [evolution, proposalId],
-  )
+  );
 
   const entries = useMemo(
-    () => evidence
-      .filter((e) => e.proposal_id === proposalId)
-      .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()),
+    () =>
+      evidence
+        .filter((e) => e.proposal_id === proposalId)
+        .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()),
     [evidence, proposalId],
-  )
+  );
 
   // Track which earlier rounds are manually expanded
-  const [expandedRounds, setExpandedRounds] = useState<Set<string>>(new Set())
+  const [expandedRounds, setExpandedRounds] = useState<Set<string>>(new Set());
 
   const toggleRound = (key: string) => {
     setExpandedRounds((prev) => {
-      const next = new Set(prev)
-      if (next.has(key)) next.delete(key)
-      else next.add(key)
-      return next
-    })
-  }
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
 
   const snapshot = useMemo(() => {
     for (let i = steps.length - 1; i >= 0; i--) {
-      if (steps[i].eval_snapshot) return steps[i].eval_snapshot as Record<string, unknown>
+      if (steps[i].eval_snapshot) return steps[i].eval_snapshot as Record<string, unknown>;
     }
-    return null
-  }, [steps])
+    return null;
+  }, [steps]);
 
   // Separate proposal-stage entries from validation-stage entries, then group validations by target
   const { proposalEntries, validationsByTarget } = useMemo(() => {
-    const proposals: EvidenceEntry[] = []
-    const validationMap = new Map<string, EvidenceEntry[]>()
+    const proposals: EvidenceEntry[] = [];
+    const validationMap = new Map<string, EvidenceEntry[]>();
     for (const entry of entries) {
       if (entry.stage !== "validated") {
-        proposals.push(entry)
+        proposals.push(entry);
       } else {
-        const key = entry.target
-        if (!validationMap.has(key)) validationMap.set(key, [])
-        validationMap.get(key)!.push(entry)
+        const key = entry.target;
+        if (!validationMap.has(key)) validationMap.set(key, []);
+        validationMap.get(key)!.push(entry);
       }
     }
-    return { proposalEntries: proposals, validationsByTarget: validationMap }
-  }, [entries])
+    return { proposalEntries: proposals, validationsByTarget: validationMap };
+  }, [entries]);
 
   return (
     <div className="space-y-4">
@@ -567,8 +667,9 @@ export function EvidenceViewer({ proposalId, evolution, evidence }: Props) {
       <div className="flex items-start gap-2.5 rounded-lg border border-primary/20 bg-primary/5 px-3.5 py-2.5">
         <InfoIcon className="size-4 text-primary/60 shrink-0 mt-0.5" />
         <p className="text-xs text-muted-foreground leading-relaxed">
-          This view shows the complete evidence trail for a skill evolution proposal &mdash; how the skill was changed,
-          the eval test results before and after, and whether the change improved performance.
+          This view shows the complete evidence trail for a skill evolution proposal &mdash; how the
+          skill was changed, the eval test results before and after, and whether the change improved
+          performance.
         </p>
       </div>
 
@@ -577,7 +678,9 @@ export function EvidenceViewer({ proposalId, evolution, evidence }: Props) {
         <CardHeader className="pb-3">
           <CardTitle className="text-sm flex items-center gap-2">
             <span>Proposal Journey</span>
-            <span className="font-mono text-xs text-muted-foreground">#{proposalId.slice(0, 12)}</span>
+            <span className="font-mono text-xs text-muted-foreground">
+              #{proposalId.slice(0, 12)}
+            </span>
           </CardTitle>
         </CardHeader>
         <CardContent className="space-y-3">
@@ -587,10 +690,15 @@ export function EvidenceViewer({ proposalId, evolution, evidence }: Props) {
                 {i > 0 && <ArrowRightIcon className="size-3 text-muted-foreground/50 shrink-0" />}
                 <div className="flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 bg-card">
                   {ACTION_ICON[step.action]}
-                  <Badge variant={ACTION_VARIANT[step.action] ?? "secondary"} className="text-[10px] capitalize">
+                  <Badge
+                    variant={ACTION_VARIANT[step.action] ?? "secondary"}
+                    className="text-[10px] capitalize"
+                  >
                     {step.action.replace("_", " ")}
                   </Badge>
-                  <span className="text-[10px] text-muted-foreground">{timeAgo(step.timestamp)}</span>
+                  <span className="text-[10px] text-muted-foreground">
+                    {timeAgo(step.timestamp)}
+                  </span>
                 </div>
               </div>
             ))}
@@ -601,21 +709,31 @@ export function EvidenceViewer({ proposalId, evolution, evidence }: Props) {
             <div className="flex items-center gap-3 rounded-md border bg-muted/20 px-3 py-2">
               {typeof snapshot.net_change === "number" && (
                 <div className="flex items-center gap-1">
-                  {(snapshot.net_change as number) > 0
-                    ? <TrendingUpIcon className="size-3.5 text-emerald-500" />
-                    : <TrendingDownIcon className="size-3.5 text-red-500" />}
-                  <span className={`text-sm font-semibold font-mono ${(snapshot.net_change as number) > 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-500"}`}>
-                    {(snapshot.net_change as number) > 0 ? "+" : ""}{Math.round((snapshot.net_change as number) * 100)}%
+                  {(snapshot.net_change as number) > 0 ? (
+                    <TrendingUpIcon className="size-3.5 text-emerald-500" />
+                  ) : (
+                    <TrendingDownIcon className="size-3.5 text-red-500" />
+                  )}
+                  <span
+                    className={`text-sm font-semibold font-mono ${(snapshot.net_change as number) > 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-500"}`}
+                  >
+                    {(snapshot.net_change as number) > 0 ? "+" : ""}
+                    {Math.round((snapshot.net_change as number) * 100)}%
                   </span>
                 </div>
               )}
-              {typeof snapshot.before_pass_rate === "number" && typeof snapshot.after_pass_rate === "number" && (
-                <span className="text-xs text-muted-foreground font-mono">
-                  {Math.round((snapshot.before_pass_rate as number) * 100)}% &rarr; {Math.round((snapshot.after_pass_rate as number) * 100)}%
-                </span>
-              )}
+              {typeof snapshot.before_pass_rate === "number" &&
+                typeof snapshot.after_pass_rate === "number" && (
+                  <span className="text-xs text-muted-foreground font-mono">
+                    {Math.round((snapshot.before_pass_rate as number) * 100)}% &rarr;{" "}
+                    {Math.round((snapshot.after_pass_rate as number) * 100)}%
+                  </span>
+                )}
               {snapshot.improved !== undefined && (
-                <Badge variant={snapshot.improved ? "default" : "destructive"} className="text-[10px]">
+                <Badge
+                  variant={snapshot.improved ? "default" : "destructive"}
+                  className="text-[10px]"
+                >
                   {snapshot.improved ? "Improved" : "Regressed"}
                 </Badge>
               )}
@@ -645,17 +763,23 @@ export function EvidenceViewer({ proposalId, evolution, evidence }: Props) {
 
       {/* Validation-stage evidence — grouped by target with iteration rounds */}
       {Array.from(validationsByTarget.entries()).map(([target, targetEntries]) => {
-        const hasMultipleRounds = targetEntries.length > 1
+        const hasMultipleRounds = targetEntries.length > 1;
 
         return (
           <div key={target} className="space-y-2">
             {targetEntries.map((entry, i) => {
-              const isLast = i === targetEntries.length - 1
-              const roundLabel = hasMultipleRounds ? `Round ${i + 1} of ${targetEntries.length}` : null
-              const prevPassRate = i > 0 ? getAfterPassRate(targetEntries[i - 1]) : null
-              const currPassRate = getAfterPassRate(entry)
-              const roundKey = `${target}-${entry.timestamp}`
-              const roundStatus: RoundStatus = !hasMultipleRounds ? "single" : isLast ? "final" : "intermediate"
+              const isLast = i === targetEntries.length - 1;
+              const roundLabel = hasMultipleRounds
+                ? `Round ${i + 1} of ${targetEntries.length}`
+                : null;
+              const prevPassRate = i > 0 ? getAfterPassRate(targetEntries[i - 1]) : null;
+              const currPassRate = getAfterPassRate(entry);
+              const roundKey = `${target}-${entry.timestamp}`;
+              const roundStatus: RoundStatus = !hasMultipleRounds
+                ? "single"
+                : isLast
+                  ? "final"
+                  : "intermediate";
 
               // Earlier rounds: collapsed by default
               if (roundStatus === "intermediate" && !expandedRounds.has(roundKey)) {
@@ -666,7 +790,7 @@ export function EvidenceViewer({ proposalId, evolution, evidence }: Props) {
                     roundLabel={roundLabel!}
                     onExpand={() => toggleRound(roundKey)}
                   />
-                )
+                );
               }
 
               // Expanded earlier round — show with collapse toggle
@@ -689,7 +813,7 @@ export function EvidenceViewer({ proposalId, evolution, evidence }: Props) {
                       currPassRate={currPassRate}
                     />
                   </div>
-                )
+                );
               }
 
               // Final round (or single entry) — always expanded
@@ -702,10 +826,10 @@ export function EvidenceViewer({ proposalId, evolution, evidence }: Props) {
                   prevPassRate={prevPassRate}
                   currPassRate={currPassRate}
                 />
-              )
+              );
             })}
           </div>
-        )
+        );
       })}
 
       {entries.length === 0 && (
@@ -714,5 +838,5 @@ export function EvidenceViewer({ proposalId, evolution, evidence }: Props) {
         </div>
       )}
     </div>
-  )
+  );
 }