@dbx-tools/ui-mastra 0.9.112 → 0.9.117

package/index.ts

@@ -3,7 +3,7 @@
 // Hand edits are overwritten on the next watch; this file is read-only.
 
 export const PACKAGE_IDENTIFIER = "@dbx-tools/ui-mastra";
-export const PACKAGE_VERSION = "0.9.112";
+export const PACKAGE_VERSION = "0.9.117";
 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";
@@ -64,7 +64,7 @@ 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 { ToolInputPresentation, WebSearchProgressGroup } 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 type { ChatStatus, ToolEvent, ToolProgress, ChatModelOption, ChatInputMessage, 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";

package/package.json

@@ -29,11 +29,11 @@
     "react-dom": "~19.2.4"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "^0.9.112",
-    "@dbx-tools/shared-genie": "^0.9.112",
-    "@dbx-tools/shared-mastra": "^0.9.112",
-    "@dbx-tools/shared-model": "^0.9.112",
-    "@dbx-tools/ui": "^0.9.112",
+    "@dbx-tools/shared-core": "^0.9.117",
+    "@dbx-tools/shared-genie": "^0.9.117",
+    "@dbx-tools/shared-mastra": "^0.9.117",
+    "@dbx-tools/shared-model": "^0.9.117",
+    "@dbx-tools/ui": "^0.9.117",
     "@mastra/client-js": "1.50.0",
     "@mastra/core": "1.71.0",
     "@tanstack/react-table": "^8.21.3",
@@ -49,7 +49,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.9.112",
+  "version": "0.9.117",
   "dbxToolsConfig": {
     "tags": [
       "ui"
@@ -59,6 +59,7 @@
   "exports": {
     "./react": "./src/react/index.ts",
     "./styles.css": "./src/styles.css",
+    "./*": "./src/*/index.ts",
     "./package.json": "./package.json"
   },
   "files": [

package/src/react/_image-attachments.ts

@@ -0,0 +1,112 @@
+import type { FileUIPart } from "ai";
+
+export const MAX_COMPOSER_IMAGES = 4;
+export const MAX_COMPOSER_IMAGE_BYTES = 4 * 1024 * 1024;
+export const MAX_COMPOSER_IMAGE_EDGE = 2048;
+
+type ImageDimensions = {
+  width: number;
+  height: number;
+};
+
+/** Fit image dimensions within a maximum edge while preserving aspect ratio. */
+export function fitImageDimensions(
+  width: number,
+  height: number,
+  maxEdge = MAX_COMPOSER_IMAGE_EDGE,
+): ImageDimensions {
+  if (width <= maxEdge && height <= maxEdge) return { width, height };
+  const scale = maxEdge / Math.max(width, height);
+  return {
+    width: Math.max(1, Math.round(width * scale)),
+    height: Math.max(1, Math.round(height * scale)),
+  };
+}
+
+function dataUrlForBlob(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(reader.error ?? new Error("Unable to read image"));
+    reader.onload = () => resolve(String(reader.result));
+    reader.readAsDataURL(blob);
+  });
+}
+
+function loadImage(file: File): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(file);
+    const image = new Image();
+    image.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve(image);
+    };
+    image.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error(`Unable to decode ${file.name || "image"}`));
+    };
+    image.src = url;
+  });
+}
+
+function canvasBlob(canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => (blob ? resolve(blob) : reject(new Error("Unable to resize image"))),
+      type,
+      quality,
+    );
+  });
+}
+
+function resizedFilename(filename: string, mediaType: string): string {
+  const extension = mediaType === "image/webp" ? "webp" : mediaType === "image/png" ? "png" : "jpg";
+  const stem = filename.replace(/\.[^.]+$/, "") || "image";
+  return `${stem}.${extension}`;
+}
+
+async function shrinkImage(
+  file: File,
+  maxBytes: number,
+): Promise<{ blob: Blob; filename: string }> {
+  const image = await loadImage(file);
+  const fitted = fitImageDimensions(image.naturalWidth, image.naturalHeight);
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Image resizing is unavailable in this browser");
+
+  let smallest: Blob | undefined;
+  for (let attempt = 0; attempt < 8; attempt += 1) {
+    const scale = 0.82 ** Math.floor(attempt / 2);
+    canvas.width = Math.max(1, Math.round(fitted.width * scale));
+    canvas.height = Math.max(1, Math.round(fitted.height * scale));
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    const quality = attempt % 2 === 0 ? 0.84 : 0.66;
+    const blob = await canvasBlob(canvas, "image/webp", quality);
+    if (!smallest || blob.size < smallest.size) smallest = blob;
+    if (blob.size <= maxBytes) {
+      return { blob, filename: resizedFilename(file.name, blob.type) };
+    }
+  }
+
+  if (!smallest || smallest.size > maxBytes) {
+    throw new Error(`${file.name || "Image"} could not be reduced below 4 MB`);
+  }
+  return { blob: smallest, filename: resizedFilename(file.name, smallest.type) };
+}
+
+/** Convert an image file to the native AI SDK file part, shrinking oversized images first. */
+export async function imageFileToUIPart(
+  file: File,
+  maxBytes = MAX_COMPOSER_IMAGE_BYTES,
+): Promise<FileUIPart> {
+  if (!file.type.startsWith("image/")) throw new Error(`${file.name || "File"} is not an image`);
+  const prepared =
+    file.size > maxBytes ? await shrinkImage(file, maxBytes) : { blob: file, filename: file.name };
+  return {
+    type: "file",
+    mediaType: prepared.blob.type || file.type,
+    filename: prepared.filename || "image",
+    url: await dataUrlForBlob(prepared.blob),
+  };
+}

package/src/react/_model-selector.tsx

@@ -16,6 +16,7 @@ import {
   DropdownMenuTrigger,
   Slider,
   Spinner,
+  useIsMobile,
 } from "@dbx-tools/ui/react";
 import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { useMemo, useState, type ReactNode } from "react";
@@ -185,6 +186,7 @@ export const ModelSelector = ({
   onModelChange,
   actions,
 }: ModelSelectorProps) => {
+  const isMobile = useIsMobile();
   const [open, setOpen] = useState(false);
   const [modelPickerOpen, setModelPickerOpen] = useState(false);
   const [activeFamily, setActiveFamily] = useState<string>();
@@ -242,50 +244,102 @@ export const ModelSelector = ({
           )}
         </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 ? (
+      <DropdownMenuContent
+        align="end"
+        collisionPadding={8}
+        className="w-48 max-w-[calc(100vw_-_1rem)]"
+      >
+        {isMobile && modelPickerOpen ? (
+          <>
+            {!activeFamily && (
               <>
-                <Spinner className="size-3 shrink-0" />
-                <span className="sr-only">Loading default model</span>
+                <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={() => setModelPickerOpen(false)}
+                >
+                  <ChevronLeftIcon className="size-3" />
+                  Options
+                </button>
+                <DropdownMenuSeparator />
               </>
+            )}
+            <FamilyPicker
+              families={families}
+              selectedModelId={selectedModelId}
+              model={model}
+              defaultModelName={defaultModelName}
+              showLoading={showLoading}
+              activeFamily={activeFamily}
+              onActiveFamilyChange={setActiveFamily}
+              onModelChange={onModelChange}
+            />
+          </>
+        ) : (
+          <>
+            {isMobile ? (
+              <button
+                type="button"
+                className="mx-1 flex w-[calc(100%_-_0.5rem)] items-center rounded-lg bg-accent/60 px-3 py-2 text-xs font-medium outline-none hover:bg-accent focus-visible:bg-accent"
+                onClick={() => setModelPickerOpen(true)}
+              >
+                {showLoading ? (
+                  <>
+                    <Spinner className="size-3 shrink-0" />
+                    <span className="sr-only">Loading default model</span>
+                  </>
+                ) : (
+                  <span className="truncate">{triggerLabel}</span>
+                )}
+                <ChevronRightIcon className="ml-auto size-3 shrink-0 text-muted-foreground" />
+              </button>
             ) : (
-              triggerLabel
+              <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 collisionPadding={8} 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 />
             )}
-          </DropdownMenuSubTrigger>
-          <DropdownMenuPortal>
-            <DropdownMenuSubContent className="w-48">
-              <FamilyPicker
-                families={families}
-                selectedModelId={selectedModelId}
-                model={model}
-                defaultModelName={defaultModelName}
-                showLoading={showLoading}
-                activeFamily={activeFamily}
-                onActiveFamilyChange={setActiveFamily}
-                onModelChange={onModelChange}
+            {actions && <div className="px-1">{actions}</div>}
+            {reasoningEfforts.length > 0 && onReasoningEffortChange && (
+              <ReasoningControl
+                efforts={reasoningEfforts}
+                value={reasoningEffort}
+                onChange={onReasoningEffortChange}
               />
-            </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/bubbles.tsx

@@ -12,6 +12,7 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
+  cn,
 } from "@dbx-tools/ui/react";
 import type { UIMessage } from "ai";
 import {
@@ -21,7 +22,6 @@ import {
   CopyIcon,
   MessageSquareIcon,
   RefreshCcwIcon,
-  SparklesIcon,
   UserIcon,
   XIcon,
 } from "lucide-react";
@@ -59,12 +59,12 @@ const getReasoningText = (parts: UIMessage["parts"]): string =>
     .filter((p): p is { type: "reasoning"; text: string } => p.type === "reasoning")
     .map((p) => compactReasoningText(p.text))
     .filter(Boolean)
-    .join("\n\n");
+    .join("\n");
 
-const RoleAvatar = ({ role }: { role: UIMessage["role"] }) => (
+const UserAvatar = () => (
   <Avatar className="size-7">
     <AvatarFallback>
-      {role === "assistant" ? <SparklesIcon className="size-4" /> : <UserIcon className="size-4" />}
+      <UserIcon className="size-4" />
     </AvatarFallback>
   </Avatar>
 );
@@ -192,7 +192,7 @@ const ToolApprovalCard = ({
       {asEmailInput(input) ? (
         <EmailApprovalPreview email={asEmailInput(input)!} />
       ) : (
-        <RecordPreview value={input} className="max-h-80 rounded bg-background/40" />
+        <RecordPreview value={input} className="rounded bg-background/40" />
       )}
       {expired ? (
         <div className="mt-3 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
@@ -362,7 +362,7 @@ export const AssistantBubble = ({
   const toolEvents = mergeToolEvents(toolEventsFromParts(message.parts), events, terminalToolState);
   const reasoning = [getReasoningText(message.parts), genieReasoningText(toolEvents)]
     .filter(Boolean)
-    .join("\n\n");
+    .join("\n");
   const isReasoningStreaming =
     isLast &&
     status === "streaming" &&
@@ -404,10 +404,7 @@ export const AssistantBubble = ({
   // nothing so the prose flows unaffected. Suggested questions
   // stay gated on settle to avoid pop-in mid-stream.
   return (
-    <Item className="items-start gap-2.5 border-none bg-transparent p-0">
-      <ItemMedia>
-        <RoleAvatar role="assistant" />
-      </ItemMedia>
+    <Item className="items-start gap-0 border-none bg-transparent p-0">
       {/*
        * `min-w-0` is required so wide content (markdown tables, long
        * code blocks) can shrink to fit instead of pushing the whole
@@ -431,7 +428,7 @@ export const AssistantBubble = ({
             </CollapsibleTrigger>
             <CollapsibleContent>
               <div className="mt-1 border-l-2 border-border/60 pl-2.5 text-xs text-muted-foreground">
-                <ToolMarkdown>{reasoning}</ToolMarkdown>
+                <ToolMarkdown className="prose-p:my-0 [&_p]:!my-0">{reasoning}</ToolMarkdown>
               </div>
             </CollapsibleContent>
           </Collapsible>
@@ -535,14 +532,31 @@ export const UserBubble = ({ message }: { message: UIMessage }) => {
     .filter((p): p is { type: "text"; text: string } => p.type === "text")
     .map((p) => p.text)
     .join("");
+  const files = message.parts.filter((part) => part.type === "file");
   return (
     <Item className="items-start gap-2.5 border-none bg-transparent p-0">
       <ItemMedia>
-        <RoleAvatar role="user" />
+        <UserAvatar />
       </ItemMedia>
       <ItemContent className="min-w-0">
-        <div className="rounded-lg bg-muted px-3 py-2 text-sm whitespace-pre-wrap break-words">
-          {text}
+        <div className="max-w-full rounded-lg bg-muted p-2 text-sm">
+          {files.length > 0 && (
+            <div className={cn("grid gap-1.5", files.length > 1 && "grid-cols-2")}>
+              {files.map((file, index) => (
+                <img
+                  key={`${file.filename ?? "image"}-${index}`}
+                  src={file.url}
+                  alt={file.filename || "Attached image"}
+                  className="max-h-64 max-w-full rounded-md object-contain"
+                />
+              ))}
+            </div>
+          )}
+          {text && (
+            <div className={cn("whitespace-pre-wrap break-words px-1", files.length > 0 && "pt-2")}>
+              {text}
+            </div>
+          )}
         </div>
       </ItemContent>
     </Item>

package/src/react/chat-composer.tsx

@@ -18,8 +18,10 @@ import {
   TooltipTrigger,
   cn,
 } from "@dbx-tools/ui/react";
+import type { FileUIPart } from "ai";
 import {
   GripVerticalIcon,
+  ImagePlusIcon,
   SendHorizontalIcon,
   SendIcon,
   SquareIcon,
@@ -28,6 +30,7 @@ import {
 } from "lucide-react";
 import { useCallback, useId, useLayoutEffect, useRef, useState } from "react";
 import { autosizeComposerTextarea, observeComposerWidth } from "./_composer-autosize.ts";
+import { imageFileToUIPart, MAX_COMPOSER_IMAGES } from "./_image-attachments.ts";
 import { ModelSelector } from "./_model-selector.tsx";
 import { ExportMenu } from "./export-menu.tsx";
 import { SuggestionPills } from "./suggestion-pills.tsx";
@@ -123,7 +126,9 @@ const QueuedSteerList = ({
               </span>
             )}
             <span className="text-muted-foreground">Queued</span>
-            <span className="min-w-0 flex-1 truncate">{steer.text}</span>
+            <span className="min-w-0 flex-1 truncate">
+              {steer.text || steer.files?.map((file) => file.filename || "Image").join(", ")}
+            </span>
             {onSendSteerNow && (
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -192,13 +197,13 @@ const ClearConversationAction = ({ onClear, isLoadingHistory }: ClearConversatio
           <Button
             type="button"
             variant="outline"
-            size="sm"
+            size="icon"
             onClick={() => setOpen(true)}
             disabled={isLoadingHistory}
-            className="h-7 gap-1 rounded-full px-2.5 text-xs [&_svg]:size-3"
+            className="size-7 rounded-full [&_svg]:size-3"
+            aria-label="Clear conversation"
           >
             <Trash2Icon className="size-3" />
-            Clear
           </Button>
         </TooltipTrigger>
         <TooltipContent>Clear chat history for this thread</TooltipContent>
@@ -285,7 +290,11 @@ export const ChatComposer = ({
   onResumeFollow,
 }: ChatComposerProps) => {
   const [input, setInput] = useState("");
+  const [files, setFiles] = useState<FileUIPart[]>([]);
+  const [fileError, setFileError] = useState<string | null>(null);
+  const [isPreparingFiles, setIsPreparingFiles] = useState(false);
   const inputId = useId();
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const inputGroupRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -304,14 +313,44 @@ export const ChatComposer = ({
   }, [resizeTextarea]);
 
   const isRunning = status === "submitted" || status === "streaming";
+  const hasDraft = Boolean(input.trim() || files.length > 0);
   const submit = () => {
     const text = input.trim();
-    if (!text || isLoadingHistory) return;
-    sendMessage({ text });
+    if ((!text && files.length === 0) || isLoadingHistory || isPreparingFiles) return;
+    sendMessage({ ...(text ? { text } : {}), ...(files.length > 0 ? { files } : {}) });
     setInput("");
+    setFiles([]);
+    setFileError(null);
     onResumeFollow();
   };
 
+  const addFiles = async (selected: FileList | null) => {
+    if (!selected?.length) return;
+    const remaining = MAX_COMPOSER_IMAGES - files.length;
+    if (remaining <= 0) {
+      setFileError(`You can attach up to ${MAX_COMPOSER_IMAGES} images`);
+      return;
+    }
+    setIsPreparingFiles(true);
+    setFileError(null);
+    try {
+      const next = await Promise.all(
+        Array.from(selected)
+          .slice(0, remaining)
+          .map((file) => imageFileToUIPart(file)),
+      );
+      setFiles((current) => [...current, ...next]);
+      if (selected.length > remaining) {
+        setFileError(`Only the first ${remaining} images were added`);
+      }
+    } catch (error) {
+      setFileError(error instanceof Error ? error.message : "Unable to attach image");
+    } finally {
+      setIsPreparingFiles(false);
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    }
+  };
+
   const modelChangeable = Boolean(models && models.length > 0);
   return (
     <>
@@ -339,6 +378,37 @@ export const ChatComposer = ({
           ref={inputGroupRef}
           className="rounded-2xl border-border/80 shadow-sm transition-shadow focus-within:shadow-md"
         >
+          {files.length > 0 && (
+            <InputGroupAddon
+              align="block-start"
+              className="max-w-full justify-start gap-2 overflow-x-auto pb-0"
+            >
+              {files.map((file, index) => (
+                <div
+                  key={`${file.filename ?? "image"}-${index}`}
+                  className="group relative size-20 shrink-0 overflow-hidden rounded-xl border border-border bg-muted"
+                >
+                  <img
+                    src={file.url}
+                    alt={file.filename || "Attached image"}
+                    className="size-full object-cover"
+                  />
+                  <Button
+                    type="button"
+                    size="icon"
+                    variant="secondary"
+                    className="absolute right-0.5 top-0.5 size-5 rounded-full opacity-90"
+                    onClick={() =>
+                      setFiles((current) => current.filter((_, item) => item !== index))
+                    }
+                    aria-label={`Remove ${file.filename || "image"}`}
+                  >
+                    <XIcon className="size-3" />
+                  </Button>
+                </div>
+              ))}
+            </InputGroupAddon>
+          )}
           <InputGroupTextarea
             id={`${inputId}-message`}
             name="message"
@@ -355,15 +425,51 @@ export const ChatComposer = ({
             rows={1}
             className="field-sizing-fixed min-h-10 max-h-64 w-full flex-none overflow-y-auto px-4 pb-2 pt-4 text-base md:text-xs"
           />
+          {fileError && (
+            <div className="px-4 text-xs text-destructive" role="alert">
+              {fileError}
+            </div>
+          )}
           <InputGroupAddon
             align="block-end"
             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">
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                multiple
+                className="sr-only"
+                onChange={(event) => void addFiles(event.currentTarget.files)}
+              />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    className="size-7 rounded-full [&_svg]:size-3"
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={
+                      isLoadingHistory || isPreparingFiles || files.length >= MAX_COMPOSER_IMAGES
+                    }
+                    aria-label="Upload images"
+                  >
+                    {isPreparingFiles ? (
+                      <Spinner className="size-3" />
+                    ) : (
+                      <ImagePlusIcon className="size-3" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Upload images</TooltipContent>
+              </Tooltip>
               {composerLeadingActions}
               {onExportConversation && (
                 <ExportMenu
                   onExport={(format) => void onExportConversation(format)}
+                  iconOnly
                   tooltip="Export conversation"
                   disabled={isLoadingHistory}
                 />
@@ -399,7 +505,7 @@ export const ChatComposer = ({
                     )}
                   </span>
                 ))}
-              {isRunning && onStop && !input.trim() ? (
+              {isRunning && onStop && !hasDraft ? (
                 <InputGroupButton
                   type="button"
                   size="icon-sm"
@@ -415,7 +521,7 @@ export const ChatComposer = ({
                   type="submit"
                   size="icon-sm"
                   variant="default"
-                  disabled={!input.trim() || isLoadingHistory}
+                  disabled={!hasDraft || isLoadingHistory || isPreparingFiles}
                   aria-label={isRunning ? "Queue message" : "Send message"}
                   className="shrink-0 rounded-full"
                 >

package/src/react/chat-transcript.tsx

@@ -188,12 +188,7 @@ export const ChatTranscript = ({
         (part.type === "text" || part.type === "reasoning") &&
         Boolean((part as { text?: string }).text),
     ) || (lastEvents?.length ?? 0) > 0;
-  const hasRunningTool = (lastEvents ?? []).some((event) => event.status === "running");
-  const waitingLabel = !lastAssistantHasContent
-    ? "Thinking..."
-    : hasRunningTool
-      ? "Working..."
-      : "Composing response...";
+  const showWaitingIndicator = isRunning && !lastAssistantHasContent;
 
   return (
     <div className="relative flex flex-1 flex-col overflow-hidden">
@@ -259,10 +254,10 @@ export const ChatTranscript = ({
               }
               return <UserBubble key={message.id} message={message} />;
             })}
-            {isRunning && (
+            {showWaitingIndicator && (
               <div className="flex h-7 items-center gap-2 px-3 text-xs text-muted-foreground">
                 <Spinner className="size-3" />
-                <span className="animate-pulse">{waitingLabel}</span>
+                <span className="animate-pulse">Thinking...</span>
               </div>
             )}
             {status === "error" && (

package/src/react/index.ts

@@ -52,6 +52,7 @@ export { ThreadActions, ThreadTabs } from "./thread-tabs.tsx";
 export type { ThreadActionsProps, ThreadTabsProps } from "./thread-tabs.tsx";
 export type {
   ApprovalDecision,
+  ChatInputMessage,
   ChatModelOption,
   ChatStatus,
   ChatViewProps,

package/src/react/markdown.tsx

@@ -264,7 +264,7 @@ export const AssistantMarkdown = ({
  * (bold) gets the foreground color so KPI names still pop against
  * the muted body.
  */
-export const ToolMarkdown = ({ children }: { children: string }) => (
+export const ToolMarkdown = ({ children, className }: { children: string; className?: string }) => (
   <Streamdown
     components={TOOL_MARKDOWN_COMPONENTS}
     plugins={SHIKI_PLUGIN}
@@ -272,12 +272,13 @@ export const ToolMarkdown = ({ children }: { children: string }) => (
     className={cn(
       "prose prose-sm dark:prose-invert max-w-none break-words",
       "text-xs leading-snug text-muted-foreground",
-      "prose-p:my-0.5 prose-p:leading-snug",
+      "prose-p:my-0.5 prose-p:leading-snug [&_p]:!leading-snug",
       "prose-ul:my-0.5 prose-ul:pl-4 prose-ol:my-0.5 prose-ol:pl-4",
       "prose-li:my-0 prose-li:leading-snug prose-li:marker:text-muted-foreground/60",
       "prose-headings:my-1 prose-headings:text-xs prose-headings:font-semibold",
       "prose-strong:text-foreground/90 prose-strong:font-medium",
       "prose-code:text-xs prose-code:font-medium",
+      className,
     )}
   >
     {children}

package/src/react/mastra-chat.tsx

@@ -2,7 +2,7 @@ import { errorUtils, hash, log } from "@dbx-tools/shared-core";
 import { isStaleMastraResumeError } from "@dbx-tools/shared-mastra/resume";
 import type { ReasoningEffort } from "@dbx-tools/shared-model";
 import { useBrand } from "@dbx-tools/ui/branding/react";
-import type { UIMessage } from "ai";
+import type { FileUIPart, UIMessage } from "ai";
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useChatApprovals } from "./chat-approvals.ts";
 import { useChatFeedback } from "./chat-feedback.ts";
@@ -66,10 +66,10 @@ const EMPTY_REASONING_EFFORTS: readonly ReasoningEffort[] = [];
 
 const logger = log.logger("ui-mastra/chat");
 
-const makeUserMessage = (text: string): UIMessage => ({
+const makeUserMessage = (text: string, files: FileUIPart[] = []): UIMessage => ({
   id: hash.id(),
   role: "user",
-  parts: [{ type: "text", text }],
+  parts: [...files, ...(text ? [{ type: "text" as const, text }] : [])],
 });
 
 /** Project a native Mastra memory thread down to the sidebar's view. */
@@ -610,7 +610,7 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
       ...session,
       queuedSteers: removeSteerFromQueue(session.queuedSteers, head.id),
     }));
-    const { message } = appendUserMessage(threadId, head.text);
+    const { message } = appendUserMessage(threadId, head.text ?? "", head.files);
     void runStream(threadId, message, head.requestContext);
   };
 
@@ -666,11 +666,17 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
   // Append a user message to a thread's transcript, update thread activity,
   // and derive a provisional title for a brand-new thread.
   const appendUserMessage = useCallback(
-    (threadId: string, text: string): { message: UIMessage; next: UIMessage[] } => {
+    (
+      threadId: string,
+      text: string,
+      files: FileUIPart[] = [],
+    ): { message: UIMessage; next: UIMessage[] } => {
       if (activeThreadId) {
         noteThreadActivity(activeThreadId);
         if (getSession(threadId).messages.length === 0) {
-          const provisional = deriveThreadTitle(text);
+          const provisional = deriveThreadTitle(
+            text || files.map((file) => file.filename || "Image").join(", "),
+          );
           if (provisional) {
             setProvisionalTitles((prev) =>
               prev[activeThreadId] ? prev : { ...prev, [activeThreadId]: provisional },
@@ -679,7 +685,7 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
         }
       }
       const session = getSession(threadId);
-      const message = makeUserMessage(text);
+      const message = makeUserMessage(text, files);
       const next = [...session.messages, message];
       writeMessages(threadId, next);
       return { message, next };
@@ -694,7 +700,8 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
   const sendMessage = useCallback<ChatViewProps["sendMessage"]>(
     (message) => {
       const text = message.text ?? "";
-      if (!text) return;
+      const files = message.files ?? [];
+      if (!text && files.length === 0) return;
       const threadId = activeKey;
       const requestContext = snapshotRequestContext(requestContextRef.current);
       if (isSessionRunning(getSession(threadId))) {
@@ -703,12 +710,13 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
           queuedSteers: enqueueSteer(session.queuedSteers, {
             id: hash.id(),
             text,
+            ...(files.length > 0 ? { files } : {}),
             ...(requestContext ? { requestContext } : {}),
           }),
         }));
         return;
       }
-      const { message: userMessage } = appendUserMessage(threadId, text);
+      const { message: userMessage } = appendUserMessage(threadId, text, files);
       void runStream(threadId, userMessage, requestContext);
     },
     [appendUserMessage, runStream, activeKey, getSession, updateSession],
@@ -728,7 +736,7 @@ export const useMastraChat = <TValues extends Record<string, unknown> = Record<s
         queuedSteers: removeSteerFromQueue(session.queuedSteers, steerId),
       }));
       logger.info("steer:send-now", { threadId });
-      const { message } = appendUserMessage(threadId, steer.text);
+      const { message } = appendUserMessage(threadId, steer.text ?? "", steer.files);
       void runStream(threadId, message, steer.requestContext);
     },
     [activeKey, appendUserMessage, getSession, runStream, updateSession],

package/src/react/tool-pill.tsx

@@ -1,16 +1,17 @@
-import { stringUtils } from "@dbx-tools/shared-core";
+import { json, stringUtils } from "@dbx-tools/shared-core";
 import { genieModel } from "@dbx-tools/shared-genie";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
+  detectCodeLanguage,
   JsonBlock,
   RecordPreview,
   Spinner,
   cn,
 } from "@dbx-tools/ui/react";
 import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
-import { SourceBlock, SqlBlock, ToolMarkdown } from "./markdown.tsx";
+import { SourceBlock, ToolMarkdown } from "./markdown.tsx";
 import type { ToolEvent, ToolProgress } from "./types.ts";
 
 // Consolidated tool-session pill and its Genie progress detail view:
@@ -262,7 +263,7 @@ const isGroupRenderable = (g: MessageGroup): boolean =>
  *   1. The LLM's sub-question for this Genie call, always
  *      visible, styled as a blockquote so it reads as provenance.
  *   2. One numbered "Query N" Collapsible per query attachment
- *      (or just "Query" when there's one). Opens to reveal SQL.
+ *      (or just "Query" when there's one). Opens directly to the SQL.
  *   3. Errors that landed under this `message_id`, always
  *      visible (red text - users need to see failures, not click
  *      to find them).
@@ -291,11 +292,9 @@ const MessageGroupBody = ({
       {queryBuckets.map((bucket, i) => (
         // Each query bucket is a single Collapsible (default
         // closed) so the expanded group reads as just the
-        // question + a short stack of "Query N" rows.
-        // Click any row to drill into its SQL.
-        // SQL itself stays a nested Collapsible (default closed)
-        // for the same reason: code is the heaviest content here,
-        // and most readers only want a glance.
+        // question + a short stack of "Query N" rows. The query
+        // opens directly to its SQL instead of adding a redundant
+        // second "SQL" pill around the only child.
         <Collapsible key={bucket.key} className="rounded border border-border/60 bg-background/40">
           <CollapsibleTrigger className="group flex w-full items-center gap-1.5 px-2 py-1 text-left text-xs uppercase tracking-wide text-muted-foreground hover:text-foreground">
             <ChevronDownIcon className="size-3 shrink-0 transition-transform group-data-[state=closed]:-rotate-90" />
@@ -305,26 +304,20 @@ const MessageGroupBody = ({
             ) : null}
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <div className="flex flex-col gap-2 px-2 pb-2 text-xs">
-              {bucket.query && (
-                <Collapsible className="rounded border border-border/60 bg-background/30">
-                  <CollapsibleTrigger className="group flex w-full items-center gap-1 px-2 py-1 text-left text-muted-foreground hover:text-foreground">
-                    <ChevronDownIcon className="size-3 transition-transform group-data-[state=closed]:-rotate-90" />
-                    <span>SQL</span>
-                  </CollapsibleTrigger>
-                  <CollapsibleContent>
-                    <div className="px-2 pb-2">
-                      <SqlBlock sql={bucket.query.sql} />
-                    </div>
-                    {bucket.query.description && (
-                      <div className="px-2 pb-2">
-                        <ToolMarkdown>{bucket.query.description}</ToolMarkdown>
-                      </div>
-                    )}
-                  </CollapsibleContent>
-                </Collapsible>
-              )}
-            </div>
+            {bucket.query && (
+              <>
+                <SourceBlock
+                  source={bucket.query.sql}
+                  language="sql"
+                  className="max-h-64 border-t border-border/50 px-2 py-1.5 text-foreground"
+                />
+                {bucket.query.description && (
+                  <div className="border-t border-border/50 px-2 py-1.5">
+                    <ToolMarkdown>{bucket.query.description}</ToolMarkdown>
+                  </div>
+                )}
+              </>
+            )}
           </CollapsibleContent>
         </Collapsible>
       ))}
@@ -396,12 +389,8 @@ export function structuredToolPayload(value: unknown): unknown | undefined {
   if (typeof value !== "string") return undefined;
   const trimmed = value.trim();
   if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return undefined;
-  try {
-    const parsed: unknown = JSON.parse(trimmed);
-    return typeof parsed === "object" && parsed !== null ? parsed : undefined;
-  } catch {
-    return undefined;
-  }
+  const parsed = json.parse(trimmed);
+  return typeof parsed === "object" && parsed !== null ? parsed : undefined;
 }
 
 const RawToolPayload = ({
@@ -427,7 +416,7 @@ const RawToolPayload = ({
         ) : (
           <RecordPreview
             value={structured}
-            className="max-h-80 border-t border-border/50 bg-transparent text-foreground"
+            className="border-t border-border/50 bg-transparent text-foreground"
           />
         )}
       </CollapsibleContent>
@@ -451,24 +440,7 @@ export function detectToolSourceLanguage(
   source: string,
   fallback: ToolInputPresentation["language"],
 ): ToolInputPresentation["language"] {
-  const trimmed = source.trim();
-  if (/^(?:select|with|insert|update|delete|merge|create|alter)\b/i.test(trimmed)) return "sql";
-  if (/^(?:from\s+\S+\s+import|import\s+\S+|def\s+\w+|class\s+\w+):?/m.test(trimmed)) {
-    return "python";
-  }
-  if (/^(?:const|let|var|interface|type|export|import)\b/m.test(trimmed)) return "typescript";
-  if (/^(?:#!.*\b(?:ba|z|k)?sh\b|(?:cd|ls|cat|grep|find|bun|npm|pnpm|yarn)\s)/m.test(trimmed)) {
-    return "bash";
-  }
-  if ((trimmed.startsWith("{") || trimmed.startsWith("[")) && trimmed.length > 1) {
-    try {
-      JSON.parse(trimmed);
-      return "json";
-    } catch {
-      // Keep the tool-specific fallback for incomplete source.
-    }
-  }
-  return fallback;
+  return detectCodeLanguage(source) ?? fallback;
 }
 
 /** Extract a compact code or command preview from a tool request payload. */
@@ -640,15 +612,18 @@ const ToolCallDetails = ({
     "input" in event ? toolInputPresentation(event.toolName, event.input) : undefined;
   const outputPresentation =
     "output" in event ? toolOutputPresentation(event.toolName, event.output) : undefined;
+  const isAskGenie = event.toolName.startsWith("ask_genie");
 
   return (
     <div className="flex flex-col gap-2">
       {showQuestion && question ? (
-        <p className="break-words px-0.5 text-xs italic text-foreground/80">{question}</p>
+        <p className="break-words px-0.5 text-[11px] leading-snug text-muted-foreground">
+          {question}
+        </p>
       ) : null}
       {inputPresentation ? (
         <ToolInputSource presentation={inputPresentation} />
-      ) : "input" in event ? (
+      ) : "input" in event && !isAskGenie ? (
         <RawToolPayload label="Request" value={event.input} />
       ) : null}
       <WebSearchProgressDetails event={event} />
@@ -699,7 +674,9 @@ const ToolCallRow = ({ event }: { event: ToolEvent }) => {
         {verb}
       </span>
       {question && (
-        <span className="mt-0.5 block break-words italic text-foreground/80">{question}</span>
+        <span className="mt-0.5 block break-words text-[11px] leading-snug text-foreground/75">
+          {question}
+        </span>
       )}
     </span>
   );

package/src/react/types.ts

@@ -1,6 +1,6 @@
 import type { ToolProgressEvent } from "@dbx-tools/shared-mastra/wire";
 import type { ReasoningEffort, ServingEndpointSummary } from "@dbx-tools/shared-model";
-import type { UIMessage } from "ai";
+import type { FileUIPart, UIMessage } from "ai";
 import type { ReactNode } from "react";
 import type { ExportFormat } from "../support/export.ts";
 
@@ -52,12 +52,14 @@ export type ChatModelOption = Pick<
 >;
 
 /**
- * A steer message submitted while a turn was already streaming. It waits in a
- * per-thread queue until the running turn ends (auto-sent oldest-first) or the
- * user fires it early with "send now". `id` is a stable key for rendering /
- * removal.
+ * A text and/or image message submitted while a turn was already streaming.
+ * It waits in a per-thread queue until the running turn ends (auto-sent
+ * oldest-first) or the user fires it early with "send now". `id` is a stable
+ * key for rendering / removal.
  */
-export type QueuedSteer = { id: string; text: string };
+export type ChatInputMessage = { text?: string; files?: FileUIPart[] };
+
+export type QueuedSteer = ChatInputMessage & { id: string };
 
 /** Thumbs reaction a user can leave on an assistant turn. */
 export type FeedbackValue = "up" | "down";
@@ -128,7 +130,7 @@ export type ChatViewProps = {
    * ENQUEUES the message as a steer (it waits, no interrupt); the queue drains
    * oldest-first when the turn ends. An idle submit starts a turn immediately.
    */
-  sendMessage: (message: { text: string }) => void;
+  sendMessage: (message: ChatInputMessage) => void;
   /**
    * Steers submitted mid-turn that are waiting to run (oldest first). When
    * non-empty the composer shows them as chips above the input, each with a
@@ -202,7 +204,7 @@ export type ChatViewProps = {
   modelSelectorActions?: ReactNode;
   /**
    * Host-owned actions rendered on the left side of the composer's fixed
-   * footer, before Export and Clear.
+   * footer, after Upload and before Export and Clear.
    */
   composerLeadingActions?: ReactNode;
   /**

package/src/support/index.ts

@@ -0,0 +1,26 @@
+// GENERATED by projen watch - DO NOT EDIT.
+// Regenerated from the exporting modules in ./src.
+// Hand edits are overwritten on the next watch; this file is read-only.
+
+export * as chartOption from "./chart-option.ts";
+export * as chartTheme from "./chart-theme.ts";
+export * as clipboard from "./clipboard.ts";
+export * as download from "./download.ts";
+export * as exportModule from "./export.ts";
+export * as mastraClient from "./mastra-client.ts";
+export * as modelSelection from "./model-selection.ts";
+export * as requestContext from "./request-context.ts";
+export * as threadLabels from "./thread-labels.ts";
+export * as threadSessions from "./thread-sessions.ts";
+export * as threadTabs from "./thread-tabs.ts";
+export * as toolEvents from "./tool-events.ts";
+export { LIGHT_CHART_CHROME } from "./chart-theme.ts";
+export type { ChartChrome } from "./chart-theme.ts";
+export type { ExportFormat, ExportBrand, EmbedResolver, ExportChatOptions } from "./export.ts";
+export { MastraPluginClient, useMastraConfig, useMastraClient, useMastraMlflowExperiment, useMastraModels, useMastraDefaultModel, useMastraSuggestions, useMastraThreads, useChartFetch, useStatementFetch } from "./mastra-client.ts";
+export type { MastraStreamResponse, MastraMemoryThread, ByIdFetchState } from "./mastra-client.ts";
+export { defaultReasoningEffort, modelStorageKey, readStoredModel, storeSelectedModel } from "./model-selection.ts";
+export type { MastraRequestContextInput, MastraRequestContextSource, MastraRequestContextSnapshot } from "./request-context.ts";
+export { DEFAULT_THREAD_SESSION_KEY } from "./thread-sessions.ts";
+export type { SessionQueuedSteer, SessionRun, ThreadSession } from "./thread-sessions.ts";
+export { THREAD_TAB_SEED_MAX } from "./thread-tabs.ts";

package/src/support/mastra-client.ts

@@ -26,10 +26,14 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import type { MastraRequestContextSnapshot } from "./request-context.ts";
 
 type NativeAgentClient = ReturnType<MastraClient["getAgent"]>;
+
+/** Browser stream and response headers returned by a Mastra chat request. */
 export interface MastraStreamResponse {
   headers: Headers;
   stream: ReadableStream<UIMessageChunk>;
 }
+
+/** One memory thread returned by the native Mastra client. */
 export type MastraMemoryThread = ListMemoryThreadsResponse["threads"][number];
 
 /**