@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/context-preview/ContextCompareView.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { DiffViewer } from "@ai-matrx/diff/react";
 import { AlertTriangle, ChevronDown, GitCompareArrows, MessageSquareText, RefreshCw } from "lucide-react";
@@ -87,37 +88,72 @@ function Block({
   const fullBlock = side.block ?? "";
   const focused = focus ? focusLines(fullBlock, focus.key) : null;
   const block = focused ? focused.join("\n") : fullBlock;
-  return /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1", "data-compare-side": side.path }, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-2" }, /* @__PURE__ */ React.createElement("h4", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary" }, title), /* @__PURE__ */ React.createElement("span", { className: "text-[10px] tabular-nums text-muted-foreground" }, side.scope_ids?.length ?? 0, " scope", (side.scope_ids?.length ?? 0) === 1 ? "" : "s", typeof side.resolve_ms === "number" ? ` \xB7 ${Math.round(side.resolve_ms)} ms` : "")), !side.available ? /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-2 text-xs text-foreground" }, side.unavailable_reason ?? "This side did not answer.") : focus && focused && focused.length === 0 ? /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "mt-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-2 text-xs text-foreground",
-      "data-focus-absent": true
-    },
-    notInBlockSentence(side, focus)
-  ) : block ? /* @__PURE__ */ React.createElement("div", { className: "group/block relative mt-1.5" }, /* @__PURE__ */ React.createElement("pre", { "data-kind-source": "explicit", className: "whitespace-pre-wrap break-words rounded-md border border-border bg-muted/40 px-2.5 py-2 font-mono text-[11px] leading-relaxed text-foreground" }, block), /* @__PURE__ */ React.createElement(
-    CopyButtons,
-    {
-      label: "Copy",
-      human: block,
-      size: "sm",
-      className: "absolute top-1 right-1 z-10 opacity-0 transition-opacity pointer-coarse:opacity-100 group-hover/block:opacity-100"
-    }
-  )) : /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-2 text-xs italic text-muted-foreground" }, "No block \u2014 this side delivers no context for this selection."), /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-[11px] leading-snug text-muted-foreground", "data-provenance-values": side.path }, VALUES_PROVENANCE[side.path]));
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", "data-compare-side": side.path, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary", children: title }),
+      /* @__PURE__ */ jsxs("span", { className: "text-[10px] tabular-nums text-muted-foreground", children: [
+        side.scope_ids?.length ?? 0,
+        " scope",
+        (side.scope_ids?.length ?? 0) === 1 ? "" : "s",
+        typeof side.resolve_ms === "number" ? ` \xB7 ${Math.round(side.resolve_ms)} ms` : ""
+      ] })
+    ] }),
+    !side.available ? /* @__PURE__ */ jsx("div", { className: "mt-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-2 text-xs text-foreground", children: side.unavailable_reason ?? "This side did not answer." }) : focus && focused && focused.length === 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "mt-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-2 text-xs text-foreground",
+        "data-focus-absent": true,
+        children: notInBlockSentence(side, focus)
+      }
+    ) : block ? /* @__PURE__ */ jsxs("div", { className: "group/block relative mt-1.5", children: [
+      /* @__PURE__ */ jsx("pre", { "data-kind-source": "explicit", className: "whitespace-pre-wrap break-words rounded-md border border-border bg-muted/40 px-2.5 py-2 font-mono text-[11px] leading-relaxed text-foreground", children: block }),
+      /* @__PURE__ */ jsx(
+        CopyButtons,
+        {
+          label: "Copy",
+          human: block,
+          size: "sm",
+          className: "absolute top-1 right-1 z-10 opacity-0 transition-opacity pointer-coarse:opacity-100 group-hover/block:opacity-100"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx("div", { className: "mt-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-2 text-xs italic text-muted-foreground", children: "No block \u2014 this side delivers no context for this selection." }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] leading-snug text-muted-foreground", "data-provenance-values": side.path, children: VALUES_PROVENANCE[side.path] })
+  ] });
 }
 function ProvenanceLine({ stamp }) {
   if (!stamp) return null;
-  return /* @__PURE__ */ React.createElement("p", { className: "text-[11px] leading-snug text-muted-foreground", "data-provenance": stamp.resolver }, stamp.says, " ", /* @__PURE__ */ React.createElement("span", { className: "font-mono text-foreground/70" }, stamp.module, ".", stamp.function, " @ ", stamp.git_sha.slice(0, 10)));
+  return /* @__PURE__ */ jsxs("p", { className: "text-[11px] leading-snug text-muted-foreground", "data-provenance": stamp.resolver, children: [
+    stamp.says,
+    " ",
+    /* @__PURE__ */ jsxs("span", { className: "font-mono text-foreground/70", children: [
+      stamp.module,
+      ".",
+      stamp.function,
+      " @ ",
+      stamp.git_sha.slice(0, 10)
+    ] })
+  ] });
 }
 function FedBlock({ label, text, slot }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "min-w-0", "data-fed-block": slot }, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground" }, label), text ? /* @__PURE__ */ React.createElement("div", { className: "group/block relative mt-1" }, /* @__PURE__ */ React.createElement("pre", { "data-kind-source": "explicit", className: "max-h-[28rem] overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted/40 px-2.5 py-2 font-mono text-[11px] leading-relaxed text-foreground" }, text), /* @__PURE__ */ React.createElement(
-    CopyButtons,
-    {
-      label: "Copy",
-      human: text,
-      size: "sm",
-      className: "absolute top-1 right-1 z-10 opacity-0 transition-opacity pointer-coarse:opacity-100 group-hover/block:opacity-100"
-    }
-  )) : /* @__PURE__ */ React.createElement("p", { className: "mt-1 rounded-md border border-border bg-muted/30 px-2.5 py-2 text-xs italic text-muted-foreground" }, "Nothing \u2014 this turn is fed no ", slot === "intro" ? "intro" : "selection block", "."));
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0", "data-fed-block": slot, children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: label }),
+    text ? /* @__PURE__ */ jsxs("div", { className: "group/block relative mt-1", children: [
+      /* @__PURE__ */ jsx("pre", { "data-kind-source": "explicit", className: "max-h-[28rem] overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted/40 px-2.5 py-2 font-mono text-[11px] leading-relaxed text-foreground", children: text }),
+      /* @__PURE__ */ jsx(
+        CopyButtons,
+        {
+          label: "Copy",
+          human: text,
+          size: "sm",
+          className: "absolute top-1 right-1 z-10 opacity-0 transition-opacity pointer-coarse:opacity-100 group-hover/block:opacity-100"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("p", { className: "mt-1 rounded-md border border-border bg-muted/30 px-2.5 py-2 text-xs italic text-muted-foreground", children: [
+      "Nothing \u2014 this turn is fed no ",
+      slot === "intro" ? "intro" : "selection block",
+      "."
+    ] })
+  ] });
 }
 function bytesLine(side) {
   if (!side.available) return side.unavailable_reason ?? "This side did not answer.";
@@ -131,10 +167,21 @@ function FedSide({
   says,
   focus
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3 px-4 pt-3", "data-fed-side": side?.path ?? "missing" }, side ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ProvenanceLine, { stamp: side.provenance }), /* @__PURE__ */ React.createElement("p", { className: "text-xs tabular-nums text-foreground", "data-fed-bytes": true }, bytesLine(side)), side.available && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FedBlock, { label: "System prompt \u2014 the first turn only", text: side.intro, slot: "intro" }), /* @__PURE__ */ React.createElement(FedBlock, { label: "Every message \u2014 the selection", text: side.active, slot: "active" })), says && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground" }, says)) : /* @__PURE__ */ React.createElement(NoDelivered, null), /* @__PURE__ */ React.createElement(Block, { side: values, title: valuesTitle, focus }));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 px-4 pt-3", "data-fed-side": side?.path ?? "missing", children: [
+    side ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ProvenanceLine, { stamp: side.provenance }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs tabular-nums text-foreground", "data-fed-bytes": true, children: bytesLine(side) }),
+      side.available && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(FedBlock, { label: "System prompt \u2014 the first turn only", text: side.intro, slot: "intro" }),
+        /* @__PURE__ */ jsx(FedBlock, { label: "Every message \u2014 the selection", text: side.active, slot: "active" })
+      ] }),
+      says && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: says })
+    ] }) : /* @__PURE__ */ jsx(NoDelivered, {}),
+    /* @__PURE__ */ jsx(Block, { side: values, title: valuesTitle, focus })
+  ] });
 }
 function NoDelivered() {
-  return /* @__PURE__ */ React.createElement("p", { className: "rounded-md border border-border bg-muted/30 px-3 py-2 text-xs text-foreground", "data-fed-missing": true }, "This server version doesn't report what the model is fed yet");
+  return /* @__PURE__ */ jsx("p", { className: "rounded-md border border-border bg-muted/30 px-3 py-2 text-xs text-foreground", "data-fed-missing": true, children: "This server version doesn't report what the model is fed yet" });
 }
 function DiffTab({
   compare,
@@ -155,133 +202,214 @@ function DiffTab({
     fedVerdict = `Byte-identical \u2014 both systems feed the model the same ${formatCount(today.block_byte_length)} bytes (sha256 ${(today.block_sha256 ?? "").slice(0, 12)}).`;
   else
     fedVerdict = `Different \u2014 ${formatCount(today.block_byte_length)} bytes today, ${formatCount(store.block_byte_length)} bytes from the record store.`;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col", "data-compare-diff": true, "data-kind-source": "explicit" }, /* @__PURE__ */ React.createElement(Summary, { compare }), /* @__PURE__ */ React.createElement("section", { className: "px-4 pt-4", "data-diff-fed": true }, /* @__PURE__ */ React.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary" }, "What the model is fed"), today ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "p",
-    {
-      className: cn(
-        "mt-1 text-sm font-medium",
-        delivered?.identical ? "text-foreground" : "text-amber-700 dark:text-amber-300"
-      ),
-      "data-fed-identical": String(Boolean(delivered?.identical))
-    },
-    fedVerdict
-  ), /* @__PURE__ */ React.createElement("div", { className: "mt-1 space-y-0.5" }, /* @__PURE__ */ React.createElement(ProvenanceLine, { stamp: today.provenance }), store?.available && /* @__PURE__ */ React.createElement(ProvenanceLine, { stamp: store.provenance })), store?.available && /* @__PURE__ */ React.createElement("div", { className: "mt-2 overflow-hidden rounded-md border border-border", "data-diff-viewer": "fed" }, /* @__PURE__ */ React.createElement(
-    DiffViewer,
-    {
-      original: today.injected_block ?? "",
-      modified: store.injected_block ?? "",
-      originalLabel: "What the model gets today",
-      modifiedLabel: "Record store",
-      engine: "light",
-      defaultView: "inline",
-      showLineNumbers: true,
-      wrap: true,
-      readOnly: true
-    }
-  ))) : /* @__PURE__ */ React.createElement("div", { className: "mt-1" }, /* @__PURE__ */ React.createElement(NoDelivered, null))), /* @__PURE__ */ React.createElement("section", { className: "px-4 pt-4", "data-diff-values": true }, /* @__PURE__ */ React.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary" }, "The values each system answered"), /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-xs text-muted-foreground" }, focus ? `${focus.label} only. ` : "", "With an organization, agents fetch these with tools"), compare.old.available && compare.new.available ? shownOld === shownNew ? /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-2 text-xs text-foreground", "data-values-identical": true }, shownOld ? "Identical on both systems:" : "Neither system delivers a value here.", shownOld && /* @__PURE__ */ React.createElement("pre", { className: "mt-1 whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed" }, shownOld)) : /* @__PURE__ */ React.createElement("div", { className: "mt-2 overflow-hidden rounded-md border border-border", "data-diff-viewer": "values" }, /* @__PURE__ */ React.createElement(
-    DiffViewer,
-    {
-      original: shownOld,
-      modified: shownNew,
-      originalLabel: "Current system",
-      modifiedLabel: "Record store",
-      engine: "light",
-      defaultView: "inline",
-      showLineNumbers: true,
-      wrap: true,
-      readOnly: true
-    }
-  )) : /* @__PURE__ */ React.createElement("p", { className: "mt-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-2 text-xs text-foreground" }, (!compare.old.available ? compare.old.unavailable_reason : compare.new.unavailable_reason) ?? "One side did not answer.")), /* @__PURE__ */ React.createElement(
-    Differences,
-    {
-      differences: focus ? (compare.differences ?? []).filter((d) => d.item_id === focus.itemId) : compare.differences ?? []
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", "data-compare-diff": true, "data-kind-source": "explicit", children: [
+    /* @__PURE__ */ jsx(Summary, { compare }),
+    /* @__PURE__ */ jsxs("section", { className: "px-4 pt-4", "data-diff-fed": true, children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary", children: "What the model is fed" }),
+      today ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-1 text-sm font-medium",
+              delivered?.identical ? "text-foreground" : "text-amber-700 dark:text-amber-300"
+            ),
+            "data-fed-identical": String(Boolean(delivered?.identical)),
+            children: fedVerdict
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mt-1 space-y-0.5", children: [
+          /* @__PURE__ */ jsx(ProvenanceLine, { stamp: today.provenance }),
+          store?.available && /* @__PURE__ */ jsx(ProvenanceLine, { stamp: store.provenance })
+        ] }),
+        store?.available && /* @__PURE__ */ jsx("div", { className: "mt-2 overflow-hidden rounded-md border border-border", "data-diff-viewer": "fed", children: /* @__PURE__ */ jsx(
+          DiffViewer,
+          {
+            original: today.injected_block ?? "",
+            modified: store.injected_block ?? "",
+            originalLabel: "What the model gets today",
+            modifiedLabel: "Record store",
+            engine: "light",
+            defaultView: "inline",
+            showLineNumbers: true,
+            wrap: true,
+            readOnly: true
+          }
+        ) })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(NoDelivered, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "px-4 pt-4", "data-diff-values": true, children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary", children: "The values each system answered" }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+        focus ? `${focus.label} only. ` : "",
+        "With an organization, agents fetch these with tools"
+      ] }),
+      compare.old.available && compare.new.available ? shownOld === shownNew ? /* @__PURE__ */ jsxs("div", { className: "mt-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-2 text-xs text-foreground", "data-values-identical": true, children: [
+        shownOld ? "Identical on both systems:" : "Neither system delivers a value here.",
+        shownOld && /* @__PURE__ */ jsx("pre", { className: "mt-1 whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed", children: shownOld })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "mt-2 overflow-hidden rounded-md border border-border", "data-diff-viewer": "values", children: /* @__PURE__ */ jsx(
+        DiffViewer,
+        {
+          original: shownOld,
+          modified: shownNew,
+          originalLabel: "Current system",
+          modifiedLabel: "Record store",
+          engine: "light",
+          defaultView: "inline",
+          showLineNumbers: true,
+          wrap: true,
+          readOnly: true
+        }
+      ) }) : /* @__PURE__ */ jsx("p", { className: "mt-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-2 text-xs text-foreground", children: (!compare.old.available ? compare.old.unavailable_reason : compare.new.unavailable_reason) ?? "One side did not answer." })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Differences,
+      {
+        differences: focus ? (compare.differences ?? []).filter((d) => d.item_id === focus.itemId) : compare.differences ?? []
+      }
+    )
+  ] });
 }
 function JsonBlock({ label, value, slot }) {
   const text = JSON.stringify(value ?? null, null, 2);
-  return /* @__PURE__ */ React.createElement("div", { className: "min-w-0", "data-selection-block": slot }, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground" }, label), /* @__PURE__ */ React.createElement("div", { className: "group/block relative mt-1" }, /* @__PURE__ */ React.createElement("pre", { "data-kind-source": "explicit", className: "overflow-auto whitespace-pre-wrap break-all rounded-md border border-border bg-muted/40 px-2.5 py-2 font-mono text-[11px] leading-relaxed text-foreground" }, text), /* @__PURE__ */ React.createElement(
-    CopyButtons,
-    {
-      label: "Copy",
-      human: text,
-      size: "sm",
-      className: "absolute top-1 right-1 z-10 opacity-0 transition-opacity pointer-coarse:opacity-100 group-hover/block:opacity-100"
-    }
-  )));
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0", "data-selection-block": slot, children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "group/block relative mt-1", children: [
+      /* @__PURE__ */ jsx("pre", { "data-kind-source": "explicit", className: "overflow-auto whitespace-pre-wrap break-all rounded-md border border-border bg-muted/40 px-2.5 py-2 font-mono text-[11px] leading-relaxed text-foreground", children: text }),
+      /* @__PURE__ */ jsx(
+        CopyButtons,
+        {
+          label: "Copy",
+          human: text,
+          size: "sm",
+          className: "absolute top-1 right-1 z-10 opacity-0 transition-opacity pointer-coarse:opacity-100 group-hover/block:opacity-100"
+        }
+      )
+    ] })
+  ] });
 }
 function SelectionTab({
   sent,
   compare,
   delivered
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3 px-4 pt-3", "data-compare-selection": true }, sent && /* @__PURE__ */ React.createElement(JsonBlock, { label: "What this page sent", value: sent, slot: "sent" }), /* @__PURE__ */ React.createElement(JsonBlock, { label: "The scopes the values compare read", value: compare.selection, slot: "expanded" }), delivered ? /* @__PURE__ */ React.createElement(JsonBlock, { label: "The assembler's arguments (both sides)", value: delivered.arguments, slot: "arguments" }) : /* @__PURE__ */ React.createElement(NoDelivered, null));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 px-4 pt-3", "data-compare-selection": true, children: [
+    sent && /* @__PURE__ */ jsx(JsonBlock, { label: "What this page sent", value: sent, slot: "sent" }),
+    /* @__PURE__ */ jsx(JsonBlock, { label: "The scopes the values compare read", value: compare.selection, slot: "expanded" }),
+    delivered ? /* @__PURE__ */ jsx(JsonBlock, { label: "The assembler's arguments (both sides)", value: delivered.arguments, slot: "arguments" }) : /* @__PURE__ */ jsx(NoDelivered, {})
+  ] });
 }
 function Summary({ compare }) {
   const counts = compare.counts ?? {};
   const total = (compare.differences ?? []).length;
-  return /* @__PURE__ */ React.createElement("section", { className: "px-4 pt-3" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("section", { className: "px-4 pt-3", children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "rounded-md border px-3 py-2",
         (compare.defects ?? 0) > 0 ? "border-destructive/40 bg-destructive/5" : "border-primary/20 bg-primary/5"
       ),
-      "data-compare-summary": true
-    },
-    /* @__PURE__ */ React.createElement("p", { className: "text-sm font-medium text-foreground" }, (compare.defects ?? 0) > 0 ? `${compare.defects} defect${compare.defects === 1 ? "" : "s"} \u2014 the two systems disagree where they should not.` : total === 0 ? "Identical \u2014 both systems hand the agent the same values." : "No defects \u2014 every difference below has a known reason."),
-    /* @__PURE__ */ React.createElement("p", { className: "mt-0.5 text-xs tabular-nums text-muted-foreground" }, compare.identical_cells ?? 0, " identical value", compare.identical_cells === 1 ? "" : "s", CLASS_ORDER.filter((c) => counts[c]).map((c) => ` \xB7 ${counts[c]} ${CLASS_LOOK[c].label.toLowerCase()}`)),
-    /* @__PURE__ */ React.createElement("p", { className: "mt-1.5 text-xs text-foreground/90" }, compare.ruling),
-    /* @__PURE__ */ React.createElement(
-      "p",
-      {
-        className: cn(
-          "mt-1 text-xs",
-          compare.follow.alert ? "font-medium text-destructive" : "text-muted-foreground"
+      "data-compare-summary": true,
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: (compare.defects ?? 0) > 0 ? `${compare.defects} defect${compare.defects === 1 ? "" : "s"} \u2014 the two systems disagree where they should not.` : total === 0 ? "Identical \u2014 both systems hand the agent the same values." : "No defects \u2014 every difference below has a known reason." }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-xs tabular-nums text-muted-foreground", children: [
+          compare.identical_cells ?? 0,
+          " identical value",
+          compare.identical_cells === 1 ? "" : "s",
+          CLASS_ORDER.filter((c) => counts[c]).map((c) => ` \xB7 ${counts[c]} ${CLASS_LOOK[c].label.toLowerCase()}`)
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-foreground/90", children: compare.ruling }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-1 text-xs",
+              compare.follow.alert ? "font-medium text-destructive" : "text-muted-foreground"
+            ),
+            "data-follow-alert": compare.follow.alert ? "true" : void 0,
+            children: compare.follow.says
+          }
         ),
-        "data-follow-alert": compare.follow.alert ? "true" : void 0
-      },
-      compare.follow.says
-    ),
-    (compare.excluded ?? []).map((e) => /* @__PURE__ */ React.createElement("p", { key: e, className: "mt-1 text-xs text-muted-foreground" }, e)),
-    /* @__PURE__ */ React.createElement(SystemItemsLine, { items: compare.system_items })
-  ));
+        (compare.excluded ?? []).map((e) => /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: e }, e)),
+        /* @__PURE__ */ jsx(SystemItemsLine, { items: compare.system_items })
+      ]
+    }
+  ) });
 }
 function Differences({ differences }) {
   if (differences.length === 0) return null;
   const sorted = [...differences].sort(
     (a, b) => CLASS_ORDER.indexOf(a.difference_class) - CLASS_ORDER.indexOf(b.difference_class)
   );
-  return /* @__PURE__ */ React.createElement("section", { className: "px-4 pt-4" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary" }, "Every difference"), /* @__PURE__ */ React.createElement("ul", { className: "mt-1.5 divide-y divide-border/60 rounded-md border border-border" }, sorted.map((d, i) => {
-    const look = CLASS_LOOK[d.difference_class];
-    return /* @__PURE__ */ React.createElement(
-      "li",
-      {
-        key: `${d.item_id}:${d.scope_id ?? ""}:${i}`,
-        className: "px-2.5 py-2",
-        "data-difference-class": d.difference_class
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "min-w-0 truncate font-mono text-xs font-semibold text-foreground" }, humanizeIdentifier(d.key)), d.scope_name && /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-muted-foreground" }, "on ", d.scope_name), /* @__PURE__ */ React.createElement("span", { className: "flex-1" }), /* @__PURE__ */ React.createElement("span", { className: cn("shrink-0 rounded-full border px-1.5 py-0.5 text-[10px] font-medium", look.className) }, look.label)),
-      /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-xs leading-relaxed text-foreground/90" }, d.why),
-      (d.old_value !== void 0 || d.new_value !== void 0) && show(d.old_value) !== show(d.new_value) && /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 grid gap-1.5 sm:grid-cols-2" }, ["old", "new"].map((p) => {
-        const v = show(p === "old" ? d.old_value : d.new_value);
-        return /* @__PURE__ */ React.createElement("div", { key: p, className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground" }, p === "old" ? "Current system" : "Record store"), /* @__PURE__ */ React.createElement("div", { "data-kind-source": "explicit", className: "whitespace-pre-wrap break-words rounded bg-muted/40 px-2 py-1 font-mono text-[11px] text-foreground/90" }, v || /* @__PURE__ */ React.createElement("span", { className: "italic text-muted-foreground" }, "(not delivered)")));
-      }))
-    );
-  })));
+  return /* @__PURE__ */ jsxs("section", { className: "px-4 pt-4", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary", children: "Every difference" }),
+    /* @__PURE__ */ jsx("ul", { className: "mt-1.5 divide-y divide-border/60 rounded-md border border-border", children: sorted.map((d, i) => {
+      const look = CLASS_LOOK[d.difference_class];
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "px-2.5 py-2",
+          "data-difference-class": d.difference_class,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-mono text-xs font-semibold text-foreground", children: humanizeIdentifier(d.key) }),
+              d.scope_name && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
+                "on ",
+                d.scope_name
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+              /* @__PURE__ */ jsx("span", { className: cn("shrink-0 rounded-full border px-1.5 py-0.5 text-[10px] font-medium", look.className), children: look.label })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs leading-relaxed text-foreground/90", children: d.why }),
+            (d.old_value !== void 0 || d.new_value !== void 0) && show(d.old_value) !== show(d.new_value) && /* @__PURE__ */ jsx("div", { className: "mt-1.5 grid gap-1.5 sm:grid-cols-2", children: ["old", "new"].map((p) => {
+              const v = show(p === "old" ? d.old_value : d.new_value);
+              return /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: p === "old" ? "Current system" : "Record store" }),
+                /* @__PURE__ */ jsx("div", { "data-kind-source": "explicit", className: "whitespace-pre-wrap break-words rounded bg-muted/40 px-2 py-1 font-mono text-[11px] text-foreground/90", children: v || /* @__PURE__ */ jsx("span", { className: "italic text-muted-foreground", children: "(not delivered)" }) })
+              ] }, p);
+            }) })
+          ]
+        },
+        `${d.item_id}:${d.scope_id ?? ""}:${i}`
+      );
+    }) })
+  ] });
 }
 function Checks({ side }) {
   const checks = side.checks ?? [];
   const withheld = side.withheld ?? [];
   if (checks.length === 0 && withheld.length === 0) return null;
-  return /* @__PURE__ */ React.createElement("section", { className: "px-4 pt-4" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary" }, "Checked for you on the new side"), /* @__PURE__ */ React.createElement("ul", { className: "mt-1.5 divide-y divide-border/60 rounded-md border border-border" }, checks.map((c, i) => /* @__PURE__ */ React.createElement("li", { key: `${c.record_id}:${c.via}:${i}`, className: "px-2.5 py-2 text-xs", "data-check-admitted": c.admitted }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate font-medium text-foreground" }, c.name || "A scope you were given"), /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-[10px] text-muted-foreground" }, c.via === "selection" ? "you selected it" : c.via === "entity_tag" ? "tagged to this chat" : c.via === "project_tag" ? "tagged to its project" : c.via), /* @__PURE__ */ React.createElement(Badge, { className: "shrink-0", tone: c.admitted ? "primary" : "neutral" }, c.admitted ? "you may read it" : "not delivered")), c.says && /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-muted-foreground" }, c.says))), withheld.map((w, i) => /* @__PURE__ */ React.createElement("li", { key: `w:${i}`, className: "px-2.5 py-2 text-xs" }, /* @__PURE__ */ React.createElement("span", { className: "font-mono font-semibold text-foreground" }, show(w.key)), w.record_name ? /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, " on ", show(w.record_name)) : null, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, " \u2014 withheld: ", show(w.reason))))));
+  return /* @__PURE__ */ jsxs("section", { className: "px-4 pt-4", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary", children: "Checked for you on the new side" }),
+    /* @__PURE__ */ jsxs("ul", { className: "mt-1.5 divide-y divide-border/60 rounded-md border border-border", children: [
+      checks.map((c, i) => /* @__PURE__ */ jsxs("li", { className: "px-2.5 py-2 text-xs", "data-check-admitted": c.admitted, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-foreground", children: c.name || "A scope you were given" }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: c.via === "selection" ? "you selected it" : c.via === "entity_tag" ? "tagged to this chat" : c.via === "project_tag" ? "tagged to its project" : c.via }),
+          /* @__PURE__ */ jsx(Badge, { className: "shrink-0", tone: c.admitted ? "primary" : "neutral", children: c.admitted ? "you may read it" : "not delivered" })
+        ] }),
+        c.says && /* @__PURE__ */ jsx("p", { className: "mt-1 text-muted-foreground", children: c.says })
+      ] }, `${c.record_id}:${c.via}:${i}`)),
+      withheld.map((w, i) => /* @__PURE__ */ jsxs("li", { className: "px-2.5 py-2 text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold text-foreground", children: show(w.key) }),
+        w.record_name ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          " on ",
+          show(w.record_name)
+        ] }) : null,
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          " \u2014 withheld: ",
+          show(w.reason)
+        ] })
+      ] }, `w:${i}`))
+    ] })
+  ] });
 }
 function AnswerAgentPicker({
   agentId,
   onAgentChange
 }) {
   const chosenName = useAgentName(agentId) ?? null;
-  return /* @__PURE__ */ React.createElement("div", { "data-answer-agent": agentId ?? "" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { "data-answer-agent": agentId ?? "", children: /* @__PURE__ */ jsx(
     AgentListDropdown,
     {
       consumerId: "context-inspector-answer-both",
@@ -289,9 +417,12 @@ function AnswerAgentPicker({
       onSelect: (id) => onAgentChange(id || null),
       label: chosenName ?? "Choose an agent",
       showPinnedAgent: Boolean(agentId),
-      triggerSlot: /* @__PURE__ */ React.createElement(Button, { iconEnd: /* @__PURE__ */ React.createElement(ChevronDown, { className: "text-muted-foreground" }), type: "button", variant: "outline", className: "max-w-full justify-between" }, /* @__PURE__ */ React.createElement("span", { className: "flex min-w-0 items-center gap-1.5" }, /* @__PURE__ */ React.createElement(AGENT_ICON, { className: "h-3 w-3 shrink-0 text-muted-foreground" }), /* @__PURE__ */ React.createElement("span", { className: "truncate" }, chosenName ?? (agentId ? "This agent" : "Choose an agent"))))
+      triggerSlot: /* @__PURE__ */ jsx(Button, { iconEnd: /* @__PURE__ */ jsx(ChevronDown, { className: "text-muted-foreground" }), type: "button", variant: "outline", className: "max-w-full justify-between", children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(AGENT_ICON, { className: "h-3 w-3 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: chosenName ?? (agentId ? "This agent" : "Choose an agent") })
+      ] }) })
     }
-  ));
+  ) });
 }
 function AnswerBoth({
   agentId,
@@ -324,10 +455,17 @@ function AnswerBoth({
     ],
     `${agentId}|${agentName}|${running}|${error}|${result ? "r" : ""}|${question.length}`
   );
-  const heading = /* @__PURE__ */ React.createElement("h3", { className: "flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-primary" }, /* @__PURE__ */ React.createElement(MessageSquareText, { className: "h-3 w-3" }), "Answer on both paths");
-  const picker = onAgentChange ? /* @__PURE__ */ React.createElement(AnswerAgentPicker, { agentId, onAgentChange }) : null;
+  const heading = /* @__PURE__ */ jsxs("h3", { className: "flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-primary", children: [
+    /* @__PURE__ */ jsx(MessageSquareText, { className: "h-3 w-3" }),
+    "Answer on both paths"
+  ] });
+  const picker = onAgentChange ? /* @__PURE__ */ jsx(AnswerAgentPicker, { agentId, onAgentChange }) : null;
   if (!agentId) {
-    return /* @__PURE__ */ React.createElement("section", { className: "px-4 pt-4", "data-answer-both-needs-agent": true }, heading, /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-xs text-muted-foreground" }, picker ? "Choose the agent to compare" : "Open this from a chat with the agent to compare"), picker && /* @__PURE__ */ React.createElement("div", { className: "mt-1.5" }, picker));
+    return /* @__PURE__ */ jsxs("section", { className: "px-4 pt-4", "data-answer-both-needs-agent": true, children: [
+      heading,
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: picker ? "Choose the agent to compare" : "Open this from a chat with the agent to compare" }),
+      picker && /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: picker })
+    ] });
   }
   const run = () => {
     const q = question.trim();
@@ -360,32 +498,64 @@ function AnswerBoth({
       setResult(res.data ?? null);
     });
   };
-  return /* @__PURE__ */ React.createElement("section", { className: "px-4 pt-4", "data-answer-both": true }, heading, picker && /* @__PURE__ */ React.createElement("div", { className: "mt-1.5" }, picker), /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-xs text-muted-foreground" }, "One real turn per system, tools off, nothing saved"), /* @__PURE__ */ React.createElement(
-    Textarea,
-    {
-      value: question,
-      onChange: (e) => setQuestion(e.target.value),
-      placeholder: "Ask the question you want both systems to answer",
-      className: "mt-1.5 min-h-[64px] text-base md:text-sm"
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 flex items-center gap-2" }, /* @__PURE__ */ React.createElement(Button, { icon: running ? /* @__PURE__ */ React.createElement(RefreshCw, { className: "animate-spin" }) : /* @__PURE__ */ React.createElement(GitCompareArrows, null), variant: "primary", onClick: run, disabled: running || !question.trim() }, running ? "Answering twice\u2026" : "Answer on both paths")), error && /* @__PURE__ */ React.createElement("div", { className: "mt-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive-ink" }, error, /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error })), result && /* @__PURE__ */ React.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground" }, result.says), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 grid gap-2 sm:grid-cols-2" }, ["old", "new"].map((p) => {
-    const a = result.answers.find((x) => x.path === p);
-    return /* @__PURE__ */ React.createElement("div", { key: p, className: "min-w-0 rounded-md border border-border px-2.5 py-2", "data-answer-path": p }, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary" }, p === "old" ? "Current system" : "Record store"), /* @__PURE__ */ React.createElement("span", { className: "text-[10px] tabular-nums text-muted-foreground" }, a?.model && !/^[0-9a-f-]{36}$/i.test(a.model) ? a.model : "", typeof a?.duration_ms === "number" ? ` ${formatDurationMs(a.duration_ms, { style: "compact" })}` : "", typeof a?.input_tokens === "number" ? ` \xB7 ${formatCount(a.input_tokens)} tokens in` : "")), a?.error ? /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-xs text-destructive" }, a.error, " ", /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: a.error })) : (
-      // The platform's markdown renderer — the one a chat answer goes through — so an
-      // answer reads as it would in chat, never as raw text with asterisks.
-      /* @__PURE__ */ React.createElement("div", { className: "mt-1 min-w-0 break-words text-sm text-foreground", "data-answer-markdown": true }, /* @__PURE__ */ React.createElement(RichContent, { level: "full", imagePolicy: "ai", source: a?.answer ?? "", hideCopyButton: true }))
-    ), typeof a?.system_byte_length === "number" && /* @__PURE__ */ React.createElement(
-      "p",
+  return /* @__PURE__ */ jsxs("section", { className: "px-4 pt-4", "data-answer-both": true, children: [
+    heading,
+    picker && /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: picker }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "One real turn per system, tools off, nothing saved" }),
+    /* @__PURE__ */ jsx(
+      Textarea,
       {
-        className: "mt-1.5 text-[10px] tabular-nums text-muted-foreground",
-        "data-answer-bytes": p
-      },
-      "Ran on ",
-      a.system_byte_length.toLocaleString(),
-      " bytes of system text",
-      a.context_sha256 ? ` \xB7 context sha ${a.context_sha256.slice(0, 12)}` : ""
-    ), /* @__PURE__ */ React.createElement("div", { className: "mt-1", "data-answer-provenance": p }, /* @__PURE__ */ React.createElement(ProvenanceLine, { stamp: a?.provenance })));
-  }))));
+        value: question,
+        onChange: (e) => setQuestion(e.target.value),
+        placeholder: "Ask the question you want both systems to answer",
+        className: "mt-1.5 min-h-[64px] text-base md:text-sm"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex items-center gap-2", children: /* @__PURE__ */ jsx(Button, { icon: running ? /* @__PURE__ */ jsx(RefreshCw, { className: "animate-spin" }) : /* @__PURE__ */ jsx(GitCompareArrows, {}), variant: "primary", onClick: run, disabled: running || !question.trim(), children: running ? "Answering twice\u2026" : "Answer on both paths" }) }),
+    error && /* @__PURE__ */ jsxs("div", { className: "mt-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive-ink", children: [
+      error,
+      /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error })
+    ] }),
+    result && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: result.says }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1.5 grid gap-2 sm:grid-cols-2", children: ["old", "new"].map((p) => {
+        const a = result.answers.find((x) => x.path === p);
+        return /* @__PURE__ */ jsxs("div", { className: "min-w-0 rounded-md border border-border px-2.5 py-2", "data-answer-path": p, children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary", children: p === "old" ? "Current system" : "Record store" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-[10px] tabular-nums text-muted-foreground", children: [
+              a?.model && !/^[0-9a-f-]{36}$/i.test(a.model) ? a.model : "",
+              typeof a?.duration_ms === "number" ? ` ${formatDurationMs(a.duration_ms, { style: "compact" })}` : "",
+              typeof a?.input_tokens === "number" ? ` \xB7 ${formatCount(a.input_tokens)} tokens in` : ""
+            ] })
+          ] }),
+          a?.error ? /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-destructive", children: [
+            a.error,
+            " ",
+            /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: a.error })
+          ] }) : (
+            // The platform's markdown renderer — the one a chat answer goes through — so an
+            // answer reads as it would in chat, never as raw text with asterisks.
+            /* @__PURE__ */ jsx("div", { className: "mt-1 min-w-0 break-words text-sm text-foreground", "data-answer-markdown": true, children: /* @__PURE__ */ jsx(RichContent, { level: "full", imagePolicy: "ai", source: a?.answer ?? "", hideCopyButton: true }) })
+          ),
+          typeof a?.system_byte_length === "number" && /* @__PURE__ */ jsxs(
+            "p",
+            {
+              className: "mt-1.5 text-[10px] tabular-nums text-muted-foreground",
+              "data-answer-bytes": p,
+              children: [
+                "Ran on ",
+                a.system_byte_length.toLocaleString(),
+                " bytes of system text",
+                a.context_sha256 ? ` \xB7 context sha ${a.context_sha256.slice(0, 12)}` : ""
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "mt-1", "data-answer-provenance": p, children: /* @__PURE__ */ jsx(ProvenanceLine, { stamp: a?.provenance }) })
+        ] }, p);
+      }) })
+    ] })
+  ] });
 }
 function ContextCompareView({
   conversationId,
@@ -475,54 +645,101 @@ function ContextCompareView({
     },
     `${status}|${error}|${compare ? `${compare.defects}:${(compare.differences ?? []).length}:${compare.old.block?.length}:${compare.new.block?.length}` : ""}|${focus?.key ?? ""}`
   );
-  return /* @__PURE__ */ React.createElement("div", { className: "flex min-h-0 flex-1 flex-col", "data-context-compare": true }, /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-4 py-1.5" }, /* @__PURE__ */ React.createElement(
-    Chip,
-    {
-      tone: "primary",
-      icon: /* @__PURE__ */ React.createElement(GitCompareArrows, null),
-      label: status === "loading" ? "Resolving both\u2026" : "Current system \xB7 Record store"
-    }
-  ), /* @__PURE__ */ React.createElement("span", { className: "flex-1" }), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      icon: /* @__PURE__ */ React.createElement(RefreshCw, { className: cn("h-3 w-3", status === "loading" && "animate-spin") }),
-      variant: "quiet",
-      onClick: refresh,
-      disabled: status === "loading"
-    },
-    "Refresh"
-  )), /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto pb-4 scrollbar-thin-auto" }, status === "loading" && !data && /* @__PURE__ */ React.createElement("div", { className: "space-y-2.5 px-4 py-4" }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-10 w-full" }), /* @__PURE__ */ React.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-40 flex-1" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-40 flex-1" }))), status === "error" && /* @__PURE__ */ React.createElement("div", { className: "mx-4 mt-4 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-sm font-medium text-destructive" }, /* @__PURE__ */ React.createElement(AlertTriangle, { className: "h-4 w-4 shrink-0" }), "Comparison unavailable"), /* @__PURE__ */ React.createElement("div", { className: "mt-1 break-words text-xs text-destructive/90" }, error), /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error })), data && !compare && /* @__PURE__ */ React.createElement("div", { className: "mx-4 mt-4 rounded-md border border-border bg-muted/30 px-3 py-2.5 text-xs text-foreground" }, "This server version has no compare mode yet"), compare && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tabs, { value: activeTab, onValueChange: chooseTab, className: "pt-2", "data-compare-tabs": activeTab }, /* @__PURE__ */ React.createElement("div", { className: "overflow-x-auto px-4 scrollbar-none" }, /* @__PURE__ */ React.createElement(TabsList, { className: "w-max flex-nowrap" }, /* @__PURE__ */ React.createElement(TabsTrigger, { value: "diff", className: "shrink-0 whitespace-nowrap", "data-compare-tab": "diff" }, "Diff"), /* @__PURE__ */ React.createElement(TabsTrigger, { value: "today", className: "shrink-0 whitespace-nowrap", "data-compare-tab": "today" }, "What the model gets today"), /* @__PURE__ */ React.createElement(TabsTrigger, { value: "store", className: "shrink-0 whitespace-nowrap", "data-compare-tab": "store" }, "Record store"), /* @__PURE__ */ React.createElement(TabsTrigger, { value: "selection", className: "shrink-0 whitespace-nowrap", "data-compare-tab": "selection" }, "Selection"))), focus && /* @__PURE__ */ React.createElement("p", { className: "px-4 pt-2 text-xs text-muted-foreground", "data-compare-focus": focus.key }, "Showing ", focus.label, " only; the model always gets the whole turn"), /* @__PURE__ */ React.createElement(TabsContent, { value: "diff", className: "mt-0" }, /* @__PURE__ */ React.createElement(DiffTab, { compare, delivered, focus })), /* @__PURE__ */ React.createElement(TabsContent, { value: "today", className: "mt-0" }, /* @__PURE__ */ React.createElement(
-    FedSide,
-    {
-      side: delivered?.today,
-      values: compare.old,
-      valuesTitle: "Values the current system answered",
-      says: delivered?.says,
-      focus
-    }
-  )), /* @__PURE__ */ React.createElement(TabsContent, { value: "store", className: "mt-0" }, /* @__PURE__ */ React.createElement(
-    FedSide,
-    {
-      side: delivered ? delivered.record_store ?? {
-        path: "record_store",
-        available: false,
-        unavailable_reason: "The server ran no record-store side for this preview."
-      } : void 0,
-      values: compare.new,
-      valuesTitle: "Values the record store answered",
-      says: delivered?.says,
-      focus
-    }
-  ), /* @__PURE__ */ React.createElement(Checks, { side: compare.new })), /* @__PURE__ */ React.createElement(TabsContent, { value: "selection", className: "mt-0" }, /* @__PURE__ */ React.createElement(SelectionTab, { sent: selection, compare, delivered }))), /* @__PURE__ */ React.createElement(
-    AnswerBoth,
-    {
-      key: agentId ?? "no-agent",
-      agentId,
-      onAgentChange,
-      conversationId,
-      selection
-    }
-  ))));
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", "data-context-compare": true, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-4 py-1.5", children: [
+      /* @__PURE__ */ jsx(
+        Chip,
+        {
+          tone: "primary",
+          icon: /* @__PURE__ */ jsx(GitCompareArrows, {}),
+          label: status === "loading" ? "Resolving both\u2026" : "Current system \xB7 Record store"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(RefreshCw, { className: cn("h-3 w-3", status === "loading" && "animate-spin") }),
+          variant: "quiet",
+          onClick: refresh,
+          disabled: status === "loading",
+          children: "Refresh"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto pb-4 scrollbar-thin-auto", children: [
+      status === "loading" && !data && /* @__PURE__ */ jsxs("div", { className: "space-y-2.5 px-4 py-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-40 flex-1" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-40 flex-1" })
+        ] })
+      ] }),
+      status === "error" && /* @__PURE__ */ jsxs("div", { className: "mx-4 mt-4 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-destructive", children: [
+          /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 shrink-0" }),
+          "Comparison unavailable"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 break-words text-xs text-destructive/90", children: error }),
+        /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error })
+      ] }),
+      data && !compare && /* @__PURE__ */ jsx("div", { className: "mx-4 mt-4 rounded-md border border-border bg-muted/30 px-3 py-2.5 text-xs text-foreground", children: "This server version has no compare mode yet" }),
+      compare && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Tabs, { value: activeTab, onValueChange: chooseTab, className: "pt-2", "data-compare-tabs": activeTab, children: [
+          /* @__PURE__ */ jsx("div", { className: "overflow-x-auto px-4 scrollbar-none", children: /* @__PURE__ */ jsxs(TabsList, { className: "w-max flex-nowrap", children: [
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "diff", className: "shrink-0 whitespace-nowrap", "data-compare-tab": "diff", children: "Diff" }),
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "today", className: "shrink-0 whitespace-nowrap", "data-compare-tab": "today", children: "What the model gets today" }),
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "store", className: "shrink-0 whitespace-nowrap", "data-compare-tab": "store", children: "Record store" }),
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "selection", className: "shrink-0 whitespace-nowrap", "data-compare-tab": "selection", children: "Selection" })
+          ] }) }),
+          focus && /* @__PURE__ */ jsxs("p", { className: "px-4 pt-2 text-xs text-muted-foreground", "data-compare-focus": focus.key, children: [
+            "Showing ",
+            focus.label,
+            " only; the model always gets the whole turn"
+          ] }),
+          /* @__PURE__ */ jsx(TabsContent, { value: "diff", className: "mt-0", children: /* @__PURE__ */ jsx(DiffTab, { compare, delivered, focus }) }),
+          /* @__PURE__ */ jsx(TabsContent, { value: "today", className: "mt-0", children: /* @__PURE__ */ jsx(
+            FedSide,
+            {
+              side: delivered?.today,
+              values: compare.old,
+              valuesTitle: "Values the current system answered",
+              says: delivered?.says,
+              focus
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(TabsContent, { value: "store", className: "mt-0", children: [
+            /* @__PURE__ */ jsx(
+              FedSide,
+              {
+                side: delivered ? delivered.record_store ?? {
+                  path: "record_store",
+                  available: false,
+                  unavailable_reason: "The server ran no record-store side for this preview."
+                } : void 0,
+                values: compare.new,
+                valuesTitle: "Values the record store answered",
+                says: delivered?.says,
+                focus
+              }
+            ),
+            /* @__PURE__ */ jsx(Checks, { side: compare.new })
+          ] }),
+          /* @__PURE__ */ jsx(TabsContent, { value: "selection", className: "mt-0", children: /* @__PURE__ */ jsx(SelectionTab, { sent: selection, compare, delivered }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          AnswerBoth,
+          {
+            agentId,
+            onAgentChange,
+            conversationId,
+            selection
+          },
+          agentId ?? "no-agent"
+        )
+      ] })
+    ] })
+  ] });
 }
 export {
   ContextCompareView,