claude-code-kanban 4.9.0 → 4.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "4.9.0",
+  "version": "4.10.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

@@ -270,6 +270,20 @@ 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;
+}
+
 // SSE clients for live updates
 const clients = new Set();
 
@@ -931,8 +945,11 @@ 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)) continue;
           const existing = sessionsMap.get(leaderId);
           if (existing) {
             existing.isTeam = true;
@@ -1170,7 +1187,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 +1205,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 +1228,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 +1742,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 +1837,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 +1944,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 +1958,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 +2040,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 {