@dbx-tools/ui-mastra 0.6.218 → 0.6.219

package/src/react/chat-history.ts

@@ -1,32 +1,76 @@
 import { error as sharedError, log } from "@dbx-tools/shared-core";
+import type { ListMemoryThreadMessagesResponse } from "@mastra/client-js";
 import type { UIMessage } from "ai";
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { MastraPluginClient } from "../support/mastra-client.ts";
 import type {
   ThreadMessageWriter,
   ThreadSessionReader,
   ThreadSessionUpdater,
 } from "./chat-sessions.ts";
+import type { PendingApproval } from "./types.ts";
+import type { MastraPluginClient } from "../support/mastra-client.ts";
 
 const HISTORY_PAGE_SIZE = 20;
 const logger = log.logger("ui-mastra/chat");
 
 interface UseChatHistoryOptions {
   activeKey: string;
-  activeThreadId: string | undefined;
+  activeThreadId: string;
   agentId: string;
   getSession: ThreadSessionReader;
+  availability: "loading" | "present" | "missing";
   mastraClient: MastraPluginClient;
   updateSession: ThreadSessionUpdater;
   writeMessages: ThreadMessageWriter;
 }
 
+type SuspendedRuns = Awaited<ReturnType<MastraPluginClient["suspendedRuns"]>>["runs"];
+
+/** Read a newest-first native memory page as chronological UI messages. */
+function toChronologicalUiMessages(response: ListMemoryThreadMessagesResponse): UIMessage[] {
+  return [...(response.uiMessages ?? [])].reverse() as UIMessage[];
+}
+
+/** Recover actionable approval cards from Mastra's persisted suspended runs. */
+function pendingApprovals(
+  messages: UIMessage[],
+  runs: SuspendedRuns,
+): Record<string, PendingApproval[]> {
+  const approvals: Record<string, PendingApproval[]> = {};
+  const assistantMessages = messages.filter((message) => message.role === "assistant");
+  for (const run of runs) {
+    for (const toolCall of run.toolCalls) {
+      if (!toolCall.requiresApproval || !toolCall.toolCallId || !toolCall.toolName) continue;
+      const owner =
+        [...assistantMessages]
+          .reverse()
+          .find((message) =>
+            message.parts.some(
+              (part) => (part as { toolCallId?: unknown }).toolCallId === toolCall.toolCallId,
+            ),
+          ) ?? assistantMessages.at(-1);
+      if (!owner) continue;
+      approvals[owner.id] = [
+        ...(approvals[owner.id] ?? []),
+        {
+          runId: run.runId,
+          toolCallId: toolCall.toolCallId,
+          toolName: toolCall.toolName,
+          input: toolCall.args,
+        },
+      ];
+    }
+  }
+  return approvals;
+}
+
 /** Hydrate and page the active thread while other thread sessions keep running. */
 export function useChatHistory({
   activeKey,
   activeThreadId,
   agentId,
   getSession,
+  availability,
   mastraClient,
   updateSession,
   writeMessages,
@@ -44,6 +88,19 @@ export function useChatHistory({
       setIsLoadingHistory(false);
       return;
     }
+    if (availability === "loading") {
+      setIsLoadingHistory(true);
+      return;
+    }
+    if (availability === "missing") {
+      updateSession(threadId, (current) => ({
+        ...current,
+        historyLoaded: true,
+        hasMoreHistory: false,
+      }));
+      setIsLoadingHistory(false);
+      return;
+    }
 
     let cancelled = false;
     const controller = new AbortController();
@@ -57,16 +114,28 @@ export function useChatHistory({
         perPage: HISTORY_PAGE_SIZE,
         signal: controller.signal,
       })
-      .then((response) => {
+      .then(async (response) => {
+        const suspended = await mastraClient
+          .suspendedRuns(agentId, activeThreadId, controller.signal)
+          .catch((error: unknown) => {
+            if ((error as { name?: string }).name === "AbortError") throw error;
+            logger.warn("suspended-run discovery error", {
+              error: sharedError.errorMessage(error),
+            });
+            return { runs: [], total: 0 };
+          });
+        return [response, suspended] as const;
+      })
+      .then(([response, suspended]) => {
         if (cancelled) return;
+        const messages = toChronologicalUiMessages(response);
         updateSession(threadId, (current) => ({
           ...current,
-          messages: response.uiMessages as unknown as UIMessage[],
+          messages,
           historyLoaded: true,
-          hasMoreHistory: response.hasMore,
+          hasMoreHistory: response.hasMore ?? false,
           historyPage: 1,
-          toolEventsByMessage: {},
-          pendingApprovalsByMessage: {},
+          pendingApprovalsByMessage: pendingApprovals(messages, suspended.runs),
           feedbackByMessage: {},
         }));
       })
@@ -89,7 +158,7 @@ export function useChatHistory({
       cancelled = true;
       controller.abort();
     };
-  }, [activeKey, activeThreadId, agentId, getSession, mastraClient, updateSession]);
+  }, [activeKey, activeThreadId, agentId, availability, getSession, mastraClient, updateSession]);
 
   const loadOlderHistory = useCallback(() => {
     const threadId = activeKey;
@@ -102,13 +171,13 @@ export function useChatHistory({
     mastraClient
       .history({ agentId, threadId: activeThreadId, page, perPage: HISTORY_PAGE_SIZE })
       .then((response) => {
-        const uiMessages = response.uiMessages as unknown as UIMessage[];
+        const uiMessages = toChronologicalUiMessages(response);
         if (uiMessages.length > 0) {
           writeMessages(threadId, [...uiMessages, ...getSession(threadId).messages]);
         }
         updateSession(threadId, (current) => ({
           ...current,
-          hasMoreHistory: response.hasMore,
+          hasMoreHistory: response.hasMore ?? false,
         }));
       })
       .catch((error: unknown) => {

package/src/react/chat-stream.ts

@@ -1,16 +1,12 @@
 import { feedback } from "@dbx-tools/shared-mastra";
+import { readUIMessageStream, type UIMessage } from "ai";
 import { useCallback } from "react";
-import type { MastraStreamResponse } from "../support/mastra-stream.ts";
 import type {
   ThreadMessageWriter,
   ThreadSessionReader,
   ThreadSessionUpdater,
 } from "./chat-sessions.ts";
-import {
-  chatStreamAssistantMessage,
-  createChatStreamState,
-  reduceChatStreamChunk,
-} from "./chat-stream-reducer.ts";
+import type { MastraStreamResponse } from "../support/mastra-client.ts";
 
 /** Read the MLflow trace id captured by the server on a stream response. */
 const readMlflowTraceId = (stream: unknown): string | undefined => {
@@ -20,13 +16,22 @@ const readMlflowTraceId = (stream: unknown): string | undefined => {
 
 class StreamAborted extends Error {}
 
+/** Replace or append one assistant message without disturbing the transcript. */
+function upsertAssistant(messages: UIMessage[], assistant: UIMessage): UIMessage[] {
+  const next = [...messages];
+  const index = next.findIndex((message) => message.id === assistant.id);
+  if (index === -1) next.push(assistant);
+  else next[index] = assistant;
+  return next;
+}
+
 interface UseChatStreamOptions {
   getSession: ThreadSessionReader;
   updateSession: ThreadSessionUpdater;
   writeMessages: ThreadMessageWriter;
 }
 
-/** Translate one validated Mastra data stream into thread messages and tool state. */
+/** Project one Mastra stream through the native AI SDK UI message converter. */
 export function useChatStream({ getSession, updateSession, writeMessages }: UseChatStreamOptions) {
   return useCallback(
     async (
@@ -54,59 +59,24 @@ export function useChatStream({ getSession, updateSession, writeMessages }: UseC
         );
       }
 
-      const session = getSession(threadId);
-      const existing = session.messages.find((message) => message.id === assistantId);
-      let state = createChatStreamState({
-        ...(existing ? { existing } : {}),
-        pendingApprovals: session.pendingApprovalsByMessage[assistantId] ?? [],
-        runId: runIdRef.current,
-        toolEvents: session.toolEventsByMessage[assistantId] ?? [],
-      });
-
-      const upsertAssistant = () => {
-        const next = [...getSession(threadId).messages];
-        const index = next.findIndex((message) => message.id === assistantId);
-        const message = chatStreamAssistantMessage(assistantId, state);
-        if (index === -1) next.push(message);
-        else next[index] = message;
-        writeMessages(threadId, next);
-      };
-
       try {
-        await stream.processDataStream({
-          onChunk: async (chunk) => {
-            if (signal.aborted) throw new StreamAborted();
-            const next = reduceChatStreamChunk(state, chunk);
-            state = next.state;
-            runIdRef.current = state.runId;
-
-            if (Object.values(next.changes).some(Boolean)) {
-              updateSession(threadId, (current) => ({
-                ...current,
-                ...(next.changes.runId ? { runId: state.runId } : {}),
-                ...(next.changes.status ? { status: "streaming" as const } : {}),
-                ...(next.changes.toolEvents
-                  ? {
-                      toolEventsByMessage: {
-                        ...current.toolEventsByMessage,
-                        [assistantId]: state.toolEvents,
-                      },
-                    }
-                  : {}),
-                ...(next.changes.pendingApprovals
-                  ? {
-                      pendingApprovalsByMessage: {
-                        ...current.pendingApprovalsByMessage,
-                        [assistantId]: state.pendingApprovals,
-                      },
-                    }
-                  : {}),
-              }));
-            }
-            if (next.assistantChanged) upsertAssistant();
-            if (next.error) throw new Error(next.error);
-          },
-        });
+        const existing = getSession(threadId).messages.find(
+          (message) => message.id === assistantId,
+        );
+        for await (const message of readUIMessageStream({
+          ...(existing ? { message: existing } : {}),
+          stream: stream.stream,
+          terminateOnError: true,
+        })) {
+          if (signal.aborted) throw new StreamAborted();
+          const assistant = message.id === assistantId ? message : { ...message, id: assistantId };
+          writeMessages(threadId, upsertAssistant(getSession(threadId).messages, assistant));
+          updateSession(threadId, (current) => ({
+            ...current,
+            runId: runIdRef.current,
+            status: "streaming",
+          }));
+        }
       } catch (error) {
         if (error instanceof StreamAborted || signal.aborted) return;
         throw error;

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

@@ -37,6 +37,10 @@ type ChatThreadLayoutProps = {
   className: ChatViewProps["className"];
   threads: ChatViewProps["threads"];
   threadPlacement: NonNullable<ChatViewProps["threadPlacement"]>;
+  threadBarActions: ChatViewProps["threadBarActions"];
+  showThreadBarActions: NonNullable<ChatViewProps["showThreadBarActions"]>;
+  threadNewIcon: ChatViewProps["threadNewIcon"];
+  threadHistoryIcon: ChatViewProps["threadHistoryIcon"];
   activeThreadId: ChatViewProps["activeThreadId"];
   streamingThreadIds: NonNullable<ChatViewProps["streamingThreadIds"]>;
   isLoadingThreads: NonNullable<ChatViewProps["isLoadingThreads"]>;
@@ -87,6 +91,10 @@ export const ChatThreadLayout = ({
   className,
   threads,
   threadPlacement,
+  threadBarActions,
+  showThreadBarActions,
+  threadNewIcon,
+  threadHistoryIcon,
   activeThreadId,
   streamingThreadIds,
   isLoadingThreads,
@@ -179,7 +187,15 @@ export const ChatThreadLayout = ({
               ))}
         <div className="flex h-full min-w-0 flex-1 flex-col">
           {tabbedThreads && (
-            <ThreadTabs {...threadListProps} openThreadIds={openTabIds} onCloseTab={closeTab} />
+            <ThreadTabs
+              {...threadListProps}
+              openThreadIds={openTabIds}
+              onCloseTab={closeTab}
+              actions={threadBarActions}
+              showActions={showThreadBarActions}
+              newIcon={threadNewIcon}
+              historyIcon={threadHistoryIcon}
+            />
           )}
           {showSidebarToggle && (
             <div

package/src/react/chat-view.tsx

@@ -29,6 +29,7 @@ export const ChatView = ({
   onModelChange,
   defaultModelName,
   composerActions,
+  composerLeadingActions,
   onLoadMore,
   isLoadingMore = false,
   hasMore = false,
@@ -38,6 +39,10 @@ export const ChatView = ({
   onClear,
   threads,
   threadPlacement = "auto",
+  threadBarActions,
+  showThreadBarActions = true,
+  threadNewIcon,
+  threadHistoryIcon,
   activeThreadId,
   streamingThreadIds = [],
   isLoadingThreads = false,
@@ -67,6 +72,10 @@ export const ChatView = ({
       className={className}
       threads={threads}
       threadPlacement={threadPlacement}
+      threadBarActions={threadBarActions}
+      showThreadBarActions={showThreadBarActions}
+      threadNewIcon={threadNewIcon}
+      threadHistoryIcon={threadHistoryIcon}
       activeThreadId={activeThreadId}
       streamingThreadIds={streamingThreadIds}
       isLoadingThreads={isLoadingThreads}
@@ -110,6 +119,7 @@ export const ChatView = ({
         onModelChange={onModelChange}
         defaultModelName={defaultModelName}
         composerActions={composerActions}
+        composerLeadingActions={composerLeadingActions}
         isLoadingHistory={isLoadingHistory}
         onClear={onClear}
         onExportConversation={onExportConversation}

package/src/react/export-menu.tsx

@@ -45,7 +45,14 @@ export const ExportMenu = ({
   disabled?: boolean;
 }) => {
   const trigger = iconOnly ? (
-    <Button type="button" size="icon" variant="ghost" className="size-7" disabled={disabled}>
+    <Button
+      type="button"
+      size="icon"
+      variant="ghost"
+      className="size-7"
+      disabled={disabled}
+      aria-label={tooltip}
+    >
       <DownloadIcon className="size-3" />
     </Button>
   ) : (

package/src/react/index.ts

@@ -2,6 +2,8 @@
 //
 // - `MastraChat` / `useMastraChat`: the self-contained drop-in (and its
 //   headless driver) that wire themselves from the Mastra plugin config.
+// - `MastraAssistant` / `useMastraAssistant`: the persistent app shell and
+//   controller for docked/overlay chat launched from anywhere below it.
 // - `ChatView`: the controlled, presentational shell for callers that
 //   own message state and transport themselves.
 // - The Mastra plugin client + hooks (model catalogue, history paging,
@@ -27,13 +29,27 @@ export {
 export type { ByIdFetchState } from "../support/mastra-client.ts";
 export { ChatView } from "./chat-view.tsx";
 export { ExportMenu } from "./export-menu.tsx";
+export { MastraAssistant, useMastraAssistant } from "./mastra-assistant.tsx";
+export type {
+  MastraAssistantController,
+  MastraAssistantLauncherOptions,
+  MastraAssistantLauncherPosition,
+  MastraAssistantMode,
+  MastraAssistantProps,
+  MastraAssistantResizeOptions,
+  MastraAssistantSide,
+} from "./mastra-assistant.tsx";
+export type {
+  MastraRequestContextInput,
+  MastraRequestContextSource,
+} from "../support/request-context.ts";
 export { dedupeSuggestions } from "./suggestions.ts";
 export { MastraChat, useMastraChat } from "./mastra-chat.tsx";
 export type { MastraChatProps, UseMastraChatOptions } from "./mastra-chat.tsx";
 export { ThreadSidebar } from "./thread-sidebar.tsx";
 export type { ThreadSidebarProps } from "./thread-sidebar.tsx";
-export { ThreadTabs } from "./thread-tabs.tsx";
-export type { ThreadTabsProps } from "./thread-tabs.tsx";
+export { ThreadActions, ThreadTabs } from "./thread-tabs.tsx";
+export type { ThreadActionsProps, ThreadTabsProps } from "./thread-tabs.tsx";
 export type {
   ApprovalDecision,
   ChatModelOption,