@dbx-tools/ui-mastra 0.3.8 → 0.3.9

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-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"
   },
   "main": "index.ts",
   "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.8",
+  "version": "0.3.9",
   "types": "index.ts",
   "type": "module",
   "exports": {

package/src/react/chat-view.tsx

@@ -47,7 +47,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
@@ -247,11 +247,10 @@ 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
@@ -360,6 +359,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 +411,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 +423,7 @@ export const ChatView = ({
                   aria-hidden="true"
                 />
                 <ThreadSidebar
-                  threads={threads ?? []}
-                  {...(activeThreadId ? { activeThreadId } : {})}
-                  streamingThreadIds={streamingThreadIds}
-                  isLoading={isLoadingThreads}
+                  {...sidebarProps}
                   onSelect={(id) => {
                     onSelectThread?.(id);
                     toggleSidebar();
@@ -423,10 +436,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 +443,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 +626,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,18 +638,16 @@ 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() || isRunning}
-                    aria-label="Send message"
+                    disabled={!input.trim()}
+                    aria-label={isRunning ? "Steer response" : "Send message"}
                   >
-                    {isRunning ? (
-                      <Spinner className="size-3" />
-                    ) : (
-                      <SendIcon className="size-3" />
-                    )}
+                    <SendIcon className="size-3" />
                   </InputGroupButton>
                 )}
               </InputGroupAddon>

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),
         };
       });
     },
@@ -885,8 +892,30 @@ export const useMastraChat = (
           }
         }
       }
-      const next = [...getSession(threadId).messages, makeUserMessage(text)];
+      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.
+      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);
     },
     [
@@ -895,6 +924,8 @@ export const useMastraChat = (
       activeThreadId,
       activeKey,
       getSession,
+      mastraClient,
+      agentId,
       noteThreadActivity,
       updateSession,
     ],

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;
 }