@dbx-tools/ui-mastra 0.9.60 → 0.9.61

package/README.md

@@ -178,7 +178,7 @@ Useful options:
 - Feedback defaults to auto: thumbs, dislike, and comment controls appear when
   the server reports MLflow feedback is available and a turn produced a trace
   id. Set `enableFeedback={false}` to hide them. Viewers with `CAN_MANAGE` on
-  the experiment also get an experiment debug link beside copy and export.
+  the experiment also get an experiment debug link at the end of the action row.
 
 ## Place The Conversation List
 
@@ -341,8 +341,11 @@ The UI understands the extra events produced by
 - Native tool-call and tool-result payloads remain complete. Expanding a tool
   row reveals default-closed Request and Response viewers; large values scroll
   without string or collection truncation.
-- Genie writer events render as tool progress, including thinking text, SQL, row
-  counts, result summaries, and chart/data markers.
+- Genie `thinking` events stream into the assistant's collapsed Thoughts
+  panel. Intermediate answer attachments and query-result tables stay on tool
+  progress, not in Thoughts. Other writer events remain attached to tool
+  progress, including SQL, row counts, result summaries, and chart/data
+  markers.
 - `[chart:<id>]` markers long-poll the chart cache and render ECharts inline.
 - `[data:<id>]` markers fetch statement rows and render a sortable table with
   column toggles and CSV export.

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.60";
+export const PACKAGE_VERSION = "0.9.61";
 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";

package/package.json

@@ -29,11 +29,11 @@
     "react-dom": "~19.2.4"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "^0.9.60",
-    "@dbx-tools/shared-genie": "^0.9.60",
-    "@dbx-tools/shared-mastra": "^0.9.60",
-    "@dbx-tools/shared-model": "^0.9.60",
-    "@dbx-tools/ui": "^0.9.60",
+    "@dbx-tools/shared-core": "^0.9.61",
+    "@dbx-tools/shared-genie": "^0.9.61",
+    "@dbx-tools/shared-mastra": "^0.9.61",
+    "@dbx-tools/shared-model": "^0.9.61",
+    "@dbx-tools/ui": "^0.9.61",
     "@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.60",
+  "version": "0.9.61",
   "dbxToolsConfig": {
     "tags": [
       "ui"

package/src/react/bubbles.tsx

@@ -42,7 +42,11 @@ import type {
   ToolEvent,
 } from "./types.ts";
 import { copyText } from "../support/clipboard.ts";
-import { mergeToolEvents, toolEventsFromParts } from "../support/tool-events.ts";
+import {
+  genieReasoningText,
+  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
@@ -344,9 +348,19 @@ export const AssistantBubble = ({
   feedbackValue,
   mlflowExperimentUrl,
 }: AssistantBubbleProps) => {
-  const reasoning = getReasoningText(message.parts);
+  const toolEvents = mergeToolEvents(toolEventsFromParts(message.parts), events);
+  const reasoning = [getReasoningText(message.parts), genieReasoningText(toolEvents)]
+    .filter(Boolean)
+    .join("\n\n");
   const isReasoningStreaming =
-    isLast && status === "streaming" && message.parts.at(-1)?.type === "reasoning";
+    isLast &&
+    status === "streaming" &&
+    (message.parts.at(-1)?.type === "reasoning" ||
+      toolEvents.some(
+        (event) =>
+          event.status === "running" &&
+          event.progress?.some((progress) => progress.type === "thinking"),
+      ));
   const textParts = message.parts.filter(
     (p): p is { type: "text"; text: string } => p.type === "text",
   );
@@ -382,7 +396,6 @@ export const AssistantBubble = ({
     collectPendingApprovals(message.parts),
     externalApprovals,
   );
-  const toolEvents = mergeToolEvents(toolEventsFromParts(message.parts), events);
 
   return (
     <Item className="items-start gap-3 border-none bg-transparent p-0">
@@ -405,14 +418,14 @@ export const AssistantBubble = ({
          */}
         {toolEvents.length > 0 && <ToolSessionPill events={toolEvents} />}
         {reasoning && (
-          <Collapsible defaultOpen={isReasoningStreaming}>
-            <CollapsibleTrigger className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground">
-              <ChevronDownIcon className="size-3" />
+          <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-3 text-xs text-muted-foreground whitespace-pre-wrap">
-                {reasoning}
+              <div className="mt-1 border-l-2 border-border/60 pl-3 text-xs text-muted-foreground">
+                <ToolMarkdown>{reasoning}</ToolMarkdown>
               </div>
             </CollapsibleContent>
           </Collapsible>
@@ -480,6 +493,12 @@ export const AssistantBubble = ({
               </Tooltip>
             )}
             {onExport && <ExportMenu onExport={onExport} iconOnly tooltip="Export message" />}
+            {onFeedback && (
+              <FeedbackControls
+                onSubmit={onFeedback}
+                {...(feedbackValue ? { value: feedbackValue } : {})}
+              />
+            )}
             {mlflowExperimentUrl && (
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -497,12 +516,6 @@ export const AssistantBubble = ({
                 <TooltipContent>Open MLflow experiment</TooltipContent>
               </Tooltip>
             )}
-            {onFeedback && (
-              <FeedbackControls
-                onSubmit={onFeedback}
-                {...(feedbackValue ? { value: feedbackValue } : {})}
-              />
-            )}
           </div>
         )}
         <SuggestionPills questions={suggestions} onSelect={onSuggestionClick} className="mt-1" />

package/src/react/tool-pill.tsx

@@ -46,15 +46,8 @@ const runningLabelFor = (event: ToolEvent): string => {
 };
 
 /**
- * One Genie attachment's worth of progress: the reasoning thoughts
- * that landed on it, the SQL query if any, and the per-attachment
- * text response Genie produced (a "text" attachment carries prose;
- * a "query" attachment can co-emit prose via the same path).
- * Bucketing thinking + query + text together by `attachment_id`
- * keeps the rendered detail view aligned with the underlying wire
- * structure (data sourcing, description, steps, SQL, and the prose
- * interpretation all stay next to each other for the same query
- * instead of intermixing across queries).
+ * One Genie attachment's worth of SQL progress. Reasoning and intermediate
+ * text attachments render in the assistant bubble's Thoughts panel.
  *
  * The `key` is the wire `attachment_id` when Genie supplied one;
  * for the rare anonymous attachment (Genie's "main answer" text
@@ -65,21 +58,12 @@ const runningLabelFor = (event: ToolEvent): string => {
  */
 type AttachmentBucket = {
   key: string;
-  thinking: Extract<ToolProgress, { type: "thinking" }>[];
   /**
    * Genie emits one SQL string per query attachment. When it
    * rewrites the SQL mid-turn the later event supersedes the
    * earlier one (so the bucket always shows the final SQL).
    */
   query?: Extract<ToolProgress, { type: "query" }>;
-  /**
-   * Genie may emit one text snapshot per attachment (typed
-   * "text" attachments, plus prose that accompanies a query).
-   * Later snapshots supersede earlier ones - we render the final
-   * value, which matches how the SDK presents it on
-   * `attachment.text.content`.
-   */
-  text?: Extract<ToolProgress, { type: "text" }>;
 };
 
 /**
@@ -116,10 +100,8 @@ type MessageGroup = {
  * are resolved out-of-band via the chart cache; suggestions live at
  * message scope.
  *
- * `thinking` entries are de-duplicated server-side already
- * (`packages/js/shared/genie/src/event.ts` keys on
- * `(thought_type, content)` per attachment) so we can render them
- * verbatim without an extra dedupe pass here.
+ * Genie `thinking` and `text` entries render in the assistant bubble's
+ * consolidated Thoughts panel 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.
@@ -167,7 +149,7 @@ const summarizeProgress = (progress: ToolProgress[]): ToolDetailSummary => {
     const key = attachmentId ?? ANON_ATTACHMENT_KEY;
     let bucket = group.attachments.find((b) => b.key === key);
     if (!bucket) {
-      bucket = { key, thinking: [] };
+      bucket = { key };
       group.attachments.push(bucket);
     }
     return bucket;
@@ -184,8 +166,7 @@ const summarizeProgress = (progress: ToolProgress[]): ToolDetailSummary => {
         break;
       }
       case "thinking": {
-        const g = groupFor(p.message_id);
-        bucketFor(g, p.attachment_id).thinking.push(p);
+        // Reasoning is rendered once in the assistant bubble's Thoughts panel.
         break;
       }
       case "query": {
@@ -194,8 +175,7 @@ const summarizeProgress = (progress: ToolProgress[]): ToolDetailSummary => {
         break;
       }
       case "text": {
-        const g = groupFor(p.message_id);
-        bucketFor(g, p.attachment_id).text = p;
+        // Intermediate answers render in the assistant bubble's Thoughts panel.
         break;
       }
       case "error": {
@@ -233,32 +213,16 @@ const askGenieQuestion = (event: ToolEvent): string | undefined => {
   return undefined;
 };
 
-/**
- * Strip Genie's `THOUGHT_TYPE_*` prefix and turn the remaining
- * upper-snake into a Title Cased label users can read at a glance.
- *
- * Examples:
- *   `THOUGHT_TYPE_DESCRIPTION`     -> `Description`
- *   `THOUGHT_TYPE_DATA_SOURCING`   -> `Data Sourcing`
- *   `THOUGHT_TYPE_UNDERSTANDING`   -> `Understanding`
- */
-const humanizeThoughtType = (kind: string): string =>
-  stringUtils.toLabel(kind.replace(/^THOUGHT_TYPE_/i, ""));
-
 /**
  * Genie attaches one of three payload kinds per attachment slot:
  * `query` (SQL), `text` (prose answer), or `suggested_questions`.
  * `isQueryAttachment` true means this bucket got a SQL query, so
- * it earns a numbered "Query N" card in the UI; prose-only or
- * thinking-only buckets render as plain markdown below the
- * numbered queries because labelling them "Query N" misleads
- * users into thinking Genie ran an extra query when it didn't.
+ * it earns a numbered "Query N" card in the UI.
  */
 const isQueryAttachment = (b: AttachmentBucket): boolean => Boolean(b.query);
 
-/** True when a bucket has any renderable content (thinking, SQL, or prose). */
-const isAttachmentRenderable = (b: AttachmentBucket): boolean =>
-  b.thinking.length > 0 || Boolean(b.query) || Boolean(b.text);
+/** True when a bucket has SQL not already shown in the Thoughts panel. */
+const isAttachmentRenderable = (b: AttachmentBucket): boolean => Boolean(b.query);
 
 /** True when a group has any renderable content (question, attachments, or errors). */
 const isGroupRenderable = (g: MessageGroup): boolean =>
@@ -275,13 +239,8 @@ const isGroupRenderable = (g: MessageGroup): boolean =>
  *   1. The LLM's sub-question for this Genie call, always
  *      visible, styled as a blockquote so it reads as provenance.
  *   2. One numbered "Query N" Collapsible per query attachment
- *      (or just "Query" when there's one). Opens to reveal
- *      reasoning thoughts, an inner SQL Collapsible, and any
- *      prose Genie attached directly to the query.
- *   3. One "Answer N" Collapsible per prose-only attachment
- *      (Genie's natural-language summary, follow-up questions).
- *      Opens to reveal thinking + the markdown body.
- *   4. Errors that landed under this `message_id`, always
+ *      (or just "Query" when there's one). Opens to reveal SQL.
+ *   3. Errors that landed under this `message_id`, always
  *      visible (red text - users need to see failures, not click
  *      to find them).
  *
@@ -297,12 +256,8 @@ const MessageGroupBody = ({
   omitQuestion?: boolean;
 }) => {
   const renderableAttachments = group.attachments.filter(isAttachmentRenderable);
-  // Split renderable attachments into the two visual lanes: numbered
-  // query cards vs flat prose. The partition preserves first-seen
-  // order within each lane so queries still render in the order
-  // Genie produced them and the prose still reads in dispatch order.
+  // Query cards remain attached to their originating Genie sub-call.
   const queryBuckets = renderableAttachments.filter(isQueryAttachment);
-  const proseBuckets = renderableAttachments.filter((b) => !isQueryAttachment(b));
   return (
     <div className="flex flex-col gap-1.5">
       {!omitQuestion && group.question && (
@@ -313,8 +268,8 @@ const MessageGroupBody = ({
       {queryBuckets.map((bucket, i) => (
         // Each query bucket is a single Collapsible (default
         // closed) so the expanded group reads as just the
-        // question + a short stack of "Query N" / "Answer" rows.
-        // Click any row to drill into its thinking + SQL + text.
+        // question + a short stack of "Query N" rows.
+        // Click any row to drill into its SQL.
         // SQL itself stays a nested Collapsible (default closed)
         // for the same reason: code is the heaviest content here,
         // and most readers only want a glance.
@@ -330,18 +285,6 @@ const MessageGroupBody = ({
           </CollapsibleTrigger>
           <CollapsibleContent>
             <div className="flex flex-col gap-2 px-2 pb-2 text-xs">
-              {bucket.thinking.length > 0 && (
-                <ul className="flex flex-col gap-1.5 border-l-2 border-border/60 pl-3 text-muted-foreground">
-                  {bucket.thinking.map((p, j) => (
-                    <li key={`think-${j}`} className="whitespace-pre-wrap break-words leading-snug">
-                      <span className="font-medium text-foreground/80">
-                        {humanizeThoughtType(p.thought_type)}:
-                      </span>{" "}
-                      {p.text}
-                    </li>
-                  ))}
-                </ul>
-              )}
               {bucket.query && (
                 <Collapsible className="rounded border border-border/60 bg-background/30">
                   <CollapsibleTrigger className="group flex w-full items-center gap-1 px-2 py-1 text-left text-muted-foreground hover:text-foreground">
@@ -360,38 +303,6 @@ const MessageGroupBody = ({
                   </CollapsibleContent>
                 </Collapsible>
               )}
-              {bucket.text && <ToolMarkdown>{bucket.text.text}</ToolMarkdown>}
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
-      ))}
-      {proseBuckets.map((bucket, i) => (
-        // Prose-only attachments (Genie's natural-language answer
-        // and clarifying follow-up question attachments) get the
-        // same Collapsible treatment as queries. Label as "Answer"
-        // when there's only one prose bucket; multiple buckets
-        // (rare - typically interpretation + a follow-up question)
-        // get numbered so each row is addressable.
-        <Collapsible key={bucket.key} 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-[11px] uppercase tracking-wide text-muted-foreground hover:text-foreground">
-            <ChevronDownIcon className="size-3 shrink-0 transition-transform group-data-[state=closed]:-rotate-90" />
-            <span>{proseBuckets.length > 1 ? `Answer ${i + 1}` : "Answer"}</span>
-          </CollapsibleTrigger>
-          <CollapsibleContent>
-            <div className="flex flex-col gap-1 px-2 pb-2">
-              {bucket.thinking.length > 0 && (
-                <ul className="flex flex-col gap-1 text-[11px] text-muted-foreground">
-                  {bucket.thinking.map((p, j) => (
-                    <li key={`think-${j}`} className="whitespace-pre-wrap break-words leading-snug">
-                      <span className="font-medium text-foreground/80">
-                        {humanizeThoughtType(p.thought_type)}:
-                      </span>{" "}
-                      {p.text}
-                    </li>
-                  ))}
-                </ul>
-              )}
-              {bucket.text && <ToolMarkdown>{bucket.text.text}</ToolMarkdown>}
             </div>
           </CollapsibleContent>
         </Collapsible>
@@ -495,7 +406,7 @@ const hasExpandableDetails = (event: ToolEvent): boolean => {
  * the question text the central agent passed to Genie so users
  * can see each sub-question at a glance without expanding.
  *
- * Rows with extra wire detail (Genie SQL, thinking, prose
+ * Rows with extra wire detail (Genie SQL, prose
  * answers, errors) expand to reveal the per-attachment cards
  * built by {@link ToolProgressDetails}. Tools with no extra
  * detail (`get_statement`, `prepare_chart`) render as a flat

package/src/support/tool-events.ts

@@ -2,6 +2,34 @@ import { GENIE_PROGRESS_PART_TYPE, GenieProgressPartDataSchema } from "@dbx-tool
 import { getToolOrDynamicToolName, isToolOrDynamicToolUIPart, type UIMessage } from "ai";
 import type { ToolEvent } from "../react/types.ts";
 
+/**
+ * Collect Genie `thinking` events for the assistant Thoughts panel.
+ *
+ * Intermediate `text` attachments stay out: Agent Mode often puts query
+ * result tables there, and those belong in tool progress / the final answer,
+ * not in reasoning.
+ */
+export function genieReasoningText(events: ToolEvent[]): string {
+  const sections: string[] = [];
+  for (const event of events) {
+    for (const progress of event.progress ?? []) {
+      if (progress.type !== "thinking") continue;
+      const text = stripMarkdownTables(progress.text).trim();
+      if (text) sections.push(text);
+    }
+  }
+  return sections.join("\n\n");
+}
+
+/** Drop markdown table rows so query samples never land in Thoughts. */
+function stripMarkdownTables(text: string): string {
+  return text
+    .split("\n")
+    .filter((line) => !/^\s*\|/.test(line))
+    .join("\n")
+    .replace(/\n{3,}/g, "\n\n");
+}
+
 /** Project native AI SDK tool parts from persisted messages onto pill state. */
 export function toolEventsFromParts(parts: UIMessage["parts"]): ToolEvent[] {
   const events = parts.filter(isToolOrDynamicToolUIPart).map<ToolEvent>((part) => {