@dbx-tools/ui-mastra 0.6.63 → 0.6.64

package/package.json

@@ -24,12 +24,12 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "0.6.63",
-    "@dbx-tools/shared-genie": "0.6.63",
-    "@dbx-tools/shared-mastra": "0.6.63",
-    "@dbx-tools/shared-model": "0.6.63",
-    "@dbx-tools/ui-appkit": "0.6.63",
-    "@dbx-tools/ui-branding": "0.6.63",
+    "@dbx-tools/shared-core": "0.6.64",
+    "@dbx-tools/shared-genie": "0.6.64",
+    "@dbx-tools/shared-mastra": "0.6.64",
+    "@dbx-tools/shared-model": "0.6.64",
+    "@dbx-tools/ui-appkit": "0.6.64",
+    "@dbx-tools/ui-branding": "0.6.64",
     "@mastra/client-js": "^1.28.0",
     "@tanstack/react-table": "^8.21.3",
     "ai": "^5.0.0",
@@ -47,7 +47,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.63",
+  "version": "0.6.64",
   "type": "module",
   "exports": {
     "./react": "./src/react/index.ts",

package/src/react/embed-slots.tsx

@@ -1,14 +1,15 @@
 import { marker as markers, type ParsedMarker } from "@dbx-tools/shared-mastra";
 import { Spinner } from "@dbx-tools/ui-appkit/react";
-import ReactECharts from "echarts-for-react";
 import { ClockIcon } from "lucide-react";
-import { useMemo, useRef } from "react";
+import { lazy, Suspense, useMemo, useRef } from "react";
 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";
 
+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.
@@ -32,6 +33,16 @@ import { useChartFetch, useStatementFetch } from "../support/mastra-client.ts";
 const CHART_FRAME_CLASSES = "not-prose my-3 max-w-full rounded border border-border bg-card p-2";
 const CHART_HEIGHT_PX = 320;
 
+/** Fixed chart placeholder shared by data loading and renderer loading. */
+const ChartLoading = () => (
+  <div
+    className="flex items-center justify-center"
+    style={{ height: CHART_HEIGHT_PX, width: "100%" }}
+  >
+    <Spinner className="size-5 text-muted-foreground" />
+  </div>
+);
+
 /**
  * Compact inline notice rendered in place of an embed - a chart, data
  * table, or any future `[<type>:<id>]` marker - whose backing cache
@@ -107,19 +118,16 @@ const ChartSlot = ({ chartId }: { chartId: string }) => {
   return (
     <div ref={frameRef} className={CHART_FRAME_CLASSES}>
       {option ? (
-        <ReactECharts
-          option={option}
-          style={{ height: CHART_HEIGHT_PX, width: "100%" }}
-          notMerge
-          lazyUpdate
-        />
+        <Suspense fallback={<ChartLoading />}>
+          <ReactECharts
+            option={option}
+            style={{ height: CHART_HEIGHT_PX, width: "100%" }}
+            notMerge
+            lazyUpdate
+          />
+        </Suspense>
       ) : (
-        <div
-          className="flex items-center justify-center"
-          style={{ height: CHART_HEIGHT_PX, width: "100%" }}
-        >
-          <Spinner className="size-5 text-muted-foreground" />
-        </div>
+        <ChartLoading />
       )}
     </div>
   );

package/src/react/markdown.tsx

@@ -13,8 +13,7 @@ import {
   cn,
 } from "@dbx-tools/ui-appkit/react";
 import { CheckIcon, CopyIcon } from "lucide-react";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { format as formatSql } from "sql-formatter";
+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";
@@ -289,9 +288,10 @@ export const ToolMarkdown = ({ children }: { children: string }) => (
  * constructs or a partial query), so we fall back to the raw string
  * rather than dropping the preview.
  */
-function prettySql(sql: string): string {
+async function _prettySql(sql: string): Promise<string> {
   try {
-    return formatSql(sql, { language: "spark", keywordCase: "upper" });
+    const { format } = await import("sql-formatter");
+    return format(sql, { language: "spark", keywordCase: "upper" });
   } catch {
     return sql;
   }
@@ -335,7 +335,7 @@ const CopyButton = ({ value, className }: { value: string; className?: string })
 
 /**
  * Render a SQL string as a syntax-highlighted code block. The query is
- * first run through {@link prettySql} so one-line Genie output reads as
+ * first run through {@link _prettySql} so one-line Genie output reads as
  * formatted SQL, then highlighted to minimal inline HTML via
  * {@link highlightToHtml} (shiki). Unlike Streamdown's code renderer,
  * this emits a plain `<pre><code>` with only per-token color spans - no
@@ -345,18 +345,23 @@ const CopyButton = ({ value, className }: { value: string; className?: string })
  * the tokens are ready to avoid a flash of empty space.
  */
 export const SqlBlock = ({ sql }: { sql: string }) => {
-  const formatted = useMemo(() => prettySql(sql), [sql]);
+  const [formatted, setFormatted] = useState(sql);
   const [html, setHtml] = useState<string | null>(null);
   useEffect(() => {
     let active = true;
+    setFormatted(sql);
     setHtml(null);
-    void highlightToHtml(formatted, "sql").then((result) => {
-      if (active) setHtml(result);
+    void _prettySql(sql).then((source) => {
+      if (!active) return;
+      setFormatted(source);
+      void highlightToHtml(source, "sql").then((result) => {
+        if (active) setHtml(result);
+      });
     });
     return () => {
       active = false;
     };
-  }, [formatted]);
+  }, [sql]);
   return (
     <div className="group relative">
       <CopyButton

package/src/react/mastra-chat.tsx

@@ -15,7 +15,7 @@ import type {
   ToolEvent,
   ToolProgress,
 } from "./types.ts";
-import { exportChat, type EmbedResolver, type ExportFormat } from "../support/export.ts";
+import type { EmbedResolver, ExportFormat } from "../support/export.ts";
 import {
   useMastraClient,
   useMastraDefaultModel,
@@ -36,6 +36,8 @@ import {
   type ThreadSession,
 } from "../support/thread-sessions.ts";
 
+const _loadChatExport = () => import("../support/export.ts");
+
 // Self-contained drop-in chat. `useMastraChat` drives the conversation
 // over `@mastra/client-js`: `agent.stream()` returns a Response
 // augmented with `processDataStream()`, which pushes typed Mastra
@@ -1274,6 +1276,7 @@ export const useMastraChat = (
       const title =
         (activeThreadId && threads.find((t) => t.id === activeThreadId)?.title) || "Conversation";
       try {
+        const { exportChat } = await _loadChatExport();
         await exportChat({
           messages: getSession(activeKey).messages,
           format,
@@ -1294,6 +1297,7 @@ export const useMastraChat = (
   const exportMessage = useCallback(
     async (message: UIMessage, format: ExportFormat) => {
       try {
+        const { exportChat } = await _loadChatExport();
         await exportChat({
           messages: [message],
           format,

package/src/support/_shiki-runtime.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 githubLight from "shiki/themes/github-light.mjs";
+
+/** Create the shared highlighter with the exact configured language set. */
+export function createHighlighter() {
+  return createHighlighterCore({
+    themes: [githubLight],
+    langs: [sql, python, typescript, javascript, json, bash, yaml, markdown],
+    engine: createOnigurumaEngine(import("shiki/wasm")),
+  });
+}

package/src/support/export.ts

@@ -26,8 +26,7 @@
 import { string } from "@dbx-tools/shared-core";
 import { marker as markers, type Chart, type StatementData } from "@dbx-tools/shared-mastra";
 import type { UIMessage } from "ai";
-import * as echarts from "echarts";
-import { marked } from "marked";
+import type { EChartsCoreOption } from "echarts";
 import { normalizeChartOption } from "./chart-option.ts";
 import { LIGHT_CHART_CHROME } from "./chart-theme.ts";
 import { downloadFile } from "./download.ts";
@@ -271,7 +270,9 @@ async function messageBodyHtml(message: UIMessage, resolver: EmbedResolver): Pro
     if (seg.kind === "text") {
       if (!seg.text.trim()) continue;
       parts.push(
-        isAssistant ? markdownToHtml(seg.text) : `<p class="plain">${escapeHtml(seg.text)}</p>`,
+        isAssistant
+          ? await _markdownToHtml(seg.text)
+          : `<p class="plain">${escapeHtml(seg.text)}</p>`,
       );
       continue;
     }
@@ -287,7 +288,8 @@ async function messageBodyHtml(message: UIMessage, resolver: EmbedResolver): Pro
 }
 
 /** Render a markdown fragment to an HTML string (GFM tables, line breaks). */
-function markdownToHtml(md: string): string {
+async function _markdownToHtml(md: string): Promise<string> {
+  const { marked } = await import("marked");
   return marked.parse(md, { async: false, gfm: true, breaks: true }) as string;
 }
 
@@ -309,6 +311,7 @@ async function chartSvg(resolver: EmbedResolver, id: string): Promise<string | n
   try {
     const chart = await resolver.chart(id);
     if (!chart?.result) return null;
+    const echarts = await import("echarts");
     const instance = echarts.init(null, undefined, {
       renderer: "svg",
       ssr: true,
@@ -317,7 +320,7 @@ async function chartSvg(resolver: EmbedResolver, id: string): Promise<string | n
     });
     try {
       instance.setOption(
-        normalizeChartOption(chart.result.option, LIGHT_CHART_CHROME) as echarts.EChartsCoreOption,
+        normalizeChartOption(chart.result.option, LIGHT_CHART_CHROME) as EChartsCoreOption,
       );
       return instance.renderToSVGString();
     } finally {

package/src/support/shiki-plugin.ts

@@ -1,10 +1,6 @@
 import { string } from "@dbx-tools/shared-core";
-import {
-  createHighlighter,
-  type BundledLanguage,
-  type BundledTheme,
-  type Highlighter,
-} from "shiki";
+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
@@ -39,20 +35,22 @@ const THEME: BundledTheme = "github-light";
 /** Languages we can tokenize, as a set for O(1) support checks. */
 const SUPPORTED = new Set<BundledLanguage>(LANGUAGES);
 
-let _highlighter: Highlighter | null = null;
-let _loading: Promise<Highlighter> | null = null;
+let _highlighter: HighlighterCore | null = null;
+let _loading: Promise<HighlighterCore> | null = null;
 
 /** Lazily create the shared shiki highlighter (singleton, loaded once). */
-function loadHighlighter(): Promise<Highlighter> {
-  _loading ??= createHighlighter({ themes: [THEME], langs: LANGUAGES }).then((h) => {
-    _highlighter = h;
-    return h;
-  });
+function loadHighlighter(): Promise<HighlighterCore> {
+  _loading ??= import("./_shiki-runtime.ts")
+    .then(({ createHighlighter }) => createHighlighter())
+    .then((highlighter) => {
+      _highlighter = highlighter;
+      return highlighter;
+    });
   return _loading;
 }
 
 /** Tokenize `code` with the active theme into Streamdown's result shape. */
-function highlightTokens(h: Highlighter, code: string, language: BundledLanguage) {
+function highlightTokens(h: HighlighterCore, code: string, language: BundledLanguage) {
   const { tokens, fg, bg, rootStyle } = h.codeToTokens(code, {
     lang: language,
     theme: THEME,