claudeboard 2.14.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,7 +67,7 @@ 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
@@ -75,7 +75,7 @@ RULES:
 `;
 
 // ── 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) {
@@ -97,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}
@@ -104,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/orchestrator.js

@@ -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`));
   }
@@ -130,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++;
@@ -208,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/package.json

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