@ai-matrx/chat 0.5.0 → 0.5.3

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { ArrowDown, ArrowUp, ArrowUpDown, TableProperties } from "lucide-react";
 import { CHAT_WINDOWS, chatWindowsPort } from "../../host/windows.js";
@@ -51,39 +52,48 @@ const NestedCell = ({ value, depth, embedMedia }) => {
   const [open, setOpen] = React.useState(false);
   const summary = Array.isArray(value) ? `[${value.length} ${value.length === 1 ? "item" : "items"}]` : `{${Object.keys(value).length} fields}`;
   if (!open) {
-    return /* @__PURE__ */ React.createElement(Button, { variant: "quiet", onClick: (e) => {
+    return /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: (e) => {
       e.stopPropagation();
       setOpen(true);
-    }, title: "Expand" }, summary);
+    }, title: "Expand", children: summary });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", onClick: (e) => {
-    e.stopPropagation();
-    setOpen(false);
-  }, title: "Collapse", className: "mb-1" }, summary, "\xD7"), /* @__PURE__ */ React.createElement(ResultValue, { value, density: "inline", depth: depth + 1, embedMedia }));
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsxs(Button, { variant: "quiet", onClick: (e) => {
+      e.stopPropagation();
+      setOpen(false);
+    }, title: "Collapse", className: "mb-1", children: [
+      summary,
+      "\xD7"
+    ] }),
+    /* @__PURE__ */ jsx(ResultValue, { value, density: "inline", depth: depth + 1, embedMedia })
+  ] });
 };
 const TechnicalDetailsCell = ({ row, columns, depth, embedMedia }) => {
   const [open, setOpen] = React.useState(false);
   const details = Object.fromEntries(columns.map((column) => [column.key, row[column.key]]));
   const count = columns.length;
-  return /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", onClick: (event) => {
-    event.stopPropagation();
-    setOpen((value) => !value);
-  }, "aria-expanded": open }, open ? "Hide details" : `${count} ${count === 1 ? "detail" : "details"}`), open ? /* @__PURE__ */ React.createElement("div", { className: "mt-2 min-w-[16rem] max-w-md rounded-md bg-muted/30 p-2" }, /* @__PURE__ */ React.createElement(
-    ResultValue,
-    {
-      value: details,
-      density: "full",
-      depth: depth + 1,
-      embedMedia
-    }
-  )) : null);
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: (event) => {
+      event.stopPropagation();
+      setOpen((value) => !value);
+    }, "aria-expanded": open, children: open ? "Hide details" : `${count} ${count === 1 ? "detail" : "details"}` }),
+    open ? /* @__PURE__ */ jsx("div", { className: "mt-2 min-w-[16rem] max-w-md rounded-md bg-muted/30 p-2", children: /* @__PURE__ */ jsx(
+      ResultValue,
+      {
+        value: details,
+        density: "full",
+        depth: depth + 1,
+        embedMedia
+      }
+    ) }) : null
+  ] });
 };
 const LongTextCell = ({ value }) => {
   const [open, setOpen] = React.useState(false);
-  return /* @__PURE__ */ React.createElement(Button, { variant: "quiet", onClick: (e) => {
+  return /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: (e) => {
     e.stopPropagation();
     setOpen((v) => !v);
-  }, title: open ? "Collapse" : "Expand", className: "break-words" }, value);
+  }, title: open ? "Collapse" : "Expand", className: "break-words", children: value });
 };
 const LONG_CELL_CHARS = 80;
 const CHIP_LIST_MAX_ITEMS = 4;
@@ -101,10 +111,10 @@ const Cell = ({
 }) => {
   const mediaElementHint = mediaElementHintForKey(fieldKey);
   if (value === null || value === void 0) {
-    return /* @__PURE__ */ React.createElement("span", { className: "italic text-muted-foreground" }, "\u2014");
+    return /* @__PURE__ */ jsx("span", { className: "italic text-muted-foreground", children: "\u2014" });
   }
   if (typeof value === "string" && detectResultShape(value, { embedMedia }).kind === "media") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ResultValue,
       {
         value,
@@ -116,16 +126,16 @@ const Cell = ({
     );
   }
   if (typeof value === "string" && value.length > LONG_CELL_CHARS && !looksLikeMarkdown(value)) {
-    return /* @__PURE__ */ React.createElement(LongTextCell, { value });
+    return /* @__PURE__ */ jsx(LongTextCell, { value });
   }
   if (typeof value === "string") {
     const human = humanizeEnumValue(value);
     if (human) {
-      return /* @__PURE__ */ React.createElement("span", { className: "whitespace-nowrap", title: value }, human);
+      return /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", title: value, children: human });
     }
   }
   if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ResultValue,
       {
         value,
@@ -137,19 +147,19 @@ const Cell = ({
     );
   }
   if (isShortScalarList(value)) {
-    return /* @__PURE__ */ React.createElement("span", { className: "flex flex-wrap gap-1" }, value.map((item, i) => /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx("span", { className: "flex flex-wrap gap-1", children: value.map((item, i) => /* @__PURE__ */ jsx(
       "span",
       {
-        key: i,
-        className: "rounded bg-muted px-1 py-px text-[11px] leading-tight text-muted-foreground"
+        className: "rounded bg-muted px-1 py-px text-[11px] leading-tight text-muted-foreground",
+        children: String(item)
       },
-      String(item)
-    )));
+      i
+    )) });
   }
   if (Array.isArray(value) || isPlainObject(value)) {
-    return /* @__PURE__ */ React.createElement(NestedCell, { value, depth, embedMedia });
+    return /* @__PURE__ */ jsx(NestedCell, { value, depth, embedMedia });
   }
-  return /* @__PURE__ */ React.createElement("span", { className: "break-words" }, cellToText(value));
+  return /* @__PURE__ */ jsx("span", { className: "break-words", children: cellToText(value) });
 };
 function saveRows(rows) {
   chatWindowsPort().open(
@@ -221,84 +231,111 @@ const ResultTable = ({
       setSortDir("asc");
     }
   };
-  return /* @__PURE__ */ React.createElement("div", { className: cn("min-w-0 space-y-2", className) }, full && (rows.length > FILTER_THRESHOLD ? /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      type: "text",
-      value: filter,
-      onChange: (e) => setFilter(e.target.value),
-      onClick: (e) => e.stopPropagation(),
-      placeholder: `Filter ${rows.length} rows\u2026`,
-      className: "h-9 w-full max-w-xs rounded-md border border-border bg-background px-3 text-base text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring sm:text-sm"
-    }
-  ) : /* @__PURE__ */ React.createElement("span", { className: "text-xs text-muted-foreground" }, rows.length, " ", rows.length === 1 ? "row" : "rows")), /* @__PURE__ */ React.createElement("div", { className: "overflow-x-auto rounded-md border border-border/60" }, /* @__PURE__ */ React.createElement("table", { className: cn("border-collapse text-xs", MOBILE_TABLE) }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, visibleColumns.map((col, colIdx) => {
-    const active = sortKey === col.key;
-    return /* @__PURE__ */ React.createElement(
-      "th",
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 space-y-2", className), children: [
+    full && (rows.length > FILTER_THRESHOLD ? /* @__PURE__ */ jsx(
+      "input",
       {
-        key: col.key,
-        className: cn(
-          "border-b border-border/60 px-2.5 py-1.5 text-left align-bottom text-[11px] font-medium text-muted-foreground",
-          colIdx === 0 && MOBILE_TABLE_FROZEN_HEAD
-        )
-      },
-      /* @__PURE__ */ React.createElement(
-        "button",
+        type: "text",
+        value: filter,
+        onChange: (e) => setFilter(e.target.value),
+        onClick: (e) => e.stopPropagation(),
+        placeholder: `Filter ${rows.length} rows\u2026`,
+        className: "h-9 w-full max-w-xs rounded-md border border-border bg-background px-3 text-base text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring sm:text-sm"
+      }
+    ) : /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+      rows.length,
+      " ",
+      rows.length === 1 ? "row" : "rows"
+    ] })),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-md border border-border/60", children: /* @__PURE__ */ jsxs("table", { className: cn("border-collapse text-xs", MOBILE_TABLE), children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        visibleColumns.map((col, colIdx) => {
+          const active = sortKey === col.key;
+          return /* @__PURE__ */ jsx(
+            "th",
+            {
+              className: cn(
+                "border-b border-border/60 px-2.5 py-1.5 text-left align-bottom text-[11px] font-medium text-muted-foreground",
+                colIdx === 0 && MOBILE_TABLE_FROZEN_HEAD
+              ),
+              children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    cycleSort(col.key);
+                  },
+                  className: "inline-flex items-center gap-1 hover:text-foreground",
+                  title: `Sort by ${col.label}`,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "break-words", children: col.label }),
+                    active && sortDir === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3" }) : active && sortDir === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3 opacity-40" })
+                  ]
+                }
+              )
+            },
+            col.key
+          );
+        }),
+        collapseTechnicalColumns ? /* @__PURE__ */ jsx("th", { className: "border-b border-border/60 px-2.5 py-1.5 text-left align-bottom text-[11px] font-medium text-muted-foreground", children: "Details" }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: shown.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
         {
-          type: "button",
-          onClick: (e) => {
-            e.stopPropagation();
-            cycleSort(col.key);
+          colSpan: visibleColumns.length + (collapseTechnicalColumns ? 1 : 0),
+          className: "px-3 py-4 text-center text-xs text-muted-foreground",
+          children: "No rows match the filter"
+        }
+      ) }) : shown.map((row, ri) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-border/60 last:border-0 hover:bg-muted/30", children: [
+        visibleColumns.map((col, colIdx) => /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: cn(
+              "px-2.5 py-1.5 align-top text-foreground",
+              colIdx === 0 && MOBILE_TABLE_FROZEN_CELL
+            ),
+            children: /* @__PURE__ */ jsx(
+              Cell,
+              {
+                fieldKey: col.key,
+                value: row[col.key],
+                depth,
+                embedMedia
+              }
+            )
           },
-          className: "inline-flex items-center gap-1 hover:text-foreground",
-          title: `Sort by ${col.label}`
-        },
-        /* @__PURE__ */ React.createElement("span", { className: "break-words" }, col.label),
-        active && sortDir === "asc" ? /* @__PURE__ */ React.createElement(ArrowUp, { className: "h-3 w-3" }) : active && sortDir === "desc" ? /* @__PURE__ */ React.createElement(ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ React.createElement(ArrowUpDown, { className: "h-3 w-3 opacity-40" })
-      )
-    );
-  }), collapseTechnicalColumns ? /* @__PURE__ */ React.createElement("th", { className: "border-b border-border/60 px-2.5 py-1.5 text-left align-bottom text-[11px] font-medium text-muted-foreground" }, "Details") : null)), /* @__PURE__ */ React.createElement("tbody", null, shown.length === 0 ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
-    "td",
-    {
-      colSpan: visibleColumns.length + (collapseTechnicalColumns ? 1 : 0),
-      className: "px-3 py-4 text-center text-xs text-muted-foreground"
-    },
-    "No rows match the filter"
-  )) : shown.map((row, ri) => /* @__PURE__ */ React.createElement("tr", { key: ri, className: "border-b border-border/60 last:border-0 hover:bg-muted/30" }, visibleColumns.map((col, colIdx) => /* @__PURE__ */ React.createElement(
-    "td",
-    {
-      key: col.key,
-      className: cn(
-        "px-2.5 py-1.5 align-top text-foreground",
-        colIdx === 0 && MOBILE_TABLE_FROZEN_CELL
-      )
-    },
-    /* @__PURE__ */ React.createElement(
-      Cell,
-      {
-        fieldKey: col.key,
-        value: row[col.key],
-        depth,
-        embedMedia
-      }
-    )
-  )), collapseTechnicalColumns ? /* @__PURE__ */ React.createElement("td", { className: "px-2.5 py-1.5 align-top text-foreground" }, /* @__PURE__ */ React.createElement(
-    TechnicalDetailsCell,
-    {
-      row,
-      columns: technicalColumns,
-      depth,
-      embedMedia
-    }
-  )) : null))))), (remaining > 0 || canSave) && /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-3" }, remaining > 0 && /* @__PURE__ */ React.createElement(Button, { variant: "quiet", tone: "primary", onClick: (e) => {
-    e.stopPropagation();
-    setShowAll(true);
-  } }, "+", remaining, " more ", remaining === 1 ? "row" : "rows"), canSave && // THE ONE "Save to a table" (W1.6, AGENTS-ON-DATA item 3): every row the
-  // tool returned — never only the inline three — through the host's overlay.
-  /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(TableProperties, null), onClick: (e) => {
-    e.stopPropagation();
-    saveRows(rows);
-  }, className: "ml-auto" }, "Save to a table")));
+          col.key
+        )),
+        collapseTechnicalColumns ? /* @__PURE__ */ jsx("td", { className: "px-2.5 py-1.5 align-top text-foreground", children: /* @__PURE__ */ jsx(
+          TechnicalDetailsCell,
+          {
+            row,
+            columns: technicalColumns,
+            depth,
+            embedMedia
+          }
+        ) }) : null
+      ] }, ri)) })
+    ] }) }),
+    (remaining > 0 || canSave) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+      remaining > 0 && /* @__PURE__ */ jsxs(Button, { variant: "quiet", tone: "primary", onClick: (e) => {
+        e.stopPropagation();
+        setShowAll(true);
+      }, children: [
+        "+",
+        remaining,
+        " more ",
+        remaining === 1 ? "row" : "rows"
+      ] }),
+      canSave && // THE ONE "Save to a table" (W1.6, AGENTS-ON-DATA item 3): every row the
+      // tool returned — never only the inline three — through the host's overlay.
+      /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(TableProperties, {}), onClick: (e) => {
+        e.stopPropagation();
+        saveRows(rows);
+      }, className: "ml-auto", children: "Save to a table" })
+    ] })
+  ] });
 };
 export {
   ResultTable,

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { cn } from "@ai-matrx/design-system";
 import { detectResultShape, looksLikeMarkdown } from "./shape.js";
@@ -26,23 +27,36 @@ const InlineText = ({ value }) => {
   const lines = value.split("\n");
   const isLong = lines.length > INLINE_TEXT_LINES || value.length > 600;
   if (!isLong) {
-    return /* @__PURE__ */ React.createElement("p", { className: "whitespace-pre-wrap break-words text-sm text-foreground" }, value);
+    return /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm text-foreground", children: value });
   }
   const shown = expanded ? value : lines.slice(0, INLINE_TEXT_LINES).join("\n");
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "whitespace-pre-wrap break-words text-sm text-foreground" }, shown), /* @__PURE__ */ React.createElement(Button, { variant: "quiet", tone: "primary", onClick: (e) => {
-    e.stopPropagation();
-    setExpanded((v) => !v);
-  }, className: "mt-1" }, expanded ? "Show less" : "Show more"));
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm text-foreground", children: shown }),
+    /* @__PURE__ */ jsx(Button, { variant: "quiet", tone: "primary", onClick: (e) => {
+      e.stopPropagation();
+      setExpanded((v) => !v);
+    }, className: "mt-1", children: expanded ? "Show less" : "Show more" })
+  ] });
 };
 const ScalarList = ({ items, density }) => {
   const [showAll, setShowAll] = React.useState(false);
   const cap = density === "inline" && !showAll ? INLINE_ROW_CAP : items.length;
   const shown = items.slice(0, cap);
   const remaining = items.length - shown.length;
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("ul", { className: "space-y-0.5" }, shown.map((item, i) => /* @__PURE__ */ React.createElement("li", { key: i, className: "flex gap-2 text-sm text-foreground" }, /* @__PURE__ */ React.createElement("span", { className: "select-none text-muted-foreground" }, "\u2022"), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1 break-words" }, typeof item === "string" && looksLikeMarkdown(item) ? /* @__PURE__ */ React.createElement(ResultMarkdown, { content: item, density }) : item === null ? /* @__PURE__ */ React.createElement("span", { className: "italic text-muted-foreground" }, "null") : String(item))))), 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-1", children: [
+    /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: shown.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex gap-2 text-sm text-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "select-none text-muted-foreground", children: "\u2022" }),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 break-words", children: typeof item === "string" && looksLikeMarkdown(item) ? /* @__PURE__ */ jsx(ResultMarkdown, { content: item, density }) : item === null ? /* @__PURE__ */ jsx("span", { className: "italic text-muted-foreground", children: "null" }) : String(item) })
+    ] }, i)) }),
+    remaining > 0 && /* @__PURE__ */ jsxs(Button, { variant: "quiet", tone: "primary", onClick: (e) => {
+      e.stopPropagation();
+      setShowAll(true);
+    }, children: [
+      "+",
+      remaining,
+      " more"
+    ] })
+  ] });
 };
 const ResultValue = ({
   value,
@@ -59,20 +73,20 @@ const ResultValue = ({
     depth === 0 && shape.kind === "kindInstance"
   );
   if (density === "inline" && depth > INLINE_MAX_DEPTH && (shape.kind === "object" || shape.kind === "table") && !valueCarriesKind(value)) {
-    return /* @__PURE__ */ React.createElement(ResultJson, { data: value, className });
+    return /* @__PURE__ */ jsx(ResultJson, { data: value, className });
   }
   const content = (() => {
     switch (shape.kind) {
       case "empty":
-        return /* @__PURE__ */ React.createElement(EmptyResult, { density });
+        return /* @__PURE__ */ jsx(EmptyResult, { density });
       case "scalar":
-        return /* @__PURE__ */ React.createElement(ResultScalar, { value: shape.value, type: shape.type });
+        return /* @__PURE__ */ jsx(ResultScalar, { value: shape.value, type: shape.type });
       case "uuid":
-        return /* @__PURE__ */ React.createElement(ShortId, { value: shape.value });
+        return /* @__PURE__ */ jsx(ShortId, { value: shape.value });
       case "url":
-        return /* @__PURE__ */ React.createElement(UrlChip, { url: shape.value });
+        return /* @__PURE__ */ jsx(UrlChip, { url: shape.value });
       case "media":
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ jsx(
           ResultMedia,
           {
             mediaRef: shape.ref,
@@ -82,43 +96,46 @@ const ResultValue = ({
           }
         );
       case "file":
-        return /* @__PURE__ */ React.createElement(ResultFile, { file: shape.file, density });
+        return /* @__PURE__ */ jsx(ResultFile, { file: shape.file, density });
       case "attachmentList":
-        return /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-start gap-2" }, shape.items.map(
-          (item, index) => item.kind === "media" ? /* @__PURE__ */ React.createElement(
-            ResultMedia,
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-start gap-2", children: shape.items.map(
+            (item, index) => item.kind === "media" ? /* @__PURE__ */ jsx(
+              ResultMedia,
+              {
+                mediaRef: item.ref,
+                elementTypeHint: mediaElementHint,
+                alt: item.alt,
+                density
+              },
+              `${item.ref.file_id ?? item.ref.url ?? "media"}-${index}`
+            ) : /* @__PURE__ */ jsx(
+              ResultFile,
+              {
+                file: item.file,
+                density
+              },
+              `${item.file.file_id ?? item.file.url ?? item.file.file_name ?? "file"}-${index}`
+            )
+          ) }),
+          shape.metadata ? /* @__PURE__ */ jsx(
+            KeyValueGrid,
             {
-              key: `${item.ref.file_id ?? item.ref.url ?? "media"}-${index}`,
-              mediaRef: item.ref,
-              elementTypeHint: mediaElementHint,
-              alt: item.alt,
-              density
+              value: shape.metadata,
+              density,
+              depth: depth + 1,
+              embedMedia
             }
-          ) : /* @__PURE__ */ React.createElement(
-            ResultFile,
-            {
-              key: `${item.file.file_id ?? item.file.url ?? item.file.file_name ?? "file"}-${index}`,
-              file: item.file,
-              density
-            }
-          )
-        )), shape.metadata ? /* @__PURE__ */ React.createElement(
-          KeyValueGrid,
-          {
-            value: shape.metadata,
-            density,
-            depth: depth + 1,
-            embedMedia
-          }
-        ) : null);
+          ) : null
+        ] });
       case "text":
-        return shape.markdown ? /* @__PURE__ */ React.createElement(ResultMarkdown, { content: shape.value, density }) : density === "full" ? /* @__PURE__ */ React.createElement("p", { className: "whitespace-pre-wrap break-words text-sm text-foreground" }, shape.value) : /* @__PURE__ */ React.createElement(InlineText, { value: shape.value });
+        return shape.markdown ? /* @__PURE__ */ jsx(ResultMarkdown, { content: shape.value, density }) : density === "full" ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm text-foreground", children: shape.value }) : /* @__PURE__ */ jsx(InlineText, { value: shape.value });
       case "list":
-        return /* @__PURE__ */ React.createElement(ScalarList, { items: shape.items, density });
+        return /* @__PURE__ */ jsx(ScalarList, { items: shape.items, density });
       case "idList":
-        return /* @__PURE__ */ React.createElement(IdListChip, { ids: shape.ids });
+        return /* @__PURE__ */ jsx(IdListChip, { ids: shape.ids });
       case "table":
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ jsx(
           ResultTable,
           {
             rows: shape.rows,
@@ -129,9 +146,9 @@ const ResultValue = ({
           }
         );
       case "object":
-        return /* @__PURE__ */ React.createElement(KeyValueGrid, { value: shape.value, density, depth, embedMedia });
+        return /* @__PURE__ */ jsx(KeyValueGrid, { value: shape.value, density, depth, embedMedia });
       case "kindInstance":
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ jsx(
           KindValueNode,
           {
             value: shape.value,
@@ -142,43 +159,43 @@ const ResultValue = ({
           }
         );
       case "recordRef":
-        return /* @__PURE__ */ React.createElement(ResultRecordRef, { token: shape.token, id: shape.id, label: shape.label });
+        return /* @__PURE__ */ jsx(ResultRecordRef, { token: shape.token, id: shape.id, label: shape.label });
       case "textWithRecordRefs":
-        return /* @__PURE__ */ React.createElement("p", { className: "whitespace-pre-wrap break-words text-sm text-foreground" }, shape.segments.map(
+        return /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm text-foreground", children: shape.segments.map(
           (segment, index) => segment.type === "text" ? (
             // Position is the identity: a deterministic split of one string.
-            /* @__PURE__ */ React.createElement(TextWithDoors, { key: `t${index}`, text: segment.text })
-          ) : /* @__PURE__ */ React.createElement(
+            /* @__PURE__ */ jsx(TextWithDoors, { text: segment.text }, `t${index}`)
+          ) : /* @__PURE__ */ jsx(
             ResultRecordRef,
             {
-              key: `r${index}`,
               token: segment.token,
               id: segment.id,
               label: segment.label
-            }
+            },
+            `r${index}`
           )
-        ));
+        ) });
       case "kindList":
-        return /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, shape.items.map((item, index) => /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: shape.items.map((item, index) => /* @__PURE__ */ jsx(
           ResultValue,
           {
-            key: index,
             value: item,
             density,
             depth: depth + 1,
             embedMedia,
             mediaElementHint
-          }
-        )));
+          },
+          index
+        )) });
       case "json":
-        return /* @__PURE__ */ React.createElement(ResultJson, { data: shape.value });
+        return /* @__PURE__ */ jsx(ResultJson, { data: shape.value });
       default: {
         const _exhaustive = shape;
-        return /* @__PURE__ */ React.createElement(ResultJson, { data: _exhaustive });
+        return /* @__PURE__ */ jsx(ResultJson, { data: _exhaustive });
       }
     }
   })();
-  return /* @__PURE__ */ React.createElement("div", { className: cn("min-w-0", className) }, content);
+  return /* @__PURE__ */ jsx("div", { className: cn("min-w-0", className), children: content });
 };
 export {
   ResultValue

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Check, Copy } from "lucide-react";
 import { copyText } from "@ai-matrx/kit/clipboard";
@@ -27,8 +28,11 @@ const ShortId = ({
       timer.current = setTimeout(() => setCopied(false), 1500);
     });
   };
-  const display = variant === "full" ? /* @__PURE__ */ React.createElement("span", { className: "break-all font-mono text-xs text-foreground" }, value) : /* @__PURE__ */ React.createElement("span", { className: "font-mono text-xs text-foreground" }, value.slice(0, 8), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "\u2026"));
-  return /* @__PURE__ */ React.createElement(
+  const display = variant === "full" ? /* @__PURE__ */ jsx("span", { className: "break-all font-mono text-xs text-foreground", children: value }) : /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs text-foreground", children: [
+    value.slice(0, 8),
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2026" })
+  ] });
+  return /* @__PURE__ */ jsxs(
     "span",
     {
       className: cn(
@@ -36,10 +40,12 @@ const ShortId = ({
         variant === "full" && "w-full",
         className
       ),
-      title: variant === "compact" ? value : void 0
-    },
-    display,
-    /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ React.createElement(Check, null) : /* @__PURE__ */ React.createElement(Copy, null), glyphTone: copied ? "success" : void 0, onClick: onCopy, "aria-label": copied ? "Copied" : "Copy ID" })
+      title: variant === "compact" ? value : void 0,
+      children: [
+        display,
+        /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, onClick: onCopy, "aria-label": copied ? "Copied" : "Copy ID" })
+      ]
+    }
   );
 };
 const IdListChip = ({
@@ -64,18 +70,20 @@ const IdListChip = ({
       timer.current = setTimeout(() => setCopied(false), 1500);
     });
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "span",
     {
       className: cn(
         "inline-flex items-center gap-1 text-xs text-muted-foreground",
         className
-      )
-    },
-    ids.length,
-    " ",
-    ids.length === 1 ? "id" : "ids",
-    /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ React.createElement(Check, null) : /* @__PURE__ */ React.createElement(Copy, null), glyphTone: copied ? "success" : void 0, onClick: onCopy, "aria-label": copied ? "Copied" : "Copy ids", title: "Copy all ids" })
+      ),
+      children: [
+        ids.length,
+        " ",
+        ids.length === 1 ? "id" : "ids",
+        /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, onClick: onCopy, "aria-label": copied ? "Copied" : "Copy ids", title: "Copy all ids" })
+      ]
+    }
   );
 };
 export {