@sampleapp.ai/sdk 1.0.28 → 1.0.30

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

@@ -0,0 +1,145 @@
+"use client";
+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.
+ */
+function getCacheKey(sandboxUid, browserUrl) {
+    return `${sandboxUid}::${browserUrl}`;
+}
+/**
+ * Hook that abstracts the logic for loading sandbox URLs.
+ * Returns functions to load URLs and check if they're already loaded.
+ */
+export function useSandboxUrlLoader(startSandboxConfig) {
+    const { setVmUrl, getVmUrl, setVmError, hasError } = useVmContext();
+    /**
+     * Loads a sandbox URL. If useVm is true, fetches from the API.
+     * Otherwise, uses the browserUrl directly.
+     * Returns a promise that resolves to the final URL, or throws if loading fails.
+     *
+     * Caches by sandboxUid + browserUrl to support multiple URLs per sandbox.
+     */
+    const loadSandboxUrl = useCallback(async (config) => {
+        const { sandboxUid, browserUrl, useVm } = config;
+        const cacheKey = getCacheKey(sandboxUid, browserUrl);
+        // Check if URL is already loaded for this specific browserUrl
+        const existingUrl = getVmUrl(cacheKey);
+        if (existingUrl !== undefined) {
+            return existingUrl;
+        }
+        // Check if we've already attempted and failed for this specific browserUrl
+        if (hasError(cacheKey)) {
+            throw new Error(`Previously failed to load sandbox URL for ${sandboxUid} with ${browserUrl}`);
+        }
+        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}`);
+                }
+                const data = await response.json();
+                if (!data.vncUrl) {
+                    console.error(`No vncUrl in response for ${sandboxUid}:`, data);
+                    setVmError(cacheKey);
+                    throw new Error("No vncUrl in sandbox response");
+                }
+                const vncUrl = data.vncUrl;
+                setVmUrl(cacheKey, vncUrl);
+                return vncUrl;
+            }
+            catch (error) {
+                // Mark as error to prevent infinite retries
+                setVmError(cacheKey);
+                throw error;
+            }
+        }
+        else {
+            // 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({
+                        env: startSandboxConfig.env,
+                        apiKey: startSandboxConfig.apiKey,
+                        chatUid: startSandboxConfig.chatUid,
+                    });
+                    // Use the container_url from the response as the browserUrl
+                    const containerUrl = response.container_url;
+                    setVmUrl(cacheKey, containerUrl);
+                    return containerUrl;
+                }
+                catch (error) {
+                    // Mark as error to prevent infinite retries
+                    setVmError(cacheKey);
+                    console.error("Failed to start sandbox:", error);
+                    throw new Error(`Failed to start sandbox: ${error instanceof Error ? error.message : String(error)}`);
+                }
+            }
+            else {
+                // Fallback: Use browserUrl directly if startSandboxConfig is not provided
+                setVmUrl(cacheKey, browserUrl);
+                return browserUrl;
+            }
+        }
+    }, [getVmUrl, setVmUrl, hasError, setVmError, startSandboxConfig]);
+    /**
+     * Gets the URL for a sandbox + browserUrl combination if it's already loaded.
+     * Returns undefined if not loaded.
+     */
+    const getSandboxUrl = useCallback((sandboxUid, browserUrl) => {
+        const cacheKey = getCacheKey(sandboxUid, browserUrl);
+        return getVmUrl(cacheKey);
+    }, [getVmUrl]);
+    /**
+     * Preloads URLs for multiple sandboxes in parallel.
+     * Errors are logged but don't stop other URLs from loading.
+     */
+    const preloadSandboxUrls = useCallback(async (configs) => {
+        // Filter out configs that are already loaded or have errors
+        const configsToLoad = configs.filter((config) => {
+            const cacheKey = getCacheKey(config.sandboxUid, config.browserUrl);
+            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]);
+    return {
+        loadSandboxUrl,
+        getSandboxUrl,
+        preloadSandboxUrls,
+    };
+}

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

@@ -0,0 +1,538 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+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, }) {
+    const { isBrowserMaximized, setIsBrowserMaximized } = useGuardianContext();
+    const iframeRef = useRef(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const historyRef = useRef([]);
+    const historyIndexRef = useRef(-1);
+    const suppressHistoryPushRef = useRef(false);
+    const suppressIframeSrcUpdateRef = useRef(false);
+    const [historyIndex, setHistoryIndex] = useState(-1);
+    const [historyLength, setHistoryLength] = useState(0);
+    const [urlInput, setUrlInput] = useState("");
+    const [iframeSrc, setIframeSrc] = useState("");
+    const isIgnorableUrl = useCallback((href) => {
+        if (!href)
+            return true;
+        const value = href.toString();
+        return value === "about:blank" || value.startsWith("about:");
+    }, []);
+    /**
+     * Convert displayed URL back to original format. For dev mode you
+     * can just show the containerEndpoint if you prefer.
+     */
+    const getDisplayUrl = (proxyUrl) => {
+        try {
+            const currentUrl = new URL(proxyUrl);
+            // Return just the pathname
+            return currentUrl.pathname || "/";
+        }
+        catch (_a) {
+            return proxyUrl;
+        }
+    };
+    const normalizeUrl = useCallback((href) => {
+        try {
+            const u = new URL(href, window.location.href);
+            u.searchParams.delete("_ts");
+            return u.toString();
+        }
+        catch (_a) {
+            // Best-effort removal of _ts from plain strings
+            const withoutTs = href.replace(/([?&])_ts=\d+(&|$)/, (m, p1, p2) => p2 === "&" ? p1 : "");
+            return withoutTs.replace(/[?&]$/, "");
+        }
+    }, []);
+    const updateHistoryState = useCallback(() => {
+        setHistoryIndex(historyIndexRef.current);
+        setHistoryLength(historyRef.current.length);
+    }, []);
+    const updateUrlInput = useCallback((href) => {
+        try {
+            const currentUrlObj = new URL(href, window.location.href);
+            setUrlInput(currentUrlObj.pathname || "/");
+        }
+        catch (_a) {
+            setUrlInput(href);
+        }
+    }, []);
+    const pushHistoryEntry = useCallback((href) => {
+        const sliceUntil = Math.min(historyRef.current.length, historyIndexRef.current + 1);
+        historyRef.current = [...historyRef.current.slice(0, sliceUntil), href];
+        historyIndexRef.current = historyRef.current.length - 1;
+        updateHistoryState();
+    }, [updateHistoryState]);
+    useEffect(() => {
+        if (!previewUrl)
+            return;
+        // Skip iframe src update if we're syncing from a navigation message
+        // (to prevent reloading the iframe when it has already navigated internally)
+        if (!suppressIframeSrcUpdateRef.current) {
+            // Keep iframe src in sync with external previewUrl when it changes meaningfully
+            setIframeSrc((prev) => {
+                const prevNorm = prev ? normalizeUrl(prev) : "";
+                const nextNorm = normalizeUrl(previewUrl);
+                return prevNorm === nextNorm ? prev || previewUrl : previewUrl;
+            });
+        }
+        else {
+            // Reset the flag after skipping the update
+            suppressIframeSrcUpdateRef.current = false;
+        }
+        updateUrlInput(previewUrl);
+        if (historyRef.current.length === 0) {
+            historyRef.current = [previewUrl];
+            historyIndexRef.current = 0;
+            updateHistoryState();
+            suppressHistoryPushRef.current = false;
+            return;
+        }
+        if (suppressHistoryPushRef.current) {
+            suppressHistoryPushRef.current = false;
+            return;
+        }
+        const current = historyRef.current[historyIndexRef.current];
+        if (normalizeUrl(current) === normalizeUrl(previewUrl))
+            return;
+        pushHistoryEntry(normalizeUrl(previewUrl));
+    }, [
+        previewUrl,
+        updateUrlInput,
+        pushHistoryEntry,
+        updateHistoryState,
+        normalizeUrl,
+    ]);
+    /**
+     * Force-reload the current iframe without mutating previewUrl.
+     * Tries same-origin reload first; falls back to cache-busting the src.
+     */
+    const reloadIframe = () => {
+        var _a;
+        if (!previewUrl)
+            return;
+        try {
+            const base = ((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.src) || iframeSrc || previewUrl;
+            const url = new URL(base, window.location.href);
+            url.searchParams.set("_ts", Date.now().toString());
+            setIframeSrc(url.toString());
+        }
+        catch (_b) {
+            try {
+                const url = new URL(previewUrl, window.location.href);
+                url.searchParams.set("_ts", Date.now().toString());
+                setIframeSrc(url.toString());
+            }
+            catch (_c) {
+                setIframeSrc(previewUrl);
+            }
+        }
+    };
+    const getFrameWindow = () => {
+        const iframe = iframeRef.current;
+        if (!iframe)
+            return null;
+        try {
+            return iframe.contentWindow;
+        }
+        catch (_a) {
+            return null;
+        }
+    };
+    const getFrameHref = useCallback(() => {
+        var _a, _b;
+        const iframe = iframeRef.current;
+        if (!iframe)
+            return null;
+        try {
+            const href = (_b = (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.href;
+            if (href && !isIgnorableUrl(href))
+                return href;
+        }
+        catch (_c) {
+            // Ignore cross-origin errors; fall back to iframe.src below.
+        }
+        try {
+            // For cross-origin iframes, we can't read location.href, so use iframe.src
+            // But iframe.src might not reflect client-side navigation, so we also check
+            // if we have a more recent previewUrl
+            const src = iframe.src;
+            if (src && !isIgnorableUrl(src)) {
+                // If previewUrl is more recent and different, prefer it
+                if (previewUrl && normalizeUrl(previewUrl) !== normalizeUrl(src)) {
+                    return previewUrl;
+                }
+                return src;
+            }
+            // Fallback to previewUrl if iframe.src is not available
+            if (previewUrl && !isIgnorableUrl(previewUrl)) {
+                return previewUrl;
+            }
+            return null;
+        }
+        catch (_d) {
+            // Final fallback to previewUrl
+            if (previewUrl && !isIgnorableUrl(previewUrl)) {
+                return previewUrl;
+            }
+            return null;
+        }
+    }, [previewUrl, normalizeUrl, isIgnorableUrl]);
+    /**
+     * Synchronize state from the iframe's current location (when accessible).
+     */
+    const syncFromIframe = useCallback(() => {
+        const currentHref = getFrameHref();
+        if (!currentHref || isIgnorableUrl(currentHref)) {
+            // If we can't get the href, at least try to update from previewUrl
+            if (previewUrl && !isIgnorableUrl(previewUrl)) {
+                updateUrlInput(previewUrl);
+            }
+            return;
+        }
+        try {
+            const currentUrlObj = new URL(currentHref, window.location.href);
+            const pathOnly = currentUrlObj.pathname || "/";
+            setUrlInput(pathOnly);
+        }
+        catch (_a) {
+            // If URL parsing fails, try to extract path from the string
+            try {
+                const pathMatch = currentHref.match(/\/\/[^\/]+(\/.*?)(?:\?|$)/);
+                if (pathMatch && pathMatch[1]) {
+                    setUrlInput(pathMatch[1]);
+                }
+                else {
+                    setUrlInput(currentHref);
+                }
+            }
+            catch (_b) {
+                setUrlInput(currentHref);
+            }
+        }
+        const normalizedCurrent = normalizeUrl(currentHref);
+        if (!suppressHistoryPushRef.current) {
+            const currentFlowLength = historyRef.current.length;
+            const sliceUntil = Math.min(currentFlowLength, historyIndexRef.current + 1);
+            historyRef.current = [
+                ...historyRef.current.slice(0, sliceUntil),
+                normalizedCurrent,
+            ];
+            historyIndexRef.current = historyRef.current.length - 1;
+            setHistoryIndex(historyIndexRef.current);
+            setHistoryLength(historyRef.current.length);
+        }
+        // Only propagate meaningful navigations (ignore cache-busting changes)
+        if (normalizeUrl(previewUrl) !== normalizedCurrent) {
+            setPreviewUrl(normalizedCurrent);
+        }
+    }, [
+        previewUrl,
+        normalizeUrl,
+        updateUrlInput,
+        setPreviewUrl,
+        getFrameHref,
+        isIgnorableUrl,
+    ]);
+    /**
+     * Install navigation listeners in the iframe (same-origin only) so SPA-style
+     * navigations update our UI without a full reload.
+     */
+    const attachIframeNavigationSync = () => {
+        const win = getFrameWindow();
+        if (!win)
+            return;
+        // Same-origin guard: any property access on cross-origin windows throws.
+        // If we can't read location.href, bail out and avoid installing listeners.
+        try {
+            void win.location.href;
+        }
+        catch (_a) {
+            return;
+        }
+        const notify = () => {
+            // Delay slightly to allow location to settle
+            setTimeout(() => syncFromIframe(), 0);
+        };
+        if (win.__saNavSyncInstalled)
+            return;
+        win.addEventListener("hashchange", notify);
+        win.addEventListener("popstate", notify);
+        try {
+            const wrapHistoryMethod = (method) => {
+                const original = win.history[method];
+                if (typeof original !== "function")
+                    return;
+                win.history[method] = ((...args) => {
+                    const result = original.apply(win.history, args);
+                    win.dispatchEvent(new Event("sa-locationchange"));
+                    return result;
+                });
+            };
+            wrapHistoryMethod("pushState");
+            wrapHistoryMethod("replaceState");
+            win.addEventListener("sa-locationchange", notify);
+        }
+        catch (_b) {
+            // If we cannot patch history, rely on popstate/hashchange only
+        }
+        win.__saNavSyncInstalled = true;
+    };
+    // Trigger iframe reload when external signal changes
+    useEffect(() => {
+        if (typeof reloadSignal === "number") {
+            reloadIframe();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [reloadSignal]);
+    // Listen for navigation messages from the iframe
+    useEffect(() => {
+        const handleMessage = (event) => {
+            var _a, _b;
+            // Only accept messages from the same origin or trusted origins
+            if (event.origin !== window.location.origin &&
+                !event.origin.endsWith("sampleapp.love")) {
+                return;
+            }
+            // Handle navigation updates from the iframe
+            if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.type) === "NAVIGATION_UPDATE" && ((_b = event.data) === null || _b === void 0 ? void 0 : _b.url)) {
+                const newUrl = event.data.url;
+                const normalized = normalizeUrl(newUrl);
+                // Update the URL display
+                updateUrlInput(newUrl);
+                // Update history without triggering iframe src change
+                const current = historyRef.current[historyIndexRef.current];
+                if (normalizeUrl(current) !== normalized) {
+                    suppressHistoryPushRef.current = true;
+                    pushHistoryEntry(normalized);
+                }
+                // Update previewUrl so syncFromIframe() can use the correct value
+                // Use a flag to prevent the useEffect from updating iframe src (which would cause reload)
+                if (normalizeUrl(previewUrl) !== normalized) {
+                    suppressIframeSrcUpdateRef.current = true;
+                    setPreviewUrl(normalized);
+                }
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => {
+            window.removeEventListener("message", handleMessage);
+        };
+    }, [
+        normalizeUrl,
+        updateUrlInput,
+        pushHistoryEntry,
+        previewUrl,
+        setPreviewUrl,
+    ]);
+    /**
+     * Navigation logic
+     */
+    const handleNavigate = (url) => {
+        try {
+            let processedUrl;
+            const trimmedUrl = url.trim();
+            // If the input is blank, navigate to root path
+            if (trimmedUrl === "" ||
+                trimmedUrl.includes("https://") ||
+                trimmedUrl.includes("http://") ||
+                trimmedUrl.includes("localhost")) {
+                const baseUrl = containerEndpoint || "";
+                try {
+                    const baseUrlObj = new URL(baseUrl);
+                    processedUrl = `${baseUrlObj.origin}/`;
+                }
+                catch (error) {
+                    console.error("Error creating URL with base:", baseUrl, error);
+                    setError(`Invalid base URL: ${baseUrl}`);
+                    setIsLoading(false);
+                    return;
+                }
+            }
+            // If it starts with /api/browser, use as is
+            else if (trimmedUrl.startsWith("/api/browser")) {
+                processedUrl = trimmedUrl;
+            }
+            // If it's a relative path (starts with /)
+            else if (trimmedUrl.startsWith("/")) {
+                const baseUrl = containerEndpoint || "";
+                try {
+                    const baseUrlObj = new URL(baseUrl);
+                    processedUrl = `${baseUrlObj.origin}${trimmedUrl}`;
+                }
+                catch (error) {
+                    console.error("Error creating URL with base:", baseUrl, error);
+                    setError(`Invalid base URL: ${baseUrl}`);
+                    setIsLoading(false);
+                    return;
+                }
+            }
+            // Otherwise, treat as external URL
+            else {
+                const baseUrl = containerEndpoint || "";
+                try {
+                    const baseUrlObj = new URL(baseUrl);
+                    processedUrl = `${baseUrlObj.origin}/`;
+                }
+                catch (error) {
+                    console.error("Error creating URL with base:", baseUrl, error);
+                    setError(`Invalid base URL: ${baseUrl}`);
+                    setIsLoading(false);
+                    return;
+                }
+            }
+            setIsLoading(true);
+            setError(null);
+            const newHistory = historyRef.current.slice(0, historyIndex + 1);
+            newHistory.push(processedUrl);
+            historyRef.current = newHistory;
+            setHistoryIndex(newHistory.length - 1);
+            // Check if we're navigating to the same URL (ignoring cache-busting)
+            const compareAgainst = iframeSrc || previewUrl;
+            const isSameUrl = normalizeUrl(processedUrl) === normalizeUrl(compareAgainst);
+            // Update the URL input display right away
+            setUrlInput(getDisplayUrl(processedUrl));
+            // Force a refresh if navigating to the same URL
+            if (isSameUrl) {
+                setIsLoading(true);
+                setError(null);
+                reloadIframe();
+            }
+            else {
+                // Normal navigation for different URLs
+                setPreviewUrl(processedUrl);
+            }
+            // Set a timeout to reset loading state if it takes too long
+            setTimeout(() => {
+                if (isLoading) {
+                    setIsLoading(false);
+                }
+            }, 10000);
+        }
+        catch (error) {
+            console.error("Navigation error:", error);
+            setError(`Invalid URL: ${error.message || "Unknown error"}`);
+            setIsLoading(false);
+        }
+    };
+    const handleBack = () => {
+        var _a, _b;
+        setIsLoading(true);
+        // Try to use iframe's own history for same-origin navigations
+        try {
+            (_b = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.history.back();
+            // onLoad will sync state when navigation completes
+            return;
+        }
+        catch (_c) {
+            // Fallback to our own tracked history
+        }
+        if (historyIndex > 0) {
+            const newIndex = historyIndex - 1;
+            setHistoryIndex(newIndex);
+            const previousUrl = historyRef.current[newIndex];
+            setPreviewUrl(previousUrl);
+            setUrlInput(getDisplayUrl(previousUrl));
+        }
+        else {
+            setIsLoading(false);
+        }
+    };
+    const handleForward = () => {
+        var _a, _b;
+        setIsLoading(true);
+        // Try to use iframe's own history for same-origin navigations
+        try {
+            (_b = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.history.forward();
+            // onLoad will sync state when navigation completes
+            return;
+        }
+        catch (_c) {
+            // Fallback to our own tracked history
+        }
+        if (historyIndex < historyRef.current.length - 1) {
+            const newIndex = historyIndex + 1;
+            setHistoryIndex(newIndex);
+            const nextUrl = historyRef.current[newIndex];
+            setPreviewUrl(nextUrl);
+            setUrlInput(getDisplayUrl(nextUrl));
+        }
+        else {
+            setIsLoading(false);
+        }
+    };
+    const handleRefresh = () => {
+        if (previewUrl) {
+            setIsLoading(true);
+            setError(null);
+            reloadIframe();
+        }
+    };
+    const handleUrlChange = (e) => {
+        if (e.key === "Enter") {
+            handleNavigate(urlInput);
+        }
+    };
+    // Render the iframe directly with built-in event handlers
+    const renderIframe = () => {
+        if (!previewUrl && !iframeSrc)
+            return null;
+        return (React.createElement("iframe", { ref: iframeRef, src: iframeSrc || previewUrl, className: cn("h-full w-full border-none", outerContainerClassName), sandbox: "allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-modals allow-downloads allow-top-navigation", allow: "fullscreen; payment; geolocation; microphone; camera", onLoad: () => {
+                setIsLoading(false);
+                setError(null);
+                attachIframeNavigationSync();
+                syncFromIframe();
+            }, onError: () => {
+                console.error("Iframe failed to load");
+                setIsLoading(false);
+                setError("Failed to load page");
+            } }));
+    };
+    return (React.createElement("div", { className: "flex h-full w-full flex-col" },
+        !useVm && !isGuardian && (React.createElement("div", { className: "bg-white dark:bg-black border-b border-zinc-200 dark:border-zinc-800 flex-shrink-0" },
+            React.createElement("div", { className: "flex items-center gap-1.5 px-2 py-1.5 h-[2.38rem]" },
+                React.createElement("div", { className: "flex gap-0.5" },
+                    React.createElement("button", { onClick: handleBack, disabled: historyIndex === 0, className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded disabled:opacity-30 disabled:hover:bg-transparent transition-colors", title: "Back" },
+                        React.createElement(ChevronLeft, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })),
+                    React.createElement("button", { onClick: handleForward, disabled: historyIndex === historyLength - 1, className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded disabled:opacity-30 disabled:hover:bg-transparent transition-colors", title: "Forward" },
+                        React.createElement(ChevronRight, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })),
+                    React.createElement("button", { onClick: handleRefresh, className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: "Refresh" },
+                        React.createElement(RefreshCw, { size: 14, className: `text-zinc-600 dark:text-zinc-400 ${isLoading ? "animate-spin" : ""}` }))),
+                React.createElement("div", { className: "flex-1 flex items-center gap-1.5 px-2 py-1 bg-zinc-50 dark:bg-zinc-950 rounded text-zinc-600 dark:text-zinc-400 focus-within:bg-white dark:focus-within:bg-zinc-900 transition-colors" },
+                    error ? (React.createElement(AlertTriangle, { size: 12, className: "text-red-500 flex-shrink-0" })) : (React.createElement(Lock, { size: 12, className: "text-zinc-400 dark:text-zinc-600 flex-shrink-0" })),
+                    React.createElement("input", { type: "text", 
+                        // value={urlInput}
+                        value: "/", onChange: (e) => setUrlInput(e.target.value), onKeyDown: handleUrlChange, className: "flex-1 text-xs border-none outline-none bg-transparent text-zinc-700 dark:text-zinc-300 placeholder:text-zinc-400 dark:placeholder:text-zinc-600", placeholder: "Enter URL" }),
+                    isGuardian && (React.createElement("button", { onClick: () => setIsBrowserMaximized(!isBrowserMaximized), className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: isBrowserMaximized
+                            ? "Exit fullscreen"
+                            : "Fullscreen preview" }, isBrowserMaximized ? (React.createElement(Minimize2, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })) : (React.createElement(Maximize2, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })))),
+                    React.createElement("button", { onClick: () => {
+                            window.open(previewUrl, "_blank", "noopener,noreferrer");
+                        }, className: "ml-1 p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: "Open in new tab", disabled: !urlInput || !!error, tabIndex: -1, type: "button" },
+                        React.createElement(ExternalLink, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })),
+                    React.createElement(DropdownMenu, null,
+                        React.createElement(DropdownMenuTrigger, { asChild: true },
+                            React.createElement("button", { className: "ml-1 p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: "More options", type: "button" },
+                                React.createElement(MoreVertical, { size: 14, className: "text-zinc-600 dark:text-zinc-400" }))),
+                        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" },
+            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)));
+}