claude-code-kanban 4.9.0 → 4.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "4.9.0",
+  "version": "4.11.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -14,7 +14,6 @@ const collapsedProjectGroups = new Set();
 let stableGroupOrder = []; // cached project path order to prevent jumping
 let searchQuery = ''; // Search query for fuzzy search
 let allTasksCache = []; // Cache all tasks for search
-let bulkDeleteSessionId = null; // Track session for bulk delete
 let ownerFilter = '';
 let currentAgents = [];
 let currentWaiting = null;
@@ -226,172 +225,9 @@ function clearSearch() {
   renderSessions();
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function deleteAllSessionTasks(sessionId) {
-  const session = sessions.find((s) => s.id === sessionId);
-  if (!session) return;
-
-  // When viewing a single session, currentTasks already contains only that session's tasks
-  // When viewing "All Tasks", tasks have sessionId property, so we filter
-  const sessionTasks =
-    currentSessionId === sessionId ? currentTasks : currentTasks.filter((t) => t.sessionId === sessionId);
-
-  if (sessionTasks.length === 0) {
-    alert('No tasks to delete in this session');
-    return;
-  }
-
-  bulkDeleteSessionId = sessionId;
-
-  const displayName = session.name || sessionId;
-  const message = `Delete all ${sessionTasks.length} task(s) from session "${displayName}"?`;
-
-  document.getElementById('delete-session-tasks-message').textContent = message;
-
-  const modal = document.getElementById('delete-session-tasks-modal');
-  modal.classList.add('visible');
-
-  // Handle ESC key
-  const keyHandler = (e) => {
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      closeDeleteSessionTasksModal();
-      document.removeEventListener('keydown', keyHandler);
-    }
-  };
-  document.addEventListener('keydown', keyHandler);
-}
-
-function closeDeleteSessionTasksModal() {
-  const modal = document.getElementById('delete-session-tasks-modal');
-  modal.classList.remove('visible');
-  bulkDeleteSessionId = null;
-}
-
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
-async function confirmDeleteSessionTasks() {
-  if (!bulkDeleteSessionId) return;
-
-  const sessionId = bulkDeleteSessionId;
-  closeDeleteSessionTasksModal();
-
-  // Get tasks to delete
-  const sessionTasks =
-    currentSessionId === sessionId ? currentTasks : currentTasks.filter((t) => t.sessionId === sessionId);
-
-  // Sort tasks by dependency order (blocked tasks first, then blockers)
-  const sortedTasks = topologicalSort(sessionTasks);
-
-  let successCount = 0;
-  let failedCount = 0;
-  const failedTasks = [];
-
-  for (const task of sortedTasks) {
-    try {
-      const res = await fetch(`/api/tasks/${sessionId}/${task.id}`, {
-        method: 'DELETE',
-      });
-
-      if (res.ok) {
-        successCount++;
-      } else {
-        failedCount++;
-        const error = await res.json();
-        failedTasks.push({ id: task.id, subject: task.subject, error: error.error });
-        console.error(`Failed to delete task ${task.id}:`, error);
-      }
-    } catch (error) {
-      failedCount++;
-      failedTasks.push({ id: task.id, subject: task.subject, error: 'Network error' });
-      console.error(`Error deleting task ${task.id}:`, error);
-    }
-  }
-
-  // Show result modal
-  showDeleteResultModal(successCount, failedCount, failedTasks);
-
-  // Close detail panel if open
-  closeDetailPanel();
-
-  // Refresh the view
-  await refreshCurrentView();
-}
-
 //#endregion
 
-//#region BULK_DELETE
-// Topological sort for task deletion order
-function topologicalSort(tasks) {
-  const result = [];
-  const visited = new Set();
-  const visiting = new Set();
-  const taskMap = new Map(tasks.map((t) => [t.id, t]));
-
-  function visit(taskId) {
-    if (visited.has(taskId)) return;
-    if (visiting.has(taskId)) return; // Cycle - skip
-
-    visiting.add(taskId);
-    const task = taskMap.get(taskId);
-
-    if (task?.blocks && task.blocks.length > 0) {
-      // Visit all tasks that this task blocks (dependencies first)
-      for (const blockedId of task.blocks) {
-        if (taskMap.has(blockedId)) {
-          visit(blockedId);
-        }
-      }
-    }
-
-    visiting.delete(taskId);
-    visited.add(taskId);
-    if (task) result.push(task);
-  }
-
-  // Visit all tasks
-  for (const task of tasks) {
-    visit(task.id);
-  }
-
-  return result;
-}
-
-function showDeleteResultModal(successCount, failedCount, failedTasks) {
-  const modal = document.getElementById('delete-result-modal');
-  const messageEl = document.getElementById('delete-result-message');
-  const detailsEl = document.getElementById('delete-result-details');
-
-  if (failedCount === 0) {
-    messageEl.textContent = `Successfully deleted all ${successCount} task(s).`;
-    detailsEl.style.display = 'none';
-  } else {
-    messageEl.textContent = `Deleted ${successCount} task(s). Failed to delete ${failedCount} task(s).`;
-
-    const failedList = failedTasks
-      .map((t) => `<li><strong>${escapeHtml(t.subject)}</strong> (#${escapeHtml(t.id)}): ${escapeHtml(t.error)}</li>`)
-      .join('');
-    detailsEl.innerHTML = `<ul style="margin: 8px 0 0 0; padding-left: 20px;">${failedList}</ul>`;
-    detailsEl.style.display = 'block';
-  }
-
-  modal.classList.add('visible');
-
-  // Handle ESC key
-  const keyHandler = (e) => {
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      closeDeleteResultModal();
-      document.removeEventListener('keydown', keyHandler);
-    }
-  };
-  document.addEventListener('keydown', keyHandler);
-}
-
-function closeDeleteResultModal() {
-  const modal = document.getElementById('delete-result-modal');
-  modal.classList.remove('visible');
-}
-
+//#region SEARCH
 function fuzzyMatch(text, query) {
   if (!query) return true;
   if (!text) return false;
@@ -1833,6 +1669,8 @@ function _renderPinToDetail(pin) {
 }
 
 const SESSION_PIN_SVG = PIN_SVG.replace('width="14" height="14"', 'width="12" height="12"');
+const SESSION_STAR_SVG =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>';
 const LINK_SVG_PATHS =
   '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>';
 const linkSvg = (size) =>
@@ -2993,7 +2831,7 @@ function renderSessions() {
     const tempClass = session.hasRecentLog || session.inProgress || session.hasWaitingForUser ? 'warm' : 'stale';
     return `
           <button onclick="fetchTasks('${session.id}')" data-session-id="${session.id}" class="session-item ${isActive ? 'active' : ''} ${session.hasWaitingForUser ? 'permission-pending' : ''} ${tempClass} ${showCtx ? 'has-context' : ''}" title="${tooltip}">
-            <span class="session-pin-btn${pinClass}" onclick="event.stopPropagation();toggleSessionPin('${escapeHtml(session.id)}')" title="${pinTitle} session">${SESSION_PIN_SVG}</span>
+            <span class="session-pin-btn${pinClass}" onclick="event.stopPropagation();toggleSessionPin('${escapeHtml(session.id)}')" title="${pinTitle} session">${pinState === 'sticky' ? SESSION_STAR_SVG : SESSION_PIN_SVG}</span>
             <div class="session-name">${escapeHtml(primaryName)}</div>
             ${secondaryName ? `<div class="session-secondary">${escapeHtml(secondaryName)}</div>` : ''}
             ${gitBranch ? `<div class="session-branch">${gitBranch}</div>` : ''}
@@ -3829,14 +3667,6 @@ async function showTaskDetail(taskId, sessionId = null) {
         </div>`
             : ''
         }
-
-        <div class="detail-section note-section">
-          <label for="note-input" class="detail-label">Add Note</label>
-          <form class="note-form" onsubmit="addNote(event, '${task.id}', '${actualSessionId}')">
-            <textarea id="note-input" class="note-input" placeholder="Add a note for Claude..." rows="3"></textarea>
-            <button type="submit" class="note-submit">Add Note</button>
-          </form>
-        </div>
       `;
 
   // Setup button handlers (read-only in project view)
@@ -3845,9 +3675,6 @@ async function showTaskDetail(taskId, sessionId = null) {
   deleteBtn.style.display = isProjectView ? 'none' : '';
   if (!isProjectView) deleteBtn.onclick = () => deleteTask(task.id, actualSessionId);
 
-  const noteSection = detailContent.querySelector('.note-section');
-  if (noteSection && isProjectView) noteSection.style.display = 'none';
-
   if (!isProjectView) {
     const titleEl = detailContent.querySelector('.detail-title');
     if (titleEl) {
@@ -3955,36 +3782,6 @@ async function saveTaskField(taskId, sessionId, field, value) {
   }
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
-async function addNote(event, taskId, sessionId) {
-  event.preventDefault();
-  const input = document.getElementById('note-input');
-  const note = input.value.trim();
-  if (!note) return;
-
-  try {
-    const res = await fetch(`/api/tasks/${sessionId}/${taskId}/note`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ note }),
-    });
-
-    if (res.ok) {
-      input.value = '';
-      // Refresh to show updated description
-      if (viewMode === 'all') {
-        const tasksRes = await fetch('/api/tasks/all');
-        currentTasks = await tasksRes.json();
-      } else {
-        await fetchTasks(sessionId);
-      }
-      showTaskDetail(taskId, sessionId);
-    }
-  } catch (error) {
-    console.error('Failed to add note:', error);
-  }
-}
-
 function closeDetailPanel() {
   detailPanel.classList.remove('visible');
   document.getElementById('delete-task-btn').style.display = 'none';

package/public/index.html

@@ -221,7 +221,7 @@
       <header class="detail-header">
         <h3>Task Details</h3>
         <div style="display: flex; gap: 8px; align-items: center;">
-          <button id="delete-task-btn" class="icon-btn" title="Delete task (D)" aria-label="Delete task" style="color: #ef4444; border-color: #ef4444; display: none;">
+          <button id="delete-task-btn" class="icon-btn icon-btn-danger" title="Delete task (D)" aria-label="Delete task" style="display: none;">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
             </svg>
@@ -472,50 +472,7 @@
       </div>
       <div class="modal-footer">
         <button id="delete-cancel-btn" class="btn btn-secondary" onclick="closeDeleteConfirmModal()">Cancel</button>
-        <button id="delete-confirm-btn" class="btn btn-primary" onclick="confirmDelete()" style="background: #ef4444; border-color: #ef4444;">Delete</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Delete All Session Tasks Confirmation Modal -->
-  <div id="delete-session-tasks-modal" class="modal-overlay" onclick="closeDeleteSessionTasksModal()">
-    <div class="modal" onclick="event.stopPropagation()">
-      <div class="modal-header">
-        <h3 class="modal-title">Delete All Tasks</h3>
-        <button class="modal-close" aria-label="Close dialog" onclick="closeDeleteSessionTasksModal()">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M18 6L6 18M6 6l12 12"/>
-          </svg>
-        </button>
-      </div>
-      <div class="modal-body">
-        <p id="delete-session-tasks-message" style="margin: 0 0 12px 0; color: var(--text-primary);"></p>
-        <p style="margin: 0; font-size: 13px; color: var(--text-secondary);">This action cannot be undone.</p>
-      </div>
-      <div class="modal-footer">
-        <button class="btn btn-secondary" onclick="closeDeleteSessionTasksModal()">Cancel</button>
-        <button class="btn btn-primary" onclick="confirmDeleteSessionTasks()" style="background: #ef4444; border-color: #ef4444;">Delete All</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Delete Result Modal -->
-  <div id="delete-result-modal" class="modal-overlay" onclick="closeDeleteResultModal()">
-    <div class="modal" onclick="event.stopPropagation()">
-      <div class="modal-header">
-        <h3 class="modal-title">Deletion Result</h3>
-        <button class="modal-close" aria-label="Close dialog" onclick="closeDeleteResultModal()">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M18 6L6 18M6 6l12 12"/>
-          </svg>
-        </button>
-      </div>
-      <div class="modal-body">
-        <p id="delete-result-message" style="margin: 0; color: var(--text-primary);"></p>
-        <div id="delete-result-details" style="margin-top: 12px; font-size: 13px; color: var(--text-secondary);"></div>
-      </div>
-      <div class="modal-footer">
-        <button class="btn btn-primary" onclick="closeDeleteResultModal()">Close</button>
+        <button id="delete-confirm-btn" class="btn btn-danger" onclick="confirmDelete()">Delete</button>
       </div>
     </div>
   </div>
@@ -549,7 +506,7 @@
       <div class="modal-footer">
         <button id="session-info-dismiss-btn" class="btn btn-secondary" onclick="toggleDismissSession(_infoModalSessionId); closeTeamModal()">Dismiss</button>
         <button class="btn btn-secondary" onclick="showToolStatsModal(_infoModalSessionId)" title="Tool invocation statistics">Tool Stats</button>
-        <button class="btn btn-primary" onclick="closeTeamModal()">Close</button>
+        <button class="btn btn-secondary" onclick="closeTeamModal()">Close</button>
       </div>
     </div>
   </div>
@@ -567,7 +524,7 @@
       </div>
       <div id="tool-stats-modal-body" class="modal-body" style="overflow-y:auto;flex:1 1 auto;min-height:0;"></div>
       <div class="modal-footer">
-        <button class="btn btn-primary" onclick="closeToolStatsModal()">Close</button>
+        <button class="btn btn-secondary" onclick="closeToolStatsModal()">Close</button>
       </div>
     </div>
   </div>
@@ -596,7 +553,7 @@
       </div>
       <div id="plan-modal-body" class="modal-body detail-desc rendered-md" style="overflow-y: auto; flex: 0 1 auto; min-height: 0;"></div>
       <div class="modal-footer">
-        <button class="btn btn-primary" onclick="closePlanModal()">Close</button>
+        <button class="btn btn-secondary" onclick="closePlanModal()">Close</button>
       </div>
     </div>
   </div>
@@ -606,7 +563,7 @@
     <div class="modal modal-sm" onclick="event.stopPropagation()">
       <div class="modal-header">
         <h3 class="modal-title" style="display: flex; align-items: center; gap: 8px;">
-          <svg viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" style="width: 20px; height: 20px;">
+          <svg viewBox="0 0 24 24" fill="none" stroke="var(--danger)" stroke-width="2" style="width: 20px; height: 20px;">
             <circle cx="12" cy="12" r="10"/>
             <line x1="15" y1="9" x2="9" y2="15"/>
             <line x1="9" y1="9" x2="15" y2="15"/>
@@ -623,7 +580,7 @@
         <div id="blocked-task-message" style="color: var(--text-primary); line-height: 1.6;"></div>
       </div>
       <div class="modal-footer">
-        <button class="btn btn-primary" onclick="closeBlockedTaskModal()">OK</button>
+        <button class="btn btn-secondary" onclick="closeBlockedTaskModal()">OK</button>
       </div>
     </div>
   </div>
@@ -642,7 +599,7 @@
       </div>
       <div id="loop-modal-body" class="modal-body" style="overflow-y:auto;flex:0 1 auto;min-height:0;"></div>
       <div class="modal-footer">
-        <button class="btn btn-primary" onclick="closeLoopModal()">Close</button>
+        <button class="btn btn-secondary" onclick="closeLoopModal()">Close</button>
       </div>
     </div>
   </div>
@@ -674,7 +631,7 @@
       <div id="agent-modal-body" class="modal-body" style="overflow-y: auto; overflow-x: hidden; flex: 0 1 auto; min-height: 0;"></div>
       <div class="modal-footer">
         <button id="agent-modal-dismiss-btn" class="btn agent-dismiss-btn" style="display:none" onclick="dismissAgent(currentAgentModalId);closeAgentModal()">Dismiss</button>
-        <button class="btn btn-primary" onclick="closeAgentModal()">Close</button>
+        <button class="btn btn-secondary" onclick="closeAgentModal()">Close</button>
       </div>
     </div>
   </div>
@@ -693,7 +650,7 @@
       </div>
       <div class="modal-footer scratchpad-footer">
         <span id="scratchpad-charcount" class="scratchpad-charcount">0 chars</span>
-        <button class="btn btn-primary" onclick="closeScratchpad()">Close</button>
+        <button class="btn btn-secondary" onclick="closeScratchpad()">Close</button>
       </div>
     </div>
   </div>
@@ -717,7 +674,7 @@
       <div class="modal-body" id="storage-modal-body" style="overflow-y:auto;min-height:200px;max-height:60vh;padding-top:16px;padding-right:8px;"></div>
       <div class="modal-footer">
         <button id="storage-cleanup-btn" class="btn btn-secondary" onclick="cleanupOrphanedStorage()">Clean Orphaned</button>
-        <button class="btn btn-primary" onclick="closeStorageManager()">Close</button>
+        <button class="btn btn-secondary" onclick="closeStorageManager()">Close</button>
       </div>
     </div>
   </div>

package/public/style.css

@@ -893,13 +893,14 @@ body::before {
 }
 
 .icon-btn-danger {
-  color: #ef4444;
+  color: var(--danger);
+  border-color: var(--danger);
 }
 
 .icon-btn-danger:hover {
-  background: rgba(239, 68, 68, 0.1);
-  color: #dc2626;
-  border-color: #ef4444;
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+  color: color-mix(in srgb, var(--danger) 80%, black);
+  border-color: var(--danger);
 }
 
 /* theme picker: palette icon button + custom popover with per-theme swatches
@@ -1167,8 +1168,8 @@ body::before {
 }
 
 .task-badge.blocked {
-  background: rgba(220, 80, 30, 0.15);
-  color: #dc4e1e;
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  color: var(--accent);
 }
 
 .task-title {
@@ -1568,61 +1569,6 @@ body::before {
 
 /* #endregion */
 
-/* #region NOTE_FORM */
-.note-section {
-  margin-top: 8px;
-}
-
-.note-form {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.note-input {
-  width: 100%;
-  padding: 10px 12px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text-primary);
-  font-family: var(--mono);
-  font-size: 12px;
-  line-height: 1.5;
-  resize: vertical;
-  min-height: 60px;
-}
-
-.note-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px var(--accent-dim);
-}
-
-.note-input::placeholder {
-  color: var(--text-muted);
-}
-
-.note-submit {
-  align-self: flex-end;
-  padding: 8px 16px;
-  background: var(--accent);
-  border: none;
-  border-radius: 5px;
-  color: white;
-  font-family: var(--mono);
-  font-size: 11px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.note-submit:hover {
-  filter: brightness(1.1);
-}
-
-/* #endregion */
-
 /* #region TEAM_BADGE */
 .session-indicators {
   display: flex;
@@ -2512,8 +2458,8 @@ body::before {
   color: var(--success);
 }
 .toast.toast-error {
-  border-color: #f85149;
-  color: #f85149;
+  border-color: var(--danger);
+  color: var(--danger);
 }
 .toast.toast-info {
   border-color: var(--accent);
@@ -2847,10 +2793,10 @@ body::before {
   font-weight: 600;
 }
 .protocol-bool-true {
-  color: #4caf50;
+  color: var(--success);
 }
 .protocol-bool-false {
-  color: #ef5350;
+  color: var(--danger);
 }
 .msg-jump-latest {
   position: absolute;
@@ -3183,8 +3129,8 @@ body.light .msg-assistant .msg-text {
 
 /* #region INTERACTIVE */
 .icon-btn.delete:hover {
-  background: rgba(239, 68, 68, 0.1);
-  border-color: #ef4444;
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+  border-color: var(--danger);
 }
 
 .column-header {
@@ -3560,11 +3506,23 @@ select.form-input option:checked {
 }
 
 .btn-primary:hover {
-  background: #d96329;
+  background: color-mix(in srgb, var(--accent) 82%, black);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px var(--accent-glow);
 }
 
+.btn-danger {
+  background: var(--danger);
+  border-color: var(--danger);
+  color: white;
+}
+
+.btn-danger:hover {
+  background: color-mix(in srgb, var(--danger) 82%, black);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 45%, transparent);
+}
+
 .btn-secondary {
   background: transparent;
   color: var(--text-secondary);
@@ -3685,8 +3643,8 @@ select.form-input option:checked {
 
 .badge-success {
   display: inline-block;
-  background: rgba(34, 197, 94, 0.15);
-  color: #22c55e;
+  background: color-mix(in srgb, var(--success) 15%, transparent);
+  color: var(--success);
   border-radius: 4px;
   padding: 1px 6px;
   font-size: 12px;
@@ -3695,8 +3653,8 @@ select.form-input option:checked {
 
 .badge-failed {
   display: inline-block;
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
+  background: color-mix(in srgb, var(--danger) 15%, transparent);
+  color: var(--danger);
   border-radius: 4px;
   padding: 1px 6px;
   font-size: 12px;
@@ -3705,8 +3663,8 @@ select.form-input option:checked {
 
 .badge-rejected {
   display: inline-block;
-  background: rgba(245, 158, 11, 0.15);
-  color: #f59e0b;
+  background: color-mix(in srgb, var(--warning) 15%, transparent);
+  color: var(--warning);
   border-radius: 4px;
   padding: 1px 6px;
   font-size: 12px;
@@ -3714,7 +3672,7 @@ select.form-input option:checked {
 }
 
 .tool-stats-chip-val.rejected {
-  color: #f59e0b;
+  color: var(--warning);
 }
 
 .impact-bar-wrap {
@@ -3910,8 +3868,8 @@ select.form-input option:checked {
 }
 
 .storage-item-badge.orphan {
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
+  background: color-mix(in srgb, var(--danger) 15%, transparent);
+  color: var(--danger);
 }
 
 .storage-item-badge.pinned {
@@ -3920,8 +3878,8 @@ select.form-input option:checked {
 }
 
 .storage-item-badge.sticky {
-  background: rgba(234, 179, 8, 0.15);
-  color: #eab308;
+  background: color-mix(in srgb, var(--gold) 15%, transparent);
+  color: var(--gold);
 }
 
 .storage-item-actions {
@@ -3948,8 +3906,8 @@ select.form-input option:checked {
 }
 
 .storage-item-actions button.danger:hover {
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
+  background: color-mix(in srgb, var(--danger) 15%, transparent);
+  color: var(--danger);
 }
 
 .storage-group-header {

package/server.js

@@ -74,6 +74,7 @@ const TASKS_DIR = path.join(CLAUDE_DIR, 'tasks');
 const PROJECTS_DIR = path.join(CLAUDE_DIR, 'projects');
 const TEAMS_DIR = path.join(CLAUDE_DIR, 'teams');
 const PLANS_DIR = path.join(CLAUDE_DIR, 'plans');
+const SESSIONS_DIR = path.join(CLAUDE_DIR, 'sessions');
 const CCK_DIR = path.join(CLAUDE_DIR, '.cck');
 const AGENT_ACTIVITY_DIR = path.join(CCK_DIR, 'agent-activity');
 const CONTEXT_STATUS_DIR = path.join(CCK_DIR, 'context-status');
@@ -270,6 +271,87 @@ function resolveSessionId(sessionId) {
   return (teamConfig && teamConfig.leadSessionId) ? teamConfig.leadSessionId : sessionId;
 }
 
+// Recent Claude Code releases auto-create a single-member "self-team" for every
+// session: a teams/session-<id>/config.json whose only member is the "team-lead"
+// (the session itself). These are not real multi-agent teams — surfacing them
+// makes every solo session render a team badge, member panel, and (via the empty
+// team-named task dir) a shared-task-list link. Treat them as plain sessions.
+// As soon as a real teammate joins (members.length > 1) it becomes a true team again.
+function isAutoSelfTeam(cfg) {
+  if (!cfg || !Array.isArray(cfg.members)) return false;
+  const namedSession = typeof cfg.name === 'string' && cfg.name.startsWith('session-');
+  const soleLead = cfg.members.length === 0
+    || (cfg.members.length === 1 && cfg.members[0]?.agentType === 'team-lead');
+  return namedSession && soleLead;
+}
+
+// Claude Code 2.1.x stores a session's tasks in its self-team list (tasks/session-<id>/).
+// Usually `cfg.leadSessionId` is that session and already has a card. But a resumed /
+// continued session keeps writing to the original team's list while running under a new
+// session id, so `leadSessionId` points at the original (often a ghost with no card) and
+// the tasks can't be matched to the live session by id. The on-disk bridge is the
+// live-session registry (~/.claude/sessions/<pid>.json): the team's `createdAt` ≈ the
+// owning session's `startedAt` (both written at boot) and they share a cwd. Match on that.
+const SELF_TEAM_BOOT_WINDOW_MS = 60 * 1000;
+let liveSessionsCache = null;
+let lastLiveSessionsScan = 0;
+const LIVE_SESSIONS_TTL = 5000;
+
+function loadLiveSessions() {
+  const now = Date.now();
+  if (liveSessionsCache && now - lastLiveSessionsScan < LIVE_SESSIONS_TTL) return liveSessionsCache;
+  const sessions = [];
+  if (existsSync(SESSIONS_DIR)) {
+    try {
+      for (const file of readdirSync(SESSIONS_DIR).filter(f => f.endsWith('.json'))) {
+        try {
+          const s = JSON.parse(readFileSync(path.join(SESSIONS_DIR, file), 'utf8'));
+          if (s?.sessionId && s.kind === 'interactive') {
+            sessions.push({ sessionId: s.sessionId, cwd: s.cwd || null, startedAt: s.startedAt || 0 });
+          }
+        } catch (_) { /* skip invalid */ }
+      }
+    } catch (_) { /* ignore */ }
+  }
+  liveSessionsCache = sessions;
+  lastLiveSessionsScan = now;
+  return sessions;
+}
+
+// Given a self-team config, return the live interactive session id that owns it
+// (same cwd, startedAt within the boot window of the team's createdAt), or null.
+function resolveSelfTeamOwner(cfg) {
+  if (!cfg?.createdAt) return null;
+  const teamCwd = cfg.members?.[0]?.cwd;
+  if (!teamCwd) return null;
+  let best = null, bestDelta = Infinity;
+  for (const s of loadLiveSessions()) {
+    if (s.cwd !== teamCwd) continue;
+    const delta = Math.abs(s.startedAt - cfg.createdAt);
+    if (delta <= SELF_TEAM_BOOT_WINDOW_MS && delta < bestDelta) {
+      best = s.sessionId;
+      bestDelta = delta;
+    }
+  }
+  return best;
+}
+
+// Attach a team-named task dir's counts to a session card, preferring it over an empty or
+// smaller task dir (a team session can also have a near-empty UUID-named dir). Caller passes
+// the already-computed counts.
+function attachTeamTasks(card, teamTaskDir, teamName, counts) {
+  if (!card.tasksDir || counts.taskCount > (card.taskCount || 0)) {
+    Object.assign(card, {
+      taskCount: counts.taskCount,
+      completed: counts.completed,
+      inProgress: counts.inProgress,
+      pending: counts.pending,
+      tasksDir: teamTaskDir,
+      sharedTaskList: teamName,
+    });
+  }
+}
+
 // SSE clients for live updates
 const clients = new Set();
 
@@ -367,13 +449,18 @@ function getCustomTaskDir(sessionId) {
     const dir = path.join(TASKS_DIR, taskListName);
     if (existsSync(dir)) return dir;
   }
-  // Check team-named task directory (teams store tasks under ~/.claude/tasks/<teamName>/)
+  // Check team-named task directory (teams store tasks under ~/.claude/tasks/<teamName>/).
+  // Match either the recorded leadSessionId, or — for 2.1.x self-teams whose lead is a
+  // team-lead agent id — the live interactive session that owns the team (see resolveSelfTeamOwner).
   if (existsSync(TEAMS_DIR)) {
     try {
       for (const dir of readdirSync(TEAMS_DIR, { withFileTypes: true })) {
         if (!dir.isDirectory()) continue;
         const cfg = loadTeamConfig(dir.name);
-        if (cfg?.leadSessionId === sessionId) {
+        if (!cfg) continue;
+        const owns = cfg.leadSessionId === sessionId
+          || (isAutoSelfTeam(cfg) && resolveSelfTeamOwner(cfg) === sessionId);
+        if (owns) {
           const teamTaskDir = path.join(TASKS_DIR, dir.name);
           if (existsSync(teamTaskDir)) return teamTaskDir;
         }
@@ -931,8 +1018,46 @@ app.get('/api/sessions', async (req, res) => {
           const cfg = loadTeamConfig(dir.name);
           if (!cfg?.leadSessionId) continue;
           const leaderId = cfg.leadSessionId;
-          // Only remove team-named duplicate when leader is a different session
+          // Remove the team-named duplicate before bailing on self-teams. Otherwise an
+          // auto-created session-<uuid> self-team dir leaves a duplicate session card whose
+          // id (session-<uuid>) resolves no messages, so switching to it shows a stale log.
           if (sessionsMap.has(dir.name) && dir.name !== leaderId) sessionsMap.delete(dir.name);
+          if (isAutoSelfTeam(cfg)) {
+            // Self-teams are normally noise with an empty team-named task dir. But 2.1.x stores a
+            // session's tasks in the self-team list (tasks/session-<id>/), so when it's non-empty
+            // the tasks would be silently orphaned. Recover them (gated on taskCount > 0 to keep
+            // the empty-self-team noise case suppressed): attach to the owning card — the recorded
+            // leadSessionId when it has one, else the live session continuing it (resolved from the
+            // session registry), else a freshly-built fallback lead card.
+            const teamTaskDir = path.join(TASKS_DIR, dir.name);
+            if (!existsSync(teamTaskDir)) continue;
+            const counts = getTaskCounts(teamTaskDir);
+            if (counts.taskCount === 0) continue;
+
+            const ownerCard = sessionsMap.get(leaderId) || sessionsMap.get(resolveSelfTeamOwner(cfg));
+            if (ownerCard) {
+              attachTeamTasks(ownerCard, teamTaskDir, dir.name, counts);
+            } else {
+              const meta = metadata[leaderId] || {};
+              const logStat = getSessionLogStat(meta);
+              const logMtime = logStat.mtime;
+              const logAge = logMtime ? Date.now() - logMtime : Infinity;
+              const agentDir = path.join(AGENT_ACTIVITY_DIR, leaderId);
+              const agentStatus = checkAgentStatus(agentDir, logAge > AGENT_STALE_MS, logMtime, false);
+              const taskMtime = counts.newestTaskMtime ? counts.newestTaskMtime.getTime() : 0;
+              const card = buildSessionObject(leaderId, meta, {
+                _logStat: logStat,
+                name: getSessionDisplayName(leaderId, meta) || cfg.name || dir.name,
+                modifiedAt: new Date(Math.max(taskMtime, logMtime || 0)).toISOString(),
+                hasActiveAgents: agentStatus.hasActive,
+                hasRunningAgents: agentStatus.hasRunning,
+                hasWaitingForUser: !!agentStatus.waitingForUser,
+              });
+              attachTeamTasks(card, teamTaskDir, dir.name, counts);
+              sessionsMap.set(leaderId, card);
+            }
+            continue;
+          }
           const existing = sessionsMap.get(leaderId);
           if (existing) {
             existing.isTeam = true;
@@ -946,15 +1071,7 @@ app.get('/api/sessions', async (req, res) => {
             // holding the real tasks, the leader card otherwise shows 0/0.
             const teamTaskDir = path.join(TASKS_DIR, dir.name);
             if (existsSync(teamTaskDir)) {
-              const counts = getTaskCounts(teamTaskDir);
-              if (!existing.tasksDir || counts.taskCount > (existing.taskCount || 0)) {
-                existing.taskCount = counts.taskCount;
-                existing.completed = counts.completed;
-                existing.inProgress = counts.inProgress;
-                existing.pending = counts.pending;
-                existing.tasksDir = teamTaskDir;
-                existing.sharedTaskList = dir.name;
-              }
+              attachTeamTasks(existing, teamTaskDir, dir.name, getTaskCounts(teamTaskDir));
             }
             // Re-check agent status with isTeam=true
             const agentDir = path.join(AGENT_ACTIVITY_DIR, leaderId);
@@ -1170,7 +1287,7 @@ app.get('/api/projects/:encodedPath/tasks', (req, res) => {
 app.get('/api/sessions/:sessionId/plan', async (req, res) => {
   try {
     const metadata = loadSessionMetadata();
-    const meta = metadata[req.params.sessionId];
+    const meta = metadata[req.params.sessionId] || metadata[resolveSessionId(req.params.sessionId)];
     const slug = meta?.slug;
     if (!slug) return res.status(404).json({ error: 'No plan found' });
 
@@ -1188,7 +1305,7 @@ app.get('/api/sessions/:sessionId/plan', async (req, res) => {
 app.get('/api/sessions/:sessionId/loop', (req, res) => {
   try {
     const metadata = loadSessionMetadata();
-    const meta = metadata[req.params.sessionId];
+    const meta = metadata[req.params.sessionId] || metadata[resolveSessionId(req.params.sessionId)];
     if (!meta?.jsonlPath) return res.json({ wakeups: [], crons: [] });
     const state = refreshLoopInfoState(meta.jsonlPath);
     const filtered = filterActiveLoopInfo(buildLoopInfoFromState(state));
@@ -1211,7 +1328,7 @@ function openInEditor(...targets) {
 app.post('/api/sessions/:sessionId/plan/open', (req, res) => {
   try {
     const metadata = loadSessionMetadata();
-    const meta = metadata[req.params.sessionId];
+    const meta = metadata[req.params.sessionId] || metadata[resolveSessionId(req.params.sessionId)];
     const slug = meta?.slug;
     if (!slug) return res.status(404).json({ error: 'No plan found' });
 
@@ -1725,7 +1842,7 @@ app.get('/api/sessions/:sessionId/messages', (req, res) => {
   const limit = Math.min(parseInt(req.query.limit, 10) || 10, 50);
   const before = req.query.before || null;
   const metadata = loadSessionMetadata();
-  const meta = metadata[req.params.sessionId];
+  const meta = metadata[req.params.sessionId] || metadata[resolveSessionId(req.params.sessionId)];
   const jsonlPath = meta?.jsonlPath;
   if (!jsonlPath) return res.json({ messages: [], hasMore: false, sessionId: req.params.sessionId });
   let messages, hasMore;
@@ -1820,7 +1937,7 @@ app.get('/api/sessions/:sessionId/messages', (req, res) => {
 
 app.get('/api/sessions/:sessionId/tool-result/:toolUseId', (req, res) => {
   const metadata = loadSessionMetadata();
-  const meta = metadata[req.params.sessionId];
+  const meta = metadata[req.params.sessionId] || metadata[resolveSessionId(req.params.sessionId)];
   const jsonlPath = meta?.jsonlPath;
   if (!jsonlPath) return res.status(404).json({ error: 'session not found' });
   const content = readFullToolResult(jsonlPath, req.params.toolUseId);
@@ -1927,7 +2044,7 @@ function buildToolStats(jsonlPath) {
 
 app.get('/api/sessions/:sessionId/tool-stats', (req, res) => {
   const metadata = loadSessionMetadata();
-  const meta = metadata[req.params.sessionId];
+  const meta = metadata[req.params.sessionId] || metadata[resolveSessionId(req.params.sessionId)];
   const jsonlPath = meta?.jsonlPath;
   if (!jsonlPath) return res.status(404).json({ error: 'session not found' });
   try {
@@ -1941,7 +2058,7 @@ app.get('/api/sessions/:sessionId/tool-stats', (req, res) => {
 
 app.get('/api/sessions/:sessionId/user-image/:msgUuid/:blockIndex', (req, res) => {
   const metadata = loadSessionMetadata();
-  const meta = metadata[req.params.sessionId];
+  const meta = metadata[req.params.sessionId] || metadata[resolveSessionId(req.params.sessionId)];
   const jsonlPath = meta?.jsonlPath;
   if (!jsonlPath) return res.status(404).end();
   const img = readUserImage(jsonlPath, req.params.msgUuid, req.params.blockIndex);
@@ -2023,40 +2140,6 @@ app.get('/api/tasks/all', async (req, res) => {
   }
 });
 
-// API: Add note to a task
-app.post('/api/tasks/:sessionId/:taskId/note', async (req, res) => {
-  try {
-    const { sessionId, taskId } = req.params;
-    const { note } = req.body;
-
-    if (!note || !note.trim()) {
-      return res.status(400).json({ error: 'Note cannot be empty' });
-    }
-
-    const sessionDir = getCustomTaskDir(sessionId) || path.join(TASKS_DIR, sessionId);
-    const taskPath = path.join(sessionDir, `${taskId}.json`);
-
-    if (!existsSync(taskPath)) {
-      return res.status(404).json({ error: 'Task not found' });
-    }
-
-    // Read current task
-    const task = JSON.parse(await fs.readFile(taskPath, 'utf8'));
-
-    // Append note to description
-    const noteBlock = `\n\n---\n\n#### [Note added by user]\n\n${note.trim()}`;
-    task.description = (task.description || '') + noteBlock;
-
-    // Write updated task
-    await fs.writeFile(taskPath, JSON.stringify(task, null, 2));
-
-    res.json({ success: true, task });
-  } catch (error) {
-    console.error('Error adding note:', error);
-    res.status(500).json({ error: 'Failed to add note' });
-  }
-});
-
 // API: Update task fields (subject, description)
 app.put('/api/tasks/:sessionId/:taskId', async (req, res) => {
   try {