claudeboard 2.10.0 → 2.11.0

package/agents/developer.js

@@ -44,7 +44,10 @@ function buildEnv() {
   ].filter(Boolean);
 
   const fullPath = [...new Set(pathParts.join(":").split(":"))].join(":");
-  return { ...process.env, PATH: fullPath, HOME: process.env.HOME };
+  const env = { ...process.env, PATH: fullPath, HOME: process.env.HOME };
+  // Remove API key so Claude Code uses the Claude subscription (not API credits)
+  delete env.ANTHROPIC_API_KEY;
+  return env;
 }
 
 const CLAUDE_PATH = resolveClaudePath();

package/agents/expo-health.js

@@ -150,9 +150,15 @@ async function tryStartExpo(projectPath, port) {
 
     try {
       const { spawn } = require("child_process");
-      proc = spawn("npx", ["expo", "start", "--web", "--port", String(port)], {
+      // Use iOS simulator if available, fallback to web
+      const useIOS = process.env.CLAUDEBOARD_IOS === "1" || await isSimulatorAvailable();
+      const expoArgs = useIOS
+        ? ["expo", "start", "--ios", "--port", String(port)]
+        : ["expo", "start", "--web", "--port", String(port)];
+      
+      proc = spawn("npx", expoArgs, {
         cwd: projectPath,
-        env: { ...process.env, CI: "1", EXPO_NO_INTERACTIVE: "1", EXPO_NO_DOTENV: "0" },
+        env: (() => { const e = { ...process.env, CI: "1", EXPO_NO_INTERACTIVE: "1", EXPO_NO_DOTENV: "0" }; delete e.ANTHROPIC_API_KEY; return e; })(),
         stdio: "pipe",
       });
 
@@ -178,7 +184,10 @@ async function tryStartExpo(projectPath, port) {
           text.includes("Metro waiting on") ||
           text.includes(`http://localhost:${port}`) ||
           text.includes("Bundling complete") ||
-          text.includes("Web is waiting on")
+          text.includes("Web is waiting on") ||
+          text.includes("Opening on iOS") ||
+          text.includes("Installed on iOS") ||
+          text.includes("Building JavaScript bundle")
         ) {
           setTimeout(() => {
             // If we haven't already failed, declare success
@@ -309,3 +318,39 @@ function hasFatalNpmError(output) {
 function getFatalError(output) {
   return output.split("\n").find(l => l.includes("npm error") && !l.includes("peer")) || output.slice(-200);
 }
+
+// ── iOS Simulator detection ───────────────────────────────────────────────────
+async function isSimulatorAvailable() {
+  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 {
+    return false;
+  }
+}
+
+// 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 };
+  } catch (e) {
+    return { success: false, error: e.message };
+  }
+}
+
+// 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

@@ -47,8 +47,12 @@ export async function runOrchestrator(config) {
     projectName,
     expoPort = 8081,
     skipArchitect = false,
+    useIOS = false,
   } = config;
 
+  // Set env var so expo-health and QA agents know to use iOS simulator
+  if (useIOS) process.env.CLAUDEBOARD_IOS = "1";
+
   console.log(chalk.cyan("\n╔═══════════════════════════════════════╗"));
   console.log(chalk.cyan("║") + chalk.bold("  🤖 CLAUDEBOARD ORCHESTRATOR STARTING ") + chalk.cyan("║"));
   console.log(chalk.cyan("╚═══════════════════════════════════════╝\n"));

package/agents/qa.js

@@ -2,6 +2,7 @@ import { query } from "@anthropic-ai/claude-agent-sdk";
 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 { listFiles, readFile } from "../tools/filesystem.js";
 import { execSync } from "child_process";
 import path from "path";
@@ -35,7 +36,10 @@ function buildEnv() {
     `${process.env.HOME}/.nvm/versions/node/current/bin`,
   ].filter(Boolean);
   const fullPath = [...new Set(pathParts.join(":").split(":"))].join(":");
-  return { ...process.env, PATH: fullPath, HOME: process.env.HOME };
+  const env = { ...process.env, PATH: fullPath, HOME: process.env.HOME };
+  // Remove API key so Claude Code uses the Claude subscription (not API credits)
+  delete env.ANTHROPIC_API_KEY;
+  return env;
 }
 
 const CLAUDE_PATH = resolveClaudePath();
@@ -73,16 +77,28 @@ export async function runQAAgent(task, devResult, projectPath, prdContent, expoP
     }
   }
 
-  // ── 3. Take screenshot if Expo is running ─────────────────────────────────
+  // ── 3. Take screenshot — iOS simulator first, fallback to web ────────────
   let screenshotBase64 = null;
   let screenshotPath = null;
   if (expoRunning) {
     await addLog(task.id, "Taking screenshot...", "progress");
     const screenshotDir = path.join(projectPath, ".claudeboard-screenshots");
-    const shot = await screenshotExpoWeb(expoPort, screenshotDir);
-    if (shot.success && shot.base64) {
-      screenshotBase64 = shot.base64;
-      screenshotPath = shot.path;
+    if (!fs.existsSync(screenshotDir)) fs.mkdirSync(screenshotDir, { recursive: true });
+
+    // Try iOS simulator first (more accurate for native apps)
+    const simPath = path.join(screenshotDir, `sim_${task.id}_${Date.now()}.png`);
+    const simShot = await screenshotSimulator(simPath);
+    if (simShot.success) {
+      screenshotBase64 = simShot.base64;
+      screenshotPath = simShot.path;
+      await addLog(task.id, "📱 iOS simulator screenshot taken", "progress");
+    } else {
+      // Fallback to Expo Web screenshot
+      const shot = await screenshotExpoWeb(expoPort, screenshotDir);
+      if (shot.success && shot.base64) {
+        screenshotBase64 = shot.base64;
+        screenshotPath = shot.path;
+      }
     }
   }
 
@@ -103,7 +119,7 @@ export async function runQAAgent(task, devResult, projectPath, prdContent, expoP
 // ── Claude Code QA review ─────────────────────────────────────────────────────
 async function runClaudeCodeQA(task, projectPath, prdContent, expoRunning, screenshotBase64, screenshotPath) {
   const screenshotNote = screenshotBase64
-    ? `A screenshot of the app has been saved to: ${screenshotPath}\nRead it with the Read tool and evaluate the visual result.`
+    ? `A screenshot of the app (from iOS Simulator or Expo Web) has been saved to: ${screenshotPath}\nRead it with the Read tool and evaluate the visual result — check layout, text, colors, spacing.`
     : expoRunning
       ? "Expo is running but screenshot failed — evaluate code only."
       : "Expo is not running — evaluate code quality only (TypeScript, completeness, correctness).";

package/bin/cli.js

@@ -137,6 +137,7 @@ program
   .requiredOption("--project <path>", "Path to your app project directory")
   .option("--restart", "Force restart from scratch (ignore existing tasks in board)")
   .option("--expo-port <port>", "Expo Web port for QA screenshots", "8081")
+  .option("--ios", "Use iOS Simulator instead of Expo Web for QA (requires Xcode)")
   .action(async (opts) => {
     console.log(LOGO);
     const config = loadConfig();
@@ -190,6 +191,7 @@ program
       projectName: config.projectName,
       expoPort: parseInt(opts.expoPort),
       forceRestart: !!opts.restart,
+      useIOS: !!opts.ios,
     });
   });
 

package/dashboard/index.html

@@ -1219,7 +1219,9 @@ function renderKanban() {
       continue;
     }
 
-    body.innerHTML = list.map(t => cardHTML(t)).join('');
+    // Sort by priority_order before rendering
+    const sorted = [...list].sort((a, b) => (a.priority_order ?? 99) - (b.priority_order ?? 99));
+    body.innerHTML = sorted.map((t, i) => cardHTML(t, status === 'todo' ? i + 1 : null)).join('');
 
     // Attach drag events
     body.querySelectorAll('.card').forEach(card => {
@@ -1230,15 +1232,17 @@ function renderKanban() {
   }
 }
 
-function cardHTML(task) {
+function cardHTML(task, position = null) {
   const icons = { todo: '', in_progress: '', done: '✓', error: '✕', blocked: '—' };
   const shortEpic = (task.epicName || '').split(' ').slice(0,2).join(' ');
   const isError = task.status === 'error';
+  const posNum = position ? `<span style="font-family:var(--mono);font-size:9px;color:var(--dim);background:rgba(255,255,255,0.05);border-radius:3px;padding:1px 5px;flex-shrink:0">#${position}</span>` : '';
   return `
     <div class="card fade-in" draggable="true" data-id="${task.id}" data-status="${task.status}">
       <div class="card-top">
         <div class="card-status ${task.status}">${icons[task.status] || ''}</div>
         <div class="card-title">${esc(task.title)}</div>
+        ${posNum}
       </div>
       ${task.description ? `<div class="card-desc">${esc(task.description.split('\n')[0])}</div>` : ''}
       <div class="card-footer">
@@ -1269,11 +1273,31 @@ function onDragOver(e, status) {
   e.preventDefault();
   e.dataTransfer.dropEffect = 'move';
   const col = e.currentTarget;
-  if (!col.querySelector('.drop-placeholder')) {
-    const ph = document.createElement('div');
-    ph.className = 'drop-placeholder';
-    col.appendChild(ph);
+
+  // Find the card being hovered over to insert placeholder before it
+  const draggingCard = document.querySelector('.card.dragging');
+  const cards = [...col.querySelectorAll('.card:not(.dragging)')];
+  
+  // Remove existing placeholder
+  col.querySelectorAll('.drop-placeholder').forEach(p => p.remove());
+  
+  // Find insertion point based on mouse Y position
+  let insertBefore = null;
+  for (const card of cards) {
+    const rect = card.getBoundingClientRect();
+    if (e.clientY < rect.top + rect.height / 2) {
+      insertBefore = card;
+      break;
+    }
   }
+
+  const ph = document.createElement('div');
+  ph.className = 'drop-placeholder';
+  if (insertBefore) col.insertBefore(ph, insertBefore);
+  else col.appendChild(ph);
+  
+  // Store insertion target for onDrop
+  col.dataset.insertBefore = insertBefore?.dataset?.id || '';
 }
 
 function onDragLeave(e) {
@@ -1289,16 +1313,56 @@ async function onDrop(e, status) {
   document.querySelectorAll('.drop-placeholder').forEach(p => p.remove());
   if (!draggedId) return;
 
+  const col = e.currentTarget;
+  const insertBeforeId = col.dataset.insertBefore || '';
+  delete col.dataset.insertBefore;
+
+  // Calculate new priority_order based on drop position
+  const colKey = { todo: 'todo', in_progress: 'prog', done: 'done', error: 'err' }[status] || status;
+  const tasks = allTasks().filter(t => t.status === status && t.id !== draggedId);
+  
+  let newOrder;
+  if (!insertBeforeId) {
+    // Dropped at end
+    const maxOrder = tasks.length ? Math.max(...tasks.map(t => t.priority_order || 0)) : 0;
+    newOrder = maxOrder + 1;
+  } else {
+    const targetTask = tasks.find(t => t.id === insertBeforeId);
+    const targetOrder = targetTask?.priority_order ?? 1;
+    // Shift tasks after insertion point
+    newOrder = targetOrder - 0.5;
+  }
+
   await fetch(`/api/tasks/${draggedId}`, {
     method: 'PATCH',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ status }),
+    body: JSON.stringify({ status, priority_order: newOrder }),
   });
 
+  // Re-normalize priority_order for all tasks in this column after drop
+  await normalizeColumnOrder(status);
+
   draggedId = null;
   loadBoard();
 }
 
+async function normalizeColumnOrder(status) {
+  // Get all tasks in column sorted by current priority_order, renumber 1..N
+  const tasks = allTasks()
+    .filter(t => t.status === status)
+    .sort((a, b) => (a.priority_order ?? 99) - (b.priority_order ?? 99));
+  
+  for (let i = 0; i < tasks.length; i++) {
+    if (tasks[i].priority_order !== i + 1) {
+      await fetch(`/api/tasks/${tasks[i].id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ priority_order: i + 1 }),
+      });
+    }
+  }
+}
+
 // ── CARD SELECT ───────────────────────────────────────────────────────────────
 async function selectCard(id) {
   const task = allTasks().find(t => t.id === id);

package/dashboard/server.js

@@ -287,11 +287,30 @@ app.post("/api/supabase/query", async (req, res) => {
 
 app.get("/api/board", async (req, res) => {
   const { data: epics } = await supabase
-    .from("cb_epics").select("*, cb_tasks(*)").eq("project", PROJECT).order("created_at");
+    .from("cb_epics").select("*, cb_tasks(*)")
+    .eq("project", PROJECT).order("created_at");
+
+  // Orphan tasks (manually created, no epic_id)
+  const { data: orphanTasks } = await supabase
+    .from("cb_tasks").select("*")
+    .eq("project", PROJECT).is("epic_id", null)
+    .order("priority_order", { ascending: true });
+
+  // Sort tasks within each epic by priority_order
+  const sortedEpics = (epics || []).map(epic => ({
+    ...epic,
+    cb_tasks: (epic.cb_tasks || []).sort((a, b) => (a.priority_order ?? 99) - (b.priority_order ?? 99)),
+  }));
+
+  // Orphan tasks appear as a virtual "Manual Tasks" epic
+  if (orphanTasks?.length) {
+    sortedEpics.push({ id: "manual", name: "— Manual Tasks", cb_tasks: orphanTasks });
+  }
+
   const { data: logs } = await supabase
     .from("cb_logs").select("*").eq("project", PROJECT)
     .order("created_at", { ascending: false }).limit(50);
-  res.json({ epics: epics || [], logs: logs || [], project: PROJECT });
+  res.json({ epics: sortedEpics, logs: logs || [], project: PROJECT });
 });
 
 app.get("/api/tasks/next", async (req, res) => {

package/package.json

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