claudeboard 2.4.0 → 2.8.0

package/agents/expo-health.js

@@ -0,0 +1,240 @@
+import { callClaude } from "./claude-api.js";
+import { runCommand } from "../tools/terminal.js";
+import { startProcess, waitForPort } from "../tools/terminal.js";
+import chalk from "chalk";
+import fs from "fs";
+import path from "path";
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
+
+const MAX_FIX_ATTEMPTS = 3;
+
+/**
+ * Expo Health Check Agent
+ * Runs before development loop starts.
+ * 1. Install deps
+ * 2. Try to start Expo
+ * 3. If it crashes, read the error and fix it (up to 3 attempts)
+ * 4. Return { ready: true/false, process, port }
+ */
+export async function runExpoHealthCheck(projectPath, port = 8081) {
+  console.log(chalk.bold.cyan("\n[ EXPO HEALTH CHECK ]\n"));
+
+  if (!fs.existsSync(path.join(projectPath, "package.json"))) {
+    console.log(chalk.dim("  No package.json found — skipping Expo health check"));
+    return { ready: false, process: null };
+  }
+
+  // ── Step 1: Install dependencies ──────────────────────────────────────────
+  console.log(chalk.dim("  Installing dependencies (--legacy-peer-deps)..."));
+  const installResult = await runCommand(
+    "npm install --legacy-peer-deps 2>&1",
+    projectPath,
+    120000
+  );
+  const installErrors = extractNpmErrors(installResult.stdout);
+  if (installErrors) {
+    console.log(chalk.yellow(`  ⚠ npm install issues detected:\n${installErrors}`));
+    // Try to fix install errors before continuing
+    const fixed = await fixInstallErrors(projectPath, installErrors);
+    if (!fixed) {
+      console.log(chalk.red("  ✗ Could not fix install errors — continuing without Expo"));
+      return { ready: false, process: null };
+    }
+  }
+  console.log(chalk.dim("  ✓ Dependencies installed"));
+
+  // ── Step 2: Attempt Expo start with error detection ───────────────────────
+  for (let attempt = 1; attempt <= MAX_FIX_ATTEMPTS; attempt++) {
+    console.log(chalk.dim(`  Starting Expo (attempt ${attempt}/${MAX_FIX_ATTEMPTS})...`));
+
+    const result = await tryStartExpo(projectPath, port);
+
+    if (result.ready) {
+      console.log(chalk.green(`  ✓ Expo running on port ${port}\n`));
+      return { ready: true, process: result.process };
+    }
+
+    const error = result.error;
+    console.log(chalk.yellow(`  ✗ Expo failed to start:\n    ${error?.slice(0, 200)}`));
+
+    if (attempt === MAX_FIX_ATTEMPTS) break;
+
+    // ── Step 3: Ask Claude to fix the error ─────────────────────────────────
+    console.log(chalk.dim(`  Asking Claude to fix the error...`));
+    const fixed = await fixExpoError(projectPath, error);
+
+    if (!fixed) {
+      console.log(chalk.red("  Could not determine fix — skipping Expo"));
+      break;
+    }
+    console.log(chalk.dim(`  Applied fix — retrying...`));
+  }
+
+  console.log(chalk.yellow("  ⚠ Expo not available — continuing without visual QA\n"));
+  return { ready: false, process: null };
+}
+
+// ── Try to start Expo and detect if it crashes or succeeds ─────────────────
+async function tryStartExpo(projectPath, port) {
+  return new Promise((resolve) => {
+    let output = "";
+    let resolved = false;
+    let proc = null;
+
+    const done = (ready, error) => {
+      if (resolved) return;
+      resolved = true;
+      if (!ready && proc) {
+        try { proc.kill(); } catch {}
+        proc = null;
+      }
+      resolve({ ready, process: proc, error });
+    };
+
+    // Collect logs for 20 seconds, then give up if no success
+    const timeout = setTimeout(() => done(false, `Expo did not start within 20s. Last output:\n${output.slice(-500)}`), 20000);
+
+    try {
+      const { spawn } = require("child_process");
+      proc = spawn("npx", ["expo", "start", "--web", "--port", String(port)], {
+        cwd: projectPath,
+        env: {
+          ...process.env,
+          CI: "1",
+          EXPO_NO_INTERACTIVE: "1",
+          EXPO_NO_DOTENV: "0",
+        },
+        stdio: "pipe",
+      });
+
+      proc.stdout.on("data", (d) => {
+        const text = d.toString();
+        output += text;
+        // Success signals
+        if (
+          text.includes("Metro waiting on") ||
+          text.includes(`localhost:${port}`) ||
+          text.includes("Web is waiting") ||
+          text.includes("Bundling complete")
+        ) {
+          clearTimeout(timeout);
+          done(true, null);
+        }
+      });
+
+      proc.stderr.on("data", (d) => {
+        const text = d.toString();
+        output += text;
+        // Fatal crash signals
+        if (
+          text.includes("Unable to resolve module") ||
+          text.includes("Cannot find module") ||
+          text.includes("Error: Cannot") ||
+          text.includes("ENOENT") ||
+          text.includes("SyntaxError")
+        ) {
+          clearTimeout(timeout);
+          // Small delay to collect full error
+          setTimeout(() => done(false, output.slice(-1500)), 1000);
+        }
+      });
+
+      proc.on("close", (code) => {
+        clearTimeout(timeout);
+        if (code !== 0) done(false, `Process exited with code ${code}.\n${output.slice(-1000)}`);
+      });
+
+    } catch (e) {
+      clearTimeout(timeout);
+      done(false, e.message);
+    }
+  });
+}
+
+// ── Ask Claude to diagnose and apply the fix ──────────────────────────────
+async function fixExpoError(projectPath, errorText) {
+  const pkgRaw = fs.readFileSync(path.join(projectPath, "package.json"), "utf8");
+  const pkg = JSON.parse(pkgRaw);
+  const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+
+  const prompt = `You are a React Native / Expo dependency expert.
+
+The app failed to start with this error:
+\`\`\`
+${errorText}
+\`\`\`
+
+Current package.json dependencies:
+\`\`\`json
+${JSON.stringify(deps, null, 2)}
+\`\`\`
+
+Project path: ${projectPath}
+
+Diagnose the root cause and provide the EXACT shell commands to fix it.
+Common fixes:
+- Version conflicts: upgrade/downgrade specific packages
+- Missing modules: npm install <package>
+- Peer dep issues: npm install <pkg>@<compatible-version> --legacy-peer-deps
+- Wrong import paths: patch the source file
+
+Respond with JSON:
+{
+  "diagnosis": "One sentence explanation of the root cause",
+  "commands": ["npm install ...", "..."],
+  "confidence": 0-100
+}`;
+
+  let verdict;
+  try {
+    const { callClaudeJSON } = await import("./claude-api.js");
+    verdict = await callClaudeJSON(
+      "You are a React Native dependency expert. Respond only with valid JSON.",
+      prompt
+    );
+  } catch {
+    return false;
+  }
+
+  if (!verdict?.commands?.length || verdict.confidence < 40) {
+    console.log(chalk.dim(`  Diagnosis: ${verdict?.diagnosis || "unknown"} (confidence: ${verdict?.confidence}%)`));
+    return false;
+  }
+
+  console.log(chalk.dim(`  Diagnosis: ${verdict.diagnosis}`));
+  console.log(chalk.dim(`  Applying ${verdict.commands.length} fix command(s)...`));
+
+  for (const cmd of verdict.commands) {
+    console.log(chalk.dim(`    → ${cmd}`));
+    const result = await runCommand(cmd + " 2>&1", projectPath, 120000);
+    if (result.returncode !== 0) {
+      const errLine = result.stdout.split("\n").find(l => l.includes("error")) || result.stdout.slice(-200);
+      console.log(chalk.yellow(`    ⚠ Command failed: ${errLine}`));
+    }
+  }
+
+  return true;
+}
+
+// ── Fix npm install errors ──────────────────────────────────────────────────
+async function fixInstallErrors(projectPath, errorText) {
+  // Try --force as a last resort for install errors
+  if (errorText.includes("ERESOLVE") || errorText.includes("peer")) {
+    console.log(chalk.dim("  Retrying with --force..."));
+    const result = await runCommand("npm install --force 2>&1", projectPath, 120000);
+    const stillBroken = extractNpmErrors(result.stdout);
+    return !stillBroken;
+  }
+  return false;
+}
+
+// ── Extract real npm errors (ignore peer dep warnings) ─────────────────────
+function extractNpmErrors(output) {
+  const lines = output.split("\n");
+  const errors = lines.filter(l =>
+    l.includes("npm error") && !l.includes("ERESOLVE") && !l.includes("peer")
+  );
+  return errors.length ? errors.join("\n") : null;
+}

package/agents/orchestrator.js

@@ -5,6 +5,18 @@ import path from "path";
 import { runArchitectAgent } from "./architect.js";
 import { runDeveloperAgent } from "./developer.js";
 import { runQAAgent, runFullAppQA } from "./qa.js";
+import { runExpoHealthCheck } from "./expo-health.js";
+import { createConnection } from "net";
+
+function isPortOpen(port) {
+  return new Promise(resolve => {
+    const sock = createConnection({ port, host: "127.0.0.1" });
+    sock.setTimeout(600);
+    sock.once("connect", () => { sock.destroy(); resolve(true); });
+    sock.once("error", () => resolve(false));
+    sock.once("timeout", () => resolve(false));
+  });
+}
 import {
   initBoard,
   getNextTask,
@@ -84,28 +96,11 @@ export async function runOrchestrator(config) {
   const logFile = path.join(projectPath, ".claudeboard-logs.txt");
   const logStream = fs.createWriteStream(logFile, { flags: "a" });
 
-  // Check if expo project exists
-  const hasPackageJson = fs.existsSync(path.join(projectPath, "package.json"));
-
-  if (hasPackageJson) {
-    console.log(chalk.dim("  Starting Expo Web for QA screenshots...\n"));
-    expoProcess = startProcess(
-      "npx",
-      ["expo", "start", "--web", "--port", String(expoPort)],
-      projectPath,
-      (log) => {
-        logStream.write(log);
-        if (log.includes("Metro waiting") || log.includes("localhost:" + expoPort)) {
-          expoReady = true;
-        }
-      }
-    );
-
-    // Wait up to 30s for expo to start
-    await waitForPort(expoPort, 30000);
-    expoReady = true;
-    console.log(chalk.dim(`  Expo Web running at http://localhost:${expoPort}\n`));
-  }
+  // ── EXPO HEALTH CHECK: install deps + start + auto-fix errors ─────────────
+  // Runs before development loop so the app is visible from task #1
+  const expoHealth = await runExpoHealthCheck(projectPath, expoPort);
+  expoReady = expoHealth.ready;
+  expoProcess = expoHealth.process;
 
   // ── PHASE 2: DEVELOPMENT LOOP ─────────────────────────────────────────────
   console.log(chalk.bold.cyan("[ PHASE 2: DEVELOPMENT ]\n"));
@@ -145,6 +140,17 @@ export async function runOrchestrator(config) {
 
     consecutiveFailures = 0;
 
+    // ── Re-check Expo health if it's supposed to be running but isn't ────────
+    if (expoReady) {
+      const portOpen = await isPortOpen(expoPort);
+      if (!portOpen) {
+        console.log(chalk.yellow("  ⚠ Expo seems to have crashed — running health check..."));
+        const recheck = await runExpoHealthCheck(projectPath, expoPort);
+        expoReady = recheck.ready;
+        expoProcess = recheck.process;
+      }
+    }
+
     // Run QA agent (only if expo is running and this is a UI/feature task)
     const shouldRunQA = expoReady && ["feature", "bug"].includes(task.type);
 

package/dashboard/index.html

@@ -801,6 +801,31 @@
   /* adjust board to not overlap toolbar */
   .board-wrap { padding-bottom: 40px; }
 
+  /* ── LANGUAGE SELECTOR ── */
+  .lang-selector {
+    display: flex;
+    gap: 2px;
+    background: rgba(255,255,255,0.05);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 2px;
+  }
+  .lang-btn {
+    background: none;
+    border: none;
+    color: var(--muted);
+    font-family: var(--mono);
+    font-size: 10px;
+    font-weight: 700;
+    padding: 3px 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    letter-spacing: 0.05em;
+    transition: all 0.15s;
+  }
+  .lang-btn:hover { color: var(--text); }
+  .lang-btn.active { background: var(--accent); color: #fff; }
+
   /* ── RETRY BUTTON on failed cards ── */
   .card-retry-btn {
     margin-top: 10px;
@@ -848,10 +873,10 @@
   <div class="project-badge" id="projectName">—</div>
 
   <div class="header-stats">
-    <div class="hstat todo"><div class="hstat-dot"></div><span id="statTodo">0</span> todo</div>
-    <div class="hstat prog"><div class="hstat-dot"></div><span id="statProg">0</span> running</div>
-    <div class="hstat done"><div class="hstat-dot"></div><span id="statDone">0</span> done</div>
-    <div class="hstat err"><div class="hstat-dot"></div><span id="statErr">0</span> failed</div>
+    <div class="hstat todo"><div class="hstat-dot"></div><span id="statTodo">0</span> <span data-i18n="todo">todo</span></div>
+    <div class="hstat prog"><div class="hstat-dot"></div><span id="statProg">0</span> <span data-i18n="running">running</span></div>
+    <div class="hstat done"><div class="hstat-dot"></div><span id="statDone">0</span> <span data-i18n="done">done</span></div>
+    <div class="hstat err"><div class="hstat-dot"></div><span id="statErr">0</span> <span data-i18n="failed">failed</span></div>
   </div>
 
   <div class="header-right">
@@ -861,16 +886,21 @@
     <div class="progress-pct" id="progressPct">0%</div>
     <div class="ws-badge">
       <div class="ws-dot" id="wsDot"></div>
-      <span id="wsLabel">connecting</span>
+      <span id="wsLabel" data-i18n="connecting">connecting</span>
     </div>
-    <button class="btn btn-primary" onclick="openModal()">+ Add Task</button>
+    <!-- Language selector -->
+    <div class="lang-selector">
+      <button class="lang-btn active" id="lang-en" onclick="setLang('en')">EN</button>
+      <button class="lang-btn" id="lang-es" onclick="setLang('es')">ES</button>
+    </div>
+    <button class="btn btn-primary" onclick="openModal()" data-i18n="addTask">+ Add Task</button>
   </div>
 </div>
 
 <!-- RUNNING BAR -->
 <div class="running-bar" id="runningBar">
   <div class="running-spinner"></div>
-  <span class="running-label">Agent working →</span>
+  <span class="running-label" data-i18n="agentWorking">Agent working →</span>
   <span class="running-title" id="runningTitle">—</span>
 </div>
 
@@ -884,7 +914,7 @@
     <div class="column col-todo" id="col-todo">
       <div class="column-header">
         <div class="column-dot"></div>
-        <span class="column-title">To Do</span>
+        <span class="column-title" data-i18n="colTodo">To Do</span>
         <span class="column-count" id="cnt-todo">0</span>
       </div>
       <div class="column-body" id="body-todo" ondragover="onDragOver(event,'todo')" ondrop="onDrop(event,'todo')" ondragleave="onDragLeave(event)"></div>
@@ -894,7 +924,7 @@
     <div class="column col-prog" id="col-prog">
       <div class="column-header">
         <div class="column-dot"></div>
-        <span class="column-title">In Progress</span>
+        <span class="column-title" data-i18n="colProg">In Progress</span>
         <span class="column-count" id="cnt-prog">0</span>
       </div>
       <div class="column-body" id="body-prog" ondragover="onDragOver(event,'in_progress')" ondrop="onDrop(event,'in_progress')" ondragleave="onDragLeave(event)"></div>
@@ -904,7 +934,7 @@
     <div class="column col-done" id="col-done">
       <div class="column-header">
         <div class="column-dot"></div>
-        <span class="column-title">Done</span>
+        <span class="column-title" data-i18n="colDone">Done</span>
         <span class="column-count" id="cnt-done">0</span>
       </div>
       <div class="column-body" id="body-done" ondragover="onDragOver(event,'done')" ondrop="onDrop(event,'done')" ondragleave="onDragLeave(event)"></div>
@@ -914,7 +944,7 @@
     <div class="column col-err" id="col-err">
       <div class="column-header">
         <div class="column-dot"></div>
-        <span class="column-title">Failed</span>
+        <span class="column-title" data-i18n="colFailed">Failed</span>
         <span class="column-count" id="cnt-err">0</span>
       </div>
       <div class="column-body" id="body-err" ondragover="onDragOver(event,'error')" ondrop="onDrop(event,'error')" ondragleave="onDragLeave(event)"></div>
@@ -925,17 +955,17 @@
   <!-- SIDEBAR -->
   <div class="sidebar">
     <div class="sidebar-tabs">
-      <button class="stab active" id="tab-activity" onclick="switchTab('activity')">Activity</button>
-      <button class="stab" id="tab-detail" onclick="switchTab('detail')">Detail</button>
+      <button class="stab active" id="tab-activity" onclick="switchTab('activity')" data-i18n="tabActivity">Activity</button>
+      <button class="stab" id="tab-detail" onclick="switchTab('detail')" data-i18n="tabDetail">Detail</button>
     </div>
     <div class="sidebar-body" id="sidebarBody">
       <!-- Activity pane — always in DOM, shown/hidden -->
       <div id="activityPane">
-        <div class="detail-empty">Waiting for activity...<br><br>Agents will log<br>their work here.</div>
+        <div class="detail-empty" data-i18n="activityEmpty">Waiting for activity...<br><br>Agents will log<br>their work here.</div>
       </div>
       <!-- Detail pane — always in DOM, shown/hidden -->
       <div id="detailPane" style="display:none">
-        <div class="detail-empty">Click any task card<br>to see its details.</div>
+        <div class="detail-empty" data-i18n="detailEmpty">Click any task card<br>to see its details.</div>
       </div>
     </div>
   </div>
@@ -945,38 +975,38 @@
 <!-- ADD TASK MODAL -->
 <div class="overlay" id="modal" onclick="if(event.target===this)closeModal()">
   <div class="modal">
-    <div class="modal-title">Add Task</div>
+    <div class="modal-title" data-i18n="addTaskTitle">Add Task</div>
     <div class="field">
-      <label>Title</label>
-      <input type="text" id="f-title" placeholder="Implement login screen...">
+      <label data-i18n="fieldTitle">Title</label>
+      <input type="text" id="f-title" data-i18n-placeholder="placeholderTitle">
     </div>
     <div class="field">
-      <label>Description</label>
-      <textarea id="f-desc" rows="3" placeholder="Detailed description of what needs to be done..."></textarea>
+      <label data-i18n="fieldDesc">Description</label>
+      <textarea id="f-desc" rows="3" data-i18n-placeholder="placeholderDesc"></textarea>
     </div>
     <div class="modal-grid">
       <div class="field">
-        <label>Priority</label>
+        <label data-i18n="fieldPriority">Priority</label>
         <select id="f-priority">
-          <option value="high">High</option>
-          <option value="medium" selected>Medium</option>
-          <option value="low">Low</option>
+          <option value="high" data-i18n="prioHigh">High</option>
+          <option value="medium" selected data-i18n="prioMed">Medium</option>
+          <option value="low" data-i18n="prioLow">Low</option>
         </select>
       </div>
       <div class="field">
-        <label>Type</label>
+        <label data-i18n="fieldType">Type</label>
         <select id="f-type">
-          <option value="feature" selected>Feature</option>
-          <option value="bug">Bug</option>
-          <option value="config">Config</option>
-          <option value="refactor">Refactor</option>
-          <option value="test">Test</option>
+          <option value="feature" selected data-i18n="typeFeature">Feature</option>
+          <option value="bug" data-i18n="typeBug">Bug</option>
+          <option value="config" data-i18n="typeConfig">Config</option>
+          <option value="refactor" data-i18n="typeRefactor">Refactor</option>
+          <option value="test" data-i18n="typeTest">Test</option>
         </select>
       </div>
     </div>
     <div class="modal-actions">
-      <button class="btn-cancel" onclick="closeModal()">Cancel</button>
-      <button class="btn-create" onclick="submitTask()">Create Task</button>
+      <button class="btn-cancel" onclick="closeModal()" data-i18n="cancel">Cancel</button>
+      <button class="btn-create" onclick="submitTask()" data-i18n="createTask">Create Task</button>
     </div>
   </div>
 </div>
@@ -986,48 +1016,46 @@
   <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>
+      <span data-i18n="retryTitle">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">
+    <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" data-i18n="noErrorLog">
       No error log found.
     </div>
-
     <div class="field">
-      <label>Title</label>
+      <label data-i18n="fieldTitle">Title</label>
       <input type="text" id="r-title">
     </div>
     <div class="field">
-      <label>Description</label>
+      <label data-i18n="fieldDesc">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>
+      <label style="color:var(--accent)" data-i18n="agentNoteLabel">💬 Note for the agent (hint to fix the issue)</label>
+      <textarea id="r-note" rows="3" data-i18n-placeholder="agentNotePlaceholder"></textarea>
     </div>
     <div class="modal-grid">
       <div class="field">
-        <label>Priority</label>
+        <label data-i18n="fieldPriority">Priority</label>
         <select id="r-priority">
-          <option value="high">High</option>
-          <option value="medium">Medium</option>
-          <option value="low">Low</option>
+          <option value="high" data-i18n="prioHigh">High</option>
+          <option value="medium" data-i18n="prioMed">Medium</option>
+          <option value="low" data-i18n="prioLow">Low</option>
         </select>
       </div>
       <div class="field">
-        <label>Type</label>
+        <label data-i18n="fieldType">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>
+          <option value="feature" data-i18n="typeFeature">Feature</option>
+          <option value="bug" data-i18n="typeBug">Bug</option>
+          <option value="config" data-i18n="typeConfig">Config</option>
+          <option value="refactor" data-i18n="typeRefactor">Refactor</option>
+          <option value="test" data-i18n="typeTest">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>
+      <button class="btn-cancel" onclick="closeRetry()" data-i18n="cancel">Cancel</button>
+      <button class="btn-create" style="background:var(--red)" onclick="submitRetry()" data-i18n="retryBtn">↩ Retry Task</button>
     </div>
   </div>
 </div>
@@ -1036,9 +1064,9 @@
 <div class="bottom-toolbar">
   <button class="toolbar-btn" id="expoBtn" onclick="toggleExpoPanel()">
     📱 Expo
-    <span class="expo-status-badge stopped" id="expoBadge">stopped</span>
+    <span class="expo-status-badge stopped" id="expoBadge" data-i18n="statusStopped">stopped</span>
   </button>
-  <button class="toolbar-btn" id="termBtn" onclick="toggleTerminal()">
+  <button class="toolbar-btn" id="termBtn" onclick="toggleTerminal()" data-i18n="terminal">
     ⌨️ Terminal
   </button>
 </div>
@@ -1047,18 +1075,18 @@
 <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>
+    <span class="expo-status-badge stopped" id="expoPanelBadge" data-i18n="statusStopped">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>
+      <button class="btn btn-primary" id="expoStartBtn" onclick="event.stopPropagation();startExpo()" style="font-size:11px;padding:4px 12px" data-i18n="startExpo">Start Expo</button>
+      <button class="btn btn-ghost" id="expoStopBtn" onclick="event.stopPropagation();stopExpo()" style="font-size:11px;padding:4px 12px;display:none" data-i18n="stopExpo">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-logs" id="expoLogs" data-i18n="expoIdle">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 style="font-family:var(--mono);font-size:10px;color:var(--muted);margin-bottom:4px" data-i18n="scanWith">SCAN WITH EXPO GO</div>
           <div class="expo-url" id="expoUrl">—</div>
         </div>
       </div>
@@ -1122,7 +1150,7 @@ function connectWS() {
 
 function setWS(on) {
   document.getElementById('wsDot').className = 'ws-dot' + (on ? ' on' : '');
-  document.getElementById('wsLabel').textContent = on ? 'live' : 'reconnecting';
+  document.getElementById('wsLabel').textContent = on ? t('live') : t('reconnecting');
 }
 
 // ── DATA ─────────────────────────────────────────────────────────────────────
@@ -1218,7 +1246,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>` : ''}
+      ${isError ? `<button class="card-retry-btn" onclick="event.stopPropagation();openRetry('${task.id}')">${t('retryCard')} Edit</button>` : ''}
     </div>`;
 }
 
@@ -1483,8 +1511,8 @@ function appendExpoLog(msg) {
 }
 
 function setExpoStatus(status, url) {
-  const labels = { stopped:'stopped', installing:'installing...', starting:'starting...', running:'running', error:'error' };
-  const label = labels[status] || status;
+  const statusKey = 'status' + (status || 'stopped').charAt(0).toUpperCase() + (status || 'stopped').slice(1);
+  const label = t(statusKey);
 
   ['expoBadge','expoPanelBadge'].forEach(id => {
     const el = document.getElementById(id);
@@ -1602,6 +1630,100 @@ document.addEventListener('keydown', e => {
   if ((e.metaKey || e.ctrlKey) && e.key === 'n') { e.preventDefault(); openModal(); }
 });
 
+// ── I18N ──────────────────────────────────────────────────────────────────────
+const STRINGS = {
+  en: {
+    todo:'todo', running:'running', done:'done', failed:'failed',
+    connecting:'connecting', live:'live', reconnecting:'reconnecting',
+    addTask:'+ Add Task',
+    agentWorking:'Agent working →',
+    colTodo:'To Do', colProg:'In Progress', colDone:'Done', colFailed:'Failed',
+    tabActivity:'Activity', tabDetail:'Detail',
+    activityEmpty:'Waiting for activity...<br><br>Agents will log<br>their work here.',
+    detailEmpty:'Click any task card<br>to see its details.',
+    addTaskTitle:'Add Task',
+    fieldTitle:'Title', fieldDesc:'Description', fieldPriority:'Priority', fieldType:'Type',
+    placeholderTitle:'Implement login screen...',
+    placeholderDesc:'Detailed description of what needs to be done...',
+    prioHigh:'High', prioMed:'Medium', prioLow:'Low',
+    typeFeature:'Feature', typeBug:'Bug', typeConfig:'Config', typeRefactor:'Refactor', typeTest:'Test',
+    cancel:'Cancel', createTask:'Create Task',
+    retryTitle:'Edit & Retry Failed Task',
+    noErrorLog:'No error log found.',
+    agentNoteLabel:'💬 Note for the agent (hint to fix the issue)',
+    agentNotePlaceholder:'e.g. Use tailwind v3 not v4. The error is about missing module X...',
+    retryBtn:'↩ Retry Task',
+    terminal:'⌨️ Terminal',
+    statusStopped:'stopped', statusInstalling:'installing', statusStarting:'starting',
+    statusRunning:'running', statusError:'error',
+    startExpo:'Start Expo', stopExpo:'Stop',
+    expoIdle:'Expo not started. Click "Start Expo" to install dependencies and launch with tunnel.',
+    scanWith:'SCAN WITH EXPO GO',
+    retryCard:'↩ Retry',
+  },
+  es: {
+    todo:'pendiente', running:'en curso', done:'listo', failed:'fallido',
+    connecting:'conectando', live:'en vivo', reconnecting:'reconectando',
+    addTask:'+ Nueva tarea',
+    agentWorking:'Agente trabajando →',
+    colTodo:'Por hacer', colProg:'En progreso', colDone:'Hecho', colFailed:'Fallido',
+    tabActivity:'Actividad', tabDetail:'Detalle',
+    activityEmpty:'Esperando actividad...<br><br>Los agentes registrarán<br>su trabajo aquí.',
+    detailEmpty:'Hacé clic en una tarea<br>para ver sus detalles.',
+    addTaskTitle:'Nueva tarea',
+    fieldTitle:'Título', fieldDesc:'Descripción', fieldPriority:'Prioridad', fieldType:'Tipo',
+    placeholderTitle:'Implementar pantalla de login...',
+    placeholderDesc:'Descripción detallada de lo que hay que hacer...',
+    prioHigh:'Alta', prioMed:'Media', prioLow:'Baja',
+    typeFeature:'Feature', typeBug:'Bug', typeConfig:'Config', typeRefactor:'Refactor', typeTest:'Test',
+    cancel:'Cancelar', createTask:'Crear tarea',
+    retryTitle:'Editar y reintentar tarea fallida',
+    noErrorLog:'No se encontró log de error.',
+    agentNoteLabel:'💬 Nota para el agente (pista para corregir el problema)',
+    agentNotePlaceholder:'Ej: Usá tailwind v3 no v4. El error es por el módulo X...',
+    retryBtn:'↩ Reintentar',
+    terminal:'⌨️ Terminal',
+    statusStopped:'detenido', statusInstalling:'instalando', statusStarting:'iniciando',
+    statusRunning:'activo', statusError:'error',
+    startExpo:'Iniciar Expo', stopExpo:'Detener',
+    expoIdle:'Expo no iniciado. Hacé clic en "Iniciar Expo" para instalar dependencias y lanzar con tunnel.',
+    scanWith:'ESCANEAR CON EXPO GO',
+    retryCard:'↩ Reintentar',
+  }
+};
+
+let currentLang = localStorage.getItem('cb-lang') || 'en';
+
+function t(key) {
+  return STRINGS[currentLang][key] ?? STRINGS.en[key] ?? key;
+}
+
+function setLang(lang) {
+  currentLang = lang;
+  localStorage.setItem('cb-lang', lang);
+  document.getElementById('lang-en').classList.toggle('active', lang === 'en');
+  document.getElementById('lang-es').classList.toggle('active', lang === 'es');
+  applyTranslations();
+}
+
+function applyTranslations() {
+  document.querySelectorAll('[data-i18n]').forEach(el => {
+    el.innerHTML = t(el.getAttribute('data-i18n'));
+  });
+  document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+    el.placeholder = t(el.getAttribute('data-i18n-placeholder'));
+  });
+  // Re-sync expo badge text based on current status class
+  ['expoBadge','expoPanelBadge'].forEach(id => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    const status = [...el.classList].find(c =>
+      ['stopped','installing','starting','running','error'].includes(c)
+    ) || 'stopped';
+    el.textContent = t('status' + status.charAt(0).toUpperCase() + status.slice(1));
+  });
+}
+
 // ── INIT ──────────────────────────────────────────────────────────────────────
 loadBoard();
 setInterval(loadBoard, 8000);
@@ -1609,6 +1731,13 @@ connectWS();
 
 // Load expo status
 fetch('/api/expo/status').then(r => r.json()).then(d => setExpoStatus(d.status, d.url));
+
+// Apply saved language on load
+(function() {
+  document.getElementById('lang-en').classList.toggle('active', currentLang === 'en');
+  document.getElementById('lang-es').classList.toggle('active', currentLang === 'es');
+  applyTranslations();
+})();
 </script>
 </body>
 </html>

package/dashboard/server.js

@@ -8,6 +8,7 @@ import { fileURLToPath } from "url";
 import fs from "fs";
 import { spawn } from "child_process";
 import { createRequire } from "module";
+import { createConnection } from "net";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
@@ -126,14 +127,53 @@ termWss.on("connection", (ws) => {
 
 // ── EXPO MANAGEMENT ───────────────────────────────────────────────────────────
 
+// On server start, check if Expo is already running on the port
+// (e.g. started by claudeboard run) and mark it as running
+async function detectExistingExpo() {
+  const port = parseInt(process.env.EXPO_PORT || "8081");
+  const running = await isPortOpen(port);
+  if (running) {
+    expoStatus = "running";
+    expoUrl = `exp://localhost:${port}`;
+    broadcast("expo_log", { message: `✓ Detected existing Expo on port ${port} — ready to scan` });
+    broadcastExpoStatus();
+    console.log(`  Expo already running on port ${port} — attached`);
+  }
+}
+
+function isPortOpen(port) {
+  return new Promise(resolve => {
+    const sock = createConnection({ port, host: "127.0.0.1" });
+    sock.setTimeout(600);
+    sock.once("connect", () => { sock.destroy(); resolve(true); });
+    sock.once("error", () => resolve(false));
+    sock.once("timeout", () => resolve(false));
+  });
+}
+
 // 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
+// POST expo/start — smart start: attach if already running, otherwise install + start
 app.post("/api/expo/start", async (req, res) => {
-  if (expoProcess) return res.json({ ok: false, error: "Expo already running" });
+  const port = parseInt(process.env.EXPO_PORT || "8081");
+
+  // Already managed by this server
+  if (expoProcess) {
+    return res.json({ ok: true, message: "Already running", status: expoStatus, url: expoUrl });
+  }
+
+  // Check if something is already listening on the port (e.g. started by claudeboard run)
+  const alreadyRunning = await isPortOpen(port);
+  if (alreadyRunning) {
+    expoStatus = "running";
+    expoUrl = `exp://localhost:${port}`;
+    broadcastExpoStatus();
+    broadcast("expo_log", { message: `✓ Attached to existing Expo on port ${port}` });
+    return res.json({ ok: true, message: "Attached to existing Expo", url: expoUrl });
+  }
 
   res.json({ ok: true, message: "Starting Expo..." });
   _startExpo(PROJECT_DIR);
@@ -153,69 +193,79 @@ app.post("/api/expo/stop", (req, res) => {
 });
 
 async function _startExpo(projectDir) {
-  // Step 1: npm install
+  // Step 1: install deps with --legacy-peer-deps
+  // Expo projects almost always have peer dep conflicts — this is expected
   expoStatus = "installing";
   broadcastExpoStatus();
-  broadcast("expo_log", { message: "Installing dependencies..." });
+  broadcast("expo_log", { message: "Installing dependencies (--legacy-peer-deps)..." });
 
   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() }));
+    const install = spawn("npm", ["install", "--legacy-peer-deps"], {
+      cwd: projectDir,
+      stdio: "pipe",
+      env: { ...process.env },
+    });
+    install.stdout.on("data", (d) => {
+      const msg = d.toString().trim();
+      if (msg && !msg.startsWith("npm warn")) broadcast("expo_log", { message: msg });
+    });
+    install.stderr.on("data", (d) => {
+      const msg = d.toString().trim();
+      // Only show real errors, not peer dep warnings
+      if (msg && msg.includes("npm error") && !msg.includes("ERESOLVE")) {
+        broadcast("expo_log", { message: msg });
+      }
+    });
     install.on("close", resolve);
   });
 
-  broadcast("expo_log", { message: "Dependencies installed. Starting Expo..." });
+  broadcast("expo_log", { message: "✓ Dependencies ready. Starting Expo tunnel..." });
 
-  // Step 2: expo start with tunnel
+  // Step 2: expo start --tunnel, fully non-interactive
   expoStatus = "starting";
   broadcastExpoStatus();
 
-  const expo = spawn("npx", ["expo", "start", "--tunnel"], {
+  const expo = spawn("npx", ["expo", "start", "--tunnel", "--non-interactive"], {
     cwd: projectDir,
-    env: { ...process.env, CI: "false", EXPO_NO_DOTENV: "0" },
     stdio: "pipe",
+    env: {
+      ...process.env,
+      CI: "1",                    // Prevents "use port X instead?" prompts
+      EXPO_NO_DOTENV: "0",
+      EXPO_NO_INTERACTIVE: "1",   // Belt + suspenders non-interactive
+      TERM: "dumb",               // No ANSI color codes in output
+    },
   });
 
   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();
-    }
+    const clean = text.replace(/\x1b\[[0-9;]*m/g, "").trim(); // strip ANSI codes
+    if (clean) broadcast("expo_log", { message: clean });
 
-    // Detect tunnel URL
-    const tunnel = text.match(/https:\/\/[a-z0-9-]+\.exp\.direct[^\s]*/);
-    if (tunnel) {
-      expoUrl = tunnel[0];
-      expoStatus = "running";
-      broadcastExpoStatus();
-    }
+    // Detect URLs
+    const expUrl = text.match(/exp:\/\/[^\s\]]+/);
+    if (expUrl) { expoUrl = expUrl[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" });
+    const tunnel = text.match(/https:\/\/[a-z0-9-]+\.exp\.direct[^\s\]]*/);
+    if (tunnel) { expoUrl = tunnel[0]; expoStatus = "running"; broadcastExpoStatus(); }
+
+    if (text.includes("scan") || text.includes("QR")) {
+      broadcast("expo_log", { message: "📱 QR ready — open Expo Go and scan" });
     }
   });
 
   expo.stderr.on("data", (d) => {
-    const text = d.toString().trim();
+    const text = d.toString().replace(/\x1b\[[0-9;]*m/g, "").trim();
     if (text) broadcast("expo_log", { message: text });
   });
 
   expo.on("close", (code) => {
     expoProcess = null;
-    expoStatus = code === 0 ? "stopped" : "error";
-    expoQR = null;
+    if (code !== 0 && expoStatus !== "running") expoStatus = "error";
     broadcastExpoStatus();
-    broadcast("expo_log", { message: `Expo process exited (code ${code})` });
+    broadcast("expo_log", { message: `Expo exited (code ${code})` });
   });
 }
 
@@ -312,4 +362,8 @@ async function addLog(taskId, message, type = "info") {
   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}`);
+  // Check if Expo is already running (started by claudeboard run)
+  setTimeout(detectExistingExpo, 1000);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeboard",
-  "version": "2.4.0",
+  "version": "2.8.0",
   "description": "AI engineering team — from PRD to working mobile app, autonomously",
   "type": "module",
   "bin": {