From 087118113ce8acc1186315e1cf82c9ff9549a88d Mon Sep 17 00:00:00 2001
From: Jack Herrington <jherr@pobox.com>
Date: Tue, 7 Oct 2025 06:41:58 -0700
Subject: [PATCH 1/4] feat: CTA-UI preview

---
 packages/cta-ui-base/package.json             |   1 +
 .../src/components/file-navigator.tsx         |  63 ++-
 .../src/components/file-viewer.tsx            |  22 +-
 .../src/components/web-container-provider.tsx |  42 ++
 .../src/components/webcontainer-preview.tsx   | 250 ++++++++++
 .../src/hooks/use-web-container.ts            |   7 +
 .../src/hooks/use-webcontainer-store.ts       | 431 ++++++++++++++++++
 packages/cta-ui-base/src/index.ts             |   8 +-
 packages/cta-ui-base/src/lib/als-shim.ts      | 127 ++++++
 .../lib/engine-handling/add-to-app-wrapper.ts |   3 +-
 .../lib/engine-handling/create-app-wrapper.ts |  11 +-
 .../lib/engine-handling/file-helpers.ts       |   8 +-
 .../generate-initial-payload.ts               |   6 +-
 packages/cta-ui/vite.config.ts                |   4 +
 pnpm-lock.yaml                                |   8 +
 15 files changed, 963 insertions(+), 28 deletions(-)
 create mode 100644 packages/cta-ui-base/src/components/web-container-provider.tsx
 create mode 100644 packages/cta-ui-base/src/components/webcontainer-preview.tsx
 create mode 100644 packages/cta-ui-base/src/hooks/use-web-container.ts
 create mode 100644 packages/cta-ui-base/src/hooks/use-webcontainer-store.ts
 create mode 100644 packages/cta-ui-base/src/lib/als-shim.ts

diff --git a/packages/cta-ui-base/package.json b/packages/cta-ui-base/package.json
index 116b35fa..27b2a43a 100644
--- a/packages/cta-ui-base/package.json
+++ b/packages/cta-ui-base/package.json
@@ -32,6 +32,7 @@
     "@tanstack/react-query": "^5.66.5",
     "@uiw/codemirror-theme-github": "^4.23.10",
     "@uiw/react-codemirror": "^4.23.10",
+    "@webcontainer/api": "^1.3.5",
     "chalk": "^5.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/packages/cta-ui-base/src/components/file-navigator.tsx b/packages/cta-ui-base/src/components/file-navigator.tsx
index 7dbd64c8..c34b48ff 100644
--- a/packages/cta-ui-base/src/components/file-navigator.tsx
+++ b/packages/cta-ui-base/src/components/file-navigator.tsx
@@ -14,9 +14,12 @@ import { getFileClass, twClasses } from '../file-classes'
 
 import FileViewer from './file-viewer'
 import FileTree from './file-tree'
+import WebContainerProvider from './web-container-provider'
+import { WebContainerPreview } from './webcontainer-preview'
 
 import { Label } from './ui/label'
 import { Switch } from './ui/switch'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/tabs'
 
 import type { FileTreeItem } from '../types'
 
@@ -181,6 +184,21 @@ export default function FileNavigator() {
 
   const ready = useReady()
 
+  // Prepare project files for WebContainer
+  const webContainerFiles = useMemo(() => {
+    console.log('Preparing WebContainer files, tree:', tree)
+    if (!tree) {
+      console.log('Tree is empty, returning empty array')
+      return []
+    }
+    const files = Object.entries(tree).map(([path, content]) => ({
+      path,
+      content,
+    }))
+    console.log('WebContainer files prepared:', files.length, 'files')
+    return files
+  }, [tree])
+
   if (!ready) {
     return null
   }
@@ -188,20 +206,37 @@ export default function FileNavigator() {
   return (
     <div className="bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4">
       {mode === 'add' && <Filters />}
-      <div className="flex flex-row @container">
-        <div className="w-1/3 @6xl:w-1/4 bg-gray-500/10 rounded-l-lg">
-          <FileTree selectedFile={selectedFile} tree={fileTree} />
-        </div>
-        <div className="w-2/3 @6xl:w-3/4">
-          {selectedFile && modifiedFileContents ? (
-            <FileViewer
-              filePath={selectedFile}
-              originalFile={originalFileContents}
-              modifiedFile={modifiedFileContents}
-            />
-          ) : null}
-        </div>
-      </div>
+      <Tabs defaultValue="files" className="w-full">
+        <TabsList className="mb-2">
+          <TabsTrigger value="files">Files</TabsTrigger>
+          <TabsTrigger value="preview">Preview</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="files" className="mt-0">
+          <div className="flex flex-row @container">
+            <div className="w-1/3 @6xl:w-1/4 bg-gray-500/10 rounded-l-lg">
+              <FileTree selectedFile={selectedFile} tree={fileTree} />
+            </div>
+            <div className="w-2/3 @6xl:w-3/4">
+              {selectedFile && modifiedFileContents ? (
+                <FileViewer
+                  filePath={selectedFile}
+                  originalFile={originalFileContents}
+                  modifiedFile={modifiedFileContents}
+                />
+              ) : null}
+            </div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="preview" className="mt-0">
+          <div className="h-[800px]">
+            <WebContainerProvider projectFiles={webContainerFiles}>
+              <WebContainerPreview />
+            </WebContainerProvider>
+          </div>
+        </TabsContent>
+      </Tabs>
     </div>
   )
 }
diff --git a/packages/cta-ui-base/src/components/file-viewer.tsx b/packages/cta-ui-base/src/components/file-viewer.tsx
index 87a21e7e..ee816622 100644
--- a/packages/cta-ui-base/src/components/file-viewer.tsx
+++ b/packages/cta-ui-base/src/components/file-viewer.tsx
@@ -45,10 +45,18 @@ export default function FileViewer({
   }
   const language = getLanguage(filePath)
 
-  if (!originalFile || originalFile === modifiedFile) {
+  // Display placeholder for binary files
+  const displayModified = modifiedFile.startsWith('base64::')
+    ? '<binary file>'
+    : modifiedFile
+  const displayOriginal = originalFile?.startsWith('base64::')
+    ? '<binary file>'
+    : originalFile
+
+  if (!displayOriginal || displayOriginal === displayModified) {
     return (
       <CodeMirror
-        value={modifiedFile}
+        value={displayModified}
         theme={theme}
         height="100vh"
         width="100%"
@@ -60,8 +68,14 @@ export default function FileViewer({
   }
   return (
     <CodeMirrorMerge orientation="a-b" theme={theme} className="text-lg">
-      <CodeMirrorMerge.Original value={originalFile} extensions={[language]} />
-      <CodeMirrorMerge.Modified value={modifiedFile} extensions={[language]} />
+      <CodeMirrorMerge.Original
+        value={displayOriginal}
+        extensions={[language]}
+      />
+      <CodeMirrorMerge.Modified
+        value={displayModified}
+        extensions={[language]}
+      />
     </CodeMirrorMerge>
   )
 }
diff --git a/packages/cta-ui-base/src/components/web-container-provider.tsx b/packages/cta-ui-base/src/components/web-container-provider.tsx
new file mode 100644
index 00000000..a843b847
--- /dev/null
+++ b/packages/cta-ui-base/src/components/web-container-provider.tsx
@@ -0,0 +1,42 @@
+import { createContext, useEffect, useState } from 'react'
+import { useStore } from 'zustand'
+import createWebContainerStore from '../hooks/use-webcontainer-store'
+
+export const WebContainerContext = createContext<ReturnType<
+  typeof createWebContainerStore
+> | null>(null)
+
+export default function WebContainerProvider({
+  children,
+  projectFiles,
+}: {
+  children: React.ReactNode
+  projectFiles: Array<{ path: string; content: string }>
+}) {
+  console.log(
+    'WebContainerProvider rendering with',
+    projectFiles.length,
+    'files',
+  )
+  const [containerStore] = useState(() => createWebContainerStore(true))
+
+  const updateProjectFiles = useStore(
+    containerStore,
+    (state) => state.updateProjectFiles,
+  )
+
+  useEffect(() => {
+    console.log(
+      'WebContainerProvider useEffect triggered with',
+      projectFiles.length,
+      'files',
+    )
+    updateProjectFiles(projectFiles)
+  }, [updateProjectFiles, projectFiles])
+
+  return (
+    <WebContainerContext.Provider value={containerStore}>
+      {children}
+    </WebContainerContext.Provider>
+  )
+}
diff --git a/packages/cta-ui-base/src/components/webcontainer-preview.tsx b/packages/cta-ui-base/src/components/webcontainer-preview.tsx
new file mode 100644
index 00000000..0c35122c
--- /dev/null
+++ b/packages/cta-ui-base/src/components/webcontainer-preview.tsx
@@ -0,0 +1,250 @@
+import { useContext } from 'react'
+import { useStore } from 'zustand'
+
+import type { SetupStep } from '../hooks/use-webcontainer-store'
+import { WebContainerContext } from './web-container-provider'
+
+export function WebContainerPreview() {
+  const containerStore = useContext(WebContainerContext)
+  if (!containerStore) {
+    throw new Error('WebContainerContext not found')
+  }
+
+  const webContainer = useStore(containerStore, (state) => state.webContainer)
+  const setupStep = useStore(containerStore, (state) => state.setupStep)
+  const statusMessage = useStore(containerStore, (state) => state.statusMessage)
+  const terminalOutput = useStore(
+    containerStore,
+    (state) => state.terminalOutput,
+  )
+  const error = useStore(containerStore, (state) => state.error)
+  const previewUrl = useStore(containerStore, (state) => state.previewUrl)
+  const startDevServer = useStore(
+    containerStore,
+    (state) => state.startDevServer,
+  )
+  const setTerminalOutput = useStore(
+    containerStore,
+    (state) => state.setTerminalOutput,
+  )
+
+  const getStepIcon = (step: SetupStep) => {
+    switch (step) {
+      case 'mounting':
+        return '📁'
+      case 'installing':
+        return '📦'
+      case 'starting':
+        return '🚀'
+      case 'ready':
+        return '✅'
+      case 'error':
+        return '❌'
+    }
+  }
+
+  const getStepColor = (step: SetupStep) => {
+    switch (step) {
+      case 'error':
+        return 'text-red-500'
+      case 'ready':
+        return 'text-green-500'
+      default:
+        return 'text-blue-500'
+    }
+  }
+
+  if (!webContainer) {
+    return (
+      <div className="flex items-center justify-center h-full bg-gray-50 dark:bg-gray-900">
+        <div className="text-center">
+          <div className="text-4xl mb-4">⏳</div>
+          <div className="text-lg font-medium text-gray-700 dark:text-gray-300">
+            Initializing WebContainer...
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (setupStep === 'error') {
+    return (
+      <div className="flex items-center justify-center h-full bg-gray-50 dark:bg-gray-900">
+        <div className="text-center max-w-md">
+          <div className="text-4xl mb-4">❌</div>
+          <div className="text-lg font-medium text-red-600 mb-2">
+            Setup Failed
+          </div>
+          <div className="text-sm text-gray-600 dark:text-gray-400">
+            {error}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (setupStep !== 'ready' || !previewUrl) {
+    return (
+      <div className="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
+        {/* Progress Header */}
+        <div className="border-b border-gray-200 dark:border-gray-700 p-4">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="text-2xl">{getStepIcon(setupStep)}</div>
+            <div className={`font-medium ${getStepColor(setupStep)}`}>
+              {statusMessage}
+            </div>
+          </div>
+
+          {/* Progress Steps */}
+          <div className="flex gap-4 text-sm">
+            <div
+              className={`flex items-center gap-1 ${
+                setupStep === 'mounting'
+                  ? 'text-blue-500'
+                  : setupStep === 'installing' ||
+                      setupStep === 'starting' ||
+                      setupStep === 'ready'
+                    ? 'text-green-500'
+                    : 'text-gray-400'
+              }`}
+            >
+              <div className="w-2 h-2 rounded-full bg-current"></div>
+              Mount Files
+            </div>
+            <div
+              className={`flex items-center gap-1 ${
+                setupStep === 'installing'
+                  ? 'text-blue-500'
+                  : setupStep === 'starting' || setupStep === 'ready'
+                    ? 'text-green-500'
+                    : 'text-gray-400'
+              }`}
+            >
+              <div className="w-2 h-2 rounded-full bg-current"></div>
+              Install Dependencies
+            </div>
+            <div
+              className={`flex items-center gap-1 ${
+                setupStep === 'starting'
+                  ? 'text-blue-500'
+                  : setupStep === 'ready'
+                    ? 'text-green-500'
+                    : 'text-gray-400'
+              }`}
+            >
+              <div className="w-2 h-2 rounded-full bg-current"></div>
+              Start Server
+            </div>
+          </div>
+        </div>
+
+        {/* Terminal Output */}
+        <div className="flex-1 p-4 overflow-y-auto">
+          <div className="bg-black text-green-400 font-mono text-xs p-4 rounded-lg h-full overflow-y-auto">
+            {terminalOutput.length > 0 ? (
+              terminalOutput.map((line, index) => (
+                <div key={index} className="mb-1">
+                  {line}
+                </div>
+              ))
+            ) : (
+              <div className="text-gray-500">Waiting for output...</div>
+            )}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Show the running application with persistent terminal
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header with URL and controls */}
+      <div className="border-b border-gray-200 dark:border-gray-700 p-3 bg-white dark:bg-gray-800">
+        <div className="flex items-center gap-3">
+          <div className="text-lg">✅</div>
+          <div className="flex-1">
+            <div className="text-sm font-medium text-green-600 dark:text-green-400">
+              {setupStep === 'ready'
+                ? 'Development Server Running'
+                : statusMessage}
+            </div>
+            <div className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+              {previewUrl || 'No URL available'}
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={startDevServer}
+              disabled={!webContainer}
+              className="px-3 py-1 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors disabled:opacity-50"
+            >
+              🔄 Restart Dev Server
+            </button>
+            {previewUrl && (
+              <button
+                onClick={() => window.open(previewUrl, '_blank')}
+                className="px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+              >
+                Open in New Tab
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* iframe with the running app - 80% height */}
+      <div style={{ height: '80%' }}>
+        {previewUrl ? (
+          <iframe
+            src={previewUrl}
+            className="w-full h-full border-0"
+            title="Application Preview"
+            onLoad={() => console.log('Iframe loaded successfully')}
+            onError={(e) => console.error('Iframe load error:', e)}
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full bg-gray-100 dark:bg-gray-800">
+            <div className="text-center">
+              <div className="text-2xl mb-2">🔄</div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">
+                {setupStep === 'ready'
+                  ? 'Preview not available'
+                  : statusMessage}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Terminal output - 20% height */}
+      <div
+        className="border-t border-gray-200 dark:border-gray-700 bg-black text-green-400"
+        style={{ height: '20%' }}
+      >
+        <div className="p-2 border-b border-gray-700 bg-gray-900 flex items-center justify-between">
+          <div className="text-xs font-medium text-gray-300">
+            Terminal Output
+          </div>
+          <button
+            onClick={() => setTerminalOutput([])}
+            className="text-xs text-gray-400 hover:text-gray-200 transition-colors"
+          >
+            Clear
+          </button>
+        </div>
+        <div className="font-mono text-xs p-2 h-full overflow-y-auto">
+          {terminalOutput.length > 0 ? (
+            terminalOutput.map((line, index) => (
+              <div key={index} className="mb-1 leading-tight">
+                {line}
+              </div>
+            ))
+          ) : (
+            <div className="text-gray-500">No output yet...</div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/cta-ui-base/src/hooks/use-web-container.ts b/packages/cta-ui-base/src/hooks/use-web-container.ts
new file mode 100644
index 00000000..b7eb5b2b
--- /dev/null
+++ b/packages/cta-ui-base/src/hooks/use-web-container.ts
@@ -0,0 +1,7 @@
+import { useContext } from 'react'
+import { WebContainerContext } from '../components/web-container-provider'
+
+export function useWebContainer() {
+  const webContainer = useContext(WebContainerContext)
+  return webContainer
+}
diff --git a/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts b/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts
new file mode 100644
index 00000000..74023fe4
--- /dev/null
+++ b/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts
@@ -0,0 +1,431 @@
+import { WebContainer } from '@webcontainer/api'
+import type { FileSystemTree, WebContainerProcess } from '@webcontainer/api'
+import { createStore } from 'zustand'
+import shimALS from '../lib/als-shim'
+
+export type SetupStep =
+  | 'mounting'
+  | 'installing'
+  | 'starting'
+  | 'ready'
+  | 'error'
+
+console.log('>>> startup')
+
+type WebContainerStore = {
+  webContainer: Promise<WebContainer> | null
+  ready: boolean
+  setupStep: SetupStep
+  statusMessage: string
+  terminalOutput: string[]
+  previewUrl: string | null
+  error: string | null
+  devProcess: WebContainerProcess | null
+  projectFiles: Array<{ path: string; content: string }>
+
+  teardown: () => void
+  updateProjectFiles: (
+    projectFiles: Array<{ path: string; content: string }>,
+  ) => Promise<void>
+
+  startDevServer: () => Promise<void>
+  addTerminalOutput: (output: string) => void
+  installDependencies: () => Promise<void>
+  setTerminalOutput: (output: string[]) => void
+}
+
+const processTerminalLine = (data: string): string => {
+  // Clean up terminal output - remove ANSI codes and control characters
+  let cleaned = data
+
+  // Remove all ANSI escape sequences (comprehensive)
+  cleaned = cleaned.replace(/\u001b\[[0-9;]*[a-zA-Z]/g, '') // Standard ANSI sequences
+  cleaned = cleaned.replace(/\u001b\][0-9;]*;[^\u0007]*\u0007/g, '') // OSC sequences
+  cleaned = cleaned.replace(/\u001b[=>]/g, '') // Other escape codes
+
+  // Remove carriage returns and other control characters
+  cleaned = cleaned.replace(/\r/g, '')
+  cleaned = cleaned.replace(
+    /[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f-\u009f]/g,
+    '',
+  )
+
+  // Remove spinner characters and progress bar artifacts
+  cleaned = cleaned.replace(/[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏]/g, '')
+  cleaned = cleaned.replace(/[▀▁▂▃▄▅▆▇█▉▊▋▌▍▎▏]/g, '')
+  cleaned = cleaned.replace(/[░▒▓]/g, '')
+
+  // Trim excessive whitespace
+  cleaned = cleaned.trim()
+
+  // Only return non-empty lines
+  return cleaned.length > 0 ? cleaned : ''
+}
+
+let webContainer: Promise<WebContainer> | null = null
+
+export default function createWebContainerStore(shouldShimALS: boolean) {
+  if (!webContainer) {
+    webContainer = WebContainer.boot()
+  }
+
+  const store = createStore<WebContainerStore>((set, get) => ({
+    webContainer,
+    ready: false,
+    setupStep: 'mounting',
+    statusMessage: '',
+    terminalOutput: [],
+    previewUrl: null,
+    error: null,
+    devProcess: null,
+    projectFiles: [],
+
+    teardown: () => {
+      set({ webContainer: null, ready: false })
+    },
+    addTerminalOutput: (output: string) => {
+      set(({ terminalOutput }) => ({
+        terminalOutput: [...terminalOutput, output],
+      }))
+    },
+    setTerminalOutput: (output: string[]) => {
+      set({ terminalOutput: output })
+    },
+    startDevServer: async () => {
+      const { devProcess, webContainer, addTerminalOutput } = get()
+      if (!webContainer) {
+        throw new Error('WebContainer not found')
+      }
+
+      try {
+        const container = await webContainer
+        if (!container) {
+          throw new Error('WebContainer not found')
+        }
+        if (devProcess) {
+          console.log('Killing existing dev process...')
+          devProcess.kill()
+          set({ devProcess: null })
+        }
+
+        set({
+          setupStep: 'starting',
+          statusMessage: 'Starting development server...',
+        })
+        addTerminalOutput('🚀 Starting dev server...')
+
+        // 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)
+          const currentState = get()
+          set({
+            previewUrl: url,
+            setupStep: 'ready',
+            statusMessage: 'Development server running',
+            terminalOutput: [
+              ...currentState.terminalOutput,
+              `✅ Server ready at ${url}`,
+            ],
+          })
+        })
+
+        // Start the dev server
+        const newDevProcess = await container.spawn('pnpm', ['dev'])
+        set({ devProcess: newDevProcess })
+
+        newDevProcess.output.pipeTo(
+          new WritableStream({
+            write(data) {
+              const cleaned = processTerminalLine(data)
+              if (cleaned && cleaned.length > 3) {
+                console.log('[DEV]', cleaned)
+                const currentState = get()
+                set({
+                  terminalOutput: [...currentState.terminalOutput, cleaned],
+                })
+              }
+            },
+          }),
+        )
+
+        // Check exit code
+        const exitCode = await newDevProcess.exit
+        if (exitCode !== 0) {
+          addTerminalOutput(`❌ Dev server exited with code ${exitCode}`)
+          set({ error: `Dev server exited with code ${exitCode}` })
+        }
+      } 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' })
+      }
+    },
+    updateProjectFiles: async (
+      projectFiles: Array<{ path: string; content: string }>,
+    ) => {
+      console.log('Updating project files...', projectFiles.length, 'files')
+      const {
+        projectFiles: originalProjectFiles,
+        addTerminalOutput,
+        installDependencies,
+        webContainer,
+      } = get()
+
+      if (!webContainer) {
+        console.error('WebContainer not found in updateProjectFiles')
+        throw new Error('WebContainer not found')
+      }
+
+      console.log('Awaiting WebContainer boot...')
+      try {
+        const container = await webContainer
+        if (!container) {
+          console.error('WebContainer resolved to null')
+          throw new Error('WebContainer not found')
+        }
+        console.log('WebContainer booted successfully!', container)
+      } catch (error) {
+        console.error('WebContainer boot failed:', error)
+        set({
+          error: `WebContainer boot failed: ${(error as Error).message}`,
+          setupStep: 'error',
+        })
+        throw error
+      }
+
+      const container = await webContainer
+
+      let packageJSONChanged = false
+      const binaryFiles: Record<string, Uint8Array> = {}
+      if (originalProjectFiles.length === 0) {
+        console.log('Mounting files...', projectFiles.length, 'files')
+        const fileSystemTree: FileSystemTree = {}
+        let base64FileCount = 0
+
+        for (const { path, content } of projectFiles) {
+          const cleanPath = path.replace(/^\.?\//, '')
+          console.log(path, cleanPath)
+          const pathParts = cleanPath.split('/')
+
+          let current: any = fileSystemTree
+          for (let i = 0; i < pathParts.length - 1; i++) {
+            const part = pathParts[i]
+            if (!current[part]) {
+              current[part] = { directory: {} }
+            }
+            current = current[part].directory
+          }
+
+          const fileName = pathParts[pathParts.length - 1]
+
+          const adjustedContent = shouldShimALS
+            ? shimALS(fileName, content)
+            : content
+
+          if (adjustedContent.startsWith('base64::')) {
+            base64FileCount++
+            const base64Content = adjustedContent.replace('base64::', '')
+            console.log(
+              `[BINARY FILE] ${cleanPath}: ${base64Content.substring(0, 50)}... (${base64Content.length} chars)`,
+            )
+
+            try {
+              if (cleanPath === 'public/tanstack-circle-logo.png') {
+                console.log(base64Content)
+              }
+              // More robust base64 to Uint8Array conversion
+              // Handle potential padding issues and ensure proper decoding
+              const base64Cleaned = base64Content.replace(/\s/g, '')
+              const binaryString = atob(base64Cleaned)
+              const bytes = new Uint8Array(binaryString.length)
+              for (let i = 0; i < binaryString.length; i++) {
+                bytes[i] = binaryString.charCodeAt(i) & 0xff
+              }
+              console.log(
+                `[BINARY CONVERTED] ${cleanPath}: ${bytes.length} bytes, first bytes: [${Array.from(bytes.slice(0, 10)).join(', ')}]`,
+              )
+              binaryFiles[cleanPath] = bytes
+              // current[fileName] = {
+              //   file: {
+              //     contents: bytes,
+              //   },
+              // }
+            } catch (error) {
+              console.error(
+                `[BINARY ERROR] Failed to convert ${cleanPath}:`,
+                error,
+              )
+              // Fallback to empty file if conversion fails
+              // current[fileName] = {
+              //   file: {
+              //     contents: new Uint8Array(0),
+              //   },
+              // }
+            }
+          } else {
+            current[fileName] = {
+              file: {
+                contents: String(adjustedContent),
+              },
+            }
+          }
+        }
+
+        console.log(
+          `FileSystemTree created with ${base64FileCount} binary files`,
+        )
+        await container.mount(fileSystemTree)
+        for (const [path, bytes] of Object.entries(binaryFiles)) {
+          await container.fs.writeFile(path, bytes)
+        }
+        addTerminalOutput(
+          `📁 Files mounted successfully (${base64FileCount} binary files)`,
+        )
+        console.log('Files mounted successfully')
+        packageJSONChanged = true
+      } else {
+        const originalMap = new Map<string, string>()
+        for (const { path, content } of originalProjectFiles) {
+          originalMap.set(path, content)
+        }
+        const newMap = new Map<string, string>()
+        for (const { path, content } of projectFiles) {
+          newMap.set(path, content)
+        }
+
+        const changedOrNewFiles: Array<{ path: string; content: string }> = []
+        for (const { path, content } of projectFiles) {
+          if (!originalMap.has(path)) {
+            changedOrNewFiles.push({ path, content })
+          } else if (originalMap.get(path) !== content) {
+            changedOrNewFiles.push({ path, content })
+          }
+        }
+
+        const deletedFiles: string[] = []
+        for (const { path } of originalProjectFiles) {
+          if (!newMap.has(path)) {
+            deletedFiles.push(path)
+          }
+        }
+
+        if (changedOrNewFiles.length > 0 || deletedFiles.length > 0) {
+          for (const { path, content } of changedOrNewFiles) {
+            await container.fs.writeFile(path, content)
+          }
+
+          for (const path of deletedFiles) {
+            await container.fs.rm(path)
+          }
+
+          addTerminalOutput('📁 Files updated successfully')
+
+          if (changedOrNewFiles.some(({ path }) => path === './package.json')) {
+            packageJSONChanged = true
+          }
+        }
+      }
+
+      set({ projectFiles })
+
+      if (packageJSONChanged) {
+        addTerminalOutput(
+          '📦 Package.json changed, reinstalling dependencies...',
+        )
+        await installDependencies()
+      }
+    },
+    installDependencies: async () => {
+      const { webContainer, addTerminalOutput, startDevServer } = get()
+      if (!webContainer) {
+        throw new Error('WebContainer not found')
+      }
+
+      try {
+        const container = await webContainer
+        if (!container) {
+          throw new Error('WebContainer not found')
+        }
+
+        set({
+          setupStep: 'installing',
+          statusMessage: 'Installing dependencies...',
+        })
+
+        console.log('Starting pnpm install...')
+        addTerminalOutput('📦 Running pnpm install...')
+        addTerminalOutput('⏳ This may take a minute...')
+
+        let installProcess
+        try {
+          installProcess = await container.spawn('pnpm', ['install'])
+          console.log('pnpm install process spawned successfully')
+        } catch (spawnError) {
+          console.error('Failed to spawn npm install:', spawnError)
+          throw spawnError
+        }
+
+        let outputCount = 0
+        let lastProgressUpdate = Date.now()
+        let progressInterval = setInterval(() => {
+          const elapsed = Math.floor((Date.now() - lastProgressUpdate) / 1000)
+          console.log(
+            `[INSTALL] Still running... (${elapsed}s, ${outputCount} output chunks)`,
+          )
+        }, 5000)
+
+        installProcess.output.pipeTo(
+          new WritableStream({
+            write(data) {
+              outputCount++
+
+              const cleaned = processTerminalLine(data)
+
+              // Show meaningful output immediately
+              if (cleaned && cleaned.length > 3) {
+                const isImportant =
+                  cleaned.includes('added') ||
+                  cleaned.includes('removed') ||
+                  cleaned.includes('changed') ||
+                  cleaned.includes('audited') ||
+                  cleaned.includes('packages') ||
+                  cleaned.includes('error') ||
+                  cleaned.includes('warn')
+
+                if (isImportant) {
+                  console.log('[INSTALL]', cleaned)
+                  addTerminalOutput(cleaned)
+                  clearInterval(progressInterval)
+                }
+              }
+            },
+          }),
+        )
+
+        console.log('Waiting for install to complete...')
+        const installExitCode = await installProcess.exit
+        clearInterval(progressInterval)
+        console.log('Install exit code:', installExitCode)
+        console.log('Total output lines:', outputCount)
+
+        if (installExitCode !== 0) {
+          const errorMsg = `pnpm install failed with exit code ${installExitCode}`
+          addTerminalOutput(`❌ ${errorMsg}`)
+          set({ error: errorMsg, setupStep: 'error' })
+          throw new Error(errorMsg)
+        }
+
+        addTerminalOutput('✅ Dependencies installed successfully')
+
+        await startDevServer()
+      } catch (error) {
+        console.error('Install error:', error)
+        addTerminalOutput(`❌ Install error: ${(error as Error).message}`)
+        set({ error: (error as Error).message, setupStep: 'error' })
+        throw error
+      }
+    },
+  }))
+
+  return store
+}
diff --git a/packages/cta-ui-base/src/index.ts b/packages/cta-ui-base/src/index.ts
index 1e185392..d9d0508b 100644
--- a/packages/cta-ui-base/src/index.ts
+++ b/packages/cta-ui-base/src/index.ts
@@ -16,8 +16,11 @@ import ModeSelector from './components/sidebar-items/mode-selector'
 import TypescriptSwitch from './components/sidebar-items/typescript-switch'
 import StarterDialog from './components/sidebar-items/starter'
 import SidebarGroup from './components/sidebar-items/sidebar-group'
+import WebContainerProvider from './components/web-container-provider'
+import { WebContainerPreview } from './components/webcontainer-preview'
 
 import { useApplicationMode, useManager, useReady } from './store/project'
+import { useWebContainer } from './hooks/use-web-container'
 
 export {
   FileNavigator,
@@ -36,9 +39,12 @@ export {
   TypescriptSwitch,
   StarterDialog,
   SidebarGroup,
+  WebContainerProvider,
+  WebContainerPreview,
   useApplicationMode,
   useManager,
   useReady,
+  useWebContainer,
 }
 
-export default RootComponent
\ No newline at end of file
+export default RootComponent
diff --git a/packages/cta-ui-base/src/lib/als-shim.ts b/packages/cta-ui-base/src/lib/als-shim.ts
new file mode 100644
index 00000000..dc635192
--- /dev/null
+++ b/packages/cta-ui-base/src/lib/als-shim.ts
@@ -0,0 +1,127 @@
+const ALS_RESOLVER = `resolve: {
+  alias: {
+    'node:async_hooks': '\\0virtual:async_hooks',
+    async_hooks: '\\0virtual:async_hooks',
+  },
+},`
+
+const ALS_SHIM = `export class AsyncLocalStorage {
+  constructor() {
+    // queue: array of { store, fn, resolve, reject }
+    this._queue = [];
+    this._running = false;        // true while processing queue
+    this._currentStore = undefined; // store visible to getStore() while a run executes
+  }
+
+  /**
+   * run(store, callback, ...args) -> Promise
+   * Queues the callback to run with store as the current store. If the callback
+   * returns a Promise, the queue waits for it to settle before starting the next run.
+   */
+  run(store, callback, ...args) {
+    return new Promise((resolve, reject) => {
+      this._queue.push({
+        store,
+        fn: () => callback(...args),
+        resolve,
+        reject,
+      });
+      // start processing (if not already)
+      this._processQueue().catch((err) => {
+        // _processQueue shouldn't throw; but guard anyway.
+        console.error('SerialAsyncLocalStorage internal error:', err);
+      });
+    });
+  }
+
+  /**
+   * getStore() -> current store or undefined
+   * Returns the store of the currently executing run (or undefined if none).
+   */
+  getStore() {
+    return this._currentStore;
+  }
+
+  /**
+   * enterWith(store)
+   * Set the current store for the currently running task synchronously.
+   * Throws if there is no active run (this polyfill requires you to be inside a run).
+   */
+  enterWith(store) {
+    if (!this._running) {
+      throw new Error('enterWith() may be used only while a run is active.');
+    }
+    this._currentStore = store;
+  }
+
+  // internal: process queue serially
+  async _processQueue() {
+    if (this._running) return;
+    this._running = true;
+
+    while (this._queue.length) {
+      const { store, fn, resolve, reject } = this._queue.shift();
+      const prevStore = this._currentStore;
+      this._currentStore = store;
+
+      try {
+        const result = fn();
+        // await if callback returned a promise
+        const awaited = result instanceof Promise ? await result : result;
+        resolve(awaited);
+      } catch (err) {
+        reject(err);
+      } finally {
+        // restore previous store (if any)
+        this._currentStore = prevStore;
+      }
+      // loop continues to next queued task
+    }
+
+    this._running = false;
+  }
+}
+export default AsyncLocalStorage
+`
+
+const ALS_SHIM_LOADER = `
+function alsShim(): PluginOption {
+  return {
+    enforce: 'pre',
+    name: 'virtual-async-hooks',
+    config() {
+      return {
+        resolve: {
+          alias: {
+            // catch both forms
+            'node:async_hooks': '\\0virtual:async_hooks',
+            async_hooks: '\\0virtual:async_hooks',
+          },
+        },
+      };
+    },
+    resolveId(id) {
+      if (id === '\\0virtual:async_hooks') return id;
+    },
+    load(id) {
+      if (id !== '\\0virtual:async_hooks') return null;
+
+      console.log('loaded!', id);
+
+      return \`${ALS_SHIM}\`;
+    },
+  };
+}
+`
+
+export default function shimALS(fileName: string, content: string) {
+  let adjustedContent = content
+  if (fileName === 'vite.config.ts') {
+    adjustedContent += ALS_SHIM_LOADER
+    adjustedContent = adjustedContent.replace(
+      'plugins: [',
+      `${ALS_RESOLVER}plugins: [alsShim(),`,
+    )
+  }
+  return adjustedContent
+}
diff --git a/packages/cta-ui/lib/engine-handling/add-to-app-wrapper.ts b/packages/cta-ui/lib/engine-handling/add-to-app-wrapper.ts
index 7cd64f33..13762bb3 100644
--- a/packages/cta-ui/lib/engine-handling/add-to-app-wrapper.ts
+++ b/packages/cta-ui/lib/engine-handling/add-to-app-wrapper.ts
@@ -129,7 +129,8 @@ export async function addToAppWrapper(
     writeConfigFileToEnvironment(environment, options)
     environment.finishRun()
 
-    output.files = cleanUpFiles(output.files, projectPath)
+    // Preserve base64 content for WebContainer, FileViewer will display placeholders
+    output.files = cleanUpFiles(output.files, projectPath, true)
     output.deletedFiles = cleanUpFileArray(output.deletedFiles, projectPath)
     return output
   }
diff --git a/packages/cta-ui/lib/engine-handling/create-app-wrapper.ts b/packages/cta-ui/lib/engine-handling/create-app-wrapper.ts
index 6ad5b6e4..b8c9c34e 100644
--- a/packages/cta-ui/lib/engine-handling/create-app-wrapper.ts
+++ b/packages/cta-ui/lib/engine-handling/create-app-wrapper.ts
@@ -65,9 +65,11 @@ export async function createAppWrapper(
     starter,
     framework,
     chosenAddOns,
-    addOnOptions: (!projectOptions.addOnOptions || Object.keys(projectOptions.addOnOptions).length === 0) 
-      ? populateAddOnOptionsDefaults(chosenAddOns) 
-      : projectOptions.addOnOptions,
+    addOnOptions:
+      !projectOptions.addOnOptions ||
+      Object.keys(projectOptions.addOnOptions).length === 0
+        ? populateAddOnOptionsDefaults(chosenAddOns)
+        : projectOptions.addOnOptions,
   }
 
   function createEnvironment() {
@@ -113,7 +115,8 @@ export async function createAppWrapper(
   } else {
     await createApp(environment, options)
 
-    output.files = cleanUpFiles(output.files, targetDir)
+    // Preserve base64 content for WebContainer, FileViewer will display placeholders
+    output.files = cleanUpFiles(output.files, targetDir, true)
     output.deletedFiles = cleanUpFileArray(output.deletedFiles, targetDir)
 
     return output
diff --git a/packages/cta-ui/lib/engine-handling/file-helpers.ts b/packages/cta-ui/lib/engine-handling/file-helpers.ts
index a5358c10..37f916bd 100644
--- a/packages/cta-ui/lib/engine-handling/file-helpers.ts
+++ b/packages/cta-ui/lib/engine-handling/file-helpers.ts
@@ -5,11 +5,13 @@ import { CONFIG_FILE } from '@tanstack/cta-engine'
 export function cleanUpFiles(
   files: Record<string, string>,
   targetDir?: string,
+  preserveBase64 = false,
 ) {
   return Object.keys(files).reduce<Record<string, string>>((acc, file) => {
-    const content = files[file].startsWith('base64::')
-      ? '<binary file>'
-      : files[file]
+    const content =
+      files[file].startsWith('base64::') && !preserveBase64
+        ? '<binary file>'
+        : files[file]
     if (basename(file) !== CONFIG_FILE) {
       acc[targetDir ? file.replace(targetDir, '.') : file] = content
     }
diff --git a/packages/cta-ui/lib/engine-handling/generate-initial-payload.ts b/packages/cta-ui/lib/engine-handling/generate-initial-payload.ts
index a3c5542a..1dfac317 100644
--- a/packages/cta-ui/lib/engine-handling/generate-initial-payload.ts
+++ b/packages/cta-ui/lib/engine-handling/generate-initial-payload.ts
@@ -45,7 +45,11 @@ export async function generateInitialPayload() {
 
   const localFiles =
     applicationMode === 'add'
-      ? await cleanUpFiles(await recursivelyGatherFiles(projectPath, false))
+      ? await cleanUpFiles(
+          await recursivelyGatherFiles(projectPath, false),
+          undefined,
+          true,
+        )
       : {}
 
   const forcedRouterMode = getForcedRouterMode()
diff --git a/packages/cta-ui/vite.config.ts b/packages/cta-ui/vite.config.ts
index d9885cb2..d3d50c0e 100644
--- a/packages/cta-ui/vite.config.ts
+++ b/packages/cta-ui/vite.config.ts
@@ -8,6 +8,10 @@ export default defineConfig({
   server: {
     open: true,
     port: 3000,
+    headers: {
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+      'Cross-Origin-Opener-Policy': 'same-origin',
+    },
   },
   build: {
     outDir: 'dist',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4b399f17..8f672667 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -480,6 +480,9 @@ importers:
       '@uiw/react-codemirror':
         specifier: ^4.23.10
         version: 4.23.11(@babel/runtime@7.27.0)(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.0)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.10)(@codemirror/state@6.5.2)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.36.6)(codemirror@6.0.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@webcontainer/api':
+        specifier: ^1.3.5
+        version: 1.6.1
       chalk:
         specifier: ^5.4.1
         version: 5.4.1
@@ -2221,6 +2224,9 @@ packages:
   '@vue/shared@3.5.13':
     resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
+  '@webcontainer/api@1.6.1':
+    resolution: {integrity: sha512-2RS2KiIw32BY1Icf6M1DvqSmcon9XICZCDgS29QJb2NmF12ZY2V5Ia+949hMKB3Wno+P/Y8W+sPP59PZeXSELg==}
+
   '@yarnpkg/lockfile@1.1.0':
     resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==}
 
@@ -6757,6 +6763,8 @@ snapshots:
 
   '@vue/shared@3.5.13': {}
 
+  '@webcontainer/api@1.6.1': {}
+
   '@yarnpkg/lockfile@1.1.0': {}
 
   '@yarnpkg/parsers@3.0.2':

From 79b4d3ff9affdd0970c572af90395dc62a40f2b6 Mon Sep 17 00:00:00 2001
From: Jack Herrington <jherr@pobox.com>
Date: Tue, 7 Oct 2025 06:57:23 -0700
Subject: [PATCH 2/4] fix: post install updates now work

---
 .../src/components/file-navigator.tsx         | 62 ++++++++--------
 .../src/hooks/use-webcontainer-store.ts       | 74 ++++++++++---------
 2 files changed, 71 insertions(+), 65 deletions(-)

diff --git a/packages/cta-ui-base/src/components/file-navigator.tsx b/packages/cta-ui-base/src/components/file-navigator.tsx
index c34b48ff..3f77549b 100644
--- a/packages/cta-ui-base/src/components/file-navigator.tsx
+++ b/packages/cta-ui-base/src/components/file-navigator.tsx
@@ -204,39 +204,39 @@ export default function FileNavigator() {
   }
 
   return (
-    <div className="bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4">
-      {mode === 'add' && <Filters />}
-      <Tabs defaultValue="files" className="w-full">
-        <TabsList className="mb-2">
-          <TabsTrigger value="files">Files</TabsTrigger>
-          <TabsTrigger value="preview">Preview</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="files" className="mt-0">
-          <div className="flex flex-row @container">
-            <div className="w-1/3 @6xl:w-1/4 bg-gray-500/10 rounded-l-lg">
-              <FileTree selectedFile={selectedFile} tree={fileTree} />
+    <WebContainerProvider projectFiles={webContainerFiles}>
+      <div className="bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4">
+        {mode === 'add' && <Filters />}
+        <Tabs defaultValue="files" className="w-full">
+          <TabsList className="mb-2">
+            <TabsTrigger value="files">Files</TabsTrigger>
+            <TabsTrigger value="preview">Preview</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="files" className="mt-0">
+            <div className="flex flex-row @container">
+              <div className="w-1/3 @6xl:w-1/4 bg-gray-500/10 rounded-l-lg">
+                <FileTree selectedFile={selectedFile} tree={fileTree} />
+              </div>
+              <div className="w-2/3 @6xl:w-3/4">
+                {selectedFile && modifiedFileContents ? (
+                  <FileViewer
+                    filePath={selectedFile}
+                    originalFile={originalFileContents}
+                    modifiedFile={modifiedFileContents}
+                  />
+                ) : null}
+              </div>
             </div>
-            <div className="w-2/3 @6xl:w-3/4">
-              {selectedFile && modifiedFileContents ? (
-                <FileViewer
-                  filePath={selectedFile}
-                  originalFile={originalFileContents}
-                  modifiedFile={modifiedFileContents}
-                />
-              ) : null}
-            </div>
-          </div>
-        </TabsContent>
+          </TabsContent>
 
-        <TabsContent value="preview" className="mt-0">
-          <div className="h-[800px]">
-            <WebContainerProvider projectFiles={webContainerFiles}>
+          <TabsContent value="preview" className="mt-0">
+            <div className="h-[800px]">
               <WebContainerPreview />
-            </WebContainerProvider>
-          </div>
-        </TabsContent>
-      </Tabs>
-    </div>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </WebContainerProvider>
   )
 }
diff --git a/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts b/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts
index 74023fe4..3b21bb83 100644
--- a/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts
+++ b/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts
@@ -22,6 +22,7 @@ type WebContainerStore = {
   error: string | null
   devProcess: WebContainerProcess | null
   projectFiles: Array<{ path: string; content: string }>
+  isInstalling: boolean
 
   teardown: () => void
   updateProjectFiles: (
@@ -79,6 +80,7 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
     error: null,
     devProcess: null,
     projectFiles: [],
+    isInstalling: false,
 
     teardown: () => {
       set({ webContainer: null, ready: false })
@@ -176,7 +178,6 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
         throw new Error('WebContainer not found')
       }
 
-      console.log('Awaiting WebContainer boot...')
       try {
         const container = await webContainer
         if (!container) {
@@ -198,13 +199,11 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
       let packageJSONChanged = false
       const binaryFiles: Record<string, Uint8Array> = {}
       if (originalProjectFiles.length === 0) {
-        console.log('Mounting files...', projectFiles.length, 'files')
         const fileSystemTree: FileSystemTree = {}
         let base64FileCount = 0
 
         for (const { path, content } of projectFiles) {
           const cleanPath = path.replace(/^\.?\//, '')
-          console.log(path, cleanPath)
           const pathParts = cleanPath.split('/')
 
           let current: any = fileSystemTree
@@ -225,42 +224,20 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
           if (adjustedContent.startsWith('base64::')) {
             base64FileCount++
             const base64Content = adjustedContent.replace('base64::', '')
-            console.log(
-              `[BINARY FILE] ${cleanPath}: ${base64Content.substring(0, 50)}... (${base64Content.length} chars)`,
-            )
 
             try {
-              if (cleanPath === 'public/tanstack-circle-logo.png') {
-                console.log(base64Content)
-              }
-              // More robust base64 to Uint8Array conversion
-              // Handle potential padding issues and ensure proper decoding
               const base64Cleaned = base64Content.replace(/\s/g, '')
               const binaryString = atob(base64Cleaned)
               const bytes = new Uint8Array(binaryString.length)
               for (let i = 0; i < binaryString.length; i++) {
                 bytes[i] = binaryString.charCodeAt(i) & 0xff
               }
-              console.log(
-                `[BINARY CONVERTED] ${cleanPath}: ${bytes.length} bytes, first bytes: [${Array.from(bytes.slice(0, 10)).join(', ')}]`,
-              )
               binaryFiles[cleanPath] = bytes
-              // current[fileName] = {
-              //   file: {
-              //     contents: bytes,
-              //   },
-              // }
             } catch (error) {
               console.error(
                 `[BINARY ERROR] Failed to convert ${cleanPath}:`,
                 error,
               )
-              // Fallback to empty file if conversion fails
-              // current[fileName] = {
-              //   file: {
-              //     contents: new Uint8Array(0),
-              //   },
-              // }
             }
           } else {
             current[fileName] = {
@@ -271,9 +248,6 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
           }
         }
 
-        console.log(
-          `FileSystemTree created with ${base64FileCount} binary files`,
-        )
         await container.mount(fileSystemTree)
         for (const [path, bytes] of Object.entries(binaryFiles)) {
           await container.fs.writeFile(path, bytes)
@@ -281,7 +255,6 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
         addTerminalOutput(
           `📁 Files mounted successfully (${base64FileCount} binary files)`,
         )
-        console.log('Files mounted successfully')
         packageJSONChanged = true
       } else {
         const originalMap = new Map<string, string>()
@@ -310,6 +283,17 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
         }
 
         if (changedOrNewFiles.length > 0 || deletedFiles.length > 0) {
+          // Kill dev server before updating files to avoid HMR issues
+          const { devProcess } = get()
+          if (devProcess) {
+            console.log('Stopping dev server before file update...')
+            addTerminalOutput(
+              '⏸️  Stopping dev server before updating files...',
+            )
+            devProcess.kill()
+            set({ devProcess: null, previewUrl: null })
+          }
+
           for (const { path, content } of changedOrNewFiles) {
             await container.fs.writeFile(path, content)
           }
@@ -336,14 +320,24 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
       }
     },
     installDependencies: async () => {
-      const { webContainer, addTerminalOutput, startDevServer } = get()
+      const { webContainer, addTerminalOutput, startDevServer, isInstalling } =
+        get()
+
+      if (isInstalling) {
+        console.log('Install already in progress, skipping')
+        return
+      }
+
       if (!webContainer) {
         throw new Error('WebContainer not found')
       }
 
+      set({ isInstalling: true })
+
       try {
         const container = await webContainer
         if (!container) {
+          set({ isInstalling: false })
           throw new Error('WebContainer not found')
         }
 
@@ -361,12 +355,13 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
           installProcess = await container.spawn('pnpm', ['install'])
           console.log('pnpm install process spawned successfully')
         } catch (spawnError) {
-          console.error('Failed to spawn npm install:', spawnError)
+          console.error('Failed to spawn pnpm install:', spawnError)
           throw spawnError
         }
 
         let outputCount = 0
         let lastProgressUpdate = Date.now()
+        let allOutput: string[] = []
         let progressInterval = setInterval(() => {
           const elapsed = Math.floor((Date.now() - lastProgressUpdate) / 1000)
           console.log(
@@ -378,6 +373,7 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
           new WritableStream({
             write(data) {
               outputCount++
+              allOutput.push(data)
 
               const cleaned = processTerminalLine(data)
 
@@ -390,12 +386,17 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
                   cleaned.includes('audited') ||
                   cleaned.includes('packages') ||
                   cleaned.includes('error') ||
-                  cleaned.includes('warn')
+                  cleaned.includes('warn') ||
+                  cleaned.includes('ERR') ||
+                  cleaned.includes('FAIL')
 
                 if (isImportant) {
                   console.log('[INSTALL]', cleaned)
                   addTerminalOutput(cleaned)
-                  clearInterval(progressInterval)
+                  if (isImportant && progressInterval) {
+                    clearInterval(progressInterval)
+                    progressInterval = undefined as any
+                  }
                 }
               }
             },
@@ -404,13 +405,16 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
 
         console.log('Waiting for install to complete...')
         const installExitCode = await installProcess.exit
-        clearInterval(progressInterval)
+        if (progressInterval) clearInterval(progressInterval)
         console.log('Install exit code:', installExitCode)
         console.log('Total output lines:', outputCount)
 
         if (installExitCode !== 0) {
+          // Show all output for debugging
+          console.error('[INSTALL ERROR] All output:', allOutput.join('\n'))
           const errorMsg = `pnpm install failed with exit code ${installExitCode}`
           addTerminalOutput(`❌ ${errorMsg}`)
+          addTerminalOutput('💡 Check console for detailed error output')
           set({ error: errorMsg, setupStep: 'error' })
           throw new Error(errorMsg)
         }
@@ -423,6 +427,8 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
         addTerminalOutput(`❌ Install error: ${(error as Error).message}`)
         set({ error: (error as Error).message, setupStep: 'error' })
         throw error
+      } finally {
+        set({ isInstalling: false })
       }
     },
   }))

From b6d2233aae6259a021c7ccb872b72abfeb724bf1 Mon Sep 17 00:00:00 2001
From: Jack Herrington <jherr@pobox.com>
Date: Tue, 7 Oct 2025 09:44:25 -0700
Subject: [PATCH 3/4] cleaner

---
 .../src/components/file-navigator.tsx         |  16 ++-
 .../src/components/webcontainer-preview.tsx   | 104 +++++++++---------
 .../src/hooks/use-webcontainer-store.ts       |   5 +-
 packages/cta-ui-base/src/lib/als-shim.ts      |   2 -
 4 files changed, 67 insertions(+), 60 deletions(-)

diff --git a/packages/cta-ui-base/src/components/file-navigator.tsx b/packages/cta-ui-base/src/components/file-navigator.tsx
index 3f77549b..3e694235 100644
--- a/packages/cta-ui-base/src/components/file-navigator.tsx
+++ b/packages/cta-ui-base/src/components/file-navigator.tsx
@@ -208,9 +208,19 @@ export default function FileNavigator() {
       <div className="bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4">
         {mode === 'add' && <Filters />}
         <Tabs defaultValue="files" className="w-full">
-          <TabsList className="mb-2">
-            <TabsTrigger value="files">Files</TabsTrigger>
-            <TabsTrigger value="preview">Preview</TabsTrigger>
+          <TabsList className="mb-1 h-7 p-0.5 bg-transparent border border-gray-300 dark:border-gray-700">
+            <TabsTrigger
+              value="files"
+              className="text-xs h-6 px-3 py-0 data-[state=active]:bg-gray-200 dark:data-[state=active]:bg-gray-800"
+            >
+              Files
+            </TabsTrigger>
+            <TabsTrigger
+              value="preview"
+              className="text-xs h-6 px-3 py-0 data-[state=active]:bg-gray-200 dark:data-[state=active]:bg-gray-800"
+            >
+              Preview
+            </TabsTrigger>
           </TabsList>
 
           <TabsContent value="files" className="mt-0">
diff --git a/packages/cta-ui-base/src/components/webcontainer-preview.tsx b/packages/cta-ui-base/src/components/webcontainer-preview.tsx
index 0c35122c..b6bf8335 100644
--- a/packages/cta-ui-base/src/components/webcontainer-preview.tsx
+++ b/packages/cta-ui-base/src/components/webcontainer-preview.tsx
@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useEffect, useRef } from 'react'
 import { useStore } from 'zustand'
 
 import type { SetupStep } from '../hooks/use-webcontainer-store'
@@ -28,6 +28,14 @@ export function WebContainerPreview() {
     (state) => state.setTerminalOutput,
   )
 
+  // Auto-scroll terminal to bottom when new output arrives
+  const terminalRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (terminalRef.current) {
+      terminalRef.current.scrollTop = terminalRef.current.scrollHeight
+    }
+  }, [terminalOutput])
+
   const getStepIcon = (step: SetupStep) => {
     switch (step) {
       case 'mounting':
@@ -159,42 +167,8 @@ export function WebContainerPreview() {
   // Show the running application with persistent terminal
   return (
     <div className="flex flex-col h-full">
-      {/* Header with URL and controls */}
-      <div className="border-b border-gray-200 dark:border-gray-700 p-3 bg-white dark:bg-gray-800">
-        <div className="flex items-center gap-3">
-          <div className="text-lg">✅</div>
-          <div className="flex-1">
-            <div className="text-sm font-medium text-green-600 dark:text-green-400">
-              {setupStep === 'ready'
-                ? 'Development Server Running'
-                : statusMessage}
-            </div>
-            <div className="text-xs text-gray-500 dark:text-gray-400 font-mono">
-              {previewUrl || 'No URL available'}
-            </div>
-          </div>
-          <div className="flex gap-2">
-            <button
-              onClick={startDevServer}
-              disabled={!webContainer}
-              className="px-3 py-1 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors disabled:opacity-50"
-            >
-              🔄 Restart Dev Server
-            </button>
-            {previewUrl && (
-              <button
-                onClick={() => window.open(previewUrl, '_blank')}
-                className="px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
-              >
-                Open in New Tab
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* iframe with the running app - 80% height */}
-      <div style={{ height: '80%' }}>
+      {/* iframe with the running app - 75% height */}
+      <div style={{ height: '75%' }}>
         {previewUrl ? (
           <iframe
             src={previewUrl}
@@ -217,26 +191,54 @@ export function WebContainerPreview() {
         )}
       </div>
 
-      {/* Terminal output - 20% height */}
+      {/* Terminal output - 25% height */}
       <div
-        className="border-t border-gray-200 dark:border-gray-700 bg-black text-green-400"
-        style={{ height: '20%' }}
+        className="border-t border-gray-200 dark:border-gray-700 bg-black text-green-400 flex flex-col"
+        style={{ height: '25%' }}
       >
-        <div className="p-2 border-b border-gray-700 bg-gray-900 flex items-center justify-between">
-          <div className="text-xs font-medium text-gray-300">
-            Terminal Output
+        <div className="p-2 border-b border-gray-700 bg-gray-900 flex items-center justify-between flex-shrink-0">
+          <div className="flex items-center gap-2 flex-1">
+            <div className="text-xs font-medium text-gray-300">
+              Terminal Output
+            </div>
+            {setupStep === 'ready' && previewUrl && (
+              <div className="text-xs text-green-500">● Server Running</div>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            {previewUrl && (
+              <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"
+              >
+                Open in New Tab
+              </button>
+            )}
+            <button
+              onClick={startDevServer}
+              disabled={!webContainer}
+              className="px-2 py-1 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors disabled:opacity-50"
+            >
+              🔄 Restart
+            </button>
+            <button
+              onClick={() => setTerminalOutput([])}
+              className="text-xs text-gray-400 hover:text-gray-200 transition-colors"
+            >
+              Clear
+            </button>
           </div>
-          <button
-            onClick={() => setTerminalOutput([])}
-            className="text-xs text-gray-400 hover:text-gray-200 transition-colors"
-          >
-            Clear
-          </button>
         </div>
-        <div className="font-mono text-xs p-2 h-full overflow-y-auto">
+        <div
+          ref={terminalRef}
+          className="font-mono text-xs p-2 flex-1 overflow-y-auto overflow-x-hidden"
+        >
           {terminalOutput.length > 0 ? (
             terminalOutput.map((line, index) => (
-              <div key={index} className="mb-1 leading-tight">
+              <div
+                key={index}
+                className="mb-1 leading-tight whitespace-pre-wrap break-words"
+              >
                 {line}
               </div>
             ))
diff --git a/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts b/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts
index 3b21bb83..69dc9f5e 100644
--- a/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts
+++ b/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts
@@ -165,7 +165,6 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
     updateProjectFiles: async (
       projectFiles: Array<{ path: string; content: string }>,
     ) => {
-      console.log('Updating project files...', projectFiles.length, 'files')
       const {
         projectFiles: originalProjectFiles,
         addTerminalOutput,
@@ -248,13 +247,11 @@ export default function createWebContainerStore(shouldShimALS: boolean) {
           }
         }
 
+        // Write the binary files on their own since mount doesn't support binary files correctly
         await container.mount(fileSystemTree)
         for (const [path, bytes] of Object.entries(binaryFiles)) {
           await container.fs.writeFile(path, bytes)
         }
-        addTerminalOutput(
-          `📁 Files mounted successfully (${base64FileCount} binary files)`,
-        )
         packageJSONChanged = true
       } else {
         const originalMap = new Map<string, string>()
diff --git a/packages/cta-ui-base/src/lib/als-shim.ts b/packages/cta-ui-base/src/lib/als-shim.ts
index dc635192..526c4bb4 100644
--- a/packages/cta-ui-base/src/lib/als-shim.ts
+++ b/packages/cta-ui-base/src/lib/als-shim.ts
@@ -106,8 +106,6 @@ function alsShim(): PluginOption {
     load(id) {
       if (id !== '\\0virtual:async_hooks') return null;
 
-      console.log('loaded!', id);
-
       return \`${ALS_SHIM}\`;
     },
   };

From 0eedf03b543712aaae32d5e2c278e6a8d5d6c027 Mon Sep 17 00:00:00 2001
From: Jack Herrington <jherr@pobox.com>
Date: Tue, 7 Oct 2025 10:13:10 -0700
Subject: [PATCH 4/4] feat: CTA-UI preview

---
 .../src/components/webcontainer-preview.tsx   | 235 +++++++++---------
 .../src/hooks/use-webcontainer-store.ts       |   8 +-
 2 files changed, 117 insertions(+), 126 deletions(-)

diff --git a/packages/cta-ui-base/src/components/webcontainer-preview.tsx b/packages/cta-ui-base/src/components/webcontainer-preview.tsx
index b6bf8335..8b6d0ca8 100644
--- a/packages/cta-ui-base/src/components/webcontainer-preview.tsx
+++ b/packages/cta-ui-base/src/components/webcontainer-preview.tsx
@@ -1,5 +1,6 @@
-import { useContext, useEffect, useRef } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useStore } from 'zustand'
+import { ChevronDown, ChevronUp } from 'lucide-react'
 
 import type { SetupStep } from '../hooks/use-webcontainer-store'
 import { WebContainerContext } from './web-container-provider'
@@ -28,6 +29,8 @@ export function WebContainerPreview() {
     (state) => state.setTerminalOutput,
   )
 
+  const [isTerminalOpen, setIsTerminalOpen] = useState(false)
+
   // Auto-scroll terminal to bottom when new output arrives
   const terminalRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
@@ -62,113 +65,88 @@ export function WebContainerPreview() {
     }
   }
 
-  if (!webContainer) {
+  // Show progress dialog during setup (similar to "Creating Your Application")
+  if (
+    !webContainer ||
+    setupStep === 'error' ||
+    setupStep !== 'ready' ||
+    !previewUrl
+  ) {
     return (
       <div className="flex items-center justify-center h-full bg-gray-50 dark:bg-gray-900">
-        <div className="text-center">
-          <div className="text-4xl mb-4">⏳</div>
-          <div className="text-lg font-medium text-gray-700 dark:text-gray-300">
-            Initializing WebContainer...
-          </div>
-        </div>
-      </div>
-    )
-  }
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 max-w-2xl w-full mx-4 border-2 border-blue-500">
+          <h2 className="text-2xl font-bold mb-6 text-center">
+            {setupStep === 'error' ? 'Setup Failed' : 'Preparing Preview'}
+          </h2>
 
-  if (setupStep === 'error') {
-    return (
-      <div className="flex items-center justify-center h-full bg-gray-50 dark:bg-gray-900">
-        <div className="text-center max-w-md">
-          <div className="text-4xl mb-4">❌</div>
-          <div className="text-lg font-medium text-red-600 mb-2">
-            Setup Failed
-          </div>
-          <div className="text-sm text-gray-600 dark:text-gray-400">
-            {error}
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  if (setupStep !== 'ready' || !previewUrl) {
-    return (
-      <div className="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
-        {/* Progress Header */}
-        <div className="border-b border-gray-200 dark:border-gray-700 p-4">
-          <div className="flex items-center gap-3 mb-2">
-            <div className="text-2xl">{getStepIcon(setupStep)}</div>
-            <div className={`font-medium ${getStepColor(setupStep)}`}>
-              {statusMessage}
-            </div>
-          </div>
-
-          {/* Progress Steps */}
-          <div className="flex gap-4 text-sm">
-            <div
-              className={`flex items-center gap-1 ${
-                setupStep === 'mounting'
-                  ? 'text-blue-500'
-                  : setupStep === 'installing' ||
-                      setupStep === 'starting' ||
-                      setupStep === 'ready'
-                    ? 'text-green-500'
-                    : 'text-gray-400'
-              }`}
-            >
-              <div className="w-2 h-2 rounded-full bg-current"></div>
-              Mount Files
-            </div>
-            <div
-              className={`flex items-center gap-1 ${
-                setupStep === 'installing'
-                  ? 'text-blue-500'
-                  : setupStep === 'starting' || setupStep === 'ready'
-                    ? 'text-green-500'
-                    : 'text-gray-400'
-              }`}
-            >
-              <div className="w-2 h-2 rounded-full bg-current"></div>
-              Install Dependencies
-            </div>
-            <div
-              className={`flex items-center gap-1 ${
-                setupStep === 'starting'
-                  ? 'text-blue-500'
-                  : setupStep === 'ready'
-                    ? 'text-green-500'
-                    : 'text-gray-400'
-              }`}
-            >
-              <div className="w-2 h-2 rounded-full bg-current"></div>
-              Start Server
+          {setupStep === 'error' ? (
+            <div className="text-center">
+              <div className="text-4xl mb-4">❌</div>
+              <div className="text-lg font-medium text-red-600 mb-2">
+                An error occurred
+              </div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                {error}
+              </div>
+              <button
+                onClick={startDevServer}
+                className="px-4 py-2 text-sm bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors"
+              >
+                🔄 Retry
+              </button>
             </div>
-          </div>
-        </div>
-
-        {/* Terminal Output */}
-        <div className="flex-1 p-4 overflow-y-auto">
-          <div className="bg-black text-green-400 font-mono text-xs p-4 rounded-lg h-full overflow-y-auto">
-            {terminalOutput.length > 0 ? (
-              terminalOutput.map((line, index) => (
-                <div key={index} className="mb-1">
-                  {line}
+          ) : (
+            <>
+              {/* Progress Steps */}
+              <div className="space-y-4 mb-6">
+                <div className="flex items-center gap-3">
+                  <div className="text-2xl">{getStepIcon('mounting')}</div>
+                  <div
+                    className={`flex-1 ${getStepColor(setupStep === 'mounting' ? 'mounting' : setupStep === 'installing' || setupStep === 'starting' || setupStep === 'ready' ? 'ready' : 'mounting')}`}
+                  >
+                    Mount Files
+                  </div>
+                  {(setupStep === 'installing' ||
+                    setupStep === 'starting' ||
+                    setupStep === 'ready') &&
+                    '✓'}
                 </div>
-              ))
-            ) : (
-              <div className="text-gray-500">Waiting for output...</div>
-            )}
-          </div>
+                <div className="flex items-center gap-3">
+                  <div className="text-2xl">{getStepIcon('installing')}</div>
+                  <div
+                    className={`flex-1 ${getStepColor(setupStep === 'installing' ? 'installing' : setupStep === 'starting' || setupStep === 'ready' ? 'ready' : 'mounting')}`}
+                  >
+                    Install Dependencies
+                  </div>
+                  {(setupStep === 'starting' || setupStep === 'ready') && '✓'}
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="text-2xl">{getStepIcon('starting')}</div>
+                  <div
+                    className={`flex-1 ${getStepColor(setupStep === 'starting' ? 'starting' : setupStep === 'ready' ? 'ready' : 'mounting')}`}
+                  >
+                    Start Server
+                  </div>
+                  {setupStep === 'ready' && '✓'}
+                </div>
+              </div>
+
+              {/* Current status */}
+              <div className="text-center text-sm text-gray-600 dark:text-gray-400">
+                {statusMessage || 'Preparing your application...'}
+              </div>
+            </>
+          )}
         </div>
       </div>
     )
   }
 
-  // Show the running application with persistent terminal
+  // Show the running application with collapsible terminal
   return (
     <div className="flex flex-col h-full">
-      {/* iframe with the running app - 75% height */}
-      <div style={{ height: '75%' }}>
+      {/* iframe with the running app */}
+      <div className="flex-1">
         {previewUrl ? (
           <iframe
             src={previewUrl}
@@ -182,22 +160,27 @@ export function WebContainerPreview() {
             <div className="text-center">
               <div className="text-2xl mb-2">🔄</div>
               <div className="text-sm text-gray-600 dark:text-gray-400">
-                {setupStep === 'ready'
-                  ? 'Preview not available'
-                  : statusMessage}
+                Preview not available
               </div>
             </div>
           </div>
         )}
       </div>
 
-      {/* Terminal output - 25% height */}
-      <div
-        className="border-t border-gray-200 dark:border-gray-700 bg-black text-green-400 flex flex-col"
-        style={{ height: '25%' }}
-      >
-        <div className="p-2 border-b border-gray-700 bg-gray-900 flex items-center justify-between flex-shrink-0">
+      {/* Collapsible Terminal output */}
+      <div className="border-t border-gray-200 dark:border-gray-700 bg-black text-green-400 flex flex-col flex-shrink-0">
+        <div
+          className="p-2 border-b border-gray-700 bg-gray-900 flex items-center justify-between cursor-pointer hover:bg-gray-800 transition-colors"
+          onClick={() => setIsTerminalOpen(!isTerminalOpen)}
+        >
           <div className="flex items-center gap-2 flex-1">
+            <button className="text-gray-400 hover:text-gray-200">
+              {isTerminalOpen ? (
+                <ChevronDown className="w-4 h-4" />
+              ) : (
+                <ChevronUp className="w-4 h-4" />
+              )}
+            </button>
             <div className="text-xs font-medium text-gray-300">
               Terminal Output
             </div>
@@ -205,7 +188,10 @@ export function WebContainerPreview() {
               <div className="text-xs text-green-500">● Server Running</div>
             )}
           </div>
-          <div className="flex items-center gap-2">
+          <div
+            className="flex items-center gap-2"
+            onClick={(e) => e.stopPropagation()}
+          >
             {previewUrl && (
               <button
                 onClick={() => window.open(previewUrl, '_blank')}
@@ -229,23 +215,26 @@ export function WebContainerPreview() {
             </button>
           </div>
         </div>
-        <div
-          ref={terminalRef}
-          className="font-mono text-xs p-2 flex-1 overflow-y-auto overflow-x-hidden"
-        >
-          {terminalOutput.length > 0 ? (
-            terminalOutput.map((line, index) => (
-              <div
-                key={index}
-                className="mb-1 leading-tight whitespace-pre-wrap break-words"
-              >
-                {line}
-              </div>
-            ))
-          ) : (
-            <div className="text-gray-500">No output yet...</div>
-          )}
-        </div>
+        {isTerminalOpen && (
+          <div
+            ref={terminalRef}
+            className="font-mono text-xs p-2 overflow-y-auto overflow-x-hidden"
+            style={{ maxHeight: '200px' }}
+          >
+            {terminalOutput.length > 0 ? (
+              terminalOutput.map((line, index) => (
+                <div
+                  key={index}
+                  className="mb-1 leading-tight whitespace-pre-wrap break-words"
+                >
+                  {line}
+                </div>
+              ))
+            ) : (
+              <div className="text-gray-500">No output yet...</div>
+            )}
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts b/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts
index 69dc9f5e..86d48a63 100644
--- a/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts
+++ b/packages/cta-ui-base/src/hooks/use-webcontainer-store.ts
@@ -1,8 +1,10 @@
 import { WebContainer } from '@webcontainer/api'
-import type { FileSystemTree, WebContainerProcess } from '@webcontainer/api'
 import { createStore } from 'zustand'
+
 import shimALS from '../lib/als-shim'
 
+import type { FileSystemTree, WebContainerProcess } from '@webcontainer/api'
+
 export type SetupStep =
   | 'mounting'
   | 'installing'
@@ -17,7 +19,7 @@ type WebContainerStore = {
   ready: boolean
   setupStep: SetupStep
   statusMessage: string
-  terminalOutput: string[]
+  terminalOutput: Array<string>
   previewUrl: string | null
   error: string | null
   devProcess: WebContainerProcess | null
@@ -32,7 +34,7 @@ type WebContainerStore = {
   startDevServer: () => Promise<void>
   addTerminalOutput: (output: string) => void
   installDependencies: () => Promise<void>
-  setTerminalOutput: (output: string[]) => void
+  setTerminalOutput: (output: Array<string>) => void
 }
 
 const processTerminalLine = (data: string): string => {