claudeboard 2.10.1 → 2.12.0

package/agents/expo-health.js

@@ -150,7 +150,13 @@ 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: (() => { 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";
@@ -76,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;
+      }
     }
   }
 
@@ -106,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

@@ -847,6 +847,36 @@
     border-color: rgba(248,113,113,0.5);
   }
 
+  /* ── CARD ACTION BAR (edit/delete/retry) ── */
+  .card-actions {
+    display: flex;
+    gap: 4px;
+    margin-top: 8px;
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+  .card:hover .card-actions { opacity: 1; }
+  .card-action-btn {
+    flex: 1;
+    padding: 4px 0;
+    border-radius: 4px;
+    border: 1px solid var(--border);
+    background: rgba(255,255,255,0.03);
+    color: var(--muted);
+    font-family: var(--mono);
+    font-size: 10px;
+    cursor: pointer;
+    transition: all 0.15s;
+    text-align: center;
+  }
+  .card-action-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
+  .card-action-btn.retry { color: var(--yellow); border-color: rgba(251,191,36,0.3); }
+  .card-action-btn.retry:hover { background: rgba(251,191,36,0.1); }
+  .card-action-btn.del { color: var(--red); border-color: rgba(248,113,113,0.2); }
+  .card-action-btn.del:hover { background: rgba(248,113,113,0.12); }
+  .card-action-btn.edit { color: var(--accent); border-color: rgba(108,138,255,0.2); }
+  .card-action-btn.edit:hover { background: rgba(108,138,255,0.1); }
+
   /* Empty column state */
   .col-empty {
     text-align: center;
@@ -1011,6 +1041,46 @@
   </div>
 </div>
 
+<!-- EDIT TASK MODAL -->
+<div class="overlay" id="editModal" onclick="if(event.target===this)closeEditTask()">
+  <div class="modal">
+    <div class="modal-title" data-i18n="editTaskTitle">Edit Task</div>
+    <input type="hidden" id="e-id">
+    <div class="field">
+      <label data-i18n="fieldTitle">Title</label>
+      <input type="text" id="e-title">
+    </div>
+    <div class="field">
+      <label data-i18n="fieldDesc">Description</label>
+      <textarea id="e-desc" rows="4"></textarea>
+    </div>
+    <div class="modal-grid">
+      <div class="field">
+        <label data-i18n="fieldPriority">Priority</label>
+        <select id="e-priority">
+          <option value="high" data-i18n="prioHigh">High</option>
+          <option value="medium" data-i18n="prioMed">Medium</option>
+          <option value="low" data-i18n="prioLow">Low</option>
+        </select>
+      </div>
+      <div class="field">
+        <label data-i18n="fieldType">Type</label>
+        <select id="e-type">
+          <option value="feature" data-i18n="typeFeature">Feature</option>
+          <option value="bug" data-i18n="typeBug">Bug</option>
+          <option value="config" data-i18n="typeConfig">Config</option>
+          <option value="refactor" data-i18n="typeRefactor">Refactor</option>
+          <option value="test" data-i18n="typeTest">Test</option>
+        </select>
+      </div>
+    </div>
+    <div class="modal-actions">
+      <button class="btn-cancel" onclick="closeEditTask()" data-i18n="cancel">Cancel</button>
+      <button class="btn-create" onclick="submitEditTask()" data-i18n="saveTask">Save Changes</button>
+    </div>
+  </div>
+</div>
+
 <!-- RETRY / EDIT MODAL -->
 <div class="overlay" id="retryModal" onclick="if(event.target===this)closeRetry()">
   <div class="modal">
@@ -1131,7 +1201,7 @@ function connectWS() {
   ws.onclose = () => { setWS(false); setTimeout(connectWS, 2000); };
   ws.onmessage = (e) => {
     const { event, data } = JSON.parse(e.data);
-    if (['task_update','task_added','task_started','task_complete','task_failed'].includes(event)) {
+    if (['task_update','task_added','task_started','task_complete','task_failed','task_deleted','task_reordered'].includes(event)) {
       loadBoard();
     }
     if (event === 'log') {
@@ -1219,7 +1289,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 +1302,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">
@@ -1246,7 +1320,11 @@ function cardHTML(task) {
         <span class="tag ${task.type}">${task.type}</span>
         ${shortEpic ? `<span class="card-epic">${esc(shortEpic)}</span>` : ''}
       </div>
-      ${isError ? `<button class="card-retry-btn" onclick="event.stopPropagation();openRetry('${task.id}')">${t('retryCard')} Edit</button>` : ''}
+      <div class="card-actions" onclick="event.stopPropagation()">
+        ${isError ? `<button class="card-action-btn retry" onclick="openRetry('${task.id}')">${t('retryCard')}</button>` : ''}
+        <button class="card-action-btn edit" onclick="openEditTask('${task.id}')" title="Edit">✎</button>
+        <button class="card-action-btn del" onclick="deleteTask('${task.id}')" title="Delete">✕</button>
+      </div>
     </div>`;
 }
 
@@ -1269,11 +1347,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,10 +1387,43 @@ async function onDrop(e, status) {
   document.querySelectorAll('.drop-placeholder').forEach(p => p.remove());
   if (!draggedId) return;
 
-  await fetch(`/api/tasks/${draggedId}`, {
-    method: 'PATCH',
+  const col = e.currentTarget;
+  const insertBeforeId = col.dataset.insertBefore || '';
+  delete col.dataset.insertBefore;
+
+  // Build the new ordered list of ids for this column
+  // Start from the DOM — what's visually shown — plus insert dragged card
+  const otherIds = [...col.querySelectorAll('.card')]
+    .map(c => c.dataset.id)
+    .filter(id => id && id !== draggedId);
+
+  let newOrderedIds;
+  if (!insertBeforeId) {
+    newOrderedIds = [...otherIds, draggedId]; // dropped at end
+  } else {
+    const insertIdx = otherIds.indexOf(insertBeforeId);
+    if (insertIdx === -1) {
+      newOrderedIds = [draggedId, ...otherIds];
+    } else {
+      newOrderedIds = [...otherIds.slice(0, insertIdx), draggedId, ...otherIds.slice(insertIdx)];
+    }
+  }
+
+  // Update status first if moving to different column
+  const draggedTask = allTasks().find(t => t.id === draggedId);
+  if (draggedTask?.status !== status) {
+    await fetch(`/api/tasks/${draggedId}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ status }),
+    });
+  }
+
+  // Persist the new order in one call
+  await fetch('/api/tasks/reorder', {
+    method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ status }),
+    body: JSON.stringify({ taskIds: newOrderedIds }),
   });
 
   draggedId = null;
@@ -1619,6 +1750,48 @@ function initTerminal() {
   });
 }
 
+// ── EDIT TASK ─────────────────────────────────────────────────────────────────
+function openEditTask(id) {
+  const task = allTasks().find(t => t.id === id);
+  if (!task) return;
+  document.getElementById('e-id').value = id;
+  document.getElementById('e-title').value = task.title || '';
+  document.getElementById('e-desc').value = task.description || '';
+  document.getElementById('e-priority').value = task.priority || 'medium';
+  document.getElementById('e-type').value = task.type || 'feature';
+  document.getElementById('editModal').style.display = 'flex';
+  applyTranslations();
+}
+
+function closeEditTask() {
+  document.getElementById('editModal').style.display = 'none';
+}
+
+async function submitEditTask() {
+  const id = document.getElementById('e-id').value;
+  const title = document.getElementById('e-title').value.trim();
+  const description = document.getElementById('e-desc').value.trim();
+  const priority = document.getElementById('e-priority').value;
+  const type = document.getElementById('e-type').value;
+  if (!title) return;
+
+  const priorityOrder = { high: 1, medium: 2, low: 3 };
+  await fetch(`/api/tasks/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ title, description, priority, type, priority_order: priorityOrder[priority] }),
+  });
+  closeEditTask();
+  loadBoard();
+}
+
+// ── DELETE TASK ───────────────────────────────────────────────────────────────
+async function deleteTask(id) {
+  if (!confirm(currentLang === 'es' ? '¿Eliminar esta tarea?' : 'Delete this task?')) return;
+  await fetch(`/api/tasks/${id}`, { method: 'DELETE' });
+  loadBoard();
+}
+
 // ── UTILS ─────────────────────────────────────────────────────────────────────
 function esc(s) {
   if (!s) return '';
@@ -1626,7 +1799,7 @@ function esc(s) {
 }
 
 document.addEventListener('keydown', e => {
-  if (e.key === 'Escape') { closeModal(); closeRetry(); }
+  if (e.key === 'Escape') { closeModal(); closeRetry(); closeEditTask(); }
   if ((e.metaKey || e.ctrlKey) && e.key === 'n') { e.preventDefault(); openModal(); }
 });
 
@@ -1660,6 +1833,7 @@ const STRINGS = {
     expoIdle:'Expo not started. Click "Start Expo" to install dependencies and launch with tunnel.',
     scanWith:'SCAN WITH EXPO GO',
     retryCard:'↩ Retry',
+    editTaskTitle:'Edit Task', saveTask:'Save Changes', deleteConfirm:'Delete this task?',
   },
   es: {
     todo:'pendiente', running:'en curso', done:'listo', failed:'fallido',
@@ -1689,6 +1863,7 @@ const STRINGS = {
     expoIdle:'Expo no iniciado. Hacé clic en "Iniciar Expo" para instalar dependencias y lanzar con tunnel.',
     scanWith:'ESCANEAR CON EXPO GO',
     retryCard:'↩ Reintentar',
+    editTaskTitle:'Editar tarea', saveTask:'Guardar cambios', deleteConfirm:'¿Eliminar esta tarea?',
   }
 };
 

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) => {
@@ -350,6 +369,26 @@ app.patch("/api/tasks/:id", async (req, res) => {
   res.json({ ok: true });
 });
 
+// DELETE a task
+app.delete("/api/tasks/:id", async (req, res) => {
+  await supabase.from("cb_logs").delete().eq("task_id", req.params.id);
+  await supabase.from("cb_tasks").delete().eq("id", req.params.id);
+  broadcast("task_deleted", { id: req.params.id });
+  res.json({ ok: true });
+});
+
+// POST reorder — receives ordered array of task ids for a column, renumbers them
+app.post("/api/tasks/reorder", async (req, res) => {
+  const { taskIds } = req.body; // array of ids in new order
+  for (let i = 0; i < taskIds.length; i++) {
+    await supabase.from("cb_tasks")
+      .update({ priority_order: i + 1 })
+      .eq("id", taskIds[i]);
+  }
+  broadcast("task_reordered", { taskIds });
+  res.json({ ok: true });
+});
+
 app.get("/api/tasks/:id/logs", async (req, res) => {
   const { data } = await supabase.from("cb_logs").select("*")
     .eq("task_id", req.params.id).order("created_at");

package/package.json

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