@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/chat/sandbox-insight/SandboxCanvasBody.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Box, FolderTree, ListTree, TerminalSquare } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
@@ -87,75 +88,89 @@ function SandboxCanvasBody({
   const name = instance ? sandboxDisplayName({ ...instance, id: instance.id ?? sandboxRowId }) : fallbackName?.trim() || sandboxDisplayName({ id: sandboxRowId });
   const tier = instance?.tier ?? instance?.config?.tier ?? null;
   const template = instance?.config?.template ?? null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-testid": "sandbox-canvas-body",
-      className: cn("flex h-full min-h-0 flex-col overflow-hidden", className)
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 items-center gap-2 px-3 py-1.5" }, /* @__PURE__ */ React.createElement(Box, { className: "size-4 shrink-0 text-emerald-500" }), /* @__PURE__ */ React.createElement(
-      "p",
-      {
-        "data-testid": "sandbox-identity",
-        className: "min-w-0 shrink-0 text-xs font-medium text-foreground",
-        title: name
-      },
-      name
-    ), /* @__PURE__ */ React.createElement("p", { className: "flex min-w-0 flex-wrap items-center gap-1.5 text-[11px] text-muted-foreground" }, /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        "data-testid": "sandbox-status-pill",
-        className: cn(
-          "rounded px-1.5 py-0.5 text-[10px] font-medium",
-          status ? statusPillClasses(status) : "bg-muted text-muted-foreground"
-        )
-      },
-      status ? STATUS_LABELS[status] : error ? "Unreadable" : "Checking\u2026"
-    ), tier && /* @__PURE__ */ React.createElement("span", null, tier), template && /* @__PURE__ */ React.createElement("span", null, template), /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-1" }, /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: cn(
-          "size-1.5 rounded-full",
-          busy ? "animate-pulse bg-emerald-500" : "bg-muted-foreground/40"
-        )
-      }
-    ), busy ? "Agent working" : "Agent idle"))),
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-0.5 border-b border-border px-2 pb-1" }, TABS.map(({ id, label, icon: Icon }) => /* @__PURE__ */ React.createElement(Button, { variant: "quiet", pressed: !!(tab === id), icon: /* @__PURE__ */ React.createElement(Icon, null), key: id, onClick: () => setTab(id), "aria-pressed": tab === id }, label))),
-    /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-hidden" }, tab === "activity" ? conversationId ? /* @__PURE__ */ React.createElement(SandboxActivityFeed, { conversationId }) : /* @__PURE__ */ React.createElement(
-      PaneNotice,
-      {
-        title: "No conversation attached",
-        body: "Activity lists the sandbox work of one conversation, and this pane was opened without one.",
-        remedy: "Open the sandbox from a chat that is bound to it \u2014 the Terminal and Files tabs work here either way."
-      }
-    ) : error ? /* @__PURE__ */ React.createElement(
-      PaneNotice,
-      {
-        title: "This sandbox can't be read",
-        body: error,
-        menu: /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error, operation: "Read this conversation's sandbox" }),
-        remedy: "Attach or start a sandbox from the chat input's sandbox control, then reopen this pane."
-      }
-    ) : loading ? /* @__PURE__ */ React.createElement(
-      PaneNotice,
-      {
-        title: "Reading the sandbox\u2026",
-        body: "Fetching the bound box's current state."
-      }
-    ) : !reachable ? /* @__PURE__ */ React.createElement(
-      PaneNotice,
-      {
-        title: `Sandbox ${status ? STATUS_LABELS[status].toLowerCase() : "unavailable"}`,
-        body: "This conversation is bound to a sandbox, but it can't be reached right now (it may be stopped, expired, or still starting).",
-        remedy: "Attach or start a sandbox from the chat input's sandbox control and retry \u2014 or send without a sandbox. The Activity tab still shows everything that already ran."
-      }
-    ) : tab === "terminal" ? /* @__PURE__ */ React.createElement("div", { className: "h-full overflow-hidden" }, /* @__PURE__ */ React.createElement(SimpleTerminal, { sandboxId: sandboxRowId })) : /* @__PURE__ */ React.createElement("div", { className: "h-full overflow-hidden" }, /* @__PURE__ */ React.createElement(
-      SandboxFileViewer,
-      {
-        sandboxRowId,
-        initialPath: AGENT_HOME
-      }
-    )))
+      className: cn("flex h-full min-h-0 flex-col overflow-hidden", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2 px-3 py-1.5", children: [
+          /* @__PURE__ */ jsx(Box, { className: "size-4 shrink-0 text-emerald-500" }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              "data-testid": "sandbox-identity",
+              className: "min-w-0 shrink-0 text-xs font-medium text-foreground",
+              title: name,
+              children: name
+            }
+          ),
+          /* @__PURE__ */ jsxs("p", { className: "flex min-w-0 flex-wrap items-center gap-1.5 text-[11px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-testid": "sandbox-status-pill",
+                className: cn(
+                  "rounded px-1.5 py-0.5 text-[10px] font-medium",
+                  status ? statusPillClasses(status) : "bg-muted text-muted-foreground"
+                ),
+                children: status ? STATUS_LABELS[status] : error ? "Unreadable" : "Checking\u2026"
+              }
+            ),
+            tier && /* @__PURE__ */ jsx("span", { children: tier }),
+            template && /* @__PURE__ */ jsx("span", { children: template }),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "size-1.5 rounded-full",
+                    busy ? "animate-pulse bg-emerald-500" : "bg-muted-foreground/40"
+                  )
+                }
+              ),
+              busy ? "Agent working" : "Agent idle"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 border-b border-border px-2 pb-1", children: TABS.map(({ id, label, icon: Icon }) => /* @__PURE__ */ jsx(Button, { variant: "quiet", pressed: !!(tab === id), icon: /* @__PURE__ */ jsx(Icon, {}), onClick: () => setTab(id), "aria-pressed": tab === id, children: label }, id)) }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: tab === "activity" ? conversationId ? /* @__PURE__ */ jsx(SandboxActivityFeed, { conversationId }) : /* @__PURE__ */ jsx(
+          PaneNotice,
+          {
+            title: "No conversation attached",
+            body: "Activity lists the sandbox work of one conversation, and this pane was opened without one.",
+            remedy: "Open the sandbox from a chat that is bound to it \u2014 the Terminal and Files tabs work here either way."
+          }
+        ) : error ? /* @__PURE__ */ jsx(
+          PaneNotice,
+          {
+            title: "This sandbox can't be read",
+            body: error,
+            menu: /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error, operation: "Read this conversation's sandbox" }),
+            remedy: "Attach or start a sandbox from the chat input's sandbox control, then reopen this pane."
+          }
+        ) : loading ? /* @__PURE__ */ jsx(
+          PaneNotice,
+          {
+            title: "Reading the sandbox\u2026",
+            body: "Fetching the bound box's current state."
+          }
+        ) : !reachable ? /* @__PURE__ */ jsx(
+          PaneNotice,
+          {
+            title: `Sandbox ${status ? STATUS_LABELS[status].toLowerCase() : "unavailable"}`,
+            body: "This conversation is bound to a sandbox, but it can't be reached right now (it may be stopped, expired, or still starting).",
+            remedy: "Attach or start a sandbox from the chat input's sandbox control and retry \u2014 or send without a sandbox. The Activity tab still shows everything that already ran."
+          }
+        ) : tab === "terminal" ? /* @__PURE__ */ jsx("div", { className: "h-full overflow-hidden", children: /* @__PURE__ */ jsx(SimpleTerminal, { sandboxId: sandboxRowId }) }) : /* @__PURE__ */ jsx("div", { className: "h-full overflow-hidden", children: /* @__PURE__ */ jsx(
+          SandboxFileViewer,
+          {
+            sandboxRowId,
+            initialPath: AGENT_HOME
+          }
+        ) }) })
+      ]
+    }
   );
 }
 function PaneNotice({
@@ -164,7 +179,12 @@ function PaneNotice({
   remedy,
   menu
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex h-full flex-col items-center justify-center gap-2 p-6 text-center" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm font-medium text-foreground" }, title), /* @__PURE__ */ React.createElement("p", { className: "max-w-xs text-xs text-muted-foreground" }, body), remedy && /* @__PURE__ */ React.createElement("p", { className: "max-w-xs text-xs text-muted-foreground" }, remedy), menu);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 p-6 text-center", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "max-w-xs text-xs text-muted-foreground", children: body }),
+    remedy && /* @__PURE__ */ jsx("p", { className: "max-w-xs text-xs text-muted-foreground", children: remedy }),
+    menu
+  ] });
 }
 var SandboxCanvasBody_default = SandboxCanvasBody;
 export {

package/dist/agents/components/coming-soon/AgentComingSoonContent.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Flame } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
 function AgentComingSoonContent({
@@ -9,20 +10,32 @@ function AgentComingSoonContent({
   bullets,
   className
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "flex flex-col items-center justify-center h-full min-h-0 px-8 py-10 text-center overflow-y-auto",
         className
-      )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/10 text-primary-ink mb-4" }, /* @__PURE__ */ React.createElement(Icon, { className: "w-7 h-7" })),
-    /* @__PURE__ */ React.createElement("div", { className: "inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground mb-3" }, /* @__PURE__ */ React.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-amber-500" }), "Coming Soon"),
-    /* @__PURE__ */ React.createElement("h2", { className: "text-lg font-semibold text-foreground mb-2" }, title),
-    /* @__PURE__ */ React.createElement("p", { className: "max-w-md text-sm text-muted-foreground leading-relaxed mb-4" }, description),
-    bullets && bullets.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: "text-left max-w-md w-full text-xs text-muted-foreground space-y-1.5 mb-4" }, bullets.map((b, i) => /* @__PURE__ */ React.createElement("li", { key: i, className: "flex items-start gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "mt-1.5 w-1 h-1 rounded-full bg-muted-foreground/60 shrink-0" }), /* @__PURE__ */ React.createElement("span", null, b)))),
-    agentId && /* @__PURE__ */ React.createElement("p", { className: "text-[10px] font-mono text-muted-foreground/60" }, "Agent: ", agentId.slice(0, 8), "\u2026")
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/10 text-primary-ink mb-4", children: /* @__PURE__ */ jsx(Icon, { className: "w-7 h-7" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground mb-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-amber-500" }),
+          "Coming Soon"
+        ] }),
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground mb-2", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-md text-sm text-muted-foreground leading-relaxed mb-4", children: description }),
+        bullets && bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "text-left max-w-md w-full text-xs text-muted-foreground space-y-1.5 mb-4", children: bullets.map((b, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "mt-1.5 w-1 h-1 rounded-full bg-muted-foreground/60 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: b })
+        ] }, i)) }),
+        agentId && /* @__PURE__ */ jsxs("p", { className: "text-[10px] font-mono text-muted-foreground/60", children: [
+          "Agent: ",
+          agentId.slice(0, 8),
+          "\u2026"
+        ] })
+      ]
+    }
   );
 }
 export {

package/dist/agents/components/context-items/ContextItemViewer.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement, useState } from "react";
 import { ChevronLeft, ChevronRight, Send } from "lucide-react";
 import { useAppDispatch } from "../../../store/hooks.js";
@@ -60,18 +61,48 @@ function ContextItemViewer({ items, index, onIndexChange, onTitleChange }) {
   };
   const hasToolbar = multi || Boolean(Title) || Boolean(TitleActions);
   const hasFooter = Boolean(Footer) || showReattach;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex h-full min-h-0 flex-col overflow-hidden bg-background", "data-context-item-viewer": "" }, hasToolbar && /* @__PURE__ */ React.createElement("div", { className: "flex h-9 shrink-0 items-center gap-1 border-b border-border px-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 flex-1 items-center gap-1" }, Title && createElement(Title, {
-    item: activeItem,
-    title,
-    items: [...items],
-    onSelectItem: handleSelectItem,
-    onSearchSubmit: handleSearchSubmit
-  }), TitleActions && createElement(TitleActions, { item: activeItem })), multi && /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center gap-0.5" }, /* @__PURE__ */ React.createElement("span", { className: "mr-1 tabular-nums text-[11px] text-muted-foreground" }, index + 1, "/", count), /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => goTo(index - 1), "aria-label": "Previous", className: navButton }, /* @__PURE__ */ React.createElement(ChevronLeft, { className: "h-4 w-4" }))), /* @__PURE__ */ React.createElement(TooltipContent, null, "Previous")), /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => goTo(index + 1), "aria-label": "Next", className: navButton }, /* @__PURE__ */ React.createElement(ChevronRight, { className: "h-4 w-4" }))), /* @__PURE__ */ React.createElement(TooltipContent, null, "Next")))), /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-hidden" }, createElement(Body, {
-    key: activeItem.id,
-    item: activeItem,
-    setTitle: handleBodyTitle,
-    searchSubmission
-  })), hasFooter && /* @__PURE__ */ React.createElement("div", { className: "flex h-9 shrink-0 items-center gap-2 border-t border-border bg-card px-3" }, Footer && createElement(Footer, { item: activeItem }), showReattach && /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", tone: "primary", icon: /* @__PURE__ */ React.createElement(Send, null), onClick: handleReattach, "aria-label": "Send updated version", className: "ml-auto" })), /* @__PURE__ */ React.createElement(TooltipContent, null, "Send updated version to the agent"))));
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col overflow-hidden bg-background", "data-context-item-viewer": "", children: [
+    hasToolbar && /* @__PURE__ */ jsxs("div", { className: "flex h-9 shrink-0 items-center gap-1 border-b border-border px-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1", children: [
+        Title && createElement(Title, {
+          item: activeItem,
+          title,
+          items: [...items],
+          onSelectItem: handleSelectItem,
+          onSearchSubmit: handleSearchSubmit
+        }),
+        TitleActions && createElement(TitleActions, { item: activeItem })
+      ] }),
+      multi && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+        /* @__PURE__ */ jsxs("span", { className: "mr-1 tabular-nums text-[11px] text-muted-foreground", children: [
+          index + 1,
+          "/",
+          count
+        ] }),
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => goTo(index - 1), "aria-label": "Previous", className: navButton, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Previous" })
+        ] }),
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => goTo(index + 1), "aria-label": "Next", className: navButton, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Next" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: createElement(Body, {
+      key: activeItem.id,
+      item: activeItem,
+      setTitle: handleBodyTitle,
+      searchSubmission
+    }) }),
+    hasFooter && /* @__PURE__ */ jsxs("div", { className: "flex h-9 shrink-0 items-center gap-2 border-t border-border bg-card px-3", children: [
+      Footer && createElement(Footer, { item: activeItem }),
+      showReattach && /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "quiet", tone: "primary", icon: /* @__PURE__ */ jsx(Send, {}), onClick: handleReattach, "aria-label": "Send updated version", className: "ml-auto" }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: "Send updated version to the agent" })
+      ] })
+    ] })
+  ] });
 }
 export {
   ContextItemViewer

package/dist/agents/components/context-items/bodies/BookmarkReferenceBody.js

@@ -1,18 +1,19 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { bookmarksToReferenceDirectives } from "../../../../host/ui-slots.js";
 import { MatrxEnvelopeBlock } from "../../../../host/ui-slots.js";
 function BookmarkReferenceBody({ item }) {
   const directives = bookmarksToReferenceDirectives(item.refs.bookmarks ?? []);
   if (directives.length === 0) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex h-full items-center justify-center p-4" }, /* @__PURE__ */ React.createElement("p", { className: "text-xs italic text-muted-foreground" }, "No references attached."));
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsx("p", { className: "text-xs italic text-muted-foreground", children: "No references attached." }) });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "h-full min-h-0 space-y-2 overflow-y-auto p-4" }, directives.map((directive, i) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: "h-full min-h-0 space-y-2 overflow-y-auto p-4", children: directives.map((directive, i) => /* @__PURE__ */ jsx(
     MatrxEnvelopeBlock,
     {
-      key: `${directive.slug}-${i}`,
       content: directive.shell
-    }
-  )));
+    },
+    `${directive.slug}-${i}`
+  )) });
 }
 export {
   BookmarkReferenceBody

package/dist/agents/components/context-items/bodies/ContextInputBody.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { humanizeIdentifier } from "@ai-matrx/kit/text-case";
 import { AnswerValueView } from "../../../../host/ui-slots.js";
 import { valueCarriesKind } from "@ai-matrx/content-ir/surfaces";
@@ -14,13 +15,22 @@ function displayValue(value) {
 function ContextInputBody({ item }) {
   const snapshot = item.refs.contextInput;
   if (!snapshot) {
-    return /* @__PURE__ */ React.createElement("div", { className: "p-4 text-sm text-muted-foreground" }, "No saved context snapshot is available.");
+    return /* @__PURE__ */ jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "No saved context snapshot is available." });
   }
   const entries = Object.entries(snapshot.data);
-  return /* @__PURE__ */ React.createElement("div", { className: "h-full overflow-y-auto p-4" }, snapshot.id ? /* @__PURE__ */ React.createElement("p", { className: "mb-3 text-xs text-muted-foreground" }, "Snapshot ID: ", snapshot.id) : null, entries.length === 0 ? /* @__PURE__ */ React.createElement("p", { className: "text-sm text-muted-foreground" }, "This context snapshot contains no fields.") : /* @__PURE__ */ React.createElement("dl", { className: "divide-y divide-border/70" }, entries.map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key, className: "grid gap-1 py-3 sm:grid-cols-[10rem_1fr]" }, /* @__PURE__ */ React.createElement("dt", { className: "text-xs font-medium text-muted-foreground", title: key }, humanizeIdentifier(key) || key), /* @__PURE__ */ React.createElement("dd", { className: "min-w-0 whitespace-pre-wrap break-words text-sm text-foreground" }, valueCarriesKind(value) ? (
-    // A value carrying a `__kind` is drawn as the kind, never as JSON.
-    /* @__PURE__ */ React.createElement(AnswerValueView, { value })
-  ) : displayValue(value))))));
+  return /* @__PURE__ */ jsxs("div", { className: "h-full overflow-y-auto p-4", children: [
+    snapshot.id ? /* @__PURE__ */ jsxs("p", { className: "mb-3 text-xs text-muted-foreground", children: [
+      "Snapshot ID: ",
+      snapshot.id
+    ] }) : null,
+    entries.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "This context snapshot contains no fields." }) : /* @__PURE__ */ jsx("dl", { className: "divide-y divide-border/70", children: entries.map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "grid gap-1 py-3 sm:grid-cols-[10rem_1fr]", children: [
+      /* @__PURE__ */ jsx("dt", { className: "text-xs font-medium text-muted-foreground", title: key, children: humanizeIdentifier(key) || key }),
+      /* @__PURE__ */ jsx("dd", { className: "min-w-0 whitespace-pre-wrap break-words text-sm text-foreground", children: valueCarriesKind(value) ? (
+        // A value carrying a `__kind` is drawn as the kind, never as JSON.
+        /* @__PURE__ */ jsx(AnswerValueView, { value })
+      ) : displayValue(value) })
+    ] }, key)) })
+  ] });
 }
 export {
   ContextInputBody

package/dist/agents/components/context-items/bodies/ContextLayerBodies.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Link } from "../../../../host/navigation.js";
 import { Building2, Briefcase, ExternalLink } from "lucide-react";
@@ -21,24 +22,41 @@ function OrgLayerBody({ item, setTitle }) {
   useEffect(() => {
     if (name) setTitle?.(name);
   }, [name, setTitle]);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex h-full min-h-0 flex-col gap-3 overflow-y-auto p-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3" }, /* @__PURE__ */ React.createElement(Building2, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground" }, "Organization"), /* @__PURE__ */ React.createElement("div", { className: "truncate text-base font-semibold text-foreground" }, name))), org && /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1.5" }, org.scope_types.map((t) => /* @__PURE__ */ React.createElement(Badge, { key: t.id, variant: "outline", className: "text-[10px]" }, /* @__PURE__ */ React.createElement(
-    DynamicIcon,
-    {
-      name: t.icon,
-      color: t.color,
-      className: "mr-1 h-3 w-3"
-    }
-  ), t.label_plural, " \xB7 ", t.scopes.length))), org && /* @__PURE__ */ React.createElement(
-    Link,
-    {
-      href: `/organizations/${org.slug ?? org.id}`,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: "inline-flex w-fit items-center gap-1.5 text-xs text-primary hover:underline"
-    },
-    /* @__PURE__ */ React.createElement(ExternalLink, { className: "h-3.5 w-3.5" }),
-    "Manage organization"
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col gap-3 overflow-y-auto p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3", children: [
+      /* @__PURE__ */ jsx(Building2, { className: "h-5 w-5 text-primary" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Organization" }),
+        /* @__PURE__ */ jsx("div", { className: "truncate text-base font-semibold text-foreground", children: name })
+      ] })
+    ] }),
+    org && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: org.scope_types.map((t) => /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "text-[10px]", children: [
+      /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: t.icon,
+          color: t.color,
+          className: "mr-1 h-3 w-3"
+        }
+      ),
+      t.label_plural,
+      " \xB7 ",
+      t.scopes.length
+    ] }, t.id)) }),
+    org && /* @__PURE__ */ jsxs(
+      Link,
+      {
+        href: `/organizations/${org.slug ?? org.id}`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "inline-flex w-fit items-center gap-1.5 text-xs text-primary hover:underline",
+        children: [
+          /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5" }),
+          "Manage organization"
+        ]
+      }
+    )
+  ] });
 }
 function ProjectLayerBody({ item, setTitle }) {
   const projectId = item.refs.projectIds?.[0] ?? null;
@@ -50,17 +68,28 @@ function ProjectLayerBody({ item, setTitle }) {
   useEffect(() => {
     if (name) setTitle?.(name);
   }, [name, setTitle]);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex h-full min-h-0 flex-col gap-3 overflow-y-auto p-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3" }, /* @__PURE__ */ React.createElement(Briefcase, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground" }, "Project"), /* @__PURE__ */ React.createElement("div", { className: "truncate text-base font-semibold text-foreground" }, name))), projectId && /* @__PURE__ */ React.createElement(
-    Link,
-    {
-      href: `/projects/${projectId}`,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: "inline-flex w-fit items-center gap-1.5 text-xs text-primary hover:underline"
-    },
-    /* @__PURE__ */ React.createElement(ExternalLink, { className: "h-3.5 w-3.5" }),
-    "Open project"
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col gap-3 overflow-y-auto p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3", children: [
+      /* @__PURE__ */ jsx(Briefcase, { className: "h-5 w-5 text-primary" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Project" }),
+        /* @__PURE__ */ jsx("div", { className: "truncate text-base font-semibold text-foreground", children: name })
+      ] })
+    ] }),
+    projectId && /* @__PURE__ */ jsxs(
+      Link,
+      {
+        href: `/projects/${projectId}`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "inline-flex w-fit items-center gap-1.5 text-xs text-primary hover:underline",
+        children: [
+          /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5" }),
+          "Open project"
+        ]
+      }
+    )
+  ] });
 }
 function ScopeLayerBody({ item, setTitle }) {
   const scopeId = item.refs.scopeId ?? null;
@@ -104,38 +133,48 @@ function ScopeLayerBody({ item, setTitle }) {
     };
   }, [typeId]);
   const valueList = Object.values(values);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex h-full min-h-0 flex-col overflow-y-auto" }, /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-4 py-2.5" }, found.type && /* @__PURE__ */ React.createElement(
-    DynamicIcon,
-    {
-      name: found.type.icon,
-      color: found.type.color,
-      className: "h-4 w-4"
-    }
-  ), /* @__PURE__ */ React.createElement("span", { className: "truncate text-sm font-semibold text-foreground" }, scopeName), found.type && /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      variant: "outline",
-      className: "ml-auto shrink-0 text-[10px]",
-      style: { borderColor: found.type.color, color: found.type.color }
-    },
-    found.type.label_singular
-  )), status === "loading" ? /* @__PURE__ */ React.createElement("div", { className: "divide-y divide-border/40" }, [1, 2, 3].map((i) => /* @__PURE__ */ React.createElement("div", { key: i, className: "flex items-center gap-3 px-4 py-2.5" }, /* @__PURE__ */ React.createElement("div", { className: "h-3 w-28 animate-pulse rounded bg-muted" }), /* @__PURE__ */ React.createElement("div", { className: "ml-auto h-3 w-44 animate-pulse rounded bg-muted" })))) : status === "error" && valueList.length === 0 ? /* @__PURE__ */ React.createElement(
-    ReadFailure,
-    {
-      error: valuesError ?? true,
-      what: "this scope's context values",
-      onRetry: () => void refresh()
-    }
-  ) : valueList.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "px-4 py-8 text-center text-xs text-muted-foreground" }, "No context values set on this scope yet.") : /* @__PURE__ */ React.createElement("ul", { className: "divide-y divide-border/40" }, valueList.map((v) => /* @__PURE__ */ React.createElement(
-    ContextValueRow,
-    {
-      key: v.context_item_id,
-      value: v,
-      label: itemNames[v.context_item_id],
-      valueType: itemTypes[v.context_item_id],
-      className: "px-4 py-2.5"
-    }
-  ))));
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col overflow-y-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-4 py-2.5", children: [
+      found.type && /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: found.type.icon,
+          color: found.type.color,
+          className: "h-4 w-4"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: scopeName }),
+      found.type && /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: "ml-auto shrink-0 text-[10px]",
+          style: { borderColor: found.type.color, color: found.type.color },
+          children: found.type.label_singular
+        }
+      )
+    ] }),
+    status === "loading" ? /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/40", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-2.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-3 w-28 animate-pulse rounded bg-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "ml-auto h-3 w-44 animate-pulse rounded bg-muted" })
+    ] }, i)) }) : status === "error" && valueList.length === 0 ? /* @__PURE__ */ jsx(
+      ReadFailure,
+      {
+        error: valuesError ?? true,
+        what: "this scope's context values",
+        onRetry: () => void refresh()
+      }
+    ) : valueList.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-8 text-center text-xs text-muted-foreground", children: "No context values set on this scope yet." }) : /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border/40", children: valueList.map((v) => /* @__PURE__ */ jsx(
+      ContextValueRow,
+      {
+        value: v,
+        label: itemNames[v.context_item_id],
+        valueType: itemTypes[v.context_item_id],
+        className: "px-4 py-2.5"
+      },
+      v.context_item_id
+    )) })
+  ] });
 }
 export {
   OrgLayerBody,

package/dist/agents/components/context-items/bodies/DataBody.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { DataRefPreviewContent } from "../../../../host/ui-slots.js";
 function DataBody({ item, setTitle }) {
@@ -8,9 +9,9 @@ function DataBody({ item, setTitle }) {
     if (t) setTitle?.(t);
   }, [ref?.label, ref?.table, setTitle]);
   if (!ref) {
-    return /* @__PURE__ */ React.createElement("p", { className: "p-4 text-xs text-muted-foreground italic" }, "No data reference on this item.");
+    return /* @__PURE__ */ jsx("p", { className: "p-4 text-xs text-muted-foreground italic", children: "No data reference on this item." });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "p-4" }, /* @__PURE__ */ React.createElement(DataRefPreviewContent, { dataRef: ref }));
+  return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(DataRefPreviewContent, { dataRef: ref }) });
 }
 export {
   DataBody