@dbx-tools/ui-mastra 0.9.108 → 0.9.111

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.108";
+export const PACKAGE_VERSION = "0.9.111";
 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";
@@ -52,7 +52,7 @@ export type { DataRow } from "./src/react/data-grid.tsx";
 export { MarkdownWithEmbeds } from "./src/react/embed-slots.tsx";
 export { ExportMenu } from "./src/react/export-menu.tsx";
 export { FeedbackControls } from "./src/react/feedback-controls.tsx";
-export { AssistantMarkdown, ToolMarkdown, SqlBlock, JsonBlock } from "./src/react/markdown.tsx";
+export { AssistantMarkdown, ToolMarkdown, SqlBlock, JsonBlock, SourceBlock } from "./src/react/markdown.tsx";
 export type { MastraAssistantMode, MastraAssistantSide, MastraAssistantLauncherPosition, MastraAssistantResizeOptions, MastraAssistantLauncherOptions, MastraAssistantController, MastraAssistantProps } from "./src/react/mastra-assistant.tsx";
 export { useMastraChat, MastraChat } from "./src/react/mastra-chat.tsx";
 export type { UseMastraChatOptions, MastraChatProps } from "./src/react/mastra-chat.tsx";
@@ -64,7 +64,7 @@ export type { ThreadSidebarProps } from "./src/react/thread-sidebar.tsx";
 export { ThreadActions, ThreadTabs } from "./src/react/thread-tabs.tsx";
 export type { ThreadTabsProps, ThreadActionsProps } from "./src/react/thread-tabs.tsx";
 export { humanizeToolName, ToolSessionPill } from "./src/react/tool-pill.tsx";
-export type { WebSearchProgressGroup } from "./src/react/tool-pill.tsx";
+export type { ToolInputPresentation, WebSearchProgressGroup } from "./src/react/tool-pill.tsx";
 export type { ChatStatus, ToolEvent, ToolProgress, ChatModelOption, QueuedSteer, FeedbackValue, FeedbackSubmission, MessageFeedback, ThreadSummary, ThreadPlacement, ChatViewProps, ApprovalDecision, PendingApproval } from "./src/react/types.ts";
 export { LIGHT_CHART_CHROME } from "./src/support/chart-theme.ts";
 export type { ChartChrome } from "./src/support/chart-theme.ts";

package/package.json

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

package/src/react/chat-stream.ts

@@ -23,6 +23,7 @@ class StreamAborted extends Error {}
 /** Stop reading a background run once the AI SDK has delivered its terminal chunk. */
 export function closeOnTerminalChunk(
   stream: ReadableStream<UIMessageChunk>,
+  onTerminal?: () => void,
 ): ReadableStream<UIMessageChunk> {
   let reader: ReadableStreamDefaultReader<UIMessageChunk> | undefined;
   let cancelled = false;
@@ -38,6 +39,7 @@ export function closeOnTerminalChunk(
           }
           controller.enqueue(value);
           if (value.type === "finish" || value.type === "abort") {
+            onTerminal?.();
             controller.close();
             await reader.cancel("terminal AI SDK chunk received").catch(() => undefined);
             return;
@@ -101,12 +103,15 @@ export function useChatStream({ getSession, updateSession, writeMessages }: UseC
       }
 
       try {
+        let terminalReceived = false;
         const existing = getSession(threadId).messages.find(
           (message) => message.id === assistantId,
         );
         for await (const message of readUIMessageStream({
           ...(existing ? { message: existing } : {}),
-          stream: closeOnTerminalChunk(stream.stream),
+          stream: closeOnTerminalChunk(stream.stream, () => {
+            terminalReceived = true;
+          }),
           terminateOnError: true,
         })) {
           if (signal.aborted) throw new StreamAborted();
@@ -115,7 +120,7 @@ export function useChatStream({ getSession, updateSession, writeMessages }: UseC
           updateSession(threadId, (current) => ({
             ...current,
             runId: runIdRef.current,
-            status: "streaming",
+            status: terminalReceived ? "ready" : "streaming",
           }));
         }
       } catch (error) {

package/src/react/markdown.tsx

@@ -418,3 +418,30 @@ export const JsonBlock = ({ json, className }: { json: string; className?: strin
     </pre>
   );
 };
+
+/** Compact syntax-highlighted source block for tool request previews. */
+export const SourceBlock = ({
+  source,
+  language,
+  className,
+}: {
+  source: string;
+  language: string;
+  className?: string;
+}) => {
+  const html = useHighlightedHtml(source, language);
+  return (
+    <pre
+      className={cn(
+        "max-w-full overflow-auto whitespace-pre font-mono text-xs leading-snug",
+        className,
+      )}
+    >
+      {html === null ? (
+        <code>{source}</code>
+      ) : (
+        <code data-dbx-highlighted-code dangerouslySetInnerHTML={{ __html: html }} />
+      )}
+    </pre>
+  );
+};

package/src/react/mastra-chat.tsx

@@ -202,6 +202,12 @@ export interface UseMastraChatOptions<
    * inlined into the export so it renders reliably offline.
    */
   enableExport?: boolean;
+  /**
+   * Show the destructive Clear conversation action. Off by default because
+   * thread management already provides new/delete controls and most chats do
+   * not need a second way to erase the active conversation.
+   */
+  enableClear?: boolean;
   /**
    * Surface per-message feedback controls (thumbs up/down + a comment
    * modal) that log to MLflow as trace assessments.
@@ -277,6 +283,9 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
   const enableThreads = threadPlacement !== "disabled";
   // Export is opt-in (default off): the host turns it on explicitly.
   const enableExport = options.enableExport === true;
+  // Clearing is destructive and redundant with managed thread deletion, so
+  // the drop-in exposes it only when a host explicitly opts in.
+  const enableClear = options.enableClear === true;
   // Feedback defaults to automatic server capability detection. An explicit
   // false hides it; true keeps it requested but cannot bypass the server gate.
   const enableFeedback = options.enableFeedback !== false;
@@ -1080,7 +1089,7 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
     isLoadingMore,
     hasMore: activeSession.hasMoreHistory,
     isLoadingHistory,
-    onClear: handleClear,
+    ...(enableClear ? { onClear: handleClear } : {}),
     threadPlacement,
     // Conversation management: hand ChatView the thread list + handlers
     // only when enabled, so the sidebar stays hidden for the classic

package/src/react/tool-pill.tsx

@@ -8,7 +8,7 @@ import {
   cn,
 } from "@dbx-tools/ui/react";
 import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
-import { JsonBlock, SqlBlock, ToolMarkdown } from "./markdown.tsx";
+import { JsonBlock, SourceBlock, SqlBlock, ToolMarkdown } from "./markdown.tsx";
 import type { ToolEvent, ToolProgress } from "./types.ts";
 
 // Consolidated tool-session pill and its Genie progress detail view:
@@ -22,6 +22,9 @@ import type { ToolEvent, ToolProgress } from "./types.ts";
  * `Execute Command` rather than `Mastra Workspace Execute Command`.
  */
 const MASTRA_WORKSPACE_TOOL_PREFIX = "mastra_workspace_";
+const TOOL_LABELS: Readonly<Record<string, string>> = {
+  execute_typescript: "Run Workflow",
+};
 
 /**
  * Turn a snake/camel tool id into a Title Cased label the user can
@@ -38,6 +41,8 @@ const MASTRA_WORKSPACE_TOOL_PREFIX = "mastra_workspace_";
  *   `myCoolTool`    -> `My Cool Tool`
  */
 export const humanizeToolName = (toolName: string): string => {
+  const explicitLabel = TOOL_LABELS[toolName];
+  if (explicitLabel) return explicitLabel;
   const label = toolName.startsWith(MASTRA_WORKSPACE_TOOL_PREFIX)
     ? toolName.slice(MASTRA_WORKSPACE_TOOL_PREFIX.length)
     : toolName;
@@ -398,6 +403,108 @@ const RawToolPayload = ({ label, value }: { label: "Request" | "Response"; value
   </Collapsible>
 );
 
+export type ToolInputPresentation = {
+  label: "Code" | "Command" | "Output";
+  language: "typescript" | "javascript" | "python" | "sql" | "json" | "bash" | "text";
+  source: string;
+};
+
+const inputRecord = (value: unknown): Record<string, unknown> | undefined =>
+  typeof value === "object" && value !== null && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : undefined;
+
+/** Detect the most useful syntax grammar for a code-like tool request. */
+export function detectToolSourceLanguage(
+  source: string,
+  fallback: ToolInputPresentation["language"],
+): ToolInputPresentation["language"] {
+  const trimmed = source.trim();
+  if (/^(?:select|with|insert|update|delete|merge|create|alter)\b/i.test(trimmed)) return "sql";
+  if (/^(?:from\s+\S+\s+import|import\s+\S+|def\s+\w+|class\s+\w+):?/m.test(trimmed)) {
+    return "python";
+  }
+  if (/^(?:const|let|var|interface|type|export|import)\b/m.test(trimmed)) return "typescript";
+  if (/^(?:#!.*\b(?:ba|z|k)?sh\b|(?:cd|ls|cat|grep|find|bun|npm|pnpm|yarn)\s)/m.test(trimmed)) {
+    return "bash";
+  }
+  if ((trimmed.startsWith("{") || trimmed.startsWith("[")) && trimmed.length > 1) {
+    try {
+      JSON.parse(trimmed);
+      return "json";
+    } catch {
+      // Keep the tool-specific fallback for incomplete source.
+    }
+  }
+  return fallback;
+}
+
+/** Extract a compact code or command preview from a tool request payload. */
+export function toolInputPresentation(
+  toolName: string,
+  input: unknown,
+): ToolInputPresentation | undefined {
+  const record = inputRecord(input);
+  if (!record) return undefined;
+  if (typeof record.command === "string" && toolName.endsWith("execute_command")) {
+    return {
+      label: "Command",
+      language: detectToolSourceLanguage(record.command, "bash"),
+      source: record.command,
+    };
+  }
+  if (typeof record.code === "string") {
+    return {
+      label: "Code",
+      language: detectToolSourceLanguage(record.code, "typescript"),
+      source: record.code,
+    };
+  }
+  return undefined;
+}
+
+/** Extract Code Mode's completed result into its own compact output panel. */
+export function toolOutputPresentation(
+  toolName: string,
+  output: unknown,
+): ToolInputPresentation | undefined {
+  if (toolName !== "execute_typescript") return undefined;
+  const record = inputRecord(output);
+  if (!record || record.success !== true || !("result" in record)) return undefined;
+  const result = record.result;
+  const source = typeof result === "string" ? result : formatRawToolPayload(result);
+  return {
+    label: "Output",
+    language: typeof result === "string" ? detectToolSourceLanguage(result, "text") : "json",
+    source,
+  };
+}
+
+const ToolInputSource = ({ presentation }: { presentation: ToolInputPresentation }) => {
+  const lineCount = presentation.source.split("\n").length;
+  return (
+    <Collapsible className="rounded border border-border/60 bg-background/40">
+      <CollapsibleTrigger className="group flex w-full items-center gap-1.5 px-2 py-1 text-left text-xs text-muted-foreground hover:text-foreground">
+        <ChevronDownIcon className="size-3 shrink-0 transition-transform group-data-[state=closed]:-rotate-90" />
+        <span className="font-medium text-foreground/80">{presentation.label}</span>
+        <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase leading-none tracking-wide">
+          {presentation.language}
+        </span>
+        <span className="ml-auto text-[10px] tabular-nums">
+          {lineCount} {lineCount === 1 ? "line" : "lines"}
+        </span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <SourceBlock
+          source={presentation.source}
+          language={presentation.language}
+          className="max-h-64 border-t border-border/50 px-2 py-1.5 text-foreground"
+        />
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
 type ToolStatusProgress = Extract<ToolProgress, { type: "tool_status" }>;
 
 export type WebSearchProgressGroup = {
@@ -488,6 +595,41 @@ const hasExpandableDetails = (event: ToolEvent): boolean => {
   );
 };
 
+const ToolCallDetails = ({
+  event,
+  showQuestion = false,
+}: {
+  event: ToolEvent;
+  showQuestion?: boolean;
+}) => {
+  const question = askGenieQuestion(event);
+  const summary = summarizeProgress(event.progress ?? []);
+  const inputPresentation =
+    "input" in event ? toolInputPresentation(event.toolName, event.input) : undefined;
+  const outputPresentation =
+    "output" in event ? toolOutputPresentation(event.toolName, event.output) : undefined;
+
+  return (
+    <div className="flex flex-col gap-2">
+      {showQuestion && question ? (
+        <p className="break-words px-0.5 text-xs italic text-foreground/80">{question}</p>
+      ) : null}
+      {inputPresentation ? (
+        <ToolInputSource presentation={inputPresentation} />
+      ) : "input" in event ? (
+        <RawToolPayload label="Request" value={event.input} />
+      ) : null}
+      <WebSearchProgressDetails event={event} />
+      <ToolProgressDetails summary={summary} omitQuestion />
+      {outputPresentation ? (
+        <ToolInputSource presentation={outputPresentation} />
+      ) : "output" in event ? (
+        <RawToolPayload label="Response" value={event.output} />
+      ) : null}
+    </div>
+  );
+};
+
 /**
  * One row inside {@link ToolSessionPill}. Always-visible header
  * shows the status icon, the tool's verb (`Called Ask Genie`,
@@ -506,7 +648,6 @@ const ToolCallRow = ({ event }: { event: ToolEvent }) => {
   const isRunning = event.status === "running";
   const isError = event.status === "error";
   const question = askGenieQuestion(event);
-  const summary = summarizeProgress(event.progress ?? []);
   const expandable = hasExpandableDetails(event);
   // Inner rows defer to the live wire status when running (e.g.
   // "Executing query") so users tracking the open pill see the
@@ -553,11 +694,8 @@ const ToolCallRow = ({ event }: { event: ToolEvent }) => {
         {header}
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="flex flex-col gap-2 px-2 pb-2">
-          {"input" in event ? <RawToolPayload label="Request" value={event.input} /> : null}
-          <WebSearchProgressDetails event={event} />
-          <ToolProgressDetails summary={summary} omitQuestion />
-          {"output" in event ? <RawToolPayload label="Response" value={event.output} /> : null}
+        <div className="px-2 pb-2">
+          <ToolCallDetails event={event} />
         </div>
       </CollapsibleContent>
     </Collapsible>
@@ -648,10 +786,12 @@ export const ToolSessionPill = ({ events }: { events: ToolEvent[] }) => {
           )}
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <div className="mt-1.5 flex flex-col gap-1">
-            {events.map((event) => (
-              <ToolCallRow key={event.id} event={event} />
-            ))}
+          <div className={cn("mt-1.5", events.length > 1 && "flex flex-col gap-1")}>
+            {events.length === 1 ? (
+              <ToolCallDetails event={latest} showQuestion />
+            ) : (
+              events.map((event) => <ToolCallRow key={event.id} event={event} />)
+            )}
           </div>
         </CollapsibleContent>
       </Collapsible>