@dbx-tools/ui-mastra 0.3.3 → 0.3.5

package/README.md

@@ -25,7 +25,7 @@ Key features:
   the server plugin.
 - Conversation sidebar with new, select, rename, delete, active-thread, and
   background-streaming states.
-- Export menu for print/PDF and Markdown, resolving charts and tables so
+- Export menu for PDF and Markdown, resolving charts and tables so
   exported conversations remain useful offline.
 
 ## Why Not Just AppKit UI?
@@ -44,7 +44,7 @@ understand Mastra-specific behavior:
   answer.
 - `[chart:<id>]` and `[data:<id>]` assistant markers rendered as ECharts charts
   and sortable tables.
-- Conversation export that resolves those embeds into Markdown or print/PDF.
+- Conversation export that resolves those embeds into Markdown or PDF.
 
 ## Add The Styles
 
@@ -133,6 +133,7 @@ transport or needs to combine Mastra messages with another state model.
 import {
   MastraPluginClient,
   useMastraClient,
+  useMastraDefaultModel,
   useMastraModels,
   useMastraSuggestions,
   useMastraThreads,
@@ -172,7 +173,7 @@ The UI understands the extra events produced by
 <MastraChat enableExport />
 ```
 
-Exports support Markdown downloads and print/PDF. Chart and data markers are
+Exports support Markdown downloads and PDF (rendered through a hidden print iframe, so the browser's Save-as-PDF dialog opens with no popup tab). Chart and data markers are
 resolved during export: charts are rendered to inline SVG with ECharts' server
 renderer, and data markers become real tables. Expired or missing embeds are
 skipped so old transcripts still export cleanly.
@@ -184,8 +185,9 @@ skipped so old transcripts still export cleanly.
 - `ChatView` - controlled presentational chat shell.
 - `MastraPluginClient` - `@mastra/client-js` plus AppKit-Mastra custom routes.
 - `useMastraClient`, `useMastraConfig`, `useMastraModels`,
-  `useMastraSuggestions`, `useMastraThreads`, `useChartFetch`,
-  `useStatementFetch` - route/config hooks for controlled clients.
+  `useMastraDefaultModel`, `useMastraSuggestions`, `useMastraThreads`,
+  `useChartFetch`, `useStatementFetch` - route/config hooks for controlled
+  clients.
 - `ThreadSidebar` - controlled conversation list.
 - `ExportMenu` - shared export format menu.
 - Types - `ChatViewProps`, `MastraChatProps`, `UseMastraChatOptions`,

package/package.json

@@ -26,19 +26,19 @@
     "shiki": "^3.0.0",
     "sql-formatter": "^15.6.9",
     "streamdown": "^2.5.0",
-    "@dbx-tools/shared-genie": "0.3.3",
-    "@dbx-tools/shared-core": "0.3.3",
-    "@dbx-tools/shared-mastra": "0.3.3",
-    "@dbx-tools/shared-model": "0.3.3",
-    "@dbx-tools/ui-appkit": "0.3.3",
-    "@dbx-tools/ui-branding": "0.3.3"
+    "@dbx-tools/shared-core": "0.3.5",
+    "@dbx-tools/shared-genie": "0.3.5",
+    "@dbx-tools/shared-mastra": "0.3.5",
+    "@dbx-tools/ui-appkit": "0.3.5",
+    "@dbx-tools/ui-branding": "0.3.5",
+    "@dbx-tools/shared-model": "0.3.5"
   },
   "main": "index.ts",
   "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.3",
+  "version": "0.3.5",
   "types": "index.ts",
   "type": "module",
   "exports": {

package/src/react/chat-view.tsx

@@ -1,6 +1,14 @@
 import {
   Alert,
   AlertDescription,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
   AlertTitle,
   Button,
   Empty,
@@ -286,18 +294,20 @@ export const ChatView = ({
   // otherwise as static text.
   const showModelDisplay = Boolean(onModelChange);
   const modelChangeable = Boolean(models && models.length > 0);
-  // Human-readable name for an endpoint id, using the catalogue's
-  // `displayName` when present, else the raw id.
+  // Human-readable name for a pinned endpoint id, using the catalogue's
+  // `displayName`. Returns undefined until the catalogue has an entry for it,
+  // so we never fall back to the raw id (no raw-name flash on load).
   const modelLabel = (name?: string): string | undefined => {
     if (!name) return undefined;
-    return models?.find((m) => m.name === name)?.displayName || name;
+    return models?.find((m) => m.name === name)?.displayName;
   };
-  // The default option shows the server's fallback model by name when known
-  // (from `defaultModelName`), else a neutral "Default" - no "server default"
-  // phrasing either way.
-  const defaultOptionLabel = modelLabel(defaultModelName) ?? "Default";
-  // Label the current model by its human-readable name when a model is
-  // pinned, else the default-option label.
+  // The default option shows the server's fallback model by its already-
+  // humanized name (`defaultModelName` is the server's `displayName`), else a
+  // neutral "Default". No "server default" phrasing, no raw id.
+  const defaultOptionLabel = defaultModelName || "Default";
+  // Label the current model by its human-readable name when a model is pinned
+  // and the catalogue has resolved it; else the default-option label. Never
+  // shows a raw endpoint id.
   const currentModelLabel = modelLabel(model) || defaultOptionLabel;
   // Picker entries sorted by their human-readable label (case-insensitive).
   const sortedModels = [...(models ?? [])].sort((a, b) =>
@@ -339,29 +349,26 @@ export const ChatView = ({
     if (isMobile) setMobileDrawerOpen((open) => !open);
     else toggleDesktopSidebar();
   };
-  // Top bar carries only the sidebar toggle + Clear now; the model picker and
-  // export live in a toolbar row just above the composer (Janna-style), closer
-  // to where the user is typing.
-  const showHeader = showClear || showSidebar;
-  const showComposerToolbar = showModelDisplay || showExport;
+  // Top bar carries only the sidebar toggle now; the model picker, export, and
+  // clear all live in a toolbar row below the composer, closer to where the
+  // user is typing.
+  const showHeader = showSidebar;
+  const showComposerToolbar = showModelDisplay || showExport || showClear;
 
-  // Local "in-flight" + confirm latch for the clear button so the
-  // user can't double-fire the DELETE and so a stray click doesn't
-  // wipe history without a beat to back out. Resets back to idle
-  // after the parent's `onClear` settles (success or failure).
-  const [clearState, setClearState] = useState<"idle" | "confirm" | "clearing">("idle");
+  // Clear confirmation is an AppKit `AlertDialog` (a real modal), plus an
+  // in-flight flag so the DELETE can't be double-fired. `clearing` disables
+  // the confirm action while `onClear` runs; the dialog closes on settle.
+  const [clearOpen, setClearOpen] = useState(false);
+  const [clearing, setClearing] = useState(false);
 
-  const handleClearClick = async () => {
-    if (clearState === "clearing" || !onClear) return;
-    if (clearState === "idle") {
-      setClearState("confirm");
-      return;
-    }
-    setClearState("clearing");
+  const handleClearConfirm = async () => {
+    if (clearing || !onClear) return;
+    setClearing(true);
     try {
       await onClear();
+      setClearOpen(false);
     } finally {
-      setClearState("idle");
+      setClearing(false);
     }
   };
 
@@ -466,44 +473,6 @@ export const ChatView = ({
                   </Tooltip>
                 )}
               </div>
-              <div className="flex min-w-0 items-center justify-end gap-2 md:gap-3">
-                {showClear && (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        type="button"
-                        variant={clearState === "confirm" ? "destructive" : "outline"}
-                        size="sm"
-                        onClick={handleClearClick}
-                        onBlur={() =>
-                          // Drop the confirm latch when focus leaves so a
-                          // half-armed button doesn't sit destructive-red
-                          // forever after the user clicks away.
-                          setClearState((s) => (s === "confirm" ? "idle" : s))
-                        }
-                        disabled={clearState === "clearing"}
-                        className="gap-1.5"
-                      >
-                        {clearState === "clearing" ? (
-                          <Spinner className="size-3" />
-                        ) : (
-                          <Trash2Icon className="size-3" />
-                        )}
-                        {clearState === "confirm"
-                          ? "Confirm clear"
-                          : clearState === "clearing"
-                            ? "Clearing..."
-                            : "Clear"}
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      {clearState === "confirm"
-                        ? "Click again to confirm; wipes this conversation."
-                        : "Clear chat history for this thread"}
-                    </TooltipContent>
-                  </Tooltip>
-                )}
-              </div>
             </div>
           )}
           <div className="relative flex flex-1 flex-col overflow-hidden">
@@ -719,6 +688,51 @@ export const ChatView = ({
                     tooltip="Export conversation"
                   />
                 )}
+                {showClear && (
+                  <>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={() => setClearOpen(true)}
+                          className="h-7 gap-1 rounded-full px-2.5 text-xs [&_svg]:size-3"
+                        >
+                          <Trash2Icon className="size-3" />
+                          Clear
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>Clear chat history for this thread</TooltipContent>
+                    </Tooltip>
+                    <AlertDialog open={clearOpen} onOpenChange={setClearOpen}>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>Clear this conversation?</AlertDialogTitle>
+                          <AlertDialogDescription>
+                            This permanently deletes the chat history for this thread. This
+                            can&apos;t be undone.
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel disabled={clearing}>Cancel</AlertDialogCancel>
+                          <AlertDialogAction
+                            onClick={(e) => {
+                              // Keep the dialog open while the DELETE runs; we
+                              // close it ourselves once `onClear` settles.
+                              e.preventDefault();
+                              void handleClearConfirm();
+                            }}
+                            disabled={clearing}
+                          >
+                            {clearing ? <Spinner className="size-3" /> : null}
+                            {clearing ? "Clearing..." : "Clear"}
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
+                  </>
+                )}
               </div>
             )}
           </form>

package/src/react/data-grid.tsx

@@ -84,13 +84,7 @@ export function humanizeLabel(
   value: string,
   options?: string.TokenizeOptions,
 ): string {
-  const tokens = [
-    ...string.tokenizeWithOptions(
-      { lowerCase: true, capitalize: true, ...options },
-      value,
-    ),
-  ];
-  return tokens.length > 0 ? tokens.join(" ") : value;
+  return string.toLabel(value, options);
 }
 
 /**

package/src/react/mastra-chat.tsx

@@ -348,10 +348,10 @@ export const useMastraChat = (
   // hidden and skips the catalogue fetch entirely.
   const showModelPicker = Boolean(options.showModelPicker);
   const { models } = useMastraModels(showModelPicker);
-  // The endpoint the active agent falls back to when no model is pinned, so
-  // the picker can name its "Server default" option. Fetched only when the
-  // picker is shown; `null` when the agent's model is dynamic.
-  const defaultModelName = useMastraDefaultModel(agentId, showModelPicker);
+  // The humanized name of the model the active agent falls back to when no
+  // model is pinned, so the picker can label its default option. Fetched only
+  // when the picker is shown; `null` when the agent's model is dynamic.
+  const { defaultModel: defaultModelName } = useMastraDefaultModel(agentId, showModelPicker);
   // Starter suggestions: an explicit `options.suggestions` always
   // wins (including `[]` to force none) and is rendered verbatim;
   // otherwise auto-source the agent's Genie space sample questions.

package/src/react/types.ts

@@ -117,10 +117,10 @@ export type ChatViewProps = {
   model?: string;
   onModelChange?: (model: string) => void;
   /**
-   * The serving-endpoint id the server falls back to when no model is pinned.
-   * When set, the picker's "Server default" option names it (e.g. "Server
-   * default (Claude Sonnet 4.6)"), using the matching `models` entry's
-   * `displayName` when available.
+   * The serving-endpoint fallback the server uses when no model is pinned,
+   * already humanized (the server's `displayName`, e.g. "Claude Sonnet 4.6").
+   * When set, the picker's default option shows this name; otherwise it shows
+   * a neutral "Default". Never a raw endpoint id.
    */
   defaultModelName?: string;
   /**

package/src/support/export.ts

@@ -222,7 +222,7 @@ function messageText(message: UIMessage): string {
 function roleLabel(role: UIMessage["role"], userLabel: string): string {
   if (role === "user") return userLabel;
   if (role === "assistant") return "Assistant";
-  return role.charAt(0).toUpperCase() + role.slice(1);
+  return string.capitalize(role);
 }
 
 /* --------------------------------- HTML ---------------------------------- */
@@ -331,7 +331,7 @@ async function dataTableHtml(
   const data = await safeStatement(resolver, id);
   if (!data || data.rows.length === 0) return null;
   const head = data.columns
-    .map((c) => `<th>${escapeHtml(humanizeHeader(c))}</th>`)
+    .map((c) => `<th>${escapeHtml(string.toLabel(c))}</th>`)
     .join("");
   const body = data.rows
     .map(
@@ -409,7 +409,7 @@ async function dataTableMarkdown(
 ): Promise<string | null> {
   const data = await safeStatement(resolver, id);
   if (!data || data.rows.length === 0) return null;
-  const header = `| ${data.columns.map((c) => mdCell(humanizeHeader(c))).join(" | ")} |`;
+  const header = `| ${data.columns.map((c) => mdCell(string.toLabel(c))).join(" | ")} |`;
   const sep = `| ${data.columns.map(() => "---").join(" | ")} |`;
   const rows = data.rows.map(
     (row) => `| ${data.columns.map((c) => mdCell(cellText(row[c]))).join(" | ")} |`,
@@ -458,14 +458,6 @@ function mdCell(value: string): string {
   return value.replace(/\|/g, "\\|").replace(/\r?\n/g, " ");
 }
 
-/** Title-case a snake/kebab/camel column name for a header label. */
-function humanizeHeader(name: string): string {
-  const tokens = [
-    ...string.tokenizeWithOptions({ lowerCase: true, capitalize: true }, name),
-  ];
-  return tokens.length > 0 ? tokens.join(" ") : name;
-}
-
 /** Escape HTML-significant characters (from the shared string utils). */
 const escapeHtml = string.escapeHtml;
 

package/src/support/mastra-client.ts

@@ -175,21 +175,21 @@ export class MastraPluginClient extends MastraClient {
   }
 
   /**
-   * Fetch the static default serving-endpoint id `agentId` falls back to
-   * when no model is pinned, from `GET ${basePath}/default-model`. Returns
-   * `null` when the agent resolves its model dynamically at call time (or the
-   * agent id is unknown) - there's nothing static to advertise. The picker
-   * uses this to name its "Server default" option. Defaults to the server's
-   * default agent when `agentId` is omitted.
+   * Fetch the humanized name of the static default model `agentId` falls back
+   * to when no model is pinned, from `GET ${basePath}/default-model`. Returns
+   * the server-humanized `displayName` (never a raw endpoint id), or `null`
+   * when the agent resolves its model dynamically at call time (or the agent
+   * id is unknown) - there's nothing static to advertise. The picker uses this
+   * to label its default option on load, before the `/models` catalogue
+   * arrives. Defaults to the server's default agent when `agentId` is omitted.
    */
   async defaultModel(agentId?: string, signal?: AbortSignal): Promise<string | null> {
-    const query = agentId ? `?agentId=${encodeURIComponent(agentId)}` : "";
     const payload = await this.#getJson(
-      `${this.basePath}${routes.MASTRA_ROUTES.defaultModel}${query}`,
+      this.#agentScoped(routes.MASTRA_ROUTES.defaultModel, agentId),
       wire.DefaultModelResponseSchema,
       signal,
     );
-    return payload.model;
+    return payload.displayName ?? payload.model;
   }
 
   /**
@@ -552,35 +552,47 @@ export const useMastraModels = (
 };
 
 /**
- * Fetch the static default serving-endpoint id the given agent (or the
- * server's default agent) falls back to when no model is pinned, via
- * `client.defaultModel(agentId)`. `null` while loading, when the agent's
- * model is dynamic, or on error - the picker then shows a plain "Server
- * default". Pass `enabled: false` to skip the fetch (e.g. picker hidden).
+ * Fetch the humanized name of the static default model the given agent (or
+ * the server's default agent) falls back to when no model is pinned, via
+ * `client.defaultModel(agentId)`. `defaultModel` is `null` while loading,
+ * when the agent's model is dynamic, or on error - the picker then shows a
+ * plain "Default". Pass `enabled: false` to skip the fetch (e.g. picker
+ * hidden), which also clears any prior value. Returns an object to match the
+ * shape of the sibling data hooks ({@link useMastraModels},
+ * {@link useMastraSuggestions}).
  */
 export const useMastraDefaultModel = (
   agentId?: string,
   enabled = true,
-): string | null => {
+): { defaultModel: string | null; loading: boolean } => {
   const client = useMastraClient();
   const [model, setModel] = useState<string | null>(null);
+  const [loading, setLoading] = useState(enabled);
 
   useEffect(() => {
-    if (!enabled) return;
+    if (!enabled) {
+      setModel(null);
+      setLoading(false);
+      return;
+    }
     const controller = new AbortController();
+    setLoading(true);
     client
       .defaultModel(agentId, controller.signal)
       .then((m) => {
         if (!controller.signal.aborted) setModel(m);
       })
       .catch(() => {
-        // Non-critical: a missing default just yields a plain "Server default".
+        // Non-critical: a missing default just yields a plain "Default".
         if (!controller.signal.aborted) setModel(null);
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setLoading(false);
       });
     return () => controller.abort();
   }, [client, agentId, enabled]);
 
-  return model;
+  return { defaultModel: model, loading };
 };
 
 /**