claudeboard 2.11.0 → 2.12.0

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') {
@@ -1250,7 +1320,11 @@ 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>`;
 }
 
@@ -1317,52 +1391,45 @@ 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;
+  // 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) {
-    // Dropped at end
-    const maxOrder = tasks.length ? Math.max(...tasks.map(t => t.priority_order || 0)) : 0;
-    newOrder = maxOrder + 1;
+    newOrderedIds = [...otherIds, draggedId]; // dropped at end
   } 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 = otherIds.indexOf(insertBeforeId);
+    if (insertIdx === -1) {
+      newOrderedIds = [draggedId, ...otherIds];
+    } else {
+      newOrderedIds = [...otherIds.slice(0, insertIdx), draggedId, ...otherIds.slice(insertIdx)];
+    }
   }
 
-  await fetch(`/api/tasks/${draggedId}`, {
-    method: 'PATCH',
+  // 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, priority_order: newOrder }),
+    body: JSON.stringify({ taskIds: newOrderedIds }),
   });
 
-  // 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);
@@ -1683,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 '';
@@ -1690,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(); }
 });
 
@@ -1724,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',
@@ -1753,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

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