@dbx-tools/ui-mastra 0.9.118 → 0.9.120

package/README.md

@@ -22,6 +22,9 @@ Key features:
 
 - Drop-in `MastraChat` component that discovers the plugin client config and
   wires itself to the default agent.
+- Reload recovery for background turns: active run metadata is persisted per
+  agent and thread, the cached stream reconnects after a page reload, and the
+  final persisted history is refreshed when recovery completes.
 - Headless `useMastraChat()` driver for apps that want the same transport logic
   with custom layout.
 - Persistent `MastraAssistant` application shell with a floating launcher,
@@ -285,6 +288,7 @@ export function ReviewChat(props: ChatViewProps) {
 sidebar, transcript, tool progress, approval cards, suggestions, export controls,
 feedback controls, and composer from props. Use it when your app already has a
 transport or needs to combine Mastra messages with another state model.
+
 `MastraChat` shows a spinner in the model control while its live default model
 is being resolved. The picker groups endpoints into
 model-family submenus. Its compact first popup shows only the current

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.118";
+export const PACKAGE_VERSION = "0.9.120";
 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";
@@ -27,6 +27,7 @@ export * as reactThreadSidebar from "./src/react/thread-sidebar.tsx";
 export * as reactThreadTabs from "./src/react/thread-tabs.tsx";
 export * as reactToolPill from "./src/react/tool-pill.tsx";
 export * as reactTypes from "./src/react/types.ts";
+export * as supportActiveRuns from "./src/support/active-runs.ts";
 export * as supportChartOption from "./src/support/chart-option.ts";
 export * as supportChartTheme from "./src/support/chart-theme.ts";
 export * as supportClipboard from "./src/support/clipboard.ts";
@@ -65,10 +66,12 @@ export type { ThreadTabsProps, ThreadActionsProps } from "./src/react/thread-tab
 export { humanizeToolName, ToolSessionPill } from "./src/react/tool-pill.tsx";
 export type { ToolInputPresentation, WebSearchProgressGroup } from "./src/react/tool-pill.tsx";
 export type { ChatStatus, ToolEvent, ToolProgress, ChatModelOption, ChatInputMessage, QueuedSteer, FeedbackValue, FeedbackSubmission, MessageFeedback, ThreadSummary, ThreadPlacement, ChatViewProps, ApprovalDecision, PendingApproval } from "./src/react/types.ts";
+export { StoredActiveRunSchema, activeRunStorageKey } from "./src/support/active-runs.ts";
+export type { StoredActiveRun } from "./src/support/active-runs.ts";
 export { LIGHT_CHART_CHROME } from "./src/support/chart-theme.ts";
 export type { ChartChrome } from "./src/support/chart-theme.ts";
 export type { ExportFormat, ExportBrand, EmbedResolver, ExportChatOptions } from "./src/support/export.ts";
-export { MastraPluginClient, useMastraConfig, useMastraClient, useMastraMlflowExperiment, useMastraModels, useMastraDefaultModel, useMastraSuggestions, useMastraThreads, useChartFetch, useStatementFetch } from "./src/support/mastra-client.ts";
+export { MastraChatRequestError, MastraPluginClient, useMastraConfig, useMastraClient, useMastraMlflowExperiment, useMastraModels, useMastraDefaultModel, useMastraSuggestions, useMastraThreads, useChartFetch, useStatementFetch } from "./src/support/mastra-client.ts";
 export type { MastraStreamResponse, MastraMemoryThread, ByIdFetchState } from "./src/support/mastra-client.ts";
 export { defaultReasoningEffort, modelStorageKey, readStoredModel, storeSelectedModel } from "./src/support/model-selection.ts";
 export type { MastraRequestContextInput, MastraRequestContextSource, MastraRequestContextSnapshot } from "./src/support/request-context.ts";

package/package.json

@@ -29,11 +29,11 @@
     "react-dom": "~19.2.4"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "^0.9.118",
-    "@dbx-tools/shared-genie": "^0.9.118",
-    "@dbx-tools/shared-mastra": "^0.9.118",
-    "@dbx-tools/shared-model": "^0.9.118",
-    "@dbx-tools/ui": "^0.9.118",
+    "@dbx-tools/shared-core": "^0.9.120",
+    "@dbx-tools/shared-genie": "^0.9.120",
+    "@dbx-tools/shared-mastra": "^0.9.120",
+    "@dbx-tools/shared-model": "^0.9.120",
+    "@dbx-tools/ui": "^0.9.120",
     "@mastra/client-js": "1.50.0",
     "@mastra/core": "1.71.0",
     "@tanstack/react-table": "^8.21.3",
@@ -43,13 +43,14 @@
     "lucide-react": "^0.554.0",
     "marked": "^18.0.5",
     "sql-formatter": "^15.6.9",
-    "streamdown": "^2.5.0"
+    "streamdown": "^2.5.0",
+    "zod": "4.3.6"
   },
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.9.118",
+  "version": "0.9.120",
   "dbxToolsConfig": {
     "tags": [
       "ui"

package/src/react/_assistant-activity.ts

@@ -0,0 +1,43 @@
+import { isToolUIPart, type UIMessage } from "ai";
+
+import type { ToolEvent } from "./types.ts";
+import { compactReasoningText } from "../support/tool-events.ts";
+
+/** One ordered activity entry rendered before an assistant's answer text. */
+export type AssistantActivityItem =
+  { type: "tool"; key: string; event: ToolEvent } | { type: "thought"; key: string; text: string };
+
+/** Preserve model reasoning and tool progress in the order they reached the message. */
+export const assistantActivityItems = (
+  parts: UIMessage["parts"],
+  events: ToolEvent[],
+): AssistantActivityItem[] => {
+  const eventById = new Map(events.map((event) => [event.id, event]));
+  const renderedEventIds = new Set<string>();
+  const items: AssistantActivityItem[] = [];
+
+  const appendTool = (event: ToolEvent) => {
+    if (renderedEventIds.has(event.id)) return;
+    renderedEventIds.add(event.id);
+    items.push({ type: "tool", key: `tool-${event.id}`, event });
+    for (const [index, progress] of (event.progress ?? []).entries()) {
+      if (progress.type !== "thinking") continue;
+      const text = compactReasoningText(progress.text);
+      if (text) items.push({ type: "thought", key: `thought-${event.id}-${index}`, text });
+    }
+  };
+
+  for (const [index, part] of parts.entries()) {
+    if (part.type === "reasoning") {
+      const text = compactReasoningText(part.text);
+      if (text) items.push({ type: "thought", key: `reasoning-${index}`, text });
+      continue;
+    }
+    if (!isToolUIPart(part)) continue;
+    const event = eventById.get(part.toolCallId);
+    if (event) appendTool(event);
+  }
+
+  for (const event of events) appendTool(event);
+  return items;
+};

package/src/react/_assistant-response-status.tsx

@@ -0,0 +1,18 @@
+import { Spinner } from "@dbx-tools/ui/react";
+
+import type { ChatStatus } from "./types.ts";
+
+/** Whether an assistant bubble should show its active-response status. */
+export const shouldShowAssistantResponseStatus = (
+  isLast: boolean,
+  status: ChatStatus,
+  hasVisibleResponse: boolean,
+): boolean => isLast && hasVisibleResponse && (status === "submitted" || status === "streaming");
+
+/** Compact progress affordance for an active assistant response. */
+export const AssistantResponseSpinner = () => (
+  <span role="status" aria-live="polite" className="inline-flex items-center">
+    <Spinner className="size-3" />
+    <span className="sr-only">Response in progress</span>
+  </span>
+);

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

@@ -0,0 +1,106 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Button,
+} from "@dbx-tools/ui/react";
+import { CheckIcon, CopyIcon, ExternalLinkIcon } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { LinkSafetyModalProps } from "streamdown";
+import { copyText } from "../support/clipboard.ts";
+
+/** Display and clipboard values for one confirmed chat link. */
+export interface LinkPresentation {
+  displayUrl: string;
+  absoluteUrl: string;
+}
+
+/**
+ * Resolve a chat link for display and copying.
+ *
+ * Same-origin HTTP links are shown as a compact path while clipboard actions
+ * keep the absolute URL. External origins and non-HTTP schemes remain fully
+ * visible so the confirmation never obscures where the user is going.
+ */
+export function resolveLinkPresentation(url: string, baseUrl?: string): LinkPresentation {
+  const fallback = { displayUrl: url, absoluteUrl: url };
+  const base = baseUrl ?? (typeof window === "undefined" ? undefined : window.location.href);
+
+  try {
+    const resolved = base ? new URL(url, base) : new URL(url);
+    const baseOrigin = base ? new URL(base).origin : undefined;
+    const isWebLink = resolved.protocol === "http:" || resolved.protocol === "https:";
+    const displayUrl =
+      isWebLink && resolved.origin === baseOrigin
+        ? `${resolved.pathname}${resolved.search}${resolved.hash}` || "/"
+        : resolved.href;
+    return { displayUrl, absoluteUrl: resolved.href };
+  } catch {
+    return fallback;
+  }
+}
+
+/** AppKit-styled confirmation shown before opening a link from assistant markdown. */
+export const ExternalLinkDialog = ({ isOpen, onClose, onConfirm, url }: LinkSafetyModalProps) => {
+  const link = useMemo(() => resolveLinkPresentation(url), [url]);
+  const [copied, setCopied] = useState(false);
+  const copiedTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (copiedTimer.current) clearTimeout(copiedTimer.current);
+    },
+    [],
+  );
+
+  const copyLink = () => {
+    void copyText(link.absoluteUrl).then((ok) => {
+      if (!ok) return;
+      setCopied(true);
+      if (copiedTimer.current) clearTimeout(copiedTimer.current);
+      copiedTimer.current = setTimeout(() => setCopied(false), 1500);
+    });
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <AlertDialogContent className="border-border/60 p-5 shadow-2xl dark:border-white/10 sm:max-w-md">
+        <AlertDialogHeader>
+          <AlertDialogTitle className="flex items-center gap-2">
+            <ExternalLinkIcon className="size-4" aria-hidden="true" />
+            Open external link?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            You&apos;re about to visit a link outside this chat.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <div
+          className="max-h-32 overflow-y-auto break-all rounded-md bg-muted px-3 py-2 font-mono text-sm"
+          title={link.absoluteUrl}
+        >
+          {link.displayUrl}
+        </div>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <Button type="button" variant="outline" onClick={copyLink}>
+            {copied ? (
+              <CheckIcon className="size-4" aria-hidden="true" />
+            ) : (
+              <CopyIcon className="size-4" aria-hidden="true" />
+            )}
+            {copied ? "Copied" : "Copy link"}
+          </Button>
+          <AlertDialogAction onClick={onConfirm}>
+            <ExternalLinkIcon className="size-4" aria-hidden="true" />
+            Open link
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

package/src/react/bubbles.tsx

@@ -18,7 +18,6 @@ import type { UIMessage } from "ai";
 import {
   BugIcon,
   CheckIcon,
-  ChevronDownIcon,
   CopyIcon,
   MessageSquareIcon,
   RefreshCcwIcon,
@@ -26,6 +25,11 @@ import {
   XIcon,
 } from "lucide-react";
 import { useState } from "react";
+import { assistantActivityItems } from "./_assistant-activity.ts";
+import {
+  AssistantResponseSpinner,
+  shouldShowAssistantResponseStatus,
+} from "./_assistant-response-status.tsx";
 import { MarkdownWithEmbeds } from "./embed-slots.tsx";
 import { ExportMenu } from "./export-menu.tsx";
 import { FeedbackControls } from "./feedback-controls.tsx";
@@ -43,24 +47,12 @@ import type {
   ToolEvent,
 } from "./types.ts";
 import { copyText } from "../support/clipboard.ts";
-import {
-  compactReasoningText,
-  genieReasoningText,
-  mergeToolEvents,
-  toolEventsFromParts,
-} from "../support/tool-events.ts";
+import { mergeToolEvents, toolEventsFromParts } from "../support/tool-events.ts";
 
 // User / assistant message bubbles plus the inline approval card and
 // the helpers that surface approval-gated tool calls out of a message's
 // parts.
 
-const getReasoningText = (parts: UIMessage["parts"]): string =>
-  parts
-    .filter((p): p is { type: "reasoning"; text: string } => p.type === "reasoning")
-    .map((p) => compactReasoningText(p.text))
-    .filter(Boolean)
-    .join("\n");
-
 const UserAvatar = () => (
   <Avatar className="size-7">
     <AvatarFallback>
@@ -69,6 +61,19 @@ const UserAvatar = () => (
   </Avatar>
 );
 
+const ThoughtsDisclosure = ({ text }: { text: string }) => (
+  <Collapsible>
+    <CollapsibleTrigger className="w-fit cursor-pointer rounded-md border border-border/40 bg-background/30 px-2 py-1 text-xs text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+      Thoughts
+    </CollapsibleTrigger>
+    <CollapsibleContent>
+      <div className="mt-1 border-l-2 border-border/60 pl-2.5 text-xs text-muted-foreground">
+        <ToolMarkdown className="prose-p:my-0 [&_p]:!my-0">{text}</ToolMarkdown>
+      </div>
+    </CollapsibleContent>
+  </Collapsible>
+);
+
 /** A tool-call input shaped like an outbound email (the `send_email` tool). */
 type EmailApprovalInput = {
   to?: string | string[];
@@ -335,6 +340,7 @@ type AssistantBubbleProps = {
   mlflowExperimentUrl?: string;
 };
 
+/** Render one assistant message with tool progress, actions, and optional feedback. */
 export const AssistantBubble = ({
   message,
   isLast,
@@ -360,18 +366,7 @@ export const AssistantBubble = ({
         ? "done"
         : undefined;
   const toolEvents = mergeToolEvents(toolEventsFromParts(message.parts), events, terminalToolState);
-  const reasoning = [getReasoningText(message.parts), genieReasoningText(toolEvents)]
-    .filter(Boolean)
-    .join("\n");
-  const isReasoningStreaming =
-    isLast &&
-    status === "streaming" &&
-    (message.parts.at(-1)?.type === "reasoning" ||
-      toolEvents.some(
-        (event) =>
-          event.status === "running" &&
-          event.progress?.some((progress) => progress.type === "thinking"),
-      ));
+  const activityItems = assistantActivityItems(message.parts, toolEvents);
   const textParts = message.parts.filter(
     (p): p is { type: "text"; text: string } => p.type === "text",
   );
@@ -394,6 +389,14 @@ export const AssistantBubble = ({
   // `error`, or a newer message has taken over the `isLast` slot.
   const isStreamingThisBubble = isLast && (status === "streaming" || status === "submitted");
   const suggestions = isStreamingThisBubble ? [] : collectSuggestions(events);
+  const showResponseStatus = shouldShowAssistantResponseStatus(
+    isLast,
+    status,
+    hasText || activityItems.length > 0 || pendingApprovals.length > 0,
+  );
+  const hasFooterActions =
+    hasText && (isLast || Boolean(onExport) || Boolean(onFeedback) || Boolean(mlflowExperimentUrl));
+  const showFooter = showResponseStatus || hasFooterActions;
   // Charts and tables are placed at inline marker positions in
   // the assistant's prose. `prepare_chart` / `render_data` mint
   // a `chartId` and the model embeds `[chart:<chartId>]`; for raw
@@ -412,26 +415,13 @@ export const AssistantBubble = ({
        * `min-width: auto`, which sizes to content and overflows.
        */}
       <ItemContent className="min-w-0 gap-1.5">
-        {/*
-         * Tool session pill leads the message. Charts and tables are
-         * embedded inline in the prose (via `[chart:<id>]` / `[data:<id>]`
-         * markers rendered by {@link MarkdownWithEmbeds}), so keeping the
-         * pill above the text parts guarantees the "what the agent did"
-         * summary always sits before its resulting charts and answer.
-         */}
-        {toolEvents.length > 0 && <ToolSessionPill events={toolEvents} />}
-        {reasoning && (
-          <Collapsible>
-            <CollapsibleTrigger className="group flex cursor-pointer items-center gap-1 text-xs text-muted-foreground hover:text-foreground">
-              <ChevronDownIcon className="size-3 transition-transform group-data-[state=closed]:-rotate-90" />
-              <span>{isReasoningStreaming ? "Thinking..." : "Thoughts"}</span>
-            </CollapsibleTrigger>
-            <CollapsibleContent>
-              <div className="mt-1 border-l-2 border-border/60 pl-2.5 text-xs text-muted-foreground">
-                <ToolMarkdown className="prose-p:my-0 [&_p]:!my-0">{reasoning}</ToolMarkdown>
-              </div>
-            </CollapsibleContent>
-          </Collapsible>
+        {/* Tool calls and their thought events stay in arrival order above the answer text. */}
+        {activityItems.map((item) =>
+          item.type === "tool" ? (
+            <ToolSessionPill key={item.key} events={[item.event]} />
+          ) : (
+            <ThoughtsDisclosure key={item.key} text={item.text} />
+          ),
         )}
         {/*
          * Render each text part as its own block. A multi-step turn
@@ -459,9 +449,9 @@ export const AssistantBubble = ({
             onResolve={onResolveToolApproval}
           />
         ))}
-        {hasText && (isLast || onExport || onFeedback || mlflowExperimentUrl) && (
-          <div className="flex items-center gap-1">
-            {isLast && regenerate && (
+        {showFooter && (
+          <div className="flex min-h-7 items-center gap-1">
+            {hasText && isLast && regenerate && (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
@@ -478,7 +468,7 @@ export const AssistantBubble = ({
                 <TooltipContent>Retry</TooltipContent>
               </Tooltip>
             )}
-            {isLast && (
+            {hasText && isLast && (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
@@ -495,14 +485,16 @@ export const AssistantBubble = ({
                 <TooltipContent>{copied ? "Copied" : "Copy"}</TooltipContent>
               </Tooltip>
             )}
-            {onExport && <ExportMenu onExport={onExport} iconOnly tooltip="Export message" />}
-            {onFeedback && (
+            {hasText && onExport && (
+              <ExportMenu onExport={onExport} iconOnly tooltip="Export message" />
+            )}
+            {hasText && onFeedback && (
               <FeedbackControls
                 onSubmit={onFeedback}
                 {...(feedbackValue ? { value: feedbackValue } : {})}
               />
             )}
-            {mlflowExperimentUrl && (
+            {hasText && mlflowExperimentUrl && (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button asChild type="button" size="icon" variant="ghost" className="size-7">
@@ -519,6 +511,11 @@ export const AssistantBubble = ({
                 <TooltipContent>Open MLflow experiment</TooltipContent>
               </Tooltip>
             )}
+            {showResponseStatus && (
+              <div className="flex items-center text-muted-foreground">
+                <AssistantResponseSpinner />
+              </div>
+            )}
           </div>
         )}
         <SuggestionPills questions={suggestions} onSelect={onSuggestionClick} className="mt-1" />
@@ -527,6 +524,7 @@ export const AssistantBubble = ({
   );
 };
 
+/** Render one user message, including text and image attachments. */
 export const UserBubble = ({ message }: { message: UIMessage }) => {
   const text = message.parts
     .filter((p): p is { type: "text"; text: string } => p.type === "text")

package/src/react/chat-composer.tsx

@@ -423,7 +423,7 @@ export const ChatComposer = ({
             }}
             placeholder="Send a message..."
             rows={1}
-            className="field-sizing-fixed min-h-10 max-h-64 w-full flex-none overflow-y-auto px-4 pb-2 pt-4 text-base md:text-xs"
+            className="field-sizing-fixed min-h-10 max-h-64 w-full flex-none overflow-y-auto px-4 pb-2 pt-4 text-sm"
           />
           {fileError && (
             <div className="px-4 text-xs text-destructive" role="alert">

package/src/react/chat-feedback.ts

@@ -51,7 +51,7 @@ export function useChatFeedback({
       } catch (error) {
         logger.error("feedback error", {
           traceId,
-          error: errorUtils.errorMessage(error),
+          error: errorUtils.toError(error),
         });
       }
     },

package/src/react/chat-history.ts

@@ -9,6 +9,7 @@ import type {
 } from "./chat-sessions.ts";
 import type { PendingApproval } from "./types.ts";
 import type { MastraPluginClient } from "../support/mastra-client.ts";
+import { isSessionRunning } from "../support/thread-sessions.ts";
 
 const HISTORY_PAGE_SIZE = 20;
 const logger = log.logger("ui-mastra/chat");
@@ -115,7 +116,7 @@ export function useChatHistory({
           .catch((error: unknown) => {
             if ((error as { name?: string }).name === "AbortError") throw error;
             logger.warn("suspended-run discovery error", {
-              error: errorUtils.errorMessage(error),
+              error: errorUtils.toError(error),
             });
             return { runs: [], total: 0 };
           });
@@ -126,7 +127,9 @@ export function useChatHistory({
         const messages = toChronologicalUiMessages(response);
         updateSession(threadId, (current) => ({
           ...current,
-          messages,
+          messages: isSessionRunning(current)
+            ? mergeCurrentMessages(messages, current.messages)
+            : messages,
           historyLoaded: true,
           hasMoreHistory: response.hasMore ?? false,
           historyPage: 1,
@@ -137,7 +140,7 @@ export function useChatHistory({
       .catch((error: unknown) => {
         if (cancelled || (error as { name?: string }).name === "AbortError") return;
         logger.error("history load error", {
-          error: errorUtils.errorMessage(error),
+          error: errorUtils.toError(error),
         });
         updateSession(threadId, (current) => ({
           ...current,
@@ -178,7 +181,7 @@ export function useChatHistory({
       .catch((error: unknown) => {
         logger.error("history load-more error", {
           page,
-          error: errorUtils.errorMessage(error),
+          error: errorUtils.toError(error),
         });
         updateSession(threadId, (current) => ({
           ...current,
@@ -203,3 +206,8 @@ export function useChatHistory({
     loadOlderHistory,
   };
 }
+
+function mergeCurrentMessages(history: UIMessage[], current: UIMessage[]): UIMessage[] {
+  const ids = new Set(history.map((message) => message.id));
+  return [...history, ...current.filter((message) => !ids.has(message.id))];
+}

package/src/react/chat-sessions.ts

@@ -8,13 +8,16 @@ import {
   type ThreadSession,
 } from "../support/thread-sessions.ts";
 
+/** Read or lazily create the mutable session state for one thread. */
 export type ThreadSessionReader = (threadId: string) => ThreadSession;
 
+/** Replace one thread session through a state-producing callback. */
 export type ThreadSessionUpdater = (
   threadId: string,
   updater: (session: ThreadSession) => ThreadSession,
 ) => void;
 
+/** Replace the transcript stored for one thread. */
 export type ThreadMessageWriter = (threadId: string, messages: UIMessage[]) => void;
 
 /** Own the mutable per-thread session registry behind the public chat hook. */

package/src/react/chat-stream.ts

@@ -127,7 +127,7 @@ export function useChatStream({ getSession, updateSession, writeMessages }: UseC
         if (error instanceof StreamAborted || signal.aborted) return;
         if (isStaleMastraResumeError(error)) {
           logger.warn("ignored stale mastra resume", {
-            error: errorUtils.errorMessage(error),
+            error: errorUtils.toError(error),
           });
           return;
         }

package/src/react/chat-thread-layout.tsx

@@ -38,6 +38,8 @@ type ChatThreadLayoutProps = {
   threads: ChatViewProps["threads"];
   threadPlacement: NonNullable<ChatViewProps["threadPlacement"]>;
   threadBarActions: ChatViewProps["threadBarActions"];
+  threadHistoryLeadingActions: ChatViewProps["threadHistoryLeadingActions"];
+  threadSidebarHeaderActions: ChatViewProps["threadSidebarHeaderActions"];
   showThreadBarActions: NonNullable<ChatViewProps["showThreadBarActions"]>;
   threadNewIcon: ChatViewProps["threadNewIcon"];
   threadHistoryIcon: ChatViewProps["threadHistoryIcon"];
@@ -92,6 +94,8 @@ export const ChatThreadLayout = ({
   threads,
   threadPlacement,
   threadBarActions,
+  threadHistoryLeadingActions,
+  threadSidebarHeaderActions,
   showThreadBarActions,
   threadNewIcon,
   threadHistoryIcon,
@@ -144,6 +148,7 @@ export const ChatThreadLayout = ({
     ...(onDeleteThread ? { onDelete: onDeleteThread } : {}),
     ...(onRenameThread ? { onRename: onRenameThread } : {}),
     ...(onCancelThread ? { onCancel: onCancelThread } : {}),
+    ...(threadSidebarHeaderActions ? { headerActions: threadSidebarHeaderActions } : {}),
   };
 
   const [openTabIds, setOpenTabIds] = useState<string[]>([]);
@@ -195,6 +200,7 @@ export const ChatThreadLayout = ({
               showActions={showThreadBarActions}
               newIcon={threadNewIcon}
               historyIcon={threadHistoryIcon}
+              historyLeadingActions={threadHistoryLeadingActions}
             />
           )}
           {showSidebarToggle && (

package/src/react/chat-transcript.tsx

@@ -11,6 +11,7 @@ import {
   EmptyTitle,
   Spinner,
 } from "@dbx-tools/ui/react";
+import { isToolUIPart } from "ai";
 import { ArrowDownIcon, MessageSquareIcon, RefreshCwIcon, TriangleAlertIcon } from "lucide-react";
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { AssistantBubble, UserBubble } from "./bubbles.tsx";
@@ -185,8 +186,10 @@ export const ChatTranscript = ({
   const lastAssistantHasContent =
     lastAssistantParts.some(
       (part) =>
-        (part.type === "text" || part.type === "reasoning") &&
-        Boolean((part as { text?: string }).text),
+        ((part.type === "text" || part.type === "reasoning") &&
+          Boolean((part as { text?: string }).text)) ||
+        isToolUIPart(part) ||
+        part.type === "data-tool-call-approval",
     ) || (lastEvents?.length ?? 0) > 0;
   const showWaitingIndicator = isRunning && !lastAssistantHasContent;
 
@@ -255,9 +258,13 @@ export const ChatTranscript = ({
               return <UserBubble key={message.id} message={message} />;
             })}
             {showWaitingIndicator && (
-              <div className="flex h-7 items-center gap-2 px-3 text-xs text-muted-foreground">
+              <div
+                role="status"
+                aria-live="polite"
+                className="flex h-7 items-center px-3 text-muted-foreground"
+              >
                 <Spinner className="size-3" />
-                <span className="animate-pulse">Thinking...</span>
+                <span className="sr-only">Response in progress</span>
               </div>
             )}
             {status === "error" && (

package/src/react/chat-view.tsx

@@ -45,6 +45,8 @@ export const ChatView = ({
   threads,
   threadPlacement = "auto",
   threadBarActions,
+  threadHistoryLeadingActions,
+  threadSidebarHeaderActions,
   showThreadBarActions = true,
   threadNewIcon,
   threadHistoryIcon,
@@ -79,6 +81,8 @@ export const ChatView = ({
       threads={threads}
       threadPlacement={threadPlacement}
       threadBarActions={threadBarActions}
+      threadHistoryLeadingActions={threadHistoryLeadingActions}
+      threadSidebarHeaderActions={threadSidebarHeaderActions}
       showThreadBarActions={showThreadBarActions}
       threadNewIcon={threadNewIcon}
       threadHistoryIcon={threadHistoryIcon}

package/src/react/data-grid.tsx

@@ -50,6 +50,7 @@ export type DataRow = Record<string, unknown>;
  */
 const DELTA_PATTERN = /^([+\u2212-])\s*\d[\d,.\s]*(?:%|\s*pts?)?$/i;
 
+/** Apply success or destructive text color to a signed numeric delta string. */
 export function colorizeDelta(content: React.ReactNode): React.ReactNode {
   if (typeof content !== "string") return content;
   const text = content.trim();