@sampleapp.ai/sdk 1.0.30 → 1.0.32

package/dist/components/sandbox/Sandbox.js

@@ -5,6 +5,7 @@ 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";
 /**
  * Sandbox component - simplified API for embedding sandboxes
  *
@@ -54,8 +55,8 @@ export default function Sandbox({ apiKey, sandboxId, env, themeColor, }) {
         };
     }, [apiKey, sandboxId, themeColor]);
     if (loading) {
-        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-black" },
-            React.createElement("div", { className: "text-white" }, "Loading sandbox...")));
+        return (React.createElement("div", { className: "h-screen w-screen bg-black" },
+            React.createElement(Skeleton, { className: "w-full h-full bg-zinc-900" })));
     }
     if (error) {
         return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-black" },

package/dist/components/sandbox/api.js

@@ -1,29 +1,5 @@
 import { Framework, } from "./guardian/types/ide-types";
 import { createApiClient } from "../../lib/api-client";
-/**
- * Get the base URL for API requests
- * In browser, use relative URL or environment variable
- * In Node.js, use environment variable or default
- */
-function getBaseUrl() {
-    return "https://api.sampleapp.ai";
-    // return "http://127.0.0.1:8000";
-    // if (typeof window !== "undefined") {
-    //   // Browser: try to get from environment or use relative URL
-    //   return (
-    //     (window as any).__SAMPLEAPP_API_BASE_URL__ ||f
-    //     process.env.NEXT_PUBLIC_FASTAPI_APP_URL ||
-    //     process.env.FASTAPI_APP_URL ||
-    //     "http://127.0.0.1:8000"
-    //   );
-    // }
-    // // Node.js: use environment variable or default
-    // return (
-    //   process.env.FASTAPI_APP_URL ||
-    //   process.env.NEXT_PUBLIC_FASTAPI_APP_URL ||
-    //   "http://127.0.0.1:8000"
-    // );
-}
 /**
  * Helper function to download a file from a URL
  */
@@ -45,9 +21,7 @@ function createDownloadLink(downloadEndpoint) {
  * @returns Sandbox configuration
  */
 export async function fetchSandboxConfig(apiKey, sandboxId) {
-    const baseUrl = getBaseUrl();
     const client = createApiClient({
-        baseUrl,
         apiKey,
     });
     // Fetch sandbox content from API
@@ -70,8 +44,8 @@ export async function fetchSandboxConfig(apiKey, sandboxId) {
     // document.body.removeChild(link);
     const containerId = ""; // Will be populated when sandbox is started via sdk.startSandbox()
     const completeCodeZipFile = containerId
-        ? `${baseUrl}/fileshare?container_id=${containerId}`
-        : `${baseUrl}/fileshare?container_id=placeholder`; // Placeholder until sandbox is started
+        ? `${"hello there"}/fileshare?container_id=${containerId}`
+        : `${"hello there"}/fileshare?container_id=placeholder`; // Placeholder until sandbox is started
     // Transform SandboxContent to SandboxConfig
     const config = {
         id: sandboxContent.uid,
@@ -99,6 +73,8 @@ export async function fetchSandboxConfig(apiKey, sandboxId) {
                         // CustomConsole is now sandboxContent.markdown
                         CustomConsole: sandboxContent.markdown || "",
                         GuideView: "Default Guide",
+                        // Get gitUrl from sandboxContent.github_url
+                        gitUrl: sandboxContent.github_url || undefined,
                     },
                 ],
             },

package/dist/components/sandbox/guardian/app-layout-no-sidebar.js

@@ -1,8 +1,11 @@
 import React from "react";
 import { cn } from "../../../lib/utils";
-export default function AppLayoutNoSidebar({ header, hasBodyPadding = true, children, bodyHeight = "h-[calc(100vh-6rem)]", }) {
-    return (React.createElement("div", null,
+export default function AppLayoutNoSidebar({ header, hasBodyPadding = true, children, textColorStyle, }) {
+    return (React.createElement("div", { className: "flex flex-col h-full" },
         header && (React.createElement("header", { className: "flex h-24 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 w-full" },
             React.createElement("div", { className: "flex items-center gap-2 px-4 w-full" }, header))),
-        React.createElement("div", { className: cn("flex flex-1 flex-col pt-0", hasBodyPadding && "gap-4 p-4", bodyHeight) }, children)));
+        React.createElement("div", { className: cn("flex flex-1 flex-col pt-0 min-h-0", hasBodyPadding && "gap-4 p-4", 
+            // Use CSS variable with Tailwind arbitrary value
+            textColorStyle &&
+                "text-[var(--guardian-text-color)] dark:text-[var(--guardian-text-color-dark)]"), style: textColorStyle }, children)));
 }

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, }) {
+export default function GuardianDemo({ CustomConsole, GuideView, browserUrl, playgroundUid, useVm, codeZipFile, completeCodeZipFile, variant, themeColor, hasPreview, isFrame = false, isGuardian = false, gitUrl, }) {
     const { isBrowserMaximized } = useGuardianContext();
     const { setCurrentView } = useGuardianContext();
     const [reloadCounter, setReloadCounter] = useState(0);
@@ -31,5 +31,5 @@ export default function GuardianDemo({ CustomConsole, GuideView, browserUrl, pla
         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 })));
     }
-    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 }), 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 }), app: React.createElement(RightView, { reloadCounter: reloadCounter, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, hasPreview: hasPreview, variant: variant, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, isGuardian: isGuardian }) }));
 }

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

@@ -4,7 +4,14 @@ import SlidingConsoleGuideToggle from "./left-view/toggle";
 // import AskAiView from "../ask-ai-view";
 // import DefaultGuideView from "../default-guide-view";
 import { Markdown } from "../ui/markdown";
-export default function ConsoleWithGuide({ CustomConsole, GuideView, playgroundUid, onReloadPreview, onStageChange, codeZipFile, themeColor, }) {
+import sampleappLogo from "../../../../assets/sampleapp-logo.png";
+function Logo({ href, width }) {
+    return (React.createElement("div", { className: "flex justify-center md:justify-start" },
+        React.createElement("a", { href: href ? href : "https://sampleapp.ai", className: "flex", target: "_blank", rel: "noopener noreferrer" },
+            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, }) {
     const [currentView, setCurrentView] = useState("console");
     const isConsoleView = useMemo(() => currentView === "console", [currentView]);
     // const isGuideView = useMemo(() => currentView === "guide", [currentView]);
@@ -13,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 }, CustomConsole))));
+                    React.createElement(Markdown, { className: "text-gray-100", themeColor: themeColor, browserUrl: browserUrl, gitUrl: gitUrl }, CustomConsole))));
         }
         const CustomConsoleComponent = CustomConsole;
         return (React.createElement(CustomConsoleComponent, { onReloadPreview: onReloadPreview !== null && onReloadPreview !== void 0 ? onReloadPreview : (() => { }), onStageChange: onStageChange !== null && onStageChange !== void 0 ? onStageChange : (() => { }), themeColor: themeColor }));
@@ -46,13 +53,18 @@ export default function ConsoleWithGuide({ CustomConsole, GuideView, playgroundU
     //   const GuideComponent = GuideView as ComponentType;
     //   return <GuideComponent />;
     // };
-    return (React.createElement("div", { className: "flex-1 min-h-0 relative" },
+    return (React.createElement("div", { className: "flex-1 min-h-0 relative flex flex-col" },
         React.createElement("div", { className: "flex justify-center border-b border-border" },
             React.createElement(SlidingConsoleGuideToggle, { playgroundUid: playgroundUid, variant: "pill", buttonClassName: "text-sm px-4 py-1", currentView: currentView, setCurrentView: setCurrentView, tabs: [
                     { id: "console", label: "Guide" },
                     // ...(GuideView ? [{id: "guide-og", label: "Guide OG"}] : []),
                     // {id: "chat", label: "Ask AI"},
                 ] })),
-        React.createElement("div", { className: "h-[calc(100vh-9.5rem)] min-h-0 overflow-hidden" },
-            React.createElement("div", { className: "h-full min-h-0 overflow-y-auto" }, isConsoleView && renderCustomConsole()))));
+        React.createElement("div", { className: "h-[calc(100vh-9.5rem)] min-h-0 overflow-hidden flex-1 flex flex-col" },
+            React.createElement("div", { className: "flex-1 min-h-0 overflow-y-auto" }, isConsoleView && renderCustomConsole()),
+            React.createElement("div", { className: "relative" },
+                React.createElement("div", { className: "flex flex-row w-full items-center text-xs justify-center opacity-30 mt-1 pb-2 bg-background" },
+                    React.createElement("span", { className: "text-gray-300" }, "Powered by"),
+                    React.createElement("span", { className: "hover:bg-accent rounded-sm p-1 mx-1" },
+                        React.createElement(Logo, { width: 100, href: "https://sampleapp.ai" })))))));
 }

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

@@ -6,7 +6,9 @@ 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";
-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, }) {
+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:", {
@@ -89,9 +91,9 @@ export default function GuardianComponent({ demoOptions, frameworkOptions, first
     // 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 })));
+            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 })));
     }
-    return (React.createElement(AppLayoutNoSidebar, { header: React.createElement(Header, { demoOptions: demoOptions, frameworkOptions: frameworkOptions, currentFramework: currentFramework, currentUseCase: currentUseCase, playgroundLogo: playgroundLogo, firstFrameworkByUseCase: firstFrameworkByUseCase }) },
-        React.createElement("div", { className: "absolute inset-0 mt-24 px-4 pb-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 }))));
+    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 }))));
 }

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

@@ -40,6 +40,6 @@ export default function GuardianPlayground({ nestedConfig, useCase, framework: s
             firstFrameworkByUseCase[useCaseId] = firstFrameworkKey;
         }
     });
-    return (React.createElement(GuardianStyleWrapper, null,
-        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, consoleUrlConfigs: frameworkConfig.consoleUrlConfigs, variant: frameworkConfig.variant, themeColor: frameworkConfig.themeColor, hasPreview: (_b = frameworkConfig.hasPreview) !== null && _b !== void 0 ? _b : true, currentUseCase: useCase, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: chatUid })));
+    return (React.createElement(GuardianStyleWrapper, { themeColor: frameworkConfig.themeColor },
+        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, consoleUrlConfigs: frameworkConfig.consoleUrlConfigs, variant: frameworkConfig.variant, themeColor: frameworkConfig.themeColor, hasPreview: (_b = frameworkConfig.hasPreview) !== null && _b !== void 0 ? _b : true, currentUseCase: useCase, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: chatUid, gitUrl: frameworkConfig.gitUrl })));
 }

package/dist/components/sandbox/guardian/guardian-style-wrapper.js

@@ -1,12 +1,13 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { TAILWIND_CSS } from "../../../lib/generated-css";
 /**
  * Style wrapper for Guardian components that injects Tailwind CSS
  * into the document without using Shadow DOM (preserves React context)
  */
-export const GuardianStyleWrapper = ({ children, }) => {
+export const GuardianStyleWrapper = ({ children, themeColor = "#3b82f6", }) => {
     const [stylesInjected, setStylesInjected] = useState(false);
+    const rootRef = useRef(null);
     useEffect(() => {
         // Only run on client side
         if (typeof window === "undefined" || typeof document === "undefined") {
@@ -29,5 +30,18 @@ export const GuardianStyleWrapper = ({ children, }) => {
             // Don't remove styles on unmount as other Guardian components might use them
         };
     }, []);
-    return (React.createElement("div", { className: "guardian-sdk-root", style: { width: "100%", height: "100%" } }, children));
+    // Set CSS variables for colors based on themeColor
+    useEffect(() => {
+        if (rootRef.current) {
+            rootRef.current.style.setProperty("--colors-primary", themeColor);
+            // Create a slightly lighter version for secondary
+            const secondaryColor = themeColor; // Can be customized if needed
+            rootRef.current.style.setProperty("--colors-secondary", secondaryColor);
+        }
+    }, [themeColor]);
+    return (React.createElement("div", { ref: rootRef, className: "guardian-sdk-root dark bg-background text-foreground", style: {
+            width: "100%",
+            height: "100%",
+            fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+        } }, children));
 };

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

@@ -2,24 +2,6 @@
 import { useCallback } from "react";
 import { useVmContext } from "../context/vm-context";
 import { createApiClient } from "../../../../lib/api-client";
-/**
- * Get the base URL for API requests
- * In browser, use relative URL or environment variable
- * In Node.js, use environment variable or default
- */
-function getBaseUrl() {
-    if (typeof window !== "undefined") {
-        // Browser: try to get from environment or use relative URL
-        return (window.__SAMPLEAPP_API_BASE_URL__ ||
-            process.env.NEXT_PUBLIC_FASTAPI_APP_URL ||
-            process.env.FASTAPI_APP_URL ||
-            "http://127.0.0.1:8000");
-    }
-    // Node.js: use environment variable or default
-    return (process.env.FASTAPI_APP_URL ||
-        process.env.NEXT_PUBLIC_FASTAPI_APP_URL ||
-        "http://127.0.0.1:8000");
-}
 /**
  * Creates a cache key from sandboxUid and browserUrl.
  * This allows caching different URLs for the same sandbox.
@@ -87,9 +69,7 @@ export function useSandboxUrlLoader(startSandboxConfig) {
             // Non-VM mode: call startSandbox API to get container URL
             if (startSandboxConfig) {
                 try {
-                    const baseUrl = getBaseUrl();
                     const client = createApiClient({
-                        baseUrl,
                         apiKey: startSandboxConfig.apiKey,
                     });
                     const response = await client.sdk.startSandbox({

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

@@ -88,12 +88,25 @@ export default function PillFileSelector({ themeColor }) {
     };
     // Exclude certain files from display
     const excludedFiles = [
+        // Common config/environment files
         ".env",
+        // Vite/plugin instrumentation files
         "vite-plugin-react-instrumentation.ts",
         "instrumentation-client.ts",
+        // Global styles (often not needed in code editor)
+        "globals.css",
     ];
     const filteredFiles = fileEntries.filter(([filePath]) => {
         const fileName = filePath.split("/").pop() || filePath;
+        // Exclude markdown files (*.md)
+        if (fileName.endsWith(".md")) {
+            return false;
+        }
+        // Exclude .gitignore files
+        if (fileName === ".gitignore" || fileName.endsWith(".gitignore")) {
+            return false;
+        }
+        // Exclude other specific files
         return !excludedFiles.includes(fileName);
     });
     // Scroll a pill into view whenever the active file changes

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

@@ -1,12 +1,25 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import SlidingEditPreviewToggle from "../demo/left-view/toggle";
 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, }) {
+export default function RightPanelView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, themeColor = "#3b82f6", }) {
     const { setCurrentView, currentView } = useGuardianContext();
+    const [showLoader, setShowLoader] = useState(!browserUrl);
+    // Delay hiding the loader for 5 seconds after browserUrl becomes available
+    useEffect(() => {
+        if (browserUrl) {
+            const timer = setTimeout(() => {
+                setShowLoader(false);
+            }, 7000);
+            return () => clearTimeout(timer);
+        }
+        else {
+            setShowLoader(true);
+        }
+    }, [browserUrl]);
     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: [
@@ -15,8 +28,8 @@ export default function RightPanelView({ reloadCounter, overlayStage, browserUrl
                 ] })),
         React.createElement("div", { style: {
                 display: currentView === "preview" ? "block" : "none",
-            } }, !browserUrl ? (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 }))) : (React.createElement(Browser, { previewUrl: browserUrl, setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: useVm
+            } }, 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" },
             overlayStage === "error" && (React.createElement("div", { className: "w-full h-full bg-red-950 text-red-200 flex items-center justify-center" },

package/dist/components/sandbox/guardian/right-view/right-top-down-view.js

@@ -9,26 +9,41 @@ import { useGuardianContext } from "../context/guardian-context";
 import { useEffect, useMemo, useState } from "react";
 import { zipPathToFileTree } from "../zip-to-filetree";
 import { codeZipFileToCodebase } from "../zip-to-codebase";
-import { DownloadIcon, Globe, Code2 } from "lucide-react";
+import { DownloadIcon, Globe } from "lucide-react";
 import { useFrameParams } from "../hooks/use-frame-params";
 import { cn } from "../../../../lib/utils";
+import { extractContainerIdFromUrl } from "../../../../lib/api-client";
 export default function RightView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, themeColor, completeCodeZipFile, hasPreview, isPreviewMinimized = false, isGuardian = false, isBrowserMaximized = false, }) {
     const { setFileTree, setGeneratedCode } = useGuardianContext();
     const frameParams = useFrameParams();
     const [activeTab, setActiveTab] = useState("code");
     const [networkRequests, setNetworkRequests] = useState([]);
-    // Use frame param override for theme if in frame mode
-    const effectiveThemeColor = frameParams.isFrame && frameParams.theme ? frameParams.theme : themeColor;
-    const normalizedZipDownloadPath = useMemo(() => {
-        let normalizedPath = completeCodeZipFile;
-        if (normalizedPath.startsWith("/public/")) {
-            normalizedPath = normalizedPath.slice("/public".length);
+    const [showLoader, setShowLoader] = useState(!browserUrl);
+    // Delay hiding the loader for 5 seconds after browserUrl becomes available
+    useEffect(() => {
+        if (browserUrl) {
+            const timer = setTimeout(() => {
+                setShowLoader(false);
+            }, 5000);
+            return () => clearTimeout(timer);
         }
-        if (!normalizedPath.startsWith("/")) {
-            normalizedPath = "/" + normalizedPath;
+        else {
+            setShowLoader(true);
         }
-        return normalizedPath;
-    }, [completeCodeZipFile]);
+    }, [browserUrl]);
+    // Use frame param override for theme if in frame mode
+    const effectiveThemeColor = frameParams.isFrame && frameParams.theme ? frameParams.theme : themeColor;
+    // Extract container ID from browserUrl and build download URL
+    const downloadCodeUrl = useMemo(() => {
+        if (!browserUrl)
+            return null;
+        const containerId = extractContainerIdFromUrl(browserUrl);
+        if (!containerId)
+            return null;
+        // Use the API base URL for the download endpoint
+        const baseUrl = process.env.BASE_API_URL || "https://api.sampleapp.ai";
+        return `${baseUrl}/api/v1/sdk/download-code?container_id=${encodeURIComponent(containerId)}`;
+    }, [browserUrl]);
     // Extract only the nested children (actual API calls to external services)
     const childrenRequests = useMemo(() => {
         const children = [];
@@ -85,8 +100,8 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
     }, []);
     // When browser is maximized, render only the browser at full size
     if (isBrowserMaximized) {
-        return (React.createElement("div", { className: "h-full w-full" }, !browserUrl ? (React.createElement("div", { className: "h-full w-full relative overflow-hidden" },
-            React.createElement(AiLoader, { text: "Booting up...", fullScreen: false }))) : (React.createElement(Browser, { previewUrl: browserUrl, setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: "h-full w-full border-none", reloadSignal: reloadCounter, useVm: useVm, isGuardian: isGuardian }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
+        return (React.createElement("div", { className: "h-full w-full" }, showLoader ? (React.createElement("div", { className: "h-full w-full relative overflow-hidden" },
+            React.createElement(AiLoader, { text: "Booting up...", fullScreen: false, themeColor: effectiveThemeColor }))) : (React.createElement(Browser, { previewUrl: browserUrl, setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: "h-full w-full border-none", reloadSignal: reloadCounter, useVm: useVm, isGuardian: isGuardian }, 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"),
@@ -104,8 +119,8 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
         React.createElement(PanelGroup, { direction: "vertical", className: "relative h-full" },
             hasPreview && !isPreviewMinimized && (React.createElement(React.Fragment, null,
                 React.createElement(Panel, { defaultSize: 58, minSize: 20, maxSize: 80, order: 1 },
-                    React.createElement("div", { className: "h-full w-full" }, !browserUrl ? (React.createElement("div", { className: "h-full w-full relative overflow-hidden" },
-                        React.createElement(AiLoader, { text: "Booting up...", fullScreen: false }))) : (React.createElement(Browser, { previewUrl: browserUrl, setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: "h-full w-full border-none", reloadSignal: reloadCounter, useVm: useVm, isGuardian: isGuardian }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
+                    React.createElement("div", { className: "h-full w-full" }, showLoader ? (React.createElement("div", { className: "h-full w-full relative overflow-hidden" },
+                        React.createElement(AiLoader, { text: "Booting up...", fullScreen: false, themeColor: effectiveThemeColor }))) : (React.createElement(Browser, { previewUrl: browserUrl, setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: "h-full w-full border-none", reloadSignal: reloadCounter, useVm: useVm, isGuardian: isGuardian }, 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"),
@@ -125,41 +140,18 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
                         React.createElement("div", { className: "h-full w-px bg-border group-hover:bg-blue-400 transition-colors relative z-10" }))))),
             React.createElement(Panel, { defaultSize: 42, minSize: 20, maxSize: 80, order: 2 },
                 React.createElement("div", { className: "h-full w-full flex flex-col" },
-                    React.createElement("div", { className: "flex items-center justify-between border-b border-zinc-800 dark:border-zinc-700 bg-zinc-900 dark:bg-zinc-950 flex-shrink-0" },
-                        React.createElement("div", { className: "flex" },
-                            React.createElement("button", { type: "button", onClick: () => setActiveTab("code"), className: cn("flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors border-b-2", activeTab === "code"
-                                    ? "border-current text-white"
-                                    : "border-transparent text-zinc-500 hover:text-zinc-300"), style: activeTab === "code"
-                                    ? {
-                                        borderColor: effectiveThemeColor,
-                                        color: effectiveThemeColor,
-                                    }
-                                    : undefined },
-                                React.createElement(Code2, { className: "w-3.5 h-3.5" }),
-                                "Code"),
-                            React.createElement("button", { type: "button", onClick: () => setActiveTab("network"), className: cn("flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors border-b-2", activeTab === "network"
-                                    ? "border-current text-white"
-                                    : "border-transparent text-zinc-500 hover:text-zinc-300"), style: activeTab === "network"
-                                    ? {
-                                        borderColor: effectiveThemeColor,
-                                        color: effectiveThemeColor,
-                                    }
-                                    : undefined },
-                                React.createElement(Globe, { className: "w-3.5 h-3.5" }),
-                                "Network",
-                                childrenRequests.length > 0 && (React.createElement("span", { className: "ml-1 px-1.5 py-0.5 text-[10px] rounded-full bg-zinc-700 text-zinc-300" }, childrenRequests.length)))),
-                        activeTab === "network" && childrenRequests.length > 0 && (React.createElement("button", { type: "button", className: "px-2 text-[10px] font-medium text-zinc-500 hover:text-zinc-300 transition-colors", onClick: () => setNetworkRequests([]) }, "Clear"))),
-                    React.createElement("div", { className: "flex-1 min-h-0 flex flex-col" }, activeTab === "code" ? (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "flex items-center justify-between border-b border-zinc-800 dark:border-zinc-700 bg-zinc-900 dark:bg-zinc-950" },
-                            React.createElement(PillFileSelector, { themeColor: effectiveThemeColor }),
-                            React.createElement("div", { className: "px-2 flex-shrink-0" },
-                                React.createElement("button", { type: "button", className: "inline-flex items-center gap-1 text-[10px] font-medium transition-colors hover:opacity-80", style: { color: effectiveThemeColor }, onClick: () => {
-                                        window.open(normalizedZipDownloadPath, "_blank");
-                                    } },
-                                    React.createElement(DownloadIcon, { className: "w-4 h-4" }),
-                                    "Download Code"))),
-                        React.createElement("div", { className: "flex-1 min-h-0" },
-                            React.createElement(SimplifiedEditor, { themeColor: effectiveThemeColor })))) : (React.createElement(NetworkRequestsView, { requests: childrenRequests, themeColor: effectiveThemeColor }))))))));
+                    React.createElement("div", { className: "flex-1 min-h-0 flex flex-col" },
+                        React.createElement(React.Fragment, null,
+                            React.createElement("div", { className: "flex items-center justify-between border-b border-zinc-800 dark:border-zinc-700 bg-zinc-900 dark:bg-zinc-950" },
+                                React.createElement(PillFileSelector, { themeColor: effectiveThemeColor }),
+                                downloadCodeUrl && (React.createElement("div", { className: "px-2 flex-shrink-0" },
+                                    React.createElement("button", { type: "button", className: "inline-flex items-center gap-1 text-[10px] font-medium transition-colors hover:opacity-80", style: { color: effectiveThemeColor }, onClick: () => {
+                                            window.open(downloadCodeUrl, "_blank");
+                                        } },
+                                        React.createElement(DownloadIcon, { className: "w-4 h-4" }),
+                                        "Download Code")))),
+                            React.createElement("div", { className: "flex-1 min-h-0" },
+                                React.createElement(SimplifiedEditor, { themeColor: effectiveThemeColor })))))))));
 }
 // Simple Network Requests View Component
 function NetworkRequestsView({ requests, themeColor, }) {

package/dist/components/sandbox/guardian/ui/ai-loader.js

@@ -1,32 +1,75 @@
 import * as React from "react";
-export const Component = ({ size = 180, text = "Generating", fullScreen = true, }) => {
+// Helper to convert hex to RGB
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+// Helper to darken a color
+function darkenColor(hex, percent) {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return hex;
+    const factor = 1 - percent / 100;
+    const r = Math.round(rgb.r * factor);
+    const g = Math.round(rgb.g * factor);
+    const b = Math.round(rgb.b * factor);
+    return `rgb(${r}, ${g}, ${b})`;
+}
+export const Component = ({ size = 180, text = "Generating", fullScreen = true, themeColor = "#3b82f6", // Default blue
+ }) => {
     const letters = text.split("");
+    // Generate color variants from themeColor
+    const rgb = hexToRgb(themeColor);
+    const colorDark = darkenColor(themeColor, 60);
+    const colorMid = darkenColor(themeColor, 40);
+    const colorLight = darkenColor(themeColor, 20);
+    const rgbaGlow = rgb
+        ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`
+        : "rgba(59, 130, 246, 0.3)";
+    // Generate gradient colors for dark mode
+    const gradientFrom = darkenColor(themeColor, 30);
     return (React.createElement("div", { className: [
-            "flex items-center justify-center bg-gradient-to-b from-gray-100 via-gray-200 to-gray-300 dark:from-[#1a3379] dark:via-[#0f172a] dark:to-black",
+            "flex items-center justify-center",
             fullScreen ? "fixed inset-0 z-50" : "w-full h-full",
-        ].join(" ") },
+        ].join(" "), style: {
+            background: `linear-gradient(to bottom, ${gradientFrom}, #0f172a, black)`,
+        } },
         React.createElement("div", { className: "relative flex items-center justify-center font-inter select-none", style: { width: size, height: size } },
             letters.map((letter, index) => {
                 // Preserve visual spacing for spaces by using a non‑breaking space
                 const displayChar = letter === " " ? "\u00A0" : letter;
-                return (React.createElement("span", { key: `${letter}-${index}`, className: "inline-block text-gray-800 dark:text-white opacity-40 animate-loaderLetter", style: { animationDelay: `${index * 0.1}s` } }, displayChar));
+                return (React.createElement("span", { key: `${letter}-${index}`, className: "inline-block text-white opacity-40 animate-loaderLetter", style: { animationDelay: `${index * 0.1}s` } }, displayChar));
             }),
-            React.createElement("div", { className: "absolute inset-0 rounded-full animate-loaderCircle" })),
+            React.createElement("div", { className: "absolute inset-0 rounded-full animate-loaderCircle", style: {
+                    // @ts-ignore - CSS custom property
+                    "--loader-color-dark": colorDark,
+                    "--loader-color-mid": colorMid,
+                    "--loader-color-light": colorLight,
+                    "--loader-color-glow": rgbaGlow,
+                } })),
         React.createElement("style", null, `
         @keyframes loaderCircle {
           0% {
             transform: rotate(90deg);
-            box-shadow: 0 6px 12px 0 #4b5563 inset, 0 12px 18px 0 #6b7280 inset,
-              0 36px 36px 0 #9ca3af inset,
-              0 0 3px 1.2px rgba(107, 114, 128, 0.3),
-              0 0 0 0 rgba(107, 114, 128, 0.3);
+            box-shadow: 0 6px 12px 0 var(--loader-color-dark) inset, 
+              0 12px 18px 0 var(--loader-color-mid) inset,
+              0 36px 36px 0 var(--loader-color-light) inset,
+              0 0 3px 1.2px var(--loader-color-glow),
+              0 0 0 0 var(--loader-color-glow);
           }
           100% {
             transform: rotate(450deg);
-            box-shadow: 0 6px 12px 0 #4b5563 inset, 0 12px 18px 0 #6b7280 inset,
-              0 36px 36px 0 #9ca3af inset,
-              0 0 3px 1.2px rgba(107, 114, 128, 0.3),
-              0 0 0 0 rgba(107, 114, 128, 0.3);
+            box-shadow: 0 6px 12px 0 var(--loader-color-dark) inset, 
+              0 12px 18px 0 var(--loader-color-mid) inset,
+              0 36px 36px 0 var(--loader-color-light) inset,
+              0 0 3px 1.2px var(--loader-color-glow),
+              0 0 0 0 var(--loader-color-glow);
           }
         }
         @keyframes loaderLetter {