agent-tasks 1.9.10 → 1.9.12

package/dist/ui/panel.js

@@ -189,14 +189,19 @@ function renderPanelContent(task) {
       <span class="panel-task-id">#${task.id}</span>
       <span class="panel-stage-badge ${stageClass}">${esc(task.stage)}</span>
     </div>
-    <button class="panel-close-btn" data-action="close-panel" aria-label="Close panel">
-      <span class="material-symbols-outlined">close</span>
-    </button>`;
+    <div class="panel-header-right">
+      <button class="panel-delete-btn" data-action="delete-task" data-task-id="${task.id}" aria-label="Delete task" title="Delete task">
+        <span class="material-symbols-outlined">delete</span>
+      </button>
+      <button class="panel-close-btn" data-action="close-panel" aria-label="Close panel">
+        <span class="material-symbols-outlined">close</span>
+      </button>
+    </div>`;
 
   const deps = state.dependencies.filter((d) => d.task_id === task.id);
   const blocking = state.dependencies.filter((d) => d.depends_on === task.id);
 
-  let html = `<div class="panel-title">${esc(task.title)}</div>`;
+  let html = `<div class="panel-title" data-action="edit-panel-title" data-task-id="${task.id}" title="Click to edit">${esc(task.title)}</div>`;
 
   html += '<div class="panel-section">';
   html +=
@@ -235,13 +240,17 @@ function renderPanelContent(task) {
 
   html += '</div></div>';
 
+  html += '<div class="panel-section">';
+  html +=
+    '<div class="panel-section-title"><span class="material-symbols-outlined">notes</span> Description' +
+    `<button class="panel-edit-btn" data-action="edit-description" data-task-id="${task.id}" title="Edit description">` +
+    '<span class="material-symbols-outlined">edit</span></button></div>';
   if (task.description) {
-    html += '<div class="panel-section">';
-    html +=
-      '<div class="panel-section-title"><span class="material-symbols-outlined">notes</span> Description</div>';
     html += `<div class="panel-description">${renderMarkdown(task.description)}</div>`;
-    html += '</div>';
+  } else {
+    html += '<div class="panel-description panel-description-empty">No description</div>';
   }
+  html += '</div>';
 
   if (task.result) {
     html += '<div class="panel-section">';
@@ -516,6 +525,145 @@ function initPanelResize() {
 
 // ---- Panel event delegation ----
 
+function startPanelTitleEdit(titleEl) {
+  var taskId = parseInt(titleEl.dataset.taskId, 10);
+  var task = TaskBoard.state.tasks.find(function (t) {
+    return t.id === taskId;
+  });
+  if (!task) return;
+
+  titleEl.setAttribute('contenteditable', 'true');
+  titleEl.focus();
+
+  var range = document.createRange();
+  range.selectNodeContents(titleEl);
+  var sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+
+  var finish = function () {
+    titleEl.removeAttribute('contenteditable');
+    var newTitle = titleEl.textContent.trim();
+    if (newTitle && newTitle !== task.title) {
+      TaskBoard.updateTask(taskId, { title: newTitle });
+    } else {
+      titleEl.textContent = task.title;
+    }
+  };
+
+  titleEl.addEventListener('blur', finish, { once: true });
+  titleEl.addEventListener(
+    'keydown',
+    function (ev) {
+      if (ev.key === 'Enter') {
+        ev.preventDefault();
+        ev.stopPropagation();
+        titleEl.blur();
+      } else if (ev.key === 'Escape') {
+        ev.preventDefault();
+        ev.stopPropagation();
+        titleEl.textContent = task.title;
+        titleEl.removeAttribute('contenteditable');
+      }
+    },
+    { once: true },
+  );
+}
+
+function startDescriptionEdit(taskId) {
+  var esc = TaskBoard.esc;
+  var task = TaskBoard.state.tasks.find(function (t) {
+    return t.id === taskId;
+  });
+  if (!task) return;
+
+  var descEl = TaskBoard._root.querySelector('.panel-description');
+  if (!descEl) return;
+
+  var editor = document.createElement('div');
+  editor.className = 'panel-description-editor';
+  editor.innerHTML =
+    '<textarea class="panel-desc-textarea" rows="6">' +
+    esc(task.description || '') +
+    '</textarea>' +
+    '<div class="panel-desc-actions">' +
+    '<button class="panel-desc-save" data-task-id="' +
+    taskId +
+    '">Save</button>' +
+    '<button class="panel-desc-cancel">Cancel</button>' +
+    '</div>';
+
+  descEl.replaceWith(editor);
+  editor.querySelector('.panel-desc-textarea').focus();
+
+  editor.querySelector('.panel-desc-save').addEventListener('click', function () {
+    var newDesc = editor.querySelector('.panel-desc-textarea').value.trim();
+    TaskBoard.updateTask(taskId, { description: newDesc || null });
+    setTimeout(function () {
+      openPanel(taskId);
+    }, 300);
+  });
+
+  editor.querySelector('.panel-desc-cancel').addEventListener('click', function () {
+    openPanel(taskId);
+  });
+}
+
+function deleteTask(taskId) {
+  var task = TaskBoard.state.tasks.find(function (t) {
+    return t.id === taskId;
+  });
+  if (!task) return;
+
+  var overlay = document.createElement('div');
+  overlay.className = 'confirm-overlay';
+  overlay.innerHTML =
+    '<div class="confirm-dialog">' +
+    '<div class="confirm-title">Delete task #' +
+    taskId +
+    '?</div>' +
+    '<div class="confirm-body">' +
+    TaskBoard.esc(task.title) +
+    '</div>' +
+    '<div class="confirm-actions">' +
+    '<button class="confirm-cancel">Cancel</button>' +
+    '<button class="confirm-delete">Delete</button>' +
+    '</div></div>';
+
+  var root =
+    TaskBoard._root === document
+      ? document.body
+      : TaskBoard._root.querySelector('[class*="wrapper"]') || TaskBoard._root;
+  root.appendChild(overlay);
+
+  overlay.querySelector('.confirm-cancel').addEventListener('click', function () {
+    overlay.remove();
+  });
+
+  overlay.querySelector('.confirm-delete').addEventListener('click', function () {
+    overlay.remove();
+    TaskBoard._fetch('/api/tasks/' + taskId, { method: 'DELETE' })
+      .then(function (r) {
+        return r.json();
+      })
+      .then(function (result) {
+        if (result.error) {
+          TaskBoard.showToast('Delete failed', result.error, 'error');
+        } else {
+          TaskBoard.showToast('Deleted', 'Task #' + taskId + ' deleted', 'success');
+          closePanel();
+        }
+      })
+      .catch(function () {
+        TaskBoard.showToast('Delete failed', 'Network error', 'error');
+      });
+  });
+
+  overlay.addEventListener('click', function (ev) {
+    if (ev.target === overlay) overlay.remove();
+  });
+}
+
 function initPanelEvents() {
   TaskBoard._root.getElementById('side-panel').addEventListener('click', (e) => {
     const closeBtn = e.target.closest('[data-action="close-panel"]');
@@ -524,6 +672,24 @@ function initPanelEvents() {
       return;
     }
 
+    const editTitle = e.target.closest('[data-action="edit-panel-title"]');
+    if (editTitle && !editTitle.hasAttribute('contenteditable')) {
+      startPanelTitleEdit(editTitle);
+      return;
+    }
+
+    const editDesc = e.target.closest('[data-action="edit-description"]');
+    if (editDesc) {
+      startDescriptionEdit(parseInt(editDesc.dataset.taskId, 10));
+      return;
+    }
+
+    const delBtn = e.target.closest('[data-action="delete-task"]');
+    if (delBtn) {
+      deleteTask(parseInt(delBtn.dataset.taskId, 10));
+      return;
+    }
+
     const subtask = e.target.closest('[data-subtask-id]');
     if (subtask) {
       openPanel(parseInt(subtask.dataset.subtaskId, 10));

package/dist/ui/styles.css

@@ -1661,14 +1661,196 @@ header {
   line-height: 1.35;
   margin-bottom: 16px;
   word-break: break-word;
+  user-select: text;
 }
 
+.panel-title[data-action='edit-panel-title'] {
+  cursor: text;
+  border-radius: var(--radius-sm);
+  padding: 2px 4px;
+  margin: -2px -4px 16px;
+  transition: background var(--transition-fast);
+}
+.panel-title[data-action='edit-panel-title']:hover {
+  background: var(--bg-hover);
+}
 .panel-title[contenteditable='true'] {
   outline: none;
+  background: var(--bg-surface);
   border-bottom: 2px solid var(--accent);
   cursor: text;
 }
 
+.panel-header-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.panel-delete-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-dim);
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-fast);
+}
+.panel-delete-btn:hover {
+  color: var(--red);
+  background: var(--red-dim);
+}
+.panel-delete-btn .material-symbols-outlined {
+  font-size: 18px;
+}
+
+.panel-edit-btn {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 2px;
+  border-radius: 4px;
+  margin-left: auto;
+  opacity: 0;
+  transition:
+    opacity var(--transition-fast),
+    color var(--transition-fast);
+  display: flex;
+  align-items: center;
+}
+.panel-section-title:hover .panel-edit-btn {
+  opacity: 1;
+}
+.panel-edit-btn:hover {
+  color: var(--accent);
+  background: var(--bg-hover);
+}
+.panel-edit-btn .material-symbols-outlined {
+  font-size: 16px;
+}
+
+.panel-description-empty {
+  color: var(--text-dim);
+  font-style: italic;
+  font-size: 12px;
+}
+
+.panel-description-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.panel-desc-textarea {
+  width: 100%;
+  min-height: 120px;
+  padding: 10px 12px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  resize: vertical;
+}
+.panel-desc-textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--focus-ring);
+}
+.panel-desc-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+.panel-desc-save,
+.panel-desc-cancel {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid var(--border);
+  background: var(--bg-surface);
+  color: var(--text);
+  transition: all var(--transition-fast);
+}
+.panel-desc-save {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+.panel-desc-save:hover {
+  background: var(--accent-hover);
+}
+.panel-desc-cancel:hover {
+  background: var(--bg-hover);
+}
+
+.confirm-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+.confirm-dialog {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+  min-width: 320px;
+  max-width: 480px;
+  box-shadow: var(--shadow-3);
+}
+.confirm-title {
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+.confirm-body {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin-bottom: 16px;
+  word-break: break-word;
+}
+.confirm-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+.confirm-cancel,
+.confirm-delete {
+  padding: 6px 16px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid var(--border);
+  transition: all var(--transition-fast);
+}
+.confirm-cancel {
+  background: var(--bg-elevated);
+  color: var(--text);
+}
+.confirm-cancel:hover {
+  background: var(--bg-hover);
+}
+.confirm-delete {
+  background: var(--red);
+  color: #fff;
+  border-color: var(--red);
+}
+.confirm-delete:hover {
+  opacity: 0.9;
+}
+
 .panel-section {
   margin-bottom: 20px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-tasks",
-  "version": "1.9.10",
+  "version": "1.9.12",
   "description": "Pipeline-driven task management for AI coding agents — stages, dependencies, artifacts, and multi-agent claiming",
   "type": "module",
   "main": "dist/index.js",