@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/tool-call-visualization/components/ToolTabBodies.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { resultToHuman } from "../utils/human-copy.js";
 import React from "react";
 import { useToolConversationId } from "./ToolConversationContext.js";
@@ -32,47 +33,64 @@ const InputView = ({
 }) => {
   const args = entry.arguments ?? {};
   const argCount = Object.keys(args).length;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex h-full flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-border bg-muted/30 px-3 py-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-xs text-muted-foreground" }, /* @__PURE__ */ React.createElement(Settings2, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ React.createElement("span", null, "Tool input"), /* @__PURE__ */ React.createElement(Badge, { variant: "outline", className: "px-1.5 py-0 text-[10px]" }, argCount, " ", argCount === 1 ? "param" : "params")), /* @__PURE__ */ React.createElement(
-    CopyButtons,
-    {
-      label: "Input",
-      size: "sm",
-      human: () => resultToHuman(args),
-      agent: () => buildAgentInput(
-        entry,
-        `Input parameters for the "${entry.toolName}" tool call.`,
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-border bg-muted/30 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Settings2, { className: "h-3.5 w-3.5" }),
+        /* @__PURE__ */ jsx("span", { children: "Tool input" }),
+        /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "px-1.5 py-0 text-[10px]", children: [
+          argCount,
+          " ",
+          argCount === 1 ? "param" : "params"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        CopyButtons,
         {
-          tool: entry.toolName,
-          callId: entry.callId,
-          arguments: args
+          label: "Input",
+          size: "sm",
+          human: () => resultToHuman(args),
+          agent: () => buildAgentInput(
+            entry,
+            `Input parameters for the "${entry.toolName}" tool call.`,
+            {
+              tool: entry.toolName,
+              callId: entry.callId,
+              arguments: args
+            }
+          )
         }
       )
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-auto px-3 py-2.5" }, argCount > 0 ? /* @__PURE__ */ React.createElement(KeyValueGrid, { value: args, density: "full" }) : /* @__PURE__ */ React.createElement(EmptyResult, { density: "full", message: "No input parameters" })));
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto px-3 py-2.5", children: argCount > 0 ? /* @__PURE__ */ jsx(KeyValueGrid, { value: args, density: "full" }) : /* @__PURE__ */ jsx(EmptyResult, { density: "full", message: "No input parameters" }) })
+  ] });
 };
 const OutputView = ({
   entry
 }) => {
   if (entry.result == null) {
-    return /* @__PURE__ */ React.createElement("div", { className: "p-4" }, /* @__PURE__ */ React.createElement(EmptyResult, { density: "full", message: "No result available yet." }));
+    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(EmptyResult, { density: "full", message: "No result available yet." }) });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-3 p-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-end" }, /* @__PURE__ */ React.createElement(
-    CopyButtons,
-    {
-      label: "Result",
-      size: "sm",
-      human: () => resultToHuman(entry.result),
-      agent: () => buildAgentInput(
-        entry,
-        `Result of the "${entry.toolName}" tool call.`,
-        {
-          tool: entry.toolName,
-          callId: entry.callId,
-          result: entry.result
-        }
-      )
-    }
-  )), /* @__PURE__ */ React.createElement(ToolResultValue, { value: entry.result, density: "full" }));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx(
+      CopyButtons,
+      {
+        label: "Result",
+        size: "sm",
+        human: () => resultToHuman(entry.result),
+        agent: () => buildAgentInput(
+          entry,
+          `Result of the "${entry.toolName}" tool call.`,
+          {
+            tool: entry.toolName,
+            callId: entry.callId,
+            result: entry.result
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ToolResultValue, { value: entry.result, density: "full" })
+  ] });
 };
 const ErrorView = ({
   entry
@@ -83,53 +101,87 @@ const ErrorView = ({
   const args = entry.arguments ?? {};
   const hasArgs = Object.keys(args).length > 0;
   const bundle = buildToolEntryBundle(entry);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex h-full flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-border bg-muted/30 px-3 py-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-xs text-muted-foreground" }, routed ? /* @__PURE__ */ React.createElement(Route, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ React.createElement(CircleAlert, { className: "h-3.5 w-3.5 text-destructive" }), /* @__PURE__ */ React.createElement("span", null, routed ? "Routed" : "Error"), entry.errorType && /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      variant: "outline",
-      className: "px-1.5 py-0 font-mono text-[10px]"
-    },
-    entry.errorType,
-    /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: entry.errorType })
-  )), /* @__PURE__ */ React.createElement(
-    CopyButtons,
-    {
-      label: "Error",
-      size: "sm",
-      human: () => toolEntryBundleToHuman(entry),
-      agent: () => buildAgentInput(
-        entry,
-        `Error from the "${entry.toolName}" tool call.`,
-        bundle
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-border bg-muted/30 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+        routed ? /* @__PURE__ */ jsx(Route, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx(CircleAlert, { className: "h-3.5 w-3.5 text-destructive" }),
+        /* @__PURE__ */ jsx("span", { children: routed ? "Routed" : "Error" }),
+        entry.errorType && /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: "outline",
+            className: "px-1.5 py-0 font-mono text-[10px]",
+            children: [
+              entry.errorType,
+              /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: entry.errorType })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        CopyButtons,
+        {
+          label: "Error",
+          size: "sm",
+          human: () => toolEntryBundleToHuman(entry),
+          agent: () => buildAgentInput(
+            entry,
+            `Error from the "${entry.toolName}" tool call.`,
+            bundle
+          )
+        }
       )
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: "flex-1 space-y-4 overflow-auto px-3 py-3" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm font-medium text-foreground" }, label), message ? /* @__PURE__ */ React.createElement("p", { className: "whitespace-pre-wrap break-words text-sm leading-relaxed text-muted-foreground" }, message) : /* @__PURE__ */ React.createElement("p", { className: "text-sm italic text-muted-foreground" }, "No error message was recorded. Check the Raw tab for events.")), hasArgs && /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5 border-t border-border pt-3" }, /* @__PURE__ */ React.createElement("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground" }, "Input that failed"), /* @__PURE__ */ React.createElement(KeyValueGrid, { value: args, density: "full" }))));
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-4 overflow-auto px-3 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: label }),
+        message ? /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm leading-relaxed text-muted-foreground", children: message }) : /* @__PURE__ */ jsx("p", { className: "text-sm italic text-muted-foreground", children: "No error message was recorded. Check the Raw tab for events." })
+      ] }),
+      hasArgs && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 border-t border-border pt-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Input that failed" }),
+        /* @__PURE__ */ jsx(KeyValueGrid, { value: args, density: "full" })
+      ] })
+    ] })
+  ] });
 };
 const RawDataView = ({
   entry
 }) => {
   const bundle = buildToolEntryBundle(entry);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex h-full flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-border bg-muted/30 px-3 py-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-xs text-muted-foreground" }, /* @__PURE__ */ React.createElement(FileCode2, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ React.createElement("span", null, "All"), /* @__PURE__ */ React.createElement(Badge, { variant: "outline", className: "px-1.5 py-0 text-[10px]" }, "tool \xB7 input \xB7 result", bundle.error ? " \xB7 error" : "")), /* @__PURE__ */ React.createElement(
-    CopyButtons,
-    {
-      label: "Raw data",
-      size: "sm",
-      human: () => toolEntryBundleToHuman(entry),
-      agent: () => buildAgentInput(
-        entry,
-        `Full tool/input/result/error for the "${entry.toolName}" tool call.`,
-        bundle
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-between border-b border-border bg-muted/30 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(FileCode2, { className: "h-3.5 w-3.5" }),
+        /* @__PURE__ */ jsx("span", { children: "All" }),
+        /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "px-1.5 py-0 text-[10px]", children: [
+          "tool \xB7 input \xB7 result",
+          bundle.error ? " \xB7 error" : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        CopyButtons,
+        {
+          label: "Raw data",
+          size: "sm",
+          human: () => toolEntryBundleToHuman(entry),
+          agent: () => buildAgentInput(
+            entry,
+            `Full tool/input/result/error for the "${entry.toolName}" tool call.`,
+            bundle
+          )
+        }
       )
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-hidden p-2" }, /* @__PURE__ */ React.createElement("div", { className: "h-full min-h-[280px] overflow-hidden rounded-md border border-border bg-card" }, /* @__PURE__ */ React.createElement(JsonInspector, { showSource: true, data: bundle }))));
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden p-2", children: /* @__PURE__ */ jsx("div", { className: "h-full min-h-[280px] overflow-hidden rounded-md border border-border bg-card", children: /* @__PURE__ */ jsx(JsonInspector, { showSource: true, data: bundle }) }) })
+  ] });
 };
 const EntryResultsBody = ({ entry, conversationId: conversationIdProp }) => {
   const contextConversationId = useToolConversationId();
   const conversationId = conversationIdProp ?? contextConversationId;
   if (!entry) {
-    return /* @__PURE__ */ React.createElement("div", { className: "p-8" }, /* @__PURE__ */ React.createElement(EmptyResult, { density: "full", message: "No tool data available" }));
+    return /* @__PURE__ */ jsx("div", { className: "p-8", children: /* @__PURE__ */ jsx(EmptyResult, { density: "full", message: "No tool data available" }) });
   }
-  if (entryHasError(entry)) return /* @__PURE__ */ React.createElement(ErrorView, { entry });
+  if (entryHasError(entry)) return /* @__PURE__ */ jsx(ErrorView, { entry });
   if (hasCustomRenderer(entry.toolName)) {
     const OverlayRenderer = getOverlayRenderer(entry.toolName);
     return React.createElement(OverlayRenderer, {
@@ -140,13 +192,13 @@ const EntryResultsBody = ({ entry, conversationId: conversationIdProp }) => {
       conversationId: conversationId ?? void 0
     });
   }
-  if (entry.result != null) return /* @__PURE__ */ React.createElement(OutputView, { entry });
-  return /* @__PURE__ */ React.createElement("div", { className: "p-8" }, /* @__PURE__ */ React.createElement(EmptyResult, { density: "full", message: "Results not yet available" }));
+  if (entry.result != null) return /* @__PURE__ */ jsx(OutputView, { entry });
+  return /* @__PURE__ */ jsx("div", { className: "p-8", children: /* @__PURE__ */ jsx(EmptyResult, { density: "full", message: "Results not yet available" }) });
 };
 const CustomOverlayBody = ({ entry, Component, conversationId: conversationIdProp }) => {
   const contextConversationId = useToolConversationId();
   const conversationId = conversationIdProp ?? contextConversationId;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex h-full flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-auto" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsx(
     Component,
     {
       entry,
@@ -155,7 +207,7 @@ const CustomOverlayBody = ({ entry, Component, conversationId: conversationIdPro
       isPersisted: false,
       conversationId: conversationId ?? void 0
     }
-  )));
+  ) }) });
 };
 export {
   CustomOverlayBody,

package/dist/tool-call-visualization/components/ToolUpdatesOverlay.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 { FullScreenOverlay } from "../../host/ui-slots.js";
 import { CopyButtons } from "../../host/ui-slots.js";
 import { getOverlayTabs, getToolDisplayName } from "../registry/registry.js";
@@ -18,58 +19,75 @@ import {
 import { Button } from "@ai-matrx/design-system/controls";
 const EntrySelector = ({ entries, selectedCallId, onSelect }) => {
   if (entries.length <= 1) return null;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-shrink-0 items-center gap-1.5 overflow-x-auto border-b border-border bg-muted/40 px-3 py-1.5 scrollbar-none" }, /* @__PURE__ */ React.createElement("span", { className: "mr-1 flex-shrink-0 text-xs text-muted-foreground" }, "Tool"), entries.map((entry, idx) => {
-    const label = getToolDisplayName(entry.toolName);
-    const isActive = entry.callId === selectedCallId;
-    return /* @__PURE__ */ React.createElement(Button, { variant: "outline", pressed: !!isActive, key: entry.callId, onClick: () => onSelect(entry.callId) }, idx + 1, ". ", label);
-  }), /* @__PURE__ */ React.createElement("div", { className: "ml-auto flex-shrink-0" }, /* @__PURE__ */ React.createElement(
-    CopyButtons,
-    {
-      label: `All ${entries.length} tools`,
-      size: "sm",
-      human: () => toolEntriesSummaryToHuman(entries),
-      agent: () => ({
-        kind: "tool-results",
-        location: "AI Matrx \u2014 Tool updates overlay",
-        description: "Every tool call in this group.",
-        data: buildToolEntriesSummary(entries),
-        attributes: { count: String(entries.length) }
-      })
-    }
-  )));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-1.5 overflow-x-auto border-b border-border bg-muted/40 px-3 py-1.5 scrollbar-none", children: [
+    /* @__PURE__ */ jsx("span", { className: "mr-1 flex-shrink-0 text-xs text-muted-foreground", children: "Tool" }),
+    entries.map((entry, idx) => {
+      const label = getToolDisplayName(entry.toolName);
+      const isActive = entry.callId === selectedCallId;
+      return /* @__PURE__ */ jsxs(Button, { variant: "outline", pressed: !!isActive, onClick: () => onSelect(entry.callId), children: [
+        idx + 1,
+        ". ",
+        label
+      ] }, entry.callId);
+    }),
+    /* @__PURE__ */ jsx("div", { className: "ml-auto flex-shrink-0", children: /* @__PURE__ */ jsx(
+      CopyButtons,
+      {
+        label: `All ${entries.length} tools`,
+        size: "sm",
+        human: () => toolEntriesSummaryToHuman(entries),
+        agent: () => ({
+          kind: "tool-results",
+          location: "AI Matrx \u2014 Tool updates overlay",
+          description: "Every tool call in this group.",
+          data: buildToolEntriesSummary(entries),
+          attributes: { count: String(entries.length) }
+        })
+      }
+    ) })
+  ] });
 };
 const ResultsTabContent = ({ entries, selectedCallId, onSelect }) => {
   const entry = entries.find((e) => e.callId === selectedCallId) ?? entries[0] ?? null;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col h-full" }, /* @__PURE__ */ React.createElement(
-    EntrySelector,
-    {
-      entries,
-      selectedCallId: entry?.callId ?? "",
-      onSelect
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-auto" }, /* @__PURE__ */ React.createElement(EntryResultsBody, { entry })));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx(
+      EntrySelector,
+      {
+        entries,
+        selectedCallId: entry?.callId ?? "",
+        onSelect
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsx(EntryResultsBody, { entry }) })
+  ] });
 };
 const InputTabContent = ({ entries, selectedCallId, onSelect }) => {
   const entry = entries.find((e) => e.callId === selectedCallId) ?? entries[0] ?? null;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col h-full" }, /* @__PURE__ */ React.createElement(
-    EntrySelector,
-    {
-      entries,
-      selectedCallId: entry?.callId ?? "",
-      onSelect
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-hidden" }, entry ? /* @__PURE__ */ React.createElement(InputView, { entry }) : /* @__PURE__ */ React.createElement("div", { className: "p-8 text-center text-muted-foreground" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "No tool data available"))));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx(
+      EntrySelector,
+      {
+        entries,
+        selectedCallId: entry?.callId ?? "",
+        onSelect
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: entry ? /* @__PURE__ */ jsx(InputView, { entry }) : /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No tool data available" }) }) })
+  ] });
 };
 const RawTabContent = ({ entries, selectedCallId, onSelect }) => {
   const entry = entries.find((e) => e.callId === selectedCallId) ?? entries[0] ?? null;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col h-full" }, /* @__PURE__ */ React.createElement(
-    EntrySelector,
-    {
-      entries,
-      selectedCallId: entry?.callId ?? "",
-      onSelect
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-hidden" }, entry ? /* @__PURE__ */ React.createElement(RawDataView, { entry }) : /* @__PURE__ */ React.createElement("div", { className: "p-8 text-center text-muted-foreground" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "No tool data available"))));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx(
+      EntrySelector,
+      {
+        entries,
+        selectedCallId: entry?.callId ?? "",
+        onSelect
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: entry ? /* @__PURE__ */ jsx(RawDataView, { entry }) : /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No tool data available" }) }) })
+  ] });
 };
 const ToolUpdatesOverlay = ({
   isOpen,
@@ -114,7 +132,7 @@ const ToolUpdatesOverlay = ({
       {
         id: "input",
         label: "Input",
-        content: /* @__PURE__ */ React.createElement(
+        content: /* @__PURE__ */ jsx(
           InputTabContent,
           {
             entries,
@@ -126,7 +144,7 @@ const ToolUpdatesOverlay = ({
       {
         id: "raw",
         label: "Raw",
-        content: /* @__PURE__ */ React.createElement(
+        content: /* @__PURE__ */ jsx(
           RawTabContent,
           {
             entries,
@@ -140,7 +158,7 @@ const ToolUpdatesOverlay = ({
       const customTabDefs = customOverlayTabs.map((spec) => ({
         id: spec.id,
         label: spec.label,
-        content: /* @__PURE__ */ React.createElement(CustomOverlayBody, { entry: selectedEntry, Component: spec.Component })
+        content: /* @__PURE__ */ jsx(CustomOverlayBody, { entry: selectedEntry, Component: spec.Component })
       }));
       return [...customTabDefs, ...adminTabs];
     }
@@ -148,7 +166,7 @@ const ToolUpdatesOverlay = ({
       {
         id: "results",
         label: "Results",
-        content: /* @__PURE__ */ React.createElement(
+        content: /* @__PURE__ */ jsx(
           ResultsTabContent,
           {
             entries,
@@ -171,7 +189,7 @@ const ToolUpdatesOverlay = ({
     if (entries.length > 1) return `${entries.length} Tools`;
     return getToolDisplayName(entries[0].toolName);
   }, [entries]);
-  return /* @__PURE__ */ React.createElement(ToolConversationProvider, { conversationId }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(ToolConversationProvider, { conversationId, children: /* @__PURE__ */ jsx(
     FullScreenOverlay,
     {
       isOpen,
@@ -183,7 +201,7 @@ const ToolUpdatesOverlay = ({
       width: "95vw",
       height: "95dvh"
     }
-  ));
+  ) });
 };
 var ToolUpdatesOverlay_default = ToolUpdatesOverlay;
 export {

package/dist/tool-call-visualization/components/agentWorkTurn.js

@@ -1,5 +1,6 @@
 "use client";
-import React, {
+import { jsx } from "react/jsx-runtime";
+import {
   createContext,
   useCallback,
   useContext,
@@ -23,7 +24,7 @@ function AgentWorkMemberScope({
   index,
   children
 }) {
-  return /* @__PURE__ */ React.createElement(AgentWorkMemberContext.Provider, { value: index }, children);
+  return /* @__PURE__ */ jsx(AgentWorkMemberContext.Provider, { value: index, children });
 }
 function AgentWorkTurnProvider({
   turnKey,
@@ -66,8 +67,7 @@ function AgentWorkTurnProvider({
     (a, b) => a.memberIndex - b.memberIndex || a.order - b.order
   );
   const primaryId = sorted[0]?.id ?? null;
-  const known = sorted.filter((g) => g.durationMs !== null);
-  const totalDurationMs = known.length > 0 ? known.reduce((sum, g) => sum + (g.durationMs ?? 0), 0) : null;
+  const totalDurationMs = sorted.length > 0 && sorted.every((g) => g.durationMs !== null) ? sorted.reduce((sum, g) => sum + (g.durationMs ?? 0), 0) : null;
   const totalStepCount = sorted.reduce((sum, g) => sum + g.stepCount, 0);
   const cloudBrowserRunById = {};
   const browserGroups = groupCloudBrowserTurnFragments(
@@ -92,7 +92,7 @@ function AgentWorkTurnProvider({
       cloudBrowserRunById[fragmentId] = run;
     }
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     AgentWorkTurnContext.Provider,
     {
       value: {
@@ -104,9 +104,9 @@ function AgentWorkTurnProvider({
         setExpanded,
         registerCloudBrowserRun,
         cloudBrowserRunById
-      }
-    },
-    children
+      },
+      children
+    }
   );
 }
 function useCloudBrowserTurnRun({

package/dist/tool-call-visualization/db-renderer/DbToolRenderer.js

@@ -1,8 +1,8 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { DbToolRendererImplLazy as LazyImpl } from "../../ui/lazy/DbToolRendererImpl.js";
-import React from "react";
 const DbToolRenderer = (props) => {
-  return /* @__PURE__ */ React.createElement(LazyImpl, { ...props });
+  return /* @__PURE__ */ jsx(LazyImpl, { ...props });
 };
 var DbToolRenderer_default = DbToolRenderer;
 export {

package/dist/tool-call-visualization/db-renderer/DbToolRendererImpl.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import { GenericRenderer } from "../registry/GenericRenderer.js";
 import { ToolRendererErrorBoundary } from "./ToolRendererErrorBoundary.js";
 import {
@@ -32,16 +33,16 @@ const DbToolRendererImpl = ({
   }, [toolName, version]);
   if (component) {
     const Compiled = component;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ToolRendererErrorBoundary,
       {
         toolName,
-        fallback: /* @__PURE__ */ React.createElement(GenericRenderer, { ...toolProps })
-      },
-      /* @__PURE__ */ React.createElement(Compiled, { ...toolProps })
+        fallback: /* @__PURE__ */ jsx(GenericRenderer, { ...toolProps }),
+        children: /* @__PURE__ */ jsx(Compiled, { ...toolProps })
+      }
     );
   }
-  if (resolved) return /* @__PURE__ */ React.createElement(GenericRenderer, { ...toolProps });
+  if (resolved) return /* @__PURE__ */ jsx(GenericRenderer, { ...toolProps });
   return null;
 };
 export {

package/dist/tool-call-visualization/grouping/foldAgentWork.js

@@ -26,19 +26,26 @@ function foldAgentWork(items, { classify, stepsOf, spanOf }) {
       let stepCount = 0;
       let start = Infinity;
       let end = -Infinity;
-      for (const item of run) {
+      let firstTimed = -1;
+      let lastTimed = -1;
+      run.forEach((item, index) => {
         stepCount += Math.max(1, stepsOf(item));
         const span = spanOf(item);
         if (span) {
           if (span.start < start) start = span.start;
           if (span.end > end) end = span.end;
+          if (firstTimed < 0) firstTimed = index;
+          lastTimed = index;
         }
-      }
+      });
+      const untimedOutside = run.some(
+        (item, index) => classify(item) === "work" && spanOf(item) === null && (index < firstTimed || index > lastTimed)
+      );
       out.push({
         kind: "agent_work",
         items: run,
         stepCount,
-        durationMs: end > start ? Math.round(end - start) : null
+        durationMs: end > start && !untimedOutside ? Math.round(end - start) : null
       });
     } else {
       out.push(...run);