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

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.0",
   "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;
@@ -2233,6 +2268,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 +2436,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 +2449,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 +2991,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');
 
@@ -3536,7 +3596,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 };
@@ -4047,29 +4107,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 +4368,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 +4443,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 +4500,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 +4511,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);
@@ -4860,6 +4994,10 @@
       // 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;
       }
@@ -4878,12 +5016,12 @@
         }
         if (e.key === 'h' || e.key === 'ArrowLeft') {
           e.preventDefault();
-          toggleSelectedSessionGroup(true);
+          handleSidebarHorizontal(-1);
           return;
         }
         if (e.key === 'l' || e.key === 'ArrowRight') {
           e.preventDefault();
-          toggleSelectedSessionGroup(false);
+          handleSidebarHorizontal(1);
           return;
         }
         if (e.key === 'Enter' || e.key === ' ') {
@@ -4897,14 +5035,14 @@
         }
         if (e.key === 'p' || e.key === 'P') {
           e.preventDefault();
-          const highlighted = sessionsList.querySelector('.session-item.kb-selected');
+          const highlighted = sessionsList.querySelector('.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 highlighted = sessionsList.querySelector('.kb-selected');
           const sid = highlighted?.dataset.sessionId || currentSessionId;
           if (sid) showSessionInfoModal(sid);
           return;
@@ -4920,6 +5058,10 @@
       const navKeys = ['j','k','h','l','ArrowUp','ArrowDown','ArrowLeft','ArrowRight'];
       if (navKeys.includes(e.key)) {
         e.preventDefault();
+        if (!selectedTaskId && !document.querySelector('.task-card.selected')) {
+          setFocusZone('sidebar');
+          return;
+        }
         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);
@@ -5702,6 +5844,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') {

package/server.js

@@ -604,7 +604,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