@tangle-network/sandbox-ui 0.91.0 → 0.91.2

package/dist/chat.js

@@ -19,7 +19,7 @@ import {
   snapHarnessToModel,
   snapModelToHarness,
   validateComposerFiles
-} from "./chunk-GHG4TCDS.js";
+} from "./chunk-QMY3XVH3.js";
 import "./chunk-TK46XFLM.js";
 import {
   MENTION_PILL_CLASS

package/dist/{chunk-GHG4TCDS.js → chunk-QMY3XVH3.js}

@@ -676,88 +676,96 @@ function HarnessDropdown({
       }
     );
   }
-  return /* @__PURE__ */ jsxs3(DropdownMenu2.Root, { children: [
-    /* @__PURE__ */ jsx3(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
-      "button",
-      {
-        type: "button",
-        disabled: disabled || locked,
-        title: locked ? lockReason : void 0,
-        className: cn(
-          "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5",
-          "text-xs font-medium text-foreground shadow-sm transition-colors",
-          "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-          "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
-          "disabled:cursor-not-allowed disabled:opacity-60",
-          triggerClassName
-        ),
-        "aria-label": "Agent harness",
-        children: [
-          /* @__PURE__ */ jsx3(HarnessLogo, { type: value, size: 16, className: "shrink-0" }),
-          /* @__PURE__ */ jsx3("span", { className: "truncate", children: selected?.label ?? value }),
-          !locked && /* @__PURE__ */ jsx3(ChevronDown3, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx3(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs3(
-      DropdownMenu2.Content,
-      {
-        side,
-        align,
-        avoidCollisions,
-        collisionPadding: 24,
-        sideOffset: 6,
-        className: pickerMenuContentClass,
-        children: [
-          showSearch && /* @__PURE__ */ jsx3(
-            PickerMenuSearch,
-            {
-              value: query,
-              onChange: setQuery,
-              placeholder: "Search agents..."
-            }
-          ),
-          /* @__PURE__ */ jsx3("div", { className: pickerMenuBodyClass, children: sections.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "No agents match." }) : sections.map((section) => /* @__PURE__ */ jsx3(PickerMenuSection, { label: section.label, children: section.items.map((option) => /* @__PURE__ */ jsxs3(
-            DropdownMenu2.Item,
-            {
-              onSelect: (event) => {
-                event.preventDefault();
-                onChange(option.type);
-              },
-              className: pickerMenuItemClass({
-                active: option.type === value
-              }),
-              children: [
-                /* @__PURE__ */ jsx3(
-                  HarnessLogo,
-                  {
-                    type: option.type,
-                    size: 20,
-                    className: "mt-0.5"
-                  }
-                ),
-                /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx3("span", { className: "min-w-0 truncate text-sm font-medium", children: option.label }),
-                    harnessAutonomyNote(option.type) && /* @__PURE__ */ jsx3(PickerMenuTag, { children: harnessAutonomyNote(option.type) })
-                  ] }),
-                  /* @__PURE__ */ jsx3(PickerMenuMeta, { parts: [option.description] })
-                ] })
-              ]
-            },
-            option.type
-          )) }, section.key)) }),
-          showSearch && /* @__PURE__ */ jsxs3(PickerMenuFooter, { children: [
-            filtered.length,
-            " of ",
-            options.length,
-            " agent",
-            options.length === 1 ? "" : "s"
-          ] })
-        ]
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsxs3(
+    DropdownMenu2.Root,
+    {
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) setQuery("");
+      },
+      children: [
+        /* @__PURE__ */ jsx3(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            type: "button",
+            disabled: disabled || locked,
+            title: locked ? lockReason : void 0,
+            className: cn(
+              "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5",
+              "text-xs font-medium text-foreground shadow-sm transition-colors",
+              "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
+              "disabled:cursor-not-allowed disabled:opacity-60",
+              triggerClassName
+            ),
+            "aria-label": "Agent harness",
+            children: [
+              /* @__PURE__ */ jsx3(HarnessLogo, { type: value, size: 16, className: "shrink-0" }),
+              /* @__PURE__ */ jsx3("span", { className: "truncate", children: selected?.label ?? value }),
+              !locked && /* @__PURE__ */ jsx3(ChevronDown3, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx3(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs3(
+          DropdownMenu2.Content,
+          {
+            side,
+            align,
+            avoidCollisions,
+            collisionPadding: 24,
+            sideOffset: 6,
+            className: pickerMenuContentClass,
+            children: [
+              showSearch && /* @__PURE__ */ jsx3(
+                PickerMenuSearch,
+                {
+                  value: query,
+                  onChange: setQuery,
+                  placeholder: "Search agents..."
+                }
+              ),
+              /* @__PURE__ */ jsx3("div", { className: pickerMenuBodyClass, children: sections.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "No agents match." }) : sections.map((section) => /* @__PURE__ */ jsx3(PickerMenuSection, { label: section.label, children: section.items.map((option) => /* @__PURE__ */ jsxs3(
+                DropdownMenu2.Item,
+                {
+                  onSelect: (event) => {
+                    event.preventDefault();
+                    onChange(option.type);
+                  },
+                  className: pickerMenuItemClass({
+                    active: option.type === value
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      HarnessLogo,
+                      {
+                        type: option.type,
+                        size: 20,
+                        className: "mt-0.5"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx3("span", { className: "min-w-0 truncate text-sm font-medium", children: option.label }),
+                        harnessAutonomyNote(option.type) && /* @__PURE__ */ jsx3(PickerMenuTag, { children: harnessAutonomyNote(option.type) })
+                      ] }),
+                      /* @__PURE__ */ jsx3(PickerMenuMeta, { parts: [option.description] })
+                    ] })
+                  ]
+                },
+                option.type
+              )) }, section.key)) }),
+              showSearch && /* @__PURE__ */ jsxs3(PickerMenuFooter, { children: [
+                filtered.length,
+                " of ",
+                options.length,
+                " agent",
+                options.length === 1 ? "" : "s"
+              ] })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
 }
 function modelReasoningCapability(models, canonicalId) {
   if (!models || !canonicalId) return null;

package/dist/{chunk-QORIZARI.js → chunk-TIEOKIMX.js}

@@ -79,7 +79,12 @@ function useSessionStream({
   const reconnectTimerRef = useRef(null);
   const streamingMsgIdRef = useRef(null);
   const insertionCounterRef = useRef(0);
+  const echoCounterRef = useRef(0);
+  const pendingEchoesRef = useRef(/* @__PURE__ */ new Map());
   const handleSSEEventRef = useRef(null);
+  useEffect(() => {
+    pendingEchoesRef.current.clear();
+  }, [sessionId]);
   const refetch = useCallback(async () => {
     if (!token || !sessionId || !apiUrl) return;
     try {
@@ -93,8 +98,12 @@ function useSessionStream({
         newMessages.push(message);
         newPartMap[message.id] = parts;
       }
-      setMessages(newMessages);
-      setPartMap(newPartMap);
+      const echoes = [...pendingEchoesRef.current.values()];
+      setMessages([...newMessages, ...echoes.map((echo) => echo.message)]);
+      setPartMap({
+        ...newPartMap,
+        ...Object.fromEntries(echoes.map((echo) => [echo.message.id, echo.parts]))
+      });
       streamingMsgIdRef.current = null;
     } catch (err) {
       const msg = err instanceof Error ? err.message : "Failed to fetch messages";
@@ -240,18 +249,34 @@ function useSessionStream({
     } else if (type === "session.idle") {
       setIsStreaming(false);
       streamingMsgIdRef.current = null;
+      pendingEchoesRef.current.clear();
       refetch();
     } else if (type === "session.error") {
       setIsStreaming(false);
       streamingMsgIdRef.current = null;
       const errorMsg = props.error ?? props.message ?? "Agent error";
       setError(errorMsg);
+      pendingEchoesRef.current.clear();
       refetch();
     }
   }, [refetch]);
   handleSSEEventRef.current = handleSSEEvent;
   const send = useCallback(async (text, options) => {
     if (!token || !sessionId || !apiUrl) return;
+    const echoId = `local-echo-${echoCounterRef.current++}`;
+    const echo = {
+      message: {
+        id: echoId,
+        role: "user",
+        time: { created: Date.now() },
+        _insertionIndex: insertionCounterRef.current++
+      },
+      parts: [{ type: "text", text }]
+    };
+    pendingEchoesRef.current.set(echoId, echo);
+    setMessages((prev) => [...prev, echo.message]);
+    setPartMap((prev) => ({ ...prev, [echoId]: echo.parts }));
+    setIsStreaming(true);
     try {
       const url = `${apiUrl}/session/sessions/${encodeURIComponent(sessionId)}/messages`;
       await fetchJson(url, token, {
@@ -266,8 +291,18 @@ function useSessionStream({
           ...options?.reasoningEffort ? { reasoningEffort: options.reasoningEffort } : {}
         })
       });
-      setIsStreaming(true);
     } catch (err) {
+      pendingEchoesRef.current.delete(echoId);
+      setMessages((prev) => prev.filter((message) => message.id !== echoId));
+      setPartMap((prev) => {
+        if (!(echoId in prev)) return prev;
+        const next = { ...prev };
+        delete next[echoId];
+        return next;
+      });
+      if (pendingEchoesRef.current.size === 0 && !streamingMsgIdRef.current) {
+        setIsStreaming(false);
+      }
       const msg = err instanceof Error ? err.message : "Failed to send message";
       setError(msg);
     }

package/dist/hooks.js

@@ -21,7 +21,7 @@ import {
 import {
   useSessionStream,
   useSidecarAuth
-} from "./chunk-QORIZARI.js";
+} from "./chunk-TIEOKIMX.js";
 import {
   usePtySession
 } from "./chunk-KEYPUGS3.js";

package/dist/index.js

@@ -21,7 +21,7 @@ import {
 import {
   useSessionStream,
   useSidecarAuth
-} from "./chunk-QORIZARI.js";
+} from "./chunk-TIEOKIMX.js";
 import {
   activeSessionsAtom,
   addMessage,
@@ -91,7 +91,7 @@ import {
   snapHarnessToModel,
   snapModelToHarness,
   validateComposerFiles
-} from "./chunk-GHG4TCDS.js";
+} from "./chunk-QMY3XVH3.js";
 import {
   TOOL_CATEGORY_ICONS,
   cn,

package/dist/sdk-hooks.js

@@ -1,7 +1,7 @@
 import {
   useSessionStream,
   useSidecarAuth
-} from "./chunk-QORIZARI.js";
+} from "./chunk-TIEOKIMX.js";
 import "./chunk-CZ7CSFO4.js";
 
 // src/sdk-hooks.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.91.0",
+  "version": "0.91.2",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",