@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/tool-call-visualization/renderers/skill/SkillInline.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { LibraryBig } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
 import { getArg, isTerminal, resultAsObject } from "../_shared.js";
@@ -26,7 +26,7 @@ function stringArray(raw) {
 const SkillInline = (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 });
   }
   if (!isTerminal(entry)) return null;
   const result = resultAsObject(entry);
@@ -43,25 +43,27 @@ const SkillInline = (props) => {
     const hints = hintArray.map(asHint).filter((h) => h !== null);
     if (hints.length > 0 || hintArray.length === 0) {
       const query = typeof result?.query === "string" && result.query || getArg(entry, "query") || null;
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsx(
         ToolResultCard,
         {
           ...cardShellProps,
           title: `Found ${hints.length} ${hints.length === 1 ? "skill" : "skills"}`,
-          sub: query ? `\u201C${query}\u201D` : null
-        },
-        hints.length > 0 ? /* @__PURE__ */ React.createElement("div", null, hints.map((h, i) => /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            key: `${h.label}-${i}`,
-            className: cn(
-              "flex items-baseline gap-2 px-4 py-1.5",
-              i > 0 && "border-t border-border/30"
-            )
-          },
-          /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate text-[13px] text-foreground" }, h.label),
-          h.type && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-xs text-muted-foreground" }, h.type)
-        ))) : void 0
+          sub: query ? `\u201C${query}\u201D` : null,
+          children: hints.length > 0 ? /* @__PURE__ */ jsx("div", { children: hints.map((h, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-baseline gap-2 px-4 py-1.5",
+                i > 0 && "border-t border-border/30"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] text-foreground", children: h.label }),
+                h.type && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: h.type })
+              ]
+            },
+            `${h.label}-${i}`
+          )) }) : void 0
+        }
       );
     }
   }
@@ -72,31 +74,37 @@ const SkillInline = (props) => {
     const description = typeof result.description === "string" ? catalogProseText(result.description.trim()) : "";
     const categories = stringArray(result.category_path);
     const triggers = stringArray(result.trigger_patterns);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ToolResultCard,
       {
         ...cardShellProps,
         title: label,
-        sub: ["Skill", type, version].filter(Boolean).join(" \xB7 ")
-      },
-      (description || categories.length > 0 || triggers.length > 0) && /* @__PURE__ */ React.createElement("div", { className: "space-y-2.5 px-4 py-3" }, description && /* @__PURE__ */ React.createElement("p", { className: "whitespace-pre-line text-[13px] leading-relaxed text-foreground" }, description), (categories.length > 0 || triggers.length > 0) && /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-1.5" }, categories.map((c) => /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          key: `c-${c}`,
-          className: "rounded-md bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground"
-        },
-        c
-      )), triggers.map((t) => /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          key: `t-${t}`,
-          className: "rounded-md border border-border/50 px-1.5 py-0.5 text-xs text-muted-foreground"
-        },
-        t
-      ))))
+        sub: ["Skill", type, version].filter(Boolean).join(" \xB7 "),
+        children: (description || categories.length > 0 || triggers.length > 0) && /* @__PURE__ */ jsxs("div", { className: "space-y-2.5 px-4 py-3", children: [
+          description && /* @__PURE__ */ jsx("p", { className: "whitespace-pre-line text-[13px] leading-relaxed text-foreground", children: description }),
+          (categories.length > 0 || triggers.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+            categories.map((c) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "rounded-md bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground",
+                children: c
+              },
+              `c-${c}`
+            )),
+            triggers.map((t) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "rounded-md border border-border/50 px-1.5 py-0.5 text-xs text-muted-foreground",
+                children: t
+              },
+              `t-${t}`
+            ))
+          ] })
+        ] })
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(GenericRenderer, { ...props });
+  return /* @__PURE__ */ jsx(GenericRenderer, { ...props });
 };
 var SkillInline_default = SkillInline;
 export {

package/dist/tool-call-visualization/renderers/sql/DbSchemaInline.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Columns3, Loader2 } from "lucide-react";
 import { Badge } from "@ai-matrx/design-system";
 import { getArg, isTerminal, resultAsObject } from "../_shared.js";
@@ -14,17 +14,43 @@ const DbSchemaInline = ({
   const table = (getArg(entry, "table") ?? "").trim();
   const tableLabel = table ? `\`${table}\`` : "table";
   if (entry.status === "error") {
-    return /* @__PURE__ */ React.createElement(ToolErrorCard, { entry, onOpenOverlay, toolGroupId });
+    return /* @__PURE__ */ jsx(ToolErrorCard, { entry, onOpenOverlay, toolGroupId });
   }
   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(Columns3, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1" }, "Reading schema for", " ", table ? /* @__PURE__ */ React.createElement("span", { className: "font-mono text-foreground" }, table) : "table"), /* @__PURE__ */ React.createElement(Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin" }));
+    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(Columns3, { className: "h-3.5 w-3.5 shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+        "Reading schema for",
+        " ",
+        table ? /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground", children: table }) : "table"
+      ] }),
+      /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin" })
+    ] });
   }
   const result = resultAsObject(entry);
   const rows = result && Array.isArray(result.rows) ? result.rows : null;
-  return /* @__PURE__ */ React.createElement("div", { className: "rounded-lg border border-border bg-card p-3 space-y-2.5 animate-in fade-in" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(Columns3, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm text-foreground" }, "Schema \xB7 ", /* @__PURE__ */ React.createElement("span", { className: "font-mono font-medium" }, table || "table")), rows && /* @__PURE__ */ React.createElement(Badge, { variant: "secondary", className: "ml-auto font-normal" }, rows.length, " ", rows.length === 1 ? "column" : "columns")), rows ? rows.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "min-w-0 border-t border-border pt-2" }, /* @__PURE__ */ React.createElement(ResultValue, { value: rows, density: "inline" })) : /* @__PURE__ */ React.createElement("p", { className: "border-t border-border pt-2 text-xs italic text-muted-foreground" }, "No columns found for ", tableLabel, ".") : entry.result != null ? (
-    // Unexpected shape — surface it rather than hide it.
-    /* @__PURE__ */ React.createElement("div", { className: "min-w-0 border-t border-border pt-2" }, /* @__PURE__ */ React.createElement(ToolResultValue, { value: entry.result, density: "inline" }))
-  ) : null);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-card p-3 space-y-2.5 animate-in fade-in", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Columns3, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-foreground", children: [
+        "Schema \xB7 ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: table || "table" })
+      ] }),
+      rows && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "ml-auto font-normal", children: [
+        rows.length,
+        " ",
+        rows.length === 1 ? "column" : "columns"
+      ] })
+    ] }),
+    rows ? rows.length > 0 ? /* @__PURE__ */ jsx("div", { className: "min-w-0 border-t border-border pt-2", children: /* @__PURE__ */ jsx(ResultValue, { value: rows, density: "inline" }) }) : /* @__PURE__ */ jsxs("p", { className: "border-t border-border pt-2 text-xs italic text-muted-foreground", children: [
+      "No columns found for ",
+      tableLabel,
+      "."
+    ] }) : entry.result != null ? (
+      // Unexpected shape — surface it rather than hide it.
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 border-t border-border pt-2", children: /* @__PURE__ */ jsx(ToolResultValue, { value: entry.result, density: "inline" }) })
+    ) : null
+  ] });
 };
 var DbSchemaInline_default = DbSchemaInline;
 export {

package/dist/tool-call-visualization/renderers/sql/SqlInline.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import {
@@ -12,7 +13,7 @@ import { ResultValue } from "../../result-fields/ResultValue.js";
 import { ToolResultValue } from "../../result-fields/ToolResultValue.js";
 import { ToolErrorCard } from "../../result-fields/ToolErrorCard.js";
 import { IdListChip } from "../../result-fields/ShortId.js";
-const SqlCodeBlock = ({ sql }) => /* @__PURE__ */ React.createElement(BasicMarkdownContent, { imagePolicy: "ai", content: "```sql\n" + sql.trim() + "\n```", showCopyButton: false });
+const SqlCodeBlock = ({ sql }) => /* @__PURE__ */ jsx(BasicMarkdownContent, { imagePolicy: "ai", content: "```sql\n" + sql.trim() + "\n```", showCopyButton: false });
 const JsonCodeBlock = ({ value }) => {
   let text;
   try {
@@ -20,7 +21,7 @@ const JsonCodeBlock = ({ value }) => {
   } catch {
     text = String(value);
   }
-  return /* @__PURE__ */ React.createElement(BasicMarkdownContent, { imagePolicy: "other", content: "```json\n" + text + "\n```", showCopyButton: false });
+  return /* @__PURE__ */ jsx(BasicMarkdownContent, { imagePolicy: "other", content: "```json\n" + text + "\n```", showCopyButton: false });
 };
 function normalizePayload(raw) {
   if (typeof raw !== "string") return raw;
@@ -34,15 +35,20 @@ function normalizePayload(raw) {
 }
 const SourceDisclosure = ({ label, children }) => {
   const [open, setOpen] = React.useState(false);
-  return /* @__PURE__ */ React.createElement(Collapsible, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(
-    CollapsibleTrigger,
-    {
-      onClick: (e) => e.stopPropagation(),
-      className: "inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground"
-    },
-    open ? /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ React.createElement(ChevronRight, { className: "h-3 w-3" }),
-    open ? `Hide ${label}` : `Show ${label}`
-  ), /* @__PURE__ */ React.createElement(CollapsibleContent, { className: "mt-1.5 min-w-0" }, children));
+  return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      CollapsibleTrigger,
+      {
+        onClick: (e) => e.stopPropagation(),
+        className: "inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground",
+        children: [
+          open ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
+          open ? `Hide ${label}` : `Show ${label}`
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(CollapsibleContent, { className: "mt-1.5 min-w-0", children })
+  ] });
 };
 const COUNT_KEYS = [
   { key: "inserted", label: "Inserted" },
@@ -75,16 +81,42 @@ const SqlInline = ({
   const queryStr = typeof query === "string" ? query.trim() : "";
   const rawData = getArg(entry, "data");
   if (entry.status === "error") {
-    return /* @__PURE__ */ React.createElement(ToolErrorCard, { entry, onOpenOverlay, toolGroupId });
+    return /* @__PURE__ */ jsx(ToolErrorCard, { entry, onOpenOverlay, toolGroupId });
   }
   if (!isTerminal(entry)) {
-    return /* @__PURE__ */ React.createElement("div", { className: "min-w-0 animate-in fade-in" }, queryStr ? /* @__PURE__ */ React.createElement(SqlCodeBlock, { sql: queryStr }) : rawData !== void 0 ? /* @__PURE__ */ React.createElement(ResultValue, { value: normalizePayload(rawData), density: "inline" }) : null);
+    return /* @__PURE__ */ jsx("div", { className: "min-w-0 animate-in fade-in", children: queryStr ? /* @__PURE__ */ jsx(SqlCodeBlock, { sql: queryStr }) : rawData !== void 0 ? /* @__PURE__ */ jsx(ResultValue, { value: normalizePayload(rawData), density: "inline" }) : null });
   }
   const result = resultAsObject(entry);
   const resultRows = result && Array.isArray(result.rows) ? result.rows : null;
   const writeOutcome = result && !resultRows ? asWriteOutcome(result) : null;
   const idStrings = writeOutcome?.ids && writeOutcome.ids.every((v) => typeof v === "string") ? writeOutcome.ids : null;
-  return /* @__PURE__ */ React.createElement("div", { className: "min-w-0 space-y-2 animate-in fade-in" }, resultRows && (resultRows.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground" }, resultRows.length, " ", rowWord(resultRows.length)), /* @__PURE__ */ React.createElement(ResultValue, { value: resultRows, density: "inline" })) : /* @__PURE__ */ React.createElement("p", { className: "text-xs italic text-muted-foreground" }, "No rows returned.")), !resultRows && writeOutcome && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground" }, writeOutcome.counts.map((c) => /* @__PURE__ */ React.createElement("span", { key: c.label }, c.label, " ", c.n, " ", rowWord(c.n))), writeOutcome.counts.length === 0 && /* @__PURE__ */ React.createElement("span", null, "Write completed"), idStrings && idStrings.length > 0 && /* @__PURE__ */ React.createElement(IdListChip, { ids: idStrings })), writeOutcome.data != null && /* @__PURE__ */ React.createElement(ResultValue, { value: writeOutcome.data, density: "inline" }), !idStrings && writeOutcome.ids && writeOutcome.ids.length > 0 && /* @__PURE__ */ React.createElement(ResultValue, { value: writeOutcome.ids, density: "inline" })), !resultRows && !writeOutcome && entry.result != null && /* @__PURE__ */ React.createElement(ToolResultValue, { value: entry.result, density: "inline" }), queryStr ? /* @__PURE__ */ React.createElement(SourceDisclosure, { label: "SQL" }, /* @__PURE__ */ React.createElement(SqlCodeBlock, { sql: queryStr })) : rawData !== void 0 ? /* @__PURE__ */ React.createElement(SourceDisclosure, { label: "payload" }, /* @__PURE__ */ React.createElement(JsonCodeBlock, { value: normalizePayload(rawData) })) : null);
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2 animate-in fade-in", children: [
+    resultRows && (resultRows.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+        resultRows.length,
+        " ",
+        rowWord(resultRows.length)
+      ] }),
+      /* @__PURE__ */ jsx(ResultValue, { value: resultRows, density: "inline" })
+    ] }) : /* @__PURE__ */ jsx("p", { className: "text-xs italic text-muted-foreground", children: "No rows returned." })),
+    !resultRows && writeOutcome && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
+        writeOutcome.counts.map((c) => /* @__PURE__ */ jsxs("span", { children: [
+          c.label,
+          " ",
+          c.n,
+          " ",
+          rowWord(c.n)
+        ] }, c.label)),
+        writeOutcome.counts.length === 0 && /* @__PURE__ */ jsx("span", { children: "Write completed" }),
+        idStrings && idStrings.length > 0 && /* @__PURE__ */ jsx(IdListChip, { ids: idStrings })
+      ] }),
+      writeOutcome.data != null && /* @__PURE__ */ jsx(ResultValue, { value: writeOutcome.data, density: "inline" }),
+      !idStrings && writeOutcome.ids && writeOutcome.ids.length > 0 && /* @__PURE__ */ jsx(ResultValue, { value: writeOutcome.ids, density: "inline" })
+    ] }),
+    !resultRows && !writeOutcome && entry.result != null && /* @__PURE__ */ jsx(ToolResultValue, { value: entry.result, density: "inline" }),
+    queryStr ? /* @__PURE__ */ jsx(SourceDisclosure, { label: "SQL", children: /* @__PURE__ */ jsx(SqlCodeBlock, { sql: queryStr }) }) : rawData !== void 0 ? /* @__PURE__ */ jsx(SourceDisclosure, { label: "payload", children: /* @__PURE__ */ jsx(JsonCodeBlock, { value: normalizePayload(rawData) }) }) : null
+  ] });
 };
 var SqlInline_default = SqlInline;
 export {

package/dist/tool-call-visualization/renderers/web/WebInline.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx } from "react/jsx-runtime";
 import { GenericRenderer } from "../../registry/GenericRenderer.js";
 import { getArg } from "../_shared.js";
 import { SearchInline } from "../search/SearchInline.js";
@@ -7,9 +7,9 @@ import { ScrapeInline } from "../scrape/ScrapeInline.js";
 import { resolveWebActionKind } from "./webAction.js";
 const WebInline = (props) => {
   const kind = resolveWebActionKind(getArg(props.entry, "action"));
-  if (kind === "search") return /* @__PURE__ */ React.createElement(SearchInline, { ...props });
-  if (kind === "read") return /* @__PURE__ */ React.createElement(ScrapeInline, { ...props });
-  return /* @__PURE__ */ React.createElement(GenericRenderer, { ...props });
+  if (kind === "search") return /* @__PURE__ */ jsx(SearchInline, { ...props });
+  if (kind === "read") return /* @__PURE__ */ jsx(ScrapeInline, { ...props });
+  return /* @__PURE__ */ jsx(GenericRenderer, { ...props });
 };
 export {
   WebInline

package/dist/tool-call-visualization/renderers/web/WebOverlay.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx } from "react/jsx-runtime";
 import { GenericRenderer } from "../../registry/GenericRenderer.js";
 import { getArg } from "../_shared.js";
 import { SearchOverlay } from "../search/SearchOverlay.js";
@@ -7,9 +7,9 @@ import { ScrapeOverlay } from "../scrape/ScrapeOverlay.js";
 import { resolveWebActionKind } from "./webAction.js";
 const WebOverlay = (props) => {
   const kind = resolveWebActionKind(getArg(props.entry, "action"));
-  if (kind === "search") return /* @__PURE__ */ React.createElement(SearchOverlay, { ...props });
-  if (kind === "read") return /* @__PURE__ */ React.createElement(ScrapeOverlay, { ...props });
-  return /* @__PURE__ */ React.createElement(GenericRenderer, { ...props });
+  if (kind === "search") return /* @__PURE__ */ jsx(SearchOverlay, { ...props });
+  if (kind === "read") return /* @__PURE__ */ jsx(ScrapeOverlay, { ...props });
+  return /* @__PURE__ */ jsx(GenericRenderer, { ...props });
 };
 export {
   WebOverlay

package/dist/tool-call-visualization/renderers/workbook/WorkbookGrid.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@ai-matrx/design-system";
 import {
   MOBILE_TABLE
@@ -14,23 +15,32 @@ function WorkbookGrid({
     rows.reduce((m, r) => Math.max(m, Array.isArray(r) ? r.length : 0), 0)
   );
   if (!rows.length || colCount === 0) {
-    return /* @__PURE__ */ React.createElement("div", { className: "px-3 py-6 text-center text-xs text-muted-foreground" }, "Empty sheet");
+    return /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-xs text-muted-foreground", children: "Empty sheet" });
   }
   const truncated = values.length > maxRows || rows.some((r) => Array.isArray(r) && r.length > maxCols);
-  return /* @__PURE__ */ React.createElement("div", { className: "overflow-auto" }, /* @__PURE__ */ React.createElement("table", { className: cn("border-collapse text-xs", MOBILE_TABLE) }, /* @__PURE__ */ React.createElement("tbody", null, rows.map((row, ri) => /* @__PURE__ */ React.createElement("tr", { key: ri }, Array.from({ length: colCount }).map((_, ci) => {
-    const cell = Array.isArray(row) ? row[ci] : void 0;
-    return /* @__PURE__ */ React.createElement(
-      "td",
-      {
-        key: ci,
-        className: cn(
-          "sm:max-w-[220px] sm:truncate whitespace-nowrap border border-border px-2 py-1 text-foreground",
-          ci === 0 && "max-sm:sticky max-sm:left-0 max-sm:z-10 max-sm:bg-card"
-        )
-      },
-      cell == null ? "" : String(cell)
-    );
-  }))))), truncated ? /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1 text-[10px] text-muted-foreground" }, "Showing ", rows.length, " \xD7 ", colCount, " (truncated)") : null);
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-auto", children: [
+    /* @__PURE__ */ jsx("table", { className: cn("border-collapse text-xs", MOBILE_TABLE), children: /* @__PURE__ */ jsx("tbody", { children: rows.map((row, ri) => /* @__PURE__ */ jsx("tr", { children: Array.from({ length: colCount }).map((_, ci) => {
+      const cell = Array.isArray(row) ? row[ci] : void 0;
+      return /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: cn(
+            "sm:max-w-[220px] sm:truncate whitespace-nowrap border border-border px-2 py-1 text-foreground",
+            ci === 0 && "max-sm:sticky max-sm:left-0 max-sm:z-10 max-sm:bg-card"
+          ),
+          children: cell == null ? "" : String(cell)
+        },
+        ci
+      );
+    }) }, ri)) }) }),
+    truncated ? /* @__PURE__ */ jsxs("div", { className: "px-2 py-1 text-[10px] text-muted-foreground", children: [
+      "Showing ",
+      rows.length,
+      " \xD7 ",
+      colCount,
+      " (truncated)"
+    ] }) : null
+  ] });
 }
 export {
   WorkbookGrid

package/dist/tool-call-visualization/renderers/workbook/WorkbookInline.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Sheet, PanelRight, ExternalLink, Maximize2 } from "lucide-react";
 import { parseWorkbook } from "./parseWorkbook.js";
@@ -16,7 +17,7 @@ function WorkbookInline({
   const wb = useMemo(() => parseWorkbook(entry), [entry]);
   if (!wb.id && !wb.name) {
     if (!isTerminal(entry)) return null;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       EmptyResultCard,
       {
         expanded,
@@ -25,16 +26,21 @@ function WorkbookInline({
         accent: "green",
         title: "Workbook",
         did: "Finished a workbook action",
-        remedy: /* @__PURE__ */ React.createElement(React.Fragment, null, "Your workbooks are all listed at", " ", /* @__PURE__ */ React.createElement(
-          "a",
-          {
-            href: "/workbooks",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "font-medium text-foreground underline underline-offset-2"
-          },
-          "/workbooks"
-        ), onOpenOverlay ? ", and the full tool result is under Expand." : "."),
+        remedy: /* @__PURE__ */ jsxs(Fragment, { children: [
+          "Your workbooks are all listed at",
+          " ",
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "/workbooks",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "font-medium text-foreground underline underline-offset-2",
+              children: "/workbooks"
+            }
+          ),
+          onOpenOverlay ? ", and the full tool result is under Expand." : "."
+        ] }),
         actions: onOpenOverlay ? [{ label: "Expand", icon: Maximize2, onSelect: () => onOpenOverlay() }] : []
       }
     );
@@ -58,7 +64,7 @@ function WorkbookInline({
       separatorBefore: true
     });
   const subtitle = wb.sheetCount > 0 ? `${wb.sheetCount} ${wb.sheetCount === 1 ? "sheet" : "sheets"} \xB7 Workbook` : "Workbook";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     EntityCard,
     {
       expanded,
@@ -67,9 +73,12 @@ function WorkbookInline({
       accent: "green",
       title: name,
       subtitle,
-      actions
-    },
-    wb.firstSheet ? /* @__PURE__ */ React.createElement("div", null, wb.firstSheet.name ? /* @__PURE__ */ React.createElement("div", { className: "border-b border-border px-3 py-1.5 text-[11px] font-medium text-muted-foreground" }, wb.firstSheet.name) : null, /* @__PURE__ */ React.createElement(WorkbookGrid, { values: wb.firstSheet.values, maxRows: 6, maxCols: 6 })) : null
+      actions,
+      children: wb.firstSheet ? /* @__PURE__ */ jsxs("div", { children: [
+        wb.firstSheet.name ? /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-1.5 text-[11px] font-medium text-muted-foreground", children: wb.firstSheet.name }) : null,
+        /* @__PURE__ */ jsx(WorkbookGrid, { values: wb.firstSheet.values, maxRows: 6, maxCols: 6 })
+      ] }) : null
+    }
   );
 }
 export {

package/dist/tool-call-visualization/renderers/workbook/WorkbookOverlay.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Sheet, ExternalLink } from "lucide-react";
 import { parseWorkbook } from "./parseWorkbook.js";
@@ -6,17 +7,30 @@ import { WorkbookGrid } from "./WorkbookGrid.js";
 function WorkbookOverlay({ entry }) {
   const wb = useMemo(() => parseWorkbook(entry), [entry]);
   const name = wb.name ?? "Workbook";
-  return /* @__PURE__ */ React.createElement("div", { className: "flex h-full flex-col overflow-hidden bg-card" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 border-b border-border px-4 py-2" }, /* @__PURE__ */ React.createElement(Sheet, { className: "h-4 w-4 shrink-0 text-primary" }), /* @__PURE__ */ React.createElement("span", { className: "truncate text-sm font-medium text-foreground" }, name), wb.firstSheet?.name ? /* @__PURE__ */ React.createElement("span", { className: "text-xs text-muted-foreground" }, "\xB7 ", wb.firstSheet.name) : null, wb.id ? /* @__PURE__ */ React.createElement(
-    "a",
-    {
-      href: `/workbooks/${wb.id}`,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: "ml-auto inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted"
-    },
-    /* @__PURE__ */ React.createElement(ExternalLink, { className: "h-4 w-4" }),
-    "Open full editor"
-  ) : null), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-auto p-4" }, wb.firstSheet ? /* @__PURE__ */ React.createElement(WorkbookGrid, { values: wb.firstSheet.values, maxRows: 60, maxCols: 26 }) : /* @__PURE__ */ React.createElement("div", { className: "py-10 text-center text-sm text-muted-foreground" }, "No sheet data to preview.")));
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden bg-card", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-4 py-2", children: [
+      /* @__PURE__ */ jsx(Sheet, { className: "h-4 w-4 shrink-0 text-primary" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: name }),
+      wb.firstSheet?.name ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        "\xB7 ",
+        wb.firstSheet.name
+      ] }) : null,
+      wb.id ? /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: `/workbooks/${wb.id}`,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "ml-auto inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted",
+          children: [
+            /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" }),
+            "Open full editor"
+          ]
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children: wb.firstSheet ? /* @__PURE__ */ jsx(WorkbookGrid, { values: wb.firstSheet.values, maxRows: 60, maxCols: 26 }) : /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-sm text-muted-foreground", children: "No sheet data to preview." }) })
+  ] });
 }
 export {
   WorkbookOverlay

package/dist/tool-call-visualization/renderers/working-document/PatchDiffInline.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
 import { cn } from "@ai-matrx/design-system";
 import { useAppSelector } from "../../../store/hooks.js";
 import { selectWorkingDocContent } from "../../../agents/redux/execution-system/instance-working-document/instance-working-document.selectors.js";
@@ -36,7 +37,7 @@ function isEffectivelyRewrite(before, after) {
 const Paper = ({
   attached,
   children
-}) => /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
@@ -44,9 +45,9 @@ const Paper = ({
       // Attached: this sheet continues the ArtifactResultBar header above it —
       // square top, no top border, one continuous surface.
       attached ? "rounded-b-xl rounded-t-none border-t-0" : "rounded-xl"
-    )
-  },
-  children
+    ),
+    children
+  }
 );
 const PAPER_TEXT = "text-[13px] leading-relaxed";
 const PatchDiffInline = (props) => {
@@ -86,13 +87,13 @@ const PatchDiffInline = (props) => {
   const isStructural = command !== null && STRUCTURAL_PATCH_COMMANDS.has(command);
   const hasText = after !== null && before !== null;
   if (isStructural || !hasText) {
-    return /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground" }, isStructural ? "Structured update applied." : isTerminal(entry) ? "Updated." : "Updating\u2026");
+    return /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: isStructural ? "Structured update applied." : isTerminal(entry) ? "Updated." : "Updating\u2026" });
   }
   const rewrite = isEffectivelyRewrite(before, after);
-  return /* @__PURE__ */ React.createElement(Paper, { attached }, rewrite ? (
+  return /* @__PURE__ */ jsx(Paper, { attached, children: rewrite ? (
     // Full rewrite (or fresh body): the final document, no highlights.
-    /* @__PURE__ */ React.createElement("div", { className: `whitespace-pre-wrap break-words text-foreground ${PAPER_TEXT}` }, after)
-  ) : /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ jsx("div", { className: `whitespace-pre-wrap break-words text-foreground ${PAPER_TEXT}`, children: after })
+  ) : /* @__PURE__ */ jsx(
     AnimatedDiffReveal,
     {
       before,
@@ -100,7 +101,7 @@ const PatchDiffInline = (props) => {
       reveal: { active: animate, replayKey: entry.callId },
       className: PAPER_TEXT
     }
-  ));
+  ) });
 };
 var PatchDiffInline_default = PatchDiffInline;
 export {

package/dist/tool-call-visualization/result-fields/EmptyResult.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Inbox } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
 const EmptyResult = ({
@@ -8,17 +8,19 @@ const EmptyResult = ({
   className
 }) => {
   const full = density === "full";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "flex items-center gap-2 text-muted-foreground",
         full ? "flex-col justify-center py-10 text-sm" : "py-2 text-xs",
         className
-      )
-    },
-    /* @__PURE__ */ React.createElement(Inbox, { className: cn("flex-shrink-0 opacity-60", full ? "h-6 w-6" : "h-3.5 w-3.5") }),
-    /* @__PURE__ */ React.createElement("span", null, message)
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Inbox, { className: cn("flex-shrink-0 opacity-60", full ? "h-6 w-6" : "h-3.5 w-3.5") }),
+        /* @__PURE__ */ jsx("span", { children: message })
+      ]
+    }
   );
 };
 export {