claudeboard 1.3.0 → 1.5.0

package/agents/claude-api.js

@@ -4,7 +4,7 @@
  */
 
 const MODEL = "claude-sonnet-4-20250514";
-const MAX_TOKENS = 8096;
+const MAX_TOKENS = 16000; // Increased — large codegen responses need more tokens
 
 function getHeaders() {
   const key = process.env.ANTHROPIC_API_KEY;
@@ -59,18 +59,35 @@ export async function callClaude(systemPrompt, userMessage, options = {}) {
 
 /**
  * Call Claude API expecting JSON response
- * Returns parsed object or throws
+ * Robust: tries 3 extraction strategies + auto-repair for truncated responses
  */
 export async function callClaudeJSON(systemPrompt, userMessage, options = {}) {
   const sys = systemPrompt + "\n\nYou MUST respond with valid JSON only. No markdown, no explanation, no backticks. Pure JSON.";
-  const { text } = await callClaude(sys, userMessage, options);
+  const { text } = await callClaude(sys, userMessage, { ...options, maxTokens: options.maxTokens || MAX_TOKENS });
 
+  // Try 1: direct parse after stripping backticks
   try {
-    const clean = text.replace(/```json|```/g, "").trim();
+    const clean = text.replace(/```json\n?|```/g, "").trim();
     return JSON.parse(clean);
-  } catch (err) {
-    throw new Error(`Failed to parse JSON from Claude: ${text.slice(0, 200)}`);
-  }
+  } catch {}
+
+  // Try 2: extract first { } or [ ] block
+  try {
+    const match = text.match(/(\{[\s\S]*\}|\[[\s\S]*\])/);
+    if (match) return JSON.parse(match[1]);
+  } catch {}
+
+  // Try 3: ask Claude to repair truncated/broken JSON
+  try {
+    const repair = await callClaude(
+      "You are a JSON repair tool. Fix this broken or truncated JSON. Return ONLY valid JSON, nothing else, no backticks.",
+      `Broken JSON:\n${text.slice(0, 8000)}`
+    );
+    const clean = repair.text.replace(/```json\n?|```/g, "").trim();
+    return JSON.parse(clean);
+  } catch {}
+
+  throw new Error(`Failed to parse JSON after 3 attempts. Preview: ${text.slice(0, 300)}`);
 }
 
 /**

package/bin/cli.js

@@ -62,6 +62,7 @@ program
       supabaseUrl: answers.supabaseUrl,
       supabaseKey: answers.supabaseKey,
       anthropicKey: answers.anthropicKey,
+      projectDir: process.cwd(),
       createdAt: new Date().toISOString(),
     };
 
@@ -106,6 +107,7 @@ program
         ANTHROPIC_API_KEY: config.anthropicKey || process.env.ANTHROPIC_API_KEY || "",
         PORT: String(port),
         PROJECT_NAME: config.projectName,
+        PROJECT_DIR: config.projectDir || process.cwd(),
       },
       stdio: "pipe",
     });

package/dashboard/index.html

@@ -640,6 +640,188 @@
   }
   .btn-create:hover { opacity: 0.85; }
 
+  /* ── EXPO PANEL ── */
+  .expo-panel {
+    position: fixed;
+    bottom: 0; left: 0; right: 320px;
+    background: var(--bg);
+    border-top: 1px solid var(--border);
+    z-index: 20;
+    transition: transform 0.25s ease;
+    transform: translateY(100%);
+  }
+  .expo-panel.open { transform: translateY(0); }
+
+  .expo-panel-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--border);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .expo-panel-title {
+    font-family: var(--mono);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text);
+  }
+
+  .expo-logs {
+    height: 160px;
+    overflow-y: auto;
+    padding: 10px 16px;
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+
+  .expo-logs::-webkit-scrollbar { width: 3px; }
+  .expo-logs::-webkit-scrollbar-thumb { background: var(--border); }
+
+  .expo-qr-wrap {
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    border-top: 1px solid var(--border);
+  }
+
+  .expo-url {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--accent);
+    word-break: break-all;
+  }
+
+  .expo-status-badge {
+    padding: 3px 10px;
+    border-radius: 12px;
+    font-family: var(--mono);
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  .expo-status-badge.stopped  { background: rgba(107,112,148,0.2); color: var(--muted); }
+  .expo-status-badge.installing { background: rgba(251,191,36,0.15); color: var(--yellow); }
+  .expo-status-badge.starting { background: rgba(251,191,36,0.15); color: var(--yellow); }
+  .expo-status-badge.running  { background: rgba(74,222,128,0.15); color: var(--green); }
+  .expo-status-badge.error    { background: rgba(248,113,113,0.15); color: var(--red); }
+
+  /* ── TERMINAL PANEL ── */
+  .term-panel {
+    position: fixed;
+    bottom: 0; left: 0; right: 320px;
+    height: 320px;
+    background: #0d0f1a;
+    border-top: 2px solid var(--border);
+    z-index: 19;
+    display: flex;
+    flex-direction: column;
+    transform: translateY(100%);
+    transition: transform 0.25s ease;
+  }
+
+  .term-panel.open { transform: translateY(0); }
+
+  .term-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 14px;
+    background: #111320;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+
+  .term-title {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  #terminal {
+    flex: 1;
+    overflow: hidden;
+    padding: 4px;
+  }
+
+  .btn-term-close {
+    margin-left: auto;
+    background: none;
+    border: none;
+    color: var(--muted);
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    padding: 2px 6px;
+  }
+  .btn-term-close:hover { color: var(--text); }
+
+  /* ── TOOLBAR BOTTOM ── */
+  .bottom-toolbar {
+    position: fixed;
+    bottom: 0; left: 0; right: 320px;
+    height: 40px;
+    background: var(--bg);
+    border-top: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    gap: 8px;
+    z-index: 15;
+  }
+
+  .toolbar-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 12px;
+    border-radius: 5px;
+    font-family: var(--mono);
+    font-size: 11px;
+    font-weight: 600;
+    cursor: pointer;
+    border: 1px solid var(--border);
+    background: rgba(255,255,255,0.04);
+    color: var(--muted);
+    transition: all 0.15s;
+  }
+
+  .toolbar-btn:hover { color: var(--text); border-color: var(--dim); background: rgba(255,255,255,0.08); }
+  .toolbar-btn.active { color: var(--accent); border-color: rgba(108,138,255,0.4); background: rgba(108,138,255,0.08); }
+  .toolbar-btn.expo-running { color: var(--green); border-color: rgba(74,222,128,0.4); background: rgba(74,222,128,0.08); }
+
+  /* adjust board to not overlap toolbar */
+  .board-wrap { padding-bottom: 40px; }
+
+  /* ── RETRY BUTTON on failed cards ── */
+  .card-retry-btn {
+    margin-top: 10px;
+    width: 100%;
+    padding: 6px;
+    background: rgba(248,113,113,0.1);
+    border: 1px solid rgba(248,113,113,0.25);
+    border-radius: 6px;
+    color: var(--red);
+    font-size: 11px;
+    font-weight: 600;
+    font-family: var(--mono);
+    cursor: pointer;
+    transition: all 0.15s;
+    text-align: center;
+  }
+  .card-retry-btn:hover {
+    background: rgba(248,113,113,0.2);
+    border-color: rgba(248,113,113,0.5);
+  }
+
   /* Empty column state */
   .col-empty {
     text-align: center;
@@ -792,6 +974,112 @@
   </div>
 </div>
 
+<!-- RETRY / EDIT MODAL -->
+<div class="overlay" id="retryModal" onclick="if(event.target===this)closeRetry()">
+  <div class="modal">
+    <div class="modal-title" style="display:flex;align-items:center;gap:10px">
+      <span style="color:var(--red)">✕</span>
+      <span>Edit & Retry Failed Task</span>
+    </div>
+
+    <div style="background:rgba(248,113,113,0.06);border:1px solid rgba(248,113,113,0.2);border-radius:8px;padding:10px 12px;margin-bottom:16px;font-family:var(--mono);font-size:11px;color:var(--red)" id="retryErrorLog">
+      No error log found.
+    </div>
+
+    <div class="field">
+      <label>Title</label>
+      <input type="text" id="r-title">
+    </div>
+    <div class="field">
+      <label>Description</label>
+      <textarea id="r-desc" rows="4"></textarea>
+    </div>
+    <div class="field">
+      <label style="color:var(--accent)">💬 Note for the agent (hint to fix the issue)</label>
+      <textarea id="r-note" rows="3" placeholder="e.g. Use tailwind v3 not v4. The error is about missing module X. Try a simpler approach without..."></textarea>
+    </div>
+    <div class="modal-grid">
+      <div class="field">
+        <label>Priority</label>
+        <select id="r-priority">
+          <option value="high">High</option>
+          <option value="medium">Medium</option>
+          <option value="low">Low</option>
+        </select>
+      </div>
+      <div class="field">
+        <label>Type</label>
+        <select id="r-type">
+          <option value="feature">Feature</option>
+          <option value="bug">Bug</option>
+          <option value="config">Config</option>
+          <option value="refactor">Refactor</option>
+          <option value="test">Test</option>
+        </select>
+      </div>
+    </div>
+    <div class="modal-actions">
+      <button class="btn-cancel" onclick="closeRetry()">Cancel</button>
+      <button class="btn-create" style="background:var(--red)" onclick="submitRetry()">↩ Retry Task</button>
+    </div>
+  </div>
+</div>
+
+<!-- BOTTOM TOOLBAR -->
+<div class="bottom-toolbar">
+  <button class="toolbar-btn" id="expoBtn" onclick="toggleExpoPanel()">
+    📱 Expo
+    <span class="expo-status-badge stopped" id="expoBadge">stopped</span>
+  </button>
+  <button class="toolbar-btn" id="termBtn" onclick="toggleTerminal()">
+    ⌨️ Terminal
+  </button>
+</div>
+
+<!-- EXPO PANEL -->
+<div class="expo-panel" id="expoPanel">
+  <div class="expo-panel-header" onclick="toggleExpoPanel()">
+    <span class="expo-panel-title">📱 Expo Go</span>
+    <span class="expo-status-badge stopped" id="expoPanelBadge">stopped</span>
+    <div style="margin-left:auto;display:flex;gap:8px">
+      <button class="btn btn-primary" id="expoStartBtn" onclick="event.stopPropagation();startExpo()" style="font-size:11px;padding:4px 12px">Start Expo</button>
+      <button class="btn btn-ghost" id="expoStopBtn" onclick="event.stopPropagation();stopExpo()" style="font-size:11px;padding:4px 12px;display:none">Stop</button>
+    </div>
+  </div>
+  <div style="display:flex;gap:0">
+    <div style="flex:1">
+      <div class="expo-logs" id="expoLogs">Expo not started. Click "Start Expo" to install dependencies and launch with tunnel.</div>
+      <div class="expo-qr-wrap" id="expoUrlWrap" style="display:none">
+        <div>
+          <div style="font-family:var(--mono);font-size:10px;color:var(--muted);margin-bottom:4px">SCAN WITH EXPO GO</div>
+          <div class="expo-url" id="expoUrl">—</div>
+        </div>
+      </div>
+    </div>
+    <div id="qrWrap" style="padding:12px;display:none">
+      <canvas id="qrCanvas" width="120" height="120"></canvas>
+    </div>
+  </div>
+</div>
+
+<!-- TERMINAL PANEL -->
+<div class="term-panel" id="termPanel">
+  <div class="term-header">
+    <span style="color:var(--green);font-size:14px">⬤</span>
+    <span class="term-title">Terminal — <span style="color:var(--accent)" id="termDir">project</span></span>
+    <button class="btn-term-close" onclick="toggleTerminal()">✕</button>
+  </div>
+  <div id="terminal"></div>
+</div>
+
+<!-- xterm.js -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/5.3.0/xterm.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/5.3.0/xterm.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/5.3.0/addon-fit.min.js"></script>
+
+<!-- QR code via qrcodejs -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+
 <script>
 // ── STATE ────────────────────────────────────────────────────────────────────
 let board = { epics: [], logs: [] };
@@ -815,6 +1103,12 @@ function connectWS() {
       board.logs.unshift(data);
       if (activeTab === 'activity') renderLogs();
     }
+    if (event === 'expo_status') {
+      setExpoStatus(data.status, data.url);
+    }
+    if (event === 'expo_log') {
+      appendExpoLog(data.message);
+    }
   };
 }
 
@@ -903,6 +1197,7 @@ function renderKanban() {
 function cardHTML(task) {
   const icons = { todo: '', in_progress: '', done: '✓', error: '✕', blocked: '—' };
   const shortEpic = (task.epicName || '').split(' ').slice(0,2).join(' ');
+  const isError = task.status === 'error';
   return `
     <div class="card fade-in" draggable="true" data-id="${task.id}" data-status="${task.status}">
       <div class="card-top">
@@ -915,6 +1210,7 @@ function cardHTML(task) {
         <span class="tag ${task.type}">${task.type}</span>
         ${shortEpic ? `<span class="card-epic">${esc(shortEpic)}</span>` : ''}
       </div>
+      ${isError ? `<button class="card-retry-btn" onclick="event.stopPropagation();openRetry('${task.id}')">↩ Edit & Retry</button>` : ''}
     </div>`;
 }
 
@@ -1057,6 +1353,230 @@ async function submitTask() {
   loadBoard();
 }
 
+// ── RETRY MODAL ───────────────────────────────────────────────────────────────
+let retryTaskId = null;
+
+async function openRetry(id) {
+  retryTaskId = id;
+  const task = allTasks().find(t => t.id === id);
+  if (!task) return;
+
+  // Fill form with current task data
+  document.getElementById('r-title').value = task.title;
+  document.getElementById('r-desc').value = task.description || '';
+  document.getElementById('r-note').value = '';
+  document.getElementById('r-priority').value = task.priority || 'medium';
+  document.getElementById('r-type').value = task.type || 'feature';
+
+  // Load last error log
+  const res = await fetch(`/api/tasks/${id}/logs`);
+  const { logs } = await res.json();
+  const errorLogs = logs.filter(l => l.type === 'error');
+  const lastError = errorLogs[errorLogs.length - 1];
+  document.getElementById('retryErrorLog').textContent =
+    lastError ? lastError.message : 'No error log found.';
+
+  document.getElementById('retryModal').className = 'overlay open';
+}
+
+function closeRetry() {
+  document.getElementById('retryModal').className = 'overlay';
+  retryTaskId = null;
+}
+
+async function submitRetry() {
+  if (!retryTaskId) return;
+
+  const title = document.getElementById('r-title').value.trim();
+  const desc  = document.getElementById('r-desc').value.trim();
+  const note  = document.getElementById('r-note').value.trim();
+  const priority = document.getElementById('r-priority').value;
+  const type     = document.getElementById('r-type').value;
+
+  if (!title) return;
+
+  // Build updated description — append agent note if provided
+  const updatedDesc = note
+    ? `${desc}\n\n⚠️ AGENT NOTE (from human review): ${note}`
+    : desc;
+
+  // Update task fields + reset status to todo
+  await fetch(`/api/tasks/${retryTaskId}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      title,
+      description: updatedDesc,
+      priority,
+      type,
+      status: 'todo',
+      started_at: null,
+    }),
+  });
+
+  // Log the retry
+  await fetch(`/api/tasks/${retryTaskId}/log`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      message: note
+        ? `↩ Retried by human with note: "${note}"`
+        : '↩ Retried by human — reset to todo',
+    }),
+  });
+
+  closeRetry();
+  loadBoard();
+}
+
+// ── EXPO ─────────────────────────────────────────────────────────────────────
+let expoOpen = false;
+let termOpen = false;
+let term = null;
+let termSocket = null;
+let termFit = null;
+let qrInstance = null;
+
+function toggleExpoPanel() {
+  expoOpen = !expoOpen;
+  document.getElementById('expoPanel').className = 'expo-panel' + (expoOpen ? ' open' : '');
+  document.getElementById('expoBtn').className = 'toolbar-btn' + (expoOpen ? ' active' : '');
+  if (termOpen) { termOpen = false; document.getElementById('termPanel').className = 'term-panel'; }
+}
+
+async function startExpo() {
+  document.getElementById('expoStartBtn').style.display = 'none';
+  document.getElementById('expoStopBtn').style.display = 'inline-flex';
+  appendExpoLog('▶ Starting Expo...');
+  await fetch('/api/expo/start', { method: 'POST' });
+}
+
+async function stopExpo() {
+  await fetch('/api/expo/stop', { method: 'POST' });
+  document.getElementById('expoStartBtn').style.display = 'inline-flex';
+  document.getElementById('expoStopBtn').style.display = 'none';
+  document.getElementById('expoUrlWrap').style.display = 'none';
+  document.getElementById('qrWrap').style.display = 'none';
+  appendExpoLog('■ Expo stopped.');
+}
+
+function appendExpoLog(msg) {
+  const el = document.getElementById('expoLogs');
+  const line = document.createElement('div');
+  line.textContent = msg;
+  el.appendChild(line);
+  el.scrollTop = el.scrollHeight;
+}
+
+function setExpoStatus(status, url) {
+  const labels = { stopped:'stopped', installing:'installing...', starting:'starting...', running:'running', error:'error' };
+  const label = labels[status] || status;
+
+  ['expoBadge','expoPanelBadge'].forEach(id => {
+    const el = document.getElementById(id);
+    el.className = `expo-status-badge ${status}`;
+    el.textContent = label;
+  });
+
+  document.getElementById('expoBtn').className = 'toolbar-btn' + (status === 'running' ? ' expo-running' : (expoOpen ? ' active' : ''));
+
+  if (status === 'running' && url) {
+    document.getElementById('expoUrl').textContent = url;
+    document.getElementById('expoUrlWrap').style.display = 'flex';
+
+    // Generate QR code
+    document.getElementById('qrWrap').style.display = 'block';
+    const canvas = document.getElementById('qrCanvas');
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, 120, 120);
+
+    if (window.QRCode) {
+      document.getElementById('qrCanvas').innerHTML = '';
+      try {
+        new QRCode(document.getElementById('qrCanvas'), {
+          text: url,
+          width: 120, height: 120,
+          colorDark: '#e2e4f0',
+          colorLight: '#0d0f1a',
+        });
+      } catch {}
+    }
+  }
+
+  if (status === 'stopped' || status === 'error') {
+    document.getElementById('expoStartBtn').style.display = 'inline-flex';
+    document.getElementById('expoStopBtn').style.display = 'none';
+  }
+}
+
+// ── TERMINAL ─────────────────────────────────────────────────────────────────
+function toggleTerminal() {
+  termOpen = !termOpen;
+  document.getElementById('termPanel').className = 'term-panel' + (termOpen ? ' open' : '');
+  document.getElementById('termBtn').className = 'toolbar-btn' + (termOpen ? ' active' : '');
+
+  if (expoOpen) { expoOpen = false; document.getElementById('expoPanel').className = 'expo-panel'; }
+
+  if (termOpen && !term) initTerminal();
+  if (termOpen && termFit) setTimeout(() => termFit.fit(), 100);
+}
+
+function initTerminal() {
+  term = new Terminal({
+    theme: {
+      background: '#0d0f1a',
+      foreground: '#e2e4f0',
+      cursor: '#6c8aff',
+      cursorAccent: '#0d0f1a',
+      selection: 'rgba(108,138,255,0.3)',
+      black: '#1e2130', red: '#f87171', green: '#4ade80', yellow: '#fbbf24',
+      blue: '#6c8aff', magenta: '#c084fc', cyan: '#22d3ee', white: '#e2e4f0',
+      brightBlack: '#454868', brightRed: '#fca5a5', brightGreen: '#86efac',
+      brightYellow: '#fde68a', brightBlue: '#93c5fd', brightMagenta: '#d8b4fe',
+      brightCyan: '#67e8f9', brightWhite: '#f1f5f9',
+    },
+    fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+    fontSize: 13,
+    lineHeight: 1.4,
+    cursorBlink: true,
+    scrollback: 2000,
+  });
+
+  const fitAddon = new FitAddon.FitAddon();
+  termFit = fitAddon;
+  term.loadAddon(fitAddon);
+  term.open(document.getElementById('terminal'));
+  fitAddon.fit();
+
+  // Connect WebSocket
+  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  termSocket = new WebSocket(`${proto}//${location.host}/terminal`);
+
+  termSocket.onopen = () => {
+    term.write('\x1b[32m[ClaudeBoard Terminal]\x1b[0m Connected\r\n\r\n');
+  };
+
+  termSocket.onmessage = (e) => {
+    const msg = JSON.parse(e.data);
+    if (msg.type === 'output') term.write(msg.data);
+    if (msg.type === 'exit') term.write('\r\n\x1b[31m[process exited]\x1b[0m\r\n');
+  };
+
+  termSocket.onclose = () => term.write('\r\n\x1b[33m[disconnected]\x1b[0m\r\n');
+
+  term.onData((data) => {
+    if (termSocket?.readyState === 1) {
+      termSocket.send(JSON.stringify({ type: 'input', data }));
+    }
+  });
+
+  // Resize on window resize
+  window.addEventListener('resize', () => { if (termFit) termFit.fit(); });
+  term.onResize(({ cols, rows }) => {
+    if (termSocket?.readyState === 1) termSocket.send(JSON.stringify({ type: 'resize', cols, rows }));
+  });
+}
+
 // ── UTILS ─────────────────────────────────────────────────────────────────────
 function esc(s) {
   if (!s) return '';
@@ -1064,7 +1584,7 @@ function esc(s) {
 }
 
 document.addEventListener('keydown', e => {
-  if (e.key === 'Escape') closeModal();
+  if (e.key === 'Escape') { closeModal(); closeRetry(); }
   if ((e.metaKey || e.ctrlKey) && e.key === 'n') { e.preventDefault(); openModal(); }
 });
 
@@ -1072,6 +1592,9 @@ document.addEventListener('keydown', e => {
 loadBoard();
 setInterval(loadBoard, 8000);
 connectWS();
+
+// Load expo status
+fetch('/api/expo/status').then(r => r.json()).then(d => setExpoStatus(d.status, d.url));
 </script>
 </body>
 </html>

package/dashboard/server.js

@@ -6,192 +6,310 @@ import { createClient } from "@supabase/supabase-js";
 import path from "path";
 import { fileURLToPath } from "url";
 import fs from "fs";
+import { spawn } from "child_process";
+import { createRequire } from "module";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
 
 const app = express();
 const server = createServer(app);
-const wss = new WebSocketServer({ server });
+
+// Two WS servers: one for board events, one for terminal
+const boardWss = new WebSocketServer({ noServer: true });
+const termWss  = new WebSocketServer({ noServer: true });
+
+// Route upgrade requests
+server.on("upgrade", (req, socket, head) => {
+  if (req.url === "/terminal") {
+    termWss.handleUpgrade(req, socket, head, (ws) => termWss.emit("connection", ws, req));
+  } else {
+    boardWss.handleUpgrade(req, socket, head, (ws) => boardWss.emit("connection", ws, req));
+  }
+});
 
 app.use(cors());
 app.use(express.json());
 
-const PORT = process.env.PORT || 3131;
-const PROJECT = process.env.PROJECT_NAME || "default";
+const PORT        = process.env.PORT         || 3131;
+const PROJECT     = process.env.PROJECT_NAME || "default";
+const PROJECT_DIR = process.env.PROJECT_DIR  || process.cwd();
+const SUPABASE_URL = process.env.SUPABASE_URL;
+const SUPABASE_KEY = process.env.SUPABASE_KEY;
 
-const supabase = createClient(
-  process.env.SUPABASE_URL,
-  process.env.SUPABASE_KEY
-);
+const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
 
-// Broadcast to all WS clients
+// ── STATE ─────────────────────────────────────────────────────────────────────
+let expoProcess  = null;
+let expoStatus   = "stopped"; // stopped | installing | starting | running | error
+let expoQR       = null;
+let expoUrl      = null;
+
+// ── BOARD BROADCAST ───────────────────────────────────────────────────────────
 function broadcast(event, data) {
   const msg = JSON.stringify({ event, data, ts: Date.now() });
-  wss.clients.forEach((client) => {
-    if (client.readyState === 1) client.send(msg);
-  });
+  boardWss.clients.forEach((c) => { if (c.readyState === 1) c.send(msg); });
 }
 
-// Subscribe to Supabase realtime
+function broadcastExpoStatus() {
+  broadcast("expo_status", { status: expoStatus, qr: expoQR, url: expoUrl });
+}
+
+// ── SUPABASE REALTIME ─────────────────────────────────────────────────────────
 supabase
   .channel("cb_changes")
-  .on("postgres_changes", { event: "*", schema: "public", table: "cb_tasks" }, (payload) => {
-    broadcast("task_update", payload);
-  })
-  .on("postgres_changes", { event: "*", schema: "public", table: "cb_logs" }, (payload) => {
-    broadcast("log", payload.new);
-  })
+  .on("postgres_changes", { event: "*", schema: "public", table: "cb_tasks" }, (p) => broadcast("task_update", p))
+  .on("postgres_changes", { event: "*", schema: "public", table: "cb_logs"  }, (p) => broadcast("log", p.new))
   .subscribe();
 
-// ─── API ROUTES ───────────────────────────────────────────────────────────────
+// ── TERMINAL (xterm.js via WebSocket + node-pty) ──────────────────────────────
+termWss.on("connection", (ws) => {
+  let pty = null;
+
+  try {
+    // Try node-pty for full PTY support
+    const nodePty = require("node-pty");
+    pty = nodePty.spawn(process.env.SHELL || "bash", [], {
+      name: "xterm-256color",
+      cols: 120,
+      rows: 40,
+      cwd: PROJECT_DIR,
+      env: {
+        ...process.env,
+        SUPABASE_URL,
+        SUPABASE_ACCESS_TOKEN: process.env.SUPABASE_ACCESS_TOKEN || "",
+        TERM: "xterm-256color",
+      },
+    });
+
+    pty.onData((data) => { if (ws.readyState === 1) ws.send(JSON.stringify({ type: "output", data })); });
+    pty.onExit(() => { if (ws.readyState === 1) ws.send(JSON.stringify({ type: "exit" })); });
+
+    ws.on("message", (raw) => {
+      try {
+        const msg = JSON.parse(raw);
+        if (msg.type === "input") pty.write(msg.data);
+        if (msg.type === "resize") pty.resize(msg.cols, msg.rows);
+      } catch {}
+    });
+
+    ws.on("close", () => { try { pty.kill(); } catch {} });
+
+  } catch {
+    // Fallback: simple shell without PTY (no colors but functional)
+    const shell = spawn(process.env.SHELL || "bash", [], {
+      cwd: PROJECT_DIR,
+      env: { ...process.env, SUPABASE_URL, TERM: "dumb" },
+    });
+
+    shell.stdout.on("data", (d) => ws.send(JSON.stringify({ type: "output", data: d.toString() })));
+    shell.stderr.on("data", (d) => ws.send(JSON.stringify({ type: "output", data: d.toString() })));
+    shell.on("close", () => ws.send(JSON.stringify({ type: "exit" })));
+
+    ws.on("message", (raw) => {
+      try {
+        const msg = JSON.parse(raw);
+        if (msg.type === "input") shell.stdin.write(msg.data);
+      } catch {}
+    });
+
+    ws.on("close", () => shell.kill());
+
+    // Send welcome message
+    ws.send(JSON.stringify({
+      type: "output",
+      data: `\r\n\x1b[33m[ClaudeBoard Terminal]\x1b[0m — Project: ${PROJECT_DIR}\r\n` +
+            `\x1b[2mTip: Run 'npx supabase ...' for Supabase CLI commands\x1b[0m\r\n\r\n`,
+    }));
+  }
+});
+
+// ── EXPO MANAGEMENT ───────────────────────────────────────────────────────────
+
+// GET expo status
+app.get("/api/expo/status", (req, res) => {
+  res.json({ status: expoStatus, qr: expoQR, url: expoUrl });
+});
+
+// POST expo/start — install deps + start Expo tunnel
+app.post("/api/expo/start", async (req, res) => {
+  if (expoProcess) return res.json({ ok: false, error: "Expo already running" });
+
+  res.json({ ok: true, message: "Starting Expo..." });
+  _startExpo(PROJECT_DIR);
+});
+
+// POST expo/stop
+app.post("/api/expo/stop", (req, res) => {
+  if (expoProcess) {
+    try { expoProcess.kill("SIGTERM"); } catch {}
+    expoProcess = null;
+  }
+  expoStatus = "stopped";
+  expoQR = null;
+  expoUrl = null;
+  broadcastExpoStatus();
+  res.json({ ok: true });
+});
+
+async function _startExpo(projectDir) {
+  // Step 1: npm install
+  expoStatus = "installing";
+  broadcastExpoStatus();
+  broadcast("expo_log", { message: "Installing dependencies..." });
+
+  await new Promise((resolve) => {
+    const install = spawn("npm", ["install"], { cwd: projectDir, stdio: "pipe" });
+    install.stdout.on("data", (d) => broadcast("expo_log", { message: d.toString().trim() }));
+    install.stderr.on("data", (d) => broadcast("expo_log", { message: d.toString().trim() }));
+    install.on("close", resolve);
+  });
+
+  broadcast("expo_log", { message: "Dependencies installed. Starting Expo..." });
+
+  // Step 2: expo start with tunnel
+  expoStatus = "starting";
+  broadcastExpoStatus();
+
+  const expo = spawn("npx", ["expo", "start", "--tunnel"], {
+    cwd: projectDir,
+    env: { ...process.env, CI: "false", EXPO_NO_DOTENV: "0" },
+    stdio: "pipe",
+  });
+
+  expoProcess = expo;
+
+  expo.stdout.on("data", (d) => {
+    const text = d.toString();
+    broadcast("expo_log", { message: text.trim() });
+
+    // Detect QR code URL (exp:// or https://expo.dev)
+    const expUrl = text.match(/exp:\/\/[^\s]+/);
+    if (expUrl) {
+      expoUrl = expUrl[0];
+      expoStatus = "running";
+      broadcastExpoStatus();
+    }
+
+    // Detect tunnel URL
+    const tunnel = text.match(/https:\/\/[a-z0-9-]+\.exp\.direct[^\s]*/);
+    if (tunnel) {
+      expoUrl = tunnel[0];
+      expoStatus = "running";
+      broadcastExpoStatus();
+    }
+
+    // Detect QR data from expo output
+    if (text.includes("QR")) {
+      broadcast("expo_log", { message: "📱 QR code ready — scan with Expo Go" });
+    }
+  });
+
+  expo.stderr.on("data", (d) => {
+    const text = d.toString().trim();
+    if (text) broadcast("expo_log", { message: text });
+  });
+
+  expo.on("close", (code) => {
+    expoProcess = null;
+    expoStatus = code === 0 ? "stopped" : "error";
+    expoQR = null;
+    broadcastExpoStatus();
+    broadcast("expo_log", { message: `Expo process exited (code ${code})` });
+  });
+}
+
+// ── SUPABASE QUERY API ────────────────────────────────────────────────────────
+app.post("/api/supabase/query", async (req, res) => {
+  const { sql } = req.body;
+  if (!sql) return res.status(400).json({ error: "No SQL provided" });
+
+  try {
+    const { data, error } = await supabase.rpc("execute_sql", { query: sql });
+    if (error) return res.status(400).json({ error: error.message });
+    res.json({ data });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ── BOARD API ROUTES (unchanged) ──────────────────────────────────────────────
 
-// GET all tasks grouped by epic
 app.get("/api/board", async (req, res) => {
   const { data: epics } = await supabase
-    .from("cb_epics")
-    .select("*, cb_tasks(*)")
-    .eq("project", PROJECT)
-    .order("created_at");
-
+    .from("cb_epics").select("*, cb_tasks(*)").eq("project", PROJECT).order("created_at");
   const { data: logs } = await supabase
-    .from("cb_logs")
-    .select("*")
-    .eq("project", PROJECT)
-    .order("created_at", { ascending: false })
-    .limit(50);
-
+    .from("cb_logs").select("*").eq("project", PROJECT)
+    .order("created_at", { ascending: false }).limit(50);
   res.json({ epics: epics || [], logs: logs || [], project: PROJECT });
 });
 
-// GET next pending task
 app.get("/api/tasks/next", async (req, res) => {
-  const { data } = await supabase
-    .from("cb_tasks")
-    .select("*")
-    .eq("project", PROJECT)
-    .eq("status", "todo")
-    .order("priority_order", { ascending: true })
-    .limit(1)
-    .single();
-
+  const { data } = await supabase.from("cb_tasks").select("*")
+    .eq("project", PROJECT).eq("status", "todo")
+    .order("priority_order", { ascending: true }).limit(1).single();
   if (!data) return res.json({ task: null, message: "All tasks complete! 🎉" });
   res.json({ task: data });
 });
 
-// POST start task
 app.post("/api/tasks/:id/start", async (req, res) => {
   const { id } = req.params;
-  const { log } = req.body;
-
-  await supabase
-    .from("cb_tasks")
-    .update({ status: "in_progress", started_at: new Date().toISOString() })
-    .eq("id", id);
-
-  if (log) await addLog(id, log, "start");
+  await supabase.from("cb_tasks").update({ status: "in_progress", started_at: new Date().toISOString() }).eq("id", id);
+  if (req.body.log) await addLog(id, req.body.log, "start");
   broadcast("task_started", { id });
   res.json({ ok: true });
 });
 
-// POST log progress
 app.post("/api/tasks/:id/log", async (req, res) => {
-  const { id } = req.params;
-  const { message } = req.body;
-  await addLog(id, message, "progress");
+  await addLog(req.params.id, req.body.message, "progress");
   res.json({ ok: true });
 });
 
-// POST complete task
 app.post("/api/tasks/:id/complete", async (req, res) => {
   const { id } = req.params;
-  const { log } = req.body;
-
-  await supabase
-    .from("cb_tasks")
-    .update({ status: "done", completed_at: new Date().toISOString() })
-    .eq("id", id);
-
-  if (log) await addLog(id, log, "complete");
+  await supabase.from("cb_tasks").update({ status: "done", completed_at: new Date().toISOString() }).eq("id", id);
+  if (req.body.log) await addLog(id, req.body.log, "complete");
   broadcast("task_complete", { id });
   res.json({ ok: true });
 });
 
-// POST fail task
 app.post("/api/tasks/:id/fail", async (req, res) => {
   const { id } = req.params;
-  const { log } = req.body;
-
-  await supabase
-    .from("cb_tasks")
-    .update({ status: "error" })
-    .eq("id", id);
-
-  if (log) await addLog(id, log, "error");
+  await supabase.from("cb_tasks").update({ status: "error" }).eq("id", id);
+  if (req.body.log) await addLog(id, req.body.log, "error");
   broadcast("task_failed", { id });
   res.json({ ok: true });
 });
 
-// POST add new task manually (from dashboard or agent)
 app.post("/api/tasks", async (req, res) => {
   const { title, description, priority, type, epic_id } = req.body;
-
   const priorityOrder = { high: 1, medium: 2, low: 3 };
-
-  const { data, error } = await supabase
-    .from("cb_tasks")
-    .insert({
-      project: PROJECT,
-      epic_id: epic_id || null,
-      title,
-      description,
-      priority: priority || "medium",
-      priority_order: priorityOrder[priority] || 2,
-      type: type || "feature",
-      status: "todo",
-    })
-    .select()
-    .single();
-
+  const { data, error } = await supabase.from("cb_tasks").insert({
+    project: PROJECT, epic_id: epic_id || null, title, description,
+    priority: priority || "medium", priority_order: priorityOrder[priority] || 2,
+    type: type || "feature", status: "todo",
+  }).select().single();
   if (error) return res.status(400).json({ error: error.message });
   broadcast("task_added", data);
   res.json({ task: data });
 });
 
-// PATCH update task status manually
 app.patch("/api/tasks/:id", async (req, res) => {
-  const { id } = req.params;
-  const updates = req.body;
-
-  await supabase.from("cb_tasks").update(updates).eq("id", id);
-  broadcast("task_update", { id, ...updates });
+  await supabase.from("cb_tasks").update(req.body).eq("id", req.params.id);
+  broadcast("task_update", { id: req.params.id, ...req.body });
   res.json({ ok: true });
 });
 
-// GET logs for a specific task
 app.get("/api/tasks/:id/logs", async (req, res) => {
-  const { data } = await supabase
-    .from("cb_logs")
-    .select("*")
-    .eq("task_id", req.params.id)
-    .order("created_at");
+  const { data } = await supabase.from("cb_logs").select("*")
+    .eq("task_id", req.params.id).order("created_at");
   res.json({ logs: data || [] });
 });
 
-// Serve dashboard HTML
-app.get("*", (req, res) => {
-  res.sendFile(path.join(__dirname, "index.html"));
-});
+app.get("*", (req, res) => res.sendFile(path.join(__dirname, "index.html")));
 
-// ─── HELPERS ─────────────────────────────────────────────────────────────────
 async function addLog(taskId, message, type = "info") {
-  await supabase.from("cb_logs").insert({
-    project: PROJECT,
-    task_id: taskId,
-    message,
-    type,
-  });
+  await supabase.from("cb_logs").insert({ project: PROJECT, task_id: taskId, message, type });
 }
 
-server.listen(PORT, () => {
-  console.log(`READY on port ${PORT}`);
-});
+server.listen(PORT, () => console.log(`READY on port ${PORT}`));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeboard",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "AI engineering team — from PRD to working mobile app, autonomously",
   "type": "module",
   "bin": {
@@ -22,6 +22,7 @@
     "dotenv": "^16.4.5",
     "enquirer": "^2.4.1",
     "express": "^4.18.3",
+    "node-pty": "^1.0.0",
     "open": "^10.1.0",
     "ora": "^8.0.1",
     "puppeteer": "^22.8.0",