@sampleapp.ai/sdk 1.0.32 → 1.0.34

package/dist/components/ModalSearchAndChat.js

@@ -148,7 +148,7 @@ export const ModalSearchAndChat = ({ settings, onClose, }) => {
                         }, onMouseLeave: (e) => {
                             e.currentTarget.style.opacity = "1";
                         }, onClick: () => {
-                            console.log("Search for:", searchQuery);
+                            // console.log("Search for:", searchQuery);
                             // Handle search logic here
                         } }, "Search")),
                 ((_b = settings.aiChatSettings) === null || _b === void 0 ? void 0 : _b.exampleQuestions) &&

package/dist/components/sandbox/Sandbox.js

@@ -18,6 +18,12 @@ import { Skeleton } from "../ui/skeleton";
  *     LAUNCHDARKLY_SDK_KEY: "sdk-xxx",
  *   }}
  * />
+ *
+ * // env is optional if published_url is available
+ * <Sandbox
+ *   apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!}
+ *   sandboxId="launchdarkly-feature-flags"
+ * />
  * ```
  */
 export default function Sandbox({ apiKey, sandboxId, env, themeColor, }) {

package/dist/components/sandbox/api.js

@@ -43,17 +43,19 @@ export async function fetchSandboxConfig(apiKey, sandboxId) {
     // link.click();
     // document.body.removeChild(link);
     const containerId = ""; // Will be populated when sandbox is started via sdk.startSandbox()
-    const completeCodeZipFile = containerId
-        ? `${"hello there"}/fileshare?container_id=${containerId}`
-        : `${"hello there"}/fileshare?container_id=placeholder`; // Placeholder until sandbox is started
+    // Set to empty string since this endpoint is not needed
+    const completeCodeZipFile = "";
     // Transform SandboxContent to SandboxConfig
+    // NOTE: published_url takes precedence over chat_uid:
+    // - If published_url exists, it will be used directly as browserUrl (no API call needed)
+    // - If published_url is not available, chat_uid will be used to call startSandbox API
     const config = {
         id: sandboxContent.uid,
         name: sandboxContent.uid, // Use UID as name if no name field exists
         description: sandboxContent.markdown || "", // Use markdown as description
         themeColor: "#3b82f6", // Default theme color
         hasPreview: true,
-        chatUid: sandboxContent.chat_uid || "", // Include chatUid for startSandbox
+        chatUid: sandboxContent.chat_uid || "", // Fallback: only used if published_url is not available
         useCases: [
             {
                 id: sandboxContent.uid,
@@ -64,12 +66,14 @@ export async function fetchSandboxConfig(apiKey, sandboxId) {
                 frameworks: [
                     {
                         key: frameworkKey,
-                        browserUrl: "", // Will be set when sandbox is started
+                        // published_url takes precedence: if available, use it directly (no startSandbox API call needed)
+                        // If not available, chat_uid will be used to call startSandbox API as fallback
+                        browserUrl: sandboxContent.published_url || "",
                         sandboxUid: sandboxContent.uid,
                         // Use generated_code if available, otherwise fallback to empty object
                         codeZipFile: Object.keys(generatedCode).length > 0 ? generatedCode : "", // Backward compatible: empty string if no generated_code
                         completeCodeZipFile,
-                        useVm: false,
+                        useVm: sandboxContent.is_vm_enabled || false, // Use is_vm_enabled from sandbox content
                         // CustomConsole is now sandboxContent.markdown
                         CustomConsole: sandboxContent.markdown || "",
                         GuideView: "Default Guide",

package/dist/components/sandbox/guardian/context/vm-context.js

@@ -3,6 +3,7 @@ import React, { createContext, useContext, useState } from "react";
 const VmContext = createContext(undefined);
 export const VmProvider = ({ children }) => {
     const [vmUrlMap, setVmUrlMap] = useState({});
+    const [vmResolution, setVmResolution] = useState(undefined);
     const setVmUrl = (uid, url) => {
         setVmUrlMap((prev) => (Object.assign(Object.assign({}, prev), { [uid]: url })));
     };
@@ -17,7 +18,15 @@ export const VmProvider = ({ children }) => {
     const hasError = (uid) => {
         return vmUrlMap[uid] === "error";
     };
-    return (React.createElement(VmContext.Provider, { value: { vmUrlMap, setVmUrl, getVmUrl, setVmError, hasError } }, children));
+    return (React.createElement(VmContext.Provider, { value: {
+            vmUrlMap,
+            setVmUrl,
+            getVmUrl,
+            setVmError,
+            hasError,
+            vmResolution,
+            setVmResolution,
+        } }, children));
 };
 export const useVmContext = () => {
     const context = useContext(VmContext);

package/dist/components/sandbox/guardian/demo/guardian-demo.js

@@ -4,7 +4,7 @@ import ConsoleWithApp from "../ui/console-with-app";
 import { useGuardianContext } from "../context/guardian-context";
 import ConsoleWithGuide from "./left-view";
 import RightView from "../right-view/right-view";
-export default function GuardianDemo({ CustomConsole, GuideView, browserUrl, playgroundUid, useVm, codeZipFile, completeCodeZipFile, variant, themeColor, hasPreview, isFrame = false, isGuardian = false, gitUrl, }) {
+export default function GuardianDemo({ CustomConsole, GuideView, browserUrl, playgroundUid, useVm, codeZipFile, completeCodeZipFile, variant, themeColor, hasPreview, isFrame = false, isGuardian = false, gitUrl, isBrowserUrlReady = false, sandboxId, apiKey, sandboxError, }) {
     const { isBrowserMaximized } = useGuardianContext();
     const { setCurrentView } = useGuardianContext();
     const [reloadCounter, setReloadCounter] = useState(0);
@@ -24,12 +24,12 @@ export default function GuardianDemo({ CustomConsole, GuideView, browserUrl, pla
     }, [setCurrentView]);
     // If isFrame, just return RightView directly
     if (isFrame) {
-        return (React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian }));
+        return (React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian, isBrowserMaximized: isBrowserMaximized, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError }));
     }
     // If browser is maximized, render RightView at full size without the console
     if (isBrowserMaximized && isGuardian) {
         return (React.createElement("div", { className: "w-full h-full rounded-2xl border border-border overflow-hidden" },
-            React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian, isBrowserMaximized: true })));
+            React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian, isBrowserMaximized: true, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError })));
     }
-    return (React.createElement(ConsoleWithApp, { containerClassName: "rounded-2xl border border-border", console: React.createElement(ConsoleWithGuide, { CustomConsole: CustomConsole, GuideView: GuideView, playgroundUid: playgroundUid, onReloadPreview: handleReloadPreview, onStageChange: handleStageChange, codeZipFile: codeZipFile, themeColor: themeColor, browserUrl: browserUrl, gitUrl: gitUrl }), app: React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian }) }));
+    return (React.createElement(ConsoleWithApp, { containerClassName: "rounded-2xl border border-border", console: React.createElement(ConsoleWithGuide, { CustomConsole: CustomConsole, GuideView: GuideView, playgroundUid: playgroundUid, onReloadPreview: handleReloadPreview, onStageChange: handleStageChange, codeZipFile: codeZipFile, themeColor: themeColor, browserUrl: browserUrl, gitUrl: gitUrl, sandboxId: sandboxId, apiKey: apiKey }), app: React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian, isBrowserMaximized: isBrowserMaximized, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError }) }));
 }

package/dist/components/sandbox/guardian/demo/left-view.js

@@ -11,7 +11,7 @@ function Logo({ href, width }) {
             React.createElement("div", { className: "invert dark:invert-0" },
                 React.createElement("img", { src: sampleappLogo, alt: "SampleApp Logo", width: width || 160, height: 40 })))));
 }
-export default function ConsoleWithGuide({ CustomConsole, GuideView, playgroundUid, onReloadPreview, onStageChange, codeZipFile, themeColor, browserUrl, gitUrl, }) {
+export default function ConsoleWithGuide({ CustomConsole, GuideView, playgroundUid, onReloadPreview, onStageChange, codeZipFile, themeColor, browserUrl, gitUrl, sandboxId, apiKey, }) {
     const [currentView, setCurrentView] = useState("console");
     const isConsoleView = useMemo(() => currentView === "console", [currentView]);
     // const isGuideView = useMemo(() => currentView === "guide", [currentView]);
@@ -20,7 +20,7 @@ export default function ConsoleWithGuide({ CustomConsole, GuideView, playgroundU
         if (typeof CustomConsole === "string") {
             return (React.createElement("div", { className: "h-full flex flex-col" },
                 React.createElement("div", { className: "flex-1 px-8 py-6" },
-                    React.createElement(Markdown, { className: "text-gray-100", themeColor: themeColor, browserUrl: browserUrl, gitUrl: gitUrl }, CustomConsole))));
+                    React.createElement(Markdown, { className: "text-gray-100", themeColor: themeColor, browserUrl: browserUrl, gitUrl: gitUrl, sandboxId: sandboxId, apiKey: apiKey }, CustomConsole))));
         }
         const CustomConsoleComponent = CustomConsole;
         return (React.createElement(CustomConsoleComponent, { onReloadPreview: onReloadPreview !== null && onReloadPreview !== void 0 ? onReloadPreview : (() => { }), onStageChange: onStageChange !== null && onStageChange !== void 0 ? onStageChange : (() => { }), themeColor: themeColor }));

package/dist/components/sandbox/guardian/guardian-component.js

@@ -6,28 +6,26 @@ import React, { useEffect, useRef } from "react";
 import { useGuardianContext } from "./context/guardian-context";
 import { useSandboxUrlLoader, } from "./hooks/use-sandbox-url-loader";
 import { useFrameMessages } from "./hooks/use-frame-messages";
+import { useVmContext } from "./context/vm-context";
 import { cn } from "../../../lib/utils";
 export default function GuardianComponent({ demoOptions, frameworkOptions, firstFrameworkByUseCase, currentFramework, currentUseCase, CustomConsole, GuideView, playgroundLogo, playgroundUid, browserUrl, useVm, sandboxUid, codeZipFile, consoleUrlConfigs, completeCodeZipFile, variant, themeColor, hasPreview = true, isFrame = false, apiKey, env, chatUid, hideHeader = true, // Hardcoded to true by default, not exposed in Sandbox.tsx
 gitUrl, }) {
     const { previewUrl, setPreviewUrl } = useGuardianContext();
-    // Debug: Log the props received for sandbox configuration
-    console.log("[GuardianComponent] API config props:", {
-        apiKey: apiKey ? `${apiKey.substring(0, 8)}...` : undefined,
-        env,
-        chatUid,
-        hasApiKey: !!apiKey,
-        hasEnv: !!env,
-        hasChatUid: !!chatUid,
-    });
-    // Build startSandboxConfig only if all required fields are present and non-empty
-    const startSandboxConfig = apiKey && env && chatUid
-        ? {
-            apiKey,
-            env,
-            chatUid,
-        }
-        : undefined;
-    console.log("[GuardianComponent] startSandboxConfig:", startSandboxConfig ? "configured" : "undefined (missing required fields)");
+    const { vmResolution } = useVmContext();
+    const [sandboxError, setSandboxError] = React.useState(null);
+    // Build startSandboxConfig:
+    // - Always include apiKey when available (needed for VM calls even when browserUrl exists)
+    // - Include chatUid when browserUrl is missing (needed for startSandbox API call)
+    // - Include env if provided (will be validated later if required)
+    // PRECEDENCE: published_url takes precedence over chat_uid
+    // - If browserUrl (published_url) exists, it will be used directly (no startSandbox API call needed)
+    // - If browserUrl is not available, we need startSandboxConfig with chatUid to call startSandbox API
+    // This ensures backward compatibility while prioritizing published_url when available
+    const startSandboxConfig = apiKey
+        ? Object.assign({ apiKey }, (!browserUrl && chatUid ? { env, chatUid } : {})) : undefined;
+    // Determine if browserUrl is ready to use immediately (from published_url)
+    // If browserUrl exists, it's ready (startSandboxConfig may still exist with just apiKey for VM calls)
+    const isBrowserUrlReady = !!browserUrl;
     const { getSandboxUrl, loadSandboxUrl, preloadSandboxUrls } = useSandboxUrlLoader(startSandboxConfig);
     // Initialize postMessage listener for iframe communication
     // This sends IFRAME_READY and listens for UPDATE_VIEW messages
@@ -38,20 +36,22 @@ gitUrl, }) {
     const loadedSandboxRef = useRef("");
     // Preload console URLs when component mounts
     useEffect(() => {
-        if (consoleUrlConfigs && consoleUrlConfigs.length > 0) {
+        if (consoleUrlConfigs && consoleUrlConfigs.length > 0 && apiKey) {
             // Create a key from the configs to detect changes
             const configKey = JSON.stringify(consoleUrlConfigs.map((c) => c.sandboxUid));
             // Only preload if we haven't already preloaded these configs
             if (preloadedConfigsRef.current !== configKey) {
                 preloadedConfigsRef.current = configKey;
-                preloadSandboxUrls(consoleUrlConfigs).catch((error) => {
+                // Ensure apiKey is passed to all configs
+                const configsWithApiKey = consoleUrlConfigs.map((config) => (Object.assign(Object.assign({}, config), { apiKey: config.apiKey || apiKey })));
+                preloadSandboxUrls(configsWithApiKey).catch((error) => {
                     console.error("Failed to preload console URLs:", error);
                 });
             }
         }
-        // Only re-run if consoleUrlConfigs changes (not when preloadSandboxUrls changes)
+        // Only re-run if consoleUrlConfigs or apiKey changes
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [consoleUrlConfigs]);
+    }, [consoleUrlConfigs, apiKey]);
     useEffect(() => {
         // Create a key for this sandbox load
         const sandboxKey = `${sandboxUid}-${browserUrl}-${useVm}`;
@@ -67,6 +67,18 @@ gitUrl, }) {
             loadedSandboxRef.current = sandboxKey;
             return;
         }
+        // If useVm is true, wait for resolution from context before loading
+        // The Browser component will measure and set resolution in context after it mounts
+        if (useVm && !vmResolution) {
+            // Don't proceed until resolution is available
+            // The resolution will be set by Browser component via context
+            return;
+        }
+        // If useVm is true, apiKey is required
+        if (useVm && !apiKey) {
+            console.error("apiKey is required when useVm is true");
+            return;
+        }
         // Mark as loading to prevent duplicate requests
         loadedSandboxRef.current = sandboxKey;
         // Load the sandbox URL (will be cached by sandboxUid + browserUrl)
@@ -77,23 +89,29 @@ gitUrl, }) {
             sandboxUid,
             browserUrl,
             useVm,
+            resolution: vmResolution,
+            apiKey,
         })
             .then((url) => {
             setPreviewUrl(url);
+            setSandboxError(null); // Clear error on success
         })
             .catch((error) => {
             console.error("Failed to load sandbox URL:", error);
+            // Store error message for display
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            setSandboxError(errorMessage);
             // Keep preview URL empty on error
         });
-        // Only re-run if the sandbox parameters change (not when functions change)
+        // Re-run when sandbox parameters change OR when resolution becomes available
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sandboxUid, browserUrl, useVm]);
+    }, [sandboxUid, browserUrl, useVm, vmResolution, apiKey]);
     // If isFrame, just render GuardianDemo without the header/layout wrapper
     if (isFrame) {
         return (React.createElement("div", { className: "h-[100vh]" },
-            React.createElement(GuardianDemo, { CustomConsole: CustomConsole, GuideView: GuideView, browserUrl: previewUrl, playgroundUid: playgroundUid, useVm: useVm, codeZipFile: codeZipFile, completeCodeZipFile: completeCodeZipFile, variant: variant, themeColor: themeColor, hasPreview: hasPreview, isFrame: isFrame, isGuardian: true, gitUrl: gitUrl })));
+            React.createElement(GuardianDemo, { CustomConsole: CustomConsole, GuideView: GuideView, browserUrl: previewUrl, playgroundUid: playgroundUid, useVm: useVm, codeZipFile: codeZipFile, completeCodeZipFile: completeCodeZipFile, variant: variant, themeColor: themeColor, hasPreview: hasPreview, isFrame: isFrame, isGuardian: true, gitUrl: gitUrl, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxUid, apiKey: apiKey, sandboxError: sandboxError })));
     }
     return (React.createElement(AppLayoutNoSidebar, { header: !hideHeader ? (React.createElement(Header, { demoOptions: demoOptions, frameworkOptions: frameworkOptions, currentFramework: currentFramework, currentUseCase: currentUseCase, playgroundLogo: playgroundLogo, firstFrameworkByUseCase: firstFrameworkByUseCase })) : undefined, hasBodyPadding: false },
         React.createElement("div", { className: cn("flex-1 min-h-0 flex flex-col px-4 pb-4", hideHeader && "pt-4") },
-            React.createElement(GuardianDemo, { CustomConsole: CustomConsole, GuideView: GuideView, browserUrl: previewUrl, playgroundUid: playgroundUid, useVm: useVm, codeZipFile: codeZipFile, completeCodeZipFile: completeCodeZipFile, variant: variant, themeColor: themeColor, hasPreview: hasPreview, isFrame: isFrame, isGuardian: true, gitUrl: gitUrl }))));
+            React.createElement(GuardianDemo, { CustomConsole: CustomConsole, GuideView: GuideView, browserUrl: previewUrl, playgroundUid: playgroundUid, useVm: useVm, codeZipFile: codeZipFile, completeCodeZipFile: completeCodeZipFile, variant: variant, themeColor: themeColor, hasPreview: hasPreview, isFrame: isFrame, isGuardian: true, gitUrl: gitUrl, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxUid, apiKey: apiKey, sandboxError: sandboxError }))));
 }

package/dist/components/sandbox/guardian/hooks/use-sandbox-url-loader.js

@@ -36,20 +36,41 @@ export function useSandboxUrlLoader(startSandboxConfig) {
         }
         if (useVm) {
             try {
-                // Fetch VM URL from API
-                // Note: This assumes the API endpoint is available at /api/auto-sandbox
-                // You may need to configure this based on your deployment
-                const apiBaseUrl = typeof window !== "undefined" ? window.location.origin : "";
-                const response = await fetch(`${apiBaseUrl}/api/auto-sandbox?url=${encodeURIComponent(browserUrl)}&mode=json`);
-                // Check if response is successful
-                if (!response.ok) {
-                    const errorText = await response.text();
-                    console.error(`Failed to fetch sandbox URL for ${sandboxUid}:`, errorText);
-                    // Mark as error to prevent infinite retries
-                    setVmError(cacheKey);
-                    throw new Error(`Failed to create sandbox: ${response.status} ${response.statusText}`);
+                // API key is required - use from config or fallback to startSandboxConfig
+                const apiKey = config.apiKey || (startSandboxConfig === null || startSandboxConfig === void 0 ? void 0 : startSandboxConfig.apiKey);
+                if (!apiKey) {
+                    throw new Error("API key is required for VM sandbox creation");
+                }
+                // Fetch VM URL from API using the SDK API client with apiKey in config
+                const client = createApiClient({ apiKey });
+                if (config === null || config === void 0 ? void 0 : config.resolution) {
+                    config.resolution[0] += 20;
+                    config.resolution[1] += 60;
+                }
+                // Edge case: If browserUrl is empty but we have chatUid, call startSandbox first
+                let targetUrl = browserUrl;
+                if (!targetUrl || targetUrl.trim() === "") {
+                    if (startSandboxConfig === null || startSandboxConfig === void 0 ? void 0 : startSandboxConfig.chatUid) {
+                        // When browserUrl (published_url) is empty, env is required to start sandbox
+                        if (!startSandboxConfig.env) {
+                            throw new Error("env is required when published_url is not available (needed to start sandbox)");
+                        }
+                        // First, start the sandbox to get the container_url
+                        const sandboxResponse = await client.sdk.startSandbox({
+                            env: startSandboxConfig.env,
+                            chatUid: startSandboxConfig.chatUid,
+                        });
+                        targetUrl = sandboxResponse.container_url;
+                    }
+                    else {
+                        throw new Error("browserUrl is required for VM, or chatUid must be provided to start sandbox first");
+                    }
                 }
-                const data = await response.json();
+                const data = await client.sdk.startVm({
+                    url: targetUrl,
+                    mode: "json",
+                    resolution: config.resolution,
+                });
                 if (!data.vncUrl) {
                     console.error(`No vncUrl in response for ${sandboxUid}:`, data);
                     setVmError(cacheKey);
@@ -62,19 +83,36 @@ export function useSandboxUrlLoader(startSandboxConfig) {
             catch (error) {
                 // Mark as error to prevent infinite retries
                 setVmError(cacheKey);
+                console.error(`Failed to fetch sandbox URL for ${sandboxUid}:`, error);
                 throw error;
             }
         }
         else {
-            // Non-VM mode: call startSandbox API to get container URL
-            if (startSandboxConfig) {
+            // Non-VM mode:
+            // PRECEDENCE: published_url takes precedence over chat_uid
+            // 1. If browserUrl (published_url) is provided, use it directly - no API call needed
+            // 2. Otherwise, fall back to calling startSandbox API with chat_uid
+            if (browserUrl && browserUrl.trim() !== "") {
+                // published_url is available - use it directly (chat_uid not needed)
+                setVmUrl(cacheKey, browserUrl);
+                return browserUrl;
+            }
+            else if (startSandboxConfig) {
+                // No published_url available - fall back to calling startSandbox API with chat_uid
                 try {
+                    if (!startSandboxConfig.chatUid) {
+                        throw new Error("chatUid is required when published_url is not available");
+                    }
+                    // When published_url is not available, env is required to start sandbox
+                    if (!startSandboxConfig.env) {
+                        throw new Error("env is required when published_url is not available (needed to start sandbox)");
+                    }
+                    // Create client with apiKey in config (will be sent as Bearer token)
                     const client = createApiClient({
                         apiKey: startSandboxConfig.apiKey,
                     });
                     const response = await client.sdk.startSandbox({
                         env: startSandboxConfig.env,
-                        apiKey: startSandboxConfig.apiKey,
                         chatUid: startSandboxConfig.chatUid,
                     });
                     // Use the container_url from the response as the browserUrl
@@ -115,8 +153,9 @@ export function useSandboxUrlLoader(startSandboxConfig) {
             return getVmUrl(cacheKey) === undefined && !hasError(cacheKey);
         });
         // Load all URLs in parallel, but catch errors individually
-        await Promise.allSettled(configsToLoad.map((config) => loadSandboxUrl(config)));
-    }, [getVmUrl, loadSandboxUrl, hasError]);
+        // Use API key from startSandboxConfig as fallback if not provided in config
+        await Promise.allSettled(configsToLoad.map((config) => loadSandboxUrl(Object.assign(Object.assign({}, config), { apiKey: config.apiKey || (startSandboxConfig === null || startSandboxConfig === void 0 ? void 0 : startSandboxConfig.apiKey) }))));
+    }, [getVmUrl, loadSandboxUrl, hasError, startSandboxConfig]);
     return {
         loadSandboxUrl,
         getSandboxUrl,

package/dist/components/sandbox/guardian/ide/browser.js

@@ -3,9 +3,10 @@ import { useGuardianContext } from "../context/guardian-context";
 import { ChevronLeft, ChevronRight, RefreshCw, Lock, AlertTriangle, Maximize2, Minimize2, ExternalLink, MoreVertical, } from "lucide-react";
 import { cn } from "../../../../lib/utils";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../ui/dropdown-menu";
-export default function Browser({ previewUrl, setPreviewUrl, containerEndpoint, outerContainerClassName, children, reloadSignal, useVm, isGuardian = false, }) {
+export default function Browser({ previewUrl, setPreviewUrl, containerEndpoint, outerContainerClassName, children, reloadSignal, useVm, isGuardian = false, sandboxError, }) {
     const { isBrowserMaximized, setIsBrowserMaximized } = useGuardianContext();
     const iframeRef = useRef(null);
+    const containerRef = useRef(null);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const historyRef = useRef([]);
@@ -521,18 +522,41 @@ export default function Browser({ previewUrl, setPreviewUrl, containerEndpoint,
                         React.createElement(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800" },
                             React.createElement(DropdownMenuItem, { onClick: () => {
                                     // Restart functionality - can be implemented if needed
-                                    console.log("Restart app");
                                 }, className: "cursor-pointer text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800" }, "Restart App"))))))),
         error && (React.createElement("div", { className: "p-4 bg-red-50 border-b border-red-100 text-red-700 text-sm dark:bg-red-950 dark:border-red-800 dark:text-red-200" },
             React.createElement("div", { className: "flex items-center gap-2" },
                 React.createElement(AlertTriangle, { size: 16 }),
                 React.createElement("span", null, error)))),
-        React.createElement("div", { className: "flex-1 min-h-0 relative" },
+        React.createElement("div", { ref: containerRef, className: "flex-1 min-h-0 relative" }, sandboxError && sandboxError.includes("env is required") ? (React.createElement("div", { className: "h-full w-full flex items-center justify-center bg-zinc-50 dark:bg-zinc-900" },
+            React.createElement("div", { className: "max-w-md mx-auto p-8 text-center" },
+                React.createElement("div", { className: "mb-4 flex justify-center" },
+                    React.createElement(AlertTriangle, { size: 48, className: "text-amber-500 dark:text-amber-400" })),
+                React.createElement("h2", { className: "text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-2" }, "Environment Variables Required"),
+                React.createElement("p", { className: "text-sm text-zinc-600 dark:text-zinc-400 mb-4" },
+                    "This sandbox doesn't have a published URL and needs to be started dynamically. Please provide the",
+                    " ",
+                    React.createElement("code", { className: "px-1.5 py-0.5 bg-zinc-200 dark:bg-zinc-800 rounded text-xs font-mono" }, "env"),
+                    " ",
+                    "prop to the",
+                    " ",
+                    React.createElement("code", { className: "px-1.5 py-0.5 bg-zinc-200 dark:bg-zinc-800 rounded text-xs font-mono" }, "<Sandbox>"),
+                    " ",
+                    "component."),
+                React.createElement("div", { className: "mt-6 p-4 bg-zinc-100 dark:bg-zinc-800 rounded-lg text-left" },
+                    React.createElement("p", { className: "text-xs font-mono text-zinc-700 dark:text-zinc-300 mb-2" }, "Example:"),
+                    React.createElement("pre", { className: "text-xs text-zinc-600 dark:text-zinc-400 overflow-x-auto" }, `<Sandbox
+  apiKey="your-api-key"
+  sandboxId="sandbox-id"
+  env={{
+    YOUR_API_KEY: "value",
+    YOUR_SECRET: "secret"
+  }}
+/>`))))) : (React.createElement(React.Fragment, null,
             renderIframe(),
             isLoading && (React.createElement("div", { className: "absolute inset-0 bg-zinc-100 dark:bg-zinc-800 bg-opacity-50 flex items-center justify-center z-10" },
                 React.createElement("div", { className: "text-sm text-zinc-600 bg-white dark:bg-black p-3 rounded-lg shadow-md" },
                     "Loading ",
                     urlInput,
                     "..."))),
-            children)));
+            children)))));
 }

package/dist/components/sandbox/guardian/right-view/right-panel-view.js

@@ -5,12 +5,17 @@ import Browser from "../ide/browser";
 import CodeView from "./code-view";
 import { useGuardianContext } from "../context/guardian-context";
 import { Component as AiLoader } from "../ui/ai-loader";
-export default function RightPanelView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, themeColor = "#3b82f6", }) {
+export default function RightPanelView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, themeColor = "#3b82f6", sandboxError, }) {
     const { setCurrentView, currentView } = useGuardianContext();
     const [showLoader, setShowLoader] = useState(!browserUrl);
     // Delay hiding the loader for 5 seconds after browserUrl becomes available
+    // If sandboxError exists, hide loader immediately to show error UI
     useEffect(() => {
-        if (browserUrl) {
+        if (sandboxError) {
+            // Show error UI immediately instead of loader
+            setShowLoader(false);
+        }
+        else if (browserUrl) {
             const timer = setTimeout(() => {
                 setShowLoader(false);
             }, 7000);
@@ -19,7 +24,7 @@ export default function RightPanelView({ reloadCounter, overlayStage, browserUrl
         else {
             setShowLoader(true);
         }
-    }, [browserUrl]);
+    }, [browserUrl, sandboxError]);
     return (React.createElement("div", null,
         React.createElement("div", { className: "flex justify-center border-b" },
             React.createElement(SlidingEditPreviewToggle, { playgroundUid: "guardian", currentView: currentView, setCurrentView: (view) => setCurrentView(view), variant: "pill", buttonClassName: "text-sm px-4 py-1 h-auto", tabs: [
@@ -31,7 +36,7 @@ export default function RightPanelView({ reloadCounter, overlayStage, browserUrl
             } }, showLoader ? (React.createElement("div", { className: "h-[calc(100vh-12.2rem)] w-full relative overflow-hidden rounded-b-none" },
             React.createElement(AiLoader, { text: "Booting up...", fullScreen: false, themeColor: themeColor }))) : (React.createElement(Browser, { previewUrl: browserUrl, setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: useVm
                 ? "h-[calc(100vh-9.6rem)] w-full border-none rounded-b-none"
-                : "h-[calc(100vh-12.2rem)] w-full border-none rounded-b-none", reloadSignal: reloadCounter, useVm: useVm }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
+                : "h-[calc(100vh-12.2rem)] w-full border-none rounded-b-none", reloadSignal: reloadCounter, useVm: useVm, sandboxError: sandboxError }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
             overlayStage === "error" && (React.createElement("div", { className: "w-full h-full bg-red-950 text-red-200 flex items-center justify-center" },
                 React.createElement("div", { className: "text-center" },
                     React.createElement("div", { className: "text-2xl font-semibold" }, "Service Unavailable"),