@dbx-tools/ui-mastra 0.9.70 → 0.9.71

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.70";
+export const PACKAGE_VERSION = "0.9.71";
 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";
@@ -64,6 +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 { 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.70",
-    "@dbx-tools/shared-genie": "^0.9.70",
-    "@dbx-tools/shared-mastra": "^0.9.70",
-    "@dbx-tools/shared-model": "^0.9.70",
-    "@dbx-tools/ui": "^0.9.70",
+    "@dbx-tools/shared-core": "^0.9.71",
+    "@dbx-tools/shared-genie": "^0.9.71",
+    "@dbx-tools/shared-mastra": "^0.9.71",
+    "@dbx-tools/shared-model": "^0.9.71",
+    "@dbx-tools/ui": "^0.9.71",
     "@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.70",
+  "version": "0.9.71",
   "dbxToolsConfig": {
     "tags": [
       "ui"

package/src/react/bubbles.tsx

@@ -350,7 +350,11 @@ export const AssistantBubble = ({
   feedbackValue,
   mlflowExperimentUrl,
 }: AssistantBubbleProps) => {
-  const toolEvents = mergeToolEvents(toolEventsFromParts(message.parts), events);
+  const toolEvents = mergeToolEvents(
+    toolEventsFromParts(message.parts),
+    events,
+    isLast && status === "error",
+  );
   const reasoning = [getReasoningText(message.parts), genieReasoningText(toolEvents)]
     .filter(Boolean)
     .join("\n\n");

package/src/react/tool-pill.tsx

@@ -384,6 +384,81 @@ const RawToolPayload = ({ label, value }: { label: "Request" | "Response"; value
   </Collapsible>
 );
 
+type ToolStatusProgress = Extract<ToolProgress, { type: "tool_status" }>;
+
+export type WebSearchProgressGroup = {
+  key: string;
+  search?: ToolStatusProgress;
+  results: ToolStatusProgress[];
+};
+
+/** Group each native search action with the result events that follow it. */
+export function webSearchProgressGroups(event: ToolEvent): WebSearchProgressGroup[] {
+  if (event.toolName !== "web_search") return [];
+  const groups = new Map<string, WebSearchProgressGroup>();
+  const ordered: WebSearchProgressGroup[] = [];
+  for (const progress of event.progress ?? []) {
+    if (progress.type !== "tool_status") continue;
+    const key = progress.groupId ?? `ungrouped-${ordered.length}`;
+    let group = groups.get(key);
+    if (!group) {
+      group = { key, results: [] };
+      groups.set(key, group);
+      ordered.push(group);
+    }
+    if (progress.status === "search") group.search = progress;
+    if (progress.status === "result") group.results.push(progress);
+  }
+  return ordered;
+}
+
+/** Query text for one search group, without a "Searching" prefix. */
+export function webSearchQueryLabel(group: WebSearchProgressGroup): string {
+  const raw = group.search?.message?.trim() ?? "";
+  const stripped = raw.replace(/^Searching:\s*/i, "").replace(/^Searching\s+the\s+web$/i, "");
+  return stripped || "the web";
+}
+
+/** Grey suffix shown after a search finishes, e.g. `4 results`. */
+export function webSearchResultLabel(group: WebSearchProgressGroup): string | undefined {
+  const detail = group.results.at(-1)?.detail?.trim();
+  if (!detail) return undefined;
+  const count = detail.match(/(\d+)/)?.[1];
+  if (!count) return detail;
+  const n = Number(count);
+  return `${n} ${n === 1 ? "result" : "results"}`;
+}
+
+/** One-line search rows rendered between a web-search request and response. */
+const WebSearchProgressDetails = ({ event }: { event: ToolEvent }) => {
+  const groups = webSearchProgressGroups(event);
+  if (groups.length === 0) return null;
+  return (
+    <div className="flex flex-col gap-1">
+      {groups.map((group) => {
+        const query = webSearchQueryLabel(group);
+        const results = webSearchResultLabel(group);
+        const done = group.results.length > 0 || event.status !== "running";
+        return (
+          <div
+            key={group.key}
+            className="flex min-w-0 items-center gap-1.5 text-[11px] leading-4"
+            aria-label={done ? [query, results].filter(Boolean).join(", ") : `Searching ${query}`}
+          >
+            {done ? (
+              <CheckIcon className="size-3 shrink-0 text-muted-foreground" aria-hidden />
+            ) : (
+              <Spinner className="size-3 shrink-0 text-primary" aria-hidden />
+            )}
+            <span className="min-w-0 truncate text-foreground/90">{query}</span>
+            {results ? <span className="shrink-0 text-muted-foreground">- {results}</span> : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
 /**
  * True when a tool event has anything worth expanding for. The
  * question text already rides on the row header (see
@@ -465,8 +540,9 @@ const ToolCallRow = ({ event }: { event: ToolEvent }) => {
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className="flex flex-col gap-2 px-2 pb-2">
-          <ToolProgressDetails summary={summary} omitQuestion />
           {"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>
       </CollapsibleContent>

package/src/react/types.ts

@@ -1,4 +1,4 @@
-import type { GenieWriterEvent } from "@dbx-tools/shared-mastra";
+import type { ToolProgressEvent } from "@dbx-tools/shared-mastra/wire";
 import type { ReasoningEffort, ServingEndpointSummary } from "@dbx-tools/shared-model";
 import type { UIMessage } from "ai";
 import type { ReactNode } from "react";
@@ -38,7 +38,7 @@ export type ToolEvent = {
  * unified flat `{type, ...}` events the `tool-output` chunks
  * carry. New variants should be added there.
  */
-export type ToolProgress = GenieWriterEvent;
+export type ToolProgress = ToolProgressEvent;
 
 /**
  * Subset of a Model Serving endpoint surfaced in the model picker. `name`

package/src/support/tool-events.ts

@@ -1,4 +1,9 @@
-import { GENIE_PROGRESS_PART_TYPE, GenieProgressPartDataSchema } from "@dbx-tools/shared-mastra";
+import {
+  GENIE_PROGRESS_PART_TYPE,
+  GenieProgressPartDataSchema,
+  TOOL_PROGRESS_PART_TYPE,
+  ToolProgressPartDataSchema,
+} from "@dbx-tools/shared-mastra/wire";
 import { getToolOrDynamicToolName, isToolOrDynamicToolUIPart, type UIMessage } from "ai";
 import type { ToolEvent } from "../react/types.ts";
 
@@ -54,8 +59,13 @@ export function toolEventsFromParts(parts: UIMessage["parts"]): ToolEvent[] {
   });
   const byId = new Map(events.map((event) => [event.id, event]));
   for (const part of parts) {
-    if (part.type !== GENIE_PROGRESS_PART_TYPE) continue;
-    const progress = GenieProgressPartDataSchema.safeParse(part.data);
+    const progress =
+      part.type === GENIE_PROGRESS_PART_TYPE
+        ? GenieProgressPartDataSchema.safeParse(part.data)
+        : part.type === TOOL_PROGRESS_PART_TYPE
+          ? ToolProgressPartDataSchema.safeParse(part.data)
+          : undefined;
+    if (!progress) continue;
     if (!progress.success) continue;
     const event = byId.get(progress.data.toolCallId);
     if (!event) continue;
@@ -68,11 +78,22 @@ export function toolEventsFromParts(parts: UIMessage["parts"]): ToolEvent[] {
 export function mergeToolEvents(
   persisted: ToolEvent[],
   live: ToolEvent[] | undefined,
+  terminalError = false,
 ): ToolEvent[] {
   const merged = new Map(persisted.map((event) => [event.id, event]));
   for (const event of live ?? []) {
     const prior = merged.get(event.id);
     merged.set(event.id, prior ? { ...prior, ...event } : event);
   }
-  return [...merged.values()];
+  const events = [...merged.values()];
+  if (!terminalError) return events;
+  return events.map((event) =>
+    event.status === "running"
+      ? {
+          ...event,
+          status: "error",
+          output: { error: "The assistant stream ended before this tool returned." },
+        }
+      : event,
+  );
 }