@dbx-tools/ui-mastra 0.6.222 → 0.6.224

package/README.md

@@ -26,8 +26,8 @@ Key features:
   resumed-stream handling. An email-shaped input (the `send_email` tool)
   renders as a formatted To / Cc / Subject / Markdown-body preview rather than
   raw JSON.
-- Complete native tool input/results retained behind expandable Request and
-  Response rows in each tool pill.
+- Complete native tool input/results retained behind expandable,
+  syntax-highlighted JSON Request and Response rows in each tool pill.
 - Typed per-turn application context through Mastra's native `RequestContext`
   and server-side `requestContextSchema`.
 - Inline embed rendering for `[chart:<id>]` and `[data:<id>]` markers produced by

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.6.222";
+export const PACKAGE_VERSION = "0.6.224";
 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";
@@ -52,7 +52,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 } from "./src/react/markdown.tsx";
+export { AssistantMarkdown, ToolMarkdown, SqlBlock, JsonBlock } 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

@@ -31,12 +31,12 @@
     "react-dom": "~19.2.4"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "0.6.222",
-    "@dbx-tools/shared-genie": "0.6.222",
-    "@dbx-tools/shared-mastra": "0.6.222",
-    "@dbx-tools/shared-model": "0.6.222",
-    "@dbx-tools/ui-appkit": "0.6.222",
-    "@dbx-tools/ui-branding": "0.6.222",
+    "@dbx-tools/shared-core": "0.6.224",
+    "@dbx-tools/shared-genie": "0.6.224",
+    "@dbx-tools/shared-mastra": "0.6.224",
+    "@dbx-tools/shared-model": "0.6.224",
+    "@dbx-tools/ui-appkit": "0.6.224",
+    "@dbx-tools/ui-branding": "0.6.224",
     "@mastra/client-js": "1.50.0",
     "@tanstack/react-table": "^8.21.3",
     "ai": "^5.0.0",
@@ -52,7 +52,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.222",
+  "version": "0.6.224",
   "type": "module",
   "exports": {
     "./react": "./src/react/index.ts",

package/src/react/markdown.tsx

@@ -21,7 +21,7 @@ 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
-// standalone syntax-highlighted SQL block and a compact copy button.
+// standalone syntax-highlighted SQL/JSON blocks and a compact copy button.
 
 /**
  * Minimal hast node shape we walk to lift a GFM markdown table out of
@@ -181,6 +181,27 @@ 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
@@ -346,17 +367,12 @@ const CopyButton = ({ value, className }: { value: string; className?: string })
  */
 export const SqlBlock = ({ sql }: { sql: string }) => {
   const [formatted, setFormatted] = useState(sql);
-  const [html, setHtml] = useState<string | null>(null);
+  const html = useHighlightedHtml(formatted, "sql");
   useEffect(() => {
     let active = true;
     setFormatted(sql);
-    setHtml(null);
     void _prettySql(sql).then((source) => {
-      if (!active) return;
-      setFormatted(source);
-      void highlightToHtml(source, "sql").then((result) => {
-        if (active) setHtml(result);
-      });
+      if (active) setFormatted(source);
     });
     return () => {
       active = false;
@@ -378,3 +394,21 @@ export const SqlBlock = ({ sql }: { sql: string }) => {
     </div>
   );
 };
+
+/**
+ * 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-[11px] leading-relaxed",
+        className,
+      )}
+    >
+      {html === null ? <code>{json}</code> : <code dangerouslySetInnerHTML={{ __html: html }} />}
+    </pre>
+  );
+};

package/src/react/tool-pill.tsx

@@ -8,7 +8,7 @@ import {
   cn,
 } from "@dbx-tools/ui-appkit/react";
 import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
-import { SqlBlock, ToolMarkdown } from "./markdown.tsx";
+import { JsonBlock, SqlBlock, ToolMarkdown } from "./markdown.tsx";
 import type { ToolEvent, ToolProgress } from "./types.ts";
 
 // Consolidated tool-session pill and its Genie progress detail view:
@@ -465,9 +465,10 @@ const RawToolPayload = ({ label, value }: { label: "Request" | "Response"; value
       <span>{label}</span>
     </CollapsibleTrigger>
     <CollapsibleContent>
-      <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words border-t border-border/50 px-2 py-2 font-mono text-[11px] leading-relaxed text-foreground">
-        {formatRawToolPayload(value)}
-      </pre>
+      <JsonBlock
+        json={formatRawToolPayload(value)}
+        className="max-h-80 border-t border-border/50 px-2 py-2 text-foreground"
+      />
     </CollapsibleContent>
   </Collapsible>
 );