@dbx-tools/ui-mastra 0.9.54 → 0.9.60

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 beside copy and export.
 
 ## Place The Conversation List
 

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.54";
+export const PACKAGE_VERSION = "0.9.60";
 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.54",
-    "@dbx-tools/shared-genie": "^0.9.54",
-    "@dbx-tools/shared-mastra": "^0.9.54",
-    "@dbx-tools/shared-model": "^0.9.54",
-    "@dbx-tools/ui-appkit": "^0.9.54",
-    "@dbx-tools/ui-branding": "^0.9.54",
+    "@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",
     "@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.54",
+  "version": "0.9.60",
   "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,
@@ -325,6 +326,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,6 +342,7 @@ export const AssistantBubble = ({
   onExport,
   onFeedback,
   feedbackValue,
+  mlflowExperimentUrl,
 }: AssistantBubbleProps) => {
   const reasoning = getReasoningText(message.parts);
   const isReasoningStreaming =
@@ -439,7 +443,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>
@@ -476,6 +480,23 @@ export const AssistantBubble = ({
               </Tooltip>
             )}
             {onExport && <ExportMenu onExport={onExport} iconOnly tooltip="Export message" />}
+            {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>
+            )}
             {onFeedback && (
               <FeedbackControls
                 onSubmit={onFeedback}

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";

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