create-claudeportal 0.1.0

package/ui/app.js

@@ -0,0 +1,747 @@
+// ============================================
+// GREENHOUSE SETUP WIZARD — Client
+// ============================================
+
+let appState = {
+  currentScreen: 'setup',
+  tools: [],
+  platform: null,
+  ptyAvailable: false,
+  projectDir: null,
+  projectName: null,
+  terminal: null,
+  ws: null,
+  intentDescription: null,
+  claudeReady: false,
+  pendingPrompt: null,
+  firstBuildDone: false,
+}
+
+// ============================================
+// INIT
+// ============================================
+
+document.addEventListener('DOMContentLoaded', async () => {
+  // Get app info
+  const info = await fetchJson('/api/info')
+  if (info) {
+    appState.ptyAvailable = info.ptyAvailable
+  }
+
+  // Restore saved state
+  const saved = localStorage.getItem('greenhouse-setup')
+  let savedState = null
+  if (saved) {
+    try {
+      savedState = JSON.parse(saved)
+      appState.projectDir = savedState.projectDir || null
+    } catch {}
+  }
+
+  // Set up event listeners
+  setupListeners()
+
+  // If setup was already completed, skip straight to build screen
+  if (savedState?.setupComplete) {
+    showScreen('build')
+    return
+  }
+
+  // Otherwise run tool detection
+  await detectTools()
+})
+
+// ============================================
+// SCREEN NAVIGATION
+// ============================================
+
+function showScreen(name) {
+  document.querySelectorAll('.screen').forEach((s) => s.classList.remove('active'))
+  document.getElementById(`screen-${name}`).classList.add('active')
+  appState.currentScreen = name
+
+  if (name === 'build') {
+    saveState(true)
+    // Show sidebar immediately for existing projects
+    if (appState.firstBuildDone) {
+      document.getElementById('build-sidebar').classList.remove('hidden')
+      document.getElementById('sidebar-reopen').classList.add('hidden')
+    }
+    initTerminal()
+  }
+}
+
+function saveState(setupComplete = false) {
+  localStorage.setItem('greenhouse-setup', JSON.stringify({
+    setupComplete,
+    projectDir: appState.projectDir,
+  }))
+}
+
+// ============================================
+// SCREEN 1: TOOL DETECTION
+// ============================================
+
+async function detectTools() {
+  const list = document.getElementById('tools-list')
+  list.innerHTML = '<div class="tool-item loading"><span class="tool-status">⏳</span><span class="tool-name">Scanning your machine...</span></div>'
+
+  const data = await fetchJson('/api/detect')
+  if (!data) {
+    list.innerHTML = '<div class="tool-item error"><span class="tool-status">❌</span><span class="tool-name">Failed to connect to the setup server. Please refresh.</span></div>'
+    return
+  }
+
+  appState.tools = data.tools
+  appState.platform = data.platform
+  appState.drives = data.drives || []
+
+  renderToolList()
+  renderDriveShortcuts()
+}
+
+function renderToolList() {
+  const container = document.getElementById('tools-list')
+  const claudeInstalled = appState.tools.find((t) => t.id === 'claude')?.installed
+
+  // Compact inline display
+  const items = appState.tools.map((tool) => {
+    const icon = tool.installed ? '✅' : (tool.required ? '❌' : '⚠️')
+    const label = tool.installed ? `${tool.name} ${tool.version}` : `${tool.name} — missing`
+    return `<span class="tool-check">${icon} ${label}</span>`
+  })
+
+  container.innerHTML = items.join('')
+
+  // Show install button if Claude Code is missing
+  if (!claudeInstalled) {
+    container.innerHTML += `<span class="tool-install">
+      <button class="btn btn-small btn-secondary" onclick="installSingle('claude')">Install Claude Code</button>
+    </span>`
+  }
+
+  // Update build button state
+  updateBuildButton()
+}
+
+function updateBuildButton() {
+  const buildBtn = document.getElementById('btn-start-building')
+  const descInput = document.getElementById('intent-description')
+  const hasDescription = descInput && descInput.value.trim().length > 0
+  const claudeOk = appState.tools.find((t) => t.id === 'claude')?.installed
+  const hasName = appState.projectName && appState.projectName.length > 0
+  buildBtn.disabled = !(hasDescription && claudeOk && hasName)
+}
+
+async function installSingle(toolId) {
+  const container = document.getElementById('tools-list')
+  const tool = appState.tools.find((t) => t.id === toolId)
+  const toolName = tool ? tool.name : toolId
+
+  // Show installing state inline
+  container.innerHTML = `<span class="tool-check"><span class="spinner-small"></span> Installing ${toolName}...</span>`
+
+  try {
+    const response = await fetch(`/api/install/${toolId}`, { method: 'POST' })
+    if (!response.ok || !response.body) {
+      throw new Error(`Install request failed (HTTP ${response.status})`)
+    }
+
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder()
+
+    let buffer = ''
+    let failed = false
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+
+      buffer += decoder.decode(value, { stream: true })
+      const lines = buffer.split('\n\n')
+      buffer = lines.pop() || ''
+
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          try {
+            const data = JSON.parse(line.slice(6))
+            if (data.status === 'error') {
+              failed = true
+              showError(toolId, data.error)
+            } else if (data.status === 'progress' && data.message) {
+              container.innerHTML = `<span class="tool-check"><span class="spinner-small"></span> ${data.message}</span>`
+            }
+          } catch (e) {
+            console.error('Failed to parse install event:', line, e)
+          }
+        }
+      }
+    }
+  } catch (err) {
+    console.error(`Install failed for ${toolId}:`, err)
+    showError(toolId, err.message)
+    return
+  }
+
+  // Re-detect to update versions and rebuild tool display
+  await detectTools()
+}
+
+function showError(toolId, error) {
+  const recovery = document.getElementById('error-recovery')
+  const message = document.getElementById('error-message')
+  const technical = document.getElementById('error-technical')
+
+  const tool = appState.tools.find((t) => t.id === toolId)
+  message.textContent = `${tool ? tool.name : toolId} failed to install.`
+  const osInfo = appState.platform ? `${appState.platform.os} ${appState.platform.arch}` : 'unknown'
+  technical.textContent = `Tool: ${toolId}\nError: ${error}\nOS: ${osInfo}\nTime: ${new Date().toISOString()}`
+
+  recovery.style.display = 'block'
+
+  document.getElementById('btn-retry').onclick = () => {
+    recovery.style.display = 'none'
+    installSingle(toolId)
+  }
+
+  document.getElementById('btn-skip').onclick = () => {
+    recovery.style.display = 'none'
+    // Mark tool as skipped so the Next button can appear
+    const tool = appState.tools.find((t) => t.id === toolId)
+    if (tool) tool.installed = true
+    renderToolList()
+  }
+}
+
+// ============================================
+// START BUILDING
+// ============================================
+
+async function startBuilding() {
+  const projectName = appState.projectName
+  const description = document.getElementById('intent-description').value.trim()
+  if (!projectName || !description) return
+
+  const claudeInstalled = appState.tools.find((t) => t.id === 'claude')?.installed
+  if (!claudeInstalled) {
+    alert('Claude Code must be installed before you can build. Click "Install Claude Code" above.')
+    return
+  }
+
+  // Disable button while scaffolding
+  const buildBtn = document.getElementById('btn-start-building')
+  buildBtn.disabled = true
+  buildBtn.textContent = 'Setting up...'
+
+  // Scaffold the starter template into ~/Claude/<name>/
+  try {
+    const res = await fetch('/api/scaffold', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ projectName }),
+    })
+    const data = await res.json()
+    if (!res.ok) throw new Error(data.error || 'Scaffold failed')
+    appState.projectDir = data.projectDir
+  } catch (err) {
+    alert('Failed to create project: ' + err.message)
+    buildBtn.disabled = false
+    buildBtn.textContent = "Let's Build"
+    return
+  }
+
+  appState.intentDescription = [
+    `I want to build: ${description}.`,
+    'There is already a starter template in this directory with CLAUDE.md, src/ folder with React components, hooks, and utilities.',
+    'Read the CLAUDE.md first to understand the architecture rules.',
+    'Set up the project with Vite + React, install dependencies, and build the app using the provided component structure.',
+    'Make it look polished and professional.',
+    'When done, tell me to run npm run dev to preview it.',
+  ].join(' ')
+
+  // Update sidebar project path
+  document.getElementById('current-project-path').textContent = `~/Claude/${projectName}`
+
+  showScreen('build')
+}
+
+function renderDriveShortcuts() {
+  const container = document.getElementById('drive-shortcuts')
+  const list = document.getElementById('drive-list')
+  if (!appState.drives || !appState.drives.length) return
+
+  const icons = {
+    icloud: '☁️',
+    gdrive: '📁',
+    onedrive: '☁️',
+    dropbox: '📦',
+    documents: '📄',
+    desktop: '🖥️',
+  }
+
+  list.innerHTML = appState.drives.map((drive) => {
+    const icon = icons[drive.id] || '📂'
+    return `<button class="drive-btn" data-path="${drive.path}">
+      <span class="drive-icon">${icon}</span>${drive.name}
+    </button>`
+  }).join('')
+
+  // Click to fill the path input
+  list.querySelectorAll('.drive-btn').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const pathInput = document.getElementById('existing-path')
+      pathInput.value = btn.dataset.path
+      pathInput.dispatchEvent(new Event('input'))
+      pathInput.focus()
+    })
+  })
+
+  container.style.display = 'block'
+}
+
+function openExisting() {
+  const folderPath = document.getElementById('existing-path').value.trim()
+  const pain = document.getElementById('existing-pain').value.trim()
+  const outcome = document.getElementById('existing-outcome').value.trim()
+  if (!folderPath || !pain || !outcome) return
+
+  appState.projectDir = folderPath
+  appState.projectName = null
+
+  // Build a prompt from pain + outcome
+  appState.intentDescription = [
+    'First, explore this project — read the key files and understand the codebase structure.',
+    `The problem I need help with: ${pain}.`,
+    `The ideal outcome: ${outcome}.`,
+    'Start by summarizing what you found in the project, then suggest a plan to achieve the outcome.',
+    'Ask me before making any changes.',
+  ].join(' ')
+
+  // Update sidebar project path
+  document.getElementById('current-project-path').textContent = folderPath
+
+  // Show sidebar immediately for existing projects
+  appState.firstBuildDone = true
+
+  showScreen('build')
+}
+
+// ============================================
+// SCREEN 3: TERMINAL
+// ============================================
+
+function initTerminal() {
+  // Clean up existing terminal if any
+  if (appState.terminal) {
+    appState.terminal.dispose()
+    appState.terminal = null
+  }
+  if (appState.ws) {
+    appState.ws.close()
+    appState.ws = null
+  }
+  if (appState.fallbackTimer) {
+    clearTimeout(appState.fallbackTimer)
+    appState.fallbackTimer = null
+  }
+  if (appState.resizeObserver) {
+    appState.resizeObserver.disconnect()
+    appState.resizeObserver = null
+  }
+  appState.firstBuildDone = false
+  appState.claudeReady = false
+  appState.claudeLaunchedAt = null
+  // Clear the container
+  const container = document.getElementById('terminal-container')
+  container.innerHTML = ''
+
+  if (!appState.ptyAvailable) {
+    container.style.display = 'none'
+    document.getElementById('terminal-fallback').style.display = 'flex'
+
+    document.getElementById('btn-open-native').onclick = openNativeTerminal
+    return
+  }
+
+  // Check if xterm CDN scripts loaded
+  if (!window.Terminal || !window.FitAddon || !window.WebLinksAddon) {
+    container.style.display = 'none'
+    document.getElementById('terminal-fallback').style.display = 'flex'
+    document.getElementById('terminal-fallback').querySelector('p').textContent =
+      'Terminal libraries failed to load (check your internet connection).'
+    document.getElementById('btn-open-native').onclick = openNativeTerminal
+    return
+  }
+
+  const Terminal = window.Terminal
+  const FitAddon = window.FitAddon.FitAddon
+  const WebLinksAddon = window.WebLinksAddon.WebLinksAddon
+
+  const term = new Terminal({
+    theme: {
+      background: '#1a1a2e',
+      foreground: '#e0e0e0',
+      cursor: '#4ade80',
+      selectionBackground: 'rgba(74, 222, 128, 0.25)',
+      black: '#1a1a2e',
+      red: '#ef4444',
+      green: '#22c55e',
+      yellow: '#f59e0b',
+      blue: '#3b82f6',
+      magenta: '#a855f7',
+      cyan: '#06b6d4',
+      white: '#e0e0e0',
+    },
+    fontFamily: '"JetBrains Mono", "Fira Code", "SF Mono", monospace',
+    fontSize: 14,
+    cursorBlink: true,
+    scrollback: 5000,
+  })
+
+  const fitAddon = new FitAddon()
+  term.loadAddon(fitAddon)
+  term.loadAddon(new WebLinksAddon())
+
+  term.open(container)
+  fitAddon.fit()
+
+  appState.terminal = term
+
+  // Connect WebSocket
+  const cwd = encodeURIComponent(appState.projectDir || '')
+  const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
+  const ws = new WebSocket(`${wsProtocol}//${location.host}/terminal?cwd=${cwd}`)
+  appState.ws = ws
+
+  ws.onopen = () => {
+    appState.claudeReady = false
+    appState.claudeLaunchedAt = null
+    appState.pendingPrompt = appState.intentDescription || null
+    appState.intentDescription = null
+
+    // Launch Claude Code — project folder already created by /api/scaffold
+    // and the WebSocket cwd param sets the working directory
+    setTimeout(() => {
+      ws.send(JSON.stringify({ type: 'input', data: 'claude --dangerously-skip-permissions\r' }))
+      appState.claudeLaunchedAt = Date.now()
+    }, 500)
+  }
+
+  ws.onmessage = (e) => {
+    let msg
+    try {
+      msg = JSON.parse(e.data)
+    } catch {
+      return
+    }
+    switch (msg.type) {
+      case 'output':
+        term.write(msg.data)
+
+        // Detect Claude Code readiness — look for the interactive prompt.
+        // Ignore output in the first 2s after launch to avoid false positives
+        // from shell echo, npm warnings, etc. that may contain ">".
+        if (!appState.claudeReady && appState.pendingPrompt && appState.claudeLaunchedAt) {
+          const elapsed = Date.now() - appState.claudeLaunchedAt
+          if (elapsed > 2000) {
+            const clean = msg.data.replace(/\x1b(?:\[[0-9;]*[a-zA-Z]|\][^\x07]*\x07|.)/g, '')
+            if (/>\s*$/.test(clean) || clean.includes('What can I help')) {
+              appState.claudeReady = true
+              setTimeout(() => {
+                if (appState.pendingPrompt && ws.readyState === WebSocket.OPEN) {
+                  ws.send(JSON.stringify({ type: 'input', data: appState.pendingPrompt + '\r' }))
+                  appState.pendingPrompt = null
+                }
+              }, 300)
+            }
+          }
+        }
+
+        // After the first prompt is sent, watch for Claude finishing its response.
+        // Require at least 10s after prompt delivery to avoid mid-response triggers.
+        if (appState.claudeReady && !appState.firstBuildDone && !appState.pendingPrompt) {
+          const elapsed = Date.now() - appState.claudeLaunchedAt
+          if (elapsed > 10000) {
+            const clean = msg.data.replace(/\x1b(?:\[[0-9;]*[a-zA-Z]|\][^\x07]*\x07|.)/g, '')
+            if (/>\s*$/.test(clean)) {
+              appState.firstBuildDone = true
+              const sidebar = document.getElementById('build-sidebar')
+              const reopenTab = document.getElementById('sidebar-reopen')
+              sidebar.classList.remove('hidden')
+              reopenTab.classList.add('hidden')
+            }
+          }
+        }
+        break
+      case 'exit':
+        term.writeln('\r\n[Process exited. Press any key to restart]')
+        break
+      case 'error':
+        document.getElementById('terminal-container').style.display = 'none'
+        document.getElementById('terminal-fallback').style.display = 'flex'
+        break
+    }
+  }
+
+  ws.onclose = () => {
+    term.writeln('\r\n[Connection lost. Refresh to reconnect]')
+  }
+
+  // Send keystrokes to server
+  term.onData((data) => {
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'input', data }))
+    }
+  })
+
+  // Handle resize
+  appState.resizeObserver = new ResizeObserver(() => {
+    fitAddon.fit()
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }))
+    }
+  })
+  appState.resizeObserver.observe(container)
+
+  // Fallback: if readiness detection doesn't trigger in 15s, send anyway
+  appState.fallbackTimer = setTimeout(() => {
+    if (appState.pendingPrompt && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'input', data: appState.pendingPrompt + '\r' }))
+      appState.pendingPrompt = null
+      appState.claudeReady = true
+    }
+    appState.fallbackTimer = null
+  }, 15000)
+}
+
+function openNativeTerminal() {
+  const dir = appState.projectDir || '~'
+  alert(`Open your terminal app and run:\n\ncd ${dir}\nclaude --dangerously-skip-permissions`)
+}
+
+// ============================================
+// PANEL TOGGLES
+// ============================================
+
+function toggleSidebar() {
+  const sidebar = document.getElementById('build-sidebar')
+  const reopenTab = document.getElementById('sidebar-reopen')
+  const isHidden = sidebar.classList.toggle('hidden')
+  reopenTab.classList.toggle('hidden', !isHidden)
+}
+
+function togglePreview() {
+  const preview = document.getElementById('build-preview')
+  const iframe = document.getElementById('preview-iframe')
+  const placeholder = document.getElementById('preview-placeholder')
+  const isHidden = preview.classList.toggle('hidden')
+
+  if (!isHidden) {
+    iframe.src = 'http://localhost:5173'
+    iframe.onload = () => {
+      placeholder.style.display = 'none'
+      iframe.style.display = 'block'
+    }
+    iframe.onerror = () => {
+      placeholder.style.display = 'flex'
+      iframe.style.display = 'none'
+    }
+  } else {
+    iframe.src = ''
+    placeholder.style.display = 'flex'
+    iframe.style.display = 'none'
+  }
+}
+
+// ============================================
+// GITHUB CLONE
+// ============================================
+
+async function showRepoList() {
+  const list = document.getElementById('clone-repo-list')
+  const items = document.getElementById('repo-items')
+  list.style.display = 'block'
+  items.innerHTML = '<div class="loading">Loading repos...</div>'
+
+  const data = await fetchJson('/api/github/repos')
+  if (!data || !data.repos || !data.repos.length) {
+    items.innerHTML = '<div class="text-muted">No repos found</div>'
+    return
+  }
+
+  items.innerHTML = ''
+  data.repos.forEach((repo) => {
+    const btn = document.createElement('button')
+    btn.className = 'repo-item'
+    btn.textContent = repo.name
+    btn.onclick = () => cloneRepo(repo.name, repo.url)
+    items.appendChild(btn)
+  })
+}
+
+function shellEscape(str) {
+  return "'" + str.replace(/'/g, "'\\''") + "'"
+}
+
+function cloneRepo(name, url) {
+  if (!appState.ws || appState.ws.readyState !== WebSocket.OPEN) return
+  document.getElementById('clone-repo-list').style.display = 'none'
+  appState.ws.send(JSON.stringify({ type: 'input', data: `gh repo clone ${shellEscape(url)} && cd ${shellEscape(name)}\r` }))
+  document.getElementById('current-project-path').textContent = `~/Claude/${name}`
+}
+
+// ============================================
+// EVENT LISTENERS
+// ============================================
+
+function setupListeners() {
+  // Path selection
+  document.getElementById('path-new').addEventListener('click', () => showScreen('new'))
+  document.getElementById('path-existing').addEventListener('click', () => showScreen('existing'))
+
+  // Back buttons
+  document.getElementById('btn-back-new').addEventListener('click', () => showScreen('setup'))
+  document.getElementById('btn-back-existing').addEventListener('click', () => showScreen('setup'))
+
+  // New project: project name input
+  const nameInput = document.getElementById('project-name')
+  const descStep = document.getElementById('description-step')
+  const descInput = document.getElementById('intent-description')
+  const buildBtn = document.getElementById('btn-start-building')
+
+  nameInput.addEventListener('input', () => {
+    const raw = nameInput.value
+    const clean = raw.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9._-]/g, '')
+    if (raw !== clean) nameInput.value = clean
+    appState.projectName = clean
+
+    if (clean.length > 0) {
+      descStep.style.display = 'block'
+    } else {
+      descStep.style.display = 'none'
+    }
+    updateBuildButton()
+  })
+
+  descInput.addEventListener('input', updateBuildButton)
+
+  descInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !buildBtn.disabled) {
+      e.preventDefault()
+      startBuilding()
+    }
+  })
+
+  buildBtn.addEventListener('click', startBuilding)
+
+  // Example buttons fill the project name input
+  document.querySelectorAll('.example-btn').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      nameInput.value = btn.dataset.example
+      nameInput.dispatchEvent(new Event('input'))
+      descInput.focus()
+    })
+  })
+
+  // Existing project: progressive reveal (path → pain → outcome → button)
+  const pathInput = document.getElementById('existing-path')
+  const contextStep = document.getElementById('existing-context')
+  const painInput = document.getElementById('existing-pain')
+  const outcomeStep = document.getElementById('existing-outcome-step')
+  const outcomeInput = document.getElementById('existing-outcome')
+  const openBtn = document.getElementById('btn-open-existing')
+
+  pathInput.addEventListener('input', () => {
+    if (pathInput.value.trim()) {
+      contextStep.style.display = 'block'
+    } else {
+      contextStep.style.display = 'none'
+      outcomeStep.style.display = 'none'
+    }
+    updateOpenButton()
+  })
+
+  painInput.addEventListener('input', () => {
+    if (painInput.value.trim()) {
+      outcomeStep.style.display = 'block'
+    } else {
+      outcomeStep.style.display = 'none'
+    }
+    updateOpenButton()
+  })
+
+  outcomeInput.addEventListener('input', updateOpenButton)
+
+  outcomeInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !openBtn.disabled) {
+      e.preventDefault()
+      openExisting()
+    }
+  })
+
+  openBtn.addEventListener('click', openExisting)
+
+  function updateOpenButton() {
+    const hasPath = pathInput.value.trim().length > 0
+    const hasPain = painInput.value.trim().length > 0
+    const hasOutcome = outcomeInput.value.trim().length > 0
+    openBtn.disabled = !(hasPath && hasPain && hasOutcome)
+  }
+
+  // Screen 3: Project management
+  document.getElementById('btn-clone-github').addEventListener('click', showRepoList)
+  document.getElementById('btn-close-repos').addEventListener('click', () => {
+    document.getElementById('clone-repo-list').style.display = 'none'
+  })
+  document.getElementById('btn-new-project').addEventListener('click', () => {
+    const name = prompt('Project folder name:')
+    if (!name) return
+    if (!/^[a-zA-Z0-9._-]+$/.test(name)) {
+      alert('Folder name can only contain letters, numbers, hyphens, dots, and underscores.')
+      return
+    }
+    if (appState.ws && appState.ws.readyState === WebSocket.OPEN) {
+      appState.ws.send(JSON.stringify({ type: 'input', data: `mkdir -p ${shellEscape(name)} && cd ${shellEscape(name)}\r` }))
+    }
+    document.getElementById('current-project-path').textContent = `~/Claude/${name}`
+  })
+
+  // Screen 3: Panel toggles
+  document.getElementById('btn-toggle-sidebar').addEventListener('click', toggleSidebar)
+  document.getElementById('sidebar-reopen').addEventListener('click', toggleSidebar)
+  document.getElementById('btn-toggle-preview').addEventListener('click', togglePreview)
+  document.getElementById('btn-close-preview').addEventListener('click', togglePreview)
+  document.getElementById('btn-refresh-preview').addEventListener('click', () => {
+    const iframe = document.getElementById('preview-iframe')
+    iframe.src = iframe.src
+  })
+
+  // Prompt buttons — click to type into terminal
+  document.addEventListener('click', (e) => {
+    const promptBtn = e.target.closest('.prompt-btn')
+    if (!promptBtn) return
+
+    const text = promptBtn.dataset.prompt
+    if (!text || !appState.ws || appState.ws.readyState !== WebSocket.OPEN) return
+
+    const autoExec = promptBtn.dataset.auto === 'true'
+    appState.ws.send(JSON.stringify({ type: 'input', data: autoExec ? text + '\r' : text }))
+
+    promptBtn.classList.add('prompt-sent')
+    setTimeout(() => promptBtn.classList.remove('prompt-sent'), 600)
+  })
+}
+
+// ============================================
+// HELPERS
+// ============================================
+
+async function fetchJson(url, options = {}) {
+  try {
+    const res = await fetch(url, options)
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    return res.json()
+  } catch (err) {
+    console.error(`Failed to fetch ${url}:`, err)
+    return null
+  }
+}