claudeboard 2.3.0 → 2.4.0

package/agents/claude-api.js

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

package/agents/qa.js

@@ -1,133 +1,103 @@
 import { callClaude, callClaudeJSON, callClaudeWithImage } from "./claude-api.js";
-import { addLog, createTask, startTask, completeTask, failTask } from "./board-client.js";
-import { readFile, listFiles, projectTree } from "../tools/filesystem.js";
-import { runCommand, waitForPort } from "../tools/terminal.js";
+import { addLog } from "./board-client.js";
+import { readFile, listFiles } from "../tools/filesystem.js";
+import { runCommand } from "../tools/terminal.js";
 import { screenshotExpoWeb } from "../tools/screenshot.js";
-import { readRecentLogs, readErrorLogs } from "../tools/supabase-reader.js";
+import { readErrorLogs } from "../tools/supabase-reader.js";
 import path from "path";
 import fs from "fs";
 
-const SYSTEM_QA = `You are a senior QA engineer for mobile apps built with React Native / Expo.
-Your job is to verify that implemented features work correctly and look good.
-
-You receive:
-- The original PRD description of a feature
-- Console logs from the app
-- A screenshot of the current state
-- TypeScript/build errors if any
-
-You must determine:
-1. Does the feature work as described in the PRD?
-2. Does the UI look polished and correct?
-3. Are there any errors in the logs?
-4. What bugs or issues need to be fixed?
-
-Be specific about what's wrong and what needs to change.`;
+const SYSTEM_QA = `You are a senior QA engineer for React Native / Expo apps.
+Verify that implemented features work correctly. Be specific about actual issues.
+If Expo is not running, evaluate purely on code quality and completeness.`;
 
 export async function runQAAgent(task, devResult, projectPath, prdContent, expoPort = 8081) {
   console.log(`  🔍  QA checking: ${task.title}`);
-  await addLog(task.id, "QA agent starting verification", "progress");
-
-  const qaReport = {
-    passed: false,
-    issues: [],
-    screenshotPath: null,
-    fixInstructions: null,
-  };
-
-  // 1. Check for TypeScript errors
-  const tsResult = await runCommand("npx tsc --noEmit 2>&1 | head -30", projectPath, 30000);
-  if (tsResult.stdout.includes("error TS")) {
-    qaReport.issues.push(`TypeScript errors found:\n${tsResult.stdout}`);
-    await addLog(task.id, `QA: TypeScript errors detected`, "error");
+  await addLog(task.id, "QA starting", "progress");
+
+  // ── 1. TypeScript check ────────────────────────────────────────────────────
+  const tsResult = await runCommand("npx tsc --noEmit 2>&1", projectPath, 60000);
+  const tsErrors = tsResult.stdout.includes("error TS") ? tsResult.stdout : null;
+  if (tsErrors) await addLog(task.id, `TypeScript errors detected`, "error");
+
+  // ── 2. Check for truncated/incomplete files ────────────────────────────────
+  const truncationIssues = await checkForTruncatedFiles(task, projectPath);
+  if (truncationIssues.length > 0) {
+    const msg = `Incomplete files: ${truncationIssues.join(", ")}`;
+    await addLog(task.id, msg, "error");
+    return {
+      passed: false,
+      issues: truncationIssues,
+      fixInstructions: `These files are truncated/incomplete:\n${truncationIssues.join("\n")}\n\nRe-implement them completely from scratch.`,
+      screenshotPath: null,
+    };
   }
 
-  // 2. Read console/app logs
-  let appLogs = "";
-  try {
-    // Read from Expo CLI output (saved to temp file by runner)
-    const logFile = path.join(projectPath, ".claudeboard-logs.txt");
-    if (fs.existsSync(logFile)) {
-      appLogs = fs.readFileSync(logFile, "utf8").slice(-3000);
+  // ── 3. Screenshot (only if Expo is running) ────────────────────────────────
+  let visualVerdict = null;
+  const expoRunning = await isPortOpen(expoPort);
+
+  if (expoRunning) {
+    await addLog(task.id, "Taking screenshot...", "progress");
+    const screenshotDir = path.join(projectPath, ".claudeboard-screenshots");
+    const screenshot = await screenshotExpoWeb(expoPort, screenshotDir);
+    if (screenshot.success && screenshot.base64) {
+      const visionResult = await callClaudeWithImage(
+        SYSTEM_QA,
+        `Task: ${task.title}\nExpected: ${task.description}\n\nDoes the UI look correct? Any visual bugs?`,
+        screenshot.base64
+      );
+      visualVerdict = visionResult.text;
+      await addLog(task.id, `Visual: ${visualVerdict}`, "progress");
+    } else {
+      await addLog(task.id, `Screenshot failed: ${screenshot.error}`, "progress");
     }
-  } catch {}
-
-  // 3. Read Supabase error logs if project uses Supabase
-  let supabaseLogs = [];
-  try {
-    supabaseLogs = await readErrorLogs("logs", 10);
-  } catch {}
-
-  // 4. Take screenshot
-  await addLog(task.id, "Taking screenshot of Expo Web...", "progress");
-  const screenshotDir = path.join(projectPath, ".claudeboard-screenshots");
-  const screenshot = await screenshotExpoWeb(expoPort, screenshotDir);
-
-  if (screenshot.success) {
-    qaReport.screenshotPath = screenshot.imagePath;
-    await addLog(task.id, `Screenshot captured: ${path.basename(screenshot.imagePath)}`, "progress");
   } else {
-    await addLog(task.id, `Screenshot failed: ${screenshot.error}`, "progress");
-  }
-
-  // 5. Visual QA via Claude Vision
-  let visualVerdict = null;
-  if (screenshot.success && screenshot.base64) {
-    const visualPrompt = `
-This is a screenshot of a React Native / Expo app screen.
-
-Task that was just implemented: ${task.title}
-Expected behavior from PRD: ${task.description}
-
-Evaluate:
-1. Does the screen look implemented? (not blank, not error screen)
-2. Does the UI look polished? (proper layout, readable text, no obvious visual bugs)
-3. Does it appear to match what was described in the task?
-4. Any visual issues? (overlapping elements, cut off text, missing components)
-
-Be concise and specific.`;
-
-    const visionResult = await callClaudeWithImage(SYSTEM_QA, visualPrompt, screenshot.base64);
-    visualVerdict = visionResult.text;
-    await addLog(task.id, `Visual QA: ${visualVerdict.slice(0, 200)}`, "progress");
+    await addLog(task.id, "Expo not running — code-only QA", "progress");
   }
 
-  // 6. Functional QA — read code and verify logic
-  const relevantFiles = listFiles(projectPath, [".ts", ".tsx"])
-    .filter((f) => {
-      const rel = path.relative(projectPath, f).toLowerCase();
-      return task.title.toLowerCase().split(" ").some((w) => w.length > 4 && rel.includes(w));
-    })
-    .slice(0, 5);
-
+  // ── 4. Read ALL relevant code — no artificial limits ──────────────────────
+  // Claude Code already wrote these files — we read them fully for QA review
+  const relevantFiles = getRelevantFiles(task, projectPath);
   let codeContext = "";
   for (const f of relevantFiles) {
     const content = readFile(f);
     if (content) {
-      codeContext += `\n### ${path.relative(projectPath, f)}\n${content.slice(0, 1500)}\n`;
+      // No slice — read the complete file
+      codeContext += `\n### ${path.relative(projectPath, f)}\n${content}\n`;
     }
   }
 
-  const functionalVerdict = await callClaudeJSON(
+  // ── 5. App logs (full) ─────────────────────────────────────────────────────
+  let appLogs = "";
+  try {
+    const logFile = path.join(projectPath, ".claudeboard-logs.txt");
+    if (fs.existsSync(logFile)) appLogs = fs.readFileSync(logFile, "utf8");
+  } catch {}
+
+  // ── 6. Supabase errors ─────────────────────────────────────────────────────
+  let supabaseLogs = [];
+  try { supabaseLogs = await readErrorLogs("logs", 20); } catch {}
+
+  // ── 7. Functional verdict ─────────────────────────────────────────────────
+  const verdict = await callClaudeJSON(
     SYSTEM_QA,
-    `
-Task: ${task.title}
+    `Task: ${task.title}
 Description: ${task.description}
 
-Code implemented:
+Implemented code (complete files):
 ${codeContext || "Could not read relevant files"}
 
-Console logs:
-${appLogs || "No logs captured"}
-
-Supabase errors:
-${supabaseLogs.length > 0 ? JSON.stringify(supabaseLogs) : "None"}
+TypeScript: ${tsErrors ? `ERRORS:\n${tsErrors}` : "Clean — no errors"}
+App logs: ${appLogs || "None"}
+Supabase errors: ${supabaseLogs.length > 0 ? JSON.stringify(supabaseLogs, null, 2) : "None"}
+Visual QA: ${visualVerdict || "No screenshot (Expo not running — evaluate code only)"}
 
-TypeScript status:
-${tsResult.stdout.includes("error TS") ? tsResult.stdout : "No TypeScript errors"}
-
-Visual QA notes:
-${visualVerdict || "No screenshot available"}
+EVALUATION RULES:
+- PASS if: code is complete, TypeScript is clean, implementation matches description
+- FAIL only if: code is incomplete/truncated, has TS errors, or implementation is clearly wrong
+- Do NOT fail just because Expo isn't running
+- Do NOT fail for minor style preferences
 
 Respond with JSON:
 {
@@ -135,74 +105,125 @@ Respond with JSON:
   "confidence": 0-100,
   "issues": ["specific issue 1", "specific issue 2"],
   "summary": "One sentence verdict",
-  "fixInstructions": "If failed: specific instructions for the developer to fix. If passed: null"
-}`,
-    { maxTokens: 2000 }
+  "fixInstructions": "Specific fix instructions if failed, null if passed"
+}`
   );
 
-  qaReport.passed = functionalVerdict.passed;
-  qaReport.issues = functionalVerdict.issues || [];
-  qaReport.fixInstructions = functionalVerdict.fixInstructions;
+  const qaReport = {
+    passed: verdict.passed,
+    issues: verdict.issues || [],
+    fixInstructions: verdict.fixInstructions,
+    screenshotPath: null,
+  };
 
   if (qaReport.passed) {
-    await addLog(task.id, `✓ QA passed (${functionalVerdict.confidence}%): ${functionalVerdict.summary}`, "complete");
+    await addLog(task.id, `✓ QA passed (${verdict.confidence}%): ${verdict.summary}`, "complete");
     console.log(`  ✓ QA passed: ${task.title}`);
   } else {
-    await addLog(
-      task.id,
-      `✗ QA failed: ${functionalVerdict.summary}. Issues: ${qaReport.issues.slice(0, 2).join("; ")}`,
-      "error"
-    );
-    console.log(`  ✗ QA failed: ${task.title}`);
-    console.log(`    Issues: ${qaReport.issues.join(", ")}`);
+    await addLog(task.id, `✗ QA failed: ${verdict.summary}`, "error");
+    console.log(`  ✗ QA failed: ${task.title} — ${verdict.issues?.slice(0,2).join(", ")}`);
   }
 
   return qaReport;
 }
 
-/**
- * Full app QA — run at end of development phase
- * Goes through every major screen and validates against PRD
- */
+// ── Detect truncated/incomplete files ──────────────────────────────────────────
+async function checkForTruncatedFiles(task, projectPath) {
+  const issues = [];
+  const keywords = task.title.toLowerCase().split(" ").filter(w => w.length > 4);
+
+  const files = listFiles(projectPath, [".ts", ".tsx"])
+    .filter(f => {
+      const rel = path.relative(projectPath, f).toLowerCase();
+      if (rel.includes("node_modules") || rel.includes(".claudeboard")) return false;
+      return keywords.some(kw => rel.includes(kw));
+    });
+
+  for (const f of files) {
+    const content = readFile(f);
+    if (!content) continue;
+    const rel = path.relative(projectPath, f);
+    const lastLines = content.split("\n").slice(-5).join("\n").trim();
+    const openBraces  = (content.match(/\{/g) || []).length;
+    const closeBraces = (content.match(/\}/g) || []).length;
+
+    const truncated =
+      lastLines.endsWith("{") || lastLines.endsWith("(") || lastLines.endsWith(",") ||
+      lastLines.match(/^(import|\/\/) *$/) ||
+      openBraces > closeBraces + 3 ||
+      (content.length < 80 && (rel.includes("store") || rel.includes("hook") || rel.includes("screen")));
+
+    if (truncated) {
+      issues.push(`${rel} (ends: "${lastLines.slice(-80)}")`);
+    }
+  }
+  return issues;
+}
+
+// ── Full app QA ────────────────────────────────────────────────────────────────
 export async function runFullAppQA(projectPath, prdContent, expoPort = 8081) {
   console.log("\n  🔍  Running full app QA...");
 
-  // Detect routes from expo-router structure
-  const routeFiles = listFiles(path.join(projectPath, "app"), [".tsx", ".ts"])
-    .filter((f) => !f.includes("_layout") && !f.includes("_error"))
-    .map((f) => {
-      const rel = path.relative(path.join(projectPath, "app"), f);
-      return "/" + rel.replace(/\.(tsx|ts)$/, "").replace(/index$/, "");
-    });
+  if (!await isPortOpen(expoPort)) {
+    console.log("  ⚠️  Expo not running — skipping visual QA");
+    return { passed: true, routes: [], screenshotsCaptures: 0, issues: [] };
+  }
+
+  const appDir = path.join(projectPath, "app");
+  if (!fs.existsSync(appDir)) return { passed: true, routes: [], screenshotsCaptures: 0, issues: [] };
+
+  const routeFiles = listFiles(appDir, [".tsx", ".ts"])
+    .filter(f => !f.includes("_layout") && !f.includes("_error"))
+    .map(f => "/" + path.relative(appDir, f).replace(/\.(tsx|ts)$/, "").replace(/index$/, ""));
 
   const screenshotDir = path.join(projectPath, ".claudeboard-screenshots", "full-qa");
   const screenshots = [];
 
-  for (const route of routeFiles.slice(0, 10)) {
+  for (const route of routeFiles) {
     const shot = await screenshotExpoWeb(expoPort, screenshotDir, route);
     if (shot.success) screenshots.push({ route, ...shot });
-    await new Promise((r) => setTimeout(r, 1000));
+    await new Promise(r => setTimeout(r, 800));
   }
 
-  // Send all screenshots + PRD to Claude for final verdict
-  const report = {
-    passed: screenshots.length > 0,
-    routes: routeFiles,
-    screenshotsCaptures: screenshots.length,
-    issues: [],
-  };
+  const report = { passed: true, routes: routeFiles, screenshotsCaptures: screenshots.length, issues: [] };
 
   for (const shot of screenshots) {
     if (!shot.base64) continue;
     const verdict = await callClaudeWithImage(
       SYSTEM_QA,
-      `Route: ${shot.route}\n\nPRD for reference:\n${prdContent.slice(0, 2000)}\n\nDoes this screen look complete and working? Any issues?`,
+      `Route: ${shot.route}\n\nFull PRD:\n${prdContent}\n\nAny obvious issues?`,
       shot.base64
     );
     if (verdict.text.toLowerCase().includes("issue") || verdict.text.toLowerCase().includes("problem")) {
-      report.issues.push({ route: shot.route, note: verdict.text.slice(0, 200) });
+      report.issues.push({ route: shot.route, note: verdict.text });
     }
   }
 
   return report;
 }
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function getRelevantFiles(task, projectPath) {
+  const keywords = task.title.toLowerCase().split(" ").filter(w => w.length > 4);
+  return listFiles(projectPath, [".ts", ".tsx"])
+    .filter(f => {
+      const rel = path.relative(projectPath, f).toLowerCase();
+      if (rel.includes("node_modules") || rel.includes(".claudeboard")) return false;
+      return keywords.some(kw => rel.includes(kw));
+    });
+  // No .slice() — return all matching files
+}
+
+async function isPortOpen(port) {
+  try {
+    const { default: net } = await import("net");
+    return new Promise(resolve => {
+      const sock = new net.Socket();
+      sock.setTimeout(800);
+      sock.once("connect", () => { sock.destroy(); resolve(true); });
+      sock.once("error", () => resolve(false));
+      sock.once("timeout", () => resolve(false));
+      sock.connect(port, "127.0.0.1");
+    });
+  } catch { return false; }
+}

package/bin/cli.js

@@ -166,11 +166,21 @@ program
       process.exit(1);
     }
 
+    const resolvedProject = path.resolve(opts.project);
+
+    // Persist the project path so `claudeboard start` uses the right directory for Expo
+    const configPath = path.join(process.cwd(), ".claudeboard.json");
+    try {
+      const saved = JSON.parse(fs.readFileSync(configPath, "utf8"));
+      saved.projectDir = resolvedProject;
+      fs.writeFileSync(configPath, JSON.stringify(saved, null, 2));
+    } catch {}
+
     const { runOrchestrator } = await import("../agents/orchestrator.js");
 
     await runOrchestrator({
       prdPath: path.resolve(opts.prd),
-      projectPath: path.resolve(opts.project),
+      projectPath: resolvedProject,
       supabaseUrl: config.supabaseUrl,
       supabaseKey: config.supabaseKey,
       projectName: config.projectName,

package/dashboard/index.html

@@ -929,7 +929,14 @@
       <button class="stab" id="tab-detail" onclick="switchTab('detail')">Detail</button>
     </div>
     <div class="sidebar-body" id="sidebarBody">
-      <div class="detail-empty">Waiting for activity...<br><br>Agents will log<br>their work here.</div>
+      <!-- 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>
+      <!-- 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>
     </div>
   </div>
 
@@ -1102,6 +1109,7 @@ function connectWS() {
     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);
@@ -1265,10 +1273,6 @@ async function onDrop(e, status) {
 
 // ── CARD SELECT ───────────────────────────────────────────────────────────────
 async function selectCard(id) {
-  activeTab = 'detail';
-  document.getElementById('tab-activity').className = 'stab';
-  document.getElementById('tab-detail').className = 'stab active';
-
   const task = allTasks().find(t => t.id === id);
   if (!task) return;
   selectedTask = task;
@@ -1276,8 +1280,8 @@ async function selectCard(id) {
   const res = await fetch(`/api/tasks/${id}/logs`);
   const { logs } = await res.json();
 
-  const el = document.getElementById('sidebarBody');
-  el.innerHTML = `
+  // Write into the dedicated detail pane (never touches activityPane)
+  document.getElementById('detailPane').innerHTML = `
     <div>
       <div class="detail-title">${esc(task.title)}</div>
       <div class="detail-tags">
@@ -1295,16 +1299,23 @@ async function selectCard(id) {
           }).join('')
       }
     </div>`;
+
+  // Switch to detail tab
+  activeTab = 'detail';
+  document.getElementById('tab-activity').className = 'stab';
+  document.getElementById('tab-detail').className = 'stab active';
+  document.getElementById('activityPane').style.display = 'none';
+  document.getElementById('detailPane').style.display = 'block';
 }
 
 // ── LOGS ──────────────────────────────────────────────────────────────────────
 function renderLogs() {
-  const el = document.getElementById('sidebarBody');
+  // Only update the activity pane — never overwrites detail pane
+  const el = document.getElementById('activityPane');
   if (!board.logs?.length) {
     el.innerHTML = `<div class="detail-empty">Waiting for activity...<br><br>Agents will log<br>their work here.</div>`;
     return;
   }
-
   const icons = { start: '▶', complete: '✓', error: '✕', progress: '·', info: '·' };
   el.innerHTML = board.logs.map(l => {
     const t = new Date(l.created_at).toLocaleTimeString('en',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit'});
@@ -1325,6 +1336,9 @@ function switchTab(tab) {
   activeTab = tab;
   document.getElementById('tab-activity').className = 'stab' + (tab === 'activity' ? ' active' : '');
   document.getElementById('tab-detail').className   = 'stab' + (tab === 'detail'   ? ' active' : '');
+  // Show/hide panes — never overwrite the other pane's content
+  document.getElementById('activityPane').style.display = tab === 'activity' ? 'block' : 'none';
+  document.getElementById('detailPane').style.display   = tab === 'detail'   ? 'block' : 'none';
   if (tab === 'activity') renderLogs();
 }
 

package/package.json

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