@dbx-tools/ui-mastra 0.3.1 → 0.3.3

package/package.json

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

package/src/react/chat-view.tsx

@@ -100,6 +100,7 @@ export const ChatView = ({
   models,
   model,
   onModelChange,
+  defaultModelName,
   onLoadMore,
   isLoadingMore = false,
   hasMore = false,
@@ -285,11 +286,25 @@ export const ChatView = ({
   // otherwise as static text.
   const showModelDisplay = Boolean(onModelChange);
   const modelChangeable = Boolean(models && models.length > 0);
-  // Label the current model by its human-readable name when the catalogue
-  // carries one (`displayName`), falling back to the raw endpoint id, then
-  // to "Server default" when no model is pinned.
-  const currentModelLabel =
-    models?.find((m) => m.name === model)?.displayName || model || "Server default";
+  // Human-readable name for an endpoint id, using the catalogue's
+  // `displayName` when present, else the raw id.
+  const modelLabel = (name?: string): string | undefined => {
+    if (!name) return undefined;
+    return models?.find((m) => m.name === name)?.displayName || name;
+  };
+  // 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.
+  const currentModelLabel = modelLabel(model) || defaultOptionLabel;
+  // Picker entries sorted by their human-readable label (case-insensitive).
+  const sortedModels = [...(models ?? [])].sort((a, b) =>
+    (a.displayName || a.name).localeCompare(b.displayName || b.name, undefined, {
+      sensitivity: "base",
+    }),
+  );
   const showClear = Boolean(onClear);
   const showExport = Boolean(onExportConversation);
   // The conversation sidebar turns on once the host wires both the
@@ -680,11 +695,13 @@ export const ChatView = ({
                         size="sm"
                         className="h-7 w-auto max-w-[200px] gap-1 rounded-full px-2.5 text-xs [&_svg]:size-3"
                       >
-                        <SelectValue placeholder="Server default" />
+                        <SelectValue placeholder={defaultOptionLabel} />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value={DEFAULT_MODEL_VALUE}>Server default</SelectItem>
-                        {models!.map((m) => (
+                        <SelectItem value={DEFAULT_MODEL_VALUE}>
+                          {defaultOptionLabel}
+                        </SelectItem>
+                        {sortedModels.map((m) => (
                           <SelectItem key={m.name} value={m.name}>
                             {m.displayName || m.name}
                           </SelectItem>

package/src/react/index.ts

@@ -15,6 +15,7 @@ export {
   useChartFetch,
   useMastraClient,
   useMastraConfig,
+  useMastraDefaultModel,
   useMastraModels,
   useMastraSuggestions,
   useMastraThreads,

package/src/react/mastra-chat.tsx

@@ -10,6 +10,7 @@ import { exportChat, type EmbedResolver, type ExportFormat } from "../support/ex
 import { useBrand } from "@dbx-tools/ui-branding/react";
 import {
   useMastraClient,
+  useMastraDefaultModel,
   useMastraModels,
   useMastraSuggestions,
   useMastraThreads,
@@ -347,6 +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);
   // 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.
@@ -1333,6 +1338,7 @@ export const useMastraChat = (
     models: showModelPicker ? models : undefined,
     model,
     onModelChange: showModelPicker ? setModel : undefined,
+    defaultModelName: showModelPicker ? (defaultModelName ?? undefined) : undefined,
     onLoadMore: loadOlderHistory,
     isLoadingMore,
     hasMore: activeSession.hasMoreHistory,

package/src/react/types.ts

@@ -116,6 +116,13 @@ export type ChatViewProps = {
   /** Currently selected model name; empty string means "use server default". */
   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.
+   */
+  defaultModelName?: string;
   /**
    * Optional infinite-scroll-up handler. Fired when the user scrolls
    * within `TOP_LOAD_MORE_THRESHOLD_PX` of the top of the

package/src/support/mastra-client.ts

@@ -174,6 +174,24 @@ export class MastraPluginClient extends MastraClient {
     return payload.endpoints;
   }
 
+  /**
+   * 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.
+   */
+  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}`,
+      wire.DefaultModelResponseSchema,
+      signal,
+    );
+    return payload.model;
+  }
+
   /**
    * Fetch the curated starter questions for `agentId`'s Genie space
    * from `GET ${basePath}/suggestions`. Empty when the agent has no
@@ -533,6 +551,38 @@ export const useMastraModels = (
   return { models, loading, error };
 };
 
+/**
+ * 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).
+ */
+export const useMastraDefaultModel = (
+  agentId?: string,
+  enabled = true,
+): string | null => {
+  const client = useMastraClient();
+  const [model, setModel] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const controller = new AbortController();
+    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".
+        if (!controller.signal.aborted) setModel(null);
+      });
+    return () => controller.abort();
+  }, [client, agentId, enabled]);
+
+  return model;
+};
+
 /**
  * Fetch the curated starter questions for an agent's Genie space via
  * `client.suggestions(agentId)`. These are the `sample_questions` an