@dbx-tools/ui-mastra 0.9.110 → 0.9.112

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.110";
+export const PACKAGE_VERSION = "0.9.112";
 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";

package/package.json

@@ -29,11 +29,11 @@
     "react-dom": "~19.2.4"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "^0.9.110",
-    "@dbx-tools/shared-genie": "^0.9.110",
-    "@dbx-tools/shared-mastra": "^0.9.110",
-    "@dbx-tools/shared-model": "^0.9.110",
-    "@dbx-tools/ui": "^0.9.110",
+    "@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",
     "@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.110",
+  "version": "0.9.112",
   "dbxToolsConfig": {
     "tags": [
       "ui"

package/src/react/bubbles.tsx

@@ -192,7 +192,7 @@ const ToolApprovalCard = ({
       {asEmailInput(input) ? (
         <EmailApprovalPreview email={asEmailInput(input)!} />
       ) : (
-        <RecordPreview value={input} className="rounded bg-background/40" />
+        <RecordPreview value={input} className="max-h-80 rounded bg-background/40" />
       )}
       {expired ? (
         <div className="mt-3 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">

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/tool-pill.tsx

@@ -4,11 +4,13 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
+  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:
@@ -22,6 +24,9 @@ import type { ToolEvent, ToolProgress } from "./types.ts";
  * `Execute Command` rather than `Mastra Workspace Execute Command`.
  */
 const MASTRA_WORKSPACE_TOOL_PREFIX = "mastra_workspace_";
+const TOOL_LABELS: Readonly<Record<string, string>> = {
+  execute_typescript: "Run Workflow",
+};
 
 /**
  * Turn a snake/camel tool id into a Title Cased label the user can
@@ -38,6 +43,8 @@ const MASTRA_WORKSPACE_TOOL_PREFIX = "mastra_workspace_";
  *   `myCoolTool`    -> `My Cool Tool`
  */
 export const humanizeToolName = (toolName: string): string => {
+  const explicitLabel = TOOL_LABELS[toolName];
+  if (explicitLabel) return explicitLabel;
   const label = toolName.startsWith(MASTRA_WORKSPACE_TOOL_PREFIX)
     ? toolName.slice(MASTRA_WORKSPACE_TOOL_PREFIX.length)
     : toolName;
@@ -383,20 +390,50 @@ 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;
+  try {
+    const parsed: unknown = JSON.parse(trimmed);
+    return typeof parsed === "object" && parsed !== null ? parsed : undefined;
+  } catch {
+    return 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="max-h-80 border-t border-border/50 bg-transparent text-foreground"
+          />
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
 
 export type ToolInputPresentation = {
   label: "Code" | "Command" | "Output";
@@ -590,6 +627,43 @@ const hasExpandableDetails = (event: ToolEvent): boolean => {
   );
 };
 
+const ToolCallDetails = ({
+  event,
+  showQuestion = false,
+}: {
+  event: ToolEvent;
+  showQuestion?: boolean;
+}) => {
+  const question = askGenieQuestion(event);
+  const summary = summarizeProgress(event.progress ?? []);
+  const inputPresentation =
+    "input" in event ? toolInputPresentation(event.toolName, event.input) : undefined;
+  const outputPresentation =
+    "output" in event ? toolOutputPresentation(event.toolName, event.output) : undefined;
+
+  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>
+      ) : null}
+      {inputPresentation ? (
+        <ToolInputSource presentation={inputPresentation} />
+      ) : "input" in event ? (
+        <RawToolPayload label="Request" value={event.input} />
+      ) : null}
+      <WebSearchProgressDetails event={event} />
+      <ToolProgressDetails summary={summary} omitQuestion />
+      {outputPresentation?.language === "json" ? (
+        <RawToolPayload label="Output" value={outputPresentation.source} />
+      ) : outputPresentation ? (
+        <ToolInputSource presentation={outputPresentation} />
+      ) : "output" in event ? (
+        <RawToolPayload label="Response" value={event.output} />
+      ) : null}
+    </div>
+  );
+};
+
 /**
  * One row inside {@link ToolSessionPill}. Always-visible header
  * shows the status icon, the tool's verb (`Called Ask Genie`,
@@ -608,12 +682,7 @@ const ToolCallRow = ({ event }: { event: ToolEvent }) => {
   const isRunning = event.status === "running";
   const isError = event.status === "error";
   const question = askGenieQuestion(event);
-  const summary = summarizeProgress(event.progress ?? []);
   const expandable = hasExpandableDetails(event);
-  const inputPresentation =
-    "input" in event ? toolInputPresentation(event.toolName, event.input) : undefined;
-  const outputPresentation =
-    "output" in event ? toolOutputPresentation(event.toolName, event.output) : undefined;
   // Inner rows defer to the live wire status when running (e.g.
   // "Executing query") so users tracking the open pill see the
   // backend's freshest state - not just the static
@@ -659,19 +728,8 @@ const ToolCallRow = ({ event }: { event: ToolEvent }) => {
         {header}
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="flex flex-col gap-2 px-2 pb-2">
-          {inputPresentation ? (
-            <ToolInputSource presentation={inputPresentation} />
-          ) : "input" in event ? (
-            <RawToolPayload label="Request" value={event.input} />
-          ) : null}
-          <WebSearchProgressDetails event={event} />
-          <ToolProgressDetails summary={summary} omitQuestion />
-          {outputPresentation ? (
-            <ToolInputSource presentation={outputPresentation} />
-          ) : "output" in event ? (
-            <RawToolPayload label="Response" value={event.output} />
-          ) : null}
+        <div className="px-2 pb-2">
+          <ToolCallDetails event={event} />
         </div>
       </CollapsibleContent>
     </Collapsible>
@@ -762,10 +820,12 @@ export const ToolSessionPill = ({ events }: { events: ToolEvent[] }) => {
           )}
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <div className="mt-1.5 flex flex-col gap-1">
-            {events.map((event) => (
-              <ToolCallRow key={event.id} event={event} />
-            ))}
+          <div className={cn("mt-1.5", events.length > 1 && "flex flex-col gap-1")}>
+            {events.length === 1 ? (
+              <ToolCallDetails event={latest} showQuestion />
+            ) : (
+              events.map((event) => <ToolCallRow key={event.id} event={event} />)
+            )}
           </div>
         </CollapsibleContent>
       </Collapsible>

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;
-    },
-  };
-}