@dbx-tools/ui-mastra 0.6.224 → 0.6.226

package/README.md

@@ -147,7 +147,9 @@ export function App() {
 `MastraChat` is the quickest client for the AppKit-Mastra plugin. It reads the
 plugin's published client config, creates a `MastraPluginClient`, streams turns
 through Mastra's official AI SDK chat route, hydrates native memory, and renders
-the controlled `ChatView`.
+the controlled `ChatView`. When Mastra returns persisted `messages` without a
+precomputed `uiMessages` projection, history hydration uses Mastra's native
+`convertMessages(...).to("AIV5.UI")` conversion.
 
 Useful options:
 
@@ -155,6 +157,9 @@ Useful options:
 - `showModelPicker` fetches `/models` and sends `X-Mastra-Model` overrides.
 - `composerActions` places host-owned per-turn controls beside the model
   selector without replacing the built-in composer.
+- `modelSelectorActions` places host-owned controls inside the model menu after
+  the endpoint choices. Supply it only when the active agent supports that
+  option, such as a Genie transport toggle.
 - `composerLeadingActions` places attachment or app actions on the left side of
   the fixed composer footer. The textarea grows above it to a cap, then scrolls;
   model and Send/Stop stay pinned bottom-right.
@@ -198,6 +203,11 @@ starts a fresh conversation when it was the last tab open. The open set is
 session state; the strip reseeds from the most recent conversations on the next
 load.
 
+Selecting a conversation fetches only the newest 20 native memory messages.
+Scrolling upward requests the next page and prepends it without moving the
+reader's viewport. Agent turns still send only the new user message; Mastra
+loads the remembered transcript server-side.
+
 `auto` measures the chat's own element rather than the viewport, so a chat
 embedded in a split view or side panel switches to tabs on the space it actually
 has instead of waiting for the window to shrink.
@@ -258,6 +268,16 @@ export function ReviewChat(props: ChatViewProps) {
 sidebar, transcript, tool progress, approval cards, suggestions, export controls,
 feedback controls, and composer from props. Use it when your app already has a
 transport or needs to combine Mastra messages with another state model.
+`MastraChat` shows a spinner in the model control while its live default model
+is being resolved. The picker groups endpoints into
+Rust-derived family submenus. Its compact first popup shows only the current
+model, host-owned actions such as Genie Agent Mode, and a reasoning slider when
+the selected endpoint supports it. The current model opens the family picker,
+so the long endpoint catalogue stays out of the primary control popup. Family
+and model menus use the same compact utility type as the composer actions,
+omit repeated headers, and omit the already-selected model. The model menu puts
+`Default (<resolved model>)` first, keeps `Other` last, and makes a one-model
+family directly selectable instead of opening another submenu.
 
 ## Call Plugin Routes Directly
 

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.6.224";
+export const PACKAGE_VERSION = "0.6.226";
 export * as reactBubbles from "./src/react/bubbles.tsx";
 export * as reactChatApprovals from "./src/react/chat-approvals.ts";
 export * as reactChatComposer from "./src/react/chat-composer.tsx";

package/package.json

@@ -31,13 +31,14 @@
     "react-dom": "~19.2.4"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "0.6.224",
-    "@dbx-tools/shared-genie": "0.6.224",
-    "@dbx-tools/shared-mastra": "0.6.224",
-    "@dbx-tools/shared-model": "0.6.224",
-    "@dbx-tools/ui-appkit": "0.6.224",
-    "@dbx-tools/ui-branding": "0.6.224",
+    "@dbx-tools/shared-core": "0.6.226",
+    "@dbx-tools/shared-genie": "0.6.226",
+    "@dbx-tools/shared-mastra": "0.6.226",
+    "@dbx-tools/shared-model": "0.6.226",
+    "@dbx-tools/ui-appkit": "0.6.226",
+    "@dbx-tools/ui-branding": "0.6.226",
     "@mastra/client-js": "1.50.0",
+    "@mastra/core": "1.71.0",
     "@tanstack/react-table": "^8.21.3",
     "ai": "^5.0.0",
     "echarts": "^6.0.0",
@@ -52,7 +53,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.224",
+  "version": "0.6.226",
   "type": "module",
   "exports": {
     "./react": "./src/react/index.ts",

package/src/react/_history-messages.ts

@@ -0,0 +1,11 @@
+import { convertMessages } from "@mastra/core/agent/message-list";
+import type { ListMemoryThreadMessagesResponse } from "@mastra/client-js";
+import type { UIMessage } from "ai";
+
+/** Convert a newest-first native memory page to chronological AI SDK UI messages. */
+export function toChronologicalUiMessages(response: ListMemoryThreadMessagesResponse): UIMessage[] {
+  if (response.uiMessages) {
+    return [...response.uiMessages].reverse() as UIMessage[];
+  }
+  return convertMessages(response.messages).to("AIV5.UI") as UIMessage[];
+}

package/src/react/_model-selector.tsx

@@ -0,0 +1,292 @@
+import { string } from "@dbx-tools/shared-core";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  Slider,
+  Spinner,
+} from "@dbx-tools/ui-appkit/react";
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { useMemo, useState, type ReactNode } from "react";
+import type { ChatModelOption, ChatViewProps } from "./types.ts";
+
+const OTHER_FAMILY = "other";
+
+interface ModelSelectorProps {
+  models: ChatModelOption[];
+  model?: string;
+  defaultModelName?: string;
+  defaultModelId?: string;
+  defaultModelLoading?: boolean;
+  reasoningEffort: ChatViewProps["reasoningEffort"];
+  onReasoningEffortChange: ChatViewProps["onReasoningEffortChange"];
+  onModelChange: NonNullable<ChatViewProps["onModelChange"]>;
+  actions?: ReactNode;
+}
+
+/** Convert a normalized family token into a compact menu label. */
+function familyLabel(family: string): string {
+  return family.length <= 3 ? family.toUpperCase() : string.toLabel(family);
+}
+
+/** Resolve the label shown for a model endpoint. */
+function modelLabel(model: ChatModelOption): string {
+  return model.displayName || model.name;
+}
+
+/** Reasoning selector backed only by efforts published for the active model. */
+const ReasoningControl = ({
+  efforts,
+  value,
+  onChange,
+}: {
+  efforts: string[];
+  value: ChatViewProps["reasoningEffort"];
+  onChange: NonNullable<ChatViewProps["onReasoningEffortChange"]>;
+}) => {
+  const selectedIndex = value === undefined ? 0 : Math.max(0, efforts.indexOf(value) + 1);
+  const selectedLabel = value === undefined ? "Auto" : string.toLabel(value);
+
+  return (
+    <div className="space-y-2 px-2 py-1.5">
+      <div className="flex items-center justify-between gap-3 text-xs">
+        <span className="font-medium text-foreground">Reasoning</span>
+        <span className="text-muted-foreground">{selectedLabel}</span>
+      </div>
+      <Slider
+        aria-label="Reasoning effort"
+        min={0}
+        max={efforts.length}
+        step={1}
+        value={[selectedIndex]}
+        onValueChange={([index]) => onChange(index === 0 ? undefined : efforts[index - 1])}
+      />
+    </div>
+  );
+};
+
+/** Family menu that opens one scoped endpoint submenu at a time. */
+const FamilyPicker = ({
+  families,
+  selectedModelId,
+  model,
+  defaultModelName,
+  showLoading,
+  activeFamily,
+  onActiveFamilyChange,
+  onModelChange,
+}: {
+  families: Array<[string, ChatModelOption[]]>;
+  selectedModelId?: string;
+  model?: string;
+  defaultModelName?: string;
+  showLoading: boolean;
+  activeFamily?: string;
+  onActiveFamilyChange: (family: string | undefined) => void;
+  onModelChange: NonNullable<ChatViewProps["onModelChange"]>;
+}) => {
+  if (activeFamily) {
+    const options = families.find(([family]) => family === activeFamily)?.[1] ?? [];
+    const choices = options.filter((option) => option.name !== selectedModelId);
+    return (
+      <>
+        <button
+          type="button"
+          className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-xs font-medium outline-none hover:bg-accent focus-visible:bg-accent"
+          onClick={() => onActiveFamilyChange(undefined)}
+        >
+          <ChevronLeftIcon className="size-3" />
+          Models
+        </button>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup onValueChange={onModelChange}>
+          {choices.map((option) => (
+            <DropdownMenuRadioItem key={option.name} value={option.name} className="text-xs">
+              {modelLabel(option)}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <DropdownMenuLabel className="text-xs">Models</DropdownMenuLabel>
+      <DropdownMenuItem className="gap-2 text-xs" onSelect={() => onModelChange("")}>
+        {showLoading ? (
+          <>
+            <Spinner className="size-3 shrink-0" />
+            <span className="sr-only">Loading default model</span>
+          </>
+        ) : (
+          <span>{defaultModelName ? `Default (${defaultModelName})` : "Default"}</span>
+        )}
+        {!model && !showLoading && <CheckIcon className="ml-auto size-3" />}
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      {families.map(([family, options]) => {
+        if (options.length === 1) {
+          const [option] = options;
+          if (!option) return null;
+          return (
+            <DropdownMenuItem
+              key={family}
+              className="gap-2 text-xs"
+              onSelect={() => onModelChange(option.name)}
+            >
+              <span>{modelLabel(option)}</span>
+              {option.name === selectedModelId && <CheckIcon className="ml-auto size-3" />}
+            </DropdownMenuItem>
+          );
+        }
+        const choices = options.filter((option) => option.name !== selectedModelId);
+        if (choices.length === 0) return null;
+        return (
+          <button
+            key={family}
+            type="button"
+            className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-none hover:bg-accent focus-visible:bg-accent"
+            onClick={() => onActiveFamilyChange(family)}
+          >
+            <span>{familyLabel(family)}</span>
+            <span className="ml-auto tabular-nums text-muted-foreground">{options.length}</span>
+            <ChevronRightIcon className="size-3 text-muted-foreground" />
+          </button>
+        );
+      })}
+    </>
+  );
+};
+
+/**
+ * Family-first model picker with fixed model controls above the scrollable
+ * family submenus.
+ */
+export const ModelSelector = ({
+  models,
+  model,
+  defaultModelName,
+  defaultModelId,
+  defaultModelLoading = false,
+  reasoningEffort,
+  onReasoningEffortChange,
+  onModelChange,
+  actions,
+}: ModelSelectorProps) => {
+  const [open, setOpen] = useState(false);
+  const [modelPickerOpen, setModelPickerOpen] = useState(false);
+  const [activeFamily, setActiveFamily] = useState<string>();
+  const selectedModelId = model || defaultModelId;
+  const selectedModel = models.find((option) => option.name === selectedModelId);
+  const reasoningEfforts = selectedModel?.reasoningEfforts ?? [];
+  const showLoading = defaultModelLoading && !model;
+  const triggerLabel = model
+    ? modelLabel(models.find((option) => option.name === model) ?? { name: model })
+    : defaultModelName || "Default";
+  const families = useMemo(() => {
+    const grouped = new Map<string, ChatModelOption[]>();
+    for (const option of models) {
+      const family = option.family || OTHER_FAMILY;
+      const current = grouped.get(family);
+      if (current) current.push(option);
+      else grouped.set(family, [option]);
+    }
+    return [...grouped.entries()].sort(([left], [right]) => {
+      if (left === OTHER_FAMILY) return 1;
+      if (right === OTHER_FAMILY) return -1;
+      return 0;
+    });
+  }, [models]);
+
+  return (
+    <DropdownMenu
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) {
+          setModelPickerOpen(false);
+          setActiveFamily(undefined);
+        }
+      }}
+    >
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-7 max-w-[190px] gap-1.5 px-2 text-xs font-normal"
+          aria-label={showLoading ? "Loading default model" : `Model: ${triggerLabel}`}
+        >
+          {showLoading ? (
+            <>
+              <Spinner className="size-3 shrink-0" />
+              <span className="sr-only">Loading default model</span>
+            </>
+          ) : (
+            <>
+              <span className="truncate">{triggerLabel}</span>
+              <ChevronDownIcon className="size-3 shrink-0 text-muted-foreground" />
+            </>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48">
+        <DropdownMenuSub
+          open={modelPickerOpen}
+          onOpenChange={(next) => {
+            if (!next && open) return;
+            setModelPickerOpen(next);
+            if (!next) setActiveFamily(undefined);
+          }}
+        >
+          <DropdownMenuSubTrigger className="mx-1 justify-center rounded-lg bg-accent/60 px-3 py-2 text-xs font-medium">
+            {showLoading ? (
+              <>
+                <Spinner className="size-3 shrink-0" />
+                <span className="sr-only">Loading default model</span>
+              </>
+            ) : (
+              triggerLabel
+            )}
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent className="w-48">
+              <FamilyPicker
+                families={families}
+                selectedModelId={selectedModelId}
+                model={model}
+                defaultModelName={defaultModelName}
+                showLoading={showLoading}
+                activeFamily={activeFamily}
+                onActiveFamilyChange={setActiveFamily}
+                onModelChange={onModelChange}
+              />
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+        {(actions || (reasoningEfforts.length > 0 && onReasoningEffortChange)) && (
+          <DropdownMenuSeparator />
+        )}
+        {actions && <div className="px-1">{actions}</div>}
+        {reasoningEfforts.length > 0 && onReasoningEffortChange && (
+          <ReasoningControl
+            efforts={reasoningEfforts}
+            value={reasoningEffort}
+            onChange={onReasoningEffortChange}
+          />
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

package/src/react/chat-composer.tsx

@@ -12,11 +12,6 @@ import {
   InputGroupAddon,
   InputGroupButton,
   InputGroupTextarea,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
   Spinner,
   Tooltip,
   TooltipContent,
@@ -34,11 +29,10 @@ import {
 import { useCallback, useId, useLayoutEffect, useRef, useState } from "react";
 import { autosizeComposerTextarea, observeComposerWidth } from "./_composer-autosize.ts";
 import { ExportMenu } from "./export-menu.tsx";
+import { ModelSelector } from "./_model-selector.tsx";
 import { SuggestionPills } from "./suggestion-pills.tsx";
 import type { ChatViewProps } from "./types.ts";
 
-const DEFAULT_MODEL_VALUE = "__default__";
-
 type QueuedSteerListProps = {
   queuedSteers: NonNullable<ChatViewProps["queuedSteers"]>;
   onSendSteerNow: ChatViewProps["onSendSteerNow"];
@@ -250,7 +244,12 @@ type ChatComposerProps = {
   model: ChatViewProps["model"];
   onModelChange: ChatViewProps["onModelChange"];
   defaultModelName: ChatViewProps["defaultModelName"];
+  defaultModelId: ChatViewProps["defaultModelId"];
+  defaultModelLoading: ChatViewProps["defaultModelLoading"];
+  reasoningEffort: ChatViewProps["reasoningEffort"];
+  onReasoningEffortChange: ChatViewProps["onReasoningEffortChange"];
   composerActions: ChatViewProps["composerActions"];
+  modelSelectorActions: ChatViewProps["modelSelectorActions"];
   composerLeadingActions: ChatViewProps["composerLeadingActions"];
   isLoadingHistory: NonNullable<ChatViewProps["isLoadingHistory"]>;
   onClear: ChatViewProps["onClear"];
@@ -273,7 +272,12 @@ export const ChatComposer = ({
   model,
   onModelChange,
   defaultModelName,
+  defaultModelId,
+  defaultModelLoading,
+  reasoningEffort,
+  onReasoningEffortChange,
   composerActions,
+  modelSelectorActions,
   composerLeadingActions,
   isLoadingHistory,
   onClear,
@@ -308,24 +312,13 @@ export const ChatComposer = ({
     onResumeFollow();
   };
 
-  const showModelDisplay = Boolean(onModelChange);
   const modelChangeable = Boolean(models && models.length > 0);
-  const defaultOptionLabel = defaultModelName || "Default";
-  const currentModelLabel =
-    (model ? models?.find((option) => option.name === model)?.displayName : undefined) ||
-    defaultOptionLabel;
-  const sortedModels = [...(models ?? [])].sort((left, right) =>
-    (left.displayName || left.name).localeCompare(right.displayName || right.name, undefined, {
-      sensitivity: "base",
-    }),
-  );
   return (
     <>
-      {isEmpty && (
+      {isEmpty && !isLoadingHistory && (
         <SuggestionPills
           questions={suggestions}
           onSelect={(text) => sendMessage({ text })}
-          disabled={isLoadingHistory}
           className="mx-auto w-full max-w-4xl px-4 pb-2 md:px-6"
         />
       )}
@@ -358,14 +351,13 @@ export const ChatComposer = ({
                 submit();
               }
             }}
-            placeholder={isLoadingHistory ? "Loading history..." : "Send a message..."}
+            placeholder="Send a message..."
             rows={1}
-            disabled={isLoadingHistory}
-            className="field-sizing-fixed max-h-64 w-full flex-none overflow-y-auto px-4 pb-2 pt-4 text-base md:text-sm"
+            className="field-sizing-fixed min-h-10 max-h-64 w-full flex-none overflow-y-auto px-4 pb-2 pt-4 text-xs"
           />
           <InputGroupAddon
             align="block-end"
-            className="flex w-full flex-row flex-wrap items-center justify-between gap-2 px-3 pb-3 pt-0"
+            className="flex w-full flex-row flex-wrap items-center justify-between gap-2 px-3 pb-3 pt-1"
           >
             <div className="flex min-w-0 max-w-full flex-wrap items-center gap-2">
               {composerLeadingActions}
@@ -382,35 +374,29 @@ export const ChatComposer = ({
             </div>
             <div className="ml-auto flex min-w-0 max-w-full items-center gap-1.5">
               {composerActions}
-              {showModelDisplay &&
+              {onModelChange &&
                 (modelChangeable ? (
-                  <Select
-                    name="mastra-model"
-                    value={model ? model : DEFAULT_MODEL_VALUE}
-                    onValueChange={(value) =>
-                      onModelChange?.(value === DEFAULT_MODEL_VALUE ? "" : value)
-                    }
-                    disabled={isLoadingHistory}
-                  >
-                    <SelectTrigger
-                      size="sm"
-                      className="h-7 w-auto max-w-[180px] gap-1 truncate border-0 bg-transparent px-2 text-xs shadow-none hover:bg-accent [&_svg]:size-3"
-                    >
-                      <span className="sr-only">Model:</span>
-                      <SelectValue placeholder={defaultOptionLabel} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value={DEFAULT_MODEL_VALUE}>{defaultOptionLabel}</SelectItem>
-                      {sortedModels.map((option) => (
-                        <SelectItem key={option.name} value={option.name}>
-                          {option.displayName || option.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <ModelSelector
+                    models={models ?? []}
+                    model={model}
+                    defaultModelName={defaultModelName}
+                    defaultModelId={defaultModelId}
+                    defaultModelLoading={defaultModelLoading}
+                    reasoningEffort={reasoningEffort}
+                    onReasoningEffortChange={onReasoningEffortChange}
+                    onModelChange={onModelChange}
+                    actions={modelSelectorActions}
+                  />
                 ) : (
-                  <span className="max-w-[180px] truncate px-2 text-xs text-muted-foreground">
-                    {currentModelLabel}
+                  <span className="flex max-w-[180px] items-center gap-1.5 truncate px-2 text-xs text-muted-foreground">
+                    {defaultModelLoading ? (
+                      <>
+                        <Spinner className="size-3 shrink-0" />
+                        <span className="sr-only">Loading default model</span>
+                      </>
+                    ) : (
+                      defaultModelName || "Default"
+                    )}
                   </span>
                 ))}
               {isRunning && onStop && !input.trim() ? (

package/src/react/chat-history.ts

@@ -1,5 +1,4 @@
 import { error as sharedError, log } from "@dbx-tools/shared-core";
-import type { ListMemoryThreadMessagesResponse } from "@mastra/client-js";
 import type { UIMessage } from "ai";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type {
@@ -8,6 +7,7 @@ import type {
   ThreadSessionUpdater,
 } from "./chat-sessions.ts";
 import type { PendingApproval } from "./types.ts";
+import { toChronologicalUiMessages } from "./_history-messages.ts";
 import type { MastraPluginClient } from "../support/mastra-client.ts";
 
 const HISTORY_PAGE_SIZE = 20;
@@ -26,11 +26,6 @@ interface UseChatHistoryOptions {
 
 type SuspendedRuns = Awaited<ReturnType<MastraPluginClient["suspendedRuns"]>>["runs"];
 
-/** Read a newest-first native memory page as chronological UI messages. */
-function toChronologicalUiMessages(response: ListMemoryThreadMessagesResponse): UIMessage[] {
-  return [...(response.uiMessages ?? [])].reverse() as UIMessage[];
-}
-
 /** Recover actionable approval cards from Mastra's persisted suspended runs. */
 function pendingApprovals(
   messages: UIMessage[],

package/src/react/chat-view.tsx

@@ -27,8 +27,13 @@ export const ChatView = ({
   models,
   model,
   onModelChange,
+  reasoningEffort,
+  onReasoningEffortChange,
   defaultModelName,
+  defaultModelId,
+  defaultModelLoading = false,
   composerActions,
+  modelSelectorActions,
   composerLeadingActions,
   onLoadMore,
   isLoadingMore = false,
@@ -117,8 +122,13 @@ export const ChatView = ({
         models={models}
         model={model}
         onModelChange={onModelChange}
+        reasoningEffort={reasoningEffort}
+        onReasoningEffortChange={onReasoningEffortChange}
         defaultModelName={defaultModelName}
+        defaultModelId={defaultModelId}
+        defaultModelLoading={defaultModelLoading}
         composerActions={composerActions}
+        modelSelectorActions={modelSelectorActions}
         composerLeadingActions={composerLeadingActions}
         isLoadingHistory={isLoadingHistory}
         onClear={onClear}

package/src/react/mastra-chat.tsx

@@ -1,4 +1,5 @@
 import { error as sharedError, hash, log } from "@dbx-tools/shared-core";
+import type { ReasoningEffort } from "@dbx-tools/shared-model";
 import { useBrand } from "@dbx-tools/ui-branding/react";
 import type { UIMessage } from "ai";
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -39,6 +40,7 @@ import {
 } from "../support/thread-sessions.ts";
 
 const _loadChatExport = () => import("../support/export.ts");
+const EMPTY_REASONING_EFFORTS: readonly ReasoningEffort[] = [];
 
 // Self-contained drop-in chat. `useMastraChat` drives the conversation
 // over `@mastra/client-js`: `agent.stream()` returns a Response
@@ -239,6 +241,7 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
   const showModelPicker = Boolean(options.showModelPicker);
   const modelKey = modelStorageKey(mastraClient.basePath, agentId);
   const [model, setModel] = useState(() => (showModelPicker ? readStoredModel(modelKey) : ""));
+  const [reasoningEffort, setReasoningEffort] = useState<ReasoningEffort | undefined>();
   const handleModelChange = useCallback(
     (nextModel: string) => {
       setModel(nextModel);
@@ -256,6 +259,8 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
   // `model` to its dependency list.
   const modelRef = useRef(model);
   modelRef.current = model;
+  const reasoningEffortRef = useRef(reasoningEffort);
+  reasoningEffortRef.current = reasoningEffort;
   const requestContextRef = useRef(options.requestContext);
   requestContextRef.current = options.requestContext;
   // Built-in conversation management. When on, the chat always drives an
@@ -355,7 +360,19 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
   // 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);
+  const {
+    defaultModel: defaultModelName,
+    defaultModelId,
+    loading: defaultModelLoading,
+  } = useMastraDefaultModel(agentId, showModelPicker);
+  const activeModel = model || defaultModelId || undefined;
+  const activeModelOption = models.find((option) => option.name === activeModel);
+  const reasoningEfforts = activeModelOption?.reasoningEfforts ?? EMPTY_REASONING_EFFORTS;
+  useEffect(() => {
+    if (reasoningEffort && !reasoningEfforts.includes(reasoningEffort)) {
+      setReasoningEffort(undefined);
+    }
+  }, [reasoningEffort, reasoningEfforts]);
   // 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.
@@ -490,6 +507,7 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
       // threads or changes the model picker while it streams.
       const streamThreadId = threadId === DEFAULT_THREAD_SESSION_KEY ? undefined : threadId;
       const model = modelRef.current || undefined;
+      const turnReasoningEffort = reasoningEffortRef.current;
       return driveStream(threadId, assistantId, (signal) => {
         return mastraClient.streamAgent({
           agentId,
@@ -497,6 +515,7 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
           runId,
           threadId: streamThreadId,
           model,
+          reasoningEffort: turnReasoningEffort,
           requestContext,
           signal,
         });
@@ -970,7 +989,11 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
     models: showModelPicker ? models : undefined,
     model,
     onModelChange: showModelPicker ? handleModelChange : undefined,
+    reasoningEffort,
+    onReasoningEffortChange: showModelPicker ? setReasoningEffort : undefined,
     defaultModelName: showModelPicker ? (defaultModelName ?? undefined) : undefined,
+    defaultModelId: showModelPicker ? (defaultModelId ?? undefined) : undefined,
+    defaultModelLoading: showModelPicker && defaultModelLoading,
     onLoadMore: loadOlderHistory,
     isLoadingMore,
     hasMore: activeSession.hasMoreHistory,
@@ -1028,6 +1051,8 @@ export interface MastraChatProps<
   className?: string;
   /** Host controls placed beside the model picker in the composer footer. */
   composerActions?: ReactNode;
+  /** Host controls shown inside the model selector after its endpoint choices. */
+  modelSelectorActions?: ReactNode;
   /** Host controls placed on the left side of the composer footer. */
   composerLeadingActions?: ReactNode;
 }
@@ -1048,6 +1073,7 @@ export interface MastraChatProps<
 export const MastraChat = <TValues extends Record<string, unknown> = Record<string, unknown>>({
   className,
   composerActions,
+  modelSelectorActions,
   composerLeadingActions,
   ...options
 }: MastraChatProps<TValues>) => {
@@ -1057,6 +1083,7 @@ export const MastraChat = <TValues extends Record<string, unknown> = Record<stri
       {...chat}
       className={className}
       composerActions={composerActions}
+      modelSelectorActions={modelSelectorActions}
       composerLeadingActions={composerLeadingActions}
     />
   );

package/src/react/thread-sidebar.tsx

@@ -184,6 +184,10 @@ export const ThreadSidebar = ({
               const isStreaming = streamingThreadIds.includes(thread.id);
               const isConfirming = confirmDeleteId === thread.id;
               const isEditing = editingId === thread.id;
+              const actionCount =
+                Number(Boolean(isStreaming && onCancel)) +
+                Number(Boolean(onRename)) +
+                Number(Boolean(onDelete));
               if (isEditing) {
                 return (
                   <li key={thread.id}>
@@ -213,8 +217,9 @@ export const ThreadSidebar = ({
                 <li key={thread.id}>
                   <div
                     className={cn(
-                      "group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+                      "group relative flex items-center rounded-md px-2 py-1.5 text-sm",
                       "hover:bg-accent hover:text-accent-foreground",
+                      "focus-within:bg-accent focus-within:text-accent-foreground",
                       isActive && "bg-accent text-accent-foreground",
                     )}
                   >
@@ -222,7 +227,15 @@ export const ThreadSidebar = ({
                       type="button"
                       onClick={() => onSelect(thread.id)}
                       aria-current={isActive ? "page" : undefined}
-                      className="min-w-0 flex-1 cursor-pointer text-left"
+                      className={cn(
+                        "min-w-0 flex-1 cursor-pointer text-left transition-[padding] duration-150",
+                        actionCount === 1 && "group-hover:pr-8 group-focus-within:pr-8",
+                        actionCount === 2 && "group-hover:pr-14 group-focus-within:pr-14",
+                        actionCount >= 3 && "group-hover:pr-20 group-focus-within:pr-20",
+                        (isStreaming || isConfirming) && actionCount === 1 && "pr-8",
+                        (isStreaming || isConfirming) && actionCount === 2 && "pr-14",
+                        (isStreaming || isConfirming) && actionCount >= 3 && "pr-20",
+                      )}
                     >
                       <div className="flex items-center gap-1.5 truncate">
                         {isStreaming && !onCancel ? (
@@ -239,73 +252,81 @@ export const ThreadSidebar = ({
                         </div>
                       )}
                     </button>
-                    {isStreaming && onCancel ? (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="icon"
-                            onClick={() => onCancel(thread.id)}
-                            aria-label="Stop generating"
-                            className="size-6 shrink-0 text-primary"
-                          >
-                            <Loader2Icon className="size-3 animate-spin group-hover:hidden" />
-                            <SquareIcon className="hidden size-3 fill-current group-hover:block" />
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>Stop generating</TooltipContent>
-                      </Tooltip>
-                    ) : null}
-                    {onRename && (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="icon"
-                            onClick={(e) => startEdit(e, thread)}
-                            aria-label="Rename conversation"
-                            className={cn(
-                              "size-6 shrink-0",
-                              "opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
-                            )}
-                          >
-                            <PencilIcon className="size-3.5" />
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>Rename conversation</TooltipContent>
-                      </Tooltip>
-                    )}
-                    {onDelete && (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            type="button"
-                            variant={isConfirming ? "destructive" : "ghost"}
-                            size="icon"
-                            onClick={(e) => handleDeleteClick(e, thread.id)}
-                            onBlur={() =>
-                              setConfirmDeleteId((id) => (id === thread.id ? null : id))
-                            }
-                            aria-label={
-                              isConfirming ? "Confirm delete conversation" : "Delete conversation"
-                            }
-                            className={cn(
-                              "size-6 shrink-0",
-                              !isConfirming &&
-                                "opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
-                            )}
-                          >
-                            <Trash2Icon className="size-3.5" />
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          {isConfirming
-                            ? "Click again to delete this conversation"
-                            : "Delete conversation"}
-                        </TooltipContent>
-                      </Tooltip>
+                    {actionCount > 0 && (
+                      <div
+                        className={cn(
+                          "pointer-events-none absolute inset-y-0 right-1 flex items-center gap-0.5",
+                          "bg-gradient-to-l from-accent via-accent to-transparent pl-3",
+                          "opacity-0 transition-opacity duration-150",
+                          "group-hover:pointer-events-auto group-hover:opacity-100",
+                          "group-focus-within:pointer-events-auto group-focus-within:opacity-100",
+                          (isStreaming || isConfirming) && "pointer-events-auto opacity-100",
+                        )}
+                      >
+                        {isStreaming && onCancel ? (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => onCancel(thread.id)}
+                                aria-label="Stop generating"
+                                className="size-6 text-primary"
+                              >
+                                <Loader2Icon className="size-3 animate-spin group-hover:hidden" />
+                                <SquareIcon className="hidden size-3 fill-current group-hover:block" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>Stop generating</TooltipContent>
+                          </Tooltip>
+                        ) : null}
+                        {onRename && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                onClick={(e) => startEdit(e, thread)}
+                                aria-label="Rename conversation"
+                                className="size-6"
+                              >
+                                <PencilIcon className="size-3.5" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>Rename conversation</TooltipContent>
+                          </Tooltip>
+                        )}
+                        {onDelete && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                type="button"
+                                variant={isConfirming ? "destructive" : "ghost"}
+                                size="icon"
+                                onClick={(e) => handleDeleteClick(e, thread.id)}
+                                onBlur={() =>
+                                  setConfirmDeleteId((id) => (id === thread.id ? null : id))
+                                }
+                                aria-label={
+                                  isConfirming
+                                    ? "Confirm delete conversation"
+                                    : "Delete conversation"
+                                }
+                                className="size-6"
+                              >
+                                <Trash2Icon className="size-3.5" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              {isConfirming
+                                ? "Click again to delete this conversation"
+                                : "Delete conversation"}
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
+                      </div>
                     )}
                   </div>
                 </li>

package/src/react/types.ts

@@ -1,4 +1,5 @@
 import type { GenieWriterEvent } from "@dbx-tools/shared-mastra";
+import type { ReasoningEffort } from "@dbx-tools/shared-model";
 import type { UIMessage } from "ai";
 import type { ReactNode } from "react";
 import type { ExportFormat } from "../support/export.ts";
@@ -44,7 +45,12 @@ export type ToolProgress = GenieWriterEvent;
  * `/models` endpoint derives (Databricks-provided name, else a title-cased
  * rendering of `name`). The picker shows `displayName ?? name`.
  */
-export type ChatModelOption = { name: string; displayName?: string };
+export type ChatModelOption = {
+  name: string;
+  displayName?: string;
+  family?: string;
+  reasoningEfforts?: ReasoningEffort[];
+};
 
 /**
  * A steer message submitted while a turn was already streaming. It waits in a
@@ -168,6 +174,10 @@ export type ChatViewProps = {
   /** Currently selected model name; empty string means "use server default". */
   model?: string;
   onModelChange?: (model: string) => void;
+  /** Optional reasoning effort applied to the next turn. Undefined uses the provider default. */
+  reasoningEffort?: ReasoningEffort;
+  /** Update the per-turn reasoning effort. */
+  onReasoningEffortChange?: (effort: ReasoningEffort | undefined) => void;
   /**
    * The serving-endpoint fallback the server uses when no model is pinned,
    * already humanized (the server's `displayName`, e.g. "Claude Sonnet 4.6").
@@ -175,12 +185,21 @@ export type ChatViewProps = {
    * a neutral "Default". Never a raw endpoint id.
    */
   defaultModelName?: string;
+  /** Endpoint id behind the unpinned default, used to resolve family and reasoning metadata. */
+  defaultModelId?: string;
+  /** True while the server resolves the unpinned agent's live default model. */
+  defaultModelLoading?: boolean;
   /**
    * Host-owned controls rendered in the composer footer immediately before the
    * model selector. Use this for per-turn options that belong beside model
    * routing without forking the chat surface.
    */
   composerActions?: ReactNode;
+  /**
+   * Host-owned controls rendered inside the model selector after the endpoint
+   * choices. Omit when the active agent has no matching model-adjacent option.
+   */
+  modelSelectorActions?: ReactNode;
   /**
    * Host-owned actions rendered on the left side of the composer's fixed
    * footer, before Export and Clear.

package/src/support/mastra-client.ts

@@ -6,12 +6,13 @@ import {
   thread,
   wire,
   type Chart,
+  type DefaultModelResponse,
   type MastraClientConfig,
   type MastraFeedbackRequest,
   type MastraFeedbackResponse,
   type StatementData,
 } from "@dbx-tools/shared-mastra";
-import type { ServingEndpointSummary } from "@dbx-tools/shared-model";
+import type { ReasoningEffort, ServingEndpointSummary } from "@dbx-tools/shared-model";
 import { usePluginClientConfig } from "@dbx-tools/ui-appkit/react";
 import {
   MastraClient,
@@ -166,6 +167,7 @@ export class MastraPluginClient extends MastraClient {
     runId: string;
     threadId?: string;
     model?: string;
+    reasoningEffort?: ReasoningEffort;
     requestContext?: MastraRequestContextSnapshot;
     signal?: AbortSignal;
   }): Promise<MastraStreamResponse> {
@@ -175,6 +177,9 @@ export class MastraPluginClient extends MastraClient {
       messages: params.messages,
       body: {
         runId: params.runId,
+        ...(params.reasoningEffort
+          ? { providerOptions: { openai: { reasoningEffort: params.reasoningEffort } } }
+          : {}),
         ...(params.requestContext ? { requestContext: params.requestContext } : {}),
       },
       routing: params,
@@ -271,12 +276,18 @@ export class MastraPluginClient extends MastraClient {
    * arrives. Defaults to the server's default agent when `agentId` is omitted.
    */
   async defaultModel(agentId?: string, signal?: AbortSignal): Promise<string | null> {
+    const payload = await this.defaultModelDetails(agentId, signal);
+    return payload.displayName ?? payload.model;
+  }
+
+  /** Fetch the complete resolved default-model descriptor for an agent. */
+  async defaultModelDetails(agentId?: string, signal?: AbortSignal): Promise<DefaultModelResponse> {
     const payload = await this.#getJson(
       this.#agentScoped(routes.MASTRA_ROUTES.defaultModel, agentId),
       wire.DefaultModelResponseSchema,
       signal,
     );
-    return payload.displayName ?? payload.model;
+    return payload;
   }
 
   /**
@@ -619,27 +630,34 @@ export const useMastraModels = (
 export const useMastraDefaultModel = (
   agentId?: string,
   enabled = true,
-): { defaultModel: string | null; loading: boolean } => {
+): { defaultModel: string | null; defaultModelId: string | null; loading: boolean } => {
   const client = useMastraClient();
   const [model, setModel] = useState<string | null>(null);
+  const [modelId, setModelId] = useState<string | null>(null);
   const [loading, setLoading] = useState(enabled);
 
   useEffect(() => {
     if (!enabled) {
       setModel(null);
+      setModelId(null);
       setLoading(false);
       return;
     }
     const controller = new AbortController();
     setLoading(true);
     client
-      .defaultModel(agentId, controller.signal)
-      .then((m) => {
-        if (!controller.signal.aborted) setModel(m);
+      .defaultModelDetails(agentId, controller.signal)
+      .then((details) => {
+        if (controller.signal.aborted) return;
+        setModel(details.displayName ?? details.model);
+        setModelId(details.model);
       })
       .catch(() => {
         // Non-critical: a missing default just yields a plain "Default".
-        if (!controller.signal.aborted) setModel(null);
+        if (!controller.signal.aborted) {
+          setModel(null);
+          setModelId(null);
+        }
       })
       .finally(() => {
         if (!controller.signal.aborted) setLoading(false);
@@ -647,7 +665,7 @@ export const useMastraDefaultModel = (
     return () => controller.abort();
   }, [client, agentId, enabled]);
 
-  return { defaultModel: model, loading };
+  return { defaultModel: model, defaultModelId: modelId, loading };
 };
 
 /**