@dbx-tools/ui-mastra 0.9.111 → 0.9.116

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.111";
+export const PACKAGE_VERSION = "0.9.116";
 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";
@@ -35,7 +35,6 @@ export * as supportExport from "./src/support/export.ts";
 export * as supportMastraClient from "./src/support/mastra-client.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";
@@ -52,7 +51,7 @@ export type { DataRow } from "./src/react/data-grid.tsx";
 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, JsonBlock, SourceBlock } from "./src/react/markdown.tsx";
+export { AssistantMarkdown, ToolMarkdown, SqlBlock, SourceBlock } 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";
@@ -65,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.111",
-    "@dbx-tools/shared-genie": "^0.9.111",
-    "@dbx-tools/shared-mastra": "^0.9.111",
-    "@dbx-tools/shared-model": "^0.9.111",
-    "@dbx-tools/ui": "^0.9.111",
+    "@dbx-tools/shared-core": "^0.9.116",
+    "@dbx-tools/shared-genie": "^0.9.116",
+    "@dbx-tools/shared-mastra": "^0.9.116",
+    "@dbx-tools/shared-model": "^0.9.116",
+    "@dbx-tools/ui": "^0.9.116",
     "@mastra/client-js": "1.50.0",
     "@mastra/core": "1.71.0",
     "@tanstack/react-table": "^8.21.3",
@@ -42,7 +42,6 @@
     "echarts-for-react": "^3.0.2",
     "lucide-react": "^0.554.0",
     "marked": "^18.0.5",
-    "shiki": "^3.0.0",
     "sql-formatter": "^15.6.9",
     "streamdown": "^2.5.0"
   },
@@ -50,7 +49,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.9.111",
+  "version": "0.9.116",
   "dbxToolsConfig": {
     "tags": [
       "ui"
@@ -60,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/bubbles.tsx

@@ -12,6 +12,7 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
+  cn,
 } from "@dbx-tools/ui/react";
 import type { UIMessage } from "ai";
 import {
@@ -535,14 +536,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" />
       </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

@@ -10,6 +10,9 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
+  createShikiPlugin,
+  highlightToHtml,
+  useHighlightedHtml,
   cn,
 } from "@dbx-tools/ui/react";
 import { CheckIcon, CopyIcon } from "lucide-react";
@@ -17,7 +20,6 @@ import React, { useEffect, useRef, useState } from "react";
 import { Streamdown } from "streamdown";
 import { DataGrid, TABLE_WRAPPER_CLASSES, colorizeDelta, type DataRow } from "./data-grid.tsx";
 import { copyText } from "../support/clipboard.ts";
-import { createShikiPlugin, highlightToHtml } from "../support/shiki-plugin.ts";
 
 // Markdown rendering for the chat: the streaming `Streamdown` engine
 // wired with shiki highlighting and AppKit table primitives, plus the
@@ -181,27 +183,6 @@ const TOOL_MARKDOWN_COMPONENTS = {
  */
 const SHIKI_PLUGIN = { code: createShikiPlugin() };
 
-/** Resolve syntax-highlighted HTML while preserving plaintext during lazy load. */
-function useHighlightedHtml(source: string, language: string): string | null {
-  const [highlighted, setHighlighted] = useState<{
-    source: string;
-    language: string;
-    html: string;
-  } | null>(null);
-  useEffect(() => {
-    let active = true;
-    void highlightToHtml(source, language).then((result) => {
-      if (active) setHighlighted({ source, language, html: result });
-    });
-    return () => {
-      active = false;
-    };
-  }, [language, source]);
-  return highlighted?.source === source && highlighted.language === language
-    ? highlighted.html
-    : null;
-}
-
 /**
  * Per-word fade-in applied while a reply is still streaming. Streamdown
  * wraps each newly arrived token in a `[data-sd-animate]` span and only
@@ -397,28 +378,6 @@ export const SqlBlock = ({ sql }: { sql: string }) => {
   );
 };
 
-/**
- * Render formatted JSON with the same lazily loaded Shiki runtime used by
- * SQL and fenced Markdown code blocks.
- */
-export const JsonBlock = ({ json, className }: { json: string; className?: string }) => {
-  const html = useHighlightedHtml(json, "json");
-  return (
-    <pre
-      className={cn(
-        "max-w-full overflow-auto whitespace-pre-wrap break-words font-mono text-xs leading-relaxed",
-        className,
-      )}
-    >
-      {html === null ? (
-        <code>{json}</code>
-      ) : (
-        <code data-dbx-highlighted-code dangerouslySetInnerHTML={{ __html: html }} />
-      )}
-    </pre>
-  );
-};
-
 /** Compact syntax-highlighted source block for tool request previews. */
 export const SourceBlock = ({
   source,

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,14 +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 { JsonBlock, SourceBlock, SqlBlock, ToolMarkdown } from "./markdown.tsx";
+import { SourceBlock, SqlBlock, ToolMarkdown } from "./markdown.tsx";
 import type { ToolEvent, ToolProgress } from "./types.ts";
 
 // Consolidated tool-session pill and its Genie progress detail view:
@@ -260,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).
@@ -289,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" />
@@ -303,24 +304,14 @@ const MessageGroupBody = ({
             ) : null}
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <div className="flex flex-col gap-2 px-2 pb-2 text-xs">
+            <div className="flex flex-col gap-2 border-t border-border/50 px-2 pb-2 pt-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>
+                <>
+                  <SqlBlock sql={bucket.query.sql} />
+                  {bucket.query.description && (
+                    <ToolMarkdown>{bucket.query.description}</ToolMarkdown>
+                  )}
+                </>
               )}
             </div>
           </CollapsibleContent>
@@ -388,20 +379,46 @@ export function formatRawToolPayload(value: unknown): string {
   return JSON.stringify(value, null, 2) ?? String(value);
 }
 
-const RawToolPayload = ({ label, value }: { label: "Request" | "Response"; value: unknown }) => (
-  <Collapsible 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" />
-      <span>{label}</span>
-    </CollapsibleTrigger>
-    <CollapsibleContent>
-      <JsonBlock
-        json={formatRawToolPayload(value)}
-        className="max-h-80 border-t border-border/50 px-2 py-2 text-foreground"
-      />
-    </CollapsibleContent>
-  </Collapsible>
-);
+/** Return structured JSON from an object value or a complete JSON string. */
+export function structuredToolPayload(value: unknown): unknown | undefined {
+  if (typeof value === "object" && value !== null) return value;
+  if (typeof value !== "string") return undefined;
+  const trimmed = value.trim();
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return undefined;
+  const parsed = json.parse(trimmed);
+  return typeof parsed === "object" && parsed !== null ? parsed : undefined;
+}
+
+const RawToolPayload = ({
+  label,
+  value,
+}: {
+  label: "Request" | "Response" | "Output";
+  value: unknown;
+}) => {
+  const structured = structuredToolPayload(value);
+  return (
+    <Collapsible 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" />
+        <span>{label}</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        {structured === undefined ? (
+          <JsonBlock
+            json={formatRawToolPayload(value)}
+            className="max-h-80 border-t border-border/50 px-2 py-2 text-foreground"
+          />
+        ) : (
+          <RecordPreview
+            value={structured}
+            className="border-t border-border/50 bg-transparent text-foreground"
+          />
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
 
 export type ToolInputPresentation = {
   label: "Code" | "Command" | "Output";
@@ -419,24 +436,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. */
@@ -621,7 +621,9 @@ const ToolCallDetails = ({
       ) : null}
       <WebSearchProgressDetails event={event} />
       <ToolProgressDetails summary={summary} omitQuestion />
-      {outputPresentation ? (
+      {outputPresentation?.language === "json" ? (
+        <RawToolPayload label="Output" value={outputPresentation.source} />
+      ) : outputPresentation ? (
         <ToolInputSource presentation={outputPresentation} />
       ) : "output" in event ? (
         <RawToolPayload label="Response" value={event.output} />

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];
 
 /**

package/src/support/_shiki-runtime.ts

@@ -1,27 +0,0 @@
-/**
- * Fine-grained Shiki runtime containing only the chat's supported languages.
- *
- * This module is itself dynamically imported, so its grammar, theme, and WASM
- * dependencies remain off the network until a supported code block appears.
- */
-import { createHighlighterCore } from "shiki/core";
-import { createOnigurumaEngine } from "shiki/engine/oniguruma";
-import bash from "shiki/langs/bash.mjs";
-import javascript from "shiki/langs/javascript.mjs";
-import json from "shiki/langs/json.mjs";
-import markdown from "shiki/langs/markdown.mjs";
-import python from "shiki/langs/python.mjs";
-import sql from "shiki/langs/sql.mjs";
-import typescript from "shiki/langs/typescript.mjs";
-import yaml from "shiki/langs/yaml.mjs";
-import githubDarkHighContrast from "shiki/themes/github-dark-high-contrast.mjs";
-import githubLightHighContrast from "shiki/themes/github-light-high-contrast.mjs";
-
-/** Create the shared highlighter with the exact configured language set. */
-export function createHighlighter() {
-  return createHighlighterCore({
-    themes: [githubLightHighContrast, githubDarkHighContrast],
-    langs: [sql, python, typescript, javascript, json, bash, yaml, markdown],
-    engine: createOnigurumaEngine(import("shiki/wasm")),
-  });
-}

package/src/support/shiki-plugin.ts

@@ -1,158 +0,0 @@
-import { stringUtils } from "@dbx-tools/shared-core";
-import type { BundledLanguage, BundledTheme } from "shiki";
-import type { HighlighterCore } from "shiki/core";
-import type { CodeHighlighterPlugin } from "streamdown";
-
-// Streamdown 2.x ships syntax highlighting as an opt-in plugin and has
-// no shiki dependency of its own; without a `code` plugin every fenced
-// block renders as uncolored plaintext. This module provides a small
-// shiki-backed highlighter to wire in via `plugins={{ code }}`.
-
-/**
- * Languages we highlight in the chat. SQL is the primary one (Genie
- * query previews); the rest cover code the assistant might emit. Kept
- * to a curated set so shiki only bundles these grammars.
- */
-const LANGUAGES = [
-  "text",
-  "plaintext",
-  "txt",
-  "sql",
-  "python",
-  "typescript",
-  "javascript",
-  "json",
-  "bash",
-  "yaml",
-  "markdown",
-] as const;
-
-/** High-contrast theme pair used for every syntax surface. */
-const THEMES = [
-  "github-light-high-contrast",
-  "github-dark-high-contrast",
-] as const satisfies readonly [BundledTheme, BundledTheme];
-
-/** Languages we can tokenize, as a set for O(1) support checks. */
-const SUPPORTED = new Set<string>(LANGUAGES);
-
-let _highlighter: HighlighterCore | null = null;
-let _loading: Promise<HighlighterCore> | null = null;
-
-/** Lazily create the shared shiki highlighter (singleton, loaded once). */
-function loadHighlighter(): Promise<HighlighterCore> {
-  _loading ??= import("./_shiki-runtime.ts")
-    .then(({ createHighlighter }) => createHighlighter())
-    .then((highlighter) => {
-      _highlighter = highlighter;
-      return highlighter;
-    });
-  return _loading;
-}
-
-function splitThemeColor(
-  value: string | undefined,
-  darkVariable: "--shiki-dark" | "--shiki-dark-bg",
-): { light?: string; dark?: string } {
-  if (!value) return {};
-  const marker = `;${darkVariable}:`;
-  const index = value.indexOf(marker);
-  if (index < 0) return { light: value };
-  return {
-    light: value.slice(0, index),
-    dark: value.slice(index + marker.length),
-  };
-}
-
-/** Tokenize `code` with the active themes into Streamdown's result shape. */
-function highlightTokens(h: HighlighterCore, code: string, language: string) {
-  const { tokens, fg, bg, rootStyle } = h.codeToTokens(code, {
-    lang: language as BundledLanguage,
-    themes: { light: THEMES[0], dark: THEMES[1] },
-  });
-  const foreground = splitThemeColor(fg, "--shiki-dark");
-  const background = splitThemeColor(bg, "--shiki-dark-bg");
-  const darkStyles = [
-    foreground.dark ? `--shiki-dark:${foreground.dark}` : "",
-    background.dark ? `--shiki-dark-bg:${background.dark}` : "",
-  ]
-    .filter(Boolean)
-    .join(";");
-  return {
-    tokens,
-    fg: foreground.light,
-    bg: background.light,
-    rootStyle: [rootStyle, darkStyles].filter(Boolean).join(";"),
-  };
-}
-
-/** Escape HTML-significant characters (from the shared string utils). */
-const escapeHtml = stringUtils.escapeHtml;
-
-/**
- * Highlight `code` into minimal inline HTML: one colored `<span>` per
- * token, lines joined by real newlines, with no line-number gutter or
- * per-line wrapper elements. Meant to drop straight into a
- * `<pre><code>` so the rendered text stays cleanly selectable and
- * copyable. Falls back to plain escaped text when the language isn't
- * supported or shiki fails to parse the snippet.
- */
-export async function highlightToHtml(code: string, language: string): Promise<string> {
-  if (!SUPPORTED.has(language)) return escapeHtml(code);
-  const h = await loadHighlighter();
-  try {
-    const { tokens } = highlightTokens(h, code, language);
-    return tokens
-      .map((line) =>
-        line
-          .map((token) => {
-            const light = token.htmlStyle?.color ?? token.color ?? "inherit";
-            const dark = token.htmlStyle?.["--shiki-dark"] ?? light;
-            const style = `--sdm-c:${light};--shiki-dark:${dark}`;
-            return `<span style="${escapeHtml(style)}">${escapeHtml(token.content)}</span>`;
-          })
-          .join(""),
-      )
-      .join("\n");
-  } catch {
-    return escapeHtml(code);
-  }
-}
-
-/**
- * shiki-backed code highlighter plugin for Streamdown. The highlighter
- * loads asynchronously: the first call for any block returns `null`
- * and resolves through the `callback` once shiki is ready, after which
- * results are synchronous. Unsupported languages return `null` so the
- * block stays plaintext rather than throwing.
- */
-export function createShikiPlugin(): CodeHighlighterPlugin {
-  const isSupported = (language: string): boolean => SUPPORTED.has(language);
-
-  return {
-    name: "shiki",
-    type: "code-highlighter",
-    getSupportedLanguages: () => [...LANGUAGES],
-    getThemes: () => [...THEMES],
-    supportsLanguage: (language) => isSupported(language),
-    highlight: (options, callback) => {
-      if (!isSupported(options.language)) return null;
-      const language = options.language;
-      if (_highlighter) {
-        try {
-          return highlightTokens(_highlighter, options.code, language);
-        } catch {
-          return null;
-        }
-      }
-      void loadHighlighter().then((h) => {
-        try {
-          callback?.(highlightTokens(h, options.code, language));
-        } catch {
-          // Parse failure for this block - leave it as plaintext.
-        }
-      });
-      return null;
-    },
-  };
-}