clean placeholder

components/SandboxPreview.tsx

@@ -1,33 +1,24 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { Loader2, ExternalLink, RefreshCw, Terminal } from 'lucide-react';
 
 interface SandboxPreviewProps {
-  sandboxId: string;
-  port: number;
   type: 'vite' | 'nextjs' | 'console';
   output?: string;
   isLoading?: boolean;
+  sandboxUrl?: string; // Real URL from Vercel Sandbox API
 }
 
 export default function SandboxPreview({ 
-  sandboxId, 
-  port, 
   type, 
   output,
-  isLoading = false 
+  isLoading = false,
+  sandboxUrl
 }: SandboxPreviewProps) {
-  const [previewUrl, setPreviewUrl] = useState<string>('');
   const [showConsole, setShowConsole] = useState(false);
   const [iframeKey, setIframeKey] = useState(0);
 
-  useEffect(() => {
-    if (sandboxId && type !== 'console') {
-      // For Vercel Sandbox, we'll receive the full URL from the API
-      // The URL format is determined by Vercel Sandbox's domain() method
-      // This is just a fallback format - actual URL comes from sandbox.domain(port)
-      setPreviewUrl(`https://${sandboxId}.vercel-sandbox.dev`);
-    }
-  }, [sandboxId, port, type]);
+  // Use the real sandbox URL passed from the API
+  const previewUrl = sandboxUrl || '';
 
   const handleRefresh = () => {
     setIframeKey(prev => prev + 1);
@@ -51,9 +42,13 @@ export default function SandboxPreview({
           <span className="text-sm text-gray-400">
             {type === 'vite' ? '⚡ Vite' : '▲ Next.js'} Preview
           </span>
-          <code className="text-xs bg-gray-900 px-2 py-1 rounded text-blue-400">
-            {previewUrl}
-          </code>
+          {previewUrl ? (
+            <code className="text-xs bg-gray-900 px-2 py-1 rounded text-blue-400">
+              {previewUrl}
+            </code>
+          ) : (
+            <span className="text-xs text-gray-500">Waiting for sandbox URL...</span>
+          )}
         </div>
         <div className="flex items-center gap-2">
           <button
@@ -70,38 +65,47 @@ export default function SandboxPreview({
           >
             <RefreshCw className="w-4 h-4" />
           </button>
-          <a
-            href={previewUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="p-2 hover:bg-gray-700 rounded transition-colors"
-            title="Open in new tab"
-          >
-            <ExternalLink className="w-4 h-4" />
-          </a>
+          {previewUrl && (
+            <a
+              href={previewUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-2 hover:bg-gray-700 rounded transition-colors"
+              title="Open in new tab"
+            >
+              <ExternalLink className="w-4 h-4" />
+            </a>
+          )}
         </div>
       </div>
 
       {/* Main Preview */}
       <div className="relative bg-gray-900 rounded-lg overflow-hidden border border-gray-700">
-        {isLoading && (
+        {(isLoading || !previewUrl) && (
           <div className="absolute inset-0 bg-gray-900/80 flex items-center justify-center z-10">
             <div className="text-center">
               <Loader2 className="w-8 h-8 animate-spin mx-auto mb-2" />
               <p className="text-sm text-gray-400">
-                {type === 'vite' ? 'Starting Vite dev server...' : 'Starting Next.js dev server...'}
+                {!previewUrl 
+                  ? 'Setting up sandbox environment...' 
+                  : type === 'vite' 
+                    ? 'Starting Vite dev server...' 
+                    : 'Starting Next.js dev server...'
+                }
               </p>
             </div>
           </div>
         )}
         
-        <iframe
-          key={iframeKey}
-          src={previewUrl}
-          className="w-full h-[600px] bg-white"
-          title={`${type} preview`}
-          sandbox="allow-scripts allow-same-origin allow-forms"
-        />
+        {previewUrl && (
+          <iframe
+            key={iframeKey}
+            src={previewUrl}
+            className="w-full h-[600px] bg-white"
+            title={`${type} preview`}
+            sandbox="allow-scripts allow-same-origin allow-forms"
+          />
+        )}
       </div>
 
       {/* Console Output (Toggle) */}