claudeboard 2.12.0 → 2.14.0

package/agents/developer.js

@@ -70,6 +70,7 @@ RULES:
 - After writing files run: npx tsc --noEmit — fix any errors you find
 - If you hit an error, read it carefully and fix it — iterate until it works
 - Do NOT ask questions or ask for confirmation. Make your best judgment.
+- Do NOT run npx expo run:ios or npx expo run:android — the orchestrator handles native builds
 - When fully done, print EXACTLY this line: TASK_COMPLETE: <one sentence summary>
 `;
 

package/agents/expo-health.js

@@ -4,11 +4,15 @@ import { createTask, createEpic, addLog } from "./board-client.js";
 import chalk from "chalk";
 import fs from "fs";
 import path from "path";
+import crypto from "crypto";
 import { createRequire } from "module";
 import { createConnection } from "net";
+import { spawn as _spawn, execSync } from "child_process";
 
 const require = createRequire(import.meta.url);
 const MAX_FIX_ATTEMPTS = 5;
+const BUILD_HASH_FILE = ".claudeboard-build-hash.txt";
+const BUILD_TIMEOUT_MS = 10 * 60 * 1000; // 10 min max for expo run:ios
 
 /**
  * Expo Health Check Agent — runs BEFORE the development loop.
@@ -16,9 +20,10 @@ const MAX_FIX_ATTEMPTS = 5;
  * Strategy:
  * 1. Try npm install (--legacy-peer-deps, then --force if needed)
  * 2. If install fails with ETARGET/missing version → ask Claude for fix → apply → retry
- * 3. Start Expo, wait for Metro to be truly ready (not just port open)
- * 4. If Metro crashes with module/dep errors → ask Claude → apply → retry
- * 5. If still broken after MAX attempts → inject a BLOCKER task into the board
+ * 3. If iOS mode: ensure a dev build exists in the simulator (builds if needed)
+ * 4. Start Expo, wait for Metro to be truly ready (not just port open)
+ * 5. If Metro crashes with module/dep errors → ask Claude → apply → retry
+ * 6. If still broken after MAX attempts → inject a BLOCKER task into the board
  *    so the developer agent fixes it before any other task runs
  *
  * Returns { ready: boolean, process: ChildProcess|null }
@@ -43,7 +48,22 @@ export async function runExpoHealthCheck(projectPath, port = 8081) {
     return { ready: false, process: null };
   }
 
-  // ── 2. Start Expo + verify Metro is error-free ─────────────────────────────
+  // ── 2. Dev build (iOS mode only) ───────────────────────────────────────────
+  const useIOS = process.env.CLAUDEBOARD_IOS === "1" || isSimulatorAvailableSync();
+  if (useIOS) {
+    const buildOk = await ensureDevBuild(projectPath);
+    if (!buildOk) {
+      await injectFixTask(projectPath,
+        "FIX: Dev build failed — fix native compilation errors",
+        "npx expo run:ios failed. Fix any native dependency or Podfile issues so the app compiles.\n" +
+        "Run: npx expo run:ios --simulator and fix all errors."
+      );
+      console.log(chalk.yellow("  ✗ Dev build failed — injected fix task into board\n"));
+      return { ready: false, process: null };
+    }
+  }
+
+  // ── 3. Start Expo + verify Metro is error-free ─────────────────────────────
   for (let attempt = 1; attempt <= MAX_FIX_ATTEMPTS; attempt++) {
     console.log(chalk.dim(`  Starting Expo (attempt ${attempt}/${MAX_FIX_ATTEMPTS})...`));
 
@@ -83,6 +103,217 @@ export async function runExpoHealthCheck(projectPath, port = 8081) {
   return { ready: false, process: null };
 }
 
+// ── Dev Build management ───────────────────────────────────────────────────
+
+/**
+ * Compute a short hash of package.json to detect dependency changes.
+ */
+export function packageJsonHash(projectPath) {
+  try {
+    const content = fs.readFileSync(path.join(projectPath, "package.json"), "utf8");
+    return crypto.createHash("md5").update(content).digest("hex").slice(0, 12);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Returns true if a rebuild is needed:
+ * - No saved hash (never built), OR
+ * - package.json changed since last build
+ */
+export function needsRebuild(projectPath) {
+  const hashFile = path.join(projectPath, BUILD_HASH_FILE);
+  if (!fs.existsSync(hashFile)) return true;
+  try {
+    const saved = fs.readFileSync(hashFile, "utf8").trim();
+    return saved !== packageJsonHash(projectPath);
+  } catch {
+    return true;
+  }
+}
+
+/**
+ * Persist the current package.json hash after a successful build.
+ */
+function saveBuildHash(projectPath) {
+  try {
+    const hash = packageJsonHash(projectPath);
+    if (hash) fs.writeFileSync(path.join(projectPath, BUILD_HASH_FILE), hash, "utf8");
+  } catch {}
+}
+
+/**
+ * Check if the app's dev build is already installed in the booted simulator.
+ */
+function isDevBuildInstalled(projectPath) {
+  try {
+    const bundleId = getBundleId(projectPath);
+    if (!bundleId) return false;
+    const output = execSync(`xcrun simctl get_app_container booted "${bundleId}" 2>&1`, { encoding: "utf8" });
+    return output.trim().length > 0 && !output.includes("No such file");
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Read the iOS bundle identifier from app.json / app.config.js.
+ * Falls back to deriving it from the project slug.
+ */
+function getBundleId(projectPath) {
+  try {
+    const appJsonPath = path.join(projectPath, "app.json");
+    if (fs.existsSync(appJsonPath)) {
+      const cfg = JSON.parse(fs.readFileSync(appJsonPath, "utf8"));
+      const bundleId = cfg?.expo?.ios?.bundleIdentifier;
+      if (bundleId) return bundleId;
+      // Derive from slug if no explicit bundleIdentifier
+      const slug = cfg?.expo?.slug;
+      if (slug) return `com.anonymous.${slug.replace(/[^a-zA-Z0-9]/g, "")}`;
+    }
+  } catch {}
+  return null;
+}
+
+/**
+ * Boot the first available iOS simulator if none is booted.
+ */
+function ensureSimulatorBooted() {
+  try {
+    const booted = execSync("xcrun simctl list devices booted 2>&1", { encoding: "utf8" });
+    if (booted.includes("Booted")) return true;
+
+    // Find a suitable device to boot
+    const devices = execSync("xcrun simctl list devices available 2>&1", { encoding: "utf8" });
+    const match = devices.match(/iPhone \d[^(]*\(([A-F0-9-]{36})\)/i);
+    if (!match) return false;
+
+    console.log(chalk.dim(`  Booting simulator ${match[1]}...`));
+    execSync(`xcrun simctl boot "${match[1]}" 2>&1`, { encoding: "utf8" });
+    // Give the simulator a moment to fully boot
+    execSync("sleep 5");
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Build and install the dev build in the simulator using `expo run:ios`.
+ * Only rebuilds when package.json changed or the app is not installed.
+ * Returns true on success, false on failure.
+ */
+export async function ensureDevBuild(projectPath) {
+  const installed = isDevBuildInstalled(projectPath);
+  const rebuild = needsRebuild(projectPath);
+
+  if (installed && !rebuild) {
+    console.log(chalk.dim("  ✓ Dev build up to date — skipping rebuild"));
+    return true;
+  }
+
+  const reason = !installed ? "app not installed" : "dependencies changed";
+  console.log(chalk.cyan(`  Building dev build (${reason})...`));
+  console.log(chalk.dim("  This may take several minutes on first run."));
+
+  // Make sure a simulator is running
+  const simReady = ensureSimulatorBooted();
+  if (!simReady) {
+    console.log(chalk.yellow("  ✗ No iOS simulator available"));
+    return false;
+  }
+
+  return new Promise((resolve) => {
+    let output = "";
+    let resolved = false;
+
+    const done = (ok) => {
+      if (resolved) return;
+      resolved = true;
+      if (ok) {
+        saveBuildHash(projectPath);
+        console.log(chalk.green("  ✓ Dev build installed in simulator"));
+      }
+      resolve(ok);
+    };
+
+    const timeout = setTimeout(() => {
+      console.log(chalk.yellow("  ✗ Dev build timed out after 10 minutes"));
+      done(false);
+    }, BUILD_TIMEOUT_MS);
+
+    try {
+      const proc = _spawn("npx", ["expo", "run:ios", "--simulator"], {
+        cwd: projectPath,
+        env: { ...process.env, CI: "1", EXPO_NO_INTERACTIVE: "1" },
+        stdio: "pipe",
+      });
+
+      const onData = (d) => {
+        const text = d.toString();
+        output += text;
+        // Log progress lines that are meaningful
+        const lines = text.split("\n").filter(l => l.trim() && !l.includes("\u001b["));
+        for (const line of lines) {
+          if (
+            line.includes("Installing") ||
+            line.includes("Building") ||
+            line.includes("Compiling") ||
+            line.includes("Linking") ||
+            line.includes("error:") ||
+            line.includes("warning:")
+          ) {
+            console.log(chalk.dim(`    ${line.trim().slice(0, 100)}`));
+          }
+        }
+
+        if (
+          text.includes("Installed on") ||
+          text.includes("Opening on") ||
+          text.includes("Successfully built") ||
+          text.includes("BUILD SUCCEEDED")
+        ) {
+          clearTimeout(timeout);
+          done(true);
+        }
+
+        if (
+          text.includes("BUILD FAILED") ||
+          text.includes("error: ") ||
+          text.includes("Command failed")
+        ) {
+          // Wait a bit to collect full error output
+          setTimeout(() => {
+            clearTimeout(timeout);
+            saveLastError(projectPath, output.slice(-3000));
+            done(false);
+          }, 2000);
+        }
+      };
+
+      proc.stdout.on("data", onData);
+      proc.stderr.on("data", onData);
+
+      proc.on("close", (code) => {
+        clearTimeout(timeout);
+        if (!resolved) {
+          if (code === 0) {
+            done(true);
+          } else {
+            saveLastError(projectPath, output.slice(-3000));
+            done(false);
+          }
+        }
+      });
+
+    } catch (e) {
+      clearTimeout(timeout);
+      done(false);
+    }
+  });
+}
+
 // ── npm install with progressive fallback ─────────────────────────────────
 async function installDeps(projectPath) {
   const pkg = JSON.parse(fs.readFileSync(path.join(projectPath, "package.json"), "utf8"));
@@ -149,14 +380,13 @@ async function tryStartExpo(projectPath, port) {
       done(false, `Expo did not become ready within 60s.\n${output.slice(-800)}`), 60000);
 
     try {
-      const { spawn } = require("child_process");
-      // Use iOS simulator if available, fallback to web
-      const useIOS = process.env.CLAUDEBOARD_IOS === "1" || await isSimulatorAvailable();
+      // iOS mode: use dev build (--go is intentionally omitted so the installed dev build opens)
+      const useIOS = process.env.CLAUDEBOARD_IOS === "1" || isSimulatorAvailableSync();
       const expoArgs = useIOS
         ? ["expo", "start", "--ios", "--port", String(port)]
         : ["expo", "start", "--web", "--port", String(port)];
       
-      proc = spawn("npx", expoArgs, {
+      proc = _spawn("npx", expoArgs, {
         cwd: projectPath,
         env: (() => { const e = { ...process.env, CI: "1", EXPO_NO_INTERACTIVE: "1", EXPO_NO_DOTENV: "0" }; delete e.ANTHROPIC_API_KEY; return e; })(),
         stdio: "pipe",
@@ -320,13 +550,10 @@ function getFatalError(output) {
 }
 
 // ── iOS Simulator detection ───────────────────────────────────────────────────
-async function isSimulatorAvailable() {
+function isSimulatorAvailableSync() {
   try {
-    const { execSync } = await import("child_process");
     const output = execSync("xcrun simctl list devices booted 2>&1", { encoding: "utf8" });
-    // Check if any device is already booted
     if (output.includes("Booted")) return true;
-    // Check if any iOS runtime is available
     const runtimes = execSync("xcrun simctl list runtimes 2>&1", { encoding: "utf8" });
     return runtimes.includes("iOS") && !runtimes.includes("unavailable");
   } catch {
@@ -337,7 +564,6 @@ async function isSimulatorAvailable() {
 // Take a screenshot of the iOS simulator
 export async function screenshotSimulator(outputPath) {
   try {
-    const { execSync } = await import("child_process");
     execSync(`xcrun simctl io booted screenshot "${outputPath}"`, { stdio: "pipe" });
     const data = fs.readFileSync(outputPath);
     return { success: true, base64: data.toString("base64"), path: outputPath };
@@ -349,7 +575,6 @@ export async function screenshotSimulator(outputPath) {
 // Tap on the iOS simulator at given coordinates
 export async function tapSimulator(x, y) {
   try {
-    const { execSync } = await import("child_process");
     execSync(`xcrun simctl io booted tap ${x} ${y}`, { stdio: "pipe" });
     return true;
   } catch { return false; }

package/agents/orchestrator.js

@@ -5,7 +5,7 @@ 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 { runExpoHealthCheck, ensureDevBuild, packageJsonHash } from "./expo-health.js";
 import { createConnection } from "net";
 
 function isPortOpen(port) {
@@ -112,6 +112,9 @@ export async function runOrchestrator(config) {
   let consecutiveFailures = 0;
   const MAX_CONSECUTIVE_FAILURES = 3;
 
+  // Track package.json hash to detect native dependency changes that need a rebuild
+  let lastPkgHash = packageJsonHash(projectPath);
+
   while (true) {
     const task = await getNextTask();
 
@@ -153,6 +156,29 @@ export async function runOrchestrator(config) {
       expoProcess = recheck.process;
     }
 
+    // ── Detect native dependency changes → rebuild dev build if needed ────────
+    if (useIOS) {
+      const currentHash = packageJsonHash(projectPath);
+      if (currentHash && currentHash !== lastPkgHash) {
+        lastPkgHash = currentHash;
+        console.log(chalk.cyan("  📦 package.json changed — checking if dev build rebuild is needed..."));
+        if (expoProcess) {
+          try { expoProcess.kill(); } catch {}
+          expoProcess = null;
+          expoReady = false;
+        }
+        const buildOk = await ensureDevBuild(projectPath);
+        if (buildOk) {
+          // Restart Metro after rebuild
+          const recheck = await runExpoHealthCheck(projectPath, expoPort);
+          expoReady = recheck.ready;
+          expoProcess = recheck.process;
+        } else {
+          console.log(chalk.yellow("  ✗ Rebuild failed — continuing without live preview"));
+        }
+      }
+    }
+
     // ── Re-check Expo health if it's supposed to be running but isn't ────────
     if (expoReady) {
       const portOpen = await isPortOpen(expoPort);

package/dashboard/index.html

@@ -1201,13 +1201,23 @@ function connectWS() {
   ws.onclose = () => { setWS(false); setTimeout(connectWS, 2000); };
   ws.onmessage = (e) => {
     const { event, data } = JSON.parse(e.data);
-    if (['task_update','task_added','task_started','task_complete','task_failed','task_deleted','task_reordered'].includes(event)) {
+
+    // Task state changes that require a board reload (status flipped, new task, deleted)
+    if (['task_added','task_started','task_complete','task_failed','task_deleted'].includes(event)) {
       loadBoard();
     }
+    // Reorder: just re-render from current board data — no network call needed
+    if (event === 'task_reordered') {
+      renderKanban();
+      updateStats();
+    }
+    // Single task field update: patch in-memory and re-render (no full reload)
+    if (event === 'task_update') {
+      patchTaskInMemory(data);
+    }
     if (event === 'log') {
       board.logs.unshift(data);
       if (activeTab === 'activity') renderLogs();
-      // If on detail tab, don't touch activityPane — it'll refresh next time they switch
     }
     if (event === 'expo_status') {
       setExpoStatus(data.status, data.url);
@@ -1221,6 +1231,12 @@ function connectWS() {
 function setWS(on) {
   document.getElementById('wsDot').className = 'ws-dot' + (on ? ' on' : '');
   document.getElementById('wsLabel').textContent = on ? t('live') : t('reconnecting');
+  // Poll only when disconnected
+  if (on) {
+    if (pollInterval) { clearInterval(pollInterval); pollInterval = null; }
+  } else {
+    if (!pollInterval) pollInterval = setInterval(loadBoard, 10000);
+  }
 }
 
 // ── DATA ─────────────────────────────────────────────────────────────────────
@@ -1328,9 +1344,37 @@ function cardHTML(task, position = null) {
     </div>`;
 }
 
-// ── DRAG & DROP ───────────────────────────────────────────────────────────────
+// ── IN-MEMORY PATCH (avoid full reload for minor updates) ─────────────────────
+function patchTaskInMemory(patch) {
+  if (!board.epics) return;
+  for (const epic of board.epics) {
+    const idx = (epic.cb_tasks || []).findIndex(t => t.id === patch.id);
+    if (idx !== -1) {
+      epic.cb_tasks[idx] = { ...epic.cb_tasks[idx], ...patch };
+      renderKanban();
+      updateStats();
+      return;
+    }
+  }
+  // Task not found in memory yet (new orphan etc), do full reload
+  loadBoard();
+}
+
+// ── DRAG STATE ────────────────────────────────────────────────────────────────
+// We track order in JS so we don't depend on DOM state during drag
+let dragColumnOrder = {}; // { status: [id, id, ...] } — snapshot at dragstart
 function onDragStart(e, id) {
   draggedId = id;
+
+  // Snapshot current order of all columns from memory (reliable — not DOM-dependent)
+  dragColumnOrder = {};
+  for (const status of ['todo', 'in_progress', 'done', 'error']) {
+    dragColumnOrder[status] = allTasks()
+      .filter(t => t.status === status)
+      .sort((a, b) => (a.priority_order ?? 99) - (b.priority_order ?? 99))
+      .map(t => t.id);
+  }
+
   setTimeout(() => {
     const el = document.querySelector(`.card[data-id="${id}"]`);
     if (el) el.classList.add('dragging');
@@ -1391,27 +1435,34 @@ async function onDrop(e, status) {
   const insertBeforeId = col.dataset.insertBefore || '';
   delete col.dataset.insertBefore;
 
-  // Build the new ordered list of ids for this column
-  // Start from the DOM — what's visually shown — plus insert dragged card
-  const otherIds = [...col.querySelectorAll('.card')]
-    .map(c => c.dataset.id)
-    .filter(id => id && id !== draggedId);
+  // Use the JS snapshot (taken at dragstart) — not DOM which has .dragging gaps
+  const sourceStatus = allTasks().find(t => t.id === draggedId)?.status || status;
+  const columnIds = (dragColumnOrder[status] || []).filter(id => id !== draggedId);
 
   let newOrderedIds;
   if (!insertBeforeId) {
-    newOrderedIds = [...otherIds, draggedId]; // dropped at end
+    newOrderedIds = [...columnIds, draggedId];
   } else {
-    const insertIdx = otherIds.indexOf(insertBeforeId);
+    const insertIdx = columnIds.indexOf(insertBeforeId);
     if (insertIdx === -1) {
-      newOrderedIds = [draggedId, ...otherIds];
+      newOrderedIds = [draggedId, ...columnIds];
     } else {
-      newOrderedIds = [...otherIds.slice(0, insertIdx), draggedId, ...otherIds.slice(insertIdx)];
+      newOrderedIds = [...columnIds.slice(0, insertIdx), draggedId, ...columnIds.slice(insertIdx)];
     }
   }
 
-  // Update status first if moving to different column
-  const draggedTask = allTasks().find(t => t.id === draggedId);
-  if (draggedTask?.status !== status) {
+  // Optimistic update in memory so re-render is instant
+  const task = allTasks().find(t => t.id === draggedId);
+  if (task) task.status = status;
+  newOrderedIds.forEach((id, i) => {
+    const t = allTasks().find(t => t.id === id);
+    if (t) t.priority_order = i + 1;
+  });
+  renderKanban();
+  updateStats();
+
+  // Update status if column changed
+  if (sourceStatus !== status) {
     await fetch(`/api/tasks/${draggedId}`, {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
@@ -1419,7 +1470,7 @@ async function onDrop(e, status) {
     });
   }
 
-  // Persist the new order in one call
+  // Persist new order
   await fetch('/api/tasks/reorder', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
@@ -1427,7 +1478,6 @@ async function onDrop(e, status) {
   });
 
   draggedId = null;
-  loadBoard();
 }
 
 // ── CARD SELECT ───────────────────────────────────────────────────────────────
@@ -1901,8 +1951,9 @@ function applyTranslations() {
 
 // ── INIT ──────────────────────────────────────────────────────────────────────
 loadBoard();
-setInterval(loadBoard, 8000);
 connectWS();
+// Only poll when WS is disconnected (fallback)
+let pollInterval = null;
 
 // Load expo status
 fetch('/api/expo/status').then(r => r.json()).then(d => setExpoStatus(d.status, d.url));

package/dashboard/server.js

@@ -59,7 +59,11 @@ function broadcastExpoStatus() {
 // ── SUPABASE REALTIME ─────────────────────────────────────────────────────────
 supabase
   .channel("cb_changes")
-  .on("postgres_changes", { event: "*", schema: "public", table: "cb_tasks" }, (p) => broadcast("task_update", p))
+  .on("postgres_changes", { event: "*", schema: "public", table: "cb_tasks" }, (p) => {
+    if (p.eventType === "UPDATE" && p.new) broadcast("task_update", p.new);
+    else if (p.eventType === "INSERT" && p.new) broadcast("task_added", p.new);
+    else if (p.eventType === "DELETE") broadcast("task_deleted", { id: p.old?.id });
+  })
   .on("postgres_changes", { event: "*", schema: "public", table: "cb_logs"  }, (p) => broadcast("log", p.new))
   .subscribe();
 

package/package.json

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