claude-code-kanban 4.8.0 → 4.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "4.8.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';
@@ -5986,6 +5783,69 @@ function loadTheme() {
   updateThemeIcon();
   updateThemeColor(document.body.classList.contains('light'));
   syncHljsTheme();
+  buildThemeMenu();
+  const colorTheme = localStorage.getItem('color-theme');
+  if (colorTheme) document.body.dataset.colorTheme = colorTheme;
+  syncColorThemeSelect(colorTheme || 'ember');
+}
+
+const COLOR_THEMES = [
+  ['ember', 'Ember'],
+  ['gruvbox', 'Gruvbox'],
+  ['catppuccin', 'Catppuccin'],
+  ['tokyo-night', 'Tokyo Night'],
+  ['solarized', 'Solarized'],
+  ['dracula', 'Dracula'],
+  ['nord', 'Nord'],
+  ['rose-pine', 'Rosé Pine'],
+  ['everforest', 'Everforest'],
+  ['kanagawa', 'Kanagawa'],
+  ['one-dark', 'One Dark'],
+  ['night-owl', 'Night Owl'],
+  ['monokai', 'Monokai Pro'],
+  ['github', 'GitHub'],
+  ['ayu', 'Ayu'],
+  ['vitesse', 'Vitesse'],
+  ['synthwave', "Synthwave '84"],
+];
+
+function buildThemeMenu() {
+  const menu = document.getElementById('themeMenu');
+  menu.innerHTML = COLOR_THEMES.map(
+    ([id, label]) =>
+      `<button type="button" class="theme-menu-item" data-theme-id="${id}"
+         onclick="event.stopPropagation(); setColorTheme('${id}'); toggleThemeMenu()">
+         <span class="theme-swatch theme-swatch-${id}"><i class="sw-bg"></i><i class="sw-accent"></i><i class="sw-ink"></i></span>${label}
+       </button>`,
+  ).join('');
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function toggleThemeMenu(e) {
+  e?.stopPropagation();
+  const menu = document.getElementById('themeMenu');
+  const open = menu.classList.toggle('open');
+  if (open) {
+    document.addEventListener('click', () => menu.classList.remove('open'), { once: true });
+  }
+}
+
+function syncColorThemeSelect(id) {
+  document.querySelectorAll('.theme-menu-item').forEach((el) => {
+    el.classList.toggle('on', el.dataset.themeId === (id || 'ember'));
+  });
+}
+
+// 'ember' (the :root default) has no override block — selecting it clears the attribute.
+function setColorTheme(id) {
+  if (!id || id === 'ember') {
+    delete document.body.dataset.colorTheme;
+    localStorage.removeItem('color-theme');
+  } else {
+    document.body.dataset.colorTheme = id;
+    localStorage.setItem('color-theme', id);
+  }
+  syncColorThemeSelect(id);
 }
 
 //#endregion
@@ -7065,21 +6925,35 @@ window.hubNavigate = function hubNavigate(app, url) {
 
 (function initHubTheme() {
   const getTheme = () => (document.body.classList.contains('light') ? 'light' : 'dark');
+  const getColorTheme = () => document.body.dataset.colorTheme || 'ember';
   const hubOrigin = () => (window.__HUB__?.url ? new URL(window.__HUB__.url).origin : null);
+  // lastTheme/lastColorTheme are updated synchronously when applying a hub
+  // message, so the (async) observer sees no diff and doesn't echo it back.
   let lastTheme = getTheme();
+  let lastColorTheme = getColorTheme();
   window.addEventListener('message', (e) => {
     if (e.source !== window.parent || e.origin !== hubOrigin()) return;
     if (e.data?.type !== 'hub:theme') return;
-    if (getTheme() === e.data.theme) return;
-    window.toggleTheme();
-    lastTheme = getTheme();
+    if (typeof e.data.colorTheme === 'string' && e.data.colorTheme !== getColorTheme()) {
+      setColorTheme(e.data.colorTheme);
+      lastColorTheme = getColorTheme();
+    }
+    if (getTheme() !== e.data.theme) {
+      window.toggleTheme();
+      lastTheme = getTheme();
+    }
   });
   new MutationObserver(() => {
     const t = getTheme();
-    if (t === lastTheme) return;
+    const ct = getColorTheme();
+    if (t === lastTheme && ct === lastColorTheme) return;
     lastTheme = t;
+    lastColorTheme = ct;
     const origin = hubOrigin();
-    if (origin) window.parent.postMessage({ type: 'hub:theme', theme: t }, origin);
-  }).observe(document.body, { attributes: true, attributeFilter: ['class'] });
+    if (origin) window.parent.postMessage({ type: 'hub:theme', theme: t, colorTheme: ct }, origin);
+  }).observe(document.body, {
+    attributes: true,
+    attributeFilter: ['class', 'data-color-theme'],
+  });
 })();
 // #endregion HUB_INTEGRATION

package/public/index.html

@@ -15,6 +15,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Playfair+Display:wght@400;500;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/style.css">
+  <link rel="stylesheet" href="/themes.css">
   <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github-dark.min.css" id="hljs-theme-dark">
@@ -143,6 +144,10 @@
                 <ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
               </svg>
             </button>
+            <span class="icon-btn theme-picker" id="themePickerBtn" title="Color theme" onclick="toggleThemeMenu(event)">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>
+              <div class="theme-menu" id="themeMenu"></div>
+            </span>
             <button id="theme-toggle" class="icon-btn" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle theme">
               <svg id="theme-icon-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
@@ -216,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>
@@ -467,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>
@@ -544,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>
@@ -562,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>
@@ -591,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>
@@ -601,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"/>
@@ -618,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>
@@ -637,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>
@@ -669,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>
@@ -688,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>
@@ -712,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>