claudeboard 2.15.4 → 2.16.0

package/agents/architect.js

@@ -3,7 +3,7 @@ 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.
+const SYSTEM_MOBILE = `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.
 
 Rules:
@@ -15,6 +15,19 @@ Rules:
 - 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`;
 
+const SYSTEM_WEB = `You are a senior web app architect specializing in React + Vite apps.
+Your job is to read a PRD and produce a complete, ordered task breakdown.
+
+Rules:
+- Think like a real engineering team: setup first, core features, then polish, then QA
+- Each task must be self-contained and implementable by a single developer agent
+- Be specific — tasks like "implement auth" are too vague. Break into: "create login page component", "implement Supabase auth hook", "add protected route with React Router"
+- Always include: project setup (Vite + React), routing, data layer, each page/view, error handling, loading states, and final QA tasks
+- Use React Router v6 for routing, TailwindCSS or CSS Modules for styles, Vite as build tool
+- Priority: high = blocking/core, medium = main features, low = polish/nice-to-have
+- Types: config (setup/deps), feature (new page 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`;
+
 /**
  * Build a concise snapshot of the existing project:
  * - Top-level file/folder structure
@@ -67,7 +80,8 @@ function getProjectSnapshot(projectPath) {
 }
 
 export async function runArchitectAgent(prdContent, projectName, options = {}) {
-  const { buildOnExisting = false, projectPath = null } = options;
+  const { buildOnExisting = false, projectPath = null, appType = "mobile" } = options;
+  const SYSTEM = appType === "web" ? SYSTEM_WEB : SYSTEM_MOBILE;
 
   console.log("  Architect analyzing PRD...");
 
@@ -79,6 +93,24 @@ export async function runArchitectAgent(prdContent, projectName, options = {}) {
     ? `\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 techStackShape = appType === "web"
+    ? `"techStack": {
+    "framework": "vite+react",
+    "routing": "react-router-dom",
+    "stateManagement": "...",
+    "backend": "supabase / firebase / none",
+    "ui": "tailwindcss / css-modules / shadcn-ui",
+    "otherDeps": ["list of npm packages needed"]
+  }`
+    : `"techStack": {
+    "framework": "expo",
+    "navigation": "expo-router or react-navigation",
+    "stateManagement": "...",
+    "backend": "supabase / firebase / none",
+    "ui": "nativewind / tamagui / stylesheet",
+    "otherDeps": ["list of npm packages needed"]
+  }`;
+
   const result = await callClaudeJSON(SYSTEM, `
 Project: ${projectName}
 
@@ -88,14 +120,7 @@ ${existingProjectSection}
 
 Return this JSON structure:
 {
-  "techStack": {
-    "framework": "expo",
-    "navigation": "expo-router or react-navigation",
-    "stateManagement": "...",
-    "backend": "supabase / firebase / none",
-    "ui": "nativewind / tamagui / stylesheet",
-    "otherDeps": ["list of npm packages needed"]
-  },
+  ${techStackShape},
   "epics": [
     {
       "name": "Epic name (e.g. Project Setup, Authentication, Home Screen)",

package/agents/expo-health.js

@@ -10,9 +10,10 @@ import { createConnection } from "net";
 import { spawn as _spawn, execSync } from "child_process";
 
 const require = createRequire(import.meta.url);
-// On Windows, npm-installed binaries have a .cmd wrapper — use it for spawn()
+// On Windows, use shell:true to avoid spawn EINVAL with .cmd wrappers
 const isWin = process.platform === "win32";
-const NPX = isWin ? "npx.cmd" : "npx";
+const NPX = "npx";
+const SPAWN_OPTS_BASE = isWin ? { shell: true } : {};
 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
@@ -248,6 +249,7 @@ export async function ensureDevBuild(projectPath) {
 
     try {
       const proc = _spawn(NPX, ["expo", "run:ios", "--simulator"], {
+        ...SPAWN_OPTS_BASE,
         cwd: projectPath,
         env: { ...process.env, CI: "1", EXPO_NO_INTERACTIVE: "1" },
         stdio: "pipe",
@@ -390,6 +392,7 @@ async function tryStartExpo(projectPath, port) {
         : ["expo", "start", "--web", "--port", String(port)];
       
       proc = _spawn(NPX, expoArgs, {
+        ...SPAWN_OPTS_BASE,
         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",
@@ -582,3 +585,143 @@ export async function tapSimulator(x, y) {
     return true;
   } catch { return false; }
 }
+
+// ── Vite Health Check (web apps) ─────────────────────────────────────────────
+
+/**
+ * Ensure Vite is installed in the project, then start the dev server.
+ * Returns { ready: boolean, process: ChildProcess|null }
+ */
+export async function runViteHealthCheck(projectPath, port = 5173) {
+  console.log(chalk.bold.cyan("\n[ VITE HEALTH CHECK ]\n"));
+
+  if (!fs.existsSync(path.join(projectPath, "package.json"))) {
+    console.log(chalk.dim("  No package.json — skipping"));
+    return { ready: false, process: null };
+  }
+
+  // Install deps
+  const installOk = await installDeps(projectPath);
+  if (!installOk) {
+    await injectFixTask(projectPath, "npm install fails — cannot start Vite",
+      "npm install fails with version conflicts. Fix all version constraints in package.json, then run npm install --legacy-peer-deps."
+    );
+    console.log(chalk.yellow("  ✗ Install failed — injected fix task into board\n"));
+    return { ready: false, process: null };
+  }
+
+  // Ensure vite is available
+  const pkgRaw = fs.readFileSync(path.join(projectPath, "package.json"), "utf8");
+  const pkg = JSON.parse(pkgRaw);
+  const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+  if (!allDeps["vite"]) {
+    console.log(chalk.dim("  Vite not found — installing vite + @vitejs/plugin-react..."));
+    await runCommand("npm install --save-dev vite @vitejs/plugin-react 2>&1", projectPath, 120000);
+  }
+
+  // Start Vite dev server
+  for (let attempt = 1; attempt <= MAX_FIX_ATTEMPTS; attempt++) {
+    console.log(chalk.dim(`  Starting Vite (attempt ${attempt}/${MAX_FIX_ATTEMPTS})...`));
+    const result = await tryStartVite(projectPath, port);
+
+    if (result.ready) {
+      console.log(chalk.green(`  ✓ Vite running on http://localhost:${port}\n`));
+      return { ready: true, process: result.process };
+    }
+
+    const error = result.error;
+    console.log(chalk.yellow(`  ✗ Vite error: ${error?.split("\n")[0]?.slice(0, 120)}`));
+
+    if (attempt === MAX_FIX_ATTEMPTS) break;
+
+    const fixed = await applyExpoFix(projectPath, error);
+    if (!fixed) break;
+    console.log(chalk.dim("  Fix applied — retrying..."));
+  }
+
+  const lastError = await getLastExpoError(projectPath);
+  await injectFixTask(projectPath,
+    "FIX: Vite fails to start — resolve dependency errors",
+    `Vite dev server cannot start. Fix all issues so the app boots without errors.\n\nLast error:\n${lastError}\n\nSteps:\n1. Read package.json and identify incompatible versions\n2. Run: npm install --legacy-peer-deps\n3. Verify with: npx vite --port ${port}`
+  );
+
+  console.log(chalk.yellow("  ✗ Vite broken — injected fix task\n"));
+  return { ready: false, process: null };
+}
+
+async function tryStartVite(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; }
+      if (!ready && error) saveLastError(projectPath, error);
+      resolve({ ready, process: proc, error });
+    };
+
+    const timeout = setTimeout(() =>
+      done(false, `Vite did not become ready within 60s.\n${output.slice(-800)}`), 60000);
+
+    try {
+      proc = _spawn(NPX, ["vite", "--port", String(port), "--host", "localhost"], {
+        ...SPAWN_OPTS_BASE,
+        cwd: projectPath,
+        env: (() => { const e = { ...process.env }; delete e.ANTHROPIC_API_KEY; return e; })(),
+        stdio: "pipe",
+      });
+
+      const checkError = (text) => {
+        if (
+          text.includes("Cannot find module") ||
+          text.includes("error during build") ||
+          text.includes("Failed to resolve")
+        ) {
+          clearTimeout(timeout);
+          setTimeout(() => done(false, output.slice(-2000)), 1500);
+        }
+      };
+
+      proc.stdout.on("data", (d) => {
+        const text = d.toString();
+        output += text;
+        if (
+          text.includes("Local:") ||
+          text.includes(`localhost:${port}`) ||
+          text.includes("ready in")
+        ) {
+          setTimeout(() => {
+            if (!resolved) { clearTimeout(timeout); done(true, null); }
+          }, 2000);
+        }
+        checkError(text);
+      });
+
+      proc.stderr.on("data", (d) => {
+        const text = d.toString();
+        output += text;
+        checkError(text);
+      });
+
+      proc.on("close", (code) => {
+        clearTimeout(timeout);
+        if (!resolved) done(false, `Vite exited (code ${code})\n${output.slice(-1000)}`);
+      });
+
+    } catch (e) {
+      clearTimeout(timeout);
+      done(false, e.message);
+    }
+  });
+}
+
+// ── Generic app health check — delegates to Expo or Vite ─────────────────────
+export async function runAppHealthCheck(projectPath, port, appType = "mobile") {
+  if (appType === "web") {
+    return runViteHealthCheck(projectPath, port || 5173);
+  }
+  return runExpoHealthCheck(projectPath, port || 8081);
+}

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, ensureDevBuild, packageJsonHash } from "./expo-health.js";
+import { runAppHealthCheck, ensureDevBuild, packageJsonHash } from "./expo-health.js";
 import { createConnection } from "net";
 
 function isPortOpen(port) {
@@ -45,6 +45,7 @@ export async function runOrchestrator(config) {
     supabaseUrl,
     supabaseKey,
     projectName,
+    appType = "mobile",
     expoPort = 8081,
     skipArchitect = false,
     useIOS = false,
@@ -121,6 +122,7 @@ export async function runOrchestrator(config) {
     const archResult = await runArchitectAgent(prdContent, projectName, {
       buildOnExisting,
       projectPath,
+      appType,
     });
     techStack = archResult.techStack;
     console.log(chalk.green(`\n  ✓ ${archResult.totalTasks} tasks created across ${archResult.epics.length} epics\n`));
@@ -132,9 +134,10 @@ export async function runOrchestrator(config) {
   const logFile = path.join(projectPath, ".claudeboard-logs.txt");
   const logStream = fs.createWriteStream(logFile, { flags: "a" });
 
-  // ── EXPO HEALTH CHECK: install deps + start + auto-fix errors ─────────────
+  // ── APP HEALTH CHECK: install deps + start dev server + auto-fix errors ───
   // Runs before development loop so the app is visible from task #1
-  const expoHealth = await runExpoHealthCheck(projectPath, expoPort);
+  const devPort = appType === "web" ? (expoPort !== 8081 ? expoPort : 5173) : expoPort;
+  const expoHealth = await runAppHealthCheck(projectPath, devPort, appType);
   expoReady = expoHealth.ready;
   expoProcess = expoHealth.process;
 
@@ -183,10 +186,10 @@ export async function runOrchestrator(config) {
     consecutiveFailures = 0;
 
     // ── If this was an Expo fix task, clear the error and re-health-check ────
-    if (task.title?.toLowerCase().includes("expo") && task.type === "bug") {
+    if ((task.title?.toLowerCase().includes("expo") || task.title?.toLowerCase().includes("vite")) && task.type === "bug") {
       try { fs.unlinkSync(path.join(projectPath, ".claudeboard-expo-error.txt")); } catch {}
-      console.log(chalk.dim("  Expo fix completed — re-running health check..."));
-      const recheck = await runExpoHealthCheck(projectPath, expoPort);
+      console.log(chalk.dim("  Dev server fix completed — re-running health check..."));
+      const recheck = await runAppHealthCheck(projectPath, devPort, appType);
       expoReady = recheck.ready;
       expoProcess = recheck.process;
     }
@@ -216,10 +219,10 @@ export async function runOrchestrator(config) {
 
     // ── Re-check Expo health if it's supposed to be running but isn't ────────
     if (expoReady) {
-      const portOpen = await isPortOpen(expoPort);
+      const portOpen = await isPortOpen(devPort);
       if (!portOpen) {
-        console.log(chalk.yellow("  ⚠ Expo seems to have crashed — running health check..."));
-        const recheck = await runExpoHealthCheck(projectPath, expoPort);
+        console.log(chalk.yellow("  ⚠ Dev server seems to have crashed — running health check..."));
+        const recheck = await runAppHealthCheck(projectPath, devPort, appType);
         expoReady = recheck.ready;
         expoProcess = recheck.process;
       }
@@ -229,10 +232,10 @@ export async function runOrchestrator(config) {
     const shouldRunQA = expoReady && ["feature", "bug"].includes(task.type);
 
     if (shouldRunQA) {
-      // Give Expo a moment to hot-reload
+      // Give dev server a moment to hot-reload
       await new Promise((r) => setTimeout(r, 3000));
 
-      const qaResult = await runQAAgent(task, devResult, projectPath, prdContent, expoPort);
+      const qaResult = await runQAAgent(task, devResult, projectPath, prdContent, devPort);
 
       if (!qaResult.passed && qaResult.fixInstructions) {
         console.log(chalk.yellow("  ↩️  QA failed — sending back to developer..."));
@@ -249,7 +252,7 @@ export async function runOrchestrator(config) {
 
         if (fixedByDev.success) {
           await new Promise((r) => setTimeout(r, 3000));
-          await runQAAgent(task, fixedByDev, projectPath, prdContent, expoPort);
+          await runQAAgent(task, fixedByDev, projectPath, prdContent, devPort);
         }
       }
     }
@@ -261,7 +264,7 @@ export async function runOrchestrator(config) {
   // ── PHASE 3: FINAL QA ─────────────────────────────────────────────────────
   if (expoReady) {
     console.log(chalk.bold.cyan("\n[ PHASE 3: FINAL QA ]\n"));
-    const fullQAReport = await runFullAppQA(projectPath, prdContent, expoPort);
+    const fullQAReport = await runFullAppQA(projectPath, prdContent, devPort);
 
     if (fullQAReport.issues.length > 0) {
       console.log(chalk.yellow(`  ⚠️  Final QA found ${fullQAReport.issues.length} issues:`));

package/bin/cli.js

@@ -52,6 +52,12 @@ program
 
     const answers = await enquirer.prompt([
       { type: "input", name: "projectName", message: "Project name:", initial: path.basename(process.cwd()) },
+      {
+        type: "select",
+        name: "appType",
+        message: "App type:",
+        choices: ["mobile (Expo / React Native)", "web (Vite + React)"],
+      },
       { type: "input", name: "supabaseUrl", message: "Supabase URL:", hint: "https://xxxx.supabase.co" },
       { type: "input", name: "supabaseKey", message: "Supabase anon key:" },
       { type: "password", name: "anthropicKey", message: "Anthropic API key:", hint: "sk-ant-..." },
@@ -62,6 +68,7 @@ program
 
     const config = {
       projectName: answers.projectName,
+      appType: answers.appType.startsWith("mobile") ? "mobile" : "web",
       port: parseInt(answers.port),
       supabaseUrl: answers.supabaseUrl,
       supabaseKey: answers.supabaseKey,
@@ -193,6 +200,7 @@ program
       supabaseUrl: config.supabaseUrl,
       supabaseKey: config.supabaseKey,
       projectName: config.projectName,
+      appType: config.appType || "mobile",
       expoPort: parseInt(opts.expoPort),
       forceRestart: !!opts.restart,
       useIOS: !!opts.ios,

package/package.json

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