@dbx-tools/ui-mastra 0.9.121 → 0.9.123

package/index.ts

@@ -3,7 +3,7 @@
 // Hand edits are overwritten on the next watch; this file is read-only.
 
 export const PACKAGE_IDENTIFIER = "@dbx-tools/ui-mastra";
-export const PACKAGE_VERSION = "0.9.121";
+export const PACKAGE_VERSION = "0.9.123";
 export * as reactBubbles from "./src/react/bubbles.tsx";
 export * as reactChatApprovals from "./src/react/chat-approvals.ts";
 export * as reactChatComposer from "./src/react/chat-composer.tsx";

package/package.json

@@ -29,11 +29,11 @@
     "react-dom": "~19.2.4"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "^0.9.121",
-    "@dbx-tools/shared-genie": "^0.9.121",
-    "@dbx-tools/shared-mastra": "^0.9.121",
-    "@dbx-tools/shared-model": "^0.9.121",
-    "@dbx-tools/ui": "^0.9.121",
+    "@dbx-tools/shared-core": "^0.9.123",
+    "@dbx-tools/shared-genie": "^0.9.123",
+    "@dbx-tools/shared-mastra": "^0.9.123",
+    "@dbx-tools/shared-model": "^0.9.123",
+    "@dbx-tools/ui": "^0.9.123",
     "@mastra/client-js": "1.50.0",
     "@mastra/core": "1.71.0",
     "@tanstack/react-table": "^8.21.3",
@@ -50,7 +50,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.9.121",
+  "version": "0.9.123",
   "dbxToolsConfig": {
     "tags": [
       "ui"

package/src/react/_external-link-dialog.tsx

@@ -20,6 +20,22 @@ export interface LinkPresentation {
   absoluteUrl: string;
 }
 
+/** Return whether a chat URL belongs to the current app's Sandbox route space. */
+export function isSandboxLink(url: string, baseUrl?: string): boolean {
+  const base = baseUrl ?? (typeof window === "undefined" ? undefined : window.location.href);
+  if (!base) return false;
+  try {
+    const resolved = new URL(url, base);
+    const current = new URL(base);
+    return (
+      resolved.origin === current.origin &&
+      (resolved.pathname === "/sandbox" || resolved.pathname.startsWith("/sandbox/"))
+    );
+  } catch {
+    return false;
+  }
+}
+
 /**
  * Resolve a chat link for display and copying.
  *

package/src/react/bubbles.tsx

@@ -407,14 +407,14 @@ export const AssistantBubble = ({
   // nothing so the prose flows unaffected. Suggested questions
   // stay gated on settle to avoid pop-in mid-stream.
   return (
-    <Item className="items-start gap-0 border-none bg-transparent p-0">
+    <Item className="min-w-0 max-w-full items-start gap-0 overflow-hidden border-none bg-transparent p-0">
       {/*
        * `min-w-0` is required so wide content (markdown tables, long
        * code blocks) can shrink to fit instead of pushing the whole
        * bubble past the chat's `max-w-4xl`. Flex children default to
        * `min-width: auto`, which sizes to content and overflows.
        */}
-      <ItemContent className="min-w-0 gap-1.5">
+      <ItemContent className="min-w-0 max-w-full overflow-hidden gap-1.5">
         {/* Tool calls and their thought events stay in arrival order above the answer text. */}
         {activityItems.map((item) =>
           item.type === "tool" ? (
@@ -551,7 +551,12 @@ export const UserBubble = ({ message }: { message: UIMessage }) => {
             </div>
           )}
           {text && (
-            <div className={cn("whitespace-pre-wrap break-words px-1", files.length > 0 && "pt-2")}>
+            <div
+              className={cn(
+                "whitespace-pre-wrap break-words px-1 leading-snug sm:leading-normal",
+                files.length > 0 && "pt-2",
+              )}
+            >
               {text}
             </div>
           )}

package/src/react/chat-transcript.tsx

@@ -194,11 +194,11 @@ export const ChatTranscript = ({
   const showWaitingIndicator = isRunning && !lastAssistantHasContent;
 
   return (
-    <div className="relative flex flex-1 flex-col overflow-hidden">
+    <div className="relative flex min-w-0 max-w-full flex-1 flex-col overflow-hidden">
       <div
         ref={controller.scrollRef}
         onScroll={controller.handleScroll}
-        className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain [overflow-anchor:none] [scrollbar-gutter:stable]"
+        className="min-w-0 max-w-full flex-1 overflow-y-auto overflow-x-clip overscroll-contain [overflow-anchor:none] [scrollbar-gutter:stable]"
       >
         {messages.length === 0 && !isLoadingHistory ? (
           <Empty className="mx-auto h-full w-full max-w-4xl px-4 md:px-6">
@@ -217,7 +217,7 @@ export const ChatTranscript = ({
         ) : (
           <div
             ref={controller.contentRef}
-            className="mx-auto flex w-full max-w-4xl flex-col gap-3 px-4 py-3 md:px-6"
+            className="mx-auto flex min-w-0 w-full max-w-4xl flex-col gap-3 overflow-x-clip px-4 py-3 md:px-6"
           >
             {(isLoadingMore || isLoadingHistory) && (
               <div className="flex items-center justify-center gap-2 py-1 text-xs text-muted-foreground">

package/src/react/markdown.tsx

@@ -18,7 +18,7 @@ import {
 import { CheckIcon, CopyIcon } from "lucide-react";
 import React, { useEffect, useRef, useState } from "react";
 import { Streamdown } from "streamdown";
-import { ExternalLinkDialog } from "./_external-link-dialog.tsx";
+import { ExternalLinkDialog, isSandboxLink } from "./_external-link-dialog.tsx";
 import { DataGrid, TABLE_WRAPPER_CLASSES, colorizeDelta, type DataRow } from "./data-grid.tsx";
 import { copyText } from "../support/clipboard.ts";
 
@@ -136,6 +136,20 @@ const MARKDOWN_TABLE_PARTS = {
   },
 };
 
+/** Chat links use a dedicated high-contrast blue instead of the darker brand primary. */
+const MarkdownLink = ({ className, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+  <a
+    {...props}
+    className={cn(
+      "font-normal text-blue-700 underline decoration-blue-700/40 decoration-1 underline-offset-2",
+      "transition-colors hover:text-blue-800 hover:decoration-current",
+      "focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "visited:text-blue-800 dark:text-blue-300 dark:decoration-blue-300/40 dark:visited:text-blue-300 dark:hover:text-blue-200",
+      className,
+    )}
+  />
+);
+
 /**
  * Markdown component map for the main assistant reply. Tables are
  * lifted out of the parsed `node` and rendered through the interactive
@@ -145,6 +159,7 @@ const MARKDOWN_TABLE_PARTS = {
  */
 const MARKDOWN_COMPONENTS = {
   ...MARKDOWN_TABLE_PARTS,
+  a: MarkdownLink,
   table: ({
     node,
     children,
@@ -173,6 +188,7 @@ const MARKDOWN_COMPONENTS = {
  */
 const TOOL_MARKDOWN_COMPONENTS = {
   ...MARKDOWN_TABLE_PARTS,
+  a: MarkdownLink,
   table: plainMarkdownTable,
 };
 
@@ -187,6 +203,7 @@ const SHIKI_PLUGIN = { code: createShikiPlugin() };
 /** Keep Streamdown's link confirmation while matching the chat's AppKit UI. */
 const LINK_SAFETY = {
   enabled: true,
+  onLinkCheck: isSandboxLink,
   renderModal: (props: React.ComponentProps<typeof ExternalLinkDialog>) => (
     <ExternalLinkDialog {...props} />
   ),
@@ -248,8 +265,8 @@ export const AssistantMarkdown = ({
     animated={animate ? ANIMATE_OPTIONS : false}
     isAnimating={animate}
     className={cn(
-      "prose prose-sm dark:prose-invert max-w-none break-words",
-      "leading-relaxed prose-p:my-1.5 prose-p:leading-relaxed",
+      "prose prose-sm dark:prose-invert min-w-0 max-w-full overflow-x-hidden break-words",
+      "leading-snug prose-p:my-1.5 prose-p:leading-snug sm:leading-relaxed sm:prose-p:leading-relaxed",
       "prose-ul:my-1.5 prose-ol:my-1.5 prose-li:my-0.5",
       "prose-headings:font-semibold prose-headings:tracking-tight",
       "prose-h1:text-lg prose-h1:mt-4 prose-h1:mb-2",
@@ -281,11 +298,11 @@ export const ToolMarkdown = ({ children, className }: { children: string; classN
     controls={false}
     linkSafety={LINK_SAFETY}
     className={cn(
-      "prose prose-sm dark:prose-invert max-w-none break-words",
-      "text-xs leading-snug text-muted-foreground",
-      "prose-p:my-0.5 prose-p:leading-snug [&_p]:!leading-snug",
+      "prose prose-sm dark:prose-invert min-w-0 max-w-full overflow-x-hidden break-words",
+      "text-xs leading-tight text-muted-foreground sm:leading-snug",
+      "prose-p:my-0.5 prose-p:leading-tight [&_p]:!leading-tight sm:prose-p:leading-snug sm:[&_p]:!leading-snug",
       "prose-ul:my-0.5 prose-ul:pl-4 prose-ol:my-0.5 prose-ol:pl-4",
-      "prose-li:my-0 prose-li:leading-snug prose-li:marker:text-muted-foreground/60",
+      "prose-li:my-0 prose-li:leading-tight prose-li:marker:text-muted-foreground/60 sm:prose-li:leading-snug",
       "prose-headings:my-1 prose-headings:text-xs prose-headings:font-semibold",
       "prose-strong:text-foreground/90 prose-strong:font-medium",
       "prose-code:text-xs prose-code:font-medium",
@@ -379,7 +396,7 @@ export const SqlBlock = ({ sql }: { sql: string }) => {
         value={formatted}
         className="absolute right-1.5 top-1.5 z-10 bg-background/70 opacity-0 backdrop-blur transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
       />
-      <pre className="max-w-full overflow-x-auto rounded-md border border-border bg-background p-3 font-mono text-xs leading-relaxed">
+      <pre className="max-w-full overflow-x-auto rounded-md border border-border bg-background p-3 font-mono text-xs leading-tight sm:leading-relaxed">
         {html === null ? (
           <code>{formatted}</code>
         ) : (
@@ -404,7 +421,7 @@ export const SourceBlock = ({
   return (
     <pre
       className={cn(
-        "max-w-full overflow-auto whitespace-pre font-mono text-xs leading-snug",
+        "max-w-full overflow-auto whitespace-pre font-mono text-xs leading-tight sm:leading-snug",
         className,
       )}
     >

package/src/react/mastra-chat.tsx

@@ -356,6 +356,9 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
   // as soon as the server's auto-generated title lands (see the prune
   // effect below). A manual rename (`renamedThreads`) still wins.
   const [provisionalTitles, setProvisionalTitles] = useState<Record<string, string>>({});
+  // Threads the user just deleted. The server list can lag, so hide them
+  // immediately and drop the overlay once the listing no longer returns them.
+  const [removedThreadIds, setRemovedThreadIds] = useState<ReadonlySet<string>>(() => new Set());
   // Surface the active thread in the sidebar immediately (called when its
   // first message is sent). Upserts an untitled row stamped "now" so it
   // sorts to the top; the server row replaces it on the next refresh.
@@ -880,15 +883,7 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
 
   const deleteThread = useCallback(
     async (threadId: string) => {
-      try {
-        await mastraClient.removeThread(threadId, { agentId });
-        logger.info("thread deleted", { threadId });
-      } catch (error) {
-        logger.error("thread delete error", {
-          threadId,
-          error: errorUtils.toError(error),
-        });
-      }
+      setRemovedThreadIds((prev) => new Set(prev).add(threadId));
       removeSession(threadId);
       setOptimisticThreads((prev) => {
         if (!prev[threadId]) return prev;
@@ -905,7 +900,22 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
         resetSession(id, true);
         setActiveThreadId(id);
       }
-      refreshThreads();
+      try {
+        await mastraClient.removeThread(threadId, { agentId });
+        logger.info("thread deleted", { threadId });
+        refreshThreads();
+      } catch (error) {
+        logger.error("thread delete error", {
+          threadId,
+          error: errorUtils.toError(error),
+        });
+        setRemovedThreadIds((prev) => {
+          if (!prev.has(threadId)) return prev;
+          const next = new Set(prev);
+          next.delete(threadId);
+          return next;
+        });
+      }
     },
     [activeThreadId, agentId, mastraClient, refreshThreads, removeSession, resetSession],
   );
@@ -1094,10 +1104,21 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
       .filter((t) => !serverIds.has(t.id))
       .map(withOverlay)
       .sort((a, b) => (b.updatedAt ?? "").localeCompare(a.updatedAt ?? ""));
-    return [...pending, ...server];
-  }, [threads, optimisticThreads, renamedThreads, provisionalTitles]);
+    return [...pending, ...server].filter((thread) => !removedThreadIds.has(thread.id));
+  }, [threads, optimisticThreads, renamedThreads, provisionalTitles, removedThreadIds]);
   // Once the server list includes a thread we were tracking optimistically,
   // drop the optimistic copy so the map doesn't grow without bound.
+  useEffect(() => {
+    if (removedThreadIds.size === 0) return;
+    const serverIds = new Set(threads.map((t) => t.id));
+    const settled = [...removedThreadIds].filter((id) => !serverIds.has(id));
+    if (settled.length === 0) return;
+    setRemovedThreadIds((prev) => {
+      const next = new Set(prev);
+      for (const id of settled) next.delete(id);
+      return next;
+    });
+  }, [threads, removedThreadIds]);
   useEffect(() => {
     const serverIds = new Set(threads.map((t) => t.id));
     const stale = Object.keys(optimisticThreads).filter((id) => serverIds.has(id));

package/src/react/thread-sidebar.tsx

@@ -100,6 +100,7 @@ export const ThreadSidebar = ({
   const [draftTitle, setDraftTitle] = useState("");
 
   const handleDeleteClick = (e: React.MouseEvent, threadId: string) => {
+    e.preventDefault();
     e.stopPropagation();
     if (!onDelete) return;
     if (confirmDeleteId !== threadId) {
@@ -229,7 +230,10 @@ export const ThreadSidebar = ({
                   >
                     <button
                       type="button"
-                      onClick={() => onSelect(thread.id)}
+                      onClick={() => {
+                        setConfirmDeleteId(null);
+                        onSelect(thread.id);
+                      }}
                       aria-current={isActive ? "page" : undefined}
                       className={cn(
                         "min-w-0 flex-1 cursor-pointer text-left transition-[padding] duration-150",
@@ -309,10 +313,8 @@ export const ThreadSidebar = ({
                                 type="button"
                                 variant={isConfirming ? "destructive" : "ghost"}
                                 size="icon"
+                                onMouseDown={(e) => e.preventDefault()}
                                 onClick={(e) => handleDeleteClick(e, thread.id)}
-                                onBlur={() =>
-                                  setConfirmDeleteId((id) => (id === thread.id ? null : id))
-                                }
                                 aria-label={
                                   isConfirming
                                     ? "Confirm delete conversation"

package/src/react/thread-tabs.tsx

@@ -89,7 +89,7 @@ export const ThreadActions = ({
         </Tooltip>
       )}
       {historyLeadingActions}
-      <Popover open={historyOpen} onOpenChange={setHistoryOpen}>
+      <Popover open={historyOpen} onOpenChange={setHistoryOpen} modal>
         <Tooltip>
           <TooltipTrigger asChild>
             <PopoverTrigger asChild>
@@ -106,7 +106,23 @@ export const ThreadActions = ({
           </TooltipTrigger>
           <TooltipContent>Conversation history</TooltipContent>
         </Tooltip>
-        <PopoverContent align="end" aria-label="Conversation history" className="w-72 p-0">
+        <PopoverContent
+          align="end"
+          aria-label="Conversation history"
+          className="w-72 p-0"
+          onOpenAutoFocus={(event) => event.preventDefault()}
+          onCloseAutoFocus={(event) => event.preventDefault()}
+          onFocusOutside={(event) => event.preventDefault()}
+          onPointerDownOutside={(event) => {
+            const target = event.target;
+            if (
+              target instanceof Element &&
+              target.closest("[data-radix-popper-content-wrapper]")
+            ) {
+              event.preventDefault();
+            }
+          }}
+        >
           <ThreadSidebar
             {...list}
             onSelect={(id) => {
@@ -151,9 +167,19 @@ export const ThreadTabs = ({
   ...list
 }: ThreadTabsProps) => {
   const { threads, activeThreadId, streamingThreadIds = [], onSelect } = list;
+  const tabStripRef = useRef<HTMLDivElement | null>(null);
   const activeTabRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
-    activeTabRef.current?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    const container = tabStripRef.current;
+    const activeTab = activeTabRef.current;
+    if (!container || !activeTab) return;
+    const containerRect = container.getBoundingClientRect();
+    const tabRect = activeTab.getBoundingClientRect();
+    if (tabRect.left < containerRect.left) {
+      container.scrollBy({ left: tabRect.left - containerRect.left, behavior: "smooth" });
+    } else if (tabRect.right > containerRect.right) {
+      container.scrollBy({ left: tabRect.right - containerRect.right, behavior: "smooth" });
+    }
   }, [activeThreadId]);
 
   return (
@@ -161,7 +187,7 @@ export const ThreadTabs = ({
     // in the same centered column as the transcript and composer.
     <div className={cn("w-full border-b border-border text-xs", className)}>
       <div className="mx-auto flex w-full max-w-4xl items-center gap-1 px-2 py-1 md:px-4">
-        <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto">
+        <div ref={tabStripRef} className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto">
           {openThreadIds.map((id) => {
             const thread = threads.find((t) => t.id === id) ?? { id };
             const isActive = id === activeThreadId;

package/src/react/tool-pill.tsx

@@ -61,6 +61,10 @@ export const humanizeToolName = (toolName: string): string => {
  * server-side label generator.
  */
 const runningLabelFor = (event: ToolEvent): string => {
+  const toolStatus = [...(event.progress ?? [])]
+    .reverse()
+    .find((p): p is Extract<ToolProgress, { type: "tool_status" }> => p.type === "tool_status");
+  if (toolStatus?.message.trim()) return toolStatus.message.trim();
   const latest = [...(event.progress ?? [])]
     .reverse()
     .find((p): p is Extract<ToolProgress, { type: "status" }> => p.type === "status");
@@ -285,7 +289,7 @@ const MessageGroupBody = ({
   return (
     <div className="flex flex-col gap-1.5">
       {!omitQuestion && group.question && (
-        <div className="rounded border-l-2 border-primary/40 bg-background/40 px-2 py-1 text-xs italic leading-snug text-muted-foreground">
+        <div className="rounded border-l-2 border-primary/40 bg-background/40 px-2 py-1 text-xs italic leading-tight text-muted-foreground sm:leading-snug">
           {group.question}
         </div>
       )}
@@ -309,7 +313,7 @@ const MessageGroupBody = ({
                 <SourceBlock
                   source={bucket.query.sql}
                   language="sql"
-                  className="max-h-64 border-t border-border/50 px-2 py-1.5 text-foreground"
+                  className="max-h-48 overflow-auto overscroll-contain border-t border-border/50 px-2 py-1.5 text-foreground sm:max-h-64"
                 />
                 {bucket.query.description && (
                   <div className="border-t border-border/50 px-2 py-1.5">
@@ -402,23 +406,25 @@ const RawToolPayload = ({
 }) => {
   const structured = structuredToolPayload(value);
   return (
-    <Collapsible className="rounded border border-border/60 bg-background/40">
-      <CollapsibleTrigger className="group flex w-full items-center gap-1.5 px-2 py-1 text-left text-xs uppercase tracking-wide text-muted-foreground hover:text-foreground">
+    <Collapsible className="min-w-0 max-w-full overflow-hidden rounded border border-border/60 bg-background/40">
+      <CollapsibleTrigger className="group flex w-full min-w-0 items-center gap-1.5 px-2 py-1 text-left text-xs uppercase tracking-wide text-muted-foreground hover:text-foreground">
         <ChevronDownIcon className="size-3 shrink-0 transition-transform group-data-[state=closed]:-rotate-90" />
         <span>{label}</span>
       </CollapsibleTrigger>
-      <CollapsibleContent>
-        {structured === undefined ? (
-          <JsonBlock
-            json={formatRawToolPayload(value)}
-            className="max-h-80 border-t border-border/50 px-2 py-2 text-foreground"
-          />
-        ) : (
-          <RecordPreview
-            value={structured}
-            className="border-t border-border/50 bg-transparent text-foreground"
-          />
-        )}
+      <CollapsibleContent className="min-w-0 max-w-full overflow-hidden">
+        <div className="max-h-48 max-w-full overflow-auto overscroll-contain sm:max-h-64">
+          {structured === undefined ? (
+            <JsonBlock
+              json={formatRawToolPayload(value)}
+              className="border-t border-border/50 px-2 py-2 leading-tight text-foreground sm:leading-relaxed"
+            />
+          ) : (
+            <RecordPreview
+              value={structured}
+              className="max-w-full border-t border-border/50 bg-transparent text-foreground"
+            />
+          )}
+        </div>
       </CollapsibleContent>
     </Collapsible>
   );
@@ -488,8 +494,8 @@ export function toolOutputPresentation(
 const ToolInputSource = ({ presentation }: { presentation: ToolInputPresentation }) => {
   const lineCount = presentation.source.split("\n").length;
   return (
-    <Collapsible className="rounded border border-border/60 bg-background/40">
-      <CollapsibleTrigger className="group flex w-full items-center gap-1.5 px-2 py-1 text-left text-xs text-muted-foreground hover:text-foreground">
+    <Collapsible className="min-w-0 max-w-full overflow-hidden rounded border border-border/60 bg-background/40">
+      <CollapsibleTrigger className="group flex w-full min-w-0 items-center gap-1.5 px-2 py-1 text-left text-xs text-muted-foreground hover:text-foreground">
         <ChevronDownIcon className="size-3 shrink-0 transition-transform group-data-[state=closed]:-rotate-90" />
         <span className="font-medium text-foreground/80">{presentation.label}</span>
         <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase leading-none tracking-wide">
@@ -499,11 +505,11 @@ const ToolInputSource = ({ presentation }: { presentation: ToolInputPresentation
           {lineCount} {lineCount === 1 ? "line" : "lines"}
         </span>
       </CollapsibleTrigger>
-      <CollapsibleContent>
+      <CollapsibleContent className="min-w-0 max-w-full overflow-hidden">
         <SourceBlock
           source={presentation.source}
           language={presentation.language}
-          className="max-h-64 border-t border-border/50 px-2 py-1.5 text-foreground"
+          className="max-h-48 overflow-auto overscroll-contain border-t border-border/50 px-2 py-1.5 text-foreground sm:max-h-64"
         />
       </CollapsibleContent>
     </Collapsible>
@@ -586,6 +592,25 @@ const WebSearchProgressDetails = ({ event }: { event: ToolEvent }) => {
   );
 };
 
+/** Latest cumulative detail emitted by a non-search tool. */
+const ToolStatusProgressDetails = ({ event }: { event: ToolEvent }) => {
+  if (event.toolName === "web_search") return null;
+  const detail = [...(event.progress ?? [])]
+    .reverse()
+    .find(
+      (progress): progress is ToolStatusProgress =>
+        progress.type === "tool_status" && Boolean(progress.detail?.trim()),
+    )?.detail;
+  if (!detail) return null;
+  return (
+    <SourceBlock
+      source={detail}
+      language="text"
+      className="max-h-48 overflow-auto overscroll-contain whitespace-pre-wrap break-words rounded border border-border/50 bg-background/40 p-2 text-foreground sm:max-h-64"
+    />
+  );
+};
+
 /**
  * True when a tool event has anything worth expanding for. The
  * question text already rides on the row header (see
@@ -619,7 +644,7 @@ const ToolCallDetails = ({
   return (
     <div className="flex flex-col gap-2">
       {showQuestion && question ? (
-        <p className="break-words px-0.5 text-[11px] leading-snug text-muted-foreground">
+        <p className="break-words px-0.5 text-[11px] leading-tight text-muted-foreground sm:leading-snug">
           {question}
         </p>
       ) : null}
@@ -629,6 +654,7 @@ const ToolCallDetails = ({
         <RawToolPayload label="Request" value={event.input} />
       ) : null}
       <WebSearchProgressDetails event={event} />
+      <ToolStatusProgressDetails event={event} />
       <ToolProgressDetails summary={summary} omitQuestion />
       {outputPresentation?.language === "json" ? (
         <RawToolPayload label="Output" value={outputPresentation.source} />
@@ -676,7 +702,7 @@ const ToolCallRow = ({ event }: { event: ToolEvent }) => {
         {verb}
       </span>
       {question && (
-        <span className="mt-0.5 block break-words text-[11px] leading-snug text-foreground/75">
+        <span className="mt-0.5 block break-words text-[11px] leading-tight text-foreground/75 sm:leading-snug">
           {question}
         </span>
       )}
@@ -698,7 +724,7 @@ const ToolCallRow = ({ event }: { event: ToolEvent }) => {
   }
 
   return (
-    <Collapsible className="rounded border border-border/40 bg-background/30">
+    <Collapsible className="min-w-0 max-w-full overflow-hidden rounded border border-border/40 bg-background/30">
       <CollapsibleTrigger className="group flex w-full items-start gap-2 px-2 py-1 text-left text-xs text-muted-foreground cursor-pointer hover:text-foreground">
         <ChevronDownIcon className="mt-0.5 size-3 shrink-0 transition-transform group-data-[state=open]:rotate-180" />
         <span className="mt-0.5 shrink-0">
@@ -707,7 +733,7 @@ const ToolCallRow = ({ event }: { event: ToolEvent }) => {
         {header}
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="px-2 pb-2">
+        <div className="min-w-0 max-w-full overflow-hidden px-2 pb-2">
           <ToolCallDetails event={event} />
         </div>
       </CollapsibleContent>
@@ -754,7 +780,7 @@ export const ToolSessionPill = ({ events }: { events: ToolEvent[] }) => {
   return (
     <div
       className={cn(
-        "rounded-md border bg-background/30 px-2 py-1 transition-colors",
+        "min-w-0 max-w-full overflow-hidden rounded-md border bg-background/30 px-2 py-1 transition-colors",
         // Loud-but-not-jarring "in flight" treatment when any row
         // is running: primary border + soft ring. Failed sessions
         // (no longer running) pick up the destructive border;
@@ -798,8 +824,13 @@ export const ToolSessionPill = ({ events }: { events: ToolEvent[] }) => {
             </span>
           )}
         </CollapsibleTrigger>
-        <CollapsibleContent>
-          <div className={cn("mt-1.5", events.length > 1 && "flex flex-col gap-1")}>
+        <CollapsibleContent className="min-w-0 max-w-full overflow-hidden">
+          <div
+            className={cn(
+              "mt-1.5 min-w-0 max-w-full overflow-hidden",
+              events.length > 1 && "flex flex-col gap-1",
+            )}
+          >
             {events.length === 1 ? (
               <ToolCallDetails event={latest} showQuestion />
             ) : (

package/src/support/mastra-client.ts

@@ -22,7 +22,7 @@ import {
   type ListMemoryThreadsResponse,
 } from "@mastra/client-js";
 import { DefaultChatTransport, type UIMessage, type UIMessageChunk } from "ai";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { MastraRequestContextSnapshot } from "./request-context.ts";
 
 type NativeAgentClient = ReturnType<MastraClient["getAgent"]>;
@@ -916,19 +916,22 @@ export const useMastraThreads = (
   // the natural deps (client / agentId / enabled).
   const [nonce, setNonce] = useState(0);
   const refresh = useCallback(() => setNonce((n) => n + 1), []);
+  const hasLoadedRef = useRef(false);
 
   useEffect(() => {
     if (!enabled) {
+      hasLoadedRef.current = false;
       setLoading(false);
       setThreads([]);
       return;
     }
     const controller = new AbortController();
-    setLoading(true);
+    if (!hasLoadedRef.current) setLoading(true);
     client
       .threads({ agentId, signal: controller.signal })
       .then((res) => {
         if (controller.signal.aborted) return;
+        hasLoadedRef.current = true;
         setThreads(res.threads);
         setError(null);
       })