@dbx-tools/ui-mastra 0.9.128 → 0.9.131

package/README.md

@@ -22,9 +22,9 @@ Key features:
 
 - Drop-in `MastraChat` component that discovers the plugin client config and
   wires itself to the default agent.
-- Reload recovery for background turns: active run metadata is persisted per
-  agent and thread, the cached stream reconnects after a page reload, and the
-  final persisted history is refreshed when recovery completes.
+- Reload recovery for agent-backed background turns: active run metadata is
+  persisted per agent and thread, the cached stream reconnects after a page
+  reload, and the final persisted history is refreshed when recovery completes.
 - Headless `useMastraChat()` driver for apps that want the same transport logic
   with custom layout.
 - Persistent `MastraAssistant` application shell with a floating launcher,
@@ -172,6 +172,7 @@ precomputed `uiMessages` projection, history hydration uses Mastra's native
 Useful options:
 
 - `agentId` selects a registered agent; defaults to the plugin default agent.
+- `genieSpace` selects a configured Genie alias and bypasses the agent.
 - `showModelPicker` fetches `/models` and sends `X-Mastra-Model` overrides.
 - `composerActions` places host-owned per-turn controls beside the model
   selector without replacing the built-in composer.
@@ -187,12 +188,43 @@ Useful options:
   off. See [Place The Conversation List](#place-the-conversation-list).
 - `enableThreads: false` is the older shorthand for
   `threadPlacement: "disabled"`.
+- `threadId` and `onThreadIdChange` let a host bind the active conversation to
+  URL state or another external selector. Unknown external ids are replaced by
+  a new thread and reported with the `missing` reason.
 - `enableExport` adds whole-conversation and per-message export affordances.
 - Feedback defaults to auto: thumbs, dislike, and comment controls appear when
   the server reports MLflow feedback is available and a turn produced a trace
   id. Set `enableFeedback={false}` to hide them. Viewers with `CAN_MANAGE` on
   the experiment also get an experiment debug link at the end of the action row.
 
+## Use Direct Genie Chat
+
+Use `genieSpace` when the application needs the same chat shell without a
+supervisor agent:
+
+```tsx
+<MastraChat genieSpace="sales" threadPlacement="auto" enableExport />
+```
+
+The alias comes from the server plugin's `genieSpaces`. The client still uses
+AI SDK `UIMessage` streams and the same `ChatView`; Genie conversations replace
+Mastra threads and Genie messages replace Mastra Memory history.
+
+Turns and history require the Genie Agent API and never fall back to classic
+Genie message polling. The sidebar filters the GA Genie conversation listing to
+Agent Mode conversations. Genie decides whether a query should be visualized;
+visualization attachments render through AppKit UI's native
+`GenieQueryVisualization`, with Chart and Table tabs. This does not invoke a
+supervisor or the Mastra Model Serving chart planner. Queries without a
+visualization attachment render through the existing sortable data table.
+
+Direct mode requires the signed-in user's Databricks OBO context. It supports
+new/select/delete conversations, history, suggestions, thoughts, exports, and
+stream cancellation. It does not support conversation rename, file
+attachments, MLflow feedback, approvals, background turns, or stream
+reconnection. The newest 100 conversations are listed and each selected
+conversation loads as one history page.
+
 ## Place The Conversation List
 
 Conversation management is on by default. Where it lives is one option:
@@ -213,6 +245,9 @@ show/hide toggle. Below 768px of chat width the panel becomes an overlay drawer
 on the same edge, so the transcript never loses room; the drawer is
 session-scoped and starts closed, and closes itself after a selection.
 
+The composer accepts images from the upload action, drag and drop, or clipboard
+paste. Oversized images use the same client-side resize path before submission.
+
 The `top` placement is the editor-tab model: each open conversation is a tab with
 its title, a spinner while it streams in the background, and a close affordance
 that only takes the tab off the strip (the conversation stays in history). A `+`
@@ -223,10 +258,11 @@ starts a fresh conversation when it was the last tab open. The open set is
 session state; the strip reseeds from the most recent conversations on the next
 load.
 
-Selecting a conversation fetches only the newest 20 native memory messages.
-Scrolling upward requests the next page and prepends it without moving the
-reader's viewport. Agent turns still send only the new user message; Mastra
-loads the remembered transcript server-side.
+For agent-backed chat, selecting a conversation fetches only the newest 20
+native memory messages. Scrolling upward requests the next page and prepends it
+without moving the reader's viewport. Agent turns still send only the new user
+message; Mastra loads the remembered transcript server-side. Direct Genie mode
+loads the selected Genie conversation in one page.
 
 `auto` measures the chat's own element rather than the viewport, so a chat
 embedded in a split view or side panel switches to tabs on the space it actually
@@ -363,6 +399,8 @@ The UI understands the extra events produced by
 - `[chart:<id>]` markers long-poll the chart cache and render ECharts inline.
 - `[data:<id>]` markers fetch statement rows and render a sortable table with
   column toggles and CSV export.
+- `[visualization:<id>]` markers fetch the same statement under OBO identity and
+  render AppKit UI's native Genie Chart/Table component.
 - MLflow trace headers enable per-message feedback controls when the server
   reports feedback is available.
 

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.128";
+export const PACKAGE_VERSION = "0.9.131";
 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";
@@ -33,10 +33,12 @@ export * as supportChartTheme from "./src/support/chart-theme.ts";
 export * as supportClipboard from "./src/support/clipboard.ts";
 export * as supportDownload from "./src/support/download.ts";
 export * as supportExport from "./src/support/export.ts";
+export * as supportGenieClient from "./src/support/genie-client.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 supportThreadLabels from "./src/support/thread-labels.ts";
+export * as supportThreadPersistence from "./src/support/thread-persistence.ts";
 export * as supportThreadSessions from "./src/support/thread-sessions.ts";
 export * as supportThreadTabs from "./src/support/thread-tabs.ts";
 export * as supportToolEvents from "./src/support/tool-events.ts";
@@ -55,7 +57,7 @@ export { FeedbackControls } from "./src/react/feedback-controls.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";
+export type { ThreadIdChangeReason, UseMastraChatOptions, MastraChatProps } from "./src/react/mastra-chat.tsx";
 export { SuggestionPills } from "./src/react/suggestion-pills.tsx";
 export type { SuggestionPillsProps } from "./src/react/suggestion-pills.tsx";
 export { dedupeSuggestions, collectSuggestions } from "./src/react/suggestions.ts";
@@ -71,7 +73,8 @@ export type { StoredActiveRun } from "./src/support/active-runs.ts";
 export { LIGHT_CHART_CHROME } from "./src/support/chart-theme.ts";
 export type { ChartChrome } from "./src/support/chart-theme.ts";
 export type { ExportFormat, ExportBrand, EmbedResolver, ExportChatOptions } from "./src/support/export.ts";
-export { MastraChatRequestError, MastraPluginClient, useMastraConfig, useMastraClient, useMastraMlflowExperiment, useMastraModels, useMastraDefaultModel, useMastraSuggestions, useMastraThreads, useChartFetch, useStatementFetch } from "./src/support/mastra-client.ts";
+export { GenieChatClient } from "./src/support/genie-client.ts";
+export { MastraChatRequestError, MastraPluginClient, useMastraConfig, useMastraClient, useMastraMlflowExperiment, useMastraModels, useMastraDefaultModel, useMastraSuggestions, useMastraThreads, useChartFetch, useStatementFetch, useVisualizationFetch } from "./src/support/mastra-client.ts";
 export type { MastraStreamResponse, MastraMemoryThread, ByIdFetchState } from "./src/support/mastra-client.ts";
 export { defaultReasoningEffort, modelStorageKey, readStoredModel, storeSelectedModel } from "./src/support/model-selection.ts";
 export type { MastraRequestContextInput, MastraRequestContextSource, MastraRequestContextSnapshot } from "./src/support/request-context.ts";

package/package.json

@@ -29,11 +29,12 @@
     "react-dom": "~19.2.4"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "^0.9.128",
-    "@dbx-tools/shared-genie": "^0.9.128",
-    "@dbx-tools/shared-mastra": "^0.9.128",
-    "@dbx-tools/shared-model": "^0.9.128",
-    "@dbx-tools/ui": "^0.9.128",
+    "@databricks/appkit-ui": "0.81.0",
+    "@dbx-tools/shared-core": "^0.9.131",
+    "@dbx-tools/shared-genie": "^0.9.131",
+    "@dbx-tools/shared-mastra": "^0.9.131",
+    "@dbx-tools/shared-model": "^0.9.131",
+    "@dbx-tools/ui": "^0.9.131",
     "@mastra/client-js": "1.50.0",
     "@mastra/core": "1.71.0",
     "@tanstack/react-table": "^8.21.3",
@@ -50,7 +51,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.9.128",
+  "version": "0.9.131",
   "dbxToolsConfig": {
     "tags": [
       "ui"

package/src/react/bubbles.tsx

@@ -18,6 +18,7 @@ import type { UIMessage } from "ai";
 import {
   BugIcon,
   CheckIcon,
+  ChevronDownIcon,
   CopyIcon,
   MessageSquareIcon,
   RefreshCcwIcon,
@@ -63,7 +64,8 @@ const UserAvatar = () => (
 
 const ThoughtsDisclosure = ({ text }: { text: string }) => (
   <Collapsible>
-    <CollapsibleTrigger className="w-fit cursor-pointer rounded-md border border-border/40 bg-background/30 px-2 py-1 text-xs text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+    <CollapsibleTrigger className="group flex w-fit cursor-pointer items-center gap-1.5 px-0 py-0.5 text-left text-xs text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+      <ChevronDownIcon className="size-3 shrink-0 transition-transform group-data-[state=closed]:-rotate-90" />
       Thoughts
     </CollapsibleTrigger>
     <CollapsibleContent>

package/src/react/chat-composer.tsx

@@ -256,6 +256,7 @@ type ChatComposerProps = {
   composerActions: ChatViewProps["composerActions"];
   modelSelectorActions: ChatViewProps["modelSelectorActions"];
   composerLeadingActions: ChatViewProps["composerLeadingActions"];
+  allowAttachments: NonNullable<ChatViewProps["allowAttachments"]>;
   isLoadingHistory: NonNullable<ChatViewProps["isLoadingHistory"]>;
   onClear: ChatViewProps["onClear"];
   onExportConversation: ChatViewProps["onExportConversation"];
@@ -284,6 +285,7 @@ export const ChatComposer = ({
   composerActions,
   modelSelectorActions,
   composerLeadingActions,
+  allowAttachments,
   isLoadingHistory,
   onClear,
   onExportConversation,
@@ -293,7 +295,9 @@ export const ChatComposer = ({
   const [files, setFiles] = useState<FileUIPart[]>([]);
   const [fileError, setFileError] = useState<string | null>(null);
   const [isPreparingFiles, setIsPreparingFiles] = useState(false);
+  const [isDraggingFiles, setIsDraggingFiles] = useState(false);
   const inputId = useId();
+  const dragDepthRef = useRef(0);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const inputGroupRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -324,8 +328,14 @@ export const ChatComposer = ({
     onResumeFollow();
   };
 
-  const addFiles = async (selected: FileList | null) => {
+  const addFiles = async (selected: FileList | readonly File[] | null) => {
     if (!selected?.length) return;
+    const selectedFiles = Array.from(selected);
+    const imageFiles = selectedFiles.filter((file) => file.type.startsWith("image/"));
+    if (imageFiles.length === 0) {
+      setFileError("Only image files can be attached");
+      return;
+    }
     const remaining = MAX_COMPOSER_IMAGES - files.length;
     if (remaining <= 0) {
       setFileError(`You can attach up to ${MAX_COMPOSER_IMAGES} images`);
@@ -335,12 +345,12 @@ export const ChatComposer = ({
     setFileError(null);
     try {
       const next = await Promise.all(
-        Array.from(selected)
-          .slice(0, remaining)
-          .map((file) => imageFileToUIPart(file)),
+        imageFiles.slice(0, remaining).map((file) => imageFileToUIPart(file)),
       );
       setFiles((current) => [...current, ...next]);
-      if (selected.length > remaining) {
+      if (selectedFiles.length !== imageFiles.length) {
+        setFileError("Only image files were added");
+      } else if (imageFiles.length > remaining) {
         setFileError(`Only the first ${remaining} images were added`);
       }
     } catch (error) {
@@ -376,9 +386,39 @@ export const ChatComposer = ({
         />
         <InputGroup
           ref={inputGroupRef}
-          className="rounded-2xl border-border/80 shadow-sm transition-shadow focus-within:shadow-md"
+          className={cn(
+            "rounded-2xl border-border/80 shadow-sm transition-shadow focus-within:shadow-md",
+            isDraggingFiles && "border-primary ring-2 ring-primary/20",
+          )}
+          onDragEnter={(event) => {
+            if (!event.dataTransfer.types.includes("Files")) return;
+            event.preventDefault();
+            if (!allowAttachments) return;
+            dragDepthRef.current += 1;
+            setIsDraggingFiles(true);
+          }}
+          onDragOver={(event) => {
+            if (!event.dataTransfer.types.includes("Files")) return;
+            event.preventDefault();
+            if (!allowAttachments) {
+              event.dataTransfer.dropEffect = "none";
+              return;
+            }
+            event.dataTransfer.dropEffect = "copy";
+          }}
+          onDragLeave={(event) => {
+            if (!event.dataTransfer.types.includes("Files")) return;
+            dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+            if (dragDepthRef.current === 0) setIsDraggingFiles(false);
+          }}
+          onDrop={(event) => {
+            event.preventDefault();
+            dragDepthRef.current = 0;
+            setIsDraggingFiles(false);
+            if (allowAttachments) void addFiles(event.dataTransfer.files);
+          }}
         >
-          {files.length > 0 && (
+          {allowAttachments && files.length > 0 && (
             <InputGroupAddon
               align="block-start"
               className="max-w-full justify-start gap-2 overflow-x-auto pb-0"
@@ -415,6 +455,15 @@ export const ChatComposer = ({
             ref={textareaRef}
             value={input}
             onChange={(event) => setInput(event.target.value)}
+            onPaste={(event) => {
+              if (!allowAttachments) return;
+              const pastedImages = Array.from(event.clipboardData.files).filter((file) =>
+                file.type.startsWith("image/"),
+              );
+              if (pastedImages.length === 0) return;
+              event.preventDefault();
+              void addFiles(pastedImages);
+            }}
             onKeyDown={(event) => {
               if (event.key === "Enter" && !event.shiftKey) {
                 event.preventDefault();
@@ -425,7 +474,7 @@ 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-sm"
           />
-          {fileError && (
+          {allowAttachments && fileError && (
             <div className="px-4 text-xs text-destructive" role="alert">
               {fileError}
             </div>
@@ -435,36 +484,42 @@ export const ChatComposer = ({
             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>
+              {allowAttachments && (
+                <>
+                  <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

package/src/react/chat-sessions.ts

@@ -55,6 +55,14 @@ export function useChatSessions(activeThreadId: string | undefined) {
     sessionsRef.current.delete(threadId);
     setRevision((current) => current + 1);
   }, []);
+  /** Re-key one session, keeping its transcript and run state intact. */
+  const moveSession = useCallback((fromThreadId: string, toThreadId: string) => {
+    const session = sessionsRef.current.get(fromThreadId);
+    if (!session || fromThreadId === toThreadId) return;
+    sessionsRef.current.delete(fromThreadId);
+    sessionsRef.current.set(toThreadId, session);
+    setRevision((current) => current + 1);
+  }, []);
   const activeKey = sessionKey(activeThreadId);
   const activeSession = useMemo(() => getSession(activeKey), [activeKey, getSession, revision]);
   const streamingThreadIds = useMemo(() => {
@@ -70,6 +78,7 @@ export function useChatSessions(activeThreadId: string | undefined) {
     activeKey,
     activeSession,
     getSession,
+    moveSession,
     removeSession,
     resetSession,
     streamingThreadIds,

package/src/react/chat-stream.ts

@@ -59,6 +59,18 @@ export function closeOnTerminalChunk(
   });
 }
 
+/** Drain a run observation until its terminal finish or abort chunk arrives. */
+export async function waitForTerminalChunk(stream: ReadableStream<UIMessageChunk>): Promise<void> {
+  const reader = closeOnTerminalChunk(stream).getReader();
+  try {
+    while (!(await reader.read()).done) {
+      // Draining is the synchronization point; the replacement turn does not replay this output.
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+
 /** Replace or append one assistant message without disturbing the transcript. */
 function upsertAssistant(messages: UIMessage[], assistant: UIMessage): UIMessage[] {
   const next = [...messages];

package/src/react/chat-view.tsx

@@ -35,6 +35,7 @@ export const ChatView = ({
   composerActions,
   modelSelectorActions,
   composerLeadingActions,
+  allowAttachments = true,
   onLoadMore,
   isLoadingMore = false,
   hasMore = false,
@@ -136,6 +137,7 @@ export const ChatView = ({
         composerActions={composerActions}
         modelSelectorActions={modelSelectorActions}
         composerLeadingActions={composerLeadingActions}
+        allowAttachments={allowAttachments}
         isLoadingHistory={isLoadingHistory}
         onClear={onClear}
         onExportConversation={onExportConversation}

package/src/react/embed-slots.tsx

@@ -1,3 +1,4 @@
+import { GenieQueryVisualization } from "@databricks/appkit-ui/react";
 import { markers, type ParsedMarker } from "@dbx-tools/shared-mastra";
 import { Spinner } from "@dbx-tools/ui/react";
 import { ClockIcon } from "lucide-react";
@@ -6,13 +7,16 @@ import { DataGrid, humanizeLabel } from "./data-grid.tsx";
 import { AssistantMarkdown } from "./markdown.tsx";
 import { normalizeChartOption } from "../support/chart-option.ts";
 import { useChartChrome } from "../support/chart-theme.ts";
-import { useChartFetch, useStatementFetch } from "../support/mastra-client.ts";
+import {
+  useChartFetch,
+  useStatementFetch,
+  useVisualizationFetch,
+} from "../support/mastra-client.ts";
 
 const ReactECharts = lazy(() => import("echarts-for-react"));
 
-// Inline embed slots: chart / data tables resolved from `[chart:<id>]`
-// and `[data:<id>]` markers in the assistant's prose, plus the splitter
-// that interleaves those slots with the surrounding markdown.
+// Inline embed slots resolved from markers in assistant prose, plus the
+// splitter that interleaves those slots with surrounding markdown.
 
 /**
  * Frame shared by every chart-slot state so the layout stays
@@ -170,11 +174,27 @@ const DataSlot = ({ statementId }: { statementId: string }) => {
   );
 };
 
-/** One slice of an assistant message: prose, a chart slot, or a data slot. */
+/**
+ * Native AppKit Genie visualization for a query Genie chose to visualize.
+ * The same statement payload backs its Chart and Table tabs.
+ */
+const GenieVisualizationSlot = ({ statementId }: { statementId: string }) => {
+  const { data, loading, error } = useVisualizationFetch(statementId);
+  if (!loading && !error && data === undefined) return <ExpiredSlot type="visualization" />;
+  if (!data) return null;
+  return (
+    <div className="not-prose my-3 max-w-full rounded border border-border bg-card p-3">
+      <GenieQueryVisualization data={data.visualization} />
+    </div>
+  );
+};
+
+/** One slice of an assistant message. */
 type RenderSegment =
   | { kind: "text"; text: string }
   | { kind: "chart"; chartId: string }
-  | { kind: "data"; statementId: string };
+  | { kind: "data"; statementId: string }
+  | { kind: "visualization"; statementId: string };
 
 /**
  * Map one parsed marker onto its render segment. The marker grammar
@@ -185,8 +205,7 @@ type RenderSegment =
  * collapses to an empty text segment: the marker is consumed so no
  * literal `[<type>:...]` leaks into the prose, but no slot renders and
  * no `/embed/<type>/:id` request fires. Only a UUID-shaped id with a
- * known, renderable type (charts need ECharts, data needs a Table)
- * resolves to a slot.
+ * known, renderable type resolves to a slot.
  */
 const markerSegment = (marker: ParsedMarker): RenderSegment => {
   if (!markers.isUuid(marker.id)) return { kind: "text", text: "" };
@@ -195,6 +214,8 @@ const markerSegment = (marker: ParsedMarker): RenderSegment => {
       return { kind: "chart", chartId: marker.id };
     case "data":
       return { kind: "data", statementId: marker.id };
+    case "visualization":
+      return { kind: "visualization", statementId: marker.id };
     default:
       return { kind: "text", text: "" };
   }
@@ -220,8 +241,7 @@ const splitTextWithEmbeds = (text: string): RenderSegment[] => {
 };
 
 /**
- * Render the assistant's markdown with chart and data tables
- * placed at their inline marker positions. Each prose segment
+ * Render the assistant's markdown with embeds at their marker positions. Each prose segment
  * is its own {@link AssistantMarkdown} so streaming chunks still
  * incrementally parse correctly; embed slots break the markdown
  * flow with full-width block elements.
@@ -234,6 +254,8 @@ const splitTextWithEmbeds = (text: string): RenderSegment[] => {
  *   - `[data:<statement_id>]` -> {@link DataSlot} fetches the
  *     statement rows OBO-scoped and renders an inline Table
  *     (or nothing on 404 / empty result).
+ *   - `[visualization:<statement_id>]` -> {@link GenieVisualizationSlot}
+ *     renders AppKit UI's native Genie Chart/Table view.
  *
  * Stale markers in persisted transcript text are silently
  * dropped on reload so the prose around them stays clean.
@@ -265,6 +287,14 @@ export const MarkdownWithEmbeds = ({
         if (seg.kind === "chart") {
           return <ChartSlot key={`c-${i}-${seg.chartId}`} chartId={seg.chartId} />;
         }
+        if (seg.kind === "visualization") {
+          return (
+            <GenieVisualizationSlot
+              key={`v-${i}-${seg.statementId}`}
+              statementId={seg.statementId}
+            />
+          );
+        }
         return <DataSlot key={`d-${i}-${seg.statementId}`} statementId={seg.statementId} />;
       })}
     </>

package/src/react/index.ts

@@ -45,7 +45,11 @@ export type {
 } from "../support/request-context.ts";
 export { dedupeSuggestions } from "./suggestions.ts";
 export { MastraChat, useMastraChat } from "./mastra-chat.tsx";
-export type { MastraChatProps, UseMastraChatOptions } from "./mastra-chat.tsx";
+export type {
+  MastraChatProps,
+  ThreadIdChangeReason,
+  UseMastraChatOptions,
+} from "./mastra-chat.tsx";
 export { ThreadSidebar } from "./thread-sidebar.tsx";
 export type { ThreadSidebarProps } from "./thread-sidebar.tsx";
 export { ThreadActions, ThreadTabs } from "./thread-tabs.tsx";