claudeboard 2.13.0 → 2.15.1

package/agents/architect.js

@@ -1,5 +1,7 @@
 import { callClaudeJSON } from "./claude-api.js";
-import { createEpic, createTask, addLog } from "./board-client.js";
+import { createEpic, createTask } from "./board-client.js";
+import fs from "fs";
+import path from "path";
 
 const SYSTEM = `You are a senior mobile app architect specializing in React Native / Expo apps.
 Your job is to read a PRD and produce a complete, ordered task breakdown.
@@ -10,16 +12,79 @@ Rules:
 - Be specific — tasks like "implement auth" are too vague. Break into: "create login screen UI", "implement Supabase auth hook", "add protected route navigation"
 - Always include: project setup, navigation, data layer, each feature screen, error handling, loading states, and final QA tasks
 - Priority: high = blocking/core, medium = main features, low = polish/nice-to-have
-- Types: config (setup/deps), feature (new screen or functionality), bug (fix), refactor, test (QA task)`;
+- Types: config (setup/deps), feature (new screen or functionality), bug (fix), refactor, test (QA task)
+- When building on an existing project: do NOT recreate files that already exist — create tasks that extend or integrate with them`;
 
-export async function runArchitectAgent(prdContent, projectName) {
-  console.log("  🏗️  Architect analyzing PRD...");
+/**
+ * Build a concise snapshot of the existing project:
+ * - Top-level file/folder structure
+ * - package.json dependencies
+ * - app.json expo config (if present)
+ */
+function getProjectSnapshot(projectPath) {
+  const lines = [];
+
+  // Top-level structure (exclude hidden files and node_modules)
+  try {
+    const entries = fs.readdirSync(projectPath)
+      .filter(f => !f.startsWith('.') && f !== 'node_modules')
+      .sort();
+    lines.push("### Project structure (top level)");
+    for (const entry of entries) {
+      const fullPath = path.join(projectPath, entry);
+      const isDir = fs.statSync(fullPath).isDirectory();
+      if (isDir) {
+        // List one level deep for key folders
+        const children = fs.readdirSync(fullPath)
+          .filter(f => !f.startsWith('.') && f !== 'node_modules')
+          .slice(0, 15);
+        lines.push(`${entry}/`);
+        for (const child of children) lines.push(`  ${entry}/${child}`);
+      } else {
+        lines.push(entry);
+      }
+    }
+  } catch {}
+
+  // package.json
+  try {
+    const pkg = JSON.parse(fs.readFileSync(path.join(projectPath, "package.json"), "utf8"));
+    lines.push("\n### package.json dependencies");
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    for (const [name, version] of Object.entries(deps)) {
+      lines.push(`  ${name}: ${version}`);
+    }
+  } catch {}
+
+  // app.json
+  try {
+    const appJson = JSON.parse(fs.readFileSync(path.join(projectPath, "app.json"), "utf8"));
+    lines.push("\n### app.json (expo config)");
+    lines.push(JSON.stringify(appJson.expo || appJson, null, 2).slice(0, 1000));
+  } catch {}
+
+  return lines.join("\n");
+}
+
+export async function runArchitectAgent(prdContent, projectName, options = {}) {
+  const { buildOnExisting = false, projectPath = null } = options;
+
+  console.log("  Architect analyzing PRD...");
+
+  const projectSnapshot = (buildOnExisting && projectPath)
+    ? getProjectSnapshot(projectPath)
+    : null;
+
+  const existingProjectSection = projectSnapshot
+    ? `\n\nEXISTING PROJECT SNAPSHOT:\n${projectSnapshot}\n\nIMPORTANT: Create tasks that BUILD ON top of what already exists. Do NOT recreate files or setup that is already in place. Analyze the snapshot carefully and only create tasks for what is missing or needs to be extended.`
+    : "";
 
   const result = await callClaudeJSON(SYSTEM, `
 Project: ${projectName}
 
 PRD:
 ${prdContent}
+${existingProjectSection}
 
 Return this JSON structure:
 {
@@ -49,7 +114,7 @@ Return this JSON structure:
 }
 
 Order epics from first to last in implementation order.
-Include 25-50 tasks total for a complete mobile app.`);
+Include as many tasks as needed for a complete, production-ready mobile app — do not artificially limit the count.`, { maxTokens: 16000 });
 
   console.log(`  ✓ Architect created ${result.epics.length} epics`);
 
@@ -57,11 +122,11 @@ Include 25-50 tasks total for a complete mobile app.`);
   let totalTasks = 0;
   for (let i = 0; i < result.epics.length; i++) {
     const epicData = result.epics[i];
-    const epic = await createEpic(epicData.name);
+    const epicId = await createEpic(epicData.name);
 
     for (const task of epicData.tasks) {
       await createTask({
-        epicId: epic.id,
+        epicId,
         title: task.title,
         description: `${task.description}\n\nAcceptance: ${task.acceptanceCriteria || ""}`,
         priority: task.priority,

package/agents/claude-api.js

@@ -4,7 +4,7 @@
  */
 
 const MODEL = "claude-sonnet-4-20250514";
-const MAX_TOKENS = 8096; // Max output tokens — input context window is 200k, no limits there
+const MAX_TOKENS = 16000; // Max output tokens — input context window is 200k, no limits there
 
 function getHeaders() {
   const key = process.env.ANTHROPIC_API_KEY;

package/agents/developer.js

@@ -67,14 +67,15 @@ RULES:
 - Use TypeScript if the project uses it
 - Read existing files first to follow the project's patterns
 - Install packages with: npx expo install <package>
-- After writing files run: npx tsc --noEmit — fix any errors you find
+- If tsconfig.json exists, run: npx tsc --noEmit after writing files and fix any errors
 - 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>
 `;
 
 // ── Main export ───────────────────────────────────────────────────────────────
-export async function runDeveloperAgent(task, projectPath, techStack, retryContext = null) {
+export async function runDeveloperAgent(task, projectPath, techStack, allTasks = [], retryContext = null) {
   console.log(`  🤖  Claude Code working on: ${task.title}`);
 
   if (!CLAUDE_PATH) {
@@ -96,6 +97,27 @@ export async function runDeveloperAgent(task, projectPath, techStack, retryConte
     ? `\nKnown tech stack: ${JSON.stringify(techStack)}`
     : "";
 
+  // Build task context for mini-plan
+  const doneTasks = allTasks
+    .filter(t => t.status === "done")
+    .map(t => `  ✓ ${t.title}`)
+    .join("\n");
+  const upcomingTasks = allTasks
+    .filter(t => t.status === "todo" && t.id !== task.id)
+    .slice(0, 12)
+    .map(t => `  ○ ${t.title}`)
+    .join("\n");
+
+  const taskContextSection = (doneTasks || upcomingTasks) ? `
+## Implementation Context
+
+**Tasks already completed:**
+${doneTasks || "  None yet — this is the first task"}
+
+**Upcoming tasks (do NOT implement these, just be aware to avoid conflicts):**
+${upcomingTasks || "  None"}
+` : "";
+
   const prompt = `## Task to implement
 
 **Title:** ${task.title}
@@ -103,14 +125,20 @@ export async function runDeveloperAgent(task, projectPath, techStack, retryConte
 **Description:**
 ${task.description || "No additional description provided."}
 ${techNote}
+${taskContextSection}
+## Project Context
+Read CLAUDEBOARD_CONTEXT.md first if it exists — it contains key architectural decisions and patterns from previous tasks.
+After completing this task, UPDATE CLAUDEBOARD_CONTEXT.md with any new decisions, patterns, file structure changes, or naming conventions introduced.
 ${retryNote}
 
 ## Steps
+0. Read CLAUDEBOARD_CONTEXT.md if it exists. Then write a brief implementation plan: which files you will create/modify and how this fits with the done/upcoming tasks above.
 1. Explore the project structure to understand existing patterns
-2. Implement the task completely
+2. Implement the task completely — follow patterns already established
 3. Install any missing dependencies with: npx expo install <pkg>
-4. Run: npx tsc --noEmit and fix any errors
-5. When done, print: TASK_COMPLETE: <summary>`;
+4. If tsconfig.json exists, run: npx tsc --noEmit and fix any errors
+5. Update CLAUDEBOARD_CONTEXT.md with key decisions made
+6. When done, print: TASK_COMPLETE: <summary>`;
 
   try {
     let toolCallCount = 0;

package/agents/expo-health.js

@@ -4,12 +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.
@@ -17,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 }
@@ -44,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})...`));
 
@@ -84,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"));
@@ -150,7 +380,7 @@ async function tryStartExpo(projectPath, port) {
       done(false, `Expo did not become ready within 60s.\n${output.slice(-800)}`), 60000);
 
     try {
-      // Use iOS simulator if available, fallback to web
+      // 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)]

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) {
@@ -89,7 +89,39 @@ export async function runOrchestrator(config) {
       console.log(chalk.dim("  Force restart — skipping existing tasks (they remain in board)\n"));
     }
     console.log(chalk.bold.cyan("[ PHASE 1: ARCHITECTURE ]\n"));
-    const archResult = await runArchitectAgent(prdContent, projectName);
+
+    // ── Detect existing project files (besides the PRD) ───────────────────────
+    let buildOnExisting = false;
+    const EXISTING_CODE_MARKERS = ["package.json", "app.json", "src", "app", "components", "screens"];
+    try {
+      const prdBasename = path.basename(prdPath);
+      const projectFiles = fs.readdirSync(projectPath)
+        .filter(f => !f.startsWith(".") && f !== prdBasename && f !== "node_modules");
+      const hasExistingCode = projectFiles.some(f => EXISTING_CODE_MARKERS.includes(f));
+
+      if (hasExistingCode && !config.forceRestart) {
+        console.log(chalk.yellow("  ⚠  This project already has files:\n"));
+        projectFiles.slice(0, 12).forEach(f => console.log(chalk.dim(`     ${f}`)));
+        if (projectFiles.length > 12) console.log(chalk.dim(`     ... and ${projectFiles.length - 12} more`));
+        console.log();
+
+        const { default: Enquirer } = await import("enquirer");
+        const enquirer = new Enquirer();
+        const answer = await enquirer.prompt({
+          type: "confirm",
+          name: "buildOnExisting",
+          message: "Build tasks on top of the existing project (instead of starting from scratch)?",
+          initial: true,
+        });
+        buildOnExisting = answer.buildOnExisting;
+        console.log();
+      }
+    } catch {}
+
+    const archResult = await runArchitectAgent(prdContent, projectName, {
+      buildOnExisting,
+      projectPath,
+    });
     techStack = archResult.techStack;
     console.log(chalk.green(`\n  ✓ ${archResult.totalTasks} tasks created across ${archResult.epics.length} epics\n`));
   }
@@ -112,6 +144,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();
 
@@ -127,8 +162,11 @@ export async function runOrchestrator(config) {
     console.log(chalk.bold(`\n  → ${task.title}`));
     console.log(chalk.dim(`    Epic: ${task.cb_epics?.name || "—"} | ${task.priority} | ${task.type}`));
 
+    // Fetch all tasks for mini-plan context (done + upcoming)
+    const allTasks = await getAllTasks();
+
     // Run developer agent
-    const devResult = await runDeveloperAgent(task, projectPath, techStack);
+    const devResult = await runDeveloperAgent(task, projectPath, techStack, allTasks);
 
     if (!devResult.success) {
       consecutiveFailures++;
@@ -153,6 +191,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);
@@ -182,6 +243,7 @@ export async function runOrchestrator(config) {
           { ...task, title: `FIX: ${task.title}`, description: qaResult.fixInstructions },
           projectPath,
           techStack,
+          allTasks,
           qaResult.fixInstructions
         );
 

package/agents/qa.js

@@ -3,8 +3,10 @@ import { addLog, completeTask, failTask } from "./board-client.js";
 import { runCommand } from "../tools/terminal.js";
 import { screenshotExpoWeb } from "../tools/screenshot.js";
 import { screenshotSimulator } from "./expo-health.js";
+import { callClaudeWithImage } from "./claude-api.js";
 import { listFiles, readFile } from "../tools/filesystem.js";
 import { execSync } from "child_process";
+import chalk from "chalk";
 import path from "path";
 import fs from "fs";
 import { createConnection } from "net";
@@ -245,15 +247,75 @@ export async function runFullAppQA(projectPath, prdContent, expoPort = 8081) {
     .map(f => "/" + path.relative(appDir, f).replace(/\.(tsx|ts)$/, "").replace(/index$/, ""));
 
   const screenshotDir = path.join(projectPath, ".claudeboard-screenshots", "full-qa");
+  if (!fs.existsSync(screenshotDir)) fs.mkdirSync(screenshotDir, { recursive: true });
+
   const screenshots = [];
+  const issues = [];
+  const prdSummary = prdContent.slice(0, 1200);
 
   for (const route of routeFiles) {
-    const shot = await screenshotExpoWeb(expoPort, screenshotDir, route);
-    if (shot.success) screenshots.push({ route, ...shot });
+    // Try iOS simulator screenshot first, fallback to Expo Web
+    const useIOS = process.env.CLAUDEBOARD_IOS === "1";
+    let shot = null;
+
+    if (useIOS) {
+      const simPath = path.join(screenshotDir, `sim_fullqa_${route.replace(/\//g, "_")}_${Date.now()}.png`);
+      const simShot = await screenshotSimulator(simPath);
+      if (simShot.success) shot = simShot;
+    }
+
+    if (!shot) {
+      const webShot = await screenshotExpoWeb(expoPort, screenshotDir, route);
+      if (webShot.success) shot = webShot;
+    }
+
+    if (!shot) {
+      await new Promise(r => setTimeout(r, 800));
+      continue;
+    }
+
+    screenshots.push({ route, ...shot });
+    console.log(chalk.dim(`    Screenshot: ${route}`));
+
+    // ── Visual analysis with Claude ───────────────────────────────────────
+    try {
+      const { text } = await callClaudeWithImage(
+        "You are a senior mobile QA engineer reviewing screenshots of a React Native / Expo app. Be concise and critical.",
+        `Screen route: ${route}
+
+PRD context (what the app should do):
+${prdSummary}
+
+Review this screenshot and identify ONLY real issues such as:
+- Broken or overlapping layout
+- Empty states that should have content
+- Placeholder text (lorem ipsum, "TODO", "Coming soon", etc.)
+- Visible error messages or red screens
+- Missing navigation or broken UI components
+- Text cut off or unreadable
+
+If the screen looks complete and correct, respond with: OK
+If there are issues, respond with: ISSUE: <brief description>
+Do NOT flag minor styling preferences. Only flag broken or clearly incomplete functionality.`,
+        shot.base64
+      );
+
+      const trimmed = text.trim();
+      if (trimmed.startsWith("ISSUE:")) {
+        const note = trimmed.replace("ISSUE:", "").trim();
+        issues.push({ route, note });
+        console.log(chalk.yellow(`    ⚠ ${route}: ${note}`));
+      } else {
+        console.log(chalk.dim(`    ✓ ${route}: OK`));
+      }
+    } catch (e) {
+      console.log(chalk.dim(`    ⚠ Visual analysis failed for ${route}: ${e.message?.slice(0, 60)}`));
+    }
+
     await new Promise(r => setTimeout(r, 800));
   }
 
-  return { passed: true, routes: routeFiles, screenshotsCaptures: screenshots.length, issues: [] };
+  return { passed: issues.length === 0, routes: routeFiles, screenshotsCaptures: screenshots.length, issues };
 }
 
 // ── Detect truncated files ─────────────────────────────────────────────────────

package/dashboard/index.html

@@ -1364,15 +1364,17 @@ function patchTaskInMemory(patch) {
 // 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;
+  // Normalize to string so comparisons with dataset values are consistent
+  draggedId = String(id);
 
   // Snapshot current order of all columns from memory (reliable — not DOM-dependent)
+  // IDs are stored as strings to match dataset.id comparisons
   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);
+      .map(t => String(t.id));
   }
 
   setTimeout(() => {
@@ -1432,30 +1434,39 @@ async function onDrop(e, status) {
   if (!draggedId) return;
 
   const col = e.currentTarget;
+  // Read insertBefore from the column body's data attribute (set by onDragOver)
   const insertBeforeId = col.dataset.insertBefore || '';
   delete col.dataset.insertBefore;
 
+  // Normalize IDs to strings for consistent comparison (dataset values are always strings)
+  const draggedIdStr = String(draggedId);
+  const insertBeforeIdStr = insertBeforeId ? String(insertBeforeId) : '';
+
   // 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);
+  const sourceStatus = allTasks().find(t => String(t.id) === draggedIdStr)?.status || status;
+
+  // columnIds is already an array of strings (set in onDragStart)
+  const columnIds = (dragColumnOrder[status] || []).filter(id => id !== draggedIdStr);
 
   let newOrderedIds;
-  if (!insertBeforeId) {
-    newOrderedIds = [...columnIds, draggedId];
+  if (!insertBeforeIdStr) {
+    // Dropped at the end of the column
+    newOrderedIds = [...columnIds, draggedIdStr];
   } else {
-    const insertIdx = columnIds.indexOf(insertBeforeId);
+    const insertIdx = columnIds.indexOf(insertBeforeIdStr);
     if (insertIdx === -1) {
-      newOrderedIds = [draggedId, ...columnIds];
+      // insertBeforeId not found in snapshot — fall back to appending at end
+      newOrderedIds = [...columnIds, draggedIdStr];
     } else {
-      newOrderedIds = [...columnIds.slice(0, insertIdx), draggedId, ...columnIds.slice(insertIdx)];
+      newOrderedIds = [...columnIds.slice(0, insertIdx), draggedIdStr, ...columnIds.slice(insertIdx)];
     }
   }
 
   // Optimistic update in memory so re-render is instant
-  const task = allTasks().find(t => t.id === draggedId);
+  const task = allTasks().find(t => String(t.id) === draggedIdStr);
   if (task) task.status = status;
-  newOrderedIds.forEach((id, i) => {
-    const t = allTasks().find(t => t.id === id);
+  newOrderedIds.forEach((idStr, i) => {
+    const t = allTasks().find(t => String(t.id) === idStr);
     if (t) t.priority_order = i + 1;
   });
   renderKanban();
@@ -1463,14 +1474,14 @@ async function onDrop(e, status) {
 
   // Update status if column changed
   if (sourceStatus !== status) {
-    await fetch(`/api/tasks/${draggedId}`, {
+    await fetch(`/api/tasks/${draggedIdStr}`, {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ status }),
     });
   }
 
-  // Persist new order
+  // Persist new order (send as-is — server handles string or numeric IDs)
   await fetch('/api/tasks/reorder', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },

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.13.0",
+  "version": "2.15.1",
   "description": "AI engineering team — from PRD to working mobile app, autonomously",
   "type": "module",
   "bin": {