@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/tool-call-visualization/renderers/agent-call/ImageGenerationResult.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Maximize2 } from "lucide-react";
 import { GenericRenderer } from "../../registry/GenericRenderer.js";
 import { ResultMedia } from "../../result-fields/ResultMedia.js";
@@ -9,38 +9,46 @@ import { CopyButtons } from "../../../host/ui-slots.js";
 const ImageGenerationResult = (props) => {
   const { entry, onOpenOverlay, toolGroupId } = props;
   const media = findResultMedia(entry.result);
-  if (!media) return /* @__PURE__ */ React.createElement(GenericRenderer, { ...props });
+  if (!media) return /* @__PURE__ */ jsx(GenericRenderer, { ...props });
   const groupId = toolGroupId ?? entry.callId;
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-2" }, /* @__PURE__ */ React.createElement(ResultMedia, { mediaRef: media, alt: "Generated image", density: "full" }), /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React.createElement(
-    CopyButtons,
-    {
-      label: "Image",
-      size: "icon",
-      human: () => resultToHuman(entry.result),
-      agent: () => ({
-        kind: "tool-result",
-        location: "AI Matrx \u2014 Generated image",
-        description: "An image produced by an image-generation agent.",
-        data: {
-          tool: entry.toolName,
-          callId: entry.callId,
-          result: entry.result
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx(ResultMedia, { mediaRef: media, alt: "Generated image", density: "full" }),
+      /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+        CopyButtons,
+        {
+          label: "Image",
+          size: "icon",
+          human: () => resultToHuman(entry.result),
+          agent: () => ({
+            kind: "tool-result",
+            location: "AI Matrx \u2014 Generated image",
+            description: "An image produced by an image-generation agent.",
+            data: {
+              tool: entry.toolName,
+              callId: entry.callId,
+              result: entry.result
+            }
+          })
         }
-      })
-    }
-  ))), onOpenOverlay && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: (e) => {
-        e.stopPropagation();
-        onOpenOverlay(`tool-group-${groupId}`);
-      },
-      className: "group flex w-full items-center justify-between gap-2 rounded border border-border/60 px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-primary/40 hover:text-foreground"
-    },
-    /* @__PURE__ */ React.createElement("span", null, "View complete result"),
-    /* @__PURE__ */ React.createElement(Maximize2, { className: "h-3 w-3 shrink-0" })
-  ));
+      ) })
+    ] }),
+    onOpenOverlay && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onOpenOverlay(`tool-group-${groupId}`);
+        },
+        className: "group flex w-full items-center justify-between gap-2 rounded border border-border/60 px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-primary/40 hover:text-foreground",
+        children: [
+          /* @__PURE__ */ jsx("span", { children: "View complete result" }),
+          /* @__PURE__ */ jsx(Maximize2, { className: "h-3 w-3 shrink-0" })
+        ]
+      }
+    )
+  ] });
 };
 export {
   ImageGenerationResult

package/dist/tool-call-visualization/renderers/ask/AskInline.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CornerDownRight, MessageCircleQuestionMark } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
 import { getArg, isTerminal, resultAsObject } from "../_shared.js";
@@ -90,18 +90,18 @@ function extractQAs(props) {
 const AskInline = (props) => {
   const { entry, onOpenOverlay, onOpenWindowPanel, toolGroupId, expanded, onToggleExpanded } = props;
   if (entry.status === "error") {
-    return /* @__PURE__ */ React.createElement(ToolErrorCard, { entry, onOpenOverlay, toolGroupId });
+    return /* @__PURE__ */ jsx(ToolErrorCard, { entry, onOpenOverlay, toolGroupId });
   }
   const parsed = extractQAs(props);
   if (!parsed) {
-    return isTerminal(entry) ? /* @__PURE__ */ React.createElement(GenericRenderer, { ...props }) : null;
+    return isTerminal(entry) ? /* @__PURE__ */ jsx(GenericRenderer, { ...props }) : null;
   }
   const { qas, intro } = parsed;
   const answered = qas.filter((q) => q.answer !== null).length;
   const waiting = answered < qas.length;
   const title = qas.length === 1 ? waiting ? "Asked a question" : "Question answered" : `Asked ${qas.length} questions`;
   const sub = intro ?? (qas.length === 1 ? qas[0].question : waiting ? `${answered} of ${qas.length} answered` : "All answered");
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ToolResultCard,
     {
       icon: MessageCircleQuestionMark,
@@ -111,17 +111,22 @@ const AskInline = (props) => {
       expanded,
       onToggleExpanded,
       onOpenWindowPanel: onOpenWindowPanel ? () => onOpenWindowPanel() : void 0,
-      onOpenOverlay: onOpenOverlay ? () => onOpenOverlay() : void 0
-    },
-    /* @__PURE__ */ React.createElement("div", null, qas.map((qa, i) => /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        key: i,
-        className: cn("px-4 py-2", i > 0 && "border-t border-border/30")
-      },
-      /* @__PURE__ */ React.createElement("p", { className: "text-[13px] leading-snug text-foreground" }, qa.question),
-      /* @__PURE__ */ React.createElement("p", { className: "mt-1 flex items-start gap-1.5 text-[13px] leading-snug" }, /* @__PURE__ */ React.createElement(CornerDownRight, { className: "mt-0.5 size-3 shrink-0 text-muted-foreground" }), qa.answer !== null ? /* @__PURE__ */ React.createElement("span", { className: "font-medium text-foreground" }, qa.answer) : /* @__PURE__ */ React.createElement("span", { className: "italic text-muted-foreground" }, "Awaiting answer"))
-    )))
+      onOpenOverlay: onOpenOverlay ? () => onOpenOverlay() : void 0,
+      children: /* @__PURE__ */ jsx("div", { children: qas.map((qa, i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("px-4 py-2", i > 0 && "border-t border-border/30"),
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[13px] leading-snug text-foreground", children: qa.question }),
+            /* @__PURE__ */ jsxs("p", { className: "mt-1 flex items-start gap-1.5 text-[13px] leading-snug", children: [
+              /* @__PURE__ */ jsx(CornerDownRight, { className: "mt-0.5 size-3 shrink-0 text-muted-foreground" }),
+              qa.answer !== null ? /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: qa.answer }) : /* @__PURE__ */ jsx("span", { className: "italic text-muted-foreground", children: "Awaiting answer" })
+            ] })
+          ]
+        },
+        i
+      )) })
+    }
   );
 };
 var AskInline_default = AskInline;

package/dist/tool-call-visualization/renderers/ask-person/AskPersonInline.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { HandHelping } from "lucide-react";
 import { Button } from "@ai-matrx/design-system";
 import { useAppDispatch } from "../../../store/hooks.js";
@@ -40,7 +40,7 @@ const AskPersonInline = (props) => {
     stillMinting: !isPersisted && !isTerminal(entry)
   });
   if (refusedOutright) {
-    return /* @__PURE__ */ React.createElement(ToolErrorCard, { entry, onOpenOverlay, toolGroupId });
+    return /* @__PURE__ */ jsx(ToolErrorCard, { entry, onOpenOverlay, toolGroupId });
   }
   const open = lookup.phase === "open" ? lookup.request : null;
   const cannotLook = !requestId && !conversationId;
@@ -49,11 +49,20 @@ const AskPersonInline = (props) => {
     // read-gate-exempt: phase "closed" IS the lookup's successful answer; its failed read is phase "unreachable", shown by its own branch
     "No longer needed"
   ) : lookup.phase === "unreachable" ? "Could not load this ask" : null;
-  const body = open ? /* @__PURE__ */ React.createElement("div", { "data-parked-ask": "" }, /* @__PURE__ */ React.createElement(ActionRequestInlineAnswer, { request: open, onAnswered: rereadConversation })) : lookup.phase === "unreachable" ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between gap-3 p-4" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm text-muted-foreground" }, "We could not reach your agent just now. Nothing was lost \u2014 try again.", /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, null)), /* @__PURE__ */ React.createElement(Button, { size: "sm", variant: "outline", onClick: lookup.retry }, "Try again")) : lookup.phase === "closed" && cannotLook ? /* @__PURE__ */ React.createElement("p", { className: "p-4 text-sm text-muted-foreground" }, "Open this ask from the chat to answer it.") : lookup.phase === "closed" ? /* @__PURE__ */ React.createElement("p", { className: "p-4 text-sm text-muted-foreground" }, isTerminal(entry) && !parked ? "Done \u2014 your agent has what it asked for." : "This ask is no longer open.") : /* @__PURE__ */ React.createElement("p", { className: "p-4 text-sm text-muted-foreground" }, sub);
+  const body = open ? /* @__PURE__ */ jsx("div", { "data-parked-ask": "", children: /* @__PURE__ */ jsx(ActionRequestInlineAnswer, { request: open, onAnswered: rereadConversation }) }) : lookup.phase === "unreachable" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 p-4", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      "We could not reach your agent just now. Nothing was lost \u2014 try again.",
+      /* @__PURE__ */ jsx(ErrorAlchemyMenu, {})
+    ] }),
+    /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: lookup.retry, children: "Try again" })
+  ] }) : lookup.phase === "closed" && cannotLook ? /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-muted-foreground", children: "Open this ask from the chat to answer it." }) : lookup.phase === "closed" ? /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-muted-foreground", children: isTerminal(entry) && !parked ? "Done \u2014 your agent has what it asked for." : "This ask is no longer open." }) : /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-muted-foreground", children: sub });
   if (!onToggleExpanded) {
-    return /* @__PURE__ */ React.createElement("div", null, open && open.render.form !== "questions" ? /* @__PURE__ */ React.createElement("p", { className: "px-4 pt-4 text-sm font-medium" }, open.render.title) : null, body);
+    return /* @__PURE__ */ jsxs("div", { children: [
+      open && open.render.form !== "questions" ? /* @__PURE__ */ jsx("p", { className: "px-4 pt-4 text-sm font-medium", children: open.render.title }) : null,
+      body
+    ] });
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ToolResultCard,
     {
       icon: HandHelping,
@@ -63,9 +72,9 @@ const AskPersonInline = (props) => {
       expanded,
       onToggleExpanded,
       onOpenWindowPanel: onOpenWindowPanel ? () => onOpenWindowPanel() : void 0,
-      onOpenOverlay: onOpenOverlay ? () => onOpenOverlay() : void 0
-    },
-    body
+      onOpenOverlay: onOpenOverlay ? () => onOpenOverlay() : void 0,
+      children: body
+    }
   );
 };
 var AskPersonInline_default = AskPersonInline;

package/dist/tool-call-visualization/renderers/cloud-browser/CloudBrowserRunCard.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
   ChevronDown,
   ChevronRight,
@@ -28,7 +28,7 @@ function ScreenshotPreview({
   index
 }) {
   const label = `Cloud Browser screenshot ${index + 1}`;
-  return /* @__PURE__ */ React.createElement("div", { className: "mt-2 overflow-hidden rounded-lg border border-border/60 bg-muted/20" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: "mt-2 overflow-hidden rounded-lg border border-border/60 bg-muted/20", children: /* @__PURE__ */ jsx(
     ResultMedia,
     {
       mediaRef: media,
@@ -36,7 +36,7 @@ function ScreenshotPreview({
       density: "full",
       className: "w-full max-w-none rounded-none border-0 bg-transparent"
     }
-  ));
+  ) });
 }
 function ActivityUrl({ url }) {
   let label = url;
@@ -45,7 +45,7 @@ function ActivityUrl({ url }) {
     label = `${parsed.hostname.replace(/^www\./, "")}${parsed.pathname === "/" ? "" : parsed.pathname}`;
   } catch {
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "a",
     {
       href: url,
@@ -53,10 +53,12 @@ function ActivityUrl({ url }) {
       rel: "noopener noreferrer",
       onClick: (event) => event.stopPropagation(),
       className: "inline-flex min-w-0 max-w-[min(22rem,48vw)] items-center gap-1 text-primary hover:underline",
-      title: url
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "truncate" }, label),
-    /* @__PURE__ */ React.createElement(ExternalLink, { className: "size-3 shrink-0" })
+      title: url,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+        /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0" })
+      ]
+    }
   );
 }
 function CloudBrowserRunCard({
@@ -75,46 +77,76 @@ function CloudBrowserRunCard({
   const lastAction = activities.at(-1)?.action;
   const browserIsClosed = lastAction === "close";
   const latestUrl = [...activities].reverse().find((activity) => activity.url)?.url;
-  const activityBody = /* @__PURE__ */ React.createElement("div", { className: "px-3 py-2" }, /* @__PURE__ */ React.createElement("ol", { className: "space-y-0.5" }, activities.map((activity, index) => {
-    const Icon = activity.icon;
-    return /* @__PURE__ */ React.createElement("li", { key: entries[index]?.callId ?? index, className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex min-h-6 min-w-0 items-center gap-2 text-[12px] leading-5" }, /* @__PURE__ */ React.createElement(
-      Icon,
-      {
-        className: cn("size-3.5 shrink-0", activity.iconClassName),
-        strokeWidth: 2
-      }
-    ), /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: cn(
-          "min-w-0 truncate",
-          activity.isError ? "text-destructive" : "text-muted-foreground"
-        ),
-        title: activity.label
-      },
-      activity.label
-    ), activity.url && /* @__PURE__ */ React.createElement("span", { className: "ml-auto hidden min-w-0 shrink sm:block" }, /* @__PURE__ */ React.createElement(ActivityUrl, { url: activity.url }))), activity.media && /* @__PURE__ */ React.createElement(ScreenshotPreview, { media: activity.media, index }));
-  })), /* @__PURE__ */ React.createElement("details", { className: "group/details mt-1.5 border-t border-border/40 pt-1.5" }, /* @__PURE__ */ React.createElement("summary", { className: "flex w-fit cursor-pointer list-none items-center gap-1.5 rounded px-1 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground [&::-webkit-details-marker]:hidden" }, /* @__PURE__ */ React.createElement(SlidersHorizontal, { className: "size-3" }), "Details"), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 max-h-64 space-y-2 overflow-y-auto rounded-md bg-muted/30 p-2 scrollbar-thin" }, entries.map((entry, index) => /* @__PURE__ */ React.createElement("div", { key: entry.callId, className: "min-w-0" }, /* @__PURE__ */ React.createElement("p", { className: "mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground" }, "Step ", index + 1), /* @__PURE__ */ React.createElement(ResultValue, { value: rawEntryObject(entry), density: "full" }))))));
+  const activityBody = /* @__PURE__ */ jsxs("div", { className: "px-3 py-2", children: [
+    /* @__PURE__ */ jsx("ol", { className: "space-y-0.5", children: activities.map((activity, index) => {
+      const Icon = activity.icon;
+      return /* @__PURE__ */ jsxs("li", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-6 min-w-0 items-center gap-2 text-[12px] leading-5", children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              className: cn("size-3.5 shrink-0", activity.iconClassName),
+              strokeWidth: 2
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "min-w-0 truncate",
+                activity.isError ? "text-destructive" : "text-muted-foreground"
+              ),
+              title: activity.label,
+              children: activity.label
+            }
+          ),
+          activity.url && /* @__PURE__ */ jsx("span", { className: "ml-auto hidden min-w-0 shrink sm:block", children: /* @__PURE__ */ jsx(ActivityUrl, { url: activity.url }) })
+        ] }),
+        activity.media && /* @__PURE__ */ jsx(ScreenshotPreview, { media: activity.media, index })
+      ] }, entries[index]?.callId ?? index);
+    }) }),
+    /* @__PURE__ */ jsxs("details", { className: "group/details mt-1.5 border-t border-border/40 pt-1.5", children: [
+      /* @__PURE__ */ jsxs("summary", { className: "flex w-fit cursor-pointer list-none items-center gap-1.5 rounded px-1 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground [&::-webkit-details-marker]:hidden", children: [
+        /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-3" }),
+        "Details"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1.5 max-h-64 space-y-2 overflow-y-auto rounded-md bg-muted/30 p-2 scrollbar-thin", children: entries.map((entry, index) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("p", { className: "mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: [
+          "Step ",
+          index + 1
+        ] }),
+        /* @__PURE__ */ jsx(ResultValue, { value: rawEntryObject(entry), density: "full" })
+      ] }, entry.callId)) })
+    ] })
+  ] });
   if (compact) {
-    return /* @__PURE__ */ React.createElement("div", { className: cn("mb-1 w-full min-w-0", className) }, /* @__PURE__ */ React.createElement("div", { className: "flex min-h-7 min-w-0 items-center gap-1.5 text-[12px] text-muted-foreground" }, /* @__PURE__ */ React.createElement(Globe2, { className: "size-3.5 shrink-0 text-info" }), /* @__PURE__ */ React.createElement(Tile, { variant: "quiet", title: `Continued browsing \xB7 ${entries.length} actions`, end: expanded ? /* @__PURE__ */ React.createElement(ChevronDown, null) : /* @__PURE__ */ React.createElement(ChevronRight, null), onClick: onToggleExpanded, "aria-expanded": expanded, className: "min-w-0" }), latestUrl && /* @__PURE__ */ React.createElement("span", { className: "hidden min-w-0 flex-1 sm:block" }, /* @__PURE__ */ React.createElement(ActivityUrl, { url: latestUrl })), !readOnly && /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        type: "button",
-        size: "icon",
-        variant: "ghost",
-        onClick: () => openBrowser({
-          initialProfileId: profileId,
-          runId,
-          conversationId
-        }),
-        className: "ml-auto size-7 shrink-0 rounded-md",
-        "aria-label": browserIsClosed ? "View browser" : "View live browser",
-        title: browserIsClosed ? "View browser" : "View live browser"
-      },
-      /* @__PURE__ */ React.createElement(MonitorUp, { className: "size-3.5" })
-    )), expanded && /* @__PURE__ */ React.createElement("div", { className: "mt-1" }, activityBody));
+    return /* @__PURE__ */ jsxs("div", { className: cn("mb-1 w-full min-w-0", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-h-7 min-w-0 items-center gap-1.5 text-[12px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Globe2, { className: "size-3.5 shrink-0 text-info" }),
+        /* @__PURE__ */ jsx(Tile, { variant: "quiet", title: `Continued browsing \xB7 ${entries.length} actions`, end: expanded ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(ChevronRight, {}), onClick: onToggleExpanded, "aria-expanded": expanded, className: "min-w-0" }),
+        latestUrl && /* @__PURE__ */ jsx("span", { className: "hidden min-w-0 flex-1 sm:block", children: /* @__PURE__ */ jsx(ActivityUrl, { url: latestUrl }) }),
+        !readOnly && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon",
+            variant: "ghost",
+            onClick: () => openBrowser({
+              initialProfileId: profileId,
+              runId,
+              conversationId
+            }),
+            className: "ml-auto size-7 shrink-0 rounded-md",
+            "aria-label": browserIsClosed ? "View browser" : "View live browser",
+            title: browserIsClosed ? "View browser" : "View live browser",
+            children: /* @__PURE__ */ jsx(MonitorUp, { className: "size-3.5" })
+          }
+        )
+      ] }),
+      expanded && /* @__PURE__ */ jsx("div", { className: "mt-1", children: activityBody })
+    ] });
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ToolResultCard,
     {
       icon: Globe2,
@@ -124,7 +156,7 @@ function CloudBrowserRunCard({
       expanded,
       onToggleExpanded,
       className,
-      headerAction: readOnly ? void 0 : /* @__PURE__ */ React.createElement(
+      headerAction: readOnly ? void 0 : /* @__PURE__ */ jsxs(
         Button,
         {
           type: "button",
@@ -135,13 +167,15 @@ function CloudBrowserRunCard({
             runId,
             conversationId
           }),
-          className: "h-8 rounded-lg px-2.5 text-xs"
-        },
-        /* @__PURE__ */ React.createElement(MonitorUp, { className: "size-3.5" }),
-        browserIsClosed ? "View browser" : "View live browser"
-      )
-    },
-    activityBody
+          className: "h-8 rounded-lg px-2.5 text-xs",
+          children: [
+            /* @__PURE__ */ jsx(MonitorUp, { className: "size-3.5" }),
+            browserIsClosed ? "View browser" : "View live browser"
+          ]
+        }
+      ),
+      children: activityBody
+    }
   );
 }
 const CloudBrowserInline = ({
@@ -150,7 +184,7 @@ const CloudBrowserInline = ({
   expanded,
   onToggleExpanded,
   readOnly
-}) => /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ jsx(
   CloudBrowserRunCard,
   {
     entries: [entry],

package/dist/tool-call-visualization/renderers/ctx/ContextActionInline.js

@@ -1,14 +1,14 @@
 "use client";
-import React from "react";
+import { jsx } from "react/jsx-runtime";
 import { getArg } from "../_shared.js";
 import { GenericRenderer } from "../../registry/GenericRenderer.js";
 import { CtxGetInline } from "./CtxGetInline.js";
 import { CtxBatchInline } from "./CtxBatchInline.js";
 const ContextActionInline = (props) => {
   const action = (getArg(props.entry, "action") ?? "get").trim();
-  if (action === "batch") return /* @__PURE__ */ React.createElement(CtxBatchInline, { ...props });
-  if (action === "get" || action === "") return /* @__PURE__ */ React.createElement(CtxGetInline, { ...props });
-  return /* @__PURE__ */ React.createElement(GenericRenderer, { ...props });
+  if (action === "batch") return /* @__PURE__ */ jsx(CtxBatchInline, { ...props });
+  if (action === "get" || action === "") return /* @__PURE__ */ jsx(CtxGetInline, { ...props });
+  return /* @__PURE__ */ jsx(GenericRenderer, { ...props });
 };
 export {
   ContextActionInline

package/dist/tool-call-visualization/renderers/ctx/CtxBatchInline.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
 import { Layers, AlertCircle } from "lucide-react";
 import { isTerminal, resultAsObject } from "../_shared.js";
 import { ToolResultValue } from "../../result-fields/ToolResultValue.js";
@@ -63,7 +64,7 @@ const CtxBatchInline = ({
   const [showAll, setShowAll] = useState(false);
   const parsed = useMemo(() => parse(entry), [entry]);
   if (entry.status === "error") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ToolErrorCard,
       {
         entry,
@@ -73,28 +74,59 @@ const CtxBatchInline = ({
     );
   }
   if (!isTerminal(entry)) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 py-1.5 text-xs text-muted-foreground animate-in fade-in" }, /* @__PURE__ */ React.createElement(Layers, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ React.createElement("span", null, "Reviewing context"));
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-1.5 text-xs text-muted-foreground animate-in fade-in", children: [
+      /* @__PURE__ */ jsx(Layers, { className: "h-3.5 w-3.5 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { children: "Reviewing context" })
+    ] });
   }
   if (!parsed) {
-    return /* @__PURE__ */ React.createElement(ToolResultValue, { value: entry.result, density });
+    return /* @__PURE__ */ jsx(ToolResultValue, { value: entry.result, density });
   }
   const cap = density === "inline" && !showAll ? INLINE_ITEM_CAP : parsed.results.length;
   const shown = parsed.results.slice(0, cap);
   const remaining = parsed.results.length - shown.length;
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-2 animate-in fade-in" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-xs text-muted-foreground" }, /* @__PURE__ */ React.createElement(Layers, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: "font-semibold tabular-nums text-foreground" }, parsed.count), " ", "of", " ", /* @__PURE__ */ React.createElement("span", { className: "tabular-nums" }, parsed.requested), " retrieved")), /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, shown.map(
-    (r, i) => r.success && r.item ? /* @__PURE__ */ React.createElement(CtxItemCard, { key: `${r.key}-${i}`, item: r.item, density }) : /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        key: `${r.key}-${i}`,
-        className: "flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive-ink"
-      },
-      /* @__PURE__ */ React.createElement(AlertCircle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
-      /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, contextEntryLabel({ key: r.key })), r.errorText && /* @__PURE__ */ React.createElement("span", { className: "text-destructive/80" }, " \u2014 ", r.errorText, " ", /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: r.errorText })))
-    )
-  )), remaining > 0 && /* @__PURE__ */ React.createElement(Button, { variant: "quiet", tone: "primary", onClick: (e) => {
-    e.stopPropagation();
-    setShowAll(true);
-  } }, "+", remaining, " more"));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2 animate-in fade-in", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Layers, { className: "h-3.5 w-3.5 shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "font-semibold tabular-nums text-foreground", children: parsed.count }),
+        " ",
+        "of",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: parsed.requested }),
+        " retrieved"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: shown.map(
+      (r, i) => r.success && r.item ? /* @__PURE__ */ jsx(CtxItemCard, { item: r.item, density }, `${r.key}-${i}`) : /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive-ink",
+          children: [
+            /* @__PURE__ */ jsx(AlertCircle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: contextEntryLabel({ key: r.key }) }),
+              r.errorText && /* @__PURE__ */ jsxs("span", { className: "text-destructive/80", children: [
+                " \u2014 ",
+                r.errorText,
+                " ",
+                /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: r.errorText })
+              ] })
+            ] })
+          ]
+        },
+        `${r.key}-${i}`
+      )
+    ) }),
+    remaining > 0 && /* @__PURE__ */ jsxs(Button, { variant: "quiet", tone: "primary", onClick: (e) => {
+      e.stopPropagation();
+      setShowAll(true);
+    }, children: [
+      "+",
+      remaining,
+      " more"
+    ] })
+  ] });
 };
 export {
   CtxBatchInline

package/dist/tool-call-visualization/renderers/ctx/CtxGetInline.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { Search } from "lucide-react";
 import { getArg, isTerminal, resultAsObject } from "../_shared.js";
 import { ToolResultValue } from "../../result-fields/ToolResultValue.js";
@@ -38,7 +39,7 @@ const CtxGetInline = ({
     return { kind: "raw" };
   }, [entry, keyArg]);
   if (view.kind === "error") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ToolErrorCard,
       {
         entry,
@@ -48,12 +49,19 @@ const CtxGetInline = ({
     );
   }
   if (view.kind === "loading") {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 py-1.5 text-xs text-muted-foreground animate-in fade-in" }, /* @__PURE__ */ React.createElement(Search, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ React.createElement("span", null, "Looking up", " ", keyArg ? /* @__PURE__ */ React.createElement("span", { className: "text-foreground" }, contextEntryLabel({ key: keyArg })) : "context"));
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-1.5 text-xs text-muted-foreground animate-in fade-in", children: [
+      /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Looking up",
+        " ",
+        keyArg ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: contextEntryLabel({ key: keyArg }) }) : "context"
+      ] })
+    ] });
   }
   if (view.kind === "raw") {
-    return /* @__PURE__ */ React.createElement(ToolResultValue, { value: entry.result, density });
+    return /* @__PURE__ */ jsx(ToolResultValue, { value: entry.result, density });
   }
-  return /* @__PURE__ */ React.createElement(CtxItemCard, { item: view.item, density });
+  return /* @__PURE__ */ jsx(CtxItemCard, { item: view.item, density });
 };
 export {
   CtxGetInline

package/dist/tool-call-visualization/renderers/ctx/CtxItemCard.js

@@ -1,6 +1,6 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { formatCount } from "@ai-matrx/kit/format";
-import React from "react";
 import {
   FileText,
   File,
@@ -48,23 +48,32 @@ const CtxItemCard = ({
   const rawSizeChars = typeof item.chars_returned === "number" ? item.chars_returned : typeof item.total_chars === "number" ? item.total_chars : null;
   const sizeChars = rawSizeChars != null && rawSizeChars > 0 ? rawSizeChars : null;
   const isSummary = typeof item.summary === "string" && item.summary.length > 0;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "rounded-lg border border-border bg-card p-3 space-y-2",
         className
-      )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground" }, /* @__PURE__ */ React.createElement(Icon, { className: "h-3.5 w-3.5" })), /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: "min-w-0 truncate font-medium text-foreground",
-        title: showKey ? item.key : void 0
-      },
-      label
-    ), /* @__PURE__ */ React.createElement("span", { className: "ml-auto flex shrink-0 items-center gap-1.5" }, isSummary && /* @__PURE__ */ React.createElement(Badge, { variant: "secondary", className: "font-normal" }, "summary"), sizeChars != null && /* @__PURE__ */ React.createElement(Badge, { variant: "secondary", className: "font-normal tabular-nums" }, formatCharCount(sizeChars)))),
-    /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, isSummary ? /* @__PURE__ */ React.createElement(ResultValue, { value: item.summary, density }) : /* @__PURE__ */ React.createElement(ResultValue, { value: item.content, density }))
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "min-w-0 truncate font-medium text-foreground",
+              title: showKey ? item.key : void 0,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+            isSummary && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "font-normal", children: "summary" }),
+            sizeChars != null && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "font-normal tabular-nums", children: formatCharCount(sizeChars) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0", children: isSummary ? /* @__PURE__ */ jsx(ResultValue, { value: item.summary, density }) : /* @__PURE__ */ jsx(ResultValue, { value: item.content, density }) })
+      ]
+    }
   );
 };
 export {