claude-code-kanban 1.12.0 → 1.13.0

package/package.json

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

package/public/index.html

@@ -13,6 +13,9 @@
   </style>
   <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">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github.min.css" id="hljs-theme-light" disabled>
+  <script defer src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js"></script>
   <style>
     :root {
       --bg-deep: #101114;
@@ -877,8 +880,8 @@
     }
 
     .detail-close {
-      width: 28px;
-      height: 28px;
+      width: 34px;
+      height: 34px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -896,8 +899,8 @@
     }
 
     .detail-close svg {
-      width: 16px;
-      height: 16px;
+      width: 20px;
+      height: 20px;
     }
 
     .detail-content {
@@ -1011,12 +1014,23 @@
     }
 
     .detail-desc pre {
+      border-radius: 6px;
+      overflow: hidden;
+      margin: 12px 0;
+      font-size: 12px;
+    }
+
+    .detail-desc pre code.hljs {
+      padding: 12px;
+      border-radius: 6px;
+    }
+
+    .detail-desc pre code {
       background: var(--bg-elevated);
       padding: 12px;
       border-radius: 6px;
+      display: block;
       overflow-x: auto;
-      margin: 12px 0;
-      font-size: 12px;
     }
 
     .detail-desc code {
@@ -1026,11 +1040,6 @@
       font-size: 0.9em;
     }
 
-    .detail-desc pre code {
-      background: transparent;
-      padding: 0;
-    }
-
     .detail-desc hr {
       border: none;
       border-top: 1px solid var(--border);
@@ -1366,6 +1375,19 @@
       display: flex;
     }
 
+    .plan-modal-overlay {
+      z-index: 10001;
+      background: rgba(0, 0, 0, 0.6);
+    }
+
+    .modal.plan-modal {
+      width: 60vw;
+      max-width: 60vw;
+      max-height: 90vh;
+      display: flex;
+      flex-direction: column;
+    }
+
     .modal {
       background: var(--bg-surface);
       border: 1px solid var(--border);
@@ -1533,6 +1555,11 @@
       border-color: var(--text-muted);
     }
 
+    .btn:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
     /* Skip navigation */
     .skip-link {
       position: absolute;
@@ -1848,11 +1875,18 @@
     <aside id="detail-panel" class="detail-panel">
       <header class="detail-header">
         <h3>Task Details</h3>
-        <button id="close-detail" class="detail-close" aria-label="Close detail panel">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M6 18L18 6M6 6l12 12"/>
-          </svg>
-        </button>
+        <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;">
+            <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>
+          </button>
+          <button id="close-detail" class="detail-close" aria-label="Close detail panel">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M6 18L18 6M6 6l12 12"/>
+            </svg>
+          </button>
+        </div>
       </header>
       <div id="detail-content" class="detail-content"></div>
     </aside>
@@ -1866,7 +1900,8 @@
     let viewMode = 'session';
     let sessionFilter = 'active';
     let sessionLimit = '20';
-    let filterProject = null; // null = all projects, or project path to filter
+    let filterProject = '__recent__'; // null = all, '__recent__' = last 24h, or project path
+    let recentProjects = new Set();
     let searchQuery = ''; // Search query for fuzzy search
     let allTasksCache = []; // Cache all tasks for search
     let bulkDeleteSessionId = null; // Track session for bulk delete
@@ -1895,7 +1930,7 @@
       if (currentSessionId) params.set('session', currentSessionId);
       if (sessionFilter !== 'active') params.set('filter', sessionFilter);
       if (sessionLimit !== '20') params.set('limit', sessionLimit);
-      if (filterProject) params.set('project', filterProject);
+      if (filterProject && filterProject !== '__recent__') params.set('project', filterProject);
       if (ownerFilter) params.set('owner', ownerFilter);
       if (searchQuery) params.set('search', searchQuery);
       const qs = params.toString();
@@ -1907,7 +1942,7 @@
       history.replaceState(null, '', window.location.pathname);
       sessionFilter = 'active';
       sessionLimit = '20';
-      filterProject = null;
+      filterProject = '__recent__';
       ownerFilter = '';
       searchQuery = '';
       viewMode = 'all';
@@ -2192,7 +2227,7 @@
         const allTasks = await res.json();
         let activeTasks = allTasks.filter(t => t.status === 'in_progress');
         if (filterProject) {
-          activeTasks = activeTasks.filter(t => t.project === filterProject);
+          activeTasks = activeTasks.filter(t => matchesProjectFilter(t.project));
         }
         renderLiveUpdates(activeTasks);
       } catch (error) {
@@ -2270,7 +2305,7 @@
         const res = await fetch('/api/tasks/all');
         let tasks = await res.json();
         if (filterProject) {
-          tasks = tasks.filter(t => t.project === filterProject);
+          tasks = tasks.filter(t => matchesProjectFilter(t.project));
         }
         currentTasks = tasks;
         updateUrl();
@@ -2290,9 +2325,10 @@
       const completed = currentTasks.filter(t => t.status === 'completed').length;
       const percent = totalTasks > 0 ? Math.round((completed / totalTasks) * 100) : 0;
 
-      const projectName = filterProject ? filterProject.split('/').pop() : null;
-      sessionTitle.textContent = filterProject ? `Tasks: ${projectName}` : 'All Tasks';
-      sessionMeta.textContent = filterProject
+      const isFiltered = filterProject && filterProject !== '__recent__';
+      const projectName = isFiltered ? filterProject.split(/[/\\]/).pop() : null;
+      sessionTitle.textContent = isFiltered ? `Tasks: ${projectName}` : (filterProject === '__recent__' ? 'Recent Tasks' : 'All Tasks');
+      sessionMeta.textContent = isFiltered
         ? `${totalTasks} tasks in this project`
         : `${totalTasks} tasks across ${sessions.length} sessions`;
       progressPercent.textContent = `${percent}%`;
@@ -2310,7 +2346,7 @@
         filteredSessions = filteredSessions.filter(s => s.pending > 0 || s.inProgress > 0);
       }
       if (filterProject) {
-        filteredSessions = filteredSessions.filter(s => s.project === filterProject);
+        filteredSessions = filteredSessions.filter(s => matchesProjectFilter(s.project));
       }
 
       // Apply search filter
@@ -2389,14 +2425,14 @@
         const memberCount = session.memberCount || 0;
 
         return `
-          <button onclick="fetchTasks('${session.id}')" class="session-item ${isActive ? 'active' : ''}" title="${tooltip}">
+          <button onclick="fetchTasks('${session.id}')" data-session-id="${session.id}" class="session-item ${isActive ? 'active' : ''}" title="${tooltip}">
             <div class="session-name">${escapeHtml(primaryName)}</div>
             ${secondaryName ? `<div class="session-secondary">${escapeHtml(secondaryName)}</div>` : ''}
             ${gitBranch ? `<div class="session-branch">${gitBranch}</div>` : ''}
             <div class="session-progress">
               <span class="session-indicators">
                 ${isTeam ? `<span class="team-badge" title="${memberCount} team members"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>${memberCount}</span>` : ''}
-                ${isTeam ? `<span class="team-info-btn" onclick="event.stopPropagation(); showTeamModalForSession('${session.id}')" title="View team info">ℹ</span>` : ''}
+                ${(isTeam || session.project) ? `<span class="team-info-btn" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="View session info">ℹ</span>` : ''}
                 ${hasInProgress ? '<span class="pulse"></span>' : ''}
               </span>
               <div class="progress-bar"><div class="progress-fill" style="width: ${percent}%"></div></div>
@@ -2530,7 +2566,7 @@
         const card = document.querySelector(`.task-card[data-task-id="${selectedTaskId}"][data-session-id="${selectedSessionId}"]`)
           || document.querySelector(`.task-card[data-task-id="${selectedTaskId}"]`);
         if (card) {
-          card.classList.add('selected');
+          if (focusZone === 'board') card.classList.add('selected');
         } else {
           selectedTaskId = null;
           selectedSessionId = null;
@@ -2660,13 +2696,20 @@
           selectSessionByIndex(selectedSessionIdx);
         }
       } else {
+        // Session changed while in sidebar — reset stale selection
+        if (selectedSessionId && selectedSessionId !== currentSessionId) {
+          selectedTaskId = null;
+          selectedSessionId = null;
+        }
         if (selectedTaskId) {
-          const card = document.querySelector(`.task-card[data-task-id="${selectedTaskId}"][data-session-id="${selectedSessionId}"]`)
-            || document.querySelector(`.task-card[data-task-id="${selectedTaskId}"]`);
+          const card = document.querySelector(`.task-card[data-task-id="${selectedTaskId}"][data-session-id="${selectedSessionId}"]`);
           if (card) card.classList.add('selected');
         } else {
           navigateVertical(1);
         }
+        if (selectedTaskId && detailPanel.classList.contains('visible')) {
+          showTaskDetail(selectedTaskId, selectedSessionId);
+        }
       }
     }
 
@@ -2738,19 +2781,8 @@
 
       detailContent.innerHTML = `
         <div class="detail-section">
-          <div style="display: flex; justify-content: space-between; align-items: start;">
-            <div style="flex: 1;">
-              <div class="detail-label">Task #${task.id}</div>
-              <h2 class="detail-title">${escapeHtml(task.subject)}</h2>
-            </div>
-            <div style="display: flex; gap: 8px;">
-              <button id="delete-task-btn" class="icon-btn" title="Delete task (D)" aria-label="Delete task" style="color: #ef4444; border-color: #ef4444;">
-                <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>
-              </button>
-            </div>
-          </div>
+          <div class="detail-label">Task #${task.id}</div>
+          <h2 class="detail-title">${escapeHtml(task.subject)}</h2>
         </div>
 
         <div class="detail-section" style="display: flex; gap: 12px; align-items: center;">
@@ -2800,7 +2832,9 @@
       `;
 
       // Setup button handlers
-      document.getElementById('delete-task-btn').onclick = () => deleteTask(task.id, actualSessionId);
+      const deleteBtn = document.getElementById('delete-task-btn');
+      deleteBtn.style.display = '';
+      deleteBtn.onclick = () => deleteTask(task.id, actualSessionId);
     }
 
     async function addNote(event, taskId, sessionId) {
@@ -2834,10 +2868,12 @@
 
     function closeDetailPanel() {
       detailPanel.classList.remove('visible');
+      document.getElementById('delete-task-btn').style.display = 'none';
     }
 
     let deleteTaskId = null;
     let deleteSessionId = null;
+    let deleteModalKeyHandler = null;
 
     function showBlockedTaskModal(task) {
       const messageDiv = document.getElementById('blocked-task-message');
@@ -2890,15 +2926,31 @@
       const modal = document.getElementById('delete-confirm-modal');
       modal.classList.add('visible');
 
-      // Handle ESC key
-      const keyHandler = (e) => {
+      const buttons = [
+        document.getElementById('delete-cancel-btn'),
+        document.getElementById('delete-confirm-btn')
+      ];
+      let focusIdx = 1;
+      buttons[focusIdx].focus();
+
+      deleteModalKeyHandler = (e) => {
         if (e.key === 'Escape') {
           e.preventDefault();
           closeDeleteConfirmModal();
-          document.removeEventListener('keydown', keyHandler);
+        } else if (e.key === 'ArrowLeft' || e.key === 'h') {
+          e.preventDefault();
+          focusIdx = 0;
+          buttons[focusIdx].focus();
+        } else if (e.key === 'ArrowRight' || e.key === 'l') {
+          e.preventDefault();
+          focusIdx = 1;
+          buttons[focusIdx].focus();
+        } else if (e.key === 'Enter') {
+          e.preventDefault();
+          buttons[focusIdx].click();
         }
       };
-      document.addEventListener('keydown', keyHandler);
+      document.addEventListener('keydown', deleteModalKeyHandler);
     }
 
     function closeDeleteConfirmModal() {
@@ -2906,6 +2958,10 @@
       modal.classList.remove('visible');
       deleteTaskId = null;
       deleteSessionId = null;
+      if (deleteModalKeyHandler) {
+        document.removeEventListener('keydown', deleteModalKeyHandler);
+        deleteModalKeyHandler = null;
+      }
     }
 
     async function confirmDelete() {
@@ -3008,6 +3064,20 @@
           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();
@@ -3050,18 +3120,23 @@
         closeDetailPanel();
       }
 
-      if (detailPanel.classList.contains('visible')) {
-        const labelElement = document.querySelector('.detail-label');
-        if (!labelElement) return;
-        const taskId = labelElement.textContent.match(/\d+/)?.[0];
-        if (!taskId) return;
-        const task = currentTasks.find(t => t.id === taskId);
-        if (!task) return;
-        const sessionId = task.sessionId || currentSessionId;
-        if (e.key === 'd' || e.key === 'D') {
-          e.preventDefault();
-          deleteTask(taskId, sessionId);
-        }
+      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') {
+        e.preventDefault();
+        const sid = selectedSessionId || currentSessionId;
+        if (sid) showSessionInfoModal(sid);
+        return;
+      }
+
+      if ((e.key === 'd' || e.key === 'D') && selectedTaskId) {
+        e.preventDefault();
+        deleteTask(selectedTaskId, selectedSessionId || currentSessionId);
       }
 
       if (e.key === '?' || (e.key === '/' && e.shiftKey)) {
@@ -3178,6 +3253,12 @@
       fetchSessions();
     }
 
+    function matchesProjectFilter(project) {
+      if (!filterProject) return true;
+      if (filterProject === '__recent__') return recentProjects.has(project);
+      return project === filterProject;
+    }
+
     function filterByProject(project) {
       filterProject = project || null;
       updateUrl();
@@ -3186,15 +3267,30 @@
       showAllTasks();
     }
 
-    function updateProjectDropdown() {
+    async function updateProjectDropdown() {
       const dropdown = document.getElementById('project-filter');
-      const projects = [...new Set(sessions.map(s => s.project).filter(Boolean))].sort();
+      let projects;
+      try {
+        const res = await fetch('/api/projects');
+        projects = await res.json();
+      } catch (e) {
+        projects = [...new Set(sessions.map(s => s.project).filter(Boolean))].sort()
+          .map(p => ({ path: p, modifiedAt: null }));
+      }
 
-      dropdown.innerHTML = '<option value="">All Projects</option>' +
+      const cutoff = Date.now() - 24 * 60 * 60 * 1000;
+      recentProjects = new Set(
+        projects.filter(p => p.modifiedAt && new Date(p.modifiedAt).getTime() > cutoff).map(p => p.path)
+      );
+
+      const recentSelected = filterProject === '__recent__' ? ' selected' : '';
+      dropdown.innerHTML =
+        '<option value="">All Projects</option>' +
+        `<option value="__recent__"${recentSelected}>Recent (24h)</option>` +
         projects.map(p => {
-          const name = p.split('/').pop();
-          const selected = p === filterProject ? ' selected' : '';
-          return `<option value="${p}"${selected} title="${escapeHtml(p)}">${escapeHtml(name)}</option>`;
+          const name = p.path.split(/[/\\]/).pop();
+          const selected = p.path === filterProject ? ' selected' : '';
+          return `<option value="${escapeHtml(p.path)}"${selected} title="${escapeHtml(p.path)}">${escapeHtml(name)}</option>`;
         }).join('');
     }
 
@@ -3210,6 +3306,15 @@
         localStorage.setItem('theme', 'light');
       }
       updateThemeIcon();
+      syncHljsTheme();
+    }
+
+    function syncHljsTheme() {
+      const isLight = document.body.classList.contains('light');
+      const dark = document.getElementById('hljs-theme-dark');
+      const light = document.getElementById('hljs-theme-light');
+      if (dark) dark.disabled = isLight;
+      if (light) light.disabled = !isLight;
     }
 
     function updateThemeIcon() {
@@ -3231,6 +3336,7 @@
       }
       // If no saved preference, system prefers-color-scheme CSS handles it
       updateThemeIcon();
+      syncHljsTheme();
     }
 
     function toggleSidebar() {
@@ -3239,6 +3345,7 @@
       localStorage.setItem('sidebar-collapsed', collapsed);
       if (collapsed) {
         sidebar.style.width = '';
+        if (focusZone === 'sidebar') setFocusZone('board');
       } else {
         const w = getComputedStyle(sidebar).getPropertyValue('--sidebar-width');
         if (w) sidebar.style.width = w;
@@ -3294,68 +3401,127 @@
       document.getElementById('session-limit').value = sessionLimit;
     }
 
-    async function showTeamModalForSession(sessionId) {
+    async function showSessionInfoModal(sessionId) {
       const session = sessions.find(s => s.id === sessionId);
-      if (!session || !session.isTeam) return;
-      try {
-        const res = await fetch(`/api/teams/${sessionId}`);
-        if (!res.ok) return;
-        const teamConfig = await res.json();
-        showTeamModal(teamConfig, currentSessionId === sessionId ? currentTasks : []);
-      } catch (e) {
-        console.error('Failed to fetch team config:', e);
+      if (!session) return;
+
+      const promises = [];
+
+      // Fetch team config
+      let teamConfig = null;
+      if (session.isTeam) {
+        promises.push(
+          fetch(`/api/teams/${sessionId}`).then(r => r.ok ? r.json() : null).catch(() => null)
+            .then(data => { teamConfig = data; })
+        );
       }
+
+      // Fetch plan
+      let planContent = null;
+      promises.push(
+        fetch(`/api/sessions/${sessionId}/plan`).then(r => r.ok ? r.json() : null).catch(() => null)
+          .then(data => { planContent = data?.content || null; })
+      );
+
+      await Promise.all(promises);
+
+      const tasks = currentSessionId === sessionId ? currentTasks : [];
+      _planSessionId = sessionId;
+      showInfoModal(session, teamConfig, tasks, planContent);
     }
 
-    function showTeamModal(teamConfig, tasks) {
+    let _pendingPlanContent = null;
+
+    function showInfoModal(session, teamConfig, tasks, planContent) {
       const modal = document.getElementById('team-modal');
       const titleEl = document.getElementById('team-modal-title');
       const bodyEl = document.getElementById('team-modal-body');
 
-      titleEl.textContent = `Team: ${teamConfig.team_name || teamConfig.name || 'Unknown'}`;
+      titleEl.textContent = teamConfig
+        ? `Team: ${teamConfig.team_name || teamConfig.name || 'Unknown'}`
+        : (session.name || session.slug || session.id);
 
-      const ownerCounts = {};
-      tasks.forEach(t => {
-        if (t.owner) {
-          ownerCounts[t.owner] = (ownerCounts[t.owner] || 0) + 1;
+      let html = '';
+
+      // Session & project details as compact key-value rows
+      const infoRows = [];
+      infoRows.push(['Session', `<span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; user-select: all;">${escapeHtml(session.id)}</span>`]);
+      if (session.modifiedAt) {
+        const d = new Date(session.modifiedAt);
+        infoRows.push(['Last Modified', `${formatDate(session.modifiedAt)} <span style="font-size: 10px; color: var(--text-tertiary);">(${d.toLocaleString()})</span>`]);
+      }
+      if (session.project) {
+        const projectName = session.project.split(/[/\\]/).pop();
+        infoRows.push(['Project', `${escapeHtml(projectName)}<br><span style="font-size: 10px; color: var(--text-tertiary);">${escapeHtml(session.project)}</span>`]);
+        if (session.gitBranch) {
+          infoRows.push(['Branch', escapeHtml(session.gitBranch)]);
+        }
+        if (session.description) {
+          infoRows.push(['Description', escapeHtml(session.description)]);
         }
+      }
+      html += `<div class="team-modal-meta" style="margin-bottom: 16px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline;">`;
+      infoRows.forEach(([label, value]) => {
+        html += `<span style="font-weight: 500; color: var(--text-secondary); font-size: 12px; white-space: nowrap;">${label}</span><span>${value}</span>`;
       });
+      html += `</div>`;
+
+      if (planContent) {
+        _pendingPlanContent = planContent;
+        const titleMatch = planContent.match(/^#\s+(.+)$/m);
+        const planTitle = titleMatch ? titleMatch[1].trim() : null;
+        html += `<div onclick="openPlanModal()" style="margin-bottom: 16px; padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.15s ease;" onmouseover="this.style.borderColor='var(--accent)';this.style.background='var(--bg-hover)'" onmouseout="this.style.borderColor='var(--border)';this.style.background='var(--bg-elevated)'">
+          <span style="font-size: 14px;">📋</span>
+          <div style="flex: 1; min-width: 0;">
+            <div style="font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;">Plan</div>
+            ${planTitle ? `<div style="font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${escapeHtml(planTitle)}</div>` : ''}
+          </div>
+          <svg viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2" style="width: 16px; height: 16px; flex-shrink: 0;"><path d="M9 18l6-6-6-6"/></svg>
+        </div>`;
+      }
 
-      const members = teamConfig.members || [];
-      const description = teamConfig.description || '';
-      const lead = members.find(m => m.agentType === 'team-lead' || m.name === 'team-lead');
+      // Team info section
+      if (teamConfig) {
+        const ownerCounts = {};
+        tasks.forEach(t => {
+          if (t.owner) ownerCounts[t.owner] = (ownerCounts[t.owner] || 0) + 1;
+        });
 
-      let html = '';
-      if (description) {
-        html += `<div class="team-modal-desc">"${escapeHtml(description)}"</div>`;
-      }
+        const members = teamConfig.members || [];
+        const description = teamConfig.description || '';
+        const lead = members.find(m => m.agentType === 'team-lead' || m.name === 'team-lead');
 
-      html += `<div style="font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 10px;">Members (${members.length})</div>`;
+        if (description) {
+          html += `<div class="team-modal-desc">"${escapeHtml(description)}"</div>`;
+        }
 
-      members.forEach(member => {
-        const taskCount = ownerCounts[member.name] || 0;
-        html += `
-          <div class="team-member-card">
-            <div class="member-name">🟢 ${escapeHtml(member.name)}</div>
-            <div class="member-detail">Role: ${escapeHtml(member.agentType || 'unknown')}</div>
-            ${member.model ? `<div class="member-detail">Model: ${escapeHtml(member.model)}</div>` : ''}
-            <div class="member-tasks">Tasks: ${taskCount} assigned</div>
-          </div>
-        `;
-      });
+        html += `<div style="font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 10px;">Members (${members.length})</div>`;
 
-      const metaParts = [];
-      if (teamConfig.created_at) {
-        metaParts.push(`Created: ${new Date(teamConfig.created_at).toLocaleString()}`);
-      }
-      if (lead) {
-        metaParts.push(`Lead: ${lead.name}`);
-      }
-      if (teamConfig.working_dir) {
-        metaParts.push(`Working dir: ${teamConfig.working_dir}`);
-      }
-      if (metaParts.length > 0) {
-        html += `<div class="team-modal-meta">${metaParts.map(p => escapeHtml(p)).join('<br>')}</div>`;
+        members.forEach(member => {
+          const taskCount = ownerCounts[member.name] || 0;
+          html += `
+            <div class="team-member-card">
+              <div class="member-name">🟢 ${escapeHtml(member.name)}</div>
+              <div class="member-detail">Role: ${escapeHtml(member.agentType || 'unknown')}</div>
+              ${member.model ? `<div class="member-detail">Model: ${escapeHtml(member.model)}</div>` : ''}
+              <div class="member-tasks">Tasks: ${taskCount} assigned</div>
+            </div>
+          `;
+        });
+
+        const metaParts = [];
+        if (teamConfig.created_at) {
+          metaParts.push(`Created: ${new Date(teamConfig.created_at).toLocaleString()}`);
+        }
+        if (lead) {
+          metaParts.push(`Lead: ${lead.name}`);
+        }
+        if (teamConfig.working_dir) {
+          metaParts.push(`Working dir: ${teamConfig.working_dir}`);
+        }
+        if (metaParts.length > 0) {
+          html += `<div class="team-modal-meta">${metaParts.map(p => escapeHtml(p)).join('<br>')}</div>`;
+        }
       }
 
       bodyEl.innerHTML = html;
@@ -3363,6 +3529,7 @@
 
       const keyHandler = (e) => {
         if (e.key === 'Escape') {
+          if (document.getElementById('plan-modal').classList.contains('visible')) return;
           e.preventDefault();
           closeTeamModal();
           document.removeEventListener('keydown', keyHandler);
@@ -3375,6 +3542,45 @@
       document.getElementById('team-modal').classList.remove('visible');
     }
 
+    let _planSessionId = null;
+
+    function openPlanForSession(sid) {
+      fetch(`/api/sessions/${sid}/plan`).then(r => r.ok ? r.json() : null).catch(() => null)
+        .then(data => {
+          if (data?.content) {
+            _pendingPlanContent = data.content;
+            _planSessionId = sid;
+            openPlanModal();
+          }
+        });
+    }
+
+    function openPlanModal() {
+      if (!_pendingPlanContent) return;
+      const body = document.getElementById('plan-modal-body');
+      body.innerHTML = DOMPurify.sanitize(marked.parse(_pendingPlanContent));
+      document.getElementById('plan-modal').classList.add('visible');
+
+      const keyHandler = (e) => {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          e.stopPropagation();
+          closePlanModal();
+          document.removeEventListener('keydown', keyHandler, true);
+        }
+      };
+      document.addEventListener('keydown', keyHandler, true);
+    }
+
+    function closePlanModal() {
+      document.getElementById('plan-modal').classList.remove('visible');
+    }
+
+    function openPlanInEditor() {
+      if (!_planSessionId) return;
+      fetch(`/api/sessions/${_planSessionId}/plan/open`, { method: 'POST' }).catch(() => {});
+    }
+
     function updateOwnerFilter() {
       const bar = document.getElementById('owner-filter-bar');
       const select = document.getElementById('owner-filter');
@@ -3416,6 +3622,23 @@
 
     // Init
     loadTheme();
+
+    document.addEventListener('DOMContentLoaded', () => {
+      if (typeof marked !== 'undefined' && typeof hljs !== 'undefined') {
+        const renderer = new marked.Renderer();
+        renderer.code = function({ text, lang }) {
+          let highlighted;
+          if (lang && hljs.getLanguage(lang)) {
+            highlighted = hljs.highlight(text, { language: lang }).value;
+          } else {
+            highlighted = hljs.highlightAuto(text).value;
+          }
+          return `<pre><code class="hljs language-${escapeHtml(lang || '')}">${highlighted}</code></pre>`;
+        };
+        marked.use({ renderer });
+      }
+    });
+
     loadSidebarState();
     initSidebarResize();
     fetch('/api/version').then(r => r.json()).then(d => {
@@ -3425,7 +3648,7 @@
     const urlState = getUrlState();
     sessionFilter = urlState.filter || 'active';
     sessionLimit = urlState.limit || '20';
-    filterProject = urlState.project || null;
+    filterProject = urlState.project || '__recent__';
     ownerFilter = urlState.owner || '';
     searchQuery = urlState.search || '';
 
@@ -3449,7 +3672,7 @@
       const s = getUrlState();
       sessionFilter = s.filter || 'active';
       sessionLimit = s.limit || '20';
-      filterProject = s.project || null;
+      filterProject = s.project || '__recent__';
       ownerFilter = s.owner || '';
       searchQuery = s.search || '';
       loadPreferences();
@@ -3520,6 +3743,14 @@
           <div>
             <h4 style="margin: 0 0 8px 0; color: var(--text-primary); font-size: 14px; font-weight: 600;">Task Actions</h4>
             <table style="width: 100%; font-size: 13px;">
+              <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;">P</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Open session plan</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;">I</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Open session info</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;">D</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Delete selected task</td>
@@ -3549,8 +3780,8 @@
         <p id="delete-confirm-message" style="margin: 0; color: var(--text-primary);"></p>
       </div>
       <div class="modal-footer">
-        <button class="btn btn-secondary" onclick="closeDeleteConfirmModal()">Cancel</button>
-        <button class="btn btn-primary" onclick="confirmDelete()" style="background: #ef4444; border-color: #ef4444;">Delete</button>
+        <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>
@@ -3616,6 +3847,25 @@
     </div>
   </div>
 
+  <!-- Plan Modal (stacked on top of info modal) -->
+  <div id="plan-modal" class="modal-overlay plan-modal-overlay" onclick="closePlanModal()">
+    <div class="modal plan-modal" onclick="event.stopPropagation()">
+      <div class="modal-header">
+        <h3 id="plan-modal-title" class="modal-title">Plan</h3>
+        <button class="btn btn-secondary" style="padding: 4px 10px; font-size: 11px; margin-left: auto; margin-right: 12px;" onclick="openPlanInEditor()">Open in Editor</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"/>
+          </svg>
+        </button>
+      </div>
+      <div id="plan-modal-body" class="modal-body detail-desc" style="overflow-y: auto; flex: 1;"></div>
+      <div class="modal-footer">
+        <button class="btn btn-primary" onclick="closePlanModal()">Close</button>
+      </div>
+    </div>
+  </div>
+
   <!-- Blocked Task Warning Modal -->
   <div id="blocked-task-modal" class="modal-overlay" onclick="closeBlockedTaskModal()">
     <div class="modal" onclick="event.stopPropagation()" style="max-width: 450px;">

package/server.js

@@ -31,6 +31,7 @@ const CLAUDE_DIR = getClaudeDir();
 const TASKS_DIR = path.join(CLAUDE_DIR, 'tasks');
 const PROJECTS_DIR = path.join(CLAUDE_DIR, 'projects');
 const TEAMS_DIR = path.join(CLAUDE_DIR, 'teams');
+const PLANS_DIR = path.join(CLAUDE_DIR, 'plans');
 
 function isTeamSession(sessionId) {
   return existsSync(path.join(TEAMS_DIR, sessionId, 'config.json'));
@@ -143,20 +144,35 @@ function loadSessionMetadata() {
 
       // Find all .jsonl files (session logs)
       const files = readdirSync(projectPath).filter(f => f.endsWith('.jsonl'));
+      const sessionIds = [];
 
+      // First pass: read all JSONL files
+      let resolvedProjectPath = null;
       for (const file of files) {
         const sessionId = file.replace('.jsonl', '');
         const jsonlPath = path.join(projectPath, file);
-
-        // Read customTitle, slug, and actual project path from JSONL
         const sessionInfo = readSessionInfoFromJsonl(jsonlPath);
 
+        if (sessionInfo.projectPath && !resolvedProjectPath) {
+          resolvedProjectPath = sessionInfo.projectPath;
+        }
+
         metadata[sessionId] = {
           customTitle: sessionInfo.customTitle,
           slug: sessionInfo.slug,
           project: sessionInfo.projectPath || null,
           jsonlPath: jsonlPath
         };
+        sessionIds.push(sessionId);
+      }
+
+      // Second pass: fill in missing project paths from siblings
+      if (resolvedProjectPath) {
+        for (const sid of sessionIds) {
+          if (!metadata[sid].project) {
+            metadata[sid].project = resolvedProjectPath;
+          }
+        }
       }
 
       // Also check sessions-index.json for custom names (if /rename was used)
@@ -167,8 +183,15 @@ function loadSessionMetadata() {
           const entries = indexData.entries || [];
 
           for (const entry of entries) {
-            if (entry.sessionId && metadata[entry.sessionId]) {
-              // Add other useful fields
+            if (entry.sessionId) {
+              if (!metadata[entry.sessionId]) {
+                metadata[entry.sessionId] = {
+                  customTitle: null,
+                  slug: null,
+                  project: entry.projectPath || null,
+                  jsonlPath: null
+                };
+              }
               metadata[entry.sessionId].description = entry.description || null;
               metadata[entry.sessionId].gitBranch = entry.gitBranch || null;
               metadata[entry.sessionId].created = entry.created || null;
@@ -183,6 +206,25 @@ function loadSessionMetadata() {
     console.error('Error loading session metadata:', e);
   }
 
+  // For team sessions with no JSONL match, try team config for project path
+  if (existsSync(TASKS_DIR)) {
+    const taskDirs = readdirSync(TASKS_DIR, { withFileTypes: true })
+      .filter(d => d.isDirectory());
+    for (const dir of taskDirs) {
+      if (!metadata[dir.name]) {
+        const teamConfig = loadTeamConfig(dir.name);
+        if (teamConfig) {
+          metadata[dir.name] = {
+            customTitle: null,
+            slug: null,
+            project: teamConfig.working_dir || null,
+            jsonlPath: null
+          };
+        }
+      }
+    }
+  }
+
   sessionMetadataCache = metadata;
   lastMetadataRefresh = now;
   return metadata;
@@ -275,6 +317,32 @@ app.get('/api/sessions', async (req, res) => {
       }
     }
 
+    // Add sessions from metadata that don't have task directories
+    for (const [sessionId, meta] of Object.entries(metadata)) {
+      if (!sessionsMap.has(sessionId)) {
+        let modifiedAt = meta.created || null;
+        if (!modifiedAt && meta.jsonlPath) {
+          try { modifiedAt = statSync(meta.jsonlPath).mtime.toISOString(); } catch (e) {}
+        }
+        sessionsMap.set(sessionId, {
+          id: sessionId,
+          name: getSessionDisplayName(sessionId, meta),
+          slug: meta.slug || null,
+          project: meta.project || null,
+          description: meta.description || null,
+          gitBranch: meta.gitBranch || null,
+          taskCount: 0,
+          completed: 0,
+          inProgress: 0,
+          pending: 0,
+          createdAt: meta.created || null,
+          modifiedAt: modifiedAt || new Date(0).toISOString(),
+          isTeam: false,
+          memberCount: 0
+        });
+      }
+    }
+
     // Convert map to array and sort by most recently modified
     let sessions = Array.from(sessionsMap.values());
     sessions.sort((a, b) => new Date(b.modifiedAt) - new Date(a.modifiedAt));
@@ -291,6 +359,24 @@ app.get('/api/sessions', async (req, res) => {
   }
 });
 
+// API: Get distinct project paths with last-modified timestamps
+app.get('/api/projects', (req, res) => {
+  res.setHeader('Cache-Control', 'no-store');
+  const metadata = loadSessionMetadata();
+  const projectMap = {};
+  for (const meta of Object.values(metadata)) {
+    if (!meta.project) continue;
+    const mtime = meta.jsonlPath ? (() => { try { return statSync(meta.jsonlPath).mtime; } catch (e) { return null; } })() : null;
+    if (!projectMap[meta.project] || (mtime && mtime > projectMap[meta.project])) {
+      projectMap[meta.project] = mtime;
+    }
+  }
+  const projects = Object.entries(projectMap)
+    .map(([path, mtime]) => ({ path, modifiedAt: mtime ? mtime.toISOString() : null }))
+    .sort((a, b) => a.path.localeCompare(b.path));
+  res.json(projects);
+});
+
 // API: Get tasks for a session
 app.get('/api/sessions/:sessionId', async (req, res) => {
   try {
@@ -322,6 +408,45 @@ app.get('/api/sessions/:sessionId', async (req, res) => {
   }
 });
 
+// API: Get session plan
+app.get('/api/sessions/:sessionId/plan', async (req, res) => {
+  try {
+    const metadata = loadSessionMetadata();
+    const meta = metadata[req.params.sessionId];
+    const slug = meta?.slug;
+    if (!slug) return res.status(404).json({ error: 'No plan found' });
+
+    const planPath = path.join(PLANS_DIR, `${slug}.md`);
+    if (!existsSync(planPath)) return res.status(404).json({ error: 'No plan found' });
+
+    const content = await fs.readFile(planPath, 'utf8');
+    res.json({ content, slug });
+  } catch (error) {
+    console.error('Error reading plan:', error);
+    res.status(500).json({ error: 'Failed to read plan' });
+  }
+});
+
+// API: Open session plan in VS Code
+app.post('/api/sessions/:sessionId/plan/open', (req, res) => {
+  try {
+    const metadata = loadSessionMetadata();
+    const meta = metadata[req.params.sessionId];
+    const slug = meta?.slug;
+    if (!slug) return res.status(404).json({ error: 'No plan found' });
+
+    const planPath = path.join(PLANS_DIR, `${slug}.md`);
+    if (!existsSync(planPath)) return res.status(404).json({ error: 'No plan found' });
+
+    const editor = process.env.EDITOR || 'code';
+    require('child_process').exec(`${editor} "${planPath}"`);
+    res.json({ success: true });
+  } catch (error) {
+    console.error('Error opening plan in VS Code:', error);
+    res.status(500).json({ error: 'Failed to open plan' });
+  }
+});
+
 // API: Get team config
 app.get('/api/teams/:name', (req, res) => {
   const config = loadTeamConfig(req.params.name);