@dbx-tools/ui-mastra 0.9.117 → 0.9.119

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,

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.117";
+export const PACKAGE_VERSION = "0.9.119";
 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,6 +66,8 @@ 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";

package/package.json

@@ -29,11 +29,11 @@
     "react-dom": "~19.2.4"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "^0.9.117",
-    "@dbx-tools/shared-genie": "^0.9.117",
-    "@dbx-tools/shared-mastra": "^0.9.117",
-    "@dbx-tools/shared-model": "^0.9.117",
-    "@dbx-tools/ui": "^0.9.117",
+    "@dbx-tools/shared-core": "^0.9.119",
+    "@dbx-tools/shared-genie": "^0.9.119",
+    "@dbx-tools/shared-mastra": "^0.9.119",
+    "@dbx-tools/shared-model": "^0.9.119",
+    "@dbx-tools/ui": "^0.9.119",
     "@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.117",
+  "version": "0.9.119",
   "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[];
@@ -360,18 +365,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 +388,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 +414,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 +448,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 +467,7 @@ export const AssistantBubble = ({
                 <TooltipContent>Retry</TooltipContent>
               </Tooltip>
             )}
-            {isLast && (
+            {hasText && isLast && (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
@@ -495,14 +484,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 +510,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" />

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");
@@ -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,
@@ -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-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,
@@ -109,7 +113,7 @@ export const ChatThreadLayout = ({
   const rootRef = useRef<HTMLDivElement>(null);
   const isNarrow = useIsNarrow(rootRef);
   const showThreads = Boolean(threads && onSelectThread) && threadPlacement !== "disabled";
-  const placement = threadPlacement === "auto" ? (isNarrow ? "top" : "left") : threadPlacement;
+  const placement = threadPlacement === "auto" ? (isNarrow ? "top" : "right") : threadPlacement;
   const tabbedThreads = showThreads && placement === "top";
   const dockedSide = placement === "right" ? "right" : "left";
   const dockedThreads = showThreads && (placement === "left" || placement === "right");
@@ -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/markdown.tsx

@@ -18,6 +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 { DataGrid, TABLE_WRAPPER_CLASSES, colorizeDelta, type DataRow } from "./data-grid.tsx";
 import { copyText } from "../support/clipboard.ts";
 
@@ -183,6 +184,14 @@ const TOOL_MARKDOWN_COMPONENTS = {
  */
 const SHIKI_PLUGIN = { code: createShikiPlugin() };
 
+/** Keep Streamdown's link confirmation while matching the chat's AppKit UI. */
+const LINK_SAFETY = {
+  enabled: true,
+  renderModal: (props: React.ComponentProps<typeof ExternalLinkDialog>) => (
+    <ExternalLinkDialog {...props} />
+  ),
+};
+
 /**
  * Per-word fade-in applied while a reply is still streaming. Streamdown
  * wraps each newly arrived token in a `[data-sd-animate]` span and only
@@ -235,6 +244,7 @@ export const AssistantMarkdown = ({
     components={MARKDOWN_COMPONENTS}
     plugins={SHIKI_PLUGIN}
     controls={false}
+    linkSafety={LINK_SAFETY}
     animated={animate ? ANIMATE_OPTIONS : false}
     isAnimating={animate}
     className={cn(
@@ -269,6 +279,7 @@ export const ToolMarkdown = ({ children, className }: { children: string; classN
     components={TOOL_MARKDOWN_COMPONENTS}
     plugins={SHIKI_PLUGIN}
     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",

package/src/react/mastra-assistant.tsx

@@ -84,6 +84,8 @@ export interface MastraAssistantProps<TValues extends Record<string, unknown>> e
   closeIcon?: ReactNode;
   newConversationIcon?: ReactNode;
   historyIcon?: ReactNode;
+  /** Host controls rendered immediately before the History action and in the sidebar header. */
+  historyLeadingActions?: ReactNode;
   contentClassName?: string;
   panelClassName?: string;
   headerClassName?: string;
@@ -205,6 +207,7 @@ export function MastraAssistant<TValues extends Record<string, unknown> = Record
   closeIcon,
   newConversationIcon,
   historyIcon,
+  historyLeadingActions,
   className,
   contentClassName,
   panelClassName,
@@ -493,6 +496,7 @@ export function MastraAssistant<TValues extends Record<string, unknown> = Record
         onCancel={chatView.onCancelThread}
         newIcon={newConversationIcon}
         historyIcon={historyIcon}
+        historyLeadingActions={historyLeadingActions}
         actions={closeAction}
       />
     ) : (
@@ -550,6 +554,8 @@ export function MastraAssistant<TValues extends Record<string, unknown> = Record
           threadBarActions={!header ? closeAction : undefined}
           threadNewIcon={newConversationIcon}
           threadHistoryIcon={historyIcon}
+          threadHistoryLeadingActions={historyLeadingActions}
+          threadSidebarHeaderActions={historyLeadingActions}
           className={cn("min-h-0 flex-1", chatClassName)}
         />
         {!header && chatView.threadPlacement !== "top" ? (

package/src/react/mastra-chat.tsx

@@ -4,6 +4,7 @@ import type { ReasoningEffort } from "@dbx-tools/shared-model";
 import { useBrand } from "@dbx-tools/ui/branding/react";
 import type { FileUIPart, UIMessage } from "ai";
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toChronologicalUiMessages } from "./_history-messages.ts";
 import { useChatApprovals } from "./chat-approvals.ts";
 import { useChatFeedback } from "./chat-feedback.ts";
 import { useChatHistory } from "./chat-history.ts";
@@ -12,6 +13,12 @@ import { useChatStream } from "./chat-stream.ts";
 import { ChatView } from "./chat-view.tsx";
 import { dedupeSuggestions } from "./suggestions.ts";
 import type { ChatViewProps, ThreadPlacement, ThreadSummary } from "./types.ts";
+import {
+  activeRunStorageKey,
+  readStoredActiveRuns,
+  removeStoredActiveRun,
+  storeActiveRun,
+} from "../support/active-runs.ts";
 import type { EmbedResolver, ExportFormat } from "../support/export.ts";
 import {
   useMastraClient,
@@ -189,7 +196,7 @@ export interface UseMastraChatOptions<
    * Where conversation management renders: `"left"` / `"right"` dock the list
    * to that edge, `"top"` shows the open conversations as an editor-style tab
    * strip with a history menu, `"disabled"` turns thread management off, and
-   * the default `"auto"` picks `"left"` while the chat is wide enough for a
+   * the default `"auto"` picks `"right"` while the chat is wide enough for a
    * side panel and `"top"` once it gets too narrow for one (measured on the
    * chat's own width, so an embedded panel decides on its own space).
    */
@@ -292,6 +299,7 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
   const feedbackAvailable = enableFeedback && mastraClient.feedbackEnabled;
   const { url: mlflowExperimentUrl } = useMastraMlflowExperiment(feedbackAvailable);
   const threadKey = threadStorageKey(mastraClient.basePath, agentId);
+  const activeRunsKey = activeRunStorageKey(mastraClient.basePath, agentId);
   const [activeThreadId, setActiveThreadId] = useState<string>(() =>
     enableThreads ? (readStoredThreadId(threadKey) ?? hash.id()) : hash.id(),
   );
@@ -510,6 +518,8 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
           };
         });
         if (getSession(threadId).runToken === token) {
+          const completedRunId = runIdRef.current;
+          if (completedRunId) removeStoredActiveRun(activeRunsKey, completedRunId);
           refreshThreadsSoon();
           // Turn finished on its own: start the oldest queued steer, if any.
           drainQueueRef.current(threadId);
@@ -531,6 +541,8 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
               runId: runIdRef.current,
             };
           });
+          const staleRunId = runIdRef.current;
+          if (staleRunId) removeStoredActiveRun(activeRunsKey, staleRunId);
           refreshThreadsSoon();
           drainQueueRef.current(threadId);
           return;
@@ -549,6 +561,7 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
     },
     [
       agentId,
+      activeRunsKey,
       getSession,
       mastraClient,
       processStream,
@@ -562,6 +575,13 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
     (threadId: string, message: UIMessage, requestContext?: MastraRequestContextSnapshot) => {
       const assistantId = hash.id();
       const runId = hash.id();
+      storeActiveRun(activeRunsKey, {
+        threadId,
+        runId,
+        assistantId,
+        userMessage: message,
+        startedAt: Date.now(),
+      });
       updateSession(threadId, (session) => ({
         ...session,
         assistantId,
@@ -595,9 +615,50 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
         });
       });
     },
-    [driveStream, mastraClient, agentId, updateSession],
+    [activeRunsKey, driveStream, mastraClient, agentId, updateSession],
   );
 
+  const recoveredRunsKeyRef = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    if (!mastraClient.backgroundTurns || recoveredRunsKeyRef.current === activeRunsKey) return;
+    recoveredRunsKeyRef.current = activeRunsKey;
+    for (const run of readStoredActiveRuns(activeRunsKey)) {
+      const session = getSession(run.threadId);
+      if (isSessionRunning(session) || session.runId === run.runId) continue;
+      updateSession(run.threadId, (current) => ({
+        ...current,
+        messages: current.messages.some((message) => message.id === run.userMessage.id)
+          ? current.messages
+          : [...current.messages, run.userMessage],
+        assistantId: run.assistantId,
+        runId: run.runId,
+        runs: {
+          ...current.runs,
+          [run.runId]: { assistantId: run.assistantId },
+        },
+      }));
+      void driveStream(run.threadId, run.assistantId, (signal) =>
+        mastraClient.observeAgentStream({
+          agentId,
+          runId: run.runId,
+          threadId: run.threadId === DEFAULT_THREAD_SESSION_KEY ? undefined : run.threadId,
+          signal,
+        }),
+      ).then(async () => {
+        if (run.threadId === DEFAULT_THREAD_SESSION_KEY) return;
+        const history = await mastraClient
+          .history({
+            agentId,
+            threadId: run.threadId,
+            page: 0,
+            perPage: 20,
+          })
+          .catch(() => undefined);
+        if (history) writeMessages(run.threadId, toChronologicalUiMessages(history));
+      });
+    }
+  }, [activeRunsKey, agentId, driveStream, getSession, mastraClient, updateSession, writeMessages]);
+
   // Start the oldest queued steer as the next turn (FIFO drain). Called from
   // `driveStream` when a turn ends normally; a no-op when the queue is empty.
   // Kept behind `drainQueueRef` so `driveStream` can reach it without a
@@ -632,6 +693,9 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
             runId: current.runId,
             threadId: streamThreadId,
           })
+          .then((aborted) => {
+            if (aborted && current.runId) removeStoredActiveRun(activeRunsKey, current.runId);
+          })
           .catch((error: unknown) => {
             logger.warn("failed to abort background run", {
               runId: current.runId,
@@ -651,7 +715,7 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
         };
       });
     },
-    [activeKey, agentId, getSession, mastraClient, updateSession],
+    [activeKey, activeRunsKey, agentId, getSession, mastraClient, updateSession],
   );
 
   const handleApproval = useChatApprovals({
@@ -1155,6 +1219,10 @@ export interface MastraChatProps<
   modelSelectorActions?: ReactNode;
   /** Host controls placed on the left side of the composer footer. */
   composerLeadingActions?: ReactNode;
+  /** Host controls rendered immediately before the responsive History action. */
+  threadHistoryLeadingActions?: ReactNode;
+  /** Host controls rendered in the full conversation-list header. */
+  threadSidebarHeaderActions?: ReactNode;
 }
 
 /**
@@ -1167,7 +1235,7 @@ export interface MastraChatProps<
  * of the resource's threads with select / new / delete, persisted
  * across reloads) - all with no host wiring. The model picker is opt-in
  * via `showModelPicker`; thread management is on by default, laid out per
- * `threadPlacement` (`auto` docks it left and falls back to a tab strip on a
+ * `threadPlacement` (`auto` docks it right and falls back to a tab strip on a
  * narrow chat) and turned off with `threadPlacement: "disabled"`.
  */
 export const MastraChat = <TValues extends Record<string, unknown> = Record<string, unknown>>({
@@ -1175,6 +1243,8 @@ export const MastraChat = <TValues extends Record<string, unknown> = Record<stri
   composerActions,
   modelSelectorActions,
   composerLeadingActions,
+  threadHistoryLeadingActions,
+  threadSidebarHeaderActions,
   ...options
 }: MastraChatProps<TValues>) => {
   const chat = useMastraChat(options);
@@ -1185,6 +1255,8 @@ export const MastraChat = <TValues extends Record<string, unknown> = Record<stri
       composerActions={composerActions}
       modelSelectorActions={modelSelectorActions}
       composerLeadingActions={composerLeadingActions}
+      threadHistoryLeadingActions={threadHistoryLeadingActions}
+      threadSidebarHeaderActions={threadSidebarHeaderActions}
     />
   );
 };

package/src/react/thread-sidebar.tsx

@@ -16,7 +16,7 @@ import {
   SquareIcon,
   Trash2Icon,
 } from "lucide-react";
-import { useState } from "react";
+import { type ReactNode, useState } from "react";
 import type { ThreadSummary } from "./types.ts";
 import { relativeTime, threadTitle } from "../support/thread-labels.ts";
 
@@ -52,6 +52,8 @@ export interface ThreadSidebarProps {
   onCancel?: (threadId: string) => void;
   /** Collapse the sidebar. Renders the hide button in the header when provided. */
   onHide?: () => void;
+  /** Host controls rendered in the conversation-list header. */
+  headerActions?: ReactNode;
   /**
    * Edge the sidebar is docked to. Only affects framing - which side carries
    * the divider, and which way the collapse icon points. Defaults to `left`.
@@ -82,6 +84,7 @@ export const ThreadSidebar = ({
   onRename,
   onCancel,
   onHide,
+  headerActions,
   side = "left",
   className,
 }: ThreadSidebarProps) => {
@@ -134,7 +137,7 @@ export const ThreadSidebar = ({
         className,
       )}
     >
-      {(onNew || onHide) && (
+      {(onNew || headerActions || onHide) && (
         <div className="flex items-center gap-2 p-2">
           {onNew && (
             <Button
@@ -148,6 +151,7 @@ export const ThreadSidebar = ({
               New chat
             </Button>
           )}
+          {headerActions}
           {onHide && (
             <Tooltip>
               <TooltipTrigger asChild>

package/src/react/thread-tabs.tsx

@@ -44,6 +44,8 @@ export interface ThreadTabsProps extends Omit<ThreadSidebarProps, "onHide" | "si
   newIcon?: ReactNode;
   /** Replacement for the default history icon. */
   historyIcon?: ReactNode;
+  /** Host controls rendered immediately before History. */
+  historyLeadingActions?: ReactNode;
 }
 
 /** New/history controls reused by the tab strip and persistent assistant header. */
@@ -54,10 +56,17 @@ export interface ThreadActionsProps extends Omit<
   actions?: ReactNode;
   newIcon?: ReactNode;
   historyIcon?: ReactNode;
+  historyLeadingActions?: ReactNode;
 }
 
 /** Render New and History controls, plus optional host actions, as one group. */
-export const ThreadActions = ({ actions, newIcon, historyIcon, ...list }: ThreadActionsProps) => {
+export const ThreadActions = ({
+  actions,
+  newIcon,
+  historyIcon,
+  historyLeadingActions,
+  ...list
+}: ThreadActionsProps) => {
   const { onSelect, onNew } = list;
   const [historyOpen, setHistoryOpen] = useState(false);
   return (
@@ -79,6 +88,7 @@ export const ThreadActions = ({ actions, newIcon, historyIcon, ...list }: Thread
           <TooltipContent>New chat</TooltipContent>
         </Tooltip>
       )}
+      {historyLeadingActions}
       <Popover open={historyOpen} onOpenChange={setHistoryOpen}>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -136,6 +146,7 @@ export const ThreadTabs = ({
   showActions = true,
   newIcon,
   historyIcon,
+  historyLeadingActions,
   className,
   ...list
 }: ThreadTabsProps) => {
@@ -207,7 +218,13 @@ export const ThreadTabs = ({
           })}
         </div>
         {showActions ? (
-          <ThreadActions {...list} actions={actions} newIcon={newIcon} historyIcon={historyIcon} />
+          <ThreadActions
+            {...list}
+            actions={actions}
+            newIcon={newIcon}
+            historyIcon={historyIcon}
+            historyLeadingActions={historyLeadingActions}
+          />
         ) : null}
       </div>
     </div>

package/src/react/tool-pill.tsx

@@ -124,8 +124,8 @@ type MessageGroup = {
  * are resolved out-of-band via the chart cache; suggestions live at
  * message scope.
  *
- * Genie `thinking` and `text` entries render in the assistant bubble's
- * consolidated Thoughts panel and are intentionally omitted here.
+ * Genie `thinking` entries render as interleaved Thoughts disclosures in the
+ * assistant activity timeline and are intentionally omitted here.
  *
  * `groups` preserves first-seen order so the rendered detail view
  * walks Genie sub-calls in the order the LLM dispatched them.
@@ -190,7 +190,7 @@ const summarizeProgress = (progress: ToolProgress[]): ToolDetailSummary => {
         break;
       }
       case "thinking": {
-        // Reasoning is rendered once in the assistant bubble's Thoughts panel.
+        // Reasoning is rendered once in the assistant activity timeline.
         break;
       }
       case "query": {

package/src/react/types.ts

@@ -265,7 +265,7 @@ export type ChatViewProps = {
   /**
    * Where the conversation list renders (or `"disabled"` to hide it even when
    * {@link threads} and {@link onSelectThread} are wired). Defaults to
-   * `"auto"`: a left side panel while the chat is wide, a tab strip once it
+   * `"auto"`: a right side panel while the chat is wide, a tab strip once it
    * is too narrow for one. See {@link ThreadPlacement}.
    */
   threadPlacement?: ThreadPlacement;
@@ -274,6 +274,10 @@ export type ChatViewProps = {
    * actions. The persistent assistant uses this for its panel Close button.
    */
   threadBarActions?: ReactNode;
+  /** Host controls rendered immediately before the top-row History action. */
+  threadHistoryLeadingActions?: ReactNode;
+  /** Host controls rendered in the docked or drawer conversation-list header. */
+  threadSidebarHeaderActions?: ReactNode;
   /** Whether the top tab row renders its built-in New/History controls. */
   showThreadBarActions?: boolean;
   /** Replacement icon for the top tab row's New action. */

package/src/support/active-runs.ts

@@ -0,0 +1,111 @@
+import type { UIMessage } from "ai";
+import { z } from "zod";
+
+const ACTIVE_RUN_MAX_AGE_MS = 24 * 60 * 60 * 1_000;
+
+export const StoredActiveRunSchema = z
+  .object({
+    threadId: z.string().min(1).describe("Mastra thread receiving the background turn."),
+    runId: z.string().min(1).describe("Mastra background run identifier."),
+    assistantId: z.string().min(1).describe("Client assistant message identifier."),
+    userMessage: z
+      .object({
+        id: z.string().min(1),
+        role: z.literal("user"),
+        parts: z.array(z.unknown()),
+      })
+      .passthrough()
+      .describe("Submitted user message restored before stream replay."),
+    startedAt: z.number().int().nonnegative().describe("Client epoch time when the run started."),
+  })
+  .strict()
+  .describe("Reload-recoverable Mastra background run metadata.");
+
+/** Reload-recoverable metadata for one active Mastra background run. */
+export type StoredActiveRun = Omit<z.infer<typeof StoredActiveRunSchema>, "userMessage"> & {
+  userMessage: UIMessage;
+};
+
+const StoredActiveRunFileSchema = z
+  .object({
+    version: z.literal(1).describe("Active run storage format version."),
+    runs: z.array(StoredActiveRunSchema).describe("Background runs awaiting terminal completion."),
+  })
+  .strict()
+  .describe("Browser-persisted Mastra background run registry.");
+
+type StorageLike = Pick<Storage, "getItem" | "setItem" | "removeItem">;
+
+/** Build the browser storage key for one Mastra agent's active runs. */
+export const activeRunStorageKey = (basePath: string, agentId: string): string =>
+  `dbx-mastra-active-runs:${basePath}:${agentId}`;
+
+function browserStorage(): StorageLike | undefined {
+  try {
+    return typeof window === "undefined" ? undefined : window.localStorage;
+  } catch {
+    return undefined;
+  }
+}
+
+/** Read current non-stale background runs, deleting malformed storage. */
+export function readStoredActiveRuns(
+  key: string,
+  storage: StorageLike | undefined = browserStorage(),
+  now = Date.now(),
+): StoredActiveRun[] {
+  if (!storage) return [];
+  try {
+    const serialized = storage.getItem(key);
+    if (!serialized) return [];
+    const parsed = StoredActiveRunFileSchema.parse(JSON.parse(serialized));
+    const parsedRuns: StoredActiveRun[] = parsed.runs.map((run) => ({
+      ...run,
+      userMessage: run.userMessage as UIMessage,
+    }));
+    const runs = parsedRuns.filter((run) => now - run.startedAt <= ACTIVE_RUN_MAX_AGE_MS);
+    if (runs.length !== parsed.runs.length) writeStoredActiveRuns(key, runs, storage);
+    return runs as StoredActiveRun[];
+  } catch {
+    try {
+      storage.removeItem(key);
+    } catch {}
+    return [];
+  }
+}
+
+/** Add or replace one reload-recoverable background run. */
+export function storeActiveRun(
+  key: string,
+  run: StoredActiveRun,
+  storage: StorageLike | undefined = browserStorage(),
+): void {
+  if (!storage) return;
+  const runs = readStoredActiveRuns(key, storage).filter(
+    (candidate) => candidate.runId !== run.runId,
+  );
+  writeStoredActiveRuns(key, [...runs, run], storage);
+}
+
+/** Remove one terminal or explicitly aborted background run. */
+export function removeStoredActiveRun(
+  key: string,
+  runId: string,
+  storage: StorageLike | undefined = browserStorage(),
+): void {
+  if (!storage) return;
+  const runs = readStoredActiveRuns(key, storage).filter((run) => run.runId !== runId);
+  writeStoredActiveRuns(key, runs, storage);
+}
+
+function writeStoredActiveRuns(key: string, runs: StoredActiveRun[], storage: StorageLike): void {
+  try {
+    if (runs.length === 0) {
+      storage.removeItem(key);
+      return;
+    }
+    storage.setItem(key, JSON.stringify({ version: 1, runs }));
+  } catch {
+    // Browser persistence is best-effort; the live in-memory run remains valid.
+  }
+}

package/src/support/index.ts

@@ -2,6 +2,7 @@
 // Regenerated from the exporting modules in ./src.
 // Hand edits are overwritten on the next watch; this file is read-only.
 
+export * as activeRuns from "./active-runs.ts";
 export * as chartOption from "./chart-option.ts";
 export * as chartTheme from "./chart-theme.ts";
 export * as clipboard from "./clipboard.ts";
@@ -14,6 +15,8 @@ export * as threadLabels from "./thread-labels.ts";
 export * as threadSessions from "./thread-sessions.ts";
 export * as threadTabs from "./thread-tabs.ts";
 export * as toolEvents from "./tool-events.ts";
+export { StoredActiveRunSchema, activeRunStorageKey } from "./active-runs.ts";
+export type { StoredActiveRun } from "./active-runs.ts";
 export { LIGHT_CHART_CHROME } from "./chart-theme.ts";
 export type { ChartChrome } from "./chart-theme.ts";
 export type { ExportFormat, ExportBrand, EmbedResolver, ExportChatOptions } from "./export.ts";

package/src/support/mastra-client.ts

@@ -130,6 +130,7 @@ export class MastraPluginClient extends MastraClient {
       fetch: async (input, init) => {
         const response = await fetch(input, init);
         headers = new Headers(response.headers);
+        await assertChatResponse(response);
         return response;
       },
     });
@@ -160,6 +161,7 @@ export class MastraPluginClient extends MastraClient {
       fetch: async (input, init) => {
         const response = await fetch(input, init);
         headers = new Headers(response.headers);
+        await assertChatResponse(response);
         return response;
       },
     });
@@ -620,6 +622,35 @@ export class MastraPluginClient extends MastraClient {
   }
 }
 
+async function assertChatResponse(response: Response): Promise<void> {
+  if (response.ok) return;
+  const body = await response
+    .clone()
+    .json()
+    .catch(() => undefined);
+  const message =
+    responseErrorMessage(body) ??
+    (await response
+      .clone()
+      .text()
+      .catch(() => ""));
+  throw new Error(message.trim() || `Chat request failed (${response.status})`);
+}
+
+function responseErrorMessage(body: unknown): string | undefined {
+  if (!body || typeof body !== "object") return undefined;
+  const record = body as Record<string, unknown>;
+  for (const field of ["error", "message"] as const) {
+    const value = record[field];
+    if (typeof value === "string" && value.trim()) return value.trim();
+    if (value && typeof value === "object") {
+      const nested = (value as Record<string, unknown>).message;
+      if (typeof nested === "string" && nested.trim()) return nested.trim();
+    }
+  }
+  return undefined;
+}
+
 /**
  * Read the Mastra plugin's `clientConfig()` payload (`basePath`,
  * default agent, registered agent list). One call per render; values