@sampleapp.ai/sdk 1.0.47 → 1.0.49

package/dist/components/sandbox/Sandbox.js

@@ -1,23 +1,26 @@
 "use client";
 import React, { useEffect, useState, useCallback, useRef } from "react";
-import { fetchSandboxConfigWithContent, buildConfigFromContent } from "./api";
+import { fetchSandboxConfigWithContent, buildConfigFromContent, } from "./api";
 import GuardianPlayground from "./guardian/guardian-playground";
 import { GuardianProvider } from "./guardian/context/guardian-context";
 import { VmProvider } from "./guardian/context/vm-context";
 import { Skeleton } from "../ui/skeleton";
 import { useTreeSelector } from "../../hooks/use-tree-selector";
-import { SELECTABLE_NODE_TYPES } from "../../lib/types/tree-config";
-import { useFrameParams } from "./guardian/hooks/use-frame-params";
+import { SELECTABLE_NODE_TYPES, } from "../../lib/types/tree-config";
+import { useFrameParams, } from "./guardian/hooks/use-frame-params";
 /**
  * Inner component that uses the tree selector hook
  * Separated to ensure hooks are called after data is loaded
  */
-function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, config }) {
+function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, config, }) {
     var _a;
     const [currentConfig, setCurrentConfig] = useState(configWithContent.legacyConfig);
     // Get frame params for syncing external selection changes
     const frameParams = useFrameParams();
     const isFrame = (config === null || config === void 0 ? void 0 : config.isFrame) || frameParams.isFrame;
+    const containerClass = isFrame
+        ? "h-full w-full bg-white dark:bg-black"
+        : "h-screen w-full bg-white dark:bg-black";
     // Track previous nodeTypes to detect changes
     const prevNodeTypesRef = useRef({});
     // Handle selection changes - update the config when user selects different options
@@ -37,7 +40,7 @@ function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, confi
         config: configWithContent.techStackConfig,
         allContent: configWithContent.allContent,
         initialPath: configWithContent.initialSelectionPath,
-        onSelectionChange: handleSelectionChange
+        onSelectionChange: handleSelectionChange,
     });
     // Sync frame params with tree selector when in frame mode
     // This effect listens for changes in URL params (via postMessage or direct URL changes)
@@ -73,12 +76,12 @@ function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, confi
     const firstUseCase = currentConfig.useCases[0];
     const firstFramework = (_a = firstUseCase === null || firstUseCase === void 0 ? void 0 : firstUseCase.frameworks[0]) === null || _a === void 0 ? void 0 : _a.key;
     if (!firstUseCase || !firstFramework) {
-        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-white dark:bg-black" },
+        return (React.createElement("div", { className: `flex items-center justify-center ${containerClass}` },
             React.createElement("div", { className: "text-red-500" }, "No use cases or frameworks found")));
     }
     return (React.createElement(GuardianProvider, null,
         React.createElement(VmProvider, null,
-            React.createElement("div", { className: "h-screen w-screen bg-white dark:bg-black" },
+            React.createElement("div", { className: containerClass },
                 React.createElement(GuardianPlayground, { sandboxConfig: currentConfig, sections: sections, onSelect: selectOption, useCase: firstUseCase.id, framework: firstFramework, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: currentConfig.chatUid, theme: theme, hasNetworkView: config === null || config === void 0 ? void 0 : config.hasNetworkView })))));
 }
 /**
@@ -108,10 +111,14 @@ function SandboxInner({ configWithContent, apiKey, env, themeColor, theme, confi
  * />
  * ```
  */
-export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "dark", config }) {
+export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "dark", config, }) {
     // Validate apiKey immediately
+    const isFrame = config === null || config === void 0 ? void 0 : config.isFrame;
+    const containerClass = isFrame
+        ? "h-full w-full bg-white dark:bg-black"
+        : "h-screen w-full bg-white dark:bg-black";
     if (!apiKey || apiKey.trim() === "") {
-        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-white dark:bg-black" },
+        return (React.createElement("div", { className: `flex items-center justify-center ${containerClass}` },
             React.createElement("div", { className: "text-red-500" }, "Error: apiKey is required. Please provide a valid API key.")));
     }
     const [configWithContent, setConfigWithContent] = useState(null);
@@ -148,11 +155,11 @@ export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "d
         };
     }, [apiKey, sandboxId, themeColor]);
     if (loading) {
-        return (React.createElement("div", { className: "h-screen w-screen bg-white dark:bg-black" },
+        return (React.createElement("div", { className: containerClass },
             React.createElement(Skeleton, { className: "w-full h-full bg-zinc-100 dark:bg-zinc-900" })));
     }
     if (error) {
-        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-white dark:bg-black" },
+        return (React.createElement("div", { className: `flex items-center justify-center ${containerClass}` },
             React.createElement("div", { className: "text-red-500" },
                 "Error: ",
                 error)));

package/dist/components/sandbox/guardian/ui/download-and-open-buttons.js

@@ -1,9 +1,10 @@
 "use client";
 import React from "react";
-import { DownloadIcon, Check, Copy } from "lucide-react";
+import { DownloadIcon, Check, Copy, Loader2 } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, } from "./dialog";
 import vscodeLogo from "../../../../assets/vscode.png";
 import { handleSandboxDownload } from "../utils";
+import { createApiClient } from "../../../../lib/api-client";
 // VSCode logo component using imported asset
 function VSCodeLogo({ className }) {
     return (React.createElement("img", { src: vscodeLogo, alt: "VSCode", width: 20, height: 20, className: className }));
@@ -11,16 +12,19 @@ function VSCodeLogo({ className }) {
 export const DownloadAndOpenButtons = ({ downloadUrl, themeColor, gitUrl, browserUrl, sandboxId, apiKey, }) => {
     const [isModalOpen, setIsModalOpen] = React.useState(false);
     const [hasCopied, setHasCopied] = React.useState(false);
+    const [isCloning, setIsCloning] = React.useState(false);
     // Build the npx command using the SDK download endpoint
     // Use default MAIN_APP_URL for SDK (can be overridden via env)
-    const MAIN_APP_URL = typeof window !== "undefined" && window.SAMPLEAPP_MAIN_URL
+    const MAIN_APP_URL = typeof window !== "undefined" &&
+        window.SAMPLEAPP_MAIN_URL
         ? window.SAMPLEAPP_MAIN_URL
         : "https://sampleapp.ai";
     const npxCommand = React.useMemo(() => {
         if (!sandboxId) {
             return "";
         }
-        const apiBaseUrl = typeof window !== "undefined" && window.SAMPLEAPP_API_URL
+        const apiBaseUrl = typeof window !== "undefined" &&
+            window.SAMPLEAPP_API_URL
             ? window.SAMPLEAPP_API_URL
             : MAIN_APP_URL.replace("sampleapp.ai", "api.sampleapp.ai");
         return `npx sampleappai add "${apiBaseUrl}/api/v1/sdk/download-code?sandbox_id=${sandboxId}"`;
@@ -28,10 +32,32 @@ export const DownloadAndOpenButtons = ({ downloadUrl, themeColor, gitUrl, browse
     const handleDownload = async () => {
         await handleSandboxDownload(sandboxId, apiKey, () => setIsModalOpen(true));
     };
-    const handleOpenInVSCode = () => {
-        if (gitUrl) {
+    const handleOpenInVSCode = async () => {
+        // If we have a sandboxId and apiKey, fetch an authenticated clone URL from the backend
+        if (sandboxId && apiKey) {
+            setIsCloning(true);
             try {
-                window.location.href = `vscode://vscode.git/clone?url=${gitUrl}`;
+                const client = createApiClient({ apiKey });
+                const { clone_url } = await client.sdk.getCloneUrl(sandboxId);
+                window.location.href = `vscode://vscode.git/clone?url=${encodeURIComponent(clone_url)}`;
+            }
+            catch (err) {
+                console.error("Failed to get clone URL:", err);
+                // Fall back to direct gitUrl or modal
+                if (gitUrl) {
+                    window.location.href = `vscode://vscode.git/clone?url=${encodeURIComponent(gitUrl)}`;
+                }
+                else {
+                    setIsModalOpen(true);
+                }
+            }
+            finally {
+                setIsCloning(false);
+            }
+        }
+        else if (gitUrl) {
+            try {
+                window.location.href = `vscode://vscode.git/clone?url=${encodeURIComponent(gitUrl)}`;
             }
             catch (_a) {
                 // Silently fail if vscode:// protocol isn't registered
@@ -59,9 +85,9 @@ export const DownloadAndOpenButtons = ({ downloadUrl, themeColor, gitUrl, browse
             React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md !text-white transition-all hover:opacity-90 active:scale-[0.98]", style: { backgroundColor: themeColor }, onClick: handleDownload },
                 React.createElement(DownloadIcon, { className: "w-3.5 h-3.5 !text-white" }),
                 "Download example"),
-            React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border transition-all hover:opacity-90 active:scale-[0.98] bg-zinc-100 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white", onClick: handleOpenInVSCode },
-                React.createElement(VSCodeLogo, { className: "w-3.5 h-3.5" }),
-                "Integrate in VS Code")),
+            React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border transition-all hover:opacity-90 active:scale-[0.98] bg-zinc-100 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white disabled:opacity-50", onClick: handleOpenInVSCode, disabled: isCloning },
+                isCloning ? (React.createElement(Loader2, { className: "w-3.5 h-3.5 animate-spin" })) : (React.createElement(VSCodeLogo, { className: "w-3.5 h-3.5" })),
+                isCloning ? "Opening..." : "Integrate in VS Code")),
         React.createElement(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen },
             React.createElement(DialogContent, { className: "max-w-[90vw] sm:max-w-md w-full" },
                 React.createElement(DialogHeader, null,

package/dist/index.d.ts

@@ -120,6 +120,15 @@ declare class ApiClient {
          * @returns Promise that resolves when download is initiated
          */
         downloadCode: (sandboxId: string) => Promise<void>;
+        /**
+         * Get an authenticated clone URL for a private GitHub repository.
+         * Returns an HTTPS URL with a short-lived token (expires in 1 hour)
+         * that can be used with vscode://vscode.git/clone or git clone directly.
+         *
+         * @param sandboxId - The sandbox content UID
+         * @returns Clone URL response with authenticated URL
+         */
+        getCloneUrl: (sandboxId: string) => Promise<CloneUrlResponse>;
         /**
          * Start VM endpoint that starts a desktop sandbox, launches Chrome,
          * navigates to the target URL, and returns a VNC viewer URL
@@ -216,6 +225,10 @@ declare interface ChatButtonProps {
     onClick?: () => void;
 }
 
+declare interface CloneUrlResponse {
+    clone_url: string;
+}
+
 declare enum CodeLanguage {
     JAVASCRIPT = "javascript",
     TYPESCRIPT = "typescript",
@@ -670,7 +683,7 @@ declare class SampleAppSDK {
  * />
  * ```
  */
-export declare function Sandbox({ apiKey, sandboxId, env, themeColor, theme, config }: SandboxProps): default_2.JSX.Element | null;
+export declare function Sandbox({ apiKey, sandboxId, env, themeColor, theme, config, }: SandboxProps): default_2.JSX.Element | null;
 
 /**
  * Configuration fetched from the API for a sandbox