@tangle-network/sandbox-ui 0.18.0 → 0.20.1

package/dist/chat.d.ts

@@ -57,6 +57,13 @@ interface ArtifactAgentDockTransport {
         content: string;
         signal: AbortSignal;
     }): AsyncIterable<ArtifactDockStreamEvent>;
+    /** Stop the server-side run for a thread. Optional — when present, the dock
+     *  calls it on cancel/scope-switch BEFORE aborting the local fetch, so the
+     *  agent run is actually stopped (not orphaned, still billing) rather than
+     *  the client merely closing its reader. */
+    cancel?(args: {
+        threadId: string;
+    }): Promise<void> | void;
 }
 interface ArtifactAgentDockProps {
     scope: ArtifactScope;
@@ -95,7 +102,7 @@ declare function ArtifactAgentDock({ scope, open, onOpenChange, transport, defau
  * their own transport object.
  *
  * The expected NDJSON event shape:
- *   { type: "message.part.delta", data: { text: string } }   // assistant chunk
+ *   { type: "message.part.updated", data: { delta: string, part?: {type} } }  // assistant chunk
  *   { type: "error", data: { message: string, ... } }        // surface error
  *
  * Other event types are ignored — consumers that need tool-call rendering

package/dist/chat.js

@@ -10,7 +10,7 @@ import {
   ThinkingIndicator,
   UserMessage,
   createFetchTransport
-} from "./chunk-CNVE6KOM.js";
+} from "./chunk-MQ52AYJX.js";
 import "./chunk-EI44GEQ5.js";
 export {
   AgentTimeline,

package/dist/{chunk-GPT7VKK6.js → chunk-CP2L6B53.js}

@@ -1652,8 +1652,11 @@ function CheckRow({ check }) {
 }
 
 // src/workspace/task-board.tsx
-import { useMemo as useMemo5 } from "react";
+import {
+  useMemo as useMemo5
+} from "react";
 import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var INTERACTIVE_SELECTOR = 'button, a, input, textarea, select, [role="button"], [role="link"]';
 function TaskBoard({
   items,
   columns,
@@ -1686,10 +1689,24 @@ function TaskBoard({
         colItems.length === 0 && columnEmptyState,
         colItems.map((item, index) => {
           const card = /* @__PURE__ */ jsxs11(
-            "button",
+            "div",
             {
-              type: "button",
-              onClick: () => onClickItem?.(item),
+              role: onClickItem ? "button" : void 0,
+              tabIndex: onClickItem ? 0 : void 0,
+              onClick: (event) => {
+                if (!onClickItem) return;
+                const target = event.target;
+                const interactive = target.closest(INTERACTIVE_SELECTOR);
+                if (interactive && interactive !== event.currentTarget) return;
+                onClickItem(item);
+              },
+              onKeyDown: (event) => {
+                if (!onClickItem || event.currentTarget !== event.target) return;
+                if (event.key !== "Enter" && event.key !== " ") return;
+                if (event.repeat) return;
+                event.preventDefault();
+                onClickItem(item);
+              },
               className: "group w-full rounded-lg border border-border bg-card p-3 text-left transition-colors hover:border-accent/50",
               children: [
                 /* @__PURE__ */ jsx11("p", { className: "text-sm font-medium text-foreground", children: item.title }),

package/dist/{chunk-CNVE6KOM.js → chunk-MQ52AYJX.js}

@@ -121,6 +121,18 @@ function defaultScopeLabel(scope) {
 function normalizeRole(role) {
   return role === "assistant" || role === "system" ? role : "user";
 }
+function createDockMessageId() {
+  const c = typeof globalThis !== "undefined" ? globalThis.crypto : void 0;
+  if (c && typeof c.randomUUID === "function") return c.randomUUID();
+  if (c && typeof c.getRandomValues === "function") {
+    const b = c.getRandomValues(new Uint8Array(16));
+    b[6] = b[6] & 15 | 64;
+    b[8] = b[8] & 63 | 128;
+    const h = Array.from(b, (x) => x.toString(16).padStart(2, "0")).join("");
+    return `${h.slice(0, 8)}-${h.slice(8, 12)}-${h.slice(12, 16)}-${h.slice(16, 20)}-${h.slice(20)}`;
+  }
+  throw new Error("crypto.getRandomValues is required for message ids");
+}
 function ArtifactAgentDock({
   scope,
   open,
@@ -138,6 +150,7 @@ function ArtifactAgentDock({
   const [loading, setLoading] = React.useState(false);
   const abortRef = React.useRef(null);
   const scrollRef = React.useRef(null);
+  const scopeTokenRef = React.useRef(0);
   const reportError = React.useCallback(
     (message) => {
       if (onError) onError(message);
@@ -147,6 +160,9 @@ function ArtifactAgentDock({
   );
   React.useEffect(() => {
     if (!open) return;
+    scopeTokenRef.current += 1;
+    abortRef.current?.abort();
+    abortRef.current = null;
     let cancelled = false;
     async function bootstrap() {
       setLoading(true);
@@ -185,8 +201,9 @@ function ArtifactAgentDock({
   const send = React.useCallback(async () => {
     const text = composer.trim();
     if (!text || !threadId || sending) return;
+    const token = scopeTokenRef.current;
     const userMsg = {
-      id: `local-${Date.now()}`,
+      id: createDockMessageId(),
       role: "user",
       content: text,
       createdAt: /* @__PURE__ */ new Date()
@@ -201,6 +218,7 @@ function ArtifactAgentDock({
     let streamFailed = false;
     try {
       for await (const event of transport.sendStream({ threadId, content: text, signal: controller.signal })) {
+        if (scopeTokenRef.current !== token) return;
         if (event.type === "delta") {
           assistantContent += event.text;
           setStreamContent(assistantContent);
@@ -209,11 +227,12 @@ function ArtifactAgentDock({
           reportError(event.message);
         }
       }
+      if (scopeTokenRef.current !== token) return;
       if (assistantContent && !streamFailed) {
         setMessages((prev) => [
           ...prev,
           {
-            id: `assist-${Date.now()}`,
+            id: createDockMessageId(),
             role: "assistant",
             content: assistantContent,
             createdAt: /* @__PURE__ */ new Date()
@@ -223,17 +242,24 @@ function ArtifactAgentDock({
       setStreamContent("");
     } catch (err) {
       if (err?.name === "AbortError") return;
-      reportError(err instanceof Error ? err.message : "Send failed");
+      if (scopeTokenRef.current === token) reportError(err instanceof Error ? err.message : "Send failed");
     } finally {
-      setSending(false);
-      abortRef.current = null;
+      if (scopeTokenRef.current === token) setSending(false);
+      if (abortRef.current === controller) abortRef.current = null;
     }
   }, [composer, threadId, sending, transport, reportError]);
   const cancel = React.useCallback(() => {
+    if (threadId && transport.cancel) {
+      try {
+        void Promise.resolve(transport.cancel({ threadId })).catch(() => {
+        });
+      } catch {
+      }
+    }
     abortRef.current?.abort();
     setSending(false);
     setStreamContent("");
-  }, []);
+  }, [threadId, transport]);
   if (!open) return null;
   const heading = defaultScopeLabel(scope);
   return /* @__PURE__ */ jsxs2(
@@ -384,10 +410,12 @@ function createFetchTransport(opts) {
             if (!line.trim()) continue;
             try {
               const event = JSON.parse(line);
-              if (event.type === "message.part.delta" && event.data) {
-                const text = event.data.text;
-                if (typeof text === "string" && text.length > 0) {
-                  yield { type: "delta", text };
+              if (event.type === "message.part.updated" && event.data) {
+                const delta = event.data.delta;
+                const part = event.data.part;
+                const isText = !part || typeof part !== "object" || part.type === void 0 || part.type === "text";
+                if (isText && typeof delta === "string" && delta.length > 0) {
+                  yield { type: "delta", text: delta };
                 }
               } else if (event.type === "error" && event.data) {
                 const message = typeof event.data.message === "string" ? event.data.message : "Stream error";