@dbx-tools/ui-mastra 0.3.6 → 0.3.7

package/package.json

@@ -26,19 +26,19 @@
     "shiki": "^3.0.0",
     "sql-formatter": "^15.6.9",
     "streamdown": "^2.5.0",
-    "@dbx-tools/shared-core": "0.3.6",
-    "@dbx-tools/shared-genie": "0.3.6",
-    "@dbx-tools/shared-mastra": "0.3.6",
-    "@dbx-tools/ui-appkit": "0.3.6",
-    "@dbx-tools/shared-model": "0.3.6",
-    "@dbx-tools/ui-branding": "0.3.6"
+    "@dbx-tools/shared-core": "0.3.7",
+    "@dbx-tools/shared-genie": "0.3.7",
+    "@dbx-tools/shared-mastra": "0.3.7",
+    "@dbx-tools/ui-appkit": "0.3.7",
+    "@dbx-tools/shared-model": "0.3.7",
+    "@dbx-tools/ui-branding": "0.3.7"
   },
   "main": "index.ts",
   "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.6",
+  "version": "0.3.7",
   "types": "index.ts",
   "type": "module",
   "exports": {

package/src/react/chat-view.tsx

@@ -349,10 +349,14 @@ export const ChatView = ({
     if (isMobile) setMobileDrawerOpen((open) => !open);
     else toggleDesktopSidebar();
   };
-  // Top bar carries only the sidebar toggle now; the model picker, export, and
-  // clear all live in a toolbar row below the composer, closer to where the
-  // user is typing.
-  const showHeader = showSidebar;
+  // The top bar carries only the sidebar toggle; the model picker, export, and
+  // clear controls live in a toolbar row below the composer, closer to where
+  // the user is typing. The toggle is a mobile hamburger, or a desktop "show"
+  // affordance while the inline sidebar is collapsed - so the bar renders only
+  // when that toggle would actually be visible (an open desktop sidebar has its
+  // own hide button, leaving nothing for the bar to hold).
+  const showSidebarToggle = showSidebar && (isMobile || !desktopSidebarOpen);
+  const showHeader = showSidebarToggle;
   const showComposerToolbar = showModelDisplay || showExport || showClear;
 
   // Clear confirmation is an AppKit `AlertDialog` (a real modal), plus an
@@ -446,33 +450,31 @@ export const ChatView = ({
           ))}
         <div className="flex h-full min-w-0 flex-1 flex-col">
           {showHeader && (
-            <div className="mx-auto flex w-full max-w-4xl items-center justify-between gap-2 px-3 pb-2 pt-1 text-xs text-muted-foreground md:gap-3 md:px-6">
-              <div className="flex shrink-0 items-center gap-2">
-                {/*
-                 * Sidebar toggle. On mobile it's a persistent hamburger (the
-                 * overlay drawer has no always-visible hide button). On desktop
-                 * the panel hides itself, so the header only needs a "show"
-                 * affordance while the inline sidebar is collapsed.
-                 */}
-                {showSidebar && (isMobile || !desktopSidebarOpen) && (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon-sm"
-                        onClick={toggleSidebar}
-                        aria-label={sidebarOpen ? "Hide conversations" : "Show conversations"}
-                      >
-                        <PanelLeftIcon className="size-4" />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      {sidebarOpen ? "Hide conversations" : "Show conversations"}
-                    </TooltipContent>
-                  </Tooltip>
-                )}
-              </div>
+            /*
+             * Slim top bar holding the sidebar toggle. On mobile the toggle is
+             * a persistent hamburger (the overlay drawer has no always-visible
+             * hide button); on desktop it's a "show" affordance rendered only
+             * while the inline sidebar is collapsed (an open sidebar has its
+             * own hide button). `showHeader` already tracks that visibility, so
+             * the bar never renders empty.
+             */
+            <div className="mx-auto flex w-full max-w-4xl items-center gap-2 px-3 pb-2 pt-1 text-xs text-muted-foreground md:gap-3 md:px-6">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={toggleSidebar}
+                    aria-label={sidebarOpen ? "Hide conversations" : "Show conversations"}
+                  >
+                    <PanelLeftIcon className="size-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {sidebarOpen ? "Hide conversations" : "Show conversations"}
+                </TooltipContent>
+              </Tooltip>
             </div>
           )}
           <div className="relative flex flex-1 flex-col overflow-hidden">

package/src/react/mastra-chat.tsx

@@ -46,10 +46,9 @@ import type {
 // `{ runId, payload: { toolCallId, toolName, args } }`. We surface that
 // as an out-of-band entry in `pendingApprovalsByMessage` and wire
 // `onResolveToolApproval` to {@link MastraPluginClient.approveToolCallStream}
-// / `declineToolCallStream`, which read SSE directly and avoid a stock
-// `@mastra/client-js` bug on resumed approval streams.
-// both of which return a fresh stream Response we run through the same
-// chunk handler.
+// / `declineToolCallStream` - both of which read SSE directly (avoiding a
+// stock `@mastra/client-js` bug on resumed approval streams) and return a
+// fresh stream Response we run through the same chunk handler.
 //
 // On mount the transcript hydrates with the most recent page of thread
 // history from the Mastra plugin's `/history` endpoint; scrolling near
@@ -1256,9 +1255,9 @@ export const useMastraChat = (
     [activeKey, mastraClient, updateSession],
   );
 
-  // Merge optimistic rows
-  // the server list, newest first, dropping any optimistic entry the
-  // server already returns so a thread is never listed twice.
+  // Merge optimistic rows over the server list, newest first, dropping any
+  // optimistic entry the server already returns so a thread is never listed
+  // twice.
   const sidebarThreads = useMemo<ThreadSummary[]>(() => {
     // Title overlay precedence per row: a manual rename always wins;
     // otherwise a provisional first-message title fills an untitled row

package/src/support/export.ts

@@ -162,13 +162,20 @@ function printViaHiddenIframe(html: string, downloadName: string): void {
       return;
     }
     // Settle so charts / fonts lay out, then print. `afterprint` removes the
-    // iframe once the dialog closes (a timeout backstops browsers that don't
-    // fire it).
+    // iframe once the dialog closes; a 60s timer backstops browsers that don't
+    // fire it. The backstop is armed BEFORE `print()` so a throw (sandboxed /
+    // policy-restricted frames can reject `print()`) still cleans up, and the
+    // export falls back to a file download rather than silently vanishing.
     win.addEventListener("afterprint", cleanup);
     win.setTimeout(() => {
-      win.focus();
-      win.print();
       window.setTimeout(cleanup, 60000);
+      try {
+        win.focus();
+        win.print();
+      } catch {
+        cleanup();
+        downloadTextFile(downloadName, html, "text/html;charset=utf-8");
+      }
     }, PRINT_SETTLE_MS);
   };
 
@@ -478,6 +485,20 @@ function downloadTextFile(filename: string, content: string, mime: string): void
   window.setTimeout(() => URL.revokeObjectURL(url), 1000);
 }
 
+/**
+ * A brand color / font value safe to interpolate into a `<style>` block.
+ * Brand colors are hex-validated upstream, but the font stack is only checked
+ * for non-blankness, so strip the characters that could close a declaration or
+ * rule (`{ } ; < > \` plus HTML-comment openers) to prevent CSS injection into
+ * the export document. Falls back to `fallback` when the value is blank.
+ */
+function cssValue(value: string | undefined, fallback: string): string {
+  const trimmed = value?.trim();
+  if (!trimmed) return fallback;
+  const safe = trimmed.replace(/[{}<>;\\]/g, "");
+  return safe || fallback;
+}
+
 /**
  * Build the inline stylesheet for the exported document, folding in optional
  * brand color / font overrides (falling back to the neutral slate/blue theme
@@ -497,11 +518,13 @@ function downloadTextFile(filename: string, content: string, mime: string): void
  *     out; the visible page margin is re-supplied as body padding.
  */
 function buildDocumentCss(brand?: ExportBrand): string {
-  const fg = brand?.foreground || "#0f172a";
-  const primary = brand?.primary || "#0f172a";
-  const link = brand?.accent || "#2563eb";
-  const font =
-    brand?.fontSans || 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+  const fg = cssValue(brand?.foreground, "#0f172a");
+  const primary = cssValue(brand?.primary, "#0f172a");
+  const link = cssValue(brand?.accent, "#2563eb");
+  const font = cssValue(
+    brand?.fontSans,
+    'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+  );
   return `
   :root { color-scheme: light; }
   * { box-sizing: border-box; }