claude-code-kanban 2.0.0-rc.1 → 2.0.1

package/README.md

@@ -4,7 +4,9 @@
 [![license](https://img.shields.io/npm/l/claude-code-kanban)](LICENSE)
 [![npm downloads](https://img.shields.io/npm/dm/claude-code-kanban)](https://www.npmjs.com/package/claude-code-kanban)
 
-> Watch Claude Code think, in real time.
+**[Live Demo & Docs](https://nikiforovall.blog/claude-code-kanban/)**
+
+> Watch Claude Code work, in real time.
 
 ![Dark mode](assets/screenshot-dark-v2.png)
 

package/package.json

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

package/public/index.html

@@ -366,14 +366,49 @@
     }
 
     /* Live Updates */
+    .collapse-chevron {
+      width: 14px;
+      height: 14px;
+      stroke: var(--text-muted);
+      fill: none;
+      stroke-width: 2;
+      transition: transform 0.2s ease;
+      flex-shrink: 0;
+    }
+
+    .collapse-chevron.rotated {
+      transform: rotate(-90deg);
+    }
+
+    .collapsible-section {
+      transition: max-height 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
+      overflow: hidden;
+    }
+
+    .collapsible-section.collapsed {
+      max-height: 0 !important;
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+      opacity: 0;
+      overflow: hidden;
+    }
+
     .live-updates {
-      padding: 0 16px 12px;
-      max-height: 180px;
+      padding: 0 16px 8px;
+      max-height: 140px;
       overflow-y: auto;
+      transition: max-height 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
+    }
+
+    .live-updates.collapsed {
+      max-height: 0;
+      padding: 0 16px;
+      overflow: hidden;
+      opacity: 0;
     }
 
     .live-empty {
-      padding: 16px;
+      padding: 8px;
       text-align: center;
       font-size: 11px;
       color: var(--text-muted);
@@ -382,12 +417,12 @@
     .live-item {
       display: flex;
       align-items: flex-start;
-      gap: 10px;
-      padding: 10px 12px;
+      gap: 8px;
+      padding: 6px 10px;
       background: var(--bg-deep);
       border: 1px solid transparent;
-      border-radius: 8px;
-      margin-bottom: 4px;
+      border-radius: 6px;
+      margin-bottom: 3px;
       cursor: pointer;
       transition: all 0.15s ease;
     }
@@ -397,14 +432,14 @@
     }
 
     .live-item .pulse {
-      width: 8px;
-      height: 8px;
+      width: 6px;
+      height: 6px;
       margin-top: 4px;
       background: var(--accent);
       border-radius: 50%;
       flex-shrink: 0;
       animation: pulse 2s ease-in-out infinite;
-      box-shadow: 0 0 12px var(--accent-glow);
+      box-shadow: 0 0 8px var(--accent-glow);
     }
 
     .live-item-content {
@@ -413,7 +448,7 @@
     }
 
     .live-item-action {
-      font-size: 13px;
+      font-size: 11px;
       color: var(--text-primary);
       white-space: nowrap;
       overflow: hidden;
@@ -421,9 +456,9 @@
     }
 
     .live-item-session {
-      font-size: 11px;
+      font-size: 10px;
       color: var(--text-tertiary);
-      margin-top: 2px;
+      margin-top: 1px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1173,6 +1208,7 @@
       border-radius: 4px;
       border: 1px solid transparent;
       transition: border-color 0.15s ease;
+      overflow-x: auto;
     }
 
     .detail-desc:hover {
@@ -1630,13 +1666,13 @@
     .pinned-sessions-divider {
       height: 1px; margin: 4px 8px; background: color-mix(in srgb, var(--accent) 30%, transparent);
     }
-    .agent-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-top: 16px; }
+    .agent-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-top: 16px; align-items: center; }
     .agent-tab { padding: 8px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; user-select: none; }
     .agent-tab:hover { color: var(--text-secondary); border-bottom-color: var(--text-muted); }
     .agent-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
     .agent-tab-panel { display: none; padding-top: 12px; overflow: hidden; position: relative; }
     .agent-tab-panel.active { display: block; }
-    .agent-tab-copy { position: absolute; top: 14px; right: 8px; background: var(--surface-hover); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; cursor: pointer; color: var(--text-tertiary); opacity: 0.7; transition: opacity 0.15s, color 0.15s; z-index: 2; }
+    .agent-tab-copy { margin-left: auto; background: var(--surface-hover); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; cursor: pointer; color: var(--text-tertiary); opacity: 0.7; transition: opacity 0.15s, color 0.15s; margin-bottom: -1px; }
     .agent-tab-copy:hover { opacity: 1; color: var(--text-primary); }
     .toast { position: fixed; bottom: 24px; left: 24px; transform: translateY(20px); background: var(--bg-elevated); color: var(--accent-text); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 20px; font-size: 13px; font-weight: 600; z-index: 10000; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
     .toast.visible { opacity: 1; transform: translateY(0); }
@@ -1729,9 +1765,9 @@
     .agent-footer.collapsed .agent-footer-content { display: none; }
     .agent-card {
       display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 14px;
+      flex-direction: column;
+      gap: 3px;
+      padding: 8px 12px;
       background: var(--bg-elevated);
       border: 1px solid var(--border);
       border-radius: 8px;
@@ -1740,11 +1776,30 @@
       overflow: hidden;
       transition: opacity 0.3s;
       cursor: pointer;
+      position: relative;
     }
     .agent-card:hover { border-color: var(--accent); }
     .agent-card.fading { opacity: 0.4; }
+    .agent-type-row {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      min-width: 0;
+    }
+    .agent-type-ns {
+      font-size: 11px; color: var(--text-muted); font-weight: 400;
+    }
+    .agent-type-name {
+      font-size: 13px; font-weight: 600; color: var(--text-primary);
+      overflow: hidden; text-overflow: ellipsis;
+    }
+    .agent-status-row {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
     .agent-dot {
-      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+      width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
     }
     .agent-dot.active { background: var(--success); box-shadow: 0 0 6px var(--success); }
     .agent-dot.idle { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
@@ -1757,9 +1812,14 @@
     }
     .agent-message {
       font-size: 11px; color: var(--text-muted);
-      max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     }
 
+    .agent-dismiss-btn {
+      font-size: 12px; padding: 4px 10px;
+      background: var(--bg-tertiary); color: var(--text-secondary);
+      border: 1px solid var(--border);
+    }
     .agent-badge { font-size: 12px; cursor: default; }
 
     /* Permission pending — indicated by ❓ badge only */
@@ -1913,10 +1973,17 @@
       background: rgba(0, 0, 0, 0.6);
     }
 
+    .modal.fullscreen {
+      width: 76vw !important;
+      max-width: 76vw !important;
+      height: 85vh !important;
+      max-height: 85vh !important;
+    }
+
     .modal.plan-modal {
       width: 60vw;
       max-width: 60vw;
-      max-height: 90vh;
+      max-height: 85vh;
       display: flex;
       flex-direction: column;
     }
@@ -2233,6 +2300,12 @@
       color: var(--text-primary);
     }
 
+    .project-group-header.kb-selected {
+      color: var(--text-primary);
+      background: var(--bg-hover);
+      border-radius: 4px;
+    }
+
     .project-group-header .group-chevron {
       transition: transform 0.15s ease;
       flex-shrink: 0;
@@ -2395,8 +2468,11 @@
 
       <!-- Live Updates -->
       <div class="sidebar-section">
-        <div class="section-header">
+        <div class="section-header" onclick="toggleLiveUpdates()" style="cursor: pointer;">
           <span>Live Updates</span>
+          <svg id="live-updates-chevron" class="collapse-chevron" viewBox="0 0 24 24">
+            <path d="M6 9l6 6 6-6"/>
+          </svg>
         </div>
         <div id="live-updates" class="live-updates">
           <div class="live-empty">No active tasks</div>
@@ -2405,46 +2481,50 @@
 
       <!-- Tasks -->
       <div class="sidebar-section flex-1">
-        <div class="section-header">
+        <div class="section-header" onclick="toggleSection('sessions-filters', 'sessions-chevron')" style="cursor: pointer;">
           <span>Sessions</span>
-          <button onclick="showAllTasks()" style="background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; font-size: 10px; color: var(--text-secondary); cursor: pointer; font-family: var(--mono);">All Tasks</button>
-        </div>
-        <div class="search-container">
-          <input
-            id="search-input"
-            type="text"
-            class="search-input"
-            placeholder="Search tasks, sessions, projects..."
-            oninput="handleSearch(this.value)"
-          />
-          <button id="search-clear-btn" class="search-clear" onclick="clearSearch()" title="Clear search" aria-label="Clear search">
-            <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="filter-row">
-          <select id="project-filter" class="filter-dropdown" onchange="filterByProject(this.value)" aria-label="Filter by project">
-            <option value="">All Projects</option>
-          </select>
-          <select id="session-filter" class="filter-dropdown" onchange="filterBySessions(this.value)" aria-label="Filter by session status">
-            <option value="all">All Sessions</option>
-            <option value="active">Active Only</option>
-          </select>
+          <svg id="sessions-chevron" class="collapse-chevron" viewBox="0 0 24 24">
+            <path d="M6 9l6 6 6-6"/>
+          </svg>
         </div>
-        <div class="filter-row">
-          <select id="session-limit" class="filter-dropdown" onchange="changeSessionLimit(this.value)" aria-label="Number of sessions to show">
-            <option value="10">Show 10</option>
-            <option value="20">Show 20</option>
-            <option value="50">Show 50</option>
-            <option value="all">Show All</option>
-          </select>
-          <button class="icon-btn reset-btn" onclick="resetState()" title="Reset all filters" aria-label="Reset all filters">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
-              <path d="M3 12a9 9 0 1 1 9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
-              <path d="M3 22v-6h6"/>
-            </svg>
-          </button>
+        <div id="sessions-filters" class="collapsible-section">
+          <div class="search-container">
+            <input
+              id="search-input"
+              type="text"
+              class="search-input"
+              placeholder="Search tasks, sessions, projects..."
+              oninput="handleSearch(this.value)"
+            />
+            <button id="search-clear-btn" class="search-clear" onclick="clearSearch()" title="Clear search" aria-label="Clear search">
+              <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="filter-row">
+            <select id="project-filter" class="filter-dropdown" onchange="filterByProject(this.value)" aria-label="Filter by project">
+              <option value="">All Projects</option>
+            </select>
+            <select id="session-filter" class="filter-dropdown" onchange="filterBySessions(this.value)" aria-label="Filter by session status">
+              <option value="all">All Sessions</option>
+              <option value="active">Active Only</option>
+            </select>
+          </div>
+          <div class="filter-row">
+            <select id="session-limit" class="filter-dropdown" onchange="changeSessionLimit(this.value)" aria-label="Number of sessions to show">
+              <option value="10">Show 10</option>
+              <option value="20">Show 20</option>
+              <option value="50">Show 50</option>
+              <option value="all">Show All</option>
+            </select>
+            <button class="icon-btn reset-btn" onclick="resetState()" title="Reset all filters" aria-label="Reset all filters">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+                <path d="M3 12a9 9 0 1 1 9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                <path d="M3 22v-6h6"/>
+              </svg>
+            </button>
+          </div>
         </div>
         <div id="sessions-list" class="sessions-list"></div>
       </div>
@@ -2943,6 +3023,18 @@
       renderLiveUpdates(activeTasks);
     }
 
+    function toggleSection(containerId, chevronId) {
+      const container = document.getElementById(containerId);
+      const chevron = document.getElementById(chevronId);
+      const collapsed = container.classList.toggle('collapsed');
+      chevron.classList.toggle('rotated', collapsed);
+      localStorage.setItem(containerId + 'Collapsed', collapsed);
+    }
+
+    function toggleLiveUpdates() {
+      toggleSection('live-updates', 'live-updates-chevron');
+    }
+
     function renderLiveUpdates(activeTasks) {
       const container = document.getElementById('live-updates');
 
@@ -3410,9 +3502,18 @@
         }
         const toolParamsHtml = renderToolParamsHtml(m.params);
         const toolResultHtml = renderToolResultHtml(m.toolResult, m.toolResultTruncated, m.toolResultFull);
-        const detailEscaped = escapeHtml(fullText);
-        const detailRendered = m.tool === 'Bash' ? highlightBash(detailEscaped) : detailEscaped;
-        body.innerHTML = (fullText ? descHtml + `<pre class="msg-detail-pre">${detailRendered}</pre>` : '<em>No details</em>') + toolParamsHtml + toolResultHtml + agentExtraHtml;
+        const hasAgentTabs = m.tool === 'Agent' && m.agentId && (m.agentLastMessage || m.agentPrompt);
+        let mainHtml;
+        if (hasAgentTabs) {
+          mainHtml = descHtml || '';
+        } else if (fullText) {
+          const detailEscaped = escapeHtml(fullText);
+          const detailRendered = m.tool === 'Bash' ? highlightBash(detailEscaped) : detailEscaped;
+          mainHtml = descHtml + `<pre class="msg-detail-pre">${detailRendered}</pre>`;
+        } else {
+          mainHtml = '<em>No details</em>';
+        }
+        body.innerHTML = mainHtml + toolParamsHtml + (hasAgentTabs ? '' : toolResultHtml) + agentExtraHtml;
       } else {
         const text = stripAnsi(m.fullText || m.text);
         document.getElementById('msg-detail-title').textContent = m.type === 'assistant' ? 'Claude' : (m.systemLabel ? 'System' : 'User');
@@ -3431,6 +3532,7 @@
 
       const meta = [formatDate(m.timestamp)];
       if (m.model) meta.unshift(m.model);
+      meta.push(`${idx + 1} of ${currentMessages.length}`);
       document.getElementById('msg-detail-meta').textContent = meta.join(' · ');
       currentPinDetailId = null;
       updateMsgDetailPinState();
@@ -3438,10 +3540,32 @@
     }
 
     function closeMsgDetailModal() {
-      document.getElementById('msg-detail-modal').classList.remove('visible');
+      resetModalFullscreen('msg-detail-modal');
       msgDetailFollowLatest = false;
     }
 
+    function toggleModalFullscreen(modalId) {
+      const modal = document.querySelector(`#${modalId} .modal`);
+      const isFs = modal.classList.toggle('fullscreen');
+      updateFullscreenBtnIcon(`${modalId}-fullscreen-btn`, isFs);
+    }
+
+    function resetModalFullscreen(modalId) {
+      const modal = document.getElementById(modalId);
+      modal.classList.remove('visible');
+      modal.querySelector('.modal').classList.remove('fullscreen');
+      updateFullscreenBtnIcon(`${modalId}-fullscreen-btn`, false);
+      return modal;
+    }
+
+    function updateFullscreenBtnIcon(btnId, isFullscreen) {
+      const btn = document.getElementById(btnId);
+      if (!btn) return;
+      btn.innerHTML = isFullscreen
+        ? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg>'
+        : '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>';
+    }
+
     let _toastTimer = null;
     function showToast(msg) {
       const el = document.getElementById('toast');
@@ -3536,7 +3660,7 @@
       const id = `expand-${++_expandIdCounter}`;
       const fontSize = opts.fontSize || '0.8rem';
       const maxHeight = opts.maxHeight || '';
-      const btn = `<button onclick="var f=document.getElementById('${id}'),t=this.parentElement.nextElementSibling,expand=f.style.display==='none';f.style.display=expand?'block':'none';t.style.display=expand?'none':'block';this.textContent=expand?'Show less':'Show more'" style="background:none;border:none;color:var(--accent);cursor:pointer;font-size:${fontSize};text-decoration:underline">Show more</button>`;
+      const btn = `<button onclick="var f=document.getElementById('${id}'),t=this.parentElement.nextElementSibling,expand=f.style.display==='none';f.style.display=expand?'block':'none';t.style.display=expand?'none':'block';this.textContent=expand?'Show less':'Show more'" style="background:none;border:none;color:var(--accent);cursor:pointer;font-size:${fontSize};text-decoration:underline;margin-left:6px">Show more</button>`;
       const mhStyle = maxHeight ? `max-height:${maxHeight};` : '';
       const full = `<pre id="${id}" class="msg-detail-pre" style="${mhStyle}overflow:auto;display:none">${fullHtml}</pre>`;
       return { btn, full };
@@ -3545,7 +3669,9 @@
     function autoSizeModal(modal, body) {
       const hasTable = body.querySelector('table') !== null;
       const hasPre = body.querySelector('pre') !== null;
-      modal.style.maxWidth = hasTable ? '1100px' : (body.textContent.length > 2000 || hasPre) ? '960px' : '860px';
+      const desired = hasTable ? 1100 : (body.textContent.length > 2000 || hasPre) ? 960 : 860;
+      const current = parseFloat(getComputedStyle(modal).maxWidth) || 0;
+      if (desired > current) modal.style.maxWidth = desired + 'px';
     }
 
     function renderToolResultHtml(toolResult, isTruncated, fullResult) {
@@ -3683,16 +3809,14 @@
         const promptTrunc = promptTrimmed.length > 60 ? promptTrimmed.substring(0, 60) + '…' : promptTrimmed;
         const msgHtml = promptTrunc
           ? `<div class="agent-message" title="${escapeHtml(promptTrimmed)}">${escapeHtml(promptTrunc)}</div>` : '';
-        const agentPinned = isAgentPinned(a.agentId);
-        const agentPinBtn = `<button class="msg-pin-btn${agentPinned ? ' pinned' : ''}" onclick="event.stopPropagation();toggleAgentPin('${a.agentId}')" title="${agentPinned ? 'Unpin' : 'Pin'} agent">${PIN_SVG}</button>`;
+        const rawType = a.type || 'unknown';
+        const colonIdx = rawType.indexOf(':');
+        const typeNs = colonIdx > 0 ? rawType.substring(0, colonIdx + 1) : '';
+        const typeName = colonIdx > 0 ? rawType.substring(colonIdx + 1) : rawType;
         return `<div class="agent-card" onclick="showAgentModal('${a.agentId}')">
-          <span class="agent-dot ${a.status}"></span>
-          <div style="flex:1;min-width:0">
-            <div class="agent-type">${escapeHtml(a.type || 'unknown')}</div>
-            <div class="agent-status">${statusText}</div>
-            ${msgHtml}
-          </div>
-          ${agentPinBtn}
+          <div class="agent-type-row">${typeNs ? `<span class="agent-type-ns">${escapeHtml(typeNs)}</span>` : ''}<span class="agent-type-name">${escapeHtml(typeName)}</span></div>
+          <div class="agent-status-row"><span class="agent-dot ${a.status}"></span><span class="agent-status">${statusText}</span></div>
+          ${msgHtml}
         </div>`;
       }).join('');
 
@@ -3737,6 +3861,17 @@
       updateAgentModalPinState();
     }
 
+    async function dismissAgent(agentId) {
+      if (!currentSessionId || !agentId) return;
+      try {
+        const res = await fetch(`/api/sessions/${currentSessionId}/agents/${agentId}/stop`, { method: 'POST' });
+        if (res.ok) {
+          currentWaiting = null;
+          fetchAgents(currentSessionId);
+        }
+      } catch (e) { console.error('[dismissAgent]', e); }
+    }
+
     function showAgentModal(agentId) {
       const agent = currentAgents.find(a => a.agentId === agentId);
       if (!agent) return;
@@ -3779,6 +3914,9 @@
 
       body.innerHTML = html;
       updateAgentModalPinState();
+      autoSizeModal(modal.querySelector('.modal'), body);
+      const dismissBtn = document.getElementById('agent-modal-dismiss-btn');
+      dismissBtn.style.display = (agent.status === 'active' || agent.status === 'idle') ? '' : 'none';
       modal.classList.add('visible');
       const keyHandler = (e) => {
         if (e.key === 'Escape') {
@@ -3791,7 +3929,7 @@
     }
 
     function closeAgentModal() {
-      document.getElementById('agent-modal').classList.remove('visible');
+      resetModalFullscreen('agent-modal');
       currentAgentModalId = null;
     }
 
@@ -4047,29 +4185,34 @@
         sessionsList.innerHTML = filteredSessions.map(renderSessionCard).join('');
       }
 
-      const items = getSessionItems();
-      const activeIdx = items.findIndex(el => el.classList.contains('active'));
+      const navItems = getNavigableItems();
+      const allSessions = getSessionItems();
+      const activeIdx = allSessions.findIndex(el => el.classList.contains('active'));
       if (activeIdx >= 0 && (selectedSessionIdx < 0 || sessionJustSelected)) {
-        selectedSessionIdx = activeIdx;
-        selectedSessionKbId = items[activeIdx].dataset.sessionId || null;
+        const navIdx = navItems.indexOf(allSessions[activeIdx]);
+        selectedSessionIdx = navIdx >= 0 ? navIdx : 0;
+        selectedSessionKbId = allSessions[activeIdx].dataset.sessionId || null;
         sessionJustSelected = false;
       }
 
       if (selectedSessionKbId && focusZone === 'sidebar') {
-        const restoredIdx = items.findIndex(el => el.dataset.sessionId === selectedSessionKbId);
+        const restoredIdx = navItems.findIndex(el =>
+          getKbId(el) === selectedSessionKbId
+        );
         if (restoredIdx >= 0) {
           selectedSessionIdx = restoredIdx;
-          items[restoredIdx].classList.add('kb-selected');
+          navItems[restoredIdx].classList.add('kb-selected');
         } else {
           selectedSessionIdx = -1;
           selectedSessionKbId = null;
         }
       } else if (focusZone === 'sidebar' && selectedSessionIdx >= 0) {
-        if (items.length > 0) {
-          const clamped = Math.min(selectedSessionIdx, items.length - 1);
+        if (navItems.length > 0) {
+          const clamped = Math.min(selectedSessionIdx, navItems.length - 1);
           selectedSessionIdx = clamped;
-          selectedSessionKbId = items[clamped].dataset.sessionId || null;
-          items[clamped].classList.add('kb-selected');
+          const el = navItems[clamped];
+          selectedSessionKbId = getKbId(el);
+          el.classList.add('kb-selected');
         } else {
           selectedSessionIdx = -1;
           selectedSessionKbId = null;
@@ -4303,31 +4446,71 @@
       }
     }
 
+    function getKbId(el) {
+      return el.dataset.sessionId || el.dataset.groupPath || null;
+    }
+
+    function getGroupSessionsContainer(header) {
+      let el = header.nextElementSibling;
+      while (el && !el.classList.contains('project-group-sessions')) el = el.nextElementSibling;
+      return el;
+    }
+
+    function getNavigableItems() {
+      const items = [];
+      for (const el of sessionsList.children) {
+        if (el.classList.contains('project-group-header')) {
+          items.push(el);
+          if (!collapsedProjectGroups.has(el.dataset.groupPath)) {
+            const container = getGroupSessionsContainer(el);
+            if (container) {
+              for (const s of container.querySelectorAll('.session-item')) items.push(s);
+            }
+          }
+        } else if (el.classList.contains('session-item')) {
+          items.push(el);
+        }
+      }
+      return items;
+    }
+
     function getSessionItems() {
       return Array.from(sessionsList.querySelectorAll('.session-item'));
     }
 
-    function selectSessionByIndex(idx) {
-      const items = getSessionItems();
-      if (items.length === 0) return;
-      const prev = sessionsList.querySelector('.session-item.kb-selected');
+    function clearKbSelection() {
+      const prev = sessionsList.querySelector('.kb-selected');
       if (prev) prev.classList.remove('kb-selected');
+    }
+
+    function selectSessionByIndex(idx, items) {
+      items = items || getNavigableItems();
+      if (items.length === 0) return;
+      clearKbSelection();
       selectedSessionIdx = Math.max(0, Math.min(idx, items.length - 1));
-      selectedSessionKbId = items[selectedSessionIdx].dataset.sessionId || null;
-      items[selectedSessionIdx].classList.add('kb-selected');
-      items[selectedSessionIdx].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+      const el = items[selectedSessionIdx];
+      selectedSessionKbId = getKbId(el);
+      el.classList.add('kb-selected');
+      el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     }
 
-    function navigateSession(direction) {
-      const items = getSessionItems();
+    function navigateSession(direction, items) {
+      items = items || getNavigableItems();
       if (items.length === 0) return;
       if (selectedSessionIdx < 0) {
-        selectSessionByIndex(0);
+        selectSessionByIndex(0, items);
         return;
       }
-      const newIdx = selectedSessionIdx + direction;
+      const currentEl = items[selectedSessionIdx];
+      let newIdx = selectedSessionIdx + direction;
+      if (!currentEl || !currentEl.isConnected) {
+        const restoredIdx = selectedSessionKbId
+          ? items.findIndex(el => getKbId(el) === selectedSessionKbId)
+          : -1;
+        newIdx = restoredIdx >= 0 ? restoredIdx : 0;
+      }
       if (newIdx >= 0 && newIdx < items.length) {
-        selectSessionByIndex(newIdx);
+        selectSessionByIndex(newIdx, items);
       }
     }
 
@@ -4338,26 +4521,56 @@
       if (collapsed) collapsedProjectGroups.add(projectPath);
       else collapsedProjectGroups.delete(projectPath);
       header.classList.toggle('collapsed', collapsed);
-      let el = header.nextElementSibling;
-      while (el && !el.classList.contains('project-group-sessions')) el = el.nextElementSibling;
-      if (el) el.classList.toggle('collapsed', collapsed);
+      const container = getGroupSessionsContainer(header);
+      if (container) container.classList.toggle('collapsed', collapsed);
       try { localStorage.setItem('collapsedGroups', JSON.stringify([...collapsedProjectGroups])); } catch(_) {}
     }
 
-    function toggleSelectedSessionGroup(collapse) {
-      const items = getSessionItems();
+    function handleSidebarHorizontal(direction) {
+      const items = getNavigableItems();
       if (selectedSessionIdx < 0 || selectedSessionIdx >= items.length) return;
-      const container = items[selectedSessionIdx].closest('.project-group-sessions');
-      if (!container) return;
-      let header = container.previousElementSibling;
-      while (header && !header.classList.contains('project-group-header')) header = header.previousElementSibling;
-      setGroupCollapsed(header, collapse);
+      const el = items[selectedSessionIdx];
+      const isHeader = el.classList.contains('project-group-header');
+      const collapse = direction < 0;
+
+      if (isHeader) {
+        const groupPath = el.dataset.groupPath;
+        const isCollapsed = collapsedProjectGroups.has(groupPath);
+        if (collapse) {
+          if (!isCollapsed) setGroupCollapsed(el, true);
+        } else {
+          if (isCollapsed) {
+            setGroupCollapsed(el, false);
+          } else {
+            navigateSession(1);
+          }
+        }
+      } else {
+        if (collapse) {
+          const container = el.closest('.project-group-sessions');
+          if (container) {
+            let header = container.previousElementSibling;
+            while (header && !header.classList.contains('project-group-header')) header = header.previousElementSibling;
+            if (header) {
+              const headerIdx = items.indexOf(header);
+              if (headerIdx >= 0) selectSessionByIndex(headerIdx, items);
+            }
+          }
+        } else {
+          activateSelectedSession(items);
+        }
+      }
     }
 
-    function activateSelectedSession() {
-      const items = getSessionItems();
-      if (selectedSessionIdx >= 0 && selectedSessionIdx < items.length) {
-        items[selectedSessionIdx].click();
+    function activateSelectedSession(items) {
+      items = items || getNavigableItems();
+      if (selectedSessionIdx < 0 || selectedSessionIdx >= items.length) return;
+      const el = items[selectedSessionIdx];
+      if (el.classList.contains('project-group-header')) {
+        const groupPath = el.dataset.groupPath;
+        setGroupCollapsed(el, !collapsedProjectGroups.has(groupPath));
+      } else {
+        el.click();
       }
     }
 
@@ -4365,8 +4578,7 @@
       const sidebar = document.querySelector('.sidebar');
       // Clear all zone visuals
       sidebar.classList.remove('sidebar-focused');
-      const prevSession = sessionsList.querySelector('.session-item.kb-selected');
-      if (prevSession) prevSession.classList.remove('kb-selected');
+      clearKbSelection();
       const selCard = document.querySelector('.task-card.selected');
       if (selCard) selCard.classList.remove('selected');
 
@@ -4377,13 +4589,13 @@
           localStorage.setItem('sidebar-collapsed', false);
         }
         sidebar.classList.add('sidebar-focused');
-        const items = getSessionItems();
+        const items = getNavigableItems();
         if (items.length > 0) {
           const activeIdx = items.findIndex(el => el.classList.contains('active'));
           if (activeIdx >= 0) {
             selectSessionByIndex(activeIdx);
           } else if (selectedSessionKbId) {
-            const restoredIdx = items.findIndex(el => el.dataset.sessionId === selectedSessionKbId);
+            const restoredIdx = items.findIndex(el => getKbId(el) === selectedSessionKbId);
             selectSessionByIndex(restoredIdx >= 0 ? restoredIdx : 0);
           } else {
             selectSessionByIndex(0);
@@ -4731,11 +4943,11 @@
         if (e.key === 'Escape') {
           e.preventDefault();
           closeDeleteConfirmModal();
-        } else if (e.key === 'ArrowLeft' || e.key === 'h') {
+        } else if (matchKey(e, 'ArrowLeft', 'KeyH')) {
           e.preventDefault();
           focusIdx = 0;
           buttons[focusIdx].focus();
-        } else if (e.key === 'ArrowRight' || e.key === 'l') {
+        } else if (matchKey(e, 'ArrowRight', 'KeyL')) {
           e.preventDefault();
           focusIdx = 1;
           buttons[focusIdx].focus();
@@ -4817,35 +5029,58 @@
 
     document.getElementById('close-detail').onclick = closeDetailPanel;
 
+    // Layout-independent key matching: pass Arrow* for e.key, Key* for e.code (physical position)
+    function matchKey(e, ...keys) {
+      if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return false;
+      return keys.some(k => e.key === k || e.code === k);
+    }
+
     document.addEventListener('keydown', (e) => {
       if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') {
         return;
       }
 
+      // Modal guard — only Escape, Shift+M, and msg-detail J/K navigation pass through
       if (document.querySelector('.modal-overlay.visible')) {
         if (e.key === 'Escape') {
           document.querySelectorAll('.modal-overlay.visible').forEach(m => m.classList.remove('visible'));
           msgDetailFollowLatest = false;
-        } else if ((e.key === 'M' || e.key === 'm') && e.shiftKey && document.getElementById('msg-detail-modal').classList.contains('visible')) {
+        } else if (e.code === 'KeyM' && e.shiftKey && document.getElementById('msg-detail-modal').classList.contains('visible')) {
           e.preventDefault();
           closeMsgDetailModal();
+        } else if (document.getElementById('msg-detail-modal').classList.contains('visible')) {
+          if (matchKey(e, 'ArrowDown', 'KeyJ')) {
+            e.preventDefault();
+            if (currentMsgDetailIdx < currentMessages.length - 1) {
+              msgDetailFollowLatest = false;
+              showMsgDetail(currentMsgDetailIdx + 1);
+            } else if (currentMsgDetailIdx === currentMessages.length - 1) {
+              msgDetailFollowLatest = true;
+              showMsgDetail(currentMsgDetailIdx);
+            }
+          } else if (matchKey(e, 'ArrowUp', 'KeyK')) {
+            e.preventDefault();
+            if (currentMsgDetailIdx > 0) {
+              msgDetailFollowLatest = false;
+              showMsgDetail(currentMsgDetailIdx - 1);
+            }
+          }
         }
         return;
       }
 
+      // Global shortcuts
       if (e.key === '[') {
         e.preventDefault();
         toggleSidebar();
         return;
       }
-
-      if ((e.key === 'L' || e.key === 'l') && e.shiftKey) {
+      if (e.code === 'KeyL' && e.shiftKey) {
         e.preventDefault();
         toggleMessagePanel();
         return;
       }
-
-      if ((e.key === 'M' || e.key === 'm') && e.shiftKey) {
+      if (e.code === 'KeyM' && e.shiftKey) {
         e.preventDefault();
         const msgDetailModal = document.getElementById('msg-detail-modal');
         if (msgDetailModal.classList.contains('visible')) {
@@ -4860,30 +5095,34 @@
       // Tab toggles focus zone
       if (e.key === 'Tab') {
         e.preventDefault();
+        if (focusZone === 'sidebar') {
+          const hasCards = document.querySelector('.task-card');
+          if (!hasCards) return;
+        }
         setFocusZone(focusZone === 'board' ? 'sidebar' : 'board');
         return;
       }
 
       // Sidebar navigation
       if (focusZone === 'sidebar') {
-        if (e.key === 'j' || e.key === 'ArrowDown') {
+        if (matchKey(e, 'ArrowDown', 'KeyJ')) {
           e.preventDefault();
           navigateSession(1);
           return;
         }
-        if (e.key === 'k' || e.key === 'ArrowUp') {
+        if (matchKey(e, 'ArrowUp', 'KeyK')) {
           e.preventDefault();
           navigateSession(-1);
           return;
         }
-        if (e.key === 'h' || e.key === 'ArrowLeft') {
+        if (matchKey(e, 'ArrowLeft', 'KeyH')) {
           e.preventDefault();
-          toggleSelectedSessionGroup(true);
+          handleSidebarHorizontal(-1);
           return;
         }
-        if (e.key === 'l' || e.key === 'ArrowRight') {
+        if (matchKey(e, 'ArrowRight', 'KeyL')) {
           e.preventDefault();
-          toggleSelectedSessionGroup(false);
+          handleSidebarHorizontal(1);
           return;
         }
         if (e.key === 'Enter' || e.key === ' ') {
@@ -4895,82 +5134,70 @@
           setFocusZone('board');
           return;
         }
-        if (e.key === 'p' || e.key === 'P') {
-          e.preventDefault();
-          const highlighted = sessionsList.querySelector('.session-item.kb-selected');
-          const sid = highlighted?.dataset.sessionId || currentSessionId;
-          if (sid) openPlanForSession(sid);
-          return;
-        }
-        if (e.key === 'i' || e.key === 'I') {
-          e.preventDefault();
-          const highlighted = sessionsList.querySelector('.session-item.kb-selected');
-          const sid = highlighted?.dataset.sessionId || currentSessionId;
-          if (sid) showSessionInfoModal(sid);
-          return;
-        }
-        if (e.key === '?' || (e.key === '/' && e.shiftKey)) {
-          e.preventDefault();
-          showHelpModal();
-        }
-        return;
       }
 
       // Board navigation
-      const navKeys = ['j','k','h','l','ArrowUp','ArrowDown','ArrowLeft','ArrowRight'];
-      if (navKeys.includes(e.key)) {
-        e.preventDefault();
-        if (e.key === 'j' || e.key === 'ArrowDown') navigateVertical(1);
-        else if (e.key === 'k' || e.key === 'ArrowUp') navigateVertical(-1);
-        else if (e.key === 'h' || e.key === 'ArrowLeft') navigateHorizontal(-1);
-        else if (e.key === 'l' || e.key === 'ArrowRight') navigateHorizontal(1);
+      if (focusZone === 'board') {
+        if (matchKey(e, 'ArrowDown', 'KeyJ', 'ArrowUp', 'KeyK', 'ArrowLeft', 'KeyH', 'ArrowRight', 'KeyL')) {
+          e.preventDefault();
+          if (!selectedTaskId && !document.querySelector('.task-card.selected')) {
+            setFocusZone('sidebar');
+            return;
+          }
+          if (matchKey(e, 'ArrowDown', 'KeyJ')) navigateVertical(1);
+          else if (matchKey(e, 'ArrowUp', 'KeyK')) navigateVertical(-1);
+          else if (matchKey(e, 'ArrowLeft', 'KeyH')) navigateHorizontal(-1);
+          else if (matchKey(e, 'ArrowRight', 'KeyL')) navigateHorizontal(1);
 
-        if (selectedTaskId && detailPanel.classList.contains('visible')) {
-          showTaskDetail(selectedTaskId, selectedSessionId);
+          if (selectedTaskId && detailPanel.classList.contains('visible')) {
+            showTaskDetail(selectedTaskId, selectedSessionId);
+          }
+          return;
         }
-        return;
-      }
 
-      if ((e.key === 'Enter' || e.key === ' ') && selectedTaskId && e.target.tagName !== 'BUTTON') {
-        e.preventDefault();
-        if (detailPanel.classList.contains('visible')) {
-          const labelEl = document.querySelector('.detail-label');
-          const shownId = labelEl?.textContent.match(/\d+/)?.[0];
-          if (shownId === selectedTaskId) {
-            closeDetailPanel();
+        if ((e.key === 'Enter' || e.key === ' ') && selectedTaskId && e.target.tagName !== 'BUTTON') {
+          e.preventDefault();
+          if (detailPanel.classList.contains('visible')) {
+            const labelEl = document.querySelector('.detail-label');
+            const shownId = labelEl?.textContent.match(/\d+/)?.[0];
+            if (shownId === selectedTaskId) {
+              closeDetailPanel();
+            } else {
+              showTaskDetail(selectedTaskId, selectedSessionId);
+            }
           } else {
             showTaskDetail(selectedTaskId, selectedSessionId);
           }
-        } else {
-          showTaskDetail(selectedTaskId, selectedSessionId);
+          return;
+        }
+
+        if (matchKey(e, 'KeyD') && selectedTaskId) {
+          e.preventDefault();
+          deleteTask(selectedTaskId, selectedSessionId || currentSessionId);
+          return;
         }
-        return;
       }
 
       if (e.key === 'Escape') {
         if (detailPanel.classList.contains('visible')) closeDetailPanel();
         else if (messagePanelOpen) toggleMessagePanel();
-      }
-
-      if (e.key === 'p' || e.key === 'P') {
-        e.preventDefault();
-        const sid = selectedSessionId || currentSessionId;
-        if (sid) openPlanForSession(sid);
         return;
       }
 
-      if (e.key === 'i' || e.key === 'I') {
+      // Shared actions — work in both sidebar and board
+      const contextSid = focusZone === 'sidebar'
+        ? (sessionsList.querySelector('.kb-selected')?.dataset.sessionId || currentSessionId)
+        : (selectedSessionId || currentSessionId);
+      if (matchKey(e, 'KeyP') && !e.shiftKey) {
         e.preventDefault();
-        const sid = selectedSessionId || currentSessionId;
-        if (sid) showSessionInfoModal(sid);
+        if (contextSid) openPlanForSession(contextSid);
         return;
       }
-
-      if ((e.key === 'd' || e.key === 'D') && selectedTaskId) {
+      if (matchKey(e, 'KeyI') && !e.shiftKey) {
         e.preventDefault();
-        deleteTask(selectedTaskId, selectedSessionId || currentSessionId);
+        if (contextSid) showSessionInfoModal(contextSid);
+        return;
       }
-
       if (e.key === '?' || (e.key === '/' && e.shiftKey)) {
         e.preventDefault();
         showHelpModal();
@@ -5137,14 +5364,14 @@
       }
       if (!tabs.length) return '';
       const defaultTab = responseHtml ? 'response' : tabs[0].key;
-      const copyBtn = (key) => `<button class="agent-tab-copy" title="Copy" onclick="copyAgentTab('${id}-${key}',this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg></button>`;
+      const copyBtnHtml = `<button class="agent-tab-copy" title="Copy" onclick="copyAgentTabActive('${id}',this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg></button>`;
       const tabsHtml = tabs.map(t =>
         `<div class="agent-tab${t.key === defaultTab ? ' active' : ''}" data-tab-group="${id}" data-tab-key="${t.key}" onclick="document.querySelectorAll('[data-tab-group=\\'${id}\\']').forEach(el=>{el.classList.toggle('active',el.dataset.tabKey==='${t.key}')})">${t.label}</div>`
       ).join('');
       const panelsHtml = panels.map(p =>
-        `<div class="agent-tab-panel${p.key === defaultTab ? ' active' : ''}" data-tab-group="${id}" data-tab-key="${p.key}">${copyBtn(p.key)}<div class="detail-desc rendered-md" style="font-size:13px;">${p.html}</div></div>`
+        `<div class="agent-tab-panel${p.key === defaultTab ? ' active' : ''}" data-tab-group="${id}" data-tab-key="${p.key}"><div class="detail-desc rendered-md" style="font-size:13px;">${p.html}</div></div>`
       ).join('');
-      return `<div class="agent-tabs">${tabsHtml}</div>${panelsHtml}`;
+      return `<div class="agent-tabs">${tabsHtml}${copyBtnHtml}</div>${panelsHtml}`;
     }
 
     async function copyAgentTab(key, btn) {
@@ -5153,6 +5380,13 @@
       copyWithFeedback(text, btn);
     }
 
+    async function copyAgentTabActive(groupId, btn) {
+      const activePanel = document.querySelector(`.agent-tab-panel.active[data-tab-group="${groupId}"]`);
+      if (!activePanel) return;
+      const key = groupId + '-' + activePanel.dataset.tabKey;
+      copyAgentTab(key, btn);
+    }
+
     const ownerColors = [
       { bg: 'rgba(37, 99, 235, 0.14)',  color: '#1d5bbf' },  // blue
       { bg: 'rgba(168, 85, 247, 0.14)', color: '#7c3aed' },  // purple
@@ -5641,7 +5875,7 @@
     }
 
     function closePlanModal() {
-      document.getElementById('plan-modal').classList.remove('visible');
+      resetModalFullscreen('plan-modal');
     }
 
     function openPlanInEditor() {
@@ -5702,6 +5936,12 @@
 
     // Init
     loadTheme();
+    ['live-updates', 'sessions-filters'].forEach(id => {
+      if (localStorage.getItem(id + 'Collapsed') === 'true') {
+        document.getElementById(id).classList.add('collapsed');
+        document.getElementById(id === 'live-updates' ? 'live-updates-chevron' : 'sessions-chevron').classList.add('rotated');
+      }
+    });
 
     document.addEventListener('DOMContentLoaded', () => {
       if (typeof marked !== 'undefined' && typeof hljs !== 'undefined') {
@@ -5788,6 +6028,9 @@
           <button class="icon-btn" aria-label="Open in editor" title="Open in editor" onclick="openMsgInEditor()">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
           </button>
+          <button id="msg-detail-fullscreen-btn" class="icon-btn" aria-label="Toggle fullscreen" title="Toggle fullscreen" onclick="toggleModalFullscreen('msg-detail-modal')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+          </button>
           <button class="modal-close" aria-label="Close" onclick="closeMsgDetailModal()">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
           </button>
@@ -5882,6 +6125,10 @@
                 <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Shift+M</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Open last message detail</td>
               </tr>
+              <tr>
+                <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">J/K</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Navigate messages in detail modal</td>
+              </tr>
             </table>
           </div>
         </div>
@@ -5986,6 +6233,9 @@
           <button class="icon-btn" aria-label="Copy plan" title="Copy plan" onclick="copyWithFeedback(_pendingPlanContent||'',this)">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
           </button>
+          <button id="plan-modal-fullscreen-btn" class="icon-btn" aria-label="Toggle fullscreen" title="Toggle fullscreen" onclick="toggleModalFullscreen('plan-modal')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+          </button>
           <button class="modal-close" aria-label="Close dialog" onclick="closePlanModal()">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M18 6L6 18M6 6l12 12"/>
@@ -6038,6 +6288,9 @@
           <button class="icon-btn" id="agent-modal-copy-all" aria-label="Copy all" title="Copy prompt + response" onclick="copyAgentModalAll(this)">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
           </button>
+          <button id="agent-modal-fullscreen-btn" class="icon-btn" aria-label="Toggle fullscreen" title="Toggle fullscreen" onclick="toggleModalFullscreen('agent-modal')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+          </button>
           <button class="modal-close" aria-label="Close dialog" onclick="closeAgentModal()">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M18 6L6 18M6 6l12 12"/>
@@ -6047,6 +6300,7 @@
       </div>
       <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>
       </div>
     </div>

package/server.js

@@ -3,7 +3,7 @@
 const express = require('express');
 const path = require('path');
 const fs = require('fs').promises;
-const { existsSync, readdirSync, readFileSync, statSync, createReadStream } = require('fs');
+const { existsSync, readdirSync, readFileSync, writeFileSync, statSync, createReadStream, unlinkSync } = require('fs');
 const readline = require('readline');
 const chokidar = require('chokidar');
 const os = require('os');
@@ -128,6 +128,11 @@ function loadTeamConfig(teamName) {
   }
 }
 
+function resolveSessionId(sessionId) {
+  const teamConfig = loadTeamConfig(sessionId);
+  return (teamConfig && teamConfig.leadSessionId) ? teamConfig.leadSessionId : sessionId;
+}
+
 // SSE clients for live updates
 const clients = new Set();
 
@@ -604,7 +609,7 @@ app.get('/api/sessions', async (req, res) => {
     }
 
     // Convert map to array and sort by most recently modified
-    sessions = Array.from(sessionsMap.values());
+    let sessions = Array.from(sessionsMap.values());
     sessions.sort((a, b) => new Date(b.modifiedAt) - new Date(a.modifiedAt));
 
     // Apply limit if specified, but always include pinned sessions
@@ -755,12 +760,7 @@ app.get('/api/teams/:name', (req, res) => {
 
 // API: Get agents for a session
 app.get('/api/sessions/:sessionId/agents', (req, res) => {
-  let sessionId = req.params.sessionId;
-  // For team sessions, resolve to leader's session UUID
-  const teamConfig = loadTeamConfig(sessionId);
-  if (teamConfig && teamConfig.leadSessionId) {
-    sessionId = teamConfig.leadSessionId;
-  }
+  const sessionId = resolveSessionId(req.params.sessionId);
   const agentDir = path.join(AGENT_ACTIVITY_DIR, sessionId);
   if (!existsSync(agentDir)) return res.json({ agents: [], waitingForUser: null });
   try {
@@ -809,6 +809,25 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
   }
 });
 
+app.post('/api/sessions/:sessionId/agents/:agentId/stop', (req, res) => {
+  const sessionId = resolveSessionId(req.params.sessionId);
+  const agentId = path.basename(req.params.agentId).replace(/[^a-zA-Z0-9_-]/g, '');
+  const agentFile = path.join(AGENT_ACTIVITY_DIR, sessionId, agentId + '.json');
+  if (!existsSync(agentFile)) return res.status(404).json({ error: 'Agent not found' });
+  try {
+    const agent = JSON.parse(readFileSync(agentFile, 'utf8'));
+    agent.status = 'stopped';
+    agent.stoppedAt = new Date().toISOString();
+    writeFileSync(agentFile, JSON.stringify(agent), 'utf8');
+    // Also remove waiting state if present
+    const waitingFile = path.join(AGENT_ACTIVITY_DIR, sessionId, '_waiting.json');
+    if (existsSync(waitingFile)) unlinkSync(waitingFile);
+    res.json({ ok: true });
+  } catch (e) {
+    res.status(500).json({ error: 'Failed to stop agent' });
+  }
+});
+
 app.get('/api/sessions/:sessionId/messages', (req, res) => {
   const limit = Math.min(parseInt(req.query.limit, 10) || 10, 50);
   const metadata = loadSessionMetadata();
@@ -819,10 +838,8 @@ app.get('/api/sessions/:sessionId/messages', (req, res) => {
   const agentMessages = messages.filter(m => m.tool === 'Agent' && m.toolUseId);
   if (agentMessages.length) {
     const progressMap = getProgressMap(jsonlPath);
-    let sessionId = req.params.sessionId;
-    const teamConfig = loadTeamConfig(sessionId);
-    if (teamConfig && teamConfig.leadSessionId) sessionId = teamConfig.leadSessionId;
-    const agentDir = path.join(AGENT_ACTIVITY_DIR, sessionId);
+    const resolvedSid = resolveSessionId(req.params.sessionId);
+    const agentDir = path.join(AGENT_ACTIVITY_DIR, resolvedSid);
     for (const msg of agentMessages) {
       const entry = progressMap[msg.toolUseId];
       if (entry) {