claudeboard 2.11.0 → 2.13.0

package/agents/expo-health.js

@@ -6,6 +6,7 @@ import fs from "fs";
 import path from "path";
 import { createRequire } from "module";
 import { createConnection } from "net";
+import { spawn as _spawn, execSync } from "child_process";
 
 const require = createRequire(import.meta.url);
 const MAX_FIX_ATTEMPTS = 5;
@@ -149,14 +150,13 @@ async function tryStartExpo(projectPath, port) {
       done(false, `Expo did not become ready within 60s.\n${output.slice(-800)}`), 60000);
 
     try {
-      const { spawn } = require("child_process");
       // Use iOS simulator if available, fallback to web
-      const useIOS = process.env.CLAUDEBOARD_IOS === "1" || await isSimulatorAvailable();
+      const useIOS = process.env.CLAUDEBOARD_IOS === "1" || isSimulatorAvailableSync();
       const expoArgs = useIOS
         ? ["expo", "start", "--ios", "--port", String(port)]
         : ["expo", "start", "--web", "--port", String(port)];
       
-      proc = spawn("npx", expoArgs, {
+      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",
@@ -320,13 +320,10 @@ function getFatalError(output) {
 }
 
 // ── iOS Simulator detection ───────────────────────────────────────────────────
-async function isSimulatorAvailable() {
+function isSimulatorAvailableSync() {
   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 {
@@ -337,7 +334,6 @@ async function isSimulatorAvailable() {
 // 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 };
@@ -349,7 +345,6 @@ export async function screenshotSimulator(outputPath) {
 // 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/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,13 +1201,23 @@ 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)) {
+
+    // Task state changes that require a board reload (status flipped, new task, deleted)
+    if (['task_added','task_started','task_complete','task_failed','task_deleted'].includes(event)) {
       loadBoard();
     }
+    // Reorder: just re-render from current board data — no network call needed
+    if (event === 'task_reordered') {
+      renderKanban();
+      updateStats();
+    }
+    // Single task field update: patch in-memory and re-render (no full reload)
+    if (event === 'task_update') {
+      patchTaskInMemory(data);
+    }
     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);
@@ -1151,6 +1231,12 @@ function connectWS() {
 function setWS(on) {
   document.getElementById('wsDot').className = 'ws-dot' + (on ? ' on' : '');
   document.getElementById('wsLabel').textContent = on ? t('live') : t('reconnecting');
+  // Poll only when disconnected
+  if (on) {
+    if (pollInterval) { clearInterval(pollInterval); pollInterval = null; }
+  } else {
+    if (!pollInterval) pollInterval = setInterval(loadBoard, 10000);
+  }
 }
 
 // ── DATA ─────────────────────────────────────────────────────────────────────
@@ -1250,13 +1336,45 @@ function cardHTML(task, position = null) {
         <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>`;
 }
 
-// ── DRAG & DROP ───────────────────────────────────────────────────────────────
+// ── IN-MEMORY PATCH (avoid full reload for minor updates) ─────────────────────
+function patchTaskInMemory(patch) {
+  if (!board.epics) return;
+  for (const epic of board.epics) {
+    const idx = (epic.cb_tasks || []).findIndex(t => t.id === patch.id);
+    if (idx !== -1) {
+      epic.cb_tasks[idx] = { ...epic.cb_tasks[idx], ...patch };
+      renderKanban();
+      updateStats();
+      return;
+    }
+  }
+  // Task not found in memory yet (new orphan etc), do full reload
+  loadBoard();
+}
+
+// ── DRAG STATE ────────────────────────────────────────────────────────────────
+// 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;
+
+  // Snapshot current order of all columns from memory (reliable — not DOM-dependent)
+  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);
+  }
+
   setTimeout(() => {
     const el = document.querySelector(`.card[data-id="${id}"]`);
     if (el) el.classList.add('dragging');
@@ -1317,50 +1435,49 @@ async function onDrop(e, status) {
   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;
+  // 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);
+
+  let newOrderedIds;
   if (!insertBeforeId) {
-    // Dropped at end
-    const maxOrder = tasks.length ? Math.max(...tasks.map(t => t.priority_order || 0)) : 0;
-    newOrder = maxOrder + 1;
+    newOrderedIds = [...columnIds, draggedId];
   } else {
-    const targetTask = tasks.find(t => t.id === insertBeforeId);
-    const targetOrder = targetTask?.priority_order ?? 1;
-    // Shift tasks after insertion point
-    newOrder = targetOrder - 0.5;
+    const insertIdx = columnIds.indexOf(insertBeforeId);
+    if (insertIdx === -1) {
+      newOrderedIds = [draggedId, ...columnIds];
+    } else {
+      newOrderedIds = [...columnIds.slice(0, insertIdx), draggedId, ...columnIds.slice(insertIdx)];
+    }
   }
 
-  await fetch(`/api/tasks/${draggedId}`, {
-    method: 'PATCH',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ status, priority_order: newOrder }),
+  // Optimistic update in memory so re-render is instant
+  const task = allTasks().find(t => t.id === draggedId);
+  if (task) task.status = status;
+  newOrderedIds.forEach((id, i) => {
+    const t = allTasks().find(t => t.id === id);
+    if (t) t.priority_order = i + 1;
   });
+  renderKanban();
+  updateStats();
 
-  // Re-normalize priority_order for all tasks in this column after drop
-  await normalizeColumnOrder(status);
+  // Update status if column changed
+  if (sourceStatus !== status) {
+    await fetch(`/api/tasks/${draggedId}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ status }),
+    });
+  }
 
-  draggedId = null;
-  loadBoard();
-}
+  // Persist new order
+  await fetch('/api/tasks/reorder', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ taskIds: newOrderedIds }),
+  });
 
-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 }),
-      });
-    }
-  }
+  draggedId = null;
 }
 
 // ── CARD SELECT ───────────────────────────────────────────────────────────────
@@ -1683,6 +1800,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 '';
@@ -1690,7 +1849,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(); }
 });
 
@@ -1724,6 +1883,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',
@@ -1753,6 +1913,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?',
   }
 };
 
@@ -1790,8 +1951,9 @@ function applyTranslations() {
 
 // ── INIT ──────────────────────────────────────────────────────────────────────
 loadBoard();
-setInterval(loadBoard, 8000);
 connectWS();
+// Only poll when WS is disconnected (fallback)
+let pollInterval = null;
 
 // Load expo status
 fetch('/api/expo/status').then(r => r.json()).then(d => setExpoStatus(d.status, d.url));

package/dashboard/server.js

@@ -369,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.11.0",
+  "version": "2.13.0",
   "description": "AI engineering team — from PRD to working mobile app, autonomously",
   "type": "module",
   "bin": {