@dbx-tools/ui-mastra 0.3.9 → 0.3.11

package/README.md

@@ -24,7 +24,12 @@ Key features:
 - Inline embed rendering for `[chart:<id>]` and `[data:<id>]` markers produced by
   the server plugin.
 - Conversation sidebar with new, select, rename, delete, active-thread, and
-  background-streaming states.
+  background-streaming states, plus a per-row cancel for a running thread.
+- Concurrent threads: run several conversations at once, switch between them
+  while each keeps streaming, and cancel any one independently (per-thread abort
+  + routing, no shared client state).
+- Mid-turn steering: submit a message while a turn streams to fold it into the
+  live run (Mastra queue-message), with an immediate interrupt-and-resend option.
 - Export menu for PDF and Markdown, resolving charts and tables so
   exported conversations remain useful offline.
 
@@ -44,6 +49,9 @@ understand Mastra-specific behavior:
   answer.
 - `[chart:<id>]` and `[data:<id>]` assistant markers rendered as ECharts charts
   and sortable tables.
+- Concurrent multi-thread streaming, per-thread cancel, and mid-turn steering
+  (queue-message with interrupt fallback) - the native AppKit chat surface runs
+  one turn at a time and has no steering.
 - Conversation export that resolves those embeds into Markdown or PDF.
 
 ## Add The Styles

package/package.json

@@ -26,19 +26,19 @@
     "shiki": "^3.0.0",
     "sql-formatter": "^15.6.9",
     "streamdown": "^2.5.0",
-    "@dbx-tools/shared-genie": "0.3.9",
-    "@dbx-tools/shared-mastra": "0.3.9",
-    "@dbx-tools/shared-model": "0.3.9",
-    "@dbx-tools/ui-appkit": "0.3.9",
-    "@dbx-tools/shared-core": "0.3.9",
-    "@dbx-tools/ui-branding": "0.3.9"
+    "@dbx-tools/shared-core": "0.3.11",
+    "@dbx-tools/shared-genie": "0.3.11",
+    "@dbx-tools/shared-mastra": "0.3.11",
+    "@dbx-tools/shared-model": "0.3.11",
+    "@dbx-tools/ui-appkit": "0.3.11",
+    "@dbx-tools/ui-branding": "0.3.11"
   },
   "main": "index.ts",
   "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.9",
+  "version": "0.3.11",
   "types": "index.ts",
   "type": "module",
   "exports": {

package/src/react/bubbles.tsx

@@ -44,6 +44,39 @@ import type {
 // the helpers that surface approval-gated tool calls out of a message's
 // parts.
 
+/**
+ * Copy `text` to the clipboard, resolving `true` on success. Prefers the
+ * async Clipboard API, but that is only available in a secure context
+ * (HTTPS / localhost) - over plain HTTP (e.g. a LAN / ZeroTier IP) it is
+ * `undefined`, which is why a tap on mobile could silently do nothing. Falls
+ * back to a hidden `<textarea>` + `document.execCommand("copy")` so copy works
+ * off a non-secure origin too.
+ */
+async function copyText(text: string): Promise<boolean> {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+    // Fall through to the execCommand path.
+  }
+  try {
+    const area = document.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    document.body.appendChild(area);
+    area.select();
+    const ok = document.execCommand("copy");
+    area.remove();
+    return ok;
+  } catch {
+    return false;
+  }
+}
+
 const getReasoningText = (parts: UIMessage["parts"]): string =>
   parts
     .filter((p): p is { type: "reasoning"; text: string } => p.type === "reasoning")
@@ -274,6 +307,17 @@ export const AssistantBubble = ({
   );
   const fullText = textParts.map((p) => p.text).join("");
   const hasText = fullText.length > 0;
+  // Brief "copied" acknowledgement on the copy button (swaps the icon to a
+  // check for ~1.5s), so a tap gives visible feedback on touch where there's
+  // no hover/tooltip.
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    void copyText(fullText).then((ok) => {
+      if (!ok) return;
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    });
+  };
   // Suggestions are deferred until the turn is settled so they don't
   // pop in mid-stream. A bubble is "settled" if it isn't the active
   // streaming target - either the agent has returned to `ready` /
@@ -379,12 +423,17 @@ export const AssistantBubble = ({
                     size="icon"
                     variant="ghost"
                     className="size-7"
-                    onClick={() => navigator.clipboard.writeText(fullText)}
+                    onClick={handleCopy}
+                    aria-label={copied ? "Copied" : "Copy"}
                   >
-                    <CopyIcon className="size-3" />
+                    {copied ? (
+                      <CheckIcon className="size-3" />
+                    ) : (
+                      <CopyIcon className="size-3" />
+                    )}
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>Copy</TooltipContent>
+                <TooltipContent>{copied ? "Copied" : "Copy"}</TooltipContent>
               </Tooltip>
             )}
             {onExport && (

package/src/react/chat-view.tsx

@@ -35,6 +35,7 @@ import {
 import { error as errorUtil } from "@dbx-tools/shared-core";
 import {
   ArrowDownIcon,
+  FastForwardIcon,
   MessageSquareIcon,
   PanelLeftIcon,
   RefreshCwIcon,
@@ -100,6 +101,7 @@ export const ChatView = ({
   status,
   error,
   sendMessage,
+  onInterrupt,
   regenerate,
   onStop,
   className,
@@ -253,17 +255,40 @@ export const ChatView = ({
     // to the live run (or interrupts + resends). Idle submits start a turn.
     sendMessage({ text });
     setInput("");
-    // Sending is an explicit "I want to see the response" action, so
-    // re-pin to the bottom even if the user had scrolled up. Without this
-    // the freshly-appended user turn + waiting row can leave `isAtBottom`
-    // false, suppressing auto-scroll and forcing a manual scroll down.
+    // Sending is an explicit "I want to see the response" action, so re-pin to
+    // the bottom even if the user had scrolled up. `setIsAtBottom(true)` makes
+    // the message-dep + ResizeObserver auto-scroll effects follow the new turn;
+    // the double-rAF is a belt-and-suspenders jump that runs AFTER React
+    // commits the appended message (a single frame can fire pre-commit).
     setIsAtBottom(true);
-    requestAnimationFrame(() => {
+    pinToBottom();
+  };
+
+  // Re-pin the transcript to the bottom after a submit. `setIsAtBottom(true)`
+  // drives the auto-scroll effects; the double-rAF jump runs after React
+  // commits the appended message (a single frame can fire pre-commit).
+  const pinToBottom = () => {
+    const pin = () => {
       const el = scrollRef.current;
       if (el) el.scrollTop = el.scrollHeight;
+    };
+    requestAnimationFrame(() => {
+      pin();
+      requestAnimationFrame(pin);
     });
   };
 
+  // Interrupt-submit: force an immediate course-correction (abort the current
+  // run, resend with this text) rather than queuing to the live turn.
+  const handleInterrupt = () => {
+    const text = input.trim();
+    if (!text || !onInterrupt) return;
+    onInterrupt({ text });
+    setInput("");
+    setIsAtBottom(true);
+    pinToBottom();
+  };
+
   const lastMessage = messages.at(-1);
   const lastEvents = lastMessage ? toolEventsByMessage[lastMessage.id] : undefined;
   // Single in-flight indicator for the whole turn: visible from the
@@ -638,17 +663,44 @@ export const ChatView = ({
                     <SquareIcon className="size-3 fill-current" />
                   </InputGroupButton>
                 ) : (
-                  // Idle, or running with typed text: the button sends. A send
-                  // mid-run steers the live turn (see the driver's sendMessage).
-                  <InputGroupButton
-                    type="submit"
-                    size="icon-sm"
-                    variant="default"
-                    disabled={!input.trim()}
-                    aria-label={isRunning ? "Steer response" : "Send message"}
-                  >
-                    <SendIcon className="size-3" />
-                  </InputGroupButton>
+                  <>
+                    {/*
+                     * Running with typed text: offer an immediate interrupt
+                     * alongside the steer Send. Interrupt aborts the current
+                     * turn and resends now; Send folds the message into the
+                     * live turn (queue-steer).
+                     */}
+                    {isRunning && onInterrupt && input.trim() && (
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <InputGroupButton
+                            type="button"
+                            size="icon-sm"
+                            variant="outline"
+                            onClick={handleInterrupt}
+                            aria-label="Interrupt and send now"
+                          >
+                            <FastForwardIcon className="size-3" />
+                          </InputGroupButton>
+                        </TooltipTrigger>
+                        <TooltipContent>Interrupt &amp; send now</TooltipContent>
+                      </Tooltip>
+                    )}
+                    {/*
+                     * Idle, or running with typed text: the primary button
+                     * sends. A send mid-run steers the live turn (see the
+                     * driver's sendMessage).
+                     */}
+                    <InputGroupButton
+                      type="submit"
+                      size="icon-sm"
+                      variant="default"
+                      disabled={!input.trim()}
+                      aria-label={isRunning ? "Steer response" : "Send message"}
+                    >
+                      <SendIcon className="size-3" />
+                    </InputGroupButton>
+                  </>
                 )}
               </InputGroupAddon>
             </InputGroup>

package/src/react/mastra-chat.tsx

@@ -875,11 +875,12 @@ export const useMastraChat = (
     [activeKey, driveStream, getSession, mastraClient, agentId, updateSession],
   );
 
-  const sendMessage = useCallback<ChatViewProps["sendMessage"]>(
-    (message) => {
-      const text = message.text ?? "";
-      if (!text) return;
-      const threadId = activeKey;
+  // Append a user message to a thread's transcript, stamping `lastUserText`,
+  // thread-activity, and a provisional title for a brand-new thread. Returns
+  // the pre-append session (so callers can see whether a run was in flight)
+  // and the new message list. Shared by send + interrupt.
+  const appendUserMessage = useCallback(
+    (threadId: string, text: string): { before: ThreadSession; next: UIMessage[] } => {
       updateSession(threadId, (session) => ({ ...session, lastUserText: text }));
       if (activeThreadId) {
         noteThreadActivity(activeThreadId);
@@ -895,11 +896,21 @@ export const useMastraChat = (
       const before = getSession(threadId);
       const next = [...before.messages, makeUserMessage(text)];
       writeMessages(threadId, next);
-      // Steering: if a turn is already streaming on this thread, try to hand
-      // the message to the live run so the agent folds it into the current
-      // turn (no restart). If the server won't deliver it, fall back to
-      // interrupting the run and starting a fresh turn with the message
-      // included, so a steer never silently drops.
+      return { before, next };
+    },
+    [activeThreadId, getSession, noteThreadActivity, updateSession, writeMessages],
+  );
+
+  const sendMessage = useCallback<ChatViewProps["sendMessage"]>(
+    (message) => {
+      const text = message.text ?? "";
+      if (!text) return;
+      const threadId = activeKey;
+      const { before, next } = appendUserMessage(threadId, text);
+      // Steering: if a turn is already streaming on this thread, hand the
+      // message to the live run so the agent folds it into the current turn
+      // (no restart). If the server won't deliver it, fall back to
+      // interrupting + resending so a steer never silently drops.
       if (isSessionRunning(before) && before.runId) {
         const runId = before.runId;
         const steerThreadId =
@@ -918,17 +929,25 @@ export const useMastraChat = (
       }
       void runStream(threadId, next);
     },
-    [
-      runStream,
-      writeMessages,
-      activeThreadId,
-      activeKey,
-      getSession,
-      mastraClient,
-      agentId,
-      noteThreadActivity,
-      updateSession,
-    ],
+    [appendUserMessage, runStream, activeKey, getSession, mastraClient, agentId],
+  );
+
+  // Interrupt-and-resend: unconditionally abort any in-flight run on the
+  // active thread and start a fresh turn with `text` included immediately.
+  // The composer offers this alongside the queue-steer send so the user can
+  // force an immediate course-correction rather than waiting for the current
+  // turn to fold in a queued message. `runStream`/`driveStream` supersede the
+  // prior run (abort + runToken bump + pill cleanup).
+  const interrupt = useCallback(
+    (message: { text?: string }) => {
+      const text = message.text ?? "";
+      if (!text) return;
+      const threadId = activeKey;
+      const { next } = appendUserMessage(threadId, text);
+      logger.info("steer:interrupt", { threadId });
+      void runStream(threadId, next);
+    },
+    [appendUserMessage, runStream, activeKey],
   );
 
   /**
@@ -1393,6 +1412,7 @@ export const useMastraChat = (
     status: activeSession.status,
     error: activeSession.error,
     sendMessage,
+    onInterrupt: interrupt,
     regenerate,
     onStop: stop,
     suggestions,

package/src/react/types.ts

@@ -90,6 +90,15 @@ export type ChatViewProps = {
    */
   error?: Error | null;
   sendMessage: (message: { text: string }) => void;
+  /**
+   * Send a message that interrupts the in-flight turn immediately: abort the
+   * current run and start a fresh turn with this message. When provided and
+   * the chat is running, the composer shows a small "interrupt" action next
+   * to the queue-steer Send, so the user can force an immediate
+   * course-correction instead of folding the message into the live turn.
+   * Omit to offer only the queue-steer send while running.
+   */
+  onInterrupt?: (message: { text: string }) => void;
   regenerate?: () => void;
   /**
    * Abort the in-flight response. When provided and the chat is running