@sampleapp.ai/sdk 1.0.42 → 1.0.43

package/dist/components/sandbox/Sandbox.js

@@ -1,11 +1,49 @@
 "use client";
-import React, { useEffect, useState } from "react";
-import { fetchSandboxConfig } from "./api";
+import React, { useEffect, useState, useCallback } from "react";
+import { fetchSandboxConfigWithContent, buildConfigFromContent, } from "./api";
 import GuardianPlayground from "./guardian/guardian-playground";
 import { GuardianProvider } from "./guardian/context/guardian-context";
 import { VmProvider } from "./guardian/context/vm-context";
-import { buildGuardianConfig } from "./guardian/utils";
 import { Skeleton } from "../ui/skeleton";
+import { useTreeSelector } from "../../hooks/use-tree-selector";
+/**
+ * Inner component that uses the tree selector hook
+ * Separated to ensure hooks are called after data is loaded
+ */
+function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, config, }) {
+    var _a;
+    const [currentConfig, setCurrentConfig] = useState(configWithContent.legacyConfig);
+    // Handle selection changes - update the config when user selects different options
+    const handleSelectionChange = useCallback((selection, content) => {
+        if (content) {
+            const newConfig = buildConfigFromContent(content);
+            // Apply theme color override if provided
+            if (themeColor) {
+                newConfig.themeColor = themeColor;
+                newConfig.useCases = newConfig.useCases.map((uc) => (Object.assign(Object.assign({}, uc), { themeColor: themeColor, frameworks: uc.frameworks.map((fw) => (Object.assign(Object.assign({}, fw), { themeColor: themeColor }))) })));
+            }
+            setCurrentConfig(newConfig);
+        }
+    }, [themeColor]);
+    // Use the tree selector hook for managing selection state
+    const { sections, selectOption, currentContent } = useTreeSelector({
+        config: configWithContent.techStackConfig,
+        allContent: configWithContent.allContent,
+        initialPath: configWithContent.initialSelectionPath,
+        onSelectionChange: handleSelectionChange,
+    });
+    // Get the first use case and framework from current config
+    const firstUseCase = currentConfig.useCases[0];
+    const firstFramework = (_a = firstUseCase === null || firstUseCase === void 0 ? void 0 : firstUseCase.frameworks[0]) === null || _a === void 0 ? void 0 : _a.key;
+    if (!firstUseCase || !firstFramework) {
+        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-white dark:bg-black" },
+            React.createElement("div", { className: "text-red-500" }, "No use cases or frameworks found")));
+    }
+    return (React.createElement(GuardianProvider, null,
+        React.createElement(VmProvider, null,
+            React.createElement("div", { className: "h-screen w-screen bg-white dark:bg-black" },
+                React.createElement(GuardianPlayground, { sandboxConfig: currentConfig, sections: sections, onSelect: selectOption, useCase: firstUseCase.id, framework: firstFramework, isFrame: config === null || config === void 0 ? void 0 : config.isFrame, apiKey: apiKey, env: env, chatUid: currentConfig.chatUid, theme: theme })))));
+}
 /**
  * Sandbox component - simplified API for embedding sandboxes
  *
@@ -33,14 +71,13 @@ import { Skeleton } from "../ui/skeleton";
  * />
  * ```
  */
-export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "dark", }) {
-    var _a;
+export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "dark", config, }) {
     // Validate apiKey immediately
     if (!apiKey || apiKey.trim() === "") {
         return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-white dark:bg-black" },
             React.createElement("div", { className: "text-red-500" }, "Error: apiKey is required. Please provide a valid API key.")));
     }
-    const [config, setConfig] = useState(null);
+    const [configWithContent, setConfigWithContent] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     useEffect(() => {
@@ -49,14 +86,15 @@ export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "d
             try {
                 setLoading(true);
                 setError(null);
-                const fetchedConfig = await fetchSandboxConfig(apiKey, sandboxId);
+                const fetchedConfig = await fetchSandboxConfigWithContent(apiKey, sandboxId);
                 if (!cancelled) {
                     // Override theme color if provided
                     if (themeColor) {
-                        fetchedConfig.themeColor = themeColor;
-                        fetchedConfig.useCases = fetchedConfig.useCases.map((uc) => (Object.assign(Object.assign({}, uc), { themeColor: themeColor, frameworks: uc.frameworks.map((fw) => (Object.assign(Object.assign({}, fw), { themeColor: themeColor }))) })));
+                        fetchedConfig.legacyConfig.themeColor = themeColor;
+                        fetchedConfig.legacyConfig.useCases =
+                            fetchedConfig.legacyConfig.useCases.map((uc) => (Object.assign(Object.assign({}, uc), { themeColor: themeColor, frameworks: uc.frameworks.map((fw) => (Object.assign(Object.assign({}, fw), { themeColor: themeColor }))) })));
                     }
-                    setConfig(fetchedConfig);
+                    setConfigWithContent(fetchedConfig);
                     setLoading(false);
                 }
             }
@@ -82,25 +120,8 @@ export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "d
                 "Error: ",
                 error)));
     }
-    if (!config) {
+    if (!configWithContent) {
         return null;
     }
-    // Build the nested config from use cases
-    const nestedConfig = buildGuardianConfig(config.useCases, {
-        playgroundUid: sandboxId,
-        playgroundLogo: config.playgroundLogo || (React.createElement("div", { className: "text-zinc-900 dark:text-white font-bold text-xl" }, config.name)),
-    });
-    // Get the first use case and framework as defaults
-    const firstUseCase = config.useCases[0];
-    const firstFramework = (_a = firstUseCase === null || firstUseCase === void 0 ? void 0 : firstUseCase.frameworks[0]) === null || _a === void 0 ? void 0 : _a.key;
-    if (!firstUseCase || !firstFramework) {
-        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-white dark:bg-black" },
-            React.createElement("div", { className: "text-red-500" }, "No use cases or frameworks found")));
-    }
-    // TODO: Pass env variables to the container runtime
-    // This will be implemented when integrating with the container technology
-    return (React.createElement(GuardianProvider, null,
-        React.createElement(VmProvider, null,
-            React.createElement("div", { className: "h-screen w-screen bg-white dark:bg-black" },
-                React.createElement(GuardianPlayground, { nestedConfig: nestedConfig, useCase: firstUseCase.id, framework: firstFramework, isFrame: false, apiKey: apiKey, env: env, chatUid: config.chatUid, theme: theme })))));
+    return (React.createElement(SandboxInner, { configWithContent: configWithContent, apiKey: apiKey, env: env, themeColor: themeColor, theme: theme, config: config }));
 }

package/dist/components/sandbox/api.js

@@ -15,10 +15,82 @@ function createDownloadLink(downloadEndpoint) {
     document.body.removeChild(link);
 }
 /**
- * Fetches sandbox configuration from the API
+ * Fetches sandbox configuration with all content for upfront loading
+ * This enables instant switching between tech stack options without API calls
+ *
+ * @param apiKey - API key from SandboxProps
+ * @param sandboxId - Sandbox content UID (maps to sandbox_content_uid)
+ * @returns Extended sandbox configuration with all content
+ */
+export async function fetchSandboxConfigWithContent(apiKey, sandboxId) {
+    const client = createApiClient({ apiKey });
+    // 1. Fetch the initially requested sandbox content
+    const initialContent = await client.sandboxContent.getPublic(sandboxId);
+    // 2. Fetch the use case to get tech_stack_config
+    const useCase = await client.sandboxUseCase.getById(initialContent.use_case_id);
+    // 3. Fetch ALL sandbox content for this use case (for local filtering)
+    const allContent = await client.sandboxContent.getByUseCaseId(initialContent.use_case_id);
+    // 4. Build legacy config for backward compatibility
+    const legacyConfig = buildLegacyConfig(initialContent);
+    return {
+        useCase,
+        techStackConfig: useCase.tech_stack_config,
+        allContent,
+        initialContent,
+        initialSelectionPath: initialContent.selection_path || [],
+        legacyConfig,
+    };
+}
+/**
+ * Build legacy SandboxConfig from SandboxContent for backward compatibility
+ */
+function buildLegacyConfig(sandboxContent) {
+    const frameworkKey = sandboxContent.framework || Framework.NEXTJS;
+    const generatedCode = sandboxContent.generated_code || {};
+    const completeCodeZipFile = "";
+    return {
+        id: sandboxContent.uid,
+        name: sandboxContent.uid,
+        description: sandboxContent.markdown || "",
+        themeColor: "#3b82f6",
+        hasPreview: sandboxContent.has_preview,
+        chatUid: sandboxContent.chat_uid || "",
+        useCases: [
+            {
+                id: sandboxContent.uid,
+                name: sandboxContent.uid,
+                description: sandboxContent.markdown || "",
+                themeColor: "#3b82f6",
+                hasPreview: sandboxContent.has_preview,
+                frameworks: [
+                    {
+                        key: frameworkKey,
+                        browserUrl: sandboxContent.published_url || "",
+                        sandboxUid: sandboxContent.uid,
+                        codeZipFile: Object.keys(generatedCode).length > 0 ? generatedCode : "",
+                        completeCodeZipFile,
+                        useVm: sandboxContent.is_vm_enabled || false,
+                        CustomConsole: sandboxContent.markdown || "",
+                        GuideView: "Default Guide",
+                        gitUrl: sandboxContent.github_url || undefined,
+                    },
+                ],
+            },
+        ],
+    };
+}
+/**
+ * Build SandboxConfig from any SandboxContent (for switching between selections)
+ */
+export function buildConfigFromContent(content) {
+    return buildLegacyConfig(content);
+}
+/**
+ * Fetches sandbox configuration from the API (legacy method)
  * @param apiKey - API key from SandboxProps
  * @param sandboxId - Sandbox content UID (maps to sandbox_content_uid)
  * @returns Sandbox configuration
+ * @deprecated Use fetchSandboxConfigWithContent for tree-based selection
  */
 export async function fetchSandboxConfig(apiKey, sandboxId) {
     const client = createApiClient({

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

@@ -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, isBrowserMaximized: isBrowserMaximized, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError }));
+        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, isFrame: isFrame, 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 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, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError })));
+            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, isFrame: isFrame, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError })));
     }
-    return (React.createElement(ConsoleWithApp, { containerClassName: "", 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 }) }));
+    return (React.createElement(ConsoleWithApp, { containerClassName: "", 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, isFrame: isFrame, sandboxId: sandboxId, apiKey: apiKey, sandboxError: sandboxError }) }));
 }

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

@@ -8,7 +8,7 @@ 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, completeCodeZipFile, variant, themeColor, hasPreview = true, isFrame = false, apiKey, env, chatUid, hideHeader = false, // Hardcoded to true by default, not exposed in Sandbox.tsx
+export default function GuardianComponent({ sections, onSelect, currentFramework, currentUseCase, CustomConsole, GuideView, playgroundLogo, playgroundUid, browserUrl, useVm, sandboxUid, codeZipFile, completeCodeZipFile, variant, themeColor, hasPreview = true, isFrame = false, apiKey, env, chatUid, hideHeader = false, // Hardcoded to true by default, not exposed in Sandbox.tsx
 gitUrl, }) {
     const { previewUrl, setPreviewUrl } = useGuardianContext();
     const { vmResolution } = useVmContext();
@@ -16,7 +16,9 @@ gitUrl, }) {
     // Build startSandboxConfig for use-sandbox-url-loader
     // apiKey is always included (guaranteed by parent validation)
     // Include chatUid and env when browserUrl is missing (needed for startSandbox API call)
-    const startSandboxConfig = Object.assign({ apiKey }, (!browserUrl && chatUid ? { env, chatUid } : {}));
+    // Include hasPreview to skip env/chatUid validation when no preview is needed
+    const startSandboxConfig = Object.assign({ apiKey,
+        hasPreview }, (!browserUrl && chatUid ? { env, chatUid } : {}));
     // 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;
@@ -80,7 +82,7 @@ gitUrl, }) {
         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, 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, themecolor: themeColor })) : undefined, hasBodyPadding: false },
+    return (React.createElement(AppLayoutNoSidebar, { header: !hideHeader ? (React.createElement(Header, { sections: sections, onSelect: onSelect, playgroundLogo: playgroundLogo, themecolor: themeColor })) : undefined, hasBodyPadding: false },
         React.createElement("div", { className: cn("flex-1 min-h-0 flex flex-col", 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, isBrowserUrlReady: isBrowserUrlReady, sandboxId: sandboxUid, apiKey: apiKey, sandboxError: sandboxError }))));
 }

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

@@ -3,17 +3,21 @@ import React from "react";
 import GuardianComponent from "./guardian-component";
 import { useFrameParams } from "./hooks/use-frame-params";
 import { GuardianStyleWrapper } from "./guardian-style-wrapper";
+import { buildGuardianConfig } from "./utils";
 /**
- * Guardian Playground component with nested config structure.
- * Expects config[useCaseId].frameworks[frameworkKey] structure.
- *
- * When isFrame=true, reads framework from URL params client-side.
+ * Guardian Playground component with tree-based tech stack selection.
+ * Uses sections from useTreeSelector for dynamic header rendering.
  */
-export default function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame = false, apiKey, env, chatUid, theme = "dark", }) {
+export default function GuardianPlayground({ sandboxConfig, sections, onSelect, useCase, framework: serverFramework, isFrame = false, apiKey, env, chatUid, theme = "dark", }) {
     var _a;
     // When in frame mode, allow URL params to override framework
     const frameParams = useFrameParams();
     const framework = isFrame && frameParams.framework ? frameParams.framework : serverFramework;
+    // Build the nested config from use cases
+    const nestedConfig = buildGuardianConfig(sandboxConfig.useCases, {
+        playgroundUid: sandboxConfig.id,
+        playgroundLogo: sandboxConfig.playgroundLogo || (React.createElement("div", { className: "text-zinc-900 dark:text-white font-bold text-xl" }, sandboxConfig.name)),
+    });
     const useCaseConfig = nestedConfig[useCase];
     if (!useCaseConfig) {
         return (React.createElement("div", { className: "flex items-center justify-center h-screen" },
@@ -32,14 +36,6 @@ export default function GuardianPlayground({ nestedConfig, useCase, framework: s
                 useCase,
                 "\"")));
     }
-    // Build a map of use case ID to first available framework key
-    const firstFrameworkByUseCase = {};
-    Object.entries(nestedConfig).forEach(([useCaseId, uc]) => {
-        const firstFrameworkKey = Object.keys(uc.frameworks)[0];
-        if (firstFrameworkKey) {
-            firstFrameworkByUseCase[useCaseId] = firstFrameworkKey;
-        }
-    });
     return (React.createElement(GuardianStyleWrapper, { themeColor: frameworkConfig.themeColor, theme: theme },
-        React.createElement(GuardianComponent, { demoOptions: frameworkConfig.demoOptions, frameworkOptions: frameworkConfig.frameworkOptions, firstFrameworkByUseCase: firstFrameworkByUseCase, currentFramework: frameworkConfig.currentFramework, CustomConsole: frameworkConfig.CustomConsole, GuideView: frameworkConfig.GuideView, playgroundUid: frameworkConfig.playgroundUid, browserUrl: (_a = frameParams.iframeUrl) !== null && _a !== void 0 ? _a : frameworkConfig.browserUrl, useVm: frameworkConfig.useVm, playgroundLogo: frameworkConfig.playgroundLogo, sandboxUid: frameworkConfig.sandboxUid, name: frameworkConfig.name, description: frameworkConfig.description, codeZipFile: frameworkConfig.codeZipFile, completeCodeZipFile: frameworkConfig.completeCodeZipFile, variant: frameworkConfig.variant, themeColor: frameworkConfig.themeColor, hasPreview: frameworkConfig.hasPreview, currentUseCase: useCase, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: chatUid, gitUrl: frameworkConfig.gitUrl, hideHeader: false })));
+        React.createElement(GuardianComponent, { sections: sections, onSelect: onSelect, currentFramework: frameworkConfig.currentFramework, CustomConsole: frameworkConfig.CustomConsole, GuideView: frameworkConfig.GuideView, playgroundUid: frameworkConfig.playgroundUid, browserUrl: (_a = frameParams.iframeUrl) !== null && _a !== void 0 ? _a : frameworkConfig.browserUrl, useVm: frameworkConfig.useVm, playgroundLogo: frameworkConfig.playgroundLogo, sandboxUid: frameworkConfig.sandboxUid, name: frameworkConfig.name, description: frameworkConfig.description, codeZipFile: frameworkConfig.codeZipFile, completeCodeZipFile: frameworkConfig.completeCodeZipFile, variant: frameworkConfig.variant, themeColor: frameworkConfig.themeColor, hasPreview: frameworkConfig.hasPreview, currentUseCase: useCase, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: chatUid, gitUrl: frameworkConfig.gitUrl, hideHeader: false })));
 }

package/dist/components/sandbox/guardian/header.js

@@ -1,53 +1,40 @@
 "use client";
 import React from "react";
-export default function Header({ demoOptions, frameworkOptions, firstFrameworkByUseCase, currentFramework, playgroundLogo, currentUseCase, themecolor, }) {
-    var _a, _b;
-    // Derive values directly from props (which come from the URL)
-    const selectedUseCase = currentUseCase || ((_a = demoOptions[0]) === null || _a === void 0 ? void 0 : _a.value);
-    const selectedFramework = currentFramework || ((_b = frameworkOptions[0]) === null || _b === void 0 ? void 0 : _b.value);
-    const sections = [
-        // {
-        //   id: "useCase",
-        //   label: "Use Case:",
-        //   options: demoOptions.map((opt) => ({
-        //     ...opt,
-        //     href: `/${opt.value}?framework=${firstFrameworkByUseCase?.[opt.value] || frameworkOptions[0]?.value
-        //       }`,
-        //   })),
-        // },
-        {
-            id: "framework",
-            label: "Framework:",
-            options: frameworkOptions.map((opt) => (Object.assign(Object.assign({}, opt), { href: `/${selectedUseCase}?framework=${opt.value}` }))),
-        },
-    ];
+/**
+ * Header component for dynamic tech stack selection
+ *
+ * Uses sections from useTreeSelector to render selector buttons
+ * based on the tech_stack_config tree structure.
+ */
+export default function Header({ sections, onSelect, playgroundLogo, themecolor }) {
+    console.log("playgroundLogo", playgroundLogo);
     return (React.createElement("div", { className: "w-full sticky top-0 z-50 px-4 lg:px-8 backdrop-blur-md" },
-        React.createElement("div", { className: "flex flex-wrap items-center justify-between" },
+        React.createElement("div", { className: "flex flex-wrap items-center justify-between py-2" },
             React.createElement("div", { className: "flex flex-wrap items-center gap-6" }, sections.map((section) => {
-                const currentValue = section.id === "useCase" ? selectedUseCase : selectedFramework;
-                return (React.createElement("div", { key: section.id, className: "flex items-center flex-wrap gap-3" },
+                var _a;
+                return (React.createElement("div", { key: section.nodeType, className: "flex items-center flex-wrap gap-3" },
                     React.createElement("span", { className: "text-sm font-semibold text-gray-600 dark:text-gray-400 whitespace-nowrap" }, section.label),
                     React.createElement("div", { className: "hidden md:block" },
                         React.createElement("div", { className: "flex items-center gap-2" }, section.options.map((option) => {
-                            const isSelected = currentValue === option.value;
-                            return (React.createElement("button", { key: option.value, onClick: () => {
-                                    if (typeof window !== "undefined") {
-                                        window.location.href = option.href;
+                            const isSelected = option.isSelected;
+                            const isDisabled = option.hasContent === false;
+                            return (React.createElement("button", { key: option.key, onClick: () => {
+                                    if (!isDisabled) {
+                                        onSelect(section.nodeType, option.key);
                                     }
-                                }, className: `inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-md border transition-all cursor-pointer active:scale-[0.98] ${isSelected
+                                }, disabled: isDisabled, className: `inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-md border transition-all cursor-pointer active:scale-[0.98] ${isSelected
                                     ? "bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800"
-                                    : "bg-white dark:bg-zinc-900 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800"}`, style: isSelected && themecolor ? {
-                                    borderColor: themecolor,
-                                    color: themecolor,
-                                } : undefined }, option.label));
+                                    : "bg-white dark:bg-zinc-900 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800"} ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`, style: isSelected && themecolor
+                                    ? {
+                                        borderColor: themecolor,
+                                        color: themecolor
+                                    }
+                                    : undefined }, option.label));
                         }))),
                     React.createElement("div", { className: "block md:hidden relative" },
-                        React.createElement("select", { value: currentValue, onChange: (e) => {
-                                const selectedOption = section.options.find((opt) => opt.value === e.target.value);
-                                if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.href) {
-                                    window.location.href = selectedOption.href;
-                                }
-                            }, className: "appearance-none bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-md px-3 py-1.5 pr-8 text-xs font-medium text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-primary-light focus:border-transparent transition-all hover:bg-zinc-100 dark:hover:bg-zinc-800" }, section.options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label)))),
+                        React.createElement("select", { value: ((_a = section.options.find((o) => o.isSelected)) === null || _a === void 0 ? void 0 : _a.key) || "", onChange: (e) => {
+                                onSelect(section.nodeType, e.target.value);
+                            }, className: "appearance-none bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-md px-3 py-1.5 pr-8 text-xs font-medium text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-primary-light focus:border-transparent transition-all hover:bg-zinc-100 dark:hover:bg-zinc-800" }, section.options.map((option) => (React.createElement("option", { key: option.key, value: option.key, disabled: option.hasContent === false }, option.label)))),
                         React.createElement("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-zinc-400" },
                             React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.35 9.915a.875.875 0 0 1 1.235-.065L8 13.823l4.415-3.973a.875.875 0 0 1 1.17 1.3l-5 4.5a.873.873 0 0 1-1.17 0l-5-4.5a.875.875 0 0 1-.065-1.235ZM7.415.35a.873.873 0 0 1 1.17 0l5 4.5a.875.875 0 1 1-1.17 1.3L8 2.177 3.585 6.15a.875.875 0 0 1-1.17-1.3l5-4.5Z", fill: "currentColor" })))));
             })))));

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

@@ -50,6 +50,12 @@ export function useSandboxUrlLoader(startSandboxConfig) {
                 // Edge case: If browserUrl is empty but we have chatUid, call startSandbox first
                 let targetUrl = browserUrl;
                 if (!targetUrl || targetUrl.trim() === "") {
+                    // If hasPreview is false, we don't need to start a container
+                    // Just return empty string - no preview will be shown
+                    if ((startSandboxConfig === null || startSandboxConfig === void 0 ? void 0 : startSandboxConfig.hasPreview) === false) {
+                        setVmUrl(cacheKey, "");
+                        return "";
+                    }
                     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) {
@@ -58,7 +64,7 @@ export function useSandboxUrlLoader(startSandboxConfig) {
                         // First, start the sandbox to get the container_url
                         const sandboxResponse = await client.sdk.startSandbox({
                             env: startSandboxConfig.env,
-                            chatUid: startSandboxConfig.chatUid,
+                            chatUid: startSandboxConfig.chatUid
                         });
                         targetUrl = sandboxResponse.container_url;
                     }
@@ -69,7 +75,7 @@ export function useSandboxUrlLoader(startSandboxConfig) {
                 const data = await client.sdk.startVm({
                     url: targetUrl,
                     mode: "json",
-                    resolution: config.resolution,
+                    resolution: config.resolution
                 });
                 if (!data.vncUrl) {
                     console.error(`No vncUrl in response for ${sandboxUid}:`, data);
@@ -98,6 +104,12 @@ export function useSandboxUrlLoader(startSandboxConfig) {
                 return browserUrl;
             }
             else if (startSandboxConfig) {
+                // If hasPreview is false, we don't need to start a container
+                // Just return empty string - no preview will be shown
+                if (startSandboxConfig.hasPreview === false) {
+                    setVmUrl(cacheKey, "");
+                    return "";
+                }
                 // No published_url available - fall back to calling startSandbox API with chat_uid
                 try {
                     if (!startSandboxConfig.chatUid) {
@@ -116,7 +128,7 @@ export function useSandboxUrlLoader(startSandboxConfig) {
                     const client = createApiClient({ apiKey });
                     const response = await client.sdk.startSandbox({
                         env: startSandboxConfig.env,
-                        chatUid: startSandboxConfig.chatUid,
+                        chatUid: startSandboxConfig.chatUid
                     });
                     // Use the container_url from the response as the browserUrl
                     const containerUrl = response.container_url;
@@ -161,6 +173,6 @@ export function useSandboxUrlLoader(startSandboxConfig) {
     return {
         loadSandboxUrl,
         getSandboxUrl,
-        preloadSandboxUrls,
+        preloadSandboxUrls
     };
 }

package/dist/components/sandbox/guardian/index.js

@@ -1,5 +1,6 @@
 export { default as GuardianPlayground } from "./guardian-playground";
 export { default as GuardianComponent } from "./guardian-component";
+export { default as Header } from "./header";
 export { VmProvider, useVmContext } from "./context/vm-context";
 export { GuardianProvider, useGuardianContext } from "./context/guardian-context";
 export * from "./types";

package/dist/components/sandbox/guardian/right-view/pill-file-selector.js

@@ -3,8 +3,8 @@ import React from "react";
 import { useGuardianContext } from "../context/guardian-context";
 import { cn } from "../../../../lib/utils";
 import { useFrameParams } from "../hooks/use-frame-params";
-import { FileCode, FileJson, FileText, Settings, Layout, Database, Image, Terminal, } from "lucide-react";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../ui/tooltip";
+import { FileCode, FileJson, FileText, Settings, Layout, Database, Image, Terminal } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
 const FILE_ICONS = {
     // JavaScript/React
     js: { icon: FileCode, color: "text-yellow-600" },
@@ -42,13 +42,13 @@ const FILE_ICONS = {
     svg: { icon: Image, color: "text-green-500" },
     ico: { icon: Image, color: "text-green-500" },
     // Default
-    default: { icon: FileText, color: "text-zinc-500" },
+    default: { icon: FileText, color: "text-zinc-500" }
 };
 export default function PillFileSelector({ themeColor }) {
     const containerRef = React.useRef(null);
     const fileRefs = React.useRef({});
     const lastInitializedFilePath = React.useRef(null);
-    const { generatedCode, updateCode, setLanguage, activeFilePath: contextActiveFilePath, setActiveFileName, setActiveFilePath, setActiveDependenciesToInstall, setActiveLineRange, filesEdited, } = useGuardianContext();
+    const { generatedCode, updateCode, setLanguage, activeFilePath: contextActiveFilePath, setActiveFileName, setActiveFilePath, setActiveDependenciesToInstall, setActiveLineRange, filesEdited } = useGuardianContext();
     // Read frame params - these override context when isFrame=true
     const frameParams = useFrameParams();
     // Use frame param overrides when in frame mode
@@ -94,7 +94,7 @@ export default function PillFileSelector({ themeColor }) {
         "vite-plugin-react-instrumentation.ts",
         "instrumentation-client.ts",
         // Global styles (often not needed in code editor)
-        "globals.css",
+        "globals.css"
     ];
     const filteredFiles = fileEntries.filter(([filePath]) => {
         const fileName = filePath.split("/").pop() || filePath;
@@ -128,7 +128,7 @@ export default function PillFileSelector({ themeColor }) {
                 activeButton.scrollIntoView({
                     behavior: "instant",
                     block: "nearest",
-                    inline: "center",
+                    inline: "center"
                 });
             }
         }, 50);
@@ -156,38 +156,88 @@ export default function PillFileSelector({ themeColor }) {
         window.addEventListener("frameParamsUpdated", handleFrameParamsUpdate);
         return () => window.removeEventListener("frameParamsUpdated", handleFrameParamsUpdate);
     }, [frameParams.isFrame, scrollActivePillIntoView]);
-    // Load file from frame params when they change
+    // Load first file on mount when NOT in frame mode
     React.useEffect(() => {
-        // Skip if not in frame mode or no file path specified
-        if (!frameParams.isFrame || !frameParams.activeFilePath) {
+        // Skip if in frame mode (handled by separate effect)
+        if (frameParams.isFrame) {
             return;
         }
-        // Skip if we've already initialized this exact file path
-        if (lastInitializedFilePath.current === frameParams.activeFilePath) {
+        // Skip if generatedCode isn't loaded yet
+        if (!generatedCode || Object.keys(generatedCode).length === 0) {
+            return;
+        }
+        // Skip if already initialized
+        if (lastInitializedFilePath.current) {
             return;
         }
+        // Get filtered files (excluding certain files)
+        const fileEntries = Object.entries(generatedCode)
+            .filter(([filePath]) => {
+            const fileName = filePath.split("/").pop() || filePath;
+            return !excludedFiles.includes(fileName);
+        })
+            .sort(([a], [b]) => {
+            const aName = a.split("/").pop() || a;
+            const bName = b.split("/").pop() || b;
+            return aName.localeCompare(bName);
+        });
+        if (fileEntries.length === 0) {
+            return;
+        }
+        // Load the first file
+        const [firstFilePath, firstFileData] = fileEntries[0];
+        handleFileClick(firstFilePath, firstFileData);
+        lastInitializedFilePath.current = firstFilePath;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [frameParams.isFrame, generatedCode]);
+    // Load file from frame params when they change, or load first file if in frame mode
+    React.useEffect(() => {
         // Skip if generatedCode isn't loaded yet
         if (!generatedCode || Object.keys(generatedCode).length === 0) {
             return;
         }
+        // Get filtered files (excluding certain files)
+        const fileEntries = Object.entries(generatedCode).filter(([filePath]) => {
+            const fileName = filePath.split("/").pop() || filePath;
+            return !excludedFiles.includes(fileName);
+        });
+        // If not in frame mode, skip this effect
+        if (!frameParams.isFrame) {
+            return;
+        }
+        // Determine which file to load
+        let targetFilePath;
+        if (frameParams.activeFilePath) {
+            // Frame params specify a file - use it
+            targetFilePath = frameParams.activeFilePath;
+        }
+        else if (fileEntries.length > 0) {
+            // No file specified - load the first available file
+            const [firstFilePath] = fileEntries[0];
+            targetFilePath = firstFilePath;
+        }
+        // Skip if we've already initialized this exact file path
+        if (!targetFilePath || lastInitializedFilePath.current === targetFilePath) {
+            return;
+        }
         // Search by file_path property first (source of truth), then fallback to key lookup
         let fileData;
         let resolvedFilePath;
         // First, search through all code outputs to find one matching file_path
-        const matchingCodeOutput = Object.values(generatedCode).find((output) => output.file_path === frameParams.activeFilePath);
+        const matchingCodeOutput = Object.values(generatedCode).find((output) => output.file_path === targetFilePath);
         if (matchingCodeOutput) {
             fileData = matchingCodeOutput;
             resolvedFilePath = matchingCodeOutput.file_path;
         }
         else {
             // Fallback: try to get from generatedCode by key
-            if (generatedCode[frameParams.activeFilePath]) {
-                fileData = generatedCode[frameParams.activeFilePath];
-                resolvedFilePath = fileData.file_path || frameParams.activeFilePath;
+            if (generatedCode[targetFilePath]) {
+                fileData = generatedCode[targetFilePath];
+                resolvedFilePath = fileData.file_path || targetFilePath;
             }
         }
         if (fileData && resolvedFilePath) {
-            lastInitializedFilePath.current = frameParams.activeFilePath; // Track initialized path
+            lastInitializedFilePath.current = targetFilePath; // Track initialized path
             const fileName = fileData.code_file_name ||
                 resolvedFilePath.split("/").pop() ||
                 resolvedFilePath;
@@ -202,7 +252,7 @@ export default function PillFileSelector({ themeColor }) {
             if (frameParams.linesStart !== undefined) {
                 setActiveLineRange({
                     start: frameParams.linesStart,
-                    end: frameParams.linesEnd,
+                    end: frameParams.linesEnd
                 });
             }
             else {
@@ -235,7 +285,7 @@ export default function PillFileSelector({ themeColor }) {
                             : "text-zinc-400 hover:text-zinc-200", isEdited && "ring-1 ring-yellow-500/50"), style: isActive
                             ? {
                                 backgroundColor: `${effectiveThemeColor}33`, // ~20% opacity
-                                color: effectiveThemeColor,
+                                color: effectiveThemeColor
                             }
                             : undefined },
                         React.createElement(IconComponent, { size: 12, className: cn("flex-shrink-0", !isActive && "text-zinc-500"), style: isActive ? { color: effectiveThemeColor } : undefined }),