From 8299c9da49760097a8ea8c04e9a04452d6ae41da Mon Sep 17 00:00:00 2001
From: Aadesh Kheria <kheriaaadesh@gmail.com>
Date: Wed, 6 May 2026 13:54:11 -0700
Subject: [PATCH 1/2] initial commit

---
 .../dashboards/[dashboardId]/page-client.tsx  |   2 +-
 .../dashboard-sandbox-host.tsx                | 119 ++++++++++++++----
 2 files changed, 96 insertions(+), 25 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/[dashboardId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/[dashboardId]/page-client.tsx
index 17ad8f25bb..333fc15fac 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/[dashboardId]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/[dashboardId]/page-client.tsx
@@ -391,7 +391,7 @@ function DashboardDetailContent({
     <PageLayout fillWidth noPadding>
       {/* Both panels are always in the DOM so the iframe never unmounts/reloads.
           The chat panel animates its width; the dashboard panel adjusts via flex-1. */}
-      <div data-full-bleed className="flex h-full">
+      <div data-full-bleed className="flex h-[calc(100vh-4.5rem)] dark:h-[calc(100vh-5.75rem)]">
         {/* Dashboard iframe panel */}
         <div
           className={cn(
diff --git a/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx b/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx
index 30f5b5f90a..f538d69252 100644
--- a/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx
+++ b/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx
@@ -18,13 +18,41 @@ type DashboardArtifact = {
 function html(strings: TemplateStringsArray, ...values: unknown[]): string {
   return strings.reduce<string>((result, str, i) => result + str + (values[i] ?? ''), '');
 }
-
 const isDev = process.env.NODE_ENV === "development";
 
+function getEsmFallbackVersion(version: string): string {
+  const parts = version.split(".");
+  const [major, minor, patchString] = parts;
+  const patch = Number(patchString);
+  return `${major}.${minor}.${patch - 1}`;
+}
+
 function getDependencyScripts(esmVersion: string, esmFallbackVersion: string, dashboardUrl: string): string {
   if (isDev) {
     return html`
       <script type="module">
+        function formatDependencyError(error) {
+          return error instanceof Error ? error.message : String(error);
+        }
+
+        function reportDependencyError(message, error) {
+          window.parent.postMessage({
+            type: 'dashboard-sandbox-dependency-error',
+            message,
+            stack: error instanceof Error ? error.stack : undefined,
+          }, '*');
+        }
+
+        function failDependencyLoad(message, error) {
+          reportDependencyError(message, error);
+          window.__depsError = {
+            message,
+            stack: error instanceof Error ? error.stack : undefined,
+          };
+          window.__depsReady = true;
+          window.dispatchEvent(new Event('deps-ready'));
+        }
+
         import React from 'https://esm.sh/react@19.2.3';
         import * as ReactDOM from 'https://esm.sh/react-dom@19.2.3?deps=react@19.2.3';
         import * as ReactDOMClient from 'https://esm.sh/react-dom@19.2.3/client?deps=react@19.2.3';
@@ -41,14 +69,14 @@ function getDependencyScripts(esmVersion: string, esmFallbackVersion: string, da
           window.StackServerApp = StackSDK.StackServerApp;
           window.StackSDK = StackSDK;
         } catch (e) {
-          window.parent.postMessage({ type: 'dashboard-error-boundary', message: '[sandbox] Stack SDK failed at version ${esmVersion}, trying fallback ${esmFallbackVersion}: ' + e?.message }, '*');
+          reportDependencyError('[sandbox] @stackframe/js failed at version ${esmVersion}; trying fallback ${esmFallbackVersion}: ' + formatDependencyError(e), e);
           try {
             const StackSDK = await import('https://esm.sh/@stackframe/js@${esmFallbackVersion}');
             window.StackAdminApp = StackSDK.StackAdminApp;
             window.StackServerApp = StackSDK.StackServerApp;
             window.StackSDK = StackSDK;
           } catch (e2) {
-            window.parent.postMessage({ type: 'dashboard-error-boundary', message: '[sandbox] Stack SDK fallback also failed: ' + e2?.message }, '*');
+            failDependencyLoad('[sandbox] @stackframe/js fallback failed at version ${esmFallbackVersion}: ' + formatDependencyError(e2), e2);
           }
         }
         window.generateUuid = () => crypto.randomUUID();
@@ -61,10 +89,8 @@ function getDependencyScripts(esmVersion: string, esmFallbackVersion: string, da
           window.dispatchEvent(new Event('deps-ready'));
         };
         script.onerror = (e) => {
-          window.parent.postMessage({
-            type: 'dashboard-error-boundary',
-            message: 'Failed to load dashboard-ui-components IIFE bundle',
-          }, '*');
+          const message = '[sandbox] Failed to load local dashboard-ui-components IIFE bundle. Run pnpm --filter @stackframe/dashboard-ui-components dev or pnpm --filter @stackframe/dashboard-ui-components build so apps/dashboard/public/dashboard-ui-components.iife.js exists.';
+          failDependencyLoad(message, e instanceof Error ? e : new Error(message));
         };
         document.head.appendChild(script);
       </script>`;
@@ -72,6 +98,30 @@ function getDependencyScripts(esmVersion: string, esmFallbackVersion: string, da
 
   return html`
     <script type="module">
+      const CUSTOM_DASHBOARD_LOAD_ERROR_MESSAGE = 'There was a problem loading custom dashboards. Please refresh the page and try again.';
+
+      function formatDependencyError(error) {
+        return error instanceof Error ? error.message : String(error);
+      }
+
+      function reportDependencyError(message, error) {
+        window.parent.postMessage({
+          type: 'dashboard-sandbox-dependency-error',
+          message,
+          stack: error instanceof Error ? error.stack : undefined,
+        }, '*');
+      }
+
+      function failDependencyLoad(message, error) {
+        reportDependencyError(message, error);
+        window.__depsError = {
+          message: CUSTOM_DASHBOARD_LOAD_ERROR_MESSAGE,
+          stack: error instanceof Error ? error.stack : undefined,
+        };
+        window.__depsReady = true;
+        window.dispatchEvent(new Event('deps-ready'));
+      }
+
       import React from 'https://esm.sh/react@19.2.3';
       import * as ReactDOM from 'https://esm.sh/react-dom@19.2.3?deps=react@19.2.3';
       import * as ReactDOMClient from 'https://esm.sh/react-dom@19.2.3/client?deps=react@19.2.3';
@@ -89,21 +139,27 @@ function getDependencyScripts(esmVersion: string, esmFallbackVersion: string, da
           import('https://esm.sh/@stackframe/js@${esmVersion}'),
         ]);
       } catch (e) {
-        window.parent.postMessage({ type: 'dashboard-error-boundary', message: '[sandbox] Failed to load at version ${esmVersion}, trying fallback ${esmFallbackVersion}: ' + e?.message }, '*');
-        [DashboardUIComponents, StackSDK] = await Promise.all([
-          import('https://esm.sh/@stackframe/dashboard-ui-components@${esmFallbackVersion}?deps=react@19.2.3,react-dom@19.2.3'),
-          import('https://esm.sh/@stackframe/js@${esmFallbackVersion}'),
-        ]);
+        reportDependencyError('[sandbox] Custom dashboard packages failed at version ${esmVersion}; trying fallback ${esmFallbackVersion}: ' + formatDependencyError(e), e);
+        try {
+          [DashboardUIComponents, StackSDK] = await Promise.all([
+            import('https://esm.sh/@stackframe/dashboard-ui-components@${esmFallbackVersion}?deps=react@19.2.3,react-dom@19.2.3'),
+            import('https://esm.sh/@stackframe/js@${esmFallbackVersion}'),
+          ]);
+        } catch (e2) {
+          failDependencyLoad('[sandbox] Custom dashboard package fallback failed at version ${esmFallbackVersion}: ' + formatDependencyError(e2), e2);
+        }
       }
 
-      window.DashboardUI = DashboardUIComponents;
-      window.StackAdminApp = StackSDK.StackAdminApp;
-      window.StackServerApp = StackSDK.StackServerApp;
-      window.StackSDK = StackSDK;
-      window.generateUuid = () => crypto.randomUUID();
+      if (!window.__depsError) {
+        window.DashboardUI = DashboardUIComponents;
+        window.StackAdminApp = StackSDK.StackAdminApp;
+        window.StackServerApp = StackSDK.StackServerApp;
+        window.StackSDK = StackSDK;
+        window.generateUuid = () => crypto.randomUUID();
 
-      window.__depsReady = true;
-      window.dispatchEvent(new Event('deps-ready'));
+        window.__depsReady = true;
+        window.dispatchEvent(new Event('deps-ready'));
+      }
     </script>`;
 }
 
@@ -118,7 +174,7 @@ function getSandboxDocument(artifact: DashboardArtifact, baseUrl: string, dashbo
   const sourceCode = escapeScriptContent(artifact.runtimeCodegen.uiRuntimeSourceCode);
   const darkClass = initialTheme === "dark" ? "dark" : "";
   const esmVersion = packageJson.version;
-  const esmFallbackVersion = "2.8.71";
+  const esmFallbackVersion = getEsmFallbackVersion(esmVersion);
   const devScriptSrc = isDev ? ` ${dashboardUrl}` : '';
   const devConnectSrc = isDev ? ` ${dashboardUrl}` : '';
 
@@ -307,10 +363,18 @@ function getSandboxDocument(artifact: DashboardArtifact, baseUrl: string, dashbo
       };
       
       async function waitForDeps() {
-        if (window.__depsReady) return;
-        await new Promise(resolve => {
-          window.addEventListener('deps-ready', resolve, { once: true });
-        });
+        if (!window.__depsReady) {
+          await new Promise(resolve => {
+            window.addEventListener('deps-ready', resolve, { once: true });
+          });
+        }
+        if (window.__depsError) {
+          const error = new Error(window.__depsError.message || 'There was a problem loading custom dashboards. Please refresh the page and try again.');
+          if (window.__depsError.stack) {
+            error.stack = window.__depsError.stack;
+          }
+          throw error;
+        }
       }
 
       async function requestAccessToken() {
@@ -735,6 +799,13 @@ export const DashboardSandboxHost = memo(function DashboardSandboxHost({
         return;
       }
 
+      if (type === "dashboard-sandbox-dependency-error") {
+        const err = new Error(event.data.message ?? 'Unknown custom dashboard dependency error');
+        if (event.data.stack) err.stack = event.data.stack;
+        captureError('dashboard-sandbox-dependency-error', err);
+        return;
+      }
+
       if (type === "dashboard-error-boundary") {
         const err = new Error(event.data.message ?? 'Unknown dashboard error');
         if (event.data.stack) err.stack = event.data.stack;

From ec9ad36bf5d78361c1ba721d905990bc8ea71e81 Mon Sep 17 00:00:00 2001
From: Aadesh Kheria <kheriaaadesh@gmail.com>
Date: Wed, 6 May 2026 15:18:41 -0700
Subject: [PATCH 2/2] Enhance version fallback logic in dashboard sandbox host

---
 .../commands/create-dashboard/dashboard-sandbox-host.tsx   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx b/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx
index f538d69252..f2312cbdb6 100644
--- a/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx
+++ b/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx
@@ -22,9 +22,10 @@ const isDev = process.env.NODE_ENV === "development";
 
 function getEsmFallbackVersion(version: string): string {
   const parts = version.split(".");
-  const [major, minor, patchString] = parts;
-  const patch = Number(patchString);
-  return `${major}.${minor}.${patch - 1}`;
+  if (parts.length !== 3) return version;
+  const patch = Number(parts[2]);
+  if (!Number.isInteger(patch) || patch <= 0) return version;
+  return `${parts[0]}.${parts[1]}.${patch - 1}`;
 }
 
 function getDependencyScripts(esmVersion: string, esmFallbackVersion: string, dashboardUrl: string): string {