@dbx-tools/ui-mastra 0.3.8 → 0.3.10

package/package.json

@@ -26,19 +26,19 @@
     "shiki": "^3.0.0",
     "sql-formatter": "^15.6.9",
     "streamdown": "^2.5.0",
-    "@dbx-tools/shared-core": "0.3.8",
-    "@dbx-tools/shared-mastra": "0.3.8",
-    "@dbx-tools/shared-model": "0.3.8",
-    "@dbx-tools/ui-appkit": "0.3.8",
-    "@dbx-tools/shared-genie": "0.3.8",
-    "@dbx-tools/ui-branding": "0.3.8"
+    "@dbx-tools/shared-core": "0.3.10",
+    "@dbx-tools/shared-genie": "0.3.10",
+    "@dbx-tools/ui-appkit": "0.3.10",
+    "@dbx-tools/ui-branding": "0.3.10",
+    "@dbx-tools/shared-mastra": "0.3.10",
+    "@dbx-tools/shared-model": "0.3.10"
   },
   "main": "index.ts",
   "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.8",
+  "version": "0.3.10",
   "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,
@@ -47,7 +48,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { AssistantBubble, UserBubble } from "./bubbles";
 import { ExportMenu } from "./export-menu";
 import { SuggestionPills } from "./suggestion-pills";
-import { ThreadSidebar } from "./thread-sidebar";
+import { ThreadSidebar, type ThreadSidebarProps } from "./thread-sidebar";
 import type { ChatViewProps } from "./types";
 
 // Controlled, presentational chat shell: the scroll container, header
@@ -100,6 +101,7 @@ export const ChatView = ({
   status,
   error,
   sendMessage,
+  onInterrupt,
   regenerate,
   onStop,
   className,
@@ -247,24 +249,46 @@ export const ChatView = ({
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    // Don't queue a new turn while one is streaming - the Enter-key
-    // path would otherwise bypass the disabled Send button.
-    if (isRunning) return;
     const text = input.trim();
     if (!text) return;
+    // Submitting while a turn streams is a steer: the driver hands the text
+    // 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
@@ -360,6 +384,23 @@ export const ChatView = ({
   const showHeader = showSidebarToggle;
   const showComposerToolbar = showModelDisplay || showExport || showClear;
 
+  // Props shared by the mobile drawer and the desktop inline sidebar - the two
+  // render the SAME `ThreadSidebar`, differing only in framing (overlay vs.
+  // inline) and, on mobile, closing the drawer after select / new. Building
+  // the prop bag once keeps the two call sites from drifting.
+  const sidebarProps: ThreadSidebarProps = {
+    threads: threads ?? [],
+    ...(activeThreadId ? { activeThreadId } : {}),
+    streamingThreadIds,
+    isLoading: isLoadingThreads,
+    onSelect: (id) => onSelectThread?.(id),
+    onHide: toggleSidebar,
+    ...(onNewThread ? { onNew: onNewThread } : {}),
+    ...(onDeleteThread ? { onDelete: onDeleteThread } : {}),
+    ...(onRenameThread ? { onRename: onRenameThread } : {}),
+    ...(onCancelThread ? { onCancel: onCancelThread } : {}),
+  };
+
   // Clear confirmation is an AppKit `AlertDialog` (a real modal), plus an
   // in-flight flag so the DELETE can't be double-fired. `clearing` disables
   // the confirm action while `onClear` runs; the dialog closes on settle.
@@ -395,9 +436,9 @@ export const ChatView = ({
             /*
              * Mobile: a fixed overlay drawer with a tap-to-close backdrop, so
              * the conversation list never eats horizontal space from the chat
-             * on a phone. Selecting a thread / starting a new one closes it so
-             * the transcript comes back into view. Session-only + default
-             * closed (see `mobileDrawerOpen`).
+             * on a phone. Selecting a thread / starting a new one also closes
+             * the drawer so the transcript comes back into view. Session-only
+             * + default closed (see `mobileDrawerOpen`).
              */
             mobileDrawerOpen && (
               <div className="fixed inset-0 z-40 flex">
@@ -407,10 +448,7 @@ export const ChatView = ({
                   aria-hidden="true"
                 />
                 <ThreadSidebar
-                  threads={threads ?? []}
-                  {...(activeThreadId ? { activeThreadId } : {})}
-                  streamingThreadIds={streamingThreadIds}
-                  isLoading={isLoadingThreads}
+                  {...sidebarProps}
                   onSelect={(id) => {
                     onSelectThread?.(id);
                     toggleSidebar();
@@ -423,10 +461,6 @@ export const ChatView = ({
                         },
                       }
                     : {})}
-                  {...(onDeleteThread ? { onDelete: onDeleteThread } : {})}
-                  {...(onRenameThread ? { onRename: onRenameThread } : {})}
-                  {...(onCancelThread ? { onCancel: onCancelThread } : {})}
-                  onHide={toggleSidebar}
                   className="relative z-10 w-[85vw] max-w-xs shadow-xl"
                 />
               </div>
@@ -434,22 +468,11 @@ export const ChatView = ({
           ) : (
             /*
              * Desktop: an inline flex child sharing the row with the chat
-             * column, using the persisted open/hide preference.
+             * column, using the persisted open/hide preference. Same
+             * `sidebarProps` as mobile - only the framing + close-on-select
+             * differ.
              */
-            desktopSidebarOpen && (
-              <ThreadSidebar
-                threads={threads ?? []}
-                {...(activeThreadId ? { activeThreadId } : {})}
-                streamingThreadIds={streamingThreadIds}
-                isLoading={isLoadingThreads}
-                onSelect={(id) => onSelectThread?.(id)}
-                {...(onNewThread ? { onNew: onNewThread } : {})}
-                {...(onDeleteThread ? { onDelete: onDeleteThread } : {})}
-                {...(onRenameThread ? { onRename: onRenameThread } : {})}
-                {...(onCancelThread ? { onCancel: onCancelThread } : {})}
-                onHide={toggleSidebar}
-              />
-            )
+            desktopSidebarOpen && <ThreadSidebar {...sidebarProps} />
           ))}
         <div className="flex h-full min-w-0 flex-1 flex-col">
           {showHeader && (
@@ -628,7 +651,8 @@ export const ChatView = ({
                 className="max-h-48 text-base md:text-sm"
               />
               <InputGroupAddon align="inline-end">
-                {isRunning && onStop ? (
+                {isRunning && onStop && !input.trim() ? (
+                  // Running with an empty composer: the button stops the turn.
                   <InputGroupButton
                     type="button"
                     size="icon-sm"
@@ -639,19 +663,44 @@ export const ChatView = ({
                     <SquareIcon className="size-3 fill-current" />
                   </InputGroupButton>
                 ) : (
-                  <InputGroupButton
-                    type="submit"
-                    size="icon-sm"
-                    variant="default"
-                    disabled={!input.trim() || isRunning}
-                    aria-label="Send message"
-                  >
-                    {isRunning ? (
-                      <Spinner className="size-3" />
-                    ) : (
-                      <SendIcon className="size-3" />
+                  <>
+                    {/*
+                     * 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>
                     )}
-                  </InputGroupButton>
+                    {/*
+                     * 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

@@ -21,6 +21,7 @@ import {
   DEFAULT_THREAD_SESSION_KEY,
   isSessionRunning,
   sessionKey,
+  terminateRunningToolEvents,
   type ThreadSession,
 } from "../support/thread-sessions";
 import { ChatView } from "./chat-view";
@@ -710,6 +711,9 @@ export const useMastraChat = (
           error: null,
           status: "submitted",
           runToken: token,
+          // Superseding an in-flight run (a steer that interrupts, or a rapid
+          // re-send) stops its stream, so close any pills it left running.
+          toolEventsByMessage: terminateRunningToolEvents(session.toolEventsByMessage),
         };
       });
       const runIdRef = { current: getSession(threadId).runId };
@@ -798,6 +802,9 @@ export const useMastraChat = (
           runToken: session.runToken + 1,
           error: null,
           status: "ready",
+          // Cancelling stops the stream, so close any tool pills still marked
+          // running - the closing chunks will never arrive.
+          toolEventsByMessage: terminateRunningToolEvents(session.toolEventsByMessage),
         };
       });
     },
@@ -868,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);
@@ -885,19 +893,61 @@ export const useMastraChat = (
           }
         }
       }
-      const next = [...getSession(threadId).messages, makeUserMessage(text)];
+      const before = getSession(threadId);
+      const next = [...before.messages, makeUserMessage(text)];
       writeMessages(threadId, next);
+      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 =
+          threadId === DEFAULT_THREAD_SESSION_KEY ? undefined : threadId;
+        void mastraClient
+          .queueMessage({ agentId, runId, threadId: steerThreadId, message: text })
+          .then((accepted) => {
+            if (accepted) {
+              logger.info("steer:queued", { runId });
+              return;
+            }
+            logger.info("steer:fallback-interrupt", { runId });
+            void runStream(threadId, getSession(threadId).messages);
+          });
+        return;
+      }
       void runStream(threadId, next);
     },
-    [
-      runStream,
-      writeMessages,
-      activeThreadId,
-      activeKey,
-      getSession,
-      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],
   );
 
   /**
@@ -1362,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

package/src/support/mastra-client.ts

@@ -123,6 +123,50 @@ export class MastraPluginClient extends MastraClient {
     return asMastraStreamResponse(response);
   }
 
+  /**
+   * Steer a live run by handing it another message mid-turn ("queue"), via
+   * the agent `/queue-message` route. `behavior` controls what happens when
+   * the run is active: `deliver` (default) folds the message into the current
+   * turn so the agent picks it up without restarting; `persist` holds it for
+   * the next turn; `discard` drops it. Routed per call (own thread header, no
+   * shared client state) like {@link streamAgent}.
+   *
+   * Resolves `true` when the server accepted the message for delivery, `false`
+   * otherwise (unknown run / route unsupported / non-2xx) - never throws for a
+   * rejected steer, so the caller can fall back to interrupting + resending.
+   * Queue / signal routes are `@experimental` in Mastra.
+   */
+  async queueMessage(params: {
+    agentId: string;
+    runId: string;
+    threadId?: string;
+    message: string;
+    behavior?: "deliver" | "persist" | "discard";
+  }): Promise<boolean> {
+    const url = `${this.basePath}/agents/${encodeURIComponent(params.agentId)}/queue-message`;
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          ...this.#routingHeaders({ threadId: params.threadId }),
+        },
+        body: JSON.stringify({
+          runId: params.runId,
+          ...(params.threadId ? { threadId: params.threadId } : {}),
+          message: params.message,
+          ifActive: { behavior: params.behavior ?? "deliver" },
+        }),
+      });
+      if (!response.ok) return false;
+      const body = (await response.json().catch(() => null)) as { accepted?: boolean } | null;
+      return body?.accepted === true;
+    } catch {
+      return false;
+    }
+  }
+
   /**
    * Resume a suspended `requireApproval` tool via `approve-tool-call`.
    * Reads SSE directly instead of `agent.approveToolCall()` so the

package/src/support/thread-sessions.ts

@@ -50,6 +50,28 @@ export function isSessionRunning(session: ThreadSession): boolean {
   return session.status === "submitted" || session.status === "streaming";
 }
 
+/**
+ * Settle any tool-progress pills still marked `running` to `done`. A cancelled
+ * or interrupted turn stops delivering the `tool-result` / `tool-error` chunks
+ * that would otherwise close them, so without this a Genie / chart pill would
+ * spin forever after the user hits stop. Returns the same map when nothing was
+ * running so callers can skip a needless state update.
+ */
+export function terminateRunningToolEvents(
+  toolEventsByMessage: Record<string, ToolEvent[]>,
+): Record<string, ToolEvent[]> {
+  let changed = false;
+  const next: Record<string, ToolEvent[]> = {};
+  for (const [messageId, events] of Object.entries(toolEventsByMessage)) {
+    next[messageId] = events.map((event) => {
+      if (event.status !== "running") return event;
+      changed = true;
+      return { ...event, status: "done" as const };
+    });
+  }
+  return changed ? next : toolEventsByMessage;
+}
+
 export function sessionKey(activeThreadId: string | undefined): string {
   return activeThreadId ?? DEFAULT_THREAD_SESSION_KEY;
 }