@dbx-tools/ui-mastra 0.6.218 → 0.6.219

package/README.md

@@ -14,15 +14,22 @@ Key features:
   wires itself to the default agent.
 - Headless `useMastraChat()` driver for apps that want the same transport logic
   with custom layout.
+- Persistent `MastraAssistant` application shell with a floating launcher,
+  dock/overlay modes, every edge, optional resizing, external controls, and
+  route-stable chat state.
 - Controlled `ChatView` for hosts that own messages, streaming, model state, and
   route calls themselves.
-- `MastraPluginClient` wrapper around `@mastra/client-js` with AppKit-Mastra
-  routes for history, threads, model lists, suggestions, feedback, charts, and
-  statement data.
+- `MastraPluginClient` combines Mastra's official AI SDK chat route, native
+  memory APIs, and AppKit-Mastra model, suggestion, feedback, chart, and
+  statement routes.
 - Tool-approval support for suspended Mastra `requireApproval` calls, including
-  direct resumed-stream handling. An email-shaped input (the `send_email` tool)
+  resumed-stream handling. An email-shaped input (the `send_email` tool)
   renders as a formatted To / Cc / Subject / Markdown-body preview rather than
   raw JSON.
+- Complete native tool input/results retained behind expandable Request and
+  Response rows in each tool pill.
+- Typed per-turn application context through Mastra's native `RequestContext`
+  and server-side `requestContextSchema`.
 - Inline embed rendering for `[chart:<id>]` and `[data:<id>]` markers produced by
   the server plugin.
 - Conversation sidebar with new, select, rename, delete, active-thread, and
@@ -49,9 +56,9 @@ Use this package when the server is
 [`@dbx-tools/appkit-mastra`](../../node/appkit-mastra) and the UI needs to
 understand Mastra-specific behavior:
 
-- `@mastra/client-js` agent streaming plus the plugin's custom history, threads,
-  models, suggestions, feedback, chart, and statement routes.
-- Suspended `requireApproval` tool calls and resumed approve/deny streams.
+- Mastra's official AI SDK chat stream, native resource-scoped memory APIs, and
+  the plugin's model, suggestion, feedback, chart, and statement routes.
+- Suspended `requireApproval` tool calls resumed through native `resumeData`.
 - Genie writer events rendered as inline tool progress, not just a terminal
   answer.
 - `[chart:<id>]` and `[data:<id>]` assistant markers rendered as ECharts charts
@@ -73,6 +80,49 @@ The stylesheet imports the shared `@dbx-tools/ui-appkit` foundation and register
 this package's React files with Tailwind. It does not define design tokens; the
 chat UI uses AppKit semantic tokens from the host app.
 
+## Add A Persistent Assistant
+
+Mount `MastraAssistant` inside the app's existing authentication gate and above
+the route outlet. Closing the panel hides its presentation without unmounting
+the chat driver, so drafts, threads, and active streams survive page navigation.
+
+```tsx
+import { MastraAssistant, useMastraAssistant } from "@dbx-tools/ui-mastra/react";
+
+const AskAboutStore = ({ storeId }: { storeId: string }) => {
+  const assistant = useMastraAssistant<{ storeId: string; route: string }>();
+  return (
+    <button onClick={() => assistant.open({ storeId, route: window.location.pathname })}>
+      Ask assistant
+    </button>
+  );
+};
+
+export function App() {
+  return (
+    <MastraAssistant
+      mode="overlay"
+      side="right"
+      resizable={{ defaultSize: 480, minSize: 360, storageKey: "assistant-size" }}
+      title="Workflow assistant"
+      launcher={{ position: "bottom-right", label: "Open assistant" }}
+      chat={{ showModelPicker: true, enableExport: true, threadPlacement: "top" }}
+    >
+      <RouterAndAuthenticatedApplication />
+    </MastraAssistant>
+  );
+}
+```
+
+`mode="dock"` reflows the child application; `mode="overlay"` overlaps it.
+`side` accepts `top`, `right`, `bottom`, or `left`. Set `resizable={false}` to
+lock size, `launcher={false}` when every launch comes from
+`useMastraAssistant()`, `header={false}` to place New, History, and Close beside
+the conversation pills. With the header enabled those controls move into it and
+the conversation pills remain on their own second row. Replace `icon`, `closeIcon`,
+`newConversationIcon`, `historyIcon`, and `launcher.icon`. Below
+`mobileBreakpoint` the panel becomes a full overlay.
+
 ## Render A Drop-In Chat
 
 ```tsx
@@ -94,8 +144,8 @@ 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 `agent.stream()`, hydrates the latest history page, and renders the
-controlled `ChatView`.
+through Mastra's official AI SDK chat route, hydrates native memory, and renders
+the controlled `ChatView`.
 
 Useful options:
 
@@ -103,6 +153,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.
+- `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.
 - `suggestions` overrides Genie starter questions; omit it to auto-fetch
   `/suggestions`, or pass `[]` to hide suggestions.
 - `threadPlacement` chooses where conversation management renders, or turns it
@@ -167,6 +220,28 @@ Use `useMastraChat()` when the stock behavior is right but the surrounding layou
 belongs to your app. The hook owns streaming, aborts, history paging, thread
 selection, model overrides, suggestions, exports, approvals, and feedback state.
 
+## Pass Typed Application Context
+
+`requestContext` accepts a typed plain record, Mastra `RequestContext<T>`, or a
+per-turn resolver. The driver snapshots it when a message is submitted and
+keeps that snapshot with queued steers, regeneration, and approval continuation.
+
+```tsx
+type StoreContext = { storeId: string; route: string };
+
+const chat = useMastraChat<StoreContext>({
+  requestContext: () => ({
+    storeId: selectedStore.id,
+    route: location.pathname,
+  }),
+});
+```
+
+On the server, declare the same contract with Mastra's native
+`requestContextSchema` on `createAgent<StoreContext>()`. Application context
+cannot override the authenticated memory resource, thread, user, scopes, model,
+or trace fields stamped by AppKit-Mastra.
+
 ## Build A Controlled Chat Surface
 
 ```tsx
@@ -200,7 +275,13 @@ const client = new MastraPluginClient(clientConfig);
 // different threads never share state.
 const stream = await client.streamAgent({
   agentId: client.defaultAgent,
-  messages: [{ role: "user", content: "Hello" }],
+  messages: [
+    {
+      id: "user-1",
+      role: "user",
+      parts: [{ type: "text", text: "Hello" }],
+    },
+  ],
   runId,
   threadId: activeThreadId,
   model: "claude sonnet",
@@ -215,18 +296,22 @@ Each conversation thread runs independently: start a turn on one thread, switch
 to another and start a second, and both stream concurrently. Cancel one via its
 `AbortSignal` (or the driver's `onCancelThread`) without touching the others.
 
-`MastraPluginClient` extends `@mastra/client-js` with the AppKit-Mastra custom
-routes. It uses `credentials: "include"` so session cookies travel with streaming
-and REST calls. The React hooks wrap common route calls for model catalogues,
-suggestions, thread lists, chart fetches, and statement-data fetches.
+`MastraPluginClient` extends `@mastra/client-js` with the official AI SDK
+`chatRoute` transport and AppKit-Mastra additions. It uses
+`credentials: "include"` so session cookies travel with streaming and REST
+calls. The React hooks wrap native memory plus model catalogues, suggestions,
+chart fetches, and statement-data fetches.
 
 ## Approvals, Embeds, And Feedback
 
 The UI understands the extra events produced by
 [`@dbx-tools/appkit-mastra`](../../node/appkit-mastra):
 
-- `tool-call-approval` chunks become inline approval cards and call
-  `approve-tool-call` / `decline-tool-call` when the user decides.
+- Approval chunks become inline approval cards and continue the official chat
+  route with Mastra's native `{ approved, reason? }` resume data.
+- Native tool-call and tool-result payloads remain complete. Expanding a tool
+  row reveals default-closed Request and Response viewers; large values scroll
+  without string or collection truncation.
 - Genie writer events render as tool progress, including thinking text, SQL, row
   counts, result summaries, and chart/data markers.
 - `[chart:<id>]` markers long-poll the chart cache and render ECharts inline.
@@ -303,16 +388,19 @@ touching `navigator.clipboard` or `URL.createObjectURL` again.
 ## Modules
 
 - `MastraChat` - self-contained drop-in chat component.
+- `MastraAssistant` / `useMastraAssistant` - persistent application shell and
+  external open/close/context controller.
 - `useMastraChat` - headless driver that returns `ChatView` props.
 - `ChatView` - controlled presentational chat shell.
-- `MastraPluginClient` - `@mastra/client-js` plus AppKit-Mastra custom routes.
+- `MastraPluginClient` - native `@mastra/client-js` memory/agent APIs plus
+  AppKit-Mastra model, suggestion, feedback, and embed routes.
 - `useMastraClient`, `useMastraConfig`, `useMastraModels`,
   `useMastraDefaultModel`, `useMastraSuggestions`, `useMastraThreads`,
   `useChartFetch`, `useStatementFetch` - route/config hooks for controlled
   clients.
 - `ThreadSidebar` - controlled conversation list, dockable to either edge.
-- `ThreadTabs` - conversation tab strip plus history menu for the `top`
-  placement; reuses `ThreadSidebar` for the menu itself.
+- `ThreadTabs` / `ThreadActions` - conversation pills plus reusable New/History
+  controls for the top strip or persistent assistant header.
 - `ExportMenu` - shared export format menu.
 - `src/support/thread-tabs.ts` - pure open-tab bookkeeping (`syncThreadTabs`,
   `closeThreadTab`, `nextActiveThreadTab`) so the strip's state is testable
@@ -320,6 +408,10 @@ touching `navigator.clipboard` or `URL.createObjectURL` again.
 - `src/support/thread-labels.ts` - `threadTitle` / `relativeTime`, shared by
   the sidebar and the tab strip so a row and a tab never disagree about how an
   untitled or freshly-updated conversation reads.
+- `src/support/request-context.ts` - immutable per-run snapshots around Mastra's
+  native typed `RequestContext`.
+- `src/support/tool-events.ts` - projection of native AI SDK persisted tool
+  parts onto the live pill view model.
 - `src/support/chart-theme.ts` - `ChartChrome`, `LIGHT_CHART_CHROME`,
   `resolveChartChrome`, and the `useChartChrome` hook that keeps an inline
   chart's colors in step with the active theme.
@@ -328,8 +420,9 @@ touching `navigator.clipboard` or `URL.createObjectURL` again.
   an optional `ChartChrome` into a planner spec, shared by the inline chart and
   the PDF export so both read the same.
 - Types - `ChatViewProps`, `MastraChatProps`, `UseMastraChatOptions`,
-  `ThreadPlacement`, `ThreadSummary`, `ToolEvent`, `ToolProgress`,
-  `PendingApproval`, `FeedbackSubmission`, and related UI contract types.
+  `MastraAssistantProps`, `MastraRequestContextInput`, `ThreadPlacement`,
+  `ThreadSummary`, `ToolEvent`, `ToolProgress`, `PendingApproval`,
+  `FeedbackSubmission`, and related UI contract types.
 
 Server-side routes and event production live in
 [`@dbx-tools/appkit-mastra`](../../node/appkit-mastra). Browser-safe route,

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.218";
+export const PACKAGE_VERSION = "0.6.219";
 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";
@@ -11,7 +11,6 @@ export * as reactChatFeedback from "./src/react/chat-feedback.ts";
 export * as reactChatHistory from "./src/react/chat-history.ts";
 export * as reactChatSessions from "./src/react/chat-sessions.ts";
 export * as reactChatStream from "./src/react/chat-stream.ts";
-export * as reactChatStreamReducer from "./src/react/chat-stream-reducer.ts";
 export * as reactChatThreadLayout from "./src/react/chat-thread-layout.tsx";
 export * as reactChatTranscript from "./src/react/chat-transcript.tsx";
 export * as reactChatView from "./src/react/chat-view.tsx";
@@ -20,6 +19,7 @@ export * as reactEmbedSlots from "./src/react/embed-slots.tsx";
 export * as reactExportMenu from "./src/react/export-menu.tsx";
 export * as reactFeedbackControls from "./src/react/feedback-controls.tsx";
 export * as reactMarkdown from "./src/react/markdown.tsx";
+export * as reactMastraAssistant from "./src/react/mastra-assistant.tsx";
 export * as reactMastraChat from "./src/react/mastra-chat.tsx";
 export * as reactSuggestionPills from "./src/react/suggestion-pills.tsx";
 export * as reactSuggestions from "./src/react/suggestions.ts";
@@ -33,16 +33,16 @@ export * as supportClipboard from "./src/support/clipboard.ts";
 export * as supportDownload from "./src/support/download.ts";
 export * as supportExport from "./src/support/export.ts";
 export * as supportMastraClient from "./src/support/mastra-client.ts";
-export * as supportMastraStream from "./src/support/mastra-stream.ts";
 export * as supportModelSelection from "./src/support/model-selection.ts";
+export * as supportRequestContext from "./src/support/request-context.ts";
 export * as supportShikiPlugin from "./src/support/shiki-plugin.ts";
 export * as supportThreadLabels from "./src/support/thread-labels.ts";
 export * as supportThreadSessions from "./src/support/thread-sessions.ts";
 export * as supportThreadTabs from "./src/support/thread-tabs.ts";
+export * as supportToolEvents from "./src/support/tool-events.ts";
 export { AssistantBubble, UserBubble } from "./src/react/bubbles.tsx";
 export { ChatComposer } from "./src/react/chat-composer.tsx";
 export type { ThreadSessionReader, ThreadSessionUpdater, ThreadMessageWriter } from "./src/react/chat-sessions.ts";
-export type { ChatStreamState, ChatStreamChanges, ChatStreamReduction } from "./src/react/chat-stream-reducer.ts";
 export { ChatThreadLayout } from "./src/react/chat-thread-layout.tsx";
 export { useChatTranscriptController, ChatTranscript } from "./src/react/chat-transcript.tsx";
 export type { ChatTranscriptController } from "./src/react/chat-transcript.tsx";
@@ -53,6 +53,7 @@ export { MarkdownWithEmbeds } from "./src/react/embed-slots.tsx";
 export { ExportMenu } from "./src/react/export-menu.tsx";
 export { FeedbackControls } from "./src/react/feedback-controls.tsx";
 export { AssistantMarkdown, ToolMarkdown, SqlBlock } from "./src/react/markdown.tsx";
+export type { MastraAssistantMode, MastraAssistantSide, MastraAssistantLauncherPosition, MastraAssistantResizeOptions, MastraAssistantLauncherOptions, MastraAssistantController, MastraAssistantProps } from "./src/react/mastra-assistant.tsx";
 export { useMastraChat, MastraChat } from "./src/react/mastra-chat.tsx";
 export type { UseMastraChatOptions, MastraChatProps } from "./src/react/mastra-chat.tsx";
 export { SuggestionPills } from "./src/react/suggestion-pills.tsx";
@@ -60,17 +61,17 @@ export type { SuggestionPillsProps } from "./src/react/suggestion-pills.tsx";
 export { dedupeSuggestions, collectSuggestions } from "./src/react/suggestions.ts";
 export { ThreadSidebar } from "./src/react/thread-sidebar.tsx";
 export type { ThreadSidebarProps } from "./src/react/thread-sidebar.tsx";
-export { ThreadTabs } from "./src/react/thread-tabs.tsx";
-export type { ThreadTabsProps } from "./src/react/thread-tabs.tsx";
+export { ThreadActions, ThreadTabs } from "./src/react/thread-tabs.tsx";
+export type { ThreadTabsProps, ThreadActionsProps } from "./src/react/thread-tabs.tsx";
 export { humanizeToolName, ToolSessionPill } from "./src/react/tool-pill.tsx";
 export type { ChatStatus, ToolEvent, ToolProgress, ChatModelOption, QueuedSteer, FeedbackValue, FeedbackSubmission, MessageFeedback, ThreadSummary, ThreadPlacement, ChatViewProps, ApprovalDecision, PendingApproval } from "./src/react/types.ts";
 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 type { ByIdFetchState } from "./src/support/mastra-client.ts";
-export type { MastraStreamResponse } from "./src/support/mastra-stream.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";
 export { DEFAULT_THREAD_SESSION_KEY } from "./src/support/thread-sessions.ts";
-export type { ThreadSession } from "./src/support/thread-sessions.ts";
+export type { SessionQueuedSteer, ThreadSession } from "./src/support/thread-sessions.ts";
 export { THREAD_TAB_SEED_MAX } from "./src/support/thread-tabs.ts";

package/package.json

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

package/src/react/bubbles.tsx

@@ -41,6 +41,7 @@ import type {
   ToolEvent,
 } from "./types.ts";
 import { copyText } from "../support/clipboard.ts";
+import { mergeToolEvents, toolEventsFromParts } from "../support/tool-events.ts";
 
 // User / assistant message bubbles plus the inline approval card and
 // the helpers that surface approval-gated tool calls out of a message's
@@ -374,6 +375,7 @@ export const AssistantBubble = ({
     collectPendingApprovals(message.parts),
     externalApprovals,
   );
+  const toolEvents = mergeToolEvents(toolEventsFromParts(message.parts), events);
 
   return (
     <Item className="items-start gap-3 border-none bg-transparent p-0">
@@ -394,7 +396,7 @@ export const AssistantBubble = ({
          * pill above the text parts guarantees the "what the agent did"
          * summary always sits before its resulting charts and answer.
          */}
-        {events && events.length > 0 && <ToolSessionPill events={events} />}
+        {toolEvents.length > 0 && <ToolSessionPill events={toolEvents} />}
         {reasoning && (
           <Collapsible defaultOpen={isReasoningStreaming}>
             <CollapsibleTrigger className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground">
@@ -444,6 +446,7 @@ export const AssistantBubble = ({
                     variant="ghost"
                     className="size-7"
                     onClick={() => regenerate()}
+                    aria-label="Retry response"
                   >
                     <RefreshCcwIcon className="size-3" />
                   </Button>

package/src/react/chat-approvals.ts

@@ -1,10 +1,9 @@
 import { log } from "@dbx-tools/shared-core";
 import { useCallback } from "react";
-import type { MastraPluginClient } from "../support/mastra-client.ts";
-import type { MastraStreamResponse } from "../support/mastra-stream.ts";
-import { DEFAULT_THREAD_SESSION_KEY } from "../support/thread-sessions.ts";
 import type { ThreadSessionReader, ThreadSessionUpdater } from "./chat-sessions.ts";
 import type { ApprovalDecision } from "./types.ts";
+import type { MastraPluginClient, MastraStreamResponse } from "../support/mastra-client.ts";
+import { DEFAULT_THREAD_SESSION_KEY } from "../support/thread-sessions.ts";
 
 const logger = log.logger("ui-mastra/chat");
 
@@ -36,7 +35,10 @@ export function useChatApprovals({
     async (decision: ApprovalDecision) => {
       const { runId: decisionRunId, toolCallId, toolName } = decision;
       const session = getSession(activeKey);
-      const assistantId = session.assistantId;
+      const assistantId =
+        Object.entries(session.pendingApprovalsByMessage).find(([, approvals]) =>
+          approvals.some((approval) => approval.toolCallId === toolCallId),
+        )?.[0] ?? session.assistantId;
       const runId = decisionRunId ?? session.runId;
       if (!runId || !assistantId) {
         logger.warn("approval missing runId or assistantId, cannot resume", {
@@ -77,12 +79,15 @@ export function useChatApprovals({
               runId,
               toolCallId,
               threadId: streamThreadId,
+              requestContext: session.runRequestContext,
               signal,
             })
           : mastraClient.declineToolCallStream(agentId, {
               runId,
               toolCallId,
               threadId: streamThreadId,
+              reason: decision.reason,
+              requestContext: session.runRequestContext,
               signal,
             }),
       );

package/src/react/chat-composer.tsx

@@ -31,7 +31,7 @@ import {
   Trash2Icon,
   XIcon,
 } from "lucide-react";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useId, useLayoutEffect, useRef, useState } from "react";
 import { autosizeComposerTextarea, observeComposerWidth } from "./_composer-autosize.ts";
 import { ExportMenu } from "./export-menu.tsx";
 import { SuggestionPills } from "./suggestion-pills.tsx";
@@ -251,6 +251,7 @@ type ChatComposerProps = {
   onModelChange: ChatViewProps["onModelChange"];
   defaultModelName: ChatViewProps["defaultModelName"];
   composerActions: ChatViewProps["composerActions"];
+  composerLeadingActions: ChatViewProps["composerLeadingActions"];
   isLoadingHistory: NonNullable<ChatViewProps["isLoadingHistory"]>;
   onClear: ChatViewProps["onClear"];
   onExportConversation: ChatViewProps["onExportConversation"];
@@ -273,12 +274,14 @@ export const ChatComposer = ({
   onModelChange,
   defaultModelName,
   composerActions,
+  composerLeadingActions,
   isLoadingHistory,
   onClear,
   onExportConversation,
   onResumeFollow,
 }: ChatComposerProps) => {
   const [input, setInput] = useState("");
+  const inputId = useId();
   const inputGroupRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -316,12 +319,6 @@ export const ChatComposer = ({
       sensitivity: "base",
     }),
   );
-  const showToolbar =
-    showModelDisplay ||
-    Boolean(composerActions) ||
-    Boolean(onExportConversation) ||
-    Boolean(onClear);
-
   return (
     <>
       {isEmpty && (
@@ -350,6 +347,8 @@ export const ChatComposer = ({
           className="rounded-2xl border-border/80 shadow-sm transition-shadow focus-within:shadow-md"
         >
           <InputGroupTextarea
+            id={`${inputId}-message`}
+            name="message"
             ref={textareaRef}
             value={input}
             onChange={(event) => setInput(event.target.value)}
@@ -362,76 +361,84 @@ export const ChatComposer = ({
             placeholder={isLoadingHistory ? "Loading history..." : "Send a message..."}
             rows={1}
             disabled={isLoadingHistory}
-            className="field-sizing-fixed max-h-48 overflow-y-auto text-base md:text-sm"
+            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"
           />
-          <InputGroupAddon align="inline-end">
-            {isRunning && onStop && !input.trim() ? (
-              <InputGroupButton
-                type="button"
-                size="icon-sm"
-                variant="default"
-                onClick={() => onStop()}
-                aria-label="Stop response"
-              >
-                <SquareIcon className="size-3 fill-current" />
-              </InputGroupButton>
-            ) : (
-              <InputGroupButton
-                type="submit"
-                size="icon-sm"
-                variant="default"
-                disabled={!input.trim() || isLoadingHistory}
-                aria-label={isRunning ? "Send now (interrupts)" : "Send message"}
-              >
-                <SendIcon className="size-3" />
-              </InputGroupButton>
-            )}
-          </InputGroupAddon>
-        </InputGroup>
-        {showToolbar && (
-          <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
-            {showModelDisplay &&
-              (modelChangeable ? (
-                <Select
-                  value={model ? model : DEFAULT_MODEL_VALUE}
-                  onValueChange={(value) =>
-                    onModelChange?.(value === DEFAULT_MODEL_VALUE ? "" : value)
-                  }
+          <InputGroupAddon
+            align="block-end"
+            className="flex w-full flex-row flex-wrap items-center justify-between gap-2 px-3 pb-3 pt-0"
+          >
+            <div className="flex min-w-0 max-w-full flex-wrap items-center gap-2">
+              {composerLeadingActions}
+              {onExportConversation && (
+                <ExportMenu
+                  onExport={(format) => void onExportConversation(format)}
+                  tooltip="Export conversation"
                   disabled={isLoadingHistory}
-                >
-                  <SelectTrigger
-                    size="sm"
-                    className="h-7 w-auto max-w-[200px] gap-1 rounded-full px-2.5 text-xs [&_svg]:size-3"
+                />
+              )}
+              {onClear && (
+                <ClearConversationAction onClear={onClear} isLoadingHistory={isLoadingHistory} />
+              )}
+            </div>
+            <div className="ml-auto flex min-w-0 max-w-full items-center gap-1.5">
+              {composerActions}
+              {showModelDisplay &&
+                (modelChangeable ? (
+                  <Select
+                    name="mastra-model"
+                    value={model ? model : DEFAULT_MODEL_VALUE}
+                    onValueChange={(value) =>
+                      onModelChange?.(value === DEFAULT_MODEL_VALUE ? "" : value)
+                    }
+                    disabled={isLoadingHistory}
                   >
-                    <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>
+                    <SelectTrigger
+                      size="sm"
+                      aria-label="Model"
+                      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"
+                    >
+                      <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>
+                ) : (
+                  <span className="max-w-[180px] truncate px-2 text-xs text-muted-foreground">
+                    {currentModelLabel}
+                  </span>
+                ))}
+              {isRunning && onStop && !input.trim() ? (
+                <InputGroupButton
+                  type="button"
+                  size="icon-sm"
+                  variant="default"
+                  onClick={() => onStop()}
+                  aria-label="Stop response"
+                  className="shrink-0 rounded-full"
+                >
+                  <SquareIcon className="size-3 fill-current" />
+                </InputGroupButton>
               ) : (
-                <span className="max-w-[200px] truncate px-2.5 text-xs text-muted-foreground">
-                  {currentModelLabel}
-                </span>
-              ))}
-            {composerActions}
-            {onExportConversation && (
-              <ExportMenu
-                onExport={(format) => void onExportConversation(format)}
-                tooltip="Export conversation"
-                disabled={isLoadingHistory}
-              />
-            )}
-            {onClear && (
-              <ClearConversationAction onClear={onClear} isLoadingHistory={isLoadingHistory} />
-            )}
-          </div>
-        )}
+                <InputGroupButton
+                  type="submit"
+                  size="icon-sm"
+                  variant="default"
+                  disabled={!input.trim() || isLoadingHistory}
+                  aria-label={isRunning ? "Send now (interrupts)" : "Send message"}
+                  className="shrink-0 rounded-full"
+                >
+                  <SendIcon className="size-3" />
+                </InputGroupButton>
+              )}
+            </div>
+          </InputGroupAddon>
+        </InputGroup>
       </form>
     </>
   );

package/src/react/chat-feedback.ts

@@ -1,9 +1,9 @@
 import { error as sharedError, log } from "@dbx-tools/shared-core";
 import type { UIMessage } from "ai";
 import { useCallback, useRef } from "react";
-import type { MastraPluginClient } from "../support/mastra-client.ts";
-import type { FeedbackSubmission, MessageFeedback } from "./types.ts";
 import type { ThreadSessionUpdater } from "./chat-sessions.ts";
+import type { FeedbackSubmission, MessageFeedback } from "./types.ts";
+import type { MastraPluginClient } from "../support/mastra-client.ts";
 
 const logger = log.logger("ui-mastra/chat");