@dbx-tools/ui-mastra 0.9.58 → 0.9.61

package/README.md

@@ -76,7 +76,7 @@ understand Mastra-specific behavior:
 @import "@dbx-tools/ui-mastra/styles.css";
 ```
 
-The stylesheet imports the shared `@dbx-tools/ui-appkit` foundation and registers
+The stylesheet imports the shared `@dbx-tools/ui` foundation and registers
 this package's React files with Tailwind. It does not define design tokens; the
 chat UI uses AppKit semantic tokens from the host app.
 
@@ -143,7 +143,6 @@ export function App() {
       showModelPicker
       threadPlacement="auto"
       enableExport
-      enableFeedback
       className="h-dvh"
     />
   );
@@ -176,8 +175,10 @@ Useful options:
 - `enableThreads: false` is the older shorthand for
   `threadPlacement: "disabled"`.
 - `enableExport` adds whole-conversation and per-message export affordances.
-- `enableFeedback` enables thumbs/comment controls when the server reports
-  MLflow feedback is available and a turn produced a trace id.
+- 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 at the end of the action row.
 
 ## Place The Conversation List
 
@@ -340,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.58";
+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";
@@ -68,7 +68,7 @@ export type { ChatStatus, ToolEvent, ToolProgress, ChatModelOption, QueuedSteer,
 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";
-export { MastraPluginClient, useMastraConfig, useMastraClient, useMastraModels, useMastraDefaultModel, useMastraSuggestions, useMastraThreads, useChartFetch, useStatementFetch } from "./src/support/mastra-client.ts";
+export { MastraPluginClient, useMastraConfig, useMastraClient, useMastraMlflowExperiment, useMastraModels, useMastraDefaultModel, useMastraSuggestions, useMastraThreads, useChartFetch, useStatementFetch } from "./src/support/mastra-client.ts";
 export type { MastraStreamResponse, MastraMemoryThread, ByIdFetchState } from "./src/support/mastra-client.ts";
 export { modelStorageKey, readStoredModel, storeSelectedModel } from "./src/support/model-selection.ts";
 export type { MastraRequestContextInput, MastraRequestContextSource, MastraRequestContextSnapshot } from "./src/support/request-context.ts";

package/package.json

@@ -29,12 +29,11 @@
     "react-dom": "~19.2.4"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "^0.9.58",
-    "@dbx-tools/shared-genie": "^0.9.58",
-    "@dbx-tools/shared-mastra": "^0.9.58",
-    "@dbx-tools/shared-model": "^0.9.58",
-    "@dbx-tools/ui-appkit": "^0.9.58",
-    "@dbx-tools/ui-branding": "^0.9.58",
+    "@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",
@@ -51,7 +50,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.9.58",
+  "version": "0.9.61",
   "dbxToolsConfig": {
     "tags": [
       "ui"

package/src/react/_model-selector.tsx

@@ -16,7 +16,7 @@ import {
   DropdownMenuTrigger,
   Slider,
   Spinner,
-} from "@dbx-tools/ui-appkit/react";
+} from "@dbx-tools/ui/react";
 import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { useMemo, useState, type ReactNode } from "react";
 import type { ChatModelOption, ChatViewProps } from "./types.ts";

package/src/react/bubbles.tsx

@@ -11,9 +11,10 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@dbx-tools/ui-appkit/react";
+} from "@dbx-tools/ui/react";
 import type { UIMessage } from "ai";
 import {
+  BugIcon,
   CheckIcon,
   ChevronDownIcon,
   CopyIcon,
@@ -41,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
@@ -325,6 +330,8 @@ type AssistantBubbleProps = {
   onFeedback?: (submission: FeedbackSubmission) => void | Promise<void>;
   /** Last thumbs the user left on this message, for highlighting. */
   feedbackValue?: FeedbackValue;
+  /** MLflow experiment link shown only to viewers with `CAN_MANAGE`. */
+  mlflowExperimentUrl?: string;
 };
 
 export const AssistantBubble = ({
@@ -339,10 +346,21 @@ export const AssistantBubble = ({
   onExport,
   onFeedback,
   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",
   );
@@ -378,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">
@@ -401,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>
@@ -439,7 +456,7 @@ export const AssistantBubble = ({
             onResolve={onResolveToolApproval}
           />
         ))}
-        {hasText && (isLast || onExport || onFeedback) && (
+        {hasText && (isLast || onExport || onFeedback || mlflowExperimentUrl) && (
           <div className="flex items-center gap-1">
             {isLast && regenerate && (
               <Tooltip>
@@ -482,6 +499,23 @@ export const AssistantBubble = ({
                 {...(feedbackValue ? { value: feedbackValue } : {})}
               />
             )}
+            {mlflowExperimentUrl && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button asChild type="button" size="icon" variant="ghost" className="size-7">
+                    <a
+                      href={mlflowExperimentUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      aria-label="Open MLflow experiment"
+                    >
+                      <BugIcon className="size-3" />
+                    </a>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Open MLflow experiment</TooltipContent>
+              </Tooltip>
+            )}
           </div>
         )}
         <SuggestionPills questions={suggestions} onSelect={onSuggestionClick} className="mt-1" />

package/src/react/chat-composer.tsx

@@ -17,7 +17,7 @@ import {
   TooltipContent,
   TooltipTrigger,
   cn,
-} from "@dbx-tools/ui-appkit/react";
+} from "@dbx-tools/ui/react";
 import {
   GripVerticalIcon,
   SendHorizontalIcon,

package/src/react/chat-stream.ts

@@ -1,3 +1,4 @@
+import { stringUtils } from "@dbx-tools/shared-core";
 import { feedback } from "@dbx-tools/shared-mastra";
 import { readUIMessageStream, type UIMessage } from "ai";
 import { useCallback } from "react";
@@ -11,7 +12,7 @@ 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 => {
   const headers = (stream as { headers?: { get?: (name: string) => string | null } })?.headers;
-  return headers?.get?.(feedback.MLFLOW_TRACE_ID_HEADER)?.trim() || undefined;
+  return stringUtils.trimToUndefined(headers?.get?.(feedback.MLFLOW_TRACE_ID_HEADER));
 };
 
 class StreamAborted extends Error {}

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

@@ -5,7 +5,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
   cn,
-} from "@dbx-tools/ui-appkit/react";
+} from "@dbx-tools/ui/react";
 import { PanelLeftIcon, PanelRightIcon } from "lucide-react";
 import React, { useEffect, useRef, useState } from "react";
 import { ThreadSidebar, type ThreadSidebarProps } from "./thread-sidebar.tsx";

package/src/react/chat-transcript.tsx

@@ -10,7 +10,7 @@ import {
   EmptyMedia,
   EmptyTitle,
   Spinner,
-} from "@dbx-tools/ui-appkit/react";
+} from "@dbx-tools/ui/react";
 import { ArrowDownIcon, MessageSquareIcon, RefreshCwIcon, TriangleAlertIcon } from "lucide-react";
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { AssistantBubble, UserBubble } from "./bubbles.tsx";
@@ -156,6 +156,7 @@ type ChatTranscriptProps = {
   onExportMessage: ChatViewProps["onExportMessage"];
   feedbackByMessage: NonNullable<ChatViewProps["feedbackByMessage"]>;
   onFeedback: ChatViewProps["onFeedback"];
+  mlflowExperimentUrl: ChatViewProps["mlflowExperimentUrl"];
 };
 
 /** Internal transcript renderer with loading, error, approval, and feedback states. */
@@ -175,6 +176,7 @@ export const ChatTranscript = ({
   onExportMessage,
   feedbackByMessage,
   onFeedback,
+  mlflowExperimentUrl,
 }: ChatTranscriptProps) => {
   const isRunning = status === "submitted" || status === "streaming";
   const lastMessage = messages.at(-1);
@@ -251,6 +253,7 @@ export const ChatTranscript = ({
                             : {}),
                         }
                       : {})}
+                    {...(mlflowExperimentUrl ? { mlflowExperimentUrl } : {})}
                   />
                 );
               }

package/src/react/chat-view.tsx

@@ -62,6 +62,7 @@ export const ChatView = ({
   onExportMessage,
   feedbackByMessage = {},
   onFeedback,
+  mlflowExperimentUrl,
 }: ChatViewProps) => {
   const transcript = useChatTranscriptController({
     messages,
@@ -108,6 +109,7 @@ export const ChatView = ({
         onExportMessage={onExportMessage}
         feedbackByMessage={feedbackByMessage}
         onFeedback={onFeedback}
+        mlflowExperimentUrl={mlflowExperimentUrl}
       />
       <ChatComposer
         isEmpty={messages.length === 0}

package/src/react/data-grid.tsx

@@ -12,7 +12,7 @@ import {
   TableHeader,
   TableRow,
   cn,
-} from "@dbx-tools/ui-appkit/react";
+} from "@dbx-tools/ui/react";
 import {
   flexRender,
   getCoreRowModel,

package/src/react/embed-slots.tsx

@@ -1,5 +1,5 @@
 import { markers, type ParsedMarker } from "@dbx-tools/shared-mastra";
-import { Spinner } from "@dbx-tools/ui-appkit/react";
+import { Spinner } from "@dbx-tools/ui/react";
 import { ClockIcon } from "lucide-react";
 import { lazy, Suspense, useMemo, useRef } from "react";
 import { DataGrid, humanizeLabel } from "./data-grid.tsx";

package/src/react/export-menu.tsx

@@ -7,7 +7,7 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@dbx-tools/ui-appkit/react";
+} from "@dbx-tools/ui/react";
 import { DownloadIcon, FileTextIcon } from "lucide-react";
 import type { ExportFormat } from "../support/export.ts";
 

package/src/react/feedback-controls.tsx

@@ -1,21 +1,24 @@
 import {
   Button,
-  Label,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
   Textarea,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
   cn,
-} from "@dbx-tools/ui-appkit/react";
+} from "@dbx-tools/ui/react";
 import { MessageSquareTextIcon, ThumbsDownIcon, ThumbsUpIcon } from "lucide-react";
 import { useState } from "react";
 import type { FeedbackSubmission, FeedbackValue } from "./types.ts";
 
 // Per-message feedback action row: thumbs up/down that log immediately,
-// plus a separate comment affordance that opens a popover for freeform
+// plus a separate comment affordance that opens a modal for freeform
 // text. Rendered inside the assistant bubble's action row when the host
 // wires feedback (which only happens when MLflow logging is enabled and
 // the turn has a captured trace id).
@@ -79,10 +82,10 @@ export const FeedbackControls = ({
         </TooltipTrigger>
         <TooltipContent>Bad response</TooltipContent>
       </Tooltip>
-      <Popover open={open} onOpenChange={setOpen}>
+      <Dialog open={open} onOpenChange={setOpen}>
         <Tooltip>
           <TooltipTrigger asChild>
-            <PopoverTrigger asChild>
+            <DialogTrigger asChild>
               <Button
                 type="button"
                 size="icon"
@@ -92,43 +95,44 @@ export const FeedbackControls = ({
               >
                 <MessageSquareTextIcon className="size-3" />
               </Button>
-            </PopoverTrigger>
+            </DialogTrigger>
           </TooltipTrigger>
           <TooltipContent>Leave a comment</TooltipContent>
         </Tooltip>
-        <PopoverContent align="start" className="w-80">
-          <div className="grid gap-2">
-            <Label className="text-xs">Share feedback</Label>
-            <Textarea
-              value={comment}
-              onChange={(e) => setComment(e.target.value)}
-              onKeyDown={(e) => {
-                // Cmd/Ctrl+Enter submits, matching the composer's feel.
-                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                  e.preventDefault();
-                  void submitComment();
-                }
-              }}
-              placeholder="What worked well, or what could be better?"
-              rows={3}
-              autoFocus
-            />
-            <div className="flex justify-end gap-2">
-              <Button type="button" size="sm" variant="ghost" onClick={() => setOpen(false)}>
-                Cancel
-              </Button>
-              <Button
-                type="button"
-                size="sm"
-                disabled={!comment.trim() || sending}
-                onClick={() => void submitComment()}
-              >
-                {sending ? "Sending..." : "Send"}
-              </Button>
-            </div>
-          </div>
-        </PopoverContent>
-      </Popover>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Share feedback</DialogTitle>
+            <DialogDescription>
+              Tell us what worked well or what could be improved.
+            </DialogDescription>
+          </DialogHeader>
+          <Textarea
+            value={comment}
+            onChange={(e) => setComment(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                void submitComment();
+              }
+            }}
+            placeholder="Add details about this response"
+            rows={5}
+            autoFocus
+          />
+          <DialogFooter>
+            <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              disabled={!comment.trim() || sending}
+              onClick={() => void submitComment()}
+            >
+              {sending ? "Sending..." : "Send feedback"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   );
 };

package/src/react/markdown.tsx

@@ -11,7 +11,7 @@ import {
   TooltipContent,
   TooltipTrigger,
   cn,
-} from "@dbx-tools/ui-appkit/react";
+} from "@dbx-tools/ui/react";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import React, { useEffect, useRef, useState } from "react";
 import { Streamdown } from "streamdown";

package/src/react/mastra-assistant.tsx

@@ -5,7 +5,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
   cn,
-} from "@dbx-tools/ui-appkit/react";
+} from "@dbx-tools/ui/react";
 import { BotIcon, MessageCircleIcon, XIcon } from "lucide-react";
 import {
   createContext,

package/src/react/mastra-chat.tsx

@@ -1,6 +1,6 @@
 import { errorUtils, hash, log } from "@dbx-tools/shared-core";
 import type { ReasoningEffort } from "@dbx-tools/shared-model";
-import { useBrand } from "@dbx-tools/ui-branding/react";
+import { useBrand } from "@dbx-tools/ui/branding/react";
 import type { UIMessage } from "ai";
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useChatApprovals } from "./chat-approvals.ts";
@@ -15,6 +15,7 @@ import type { EmbedResolver, ExportFormat } from "../support/export.ts";
 import {
   useMastraClient,
   useMastraDefaultModel,
+  useMastraMlflowExperiment,
   useMastraModels,
   useMastraSuggestions,
   useMastraThreads,
@@ -201,15 +202,13 @@ export interface UseMastraChatOptions<
   enableExport?: boolean;
   /**
    * Surface per-message feedback controls (thumbs up/down + a comment
-   * popover) that log to MLflow as trace assessments.
+   * modal) that log to MLflow as trace assessments.
    *
-   * Defaults to whatever {@link enableExport} is (feedback and export
-   * are the two "quality loop" affordances, so turning on export opts
-   * into feedback too); pass an explicit `true` / `false` to override.
-   * Regardless of this flag, controls only actually render when the
+   * Defaults to auto: controls render when the server reports MLflow
+   * feedback is available. Pass `false` to hide them or `true` to request
+   * them explicitly. Regardless of this flag, controls only render when the
    * server reports MLflow logging is enabled (`clientConfig.feedbackEnabled`)
-   * and the turn produced a trace id - so enabling it on a deployment
-   * without MLflow tracing is a safe no-op.
+   * and the turn produced a trace id.
    */
   enableFeedback?: boolean;
   /**
@@ -276,11 +275,11 @@ 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;
-  // Feedback defaults to export's setting; an explicit option overrides.
-  // It only actually surfaces when the server reports MLflow logging is
-  // wired (so a trace exists to attach the assessment to).
-  const enableFeedback = options.enableFeedback ?? enableExport;
+  // 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;
   const feedbackAvailable = enableFeedback && mastraClient.feedbackEnabled;
+  const { url: mlflowExperimentUrl } = useMastraMlflowExperiment(feedbackAvailable);
   const threadKey = threadStorageKey(mastraClient.basePath, agentId);
   const [activeThreadId, setActiveThreadId] = useState<string>(() =>
     enableThreads ? (readStoredThreadId(threadKey) ?? hash.id()) : hash.id(),
@@ -1038,6 +1037,7 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
       ? {
           feedbackByMessage: activeSession.feedbackByMessage,
           onFeedback: submitFeedback,
+          ...(mlflowExperimentUrl ? { mlflowExperimentUrl } : {}),
         }
       : {}),
   };

package/src/react/suggestion-pills.tsx

@@ -1,4 +1,4 @@
-import { Button, cn } from "@dbx-tools/ui-appkit/react";
+import { Button, cn } from "@dbx-tools/ui/react";
 
 // Shared rendering for suggested questions. Both the initial starter
 // suggestions (above the composer when the transcript is empty) and

package/src/react/thread-sidebar.tsx

@@ -6,7 +6,7 @@ import {
   TooltipContent,
   TooltipTrigger,
   cn,
-} from "@dbx-tools/ui-appkit/react";
+} from "@dbx-tools/ui/react";
 import {
   Loader2Icon,
   MessageSquarePlusIcon,

package/src/react/thread-tabs.tsx

@@ -7,7 +7,7 @@ import {
   TooltipContent,
   TooltipTrigger,
   cn,
-} from "@dbx-tools/ui-appkit/react";
+} from "@dbx-tools/ui/react";
 import { HistoryIcon, Loader2Icon, PlusIcon, XIcon } from "lucide-react";
 import { type ReactNode, useEffect, useRef, useState } from "react";
 import { ThreadSidebar, type ThreadSidebarProps } from "./thread-sidebar.tsx";

package/src/react/tool-pill.tsx

@@ -6,7 +6,7 @@ import {
   CollapsibleTrigger,
   Spinner,
   cn,
-} from "@dbx-tools/ui-appkit/react";
+} from "@dbx-tools/ui/react";
 import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
 import { JsonBlock, SqlBlock, ToolMarkdown } from "./markdown.tsx";
 import type { ToolEvent, ToolProgress } from "./types.ts";
@@ -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/react/types.ts

@@ -363,6 +363,11 @@ export type ChatViewProps = {
    * handler logs the feedback to MLflow via the plugin's feedback route.
    */
   onFeedback?: (message: UIMessage, submission: FeedbackSubmission) => void | Promise<void>;
+  /**
+   * Configured MLflow experiment URL for viewers with effective
+   * `CAN_MANAGE`. When present, assistant action rows show a debug link.
+   */
+  mlflowExperimentUrl?: string;
 };
 
 /** Payload {@link ChatViewProps.onResolveToolApproval} receives. */

package/src/styles.css

@@ -13,10 +13,10 @@
  * AppKit semantic tokens, so it inherits whatever theme the host app
  * provides and restyles to match the surrounding brand for free.
  *
- * Pulls shared Streamdown / shiki styling from `@dbx-tools/ui-appkit` and
+ * Pulls shared Streamdown / shiki styling from `@dbx-tools/ui` and
  * registers this package's React components with Tailwind via `@source`.
  */
 
-@import "@dbx-tools/ui-appkit/styles.css";
+@import "@dbx-tools/ui/styles.css";
 
 @source "./react";

package/src/support/chart-option.ts

@@ -35,6 +35,9 @@ const COMPACT_NUMBER = new Intl.NumberFormat("en-US", {
   notation: "compact",
   maximumFractionDigits: 1,
 });
+const APPROXIMATE_LABEL_CHARACTER_WIDTH = 7;
+const MAX_CATEGORY_LABEL_WIDTH = 320;
+const AXIS_NAME_PADDING = 24;
 
 /**
  * Format a value-axis tick compactly: `1200 -> "1.2K"`,
@@ -57,6 +60,26 @@ function hasTitleText(title: unknown): boolean {
   return entries.some((t) => isObj(t) && typeof t.text === "string" && t.text.trim().length > 0);
 }
 
+/** True when one axis object carries a visible name. */
+function hasAxisName(axis: unknown): boolean {
+  const entries = Array.isArray(axis) ? axis : [axis];
+  return entries.some(
+    (entry) => isObj(entry) && typeof entry.name === "string" && entry.name.trim().length > 0,
+  );
+}
+
+/** True when an existing legend node is visible. */
+function hasVisibleLegend(legend: unknown): boolean {
+  const entries = Array.isArray(legend) ? legend : [legend];
+  return entries.some((entry) => isObj(entry) && entry.show !== false);
+}
+
+/** Keep a numeric pixel margin at or above the space the normalized layout needs. */
+function minimumPixelMargin(value: unknown, minimum: number): unknown {
+  if (typeof value === "number" && Number.isFinite(value)) return Math.max(value, minimum);
+  return value ?? minimum;
+}
+
 /**
  * Shallow-merge `patch` over the object living at `node[key]`, treating a
  * missing or non-object value as `{}`. Sibling fields survive, so a
@@ -90,18 +113,37 @@ function normalizeTitle(title: unknown, chrome?: ChartChrome): unknown {
  * for the title (top) and the axis name (bottom) which `containLabel`
  * does not account for.
  */
-function normalizeGrid(grid: unknown, opts: { hasTitle: boolean }): unknown {
+function normalizeGrid(
+  grid: unknown,
+  opts: { hasTitle: boolean; hasXAxisName: boolean; hasLegend: boolean },
+): unknown {
   const base = isObj(grid) ? grid : {};
+  const bottom =
+    opts.hasXAxisName && opts.hasLegend ? 96 : opts.hasXAxisName ? 64 : opts.hasLegend ? 56 : 24;
   return {
     left: 12,
     right: 24,
-    bottom: 24,
     ...base,
     top: base.top ?? (opts.hasTitle ? 64 : 32),
+    bottom: minimumPixelMargin(base.bottom, bottom),
     containLabel: base.containLabel ?? true,
   };
 }
 
+/**
+ * Approximate the widest category label so a rotated y-axis name can clear it.
+ * Echarts measures the labels itself, but does not include the axis name in
+ * `containLabel`, so the renderer must supply a name gap before layout.
+ */
+function categoryLabelWidth(axis: Obj): number {
+  if (!Array.isArray(axis.data)) return 0;
+  const longest = axis.data.reduce(
+    (width, value) => Math.max(width, [...String(value ?? "")].length),
+    0,
+  );
+  return Math.min(longest * APPROXIMATE_LABEL_CHARACTER_WIDTH, MAX_CATEGORY_LABEL_WIDTH);
+}
+
 /** Patch a single axis node in place-safe fashion (`x` or `y`). */
 function normalizeAxis(axis: Obj, pos: "x" | "y", chrome?: ChartChrome): Obj {
   let next: Obj = { ...axis };
@@ -130,7 +172,7 @@ function normalizeAxis(axis: Obj, pos: "x" | "y", chrome?: ChartChrome): Obj {
     next.nameLocation = next.nameLocation ?? "middle";
     if (pos === "y") {
       next.nameRotate = next.nameRotate ?? 90;
-      next.nameGap = next.nameGap ?? 56;
+      next.nameGap = next.nameGap ?? Math.max(56, categoryLabelWidth(next) + AXIS_NAME_PADDING);
     } else {
       next.nameGap = next.nameGap ?? 56;
     }
@@ -206,7 +248,11 @@ export function normalizeChartOption<T>(option: T, chrome?: ChartChrome): T {
   if (!isObj(option)) return option;
   let next: Obj = { ...option };
   next.title = normalizeTitle(next.title, chrome);
-  next.grid = normalizeGrid(next.grid, { hasTitle: hasTitleText(next.title) });
+  next.grid = normalizeGrid(next.grid, {
+    hasTitle: hasTitleText(next.title),
+    hasXAxisName: hasAxisName(next.xAxis),
+    hasLegend: hasVisibleLegend(next.legend),
+  });
   next.xAxis = normalizeAxisField(next.xAxis, "x", chrome);
   next.yAxis = normalizeAxisField(next.yAxis, "y", chrome);
   if (chrome) next = normalizeChrome(next, chrome);

package/src/support/export.ts

@@ -11,7 +11,7 @@
  *   - `"markdown"` - a `.md` file download.
  *
  * The document can be brand-styled (logo, colors, font) via the optional
- * `brand` option; the driver resolves it from `@dbx-tools/ui-branding`.
+ * `brand` option; the driver resolves it from `@dbx-tools/ui/branding`.
  *
  * Charts are included, not dropped: each `[chart:<id>]` marker is
  * resolved against the plugin's chart cache and rendered to an inline
@@ -42,7 +42,7 @@ export type ExportFormat = "pdf" | "markdown";
 /**
  * Optional brand styling for the exported document. Plain data (no React /
  * DOM), so this module stays framework-free; the driver resolves it from
- * `@dbx-tools/ui-branding` (`useBrand()` + `resolveBrandAsset`) and passes it
+ * `@dbx-tools/ui/branding` (`useBrand()` + `resolveBrandAsset`) and passes it
  * through. Any field omitted falls back to the neutral default styling.
  */
 export interface ExportBrand {

package/src/support/mastra-client.ts

@@ -10,10 +10,11 @@ import {
   type MastraClientConfig,
   type MastraFeedbackRequest,
   type MastraFeedbackResponse,
+  type MastraMlflowExperimentResponse,
   type StatementData,
 } from "@dbx-tools/shared-mastra";
 import type { ReasoningEffort, ServingEndpointSummary } from "@dbx-tools/shared-model";
-import { usePluginClientConfig } from "@dbx-tools/ui-appkit/react";
+import { usePluginClientConfig } from "@dbx-tools/ui/react";
 import {
   MastraClient,
   type ListAgentSuspendedRunsResponse,
@@ -420,6 +421,19 @@ export class MastraPluginClient extends MastraClient {
     );
   }
 
+  /**
+   * Resolve the configured MLflow experiment for the active viewer.
+   * The server returns a URL only when that viewer has effective
+   * `CAN_MANAGE`; inability to determine access resolves to `null`.
+   */
+  async mlflowExperiment(signal?: AbortSignal): Promise<MastraMlflowExperimentResponse> {
+    return this.#getJson(
+      `${this.basePath}${routes.MASTRA_ROUTES.mlflowExperiment}`,
+      feedback.MastraMlflowExperimentResponseSchema,
+      signal,
+    );
+  }
+
   /**
    * Resolve a `[chart:<id>]` marker from
    * `GET ${basePath}/embed/chart/:id`. The chart planner runs in the
@@ -561,6 +575,43 @@ export const useMastraClient = (): MastraPluginClient => {
   );
 };
 
+/**
+ * Resolve the configured MLflow experiment link once at chat boot.
+ * Missing permissions, unsupported Apps identity APIs, and lookup failures
+ * all degrade to no link.
+ */
+export const useMastraMlflowExperiment = (
+  enabled = true,
+): { url: string | null; loading: boolean } => {
+  const client = useMastraClient();
+  const [url, setUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(enabled);
+
+  useEffect(() => {
+    if (!enabled) {
+      setUrl(null);
+      setLoading(false);
+      return;
+    }
+    const controller = new AbortController();
+    setLoading(true);
+    client
+      .mlflowExperiment(controller.signal)
+      .then((result) => {
+        if (!controller.signal.aborted) setUrl(result.url);
+      })
+      .catch(() => {
+        if (!controller.signal.aborted) setUrl(null);
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setLoading(false);
+      });
+    return () => controller.abort();
+  }, [client, enabled]);
+
+  return { url, loading };
+};
+
 /**
  * Fetch the cached Model Serving endpoint catalogue exposed by the
  * Mastra plugin (`client.models()`). Filters out non-LLM endpoints

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) => {