@ai-matrx/chat 0.5.0 → 0.5.3

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

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { AlertTriangle, Braces, FileCode2, RefreshCw } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
@@ -53,18 +54,31 @@ function VariableGroup({
 }) {
   const keys = Object.keys(vars ?? {});
   if (keys.length === 0) return null;
-  return /* @__PURE__ */ React.createElement("section", { className: "px-4 pt-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-2" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary" }, title), /* @__PURE__ */ React.createElement("span", { className: "text-[10px] text-muted-foreground" }, hint)), /* @__PURE__ */ React.createElement("ul", { className: "mt-1.5 divide-y divide-border/60 rounded-md border border-border" }, keys.sort().map((key) => {
-    const f = varFields(vars[key]);
-    return /* @__PURE__ */ React.createElement("li", { key, className: "group/var relative px-2.5 py-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 pr-7" }, /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate font-mono text-xs font-semibold text-foreground" }, key), f.source && /* @__PURE__ */ React.createElement(Chip, { className: "shrink-0", tone: "primary", label: f.source })), /* @__PURE__ */ React.createElement("div", { className: "mt-1 whitespace-pre-wrap break-words rounded bg-muted/40 px-2 py-1 font-mono text-[11px] leading-relaxed text-foreground/90" }, f.value || /* @__PURE__ */ React.createElement("span", { className: "italic text-muted-foreground" }, "(empty)")), /* @__PURE__ */ React.createElement(
-      CopyButtons,
-      {
-        label: "Copy",
-        human: f.value,
-        size: "xs",
-        className: "absolute top-1 right-1 z-10 opacity-0 transition-opacity pointer-coarse:opacity-100 group-hover/var:opacity-100"
-      }
-    ));
-  })));
+  return /* @__PURE__ */ jsxs("section", { className: "px-4 pt-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary", children: title }),
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: hint })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "mt-1.5 divide-y divide-border/60 rounded-md border border-border", children: keys.sort().map((key) => {
+      const f = varFields(vars[key]);
+      return /* @__PURE__ */ jsxs("li", { className: "group/var relative px-2.5 py-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pr-7", children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-xs font-semibold text-foreground", children: key }),
+          f.source && /* @__PURE__ */ jsx(Chip, { className: "shrink-0", tone: "primary", label: f.source })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 whitespace-pre-wrap break-words rounded bg-muted/40 px-2 py-1 font-mono text-[11px] leading-relaxed text-foreground/90", children: f.value || /* @__PURE__ */ jsx("span", { className: "italic text-muted-foreground", children: "(empty)" }) }),
+        /* @__PURE__ */ jsx(
+          CopyButtons,
+          {
+            label: "Copy",
+            human: f.value,
+            size: "xs",
+            className: "absolute top-1 right-1 z-10 opacity-0 transition-opacity pointer-coarse:opacity-100 group-hover/var:opacity-100"
+          }
+        )
+      ] }, key);
+    }) })
+  ] });
 }
 function traceFields(t) {
   if (!t || typeof t !== "object") return null;
@@ -105,7 +119,43 @@ function BindingTraces({ traces }) {
     [traces]
   );
   if (rows.length === 0) return null;
-  return /* @__PURE__ */ React.createElement("section", { className: "px-4 pt-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-2" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary" }, "Why this value"), /* @__PURE__ */ React.createElement("span", { className: "text-[10px] text-muted-foreground" }, "one row per resolution \u2014 names only, never the value")), /* @__PURE__ */ React.createElement("ul", { className: "mt-1.5 divide-y divide-border/60 rounded-md border border-border" }, rows.map((r, i) => /* @__PURE__ */ React.createElement("li", { key: `${r.target}:${r.key}:${i}`, className: "px-2.5 py-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate font-mono text-xs font-semibold text-foreground" }, humanizeIdentifier(r.key)), /* @__PURE__ */ React.createElement("span", { className: "shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground" }, r.target === "context_policy" ? "slot" : "variable"), /* @__PURE__ */ React.createElement(Badge, { className: "shrink-0", tone: "primary" }, r.outcome)), /* @__PURE__ */ React.createElement("div", { className: "mt-1 space-y-0.5 text-[11px] leading-relaxed text-foreground/90" }, r.winner && /* @__PURE__ */ React.createElement("p", null, "Took", " ", /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, rungWords(r.winner)), "."), r.losers.map((l) => /* @__PURE__ */ React.createElement("p", { key: l.rung, className: "text-muted-foreground" }, "Did not take", " ", /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, rungWords(l.rung)), l.why ? ` \u2014 ${l.why}.` : ".")), r.source && !r.winner && /* @__PURE__ */ React.createElement("p", null, "From ", /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, r.source), r.itemKey ? ` (context item ${r.itemKey})` : "", "."), r.scopeCount !== null && r.scopeCount > 1 && /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground" }, r.scopeCount, " active scopes offered a value for this name."))))));
+  return /* @__PURE__ */ jsxs("section", { className: "px-4 pt-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary", children: "Why this value" }),
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "one row per resolution \u2014 names only, never the value" })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "mt-1.5 divide-y divide-border/60 rounded-md border border-border", children: rows.map((r, i) => /* @__PURE__ */ jsxs("li", { className: "px-2.5 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-xs font-semibold text-foreground", children: humanizeIdentifier(r.key) }),
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: r.target === "context_policy" ? "slot" : "variable" }),
+        /* @__PURE__ */ jsx(Badge, { className: "shrink-0", tone: "primary", children: r.outcome })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 space-y-0.5 text-[11px] leading-relaxed text-foreground/90", children: [
+        r.winner && /* @__PURE__ */ jsxs("p", { children: [
+          "Took",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: rungWords(r.winner) }),
+          "."
+        ] }),
+        r.losers.map((l) => /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
+          "Did not take",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: rungWords(l.rung) }),
+          l.why ? ` \u2014 ${l.why}.` : "."
+        ] }, l.rung)),
+        r.source && !r.winner && /* @__PURE__ */ jsxs("p", { children: [
+          "From ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: r.source }),
+          r.itemKey ? ` (context item ${r.itemKey})` : "",
+          "."
+        ] }),
+        r.scopeCount !== null && r.scopeCount > 1 && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
+          r.scopeCount,
+          " active scopes offered a value for this name."
+        ] })
+      ] })
+    ] }, `${r.target}:${r.key}:${i}`)) })
+  ] });
 }
 function buildCopyAllText(data) {
   const parts = [];
@@ -141,36 +191,60 @@ function ResolvedView({
     () => data ? buildCopyAllText(data) : "",
     [data]
   );
-  return /* @__PURE__ */ React.createElement("div", { className: "flex min-h-0 flex-1 flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-4 py-1.5" }, /* @__PURE__ */ React.createElement(Badge, { tone: status === "error" ? "destructive" : "primary" }, status === "loading" ? "Resolving\u2026" : "Server truth"), /* @__PURE__ */ React.createElement("span", { className: "flex-1" }), copyAllText && /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: "relative h-7 w-7 shrink-0",
-      title: "Copy everything the agent receives"
-    },
-    /* @__PURE__ */ React.createElement(
-      CopyButtons,
-      {
-        label: "Copy all for AI",
-        human: copyAllText,
-        size: "sm",
-        className: "absolute top-1 right-1 z-10"
-      }
-    )
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      icon: /* @__PURE__ */ React.createElement(
-        RefreshCw,
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-4 py-1.5", children: [
+      /* @__PURE__ */ jsx(Badge, { tone: status === "error" ? "destructive" : "primary", children: status === "loading" ? "Resolving\u2026" : "Server truth" }),
+      /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+      copyAllText && /* @__PURE__ */ jsx(
+        "span",
         {
-          className: cn("h-3 w-3", status === "loading" && "animate-spin")
+          className: "relative h-7 w-7 shrink-0",
+          title: "Copy everything the agent receives",
+          children: /* @__PURE__ */ jsx(
+            CopyButtons,
+            {
+              label: "Copy all for AI",
+              human: copyAllText,
+              size: "sm",
+              className: "absolute top-1 right-1 z-10"
+            }
+          )
         }
       ),
-      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-4 w-2/3" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-28 w-full" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-1/3" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-16 w-full" })), 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" }), "Preview unavailable"), /* @__PURE__ */ React.createElement("div", { className: "mt-1 break-words text-xs text-destructive/90" }, error), /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error })), data && /* @__PURE__ */ React.createElement(ResolvedBody, { data, agentId, load: preview.loadView })));
+      /* @__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-4 w-2/3" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-28 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-16 w-full" })
+      ] }),
+      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" }),
+          "Preview unavailable"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 break-words text-xs text-destructive/90", children: error }),
+        /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error })
+      ] }),
+      data && /* @__PURE__ */ jsx(ResolvedBody, { data, agentId, load: preview.loadView })
+    ] })
+  ] });
 }
 function flattenScopeLabels(raw) {
   if (!raw || typeof raw !== "object") return [];
@@ -189,55 +263,93 @@ function ResolvedBody({
   );
   const block = data.injected_block ?? null;
   const receipt = isContextReceiptData(data.receipt) ? data.receipt : null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, receipt && /* @__PURE__ */ React.createElement("section", { className: "px-4 pt-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-2" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary" }, "Next turn"), /* @__PURE__ */ React.createElement("span", { className: "text-[10px] tabular-nums text-muted-foreground" }, receiptSummary(receipt))), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 overflow-hidden rounded-md border border-border" }, /* @__PURE__ */ React.createElement(MessageContextReceiptTable, { receipt, load }))), /* @__PURE__ */ React.createElement("section", { className: "px-4 pt-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-2" }, /* @__PURE__ */ React.createElement("h3", { className: "flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-primary" }, /* @__PURE__ */ React.createElement(FileCode2, { className: "h-3 w-3" }), "Injected block"), typeof data.block_byte_length === "number" && data.block_byte_length > 0 && /* @__PURE__ */ React.createElement("span", { className: "text-[10px] tabular-nums text-muted-foreground" }, data.block_byte_length.toLocaleString(), " bytes", data.block_producer ? ` \xB7 ${data.block_producer}` : "")), block ? /* @__PURE__ */ React.createElement("div", { className: "group/block relative mt-1.5" }, /* @__PURE__ */ React.createElement("pre", { className: "whitespace-pre-wrap break-words rounded-md border border-primary/20 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 would be injected \u2014 no organization or scopes active."), scopeLabels.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 flex flex-wrap gap-1" }, scopeLabels.map((label) => /* @__PURE__ */ React.createElement(Chip, { key: label, tone: "primary", label })))), /* @__PURE__ */ React.createElement(
-    VariableGroup,
-    {
-      title: "Injected directly",
-      hint: "in the prompt every turn",
-      vars: data.variables?.direct
-    }
-  ), /* @__PURE__ */ React.createElement(
-    VariableGroup,
-    {
-      title: "Tool-accessible",
-      hint: "fetched on demand",
-      vars: data.variables?.tool_accessible
-    }
-  ), /* @__PURE__ */ React.createElement(
-    VariableGroup,
-    {
-      title: "Searchable",
-      hint: "via search only",
-      vars: data.variables?.searchable
-    }
-  ), agentId && data.bindings && /* @__PURE__ */ React.createElement("section", { className: "px-4 pt-4" }, /* @__PURE__ */ React.createElement("h3", { className: "flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-primary" }, /* @__PURE__ */ React.createElement(Braces, { className: "h-3 w-3" }), "Agent variable & slot fill"), /* @__PURE__ */ React.createElement(
-    VariableGroup,
-    {
-      title: "Variables",
-      hint: "scope-filled",
-      vars: data.bindings.variables
-    }
-  ), /* @__PURE__ */ React.createElement(
-    VariableGroup,
-    {
-      title: "Context policies",
-      hint: "scope-filled",
-      vars: data.bindings.context
-    }
-  ), /* @__PURE__ */ React.createElement(
-    BindingTraces,
-    {
-      traces: data.bindings.traces
-    }
-  )));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    receipt && /* @__PURE__ */ jsxs("section", { className: "px-4 pt-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold uppercase tracking-wider text-primary", children: "Next turn" }),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] tabular-nums text-muted-foreground", children: receiptSummary(receipt) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1.5 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(MessageContextReceiptTable, { receipt, load }) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "px-4 pt-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsxs("h3", { className: "flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-primary", children: [
+          /* @__PURE__ */ jsx(FileCode2, { className: "h-3 w-3" }),
+          "Injected block"
+        ] }),
+        typeof data.block_byte_length === "number" && data.block_byte_length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] tabular-nums text-muted-foreground", children: [
+          data.block_byte_length.toLocaleString(),
+          " bytes",
+          data.block_producer ? ` \xB7 ${data.block_producer}` : ""
+        ] })
+      ] }),
+      block ? /* @__PURE__ */ jsxs("div", { className: "group/block relative mt-1.5", children: [
+        /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap break-words rounded-md border border-primary/20 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 would be injected \u2014 no organization or scopes active." }),
+      scopeLabels.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex flex-wrap gap-1", children: scopeLabels.map((label) => /* @__PURE__ */ jsx(Chip, { tone: "primary", label }, label)) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      VariableGroup,
+      {
+        title: "Injected directly",
+        hint: "in the prompt every turn",
+        vars: data.variables?.direct
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      VariableGroup,
+      {
+        title: "Tool-accessible",
+        hint: "fetched on demand",
+        vars: data.variables?.tool_accessible
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      VariableGroup,
+      {
+        title: "Searchable",
+        hint: "via search only",
+        vars: data.variables?.searchable
+      }
+    ),
+    agentId && data.bindings && /* @__PURE__ */ jsxs("section", { className: "px-4 pt-4", children: [
+      /* @__PURE__ */ jsxs("h3", { className: "flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-primary", children: [
+        /* @__PURE__ */ jsx(Braces, { className: "h-3 w-3" }),
+        "Agent variable & slot fill"
+      ] }),
+      /* @__PURE__ */ jsx(
+        VariableGroup,
+        {
+          title: "Variables",
+          hint: "scope-filled",
+          vars: data.bindings.variables
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        VariableGroup,
+        {
+          title: "Context policies",
+          hint: "scope-filled",
+          vars: data.bindings.context
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        BindingTraces,
+        {
+          traces: data.bindings.traces
+        }
+      )
+    ] })
+  ] });
 }
 function entryChars(value) {
   if (value == null) return 0;
@@ -304,25 +416,28 @@ function ContextPreviewPanel({
       conversation_agent_id: agentId
     });
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     SurfaceRuntimeProvider,
     {
       surfaceName: CONTEXT_PREVIEW_SURFACE_NAME,
-      getScope
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex h-full min-h-0 flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center gap-1 border-b border-border px-3 py-1.5" }, /* @__PURE__ */ React.createElement(
-      SegmentedControl,
-      {
-        "aria-label": "Context view",
-        value: view,
-        onValueChange: setView,
-        data: [
-          { value: "resolved", label: "Resolved" },
-          { value: "compare", label: "Old vs new" },
-          { value: "attached", label: "Attached this turn" }
-        ]
-      }
-    )), view === "resolved" ? /* @__PURE__ */ React.createElement(ResolvedView, { preview, agentId }) : view === "compare" ? /* @__PURE__ */ React.createElement(ContextCompareView, { conversationId, agentId }) : conversationId ? /* @__PURE__ */ React.createElement(AttachedContextSection, { conversationId }) : /* @__PURE__ */ React.createElement("div", { className: "px-4 py-10 text-center text-sm text-muted-foreground" }, "Attachments appear once a conversation exists."))
+      getScope,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1 border-b border-border px-3 py-1.5", children: /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            "aria-label": "Context view",
+            value: view,
+            onValueChange: setView,
+            data: [
+              { value: "resolved", label: "Resolved" },
+              { value: "compare", label: "Old vs new" },
+              { value: "attached", label: "Attached this turn" }
+            ]
+          }
+        ) }),
+        view === "resolved" ? /* @__PURE__ */ jsx(ResolvedView, { preview, agentId }) : view === "compare" ? /* @__PURE__ */ jsx(ContextCompareView, { conversationId, agentId }) : conversationId ? /* @__PURE__ */ jsx(AttachedContextSection, { conversationId }) : /* @__PURE__ */ jsx("div", { className: "px-4 py-10 text-center text-sm text-muted-foreground", children: "Attachments appear once a conversation exists." })
+      ] })
+    }
   );
 }
 export {

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

@@ -1,21 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
 import { humanizeIdentifier } from "@ai-matrx/kit/text-case";
 function SystemItemsLine({ items }) {
   if (!items) return null;
   const named = items.named ?? [];
   const withheld = items.withheld ?? [];
-  return /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 text-xs", "data-compare-system-items": named.length }, /* @__PURE__ */ React.createElement("p", { className: "font-medium text-foreground" }, "System items"), named.length === 0 ? /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground" }, "None delivered \u2014 nothing named one.") : /* @__PURE__ */ React.createElement("ul", { className: "mt-0.5 space-y-0.5" }, named.map((n) => /* @__PURE__ */ React.createElement(
-    "li",
-    {
-      key: n.context_item_id ?? n.key ?? "",
-      className: "text-muted-foreground",
-      "data-system-item": n.key ?? ""
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "text-foreground" }, humanizeIdentifier(n.key ?? "")),
-    " \u2014 named by ",
-    (n.named_by ?? []).join(", "),
-    " \xB7 ",
-    n.old && n.new ? "both sides" : n.old ? "current system only" : "record store only"
-  ))), withheld.length > 0 ? /* @__PURE__ */ React.createElement("p", { className: "mt-0.5 text-muted-foreground", "data-system-items-withheld": withheld.length }, withheld.length, " unnamed System item", withheld.length === 1 ? " was" : "s were", " not fed and not evaluated: ", withheld.join(", "), ".") : null);
+  return /* @__PURE__ */ jsxs("div", { className: "mt-1.5 text-xs", "data-compare-system-items": named.length, children: [
+    /* @__PURE__ */ jsx("p", { className: "font-medium text-foreground", children: "System items" }),
+    named.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "None delivered \u2014 nothing named one." }) : /* @__PURE__ */ jsx("ul", { className: "mt-0.5 space-y-0.5", children: named.map((n) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "text-muted-foreground",
+        "data-system-item": n.key ?? "",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-foreground", children: humanizeIdentifier(n.key ?? "") }),
+          " \u2014 named by ",
+          (n.named_by ?? []).join(", "),
+          " \xB7 ",
+          n.old && n.new ? "both sides" : n.old ? "current system only" : "record store only"
+        ]
+      },
+      n.context_item_id ?? n.key ?? ""
+    )) }),
+    withheld.length > 0 ? /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-muted-foreground", "data-system-items-withheld": withheld.length, children: [
+      withheld.length,
+      " unnamed System item",
+      withheld.length === 1 ? " was" : "s were",
+      " not fed and not evaluated: ",
+      withheld.join(", "),
+      "."
+    ] }) : null
+  ] });
 }
 export {
   SystemItemsLine

package/dist/agents/components/context-preview/inspector/ContextInspector.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { Alert, AlertDescription } from "@ai-matrx/design-system";
 import { MillerColumnsCore } from "../../../../context/sources/scopes.js";
@@ -192,37 +193,68 @@ function ContextInspector({
       ]
     })
   );
-  return /* @__PURE__ */ React.createElement("div", { className: "flex min-h-0 flex-1 flex-col gap-2", "data-context-inspector": true }, /* @__PURE__ */ React.createElement(
-    MillerColumnsCore,
-    {
-      universe,
-      engine,
-      mode: "filter",
-      variant: "full",
-      includeEngagements: false,
-      className: "h-[300px] shrink-0"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "flex h-9 min-w-0 items-center rounded-md border border-dashed border-border bg-muted/30 px-2.5",
-      "data-inspector-value": chosenItem ? chosenValue ?? "" : void 0,
-      "aria-label": "Context item value"
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "shrink-0 pr-1.5 text-[11px] text-muted-foreground" }, "Value"),
-    chosenItem ? chosenValue !== null ? /* @__PURE__ */ React.createElement("span", { className: "truncate font-mono text-sm text-foreground", title: chosenValue }, chosenItem.item.display_name, ": ", chosenValue) : /* @__PURE__ */ React.createElement("span", { className: "truncate text-sm italic text-muted-foreground" }, chosenItem.item.display_name, " has no value on this scope") : /* @__PURE__ */ React.createElement("span", { className: "truncate text-sm text-muted-foreground" }, "Choose a context item")
-  ), outsideTree && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground", "data-inspector-outside-tree": true }, "Not your organization: columns can't show it, preview can"), errors.map((e) => /* @__PURE__ */ React.createElement(Alert, { key: e, variant: "destructive" }, /* @__PURE__ */ React.createElement(AlertDescription, { className: "text-xs" }, e))), !selection.org && !needsHome && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground", "data-inspector-empty": true }, "Choose an organization to preview what its agents get"), universe.treeStatus === "ready" && typeIsEmpty && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground" }, "This scope type has no scopes yet"), caption && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground", "data-inspector-caption": request?.depth }, caption, request && request.depth !== "org" && request.depth !== "scopeType" && selection.scope && /* @__PURE__ */ React.createElement(React.Fragment, null, " ", "Open it in", " ", /* @__PURE__ */ React.createElement("a", { className: "underline underline-offset-2", href: `/scopes/s/${selection.scope}`, target: "_blank", rel: "noreferrer" }, "the current system"), " ", "or", " ", /* @__PURE__ */ React.createElement("a", { className: "underline underline-offset-2", href: `/o/${selection.scope}`, target: "_blank", rel: "noreferrer" }, "the record store's copy"), ".")), previewReady && request && !typeIsEmpty && /* @__PURE__ */ React.createElement("div", { className: "flex min-h-[24rem] flex-1 flex-col rounded-md border border-border" }, /* @__PURE__ */ React.createElement(
-    ContextCompareView,
-    {
-      key: `${request.depth}:${JSON.stringify(request.selection)}`,
-      selection: request.selection,
-      agentId,
-      onAgentChange,
-      focus,
-      tab,
-      onTabChange: setTab
-    }
-  )));
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", "data-context-inspector": true, children: [
+    /* @__PURE__ */ jsx(
+      MillerColumnsCore,
+      {
+        universe,
+        engine,
+        mode: "filter",
+        variant: "full",
+        includeEngagements: false,
+        className: "h-[300px] shrink-0"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex h-9 min-w-0 items-center rounded-md border border-dashed border-border bg-muted/30 px-2.5",
+        "data-inspector-value": chosenItem ? chosenValue ?? "" : void 0,
+        "aria-label": "Context item value",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 pr-1.5 text-[11px] text-muted-foreground", children: "Value" }),
+          chosenItem ? chosenValue !== null ? /* @__PURE__ */ jsxs("span", { className: "truncate font-mono text-sm text-foreground", title: chosenValue, children: [
+            chosenItem.item.display_name,
+            ": ",
+            chosenValue
+          ] }) : /* @__PURE__ */ jsxs("span", { className: "truncate text-sm italic text-muted-foreground", children: [
+            chosenItem.item.display_name,
+            " has no value on this scope"
+          ] }) : /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-muted-foreground", children: "Choose a context item" })
+        ]
+      }
+    ),
+    outsideTree && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", "data-inspector-outside-tree": true, children: "Not your organization: columns can't show it, preview can" }),
+    errors.map((e) => /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { className: "text-xs", children: e }) }, e)),
+    !selection.org && !needsHome && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", "data-inspector-empty": true, children: "Choose an organization to preview what its agents get" }),
+    universe.treeStatus === "ready" && typeIsEmpty && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "This scope type has no scopes yet" }),
+    caption && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", "data-inspector-caption": request?.depth, children: [
+      caption,
+      request && request.depth !== "org" && request.depth !== "scopeType" && selection.scope && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        "Open it in",
+        " ",
+        /* @__PURE__ */ jsx("a", { className: "underline underline-offset-2", href: `/scopes/s/${selection.scope}`, target: "_blank", rel: "noreferrer", children: "the current system" }),
+        " ",
+        "or",
+        " ",
+        /* @__PURE__ */ jsx("a", { className: "underline underline-offset-2", href: `/o/${selection.scope}`, target: "_blank", rel: "noreferrer", children: "the record store's copy" }),
+        "."
+      ] })
+    ] }),
+    previewReady && request && !typeIsEmpty && /* @__PURE__ */ jsx("div", { className: "flex min-h-[24rem] flex-1 flex-col rounded-md border border-border", children: /* @__PURE__ */ jsx(
+      ContextCompareView,
+      {
+        selection: request.selection,
+        agentId,
+        onAgentChange,
+        focus,
+        tab,
+        onTabChange: setTab
+      },
+      `${request.depth}:${JSON.stringify(request.selection)}`
+    ) })
+  ] });
 }
 export {
   ContextInspector,