@sampleapp.ai/sdk 1.0.36 → 1.0.38

package/dist/components/guardian/guardian-upload-spec.js

@@ -1,160 +0,0 @@
-"use client";
-import React from "react";
-"use client";
-import { useState, useCallback } from "react";
-import { Upload, FileText, X, Check, AlertCircle } from "lucide-react";
-import { cn } from "../../lib/utils";
-export default function GuardianUploadSpec({ onBack, onContinue, isLoading = false, }) {
-    const [uploadedFile, setUploadedFile] = useState(null);
-    const [isDragging, setIsDragging] = useState(false);
-    const [error, setError] = useState(null);
-    const [isValidating, setIsValidating] = useState(false);
-    const validateFile = (file) => {
-        // Check file size (max 10MB)
-        if (file.size > 10 * 1024 * 1024) {
-            return "File size must be less than 10MB";
-        }
-        // Check file type
-        const validTypes = [
-            "application/json",
-            "application/x-yaml",
-            "application/yaml",
-            "text/yaml",
-            "text/x-yaml",
-            "text/plain",
-        ];
-        const validExtensions = [".json", ".yaml", ".yml"];
-        const hasValidType = validTypes.includes(file.type);
-        const hasValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
-        if (!hasValidType && !hasValidExtension) {
-            return "Please upload a JSON or YAML file";
-        }
-        return null;
-    };
-    const handleFile = useCallback((file) => {
-        setError(null);
-        setIsValidating(true);
-        const validationError = validateFile(file);
-        if (validationError) {
-            setError(validationError);
-            setIsValidating(false);
-            return;
-        }
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            var _a;
-            const content = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
-            // Basic validation that it's valid JSON or YAML
-            try {
-                if (file.name.toLowerCase().endsWith(".json")) {
-                    JSON.parse(content);
-                }
-            }
-            catch (_b) {
-                setError("Invalid JSON file");
-                setIsValidating(false);
-                return;
-            }
-            setUploadedFile({
-                name: file.name,
-                size: file.size,
-                type: file.type,
-                content,
-            });
-            setIsValidating(false);
-        };
-        reader.onerror = () => {
-            setError("Failed to read file");
-            setIsValidating(false);
-        };
-        reader.readAsText(file);
-    }, []);
-    const handleDrop = useCallback((e) => {
-        e.preventDefault();
-        setIsDragging(false);
-        const files = Array.from(e.dataTransfer.files);
-        if (files.length > 0) {
-            handleFile(files[0]);
-        }
-    }, [handleFile]);
-    const handleDragOver = useCallback((e) => {
-        e.preventDefault();
-        setIsDragging(true);
-    }, []);
-    const handleDragLeave = useCallback((e) => {
-        e.preventDefault();
-        setIsDragging(false);
-    }, []);
-    const handleFileInput = useCallback((e) => {
-        const files = e.target.files;
-        if (files && files.length > 0) {
-            handleFile(files[0]);
-        }
-    }, [handleFile]);
-    const handleRemoveFile = () => {
-        setUploadedFile(null);
-        setError(null);
-    };
-    const formatFileSize = (bytes) => {
-        if (bytes < 1024)
-            return bytes + " B";
-        if (bytes < 1024 * 1024)
-            return (bytes / 1024).toFixed(1) + " KB";
-        return (bytes / (1024 * 1024)).toFixed(1) + " MB";
-    };
-    return (React.createElement("div", { className: "min-h-screen bg-white flex flex-col items-center justify-center p-8" },
-        React.createElement("div", { className: "w-full max-w-xl" },
-            React.createElement("div", { className: "mb-8" },
-                React.createElement("button", { type: "button", onClick: onBack, disabled: isLoading, className: "text-sm text-gray-500 hover:text-gray-700 font-medium mb-4 flex items-center gap-1 disabled:opacity-50 disabled:cursor-not-allowed" }, isLoading ? (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: "h-3 w-3 animate-spin rounded-full border-2 border-gray-300 border-t-gray-700" }),
-                    React.createElement("span", null, "Back"))) : (React.createElement(React.Fragment, null, "\u2190 Back"))),
-                React.createElement("h1", { className: "text-3xl font-semibold text-black mb-3" }, "Upload OpenAPI spec"),
-                React.createElement("p", { className: "text-sm text-gray-600" }, "Upload your OpenAPI specification file (JSON or YAML format) to generate sample apps.")),
-            !uploadedFile ? (React.createElement("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, className: cn("relative rounded-xl border-2 border-dashed transition-all", isDragging
-                    ? "border-blue-500 bg-blue-50"
-                    : "border-gray-200 bg-gray-50", error && "border-red-300 bg-red-50") },
-                React.createElement("label", { className: "flex flex-col items-center justify-center px-8 py-12 cursor-pointer" },
-                    React.createElement("input", { type: "file", className: "hidden", accept: ".json,.yaml,.yml", onChange: handleFileInput, disabled: isValidating }),
-                    isValidating ? (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "h-12 w-12 mb-4 animate-spin rounded-full border-4 border-gray-200 border-t-blue-600" }),
-                        React.createElement("p", { className: "text-sm font-medium text-gray-900 mb-1" }, "Validating file..."))) : (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: cn("flex h-14 w-14 items-center justify-center rounded-full mb-4 transition-colors", isDragging ? "bg-blue-100" : "bg-white", error && "bg-red-100") }, error ? (React.createElement(AlertCircle, { className: "h-7 w-7 text-red-600" })) : (React.createElement(Upload, { className: cn("h-7 w-7", isDragging ? "text-blue-600" : "text-gray-400") }))),
-                        React.createElement("p", { className: "text-sm font-medium text-gray-900 mb-1" }, isDragging ? ("Drop your file here") : (React.createElement(React.Fragment, null,
-                            React.createElement("span", { className: "text-blue-600" }, "Click to upload"),
-                            " ",
-                            "or drag and drop"))),
-                        React.createElement("p", { className: "text-xs text-gray-500 mb-2" }, "JSON or YAML (max 10MB)"))),
-                    error && (React.createElement("div", { className: "mt-3 text-xs text-red-600 font-medium flex items-center gap-1.5" },
-                        React.createElement(AlertCircle, { className: "h-3.5 w-3.5" }),
-                        error))))) : (React.createElement("div", { className: "space-y-4" },
-                React.createElement("div", { className: "rounded-xl border border-gray-200 bg-white p-4 transition hover:bg-gray-50" },
-                    React.createElement("div", { className: "flex items-start justify-between gap-3" },
-                        React.createElement("div", { className: "flex items-start gap-3 flex-1" },
-                            React.createElement("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-green-50" },
-                                React.createElement(FileText, { className: "h-5 w-5 text-green-600" })),
-                            React.createElement("div", { className: "flex-1 min-w-0" },
-                                React.createElement("div", { className: "flex items-center gap-2 mb-1" },
-                                    React.createElement("p", { className: "text-sm font-medium text-gray-900 truncate" }, uploadedFile.name),
-                                    React.createElement("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-green-500 flex-shrink-0" },
-                                        React.createElement(Check, { className: "h-3 w-3 text-white" }))),
-                                React.createElement("p", { className: "text-xs text-gray-500" }, formatFileSize(uploadedFile.size)))),
-                        React.createElement("button", { type: "button", onClick: handleRemoveFile, className: "flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100 transition-colors text-gray-400 hover:text-gray-600" },
-                            React.createElement(X, { className: "h-4 w-4" })))),
-                React.createElement("div", { className: "rounded-xl bg-blue-50 border border-blue-100 p-4" },
-                    React.createElement("p", { className: "text-xs text-blue-900 font-medium mb-2" }, "What happens next?"),
-                    React.createElement("ul", { className: "space-y-1.5 text-xs text-blue-800" },
-                        React.createElement("li", { className: "flex items-start gap-2" },
-                            React.createElement("span", null, "\u2022"),
-                            React.createElement("span", null, "We'll parse your OpenAPI spec and extract all endpoints")),
-                        React.createElement("li", { className: "flex items-start gap-2" },
-                            React.createElement("span", null, "\u2022"),
-                            React.createElement("span", null, "You'll choose frameworks for which to generate sample apps")),
-                        React.createElement("li", { className: "flex items-start gap-2" },
-                            React.createElement("span", null, "\u2022"),
-                            React.createElement("span", null, "Each app will be pre-configured with auth and example calls")))),
-                React.createElement("div", { className: "flex items-center justify-end gap-3 pt-2" },
-                    React.createElement("button", { type: "button", onClick: handleRemoveFile, disabled: isLoading, className: "rounded-full border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" }, "Choose different file"),
-                    React.createElement("button", { type: "button", onClick: () => onContinue(uploadedFile), disabled: isLoading, className: "inline-flex items-center gap-2 rounded-full bg-[#2563EB] px-6 py-2.5 text-sm font-medium text-white hover:bg-[#1d4ed8] transition-colors disabled:opacity-50 disabled:cursor-not-allowed" }, isLoading ? (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" }),
-                        React.createElement("span", null, "Processing..."))) : (React.createElement("span", null, "Continue")))))))));
-}

package/dist/components/guardian/header/glassmorphic-combobox.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-type Option = {
-    label: string;
-    value: string;
-    href: string;
-};
-interface GlassmorphicComboboxProps {
-    options: Option[];
-    value: string;
-    placeholder?: string;
-    className?: string;
-    searchPlaceholder?: string;
-}
-export default function GlassmorphicCombobox({ options, value, placeholder, className, searchPlaceholder, }: GlassmorphicComboboxProps): React.JSX.Element;
-export {};

package/dist/components/guardian/header/glassmorphic-combobox.js

@@ -1,30 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { Button } from "../ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "../ui/command";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
-import { cn } from "../../../lib/utils";
-export default function GlassmorphicCombobox({ options, value, placeholder, className, searchPlaceholder, }) {
-    var _a;
-    const [open, setOpen] = useState(false);
-    const selectedLabel = (_a = options.find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label;
-    return (React.createElement(Popover, { open: open, onOpenChange: setOpen },
-        React.createElement(PopoverTrigger, { asChild: true },
-            React.createElement(Button, { variant: "outline", role: "combobox", "aria-expanded": open, className: cn("w-64 justify-between rounded-xl border-white/20 bg-white/10 backdrop-blur-md", "text-white/90 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.25)] hover:bg-white/15", "data-[state=open]:bg-white/15", className) },
-                React.createElement("span", { className: "truncate min-w-0" }, selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : placeholder),
-                React.createElement(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-70" }))),
-        React.createElement(PopoverContent, { className: cn("w-64 p-0 rounded-xl border border-white/20 bg-black/40 backdrop-blur-xl", "shadow-xl") },
-            React.createElement(Command, { className: "bg-transparent" },
-                React.createElement(CommandInput, { placeholder: searchPlaceholder, className: "bg-transparent placeholder:text-white/60" }),
-                React.createElement(CommandList, { className: "bg-transparent" },
-                    React.createElement(CommandEmpty, { className: "text-white/80" }, "No results found."),
-                    React.createElement(CommandGroup, { className: "bg-transparent" }, options.map((option) => (React.createElement(CommandItem, { key: option.value, value: option.value, className: "cursor-pointer", onSelect: () => {
-                            setOpen(false);
-                            if (option.href && typeof window !== "undefined") {
-                                window.location.href = option.href;
-                            }
-                        } },
-                        React.createElement(CheckIcon, { className: cn("mr-2 h-4 w-4", value === option.value ? "opacity-100" : "opacity-0") }),
-                        option.label)))))))));
-}

package/dist/components/guardian/header.js

@@ -1,61 +0,0 @@
-"use client";
-import React from "react";
-import { Badge } from "./ui/badge";
-import GlassmorphicCombobox from "./header/glassmorphic-combobox";
-export default function Header({ demoOptions, frameworkOptions, firstFrameworkByUseCase, currentFramework, playgroundLogo, currentUseCase, }) {
-    var _a, _b;
-    // Derive values directly from props (which come from the URL)
-    // No internal state - the URL is the source of truth
-    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);
-    // Build options with hrefs
-    const demoOptionsWithHrefs = demoOptions.map((opt) => {
-        var _a;
-        return (Object.assign(Object.assign({}, opt), { 
-            // Link to first available framework for this use case
-            href: `/${opt.value}?framework=${(firstFrameworkByUseCase === null || firstFrameworkByUseCase === void 0 ? void 0 : firstFrameworkByUseCase[opt.value]) || ((_a = frameworkOptions[0]) === null || _a === void 0 ? void 0 : _a.value)}` }));
-    });
-    const frameworkOptionsWithHrefs = frameworkOptions.map((opt) => (Object.assign(Object.assign({}, opt), { href: `/${selectedUseCase}?framework=${opt.value}` })));
-    // Derive environment metadata for badge styling and label
-    const environment = (process.env.NEXT_PUBLIC_ENVIRONMENT ||
-        process.env.NODE_ENV ||
-        "development").toLowerCase();
-    const envMeta = {
-        production: {
-            label: "Production",
-            badgeClass: "border-emerald-500/30 bg-emerald-500/10 text-emerald-200",
-            dotClass: "bg-emerald-400 shadow-[0_0_0_3px_rgba(16,185,129,0.25)]",
-        },
-        staging: {
-            label: "Staging",
-            badgeClass: "border-amber-500/30 bg-amber-500/10 text-amber-100",
-            dotClass: "bg-amber-400 shadow-[0_0_0_3px_rgba(245,158,11,0.25)]",
-        },
-        test: {
-            label: "Test",
-            badgeClass: "border-cyan-500/30 bg-cyan-500/10 text-cyan-100",
-            dotClass: "bg-cyan-400 shadow-[0_0_0_3px_rgba(34,211,238,0.25)]",
-        },
-        preview: {
-            label: "Preview",
-            badgeClass: "border-sky-500/30 bg-sky-500/10 text-sky-100",
-            dotClass: "bg-sky-400 shadow-[0_0_0_3px_rgba(56,189,248,0.25)]",
-        },
-        development: {
-            label: "Demo Environment",
-            badgeClass: "border-violet-500/30 bg-violet-500/10 text-violet-100",
-            dotClass: "bg-violet-400 shadow-[0_0_0_3px_rgba(139,92,246,0.25)]",
-        },
-    };
-    const meta = envMeta[environment] || envMeta.development;
-    return (React.createElement("div", { className: "grid grid-cols-[1fr_auto_1fr] items-center w-full ml-6" },
-        React.createElement("div", { className: "justify-self-start" }, playgroundLogo),
-        React.createElement("div", { className: "justify-self-center" },
-            React.createElement("div", { className: "flex gap-2" },
-                React.createElement(GlassmorphicCombobox, { options: demoOptionsWithHrefs, value: selectedUseCase, placeholder: "Select use case...", searchPlaceholder: "Search use case..." }),
-                React.createElement(GlassmorphicCombobox, { options: frameworkOptionsWithHrefs, value: selectedFramework, placeholder: "Select framework...", searchPlaceholder: "Search framework...", className: "w-32" }))),
-        React.createElement("div", { className: "justify-self-end mr-6" },
-            React.createElement(Badge, { className: `rounded-full px-5 py-3 flex items-center gap-2 border ${meta.badgeClass} backdrop-blur-sm shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] text-sm`, "aria-label": `${meta.label} environment` },
-                React.createElement("span", { className: `inline-block h-2 w-2 rounded-full ${meta.dotClass}` }),
-                meta.label))));
-}

package/dist/components/guardian/hooks/use-frame-messages.js

@@ -1,65 +0,0 @@
-"use client";
-import { useEffect, useRef } from "react";
-/**
- * Hook to handle postMessage communication with parent window when in iframe mode.
- * - Sends IFRAME_READY when mounted
- * - Listens for UPDATE_VIEW messages and updates URL params accordingly
- * - Works with useFrameParams() which reads the updated URL params
- *
- * Supported UPDATE_VIEW message fields:
- * - framework: Switch between frameworks (e.g., "nextjs", "react")
- * - activeFilePath: Change the active file in the editor
- * - linesStart/linesEnd: Highlight specific line range in the editor
- * - theme: Override the theme color (hex color)
- */
-export function useFrameMessages() {
-    const hasSignaledReady = useRef(false);
-    useEffect(() => {
-        if (typeof window === "undefined")
-            return;
-        // Check if we're in an iframe
-        const isFrame = window.self !== window.top;
-        if (!isFrame)
-            return;
-        // Signal to parent that we're ready to receive messages
-        if (!hasSignaledReady.current && window.parent) {
-            window.parent.postMessage({ type: "IFRAME_READY" }, "*");
-            hasSignaledReady.current = true;
-        }
-        const handleMessage = (event) => {
-            // Optional: Add origin validation for security in production
-            // if (event.origin !== 'https://your-allowed-origin.com') return;
-            const data = event.data;
-            if (data.type === "UPDATE_VIEW") {
-                const url = new URL(window.location.href);
-                // Update URL params based on message
-                if (data.framework !== undefined) {
-                    url.searchParams.set("framework", data.framework);
-                }
-                if (data.activeFilePath !== undefined) {
-                    url.searchParams.set("activeFilePath", data.activeFilePath);
-                }
-                if (data.linesStart !== undefined) {
-                    url.searchParams.set("linesStart", String(data.linesStart));
-                }
-                if (data.linesEnd !== undefined) {
-                    url.searchParams.set("linesEnd", String(data.linesEnd));
-                }
-                if (data.theme !== undefined) {
-                    url.searchParams.set("theme", data.theme);
-                }
-                if (data.iframeUrl !== undefined) {
-                    url.searchParams.set("iframeUrl", data.iframeUrl);
-                }
-                // Update URL without page reload
-                window.history.replaceState({}, "", url.toString());
-                // Dispatch a custom event so React components can react immediately
-                // (useFrameParams may have a slight delay)
-                window.dispatchEvent(new CustomEvent("frameParamsUpdated", { detail: data }));
-            }
-        };
-        window.addEventListener("message", handleMessage);
-        return () => window.removeEventListener("message", handleMessage);
-    }, []);
-    return {};
-}

package/dist/components/guardian/hooks/use-frame-params.js

@@ -1,44 +0,0 @@
-import { useMemo } from "react";
-/**
- * Hook to read frame-mode search parameters from URL.
- * These params override config/context when isFrame=true.
- *
- * Note: This is a simplified version that reads from window.location.search.
- * For Next.js apps, you can use the Next.js version that uses useSearchParams.
- */
-export function useFrameParams() {
-    return useMemo(() => {
-        if (typeof window === "undefined") {
-            return {
-                isFrame: false,
-                framework: undefined,
-                theme: undefined,
-                activeFilePath: undefined,
-                linesStart: undefined,
-                linesEnd: undefined,
-                iframeUrl: undefined,
-            };
-        }
-        const searchParams = new URLSearchParams(window.location.search);
-        const isFrame = searchParams.get("isFrame") === "true";
-        const framework = searchParams.get("framework") || undefined;
-        const theme = searchParams.get("theme") || undefined;
-        const activeFilePath = searchParams.get("activeFilePath") || undefined;
-        const linesStart = searchParams.get("linesStart")
-            ? parseInt(searchParams.get("linesStart"), 10)
-            : undefined;
-        const linesEnd = searchParams.get("linesEnd")
-            ? parseInt(searchParams.get("linesEnd"), 10)
-            : undefined;
-        const iframeUrl = searchParams.get("iframeUrl") || undefined;
-        return {
-            isFrame,
-            framework,
-            theme,
-            activeFilePath,
-            linesStart,
-            linesEnd,
-            iframeUrl,
-        };
-    }, [typeof window !== "undefined" ? window.location.search : ""]);
-}

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

@@ -1,101 +0,0 @@
-"use client";
-import { useCallback } from "react";
-import { useVmContext } from "../context/vm-context";
-/**
- * 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() {
-    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 {
-            // Use browserUrl directly (non-VM mode)
-            setVmUrl(cacheKey, browserUrl);
-            return browserUrl;
-        }
-    }, [getVmUrl, setVmUrl, hasError, setVmError]);
-    /**
-     * 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,
-    };
-}