trying to fix firefox

Author: jherr

src/cta/components/cta-ui.tsx

@@ -26,9 +26,19 @@ export default function BuilderRoot() {
     })
   }, [dryRun.files])
 
+  // Detect Firefox - disable ALS shim for Firefox as it may cause issues
+  const isFirefox =
+    typeof navigator !== 'undefined' && navigator.userAgent.includes('Firefox')
+  console.log(
+    `🌐 Browser detected - Firefox: ${isFirefox}, ALS Shim: ${!isFirefox}`
+  )
+
   return (
     <CTAProvider>
-      <WebContainerProvider projectFiles={projectFiles} shouldShimALS={true}>
+      <WebContainerProvider
+        projectFiles={projectFiles}
+        shouldShimALS={!isFirefox}
+      >
         <main className="w-full max-w-full overflow-x-hidden">
           <CTABackgroundAnimation />
           <div className="h-dvh p-2 sm:p-4 flex flex-col gap-2 sm:gap-4 @container">

src/cta/sandbox/als-shim.ts

@@ -78,11 +78,13 @@ export default AsyncLocalStorage
 `
 
 const ALS_SHIM_LOADER = `
-function alsShim(): PluginOption {
+function alsShim() {
+  console.log('🔧 ALS Shim plugin loaded');
   return {
-    enforce: 'pre',
+    enforce: 'pre' as const,
     name: 'virtual-async-hooks',
     config() {
+      console.log('🔧 ALS Shim: Configuring virtual async_hooks aliases');
       return {
         resolve: {
           alias: {
@@ -93,12 +95,15 @@ function alsShim(): PluginOption {
         },
       };
     },
-    resolveId(id) {
-      if (id === '\\0virtual:async_hooks') return id;
+    resolveId(id: string) {
+      if (id === '\\0virtual:async_hooks') {
+        console.log('🔧 ALS Shim: Resolving virtual async_hooks module');
+        return id;
+      }
     },
-    load(id) {
+    load(id: string) {
       if (id !== '\\0virtual:async_hooks') return null;
-
+      console.log('🔧 ALS Shim: Loading virtual async_hooks module');
       return \`${ALS_SHIM}\`;
     },
   };

src/cta/sandbox/use-webcontainer-store.ts

@@ -79,9 +79,43 @@ const getDependencies = (packageJsonContent: string): string => {
 
 let webContainer: Promise<WebContainer> | null = null
 
+// Detect Firefox for specific handling
+const isFirefox =
+  typeof navigator !== 'undefined' && navigator.userAgent.includes('Firefox')
+
 export default function createWebContainerStore(shouldShimALS: boolean) {
   if (!webContainer) {
-    webContainer = WebContainer.boot()
+    console.log(`🌐 Initializing WebContainer (Firefox: ${isFirefox})`)
+
+    // Firefox-specific boot with timeout and error handling
+    webContainer = Promise.race([
+      WebContainer.boot({
+        coep: isFirefox ? 'require-corp' : 'credentialless',
+      } as any),
+      new Promise<never>((_, reject) => {
+        const timeout = isFirefox ? 15000 : 10000
+        setTimeout(() => {
+          reject(
+            new Error(
+              isFirefox
+                ? 'WebContainer boot timeout. Please check Firefox privacy settings (Enhanced Tracking Protection may block Service Workers)'
+                : 'WebContainer boot timeout'
+            )
+          )
+        }, timeout)
+      }),
+    ]).catch((err) => {
+      console.error('WebContainer boot failed:', err)
+      if (isFirefox) {
+        console.warn(
+          'Firefox users: Check that Enhanced Tracking Protection is not blocking Service Workers'
+        )
+        console.warn(
+          'Firefox users: Service Workers are not available in Private Browsing mode'
+        )
+      }
+      throw err
+    })
   }
 
   const store = createStore<WebContainerStore>((set, get) => ({
@@ -134,8 +168,9 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
 
         // Wait for server to be ready (set up listener first)
         container.on('server-ready', (port, url) => {
-          console.log('Server ready on port', port, 'at', url)
+          console.log('🌐 Server ready on port', port, 'at', url)
           const currentState = get()
+          console.log('🌐 Setting previewUrl:', url)
           set({
             previewUrl: url,
             setupStep: 'ready',
@@ -145,6 +180,7 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
               `✅ Server ready at ${url}`,
             ],
           })
+          console.log('🌐 Preview URL set successfully')
         })
 
         // Start the dev server
@@ -168,14 +204,28 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
 
         // Check exit code
         const exitCode = await newDevProcess.exit
+        console.log('⚠️ Dev server process exited with code:', exitCode)
         if (exitCode !== 0) {
           addTerminalOutput(`❌ Dev server exited with code ${exitCode}`)
-          set({ error: `Dev server exited with code ${exitCode}` })
+          console.log('❌ Clearing preview URL due to dev server exit')
+          set({
+            error: `Dev server exited with code ${exitCode}`,
+            previewUrl: null,
+            setupStep: 'error',
+          })
+        } else {
+          console.log('ℹ️ Dev server exited cleanly (code 0)')
+          set({ previewUrl: null, devProcess: null })
         }
       } catch (error) {
         console.error('Dev server start error:', error)
         addTerminalOutput(`❌ Dev server error: ${(error as Error).message}`)
-        set({ error: (error as Error).message, setupStep: 'error' })
+        console.log('❌ Clearing preview URL due to dev server error')
+        set({
+          error: (error as Error).message,
+          setupStep: 'error',
+          previewUrl: null,
+        })
       }
     },
     updateProjectFiles: async (

src/cta/sandbox/webcontainer-preview.tsx

@@ -184,12 +184,13 @@ export function WebContainerPreview() {
   return (
     <div className="flex flex-col h-full">
       {/* iframe with the running app */}
-      <div className="flex-1">
+      <div className="flex-1 flex flex-col">
         {previewUrl ? (
           <iframe
             src={previewUrl}
-            className="w-full h-full border-0"
+            className="w-full flex-1 border-0"
             title="Application Preview"
+            allow="cross-origin-isolated"
             onLoad={() => console.log('Iframe loaded successfully')}
             onError={(e) => console.error('Iframe load error:', e)}
           />
@@ -234,6 +235,7 @@ export function WebContainerPreview() {
               <button
                 onClick={() => window.open(previewUrl, '_blank')}
                 className="px-2 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+                title="Open in new tab"
               >
                 Open in New Tab
               </button>