claude-code-kanban 1.9.0 → 1.10.0

package/README.md

@@ -1,4 +1,4 @@
-# Claude Task Viewer
+# Claude Code Kanban
 
 A real-time Kanban board for **observing** Claude Code tasks. See what Claude is working on, track dependencies between tasks, and manage task cleanup and priority.
 
@@ -8,7 +8,7 @@ A real-time Kanban board for **observing** Claude Code tasks. See what Claude is
 
 ## Why Use This?
 
-When Claude Code breaks down complex work into tasks, you get visibility into its thinking — but only in the terminal. Claude Task Viewer gives you a persistent, visual dashboard to:
+When Claude Code breaks down complex work into tasks, you get visibility into its thinking — but only in the terminal. Claude Code Kanban gives you a persistent, visual dashboard to:
 
 - **See the big picture** — All your sessions and tasks in one place
 - **Know what's happening now** — Live Updates show exactly what Claude is doing across all sessions
@@ -24,6 +24,11 @@ Claude Code controls task state — the viewer shows you what's happening:
 - **Task dependencies** — Visualise blockedBy/blocks relationships to understand the critical path
 - **Live activity feed** — Real-time stream of all in-progress tasks across every session
 
+### Agent Teams Support
+- **Team detection** — Automatically detects team sessions with multiple agents
+- **Owner filtering** — Filter Kanban board by team member with color-coded agent indicators
+- **Member count badges** — See how many agents are working in each session
+
 ### Cleanup Operations
 - **Delete tasks** — Remove tasks with the delete button or press `D` (includes safety checks for dependencies)
 - **Bulk delete** — Delete all tasks in a session at once
@@ -32,8 +37,9 @@ Claude Code controls task state — the viewer shows you what's happening:
 View and organize your Claude Code sessions:
 - **Session discovery** — Automatically finds all sessions in `~/.claude/tasks/` and `~/.claude/projects/`
 - **View project paths** — See the full filesystem path for each project
+- **Git branch display** — See which branch each session is working on
 - **Fuzzy search** — Search across session names, task descriptions, and project paths with instant filtering
-- **Session limits** — Filter to show only active sessions or a specific number of recent sessions
+- **Session filters** — Filter by active/all sessions and by project
 
 ### Keyboard Shortcuts
 - `?` — Show help with all keyboard shortcuts
@@ -45,15 +51,22 @@ View and organize your Claude Code sessions:
 ### Quick start
 
 ```bash
-npx claude-task-viewer
+npx claude-code-kanban
 ```
 
 Open http://localhost:3456
 
+### Global install
+
+```bash
+npm install -g claude-code-kanban
+claude-code-kanban --open
+```
+
 ### From source
 
 ```bash
-git clone https://github.com/L1AD/claude-task-viewer.git
+git clone https://github.com/NikiforovAll/claude-task-viewer.git
 cd claude-task-viewer
 npm install
 npm start
@@ -73,6 +86,8 @@ Claude Code stores tasks in `~/.claude/tasks/`. Each session has its own folder:
 
 The viewer watches this directory and pushes updates via Server-Sent Events. Changes appear instantly — no polling, no refresh needed.
 
+If port 3456 is already in use, the server automatically falls back to a random available port.
+
 ## Task Structure
 
 ```json
@@ -94,13 +109,13 @@ The viewer watches this directory and pushes updates via Server-Sent Events. Cha
 
 ```bash
 # Custom port
-PORT=8080 npx claude-task-viewer
+PORT=8080 npx claude-code-kanban
 
 # Open browser automatically
-npx claude-task-viewer --open
+npx claude-code-kanban --open
 
 # Use a different Claude config directory (for multiple accounts)
-npx claude-task-viewer --dir=~/.claude-work
+npx claude-code-kanban --dir=~/.claude-work
 ```
 
 ## API
@@ -112,6 +127,7 @@ npx claude-task-viewer --dir=~/.claude-work
 | `/api/tasks/all` | GET | Get all tasks across all sessions |
 | `/api/tasks/:session/:task` | DELETE | Delete a task (checks dependencies) |
 | `/api/tasks/:session/:task/note` | POST | Add a note to a task |
+| `/api/teams/:name` | GET | Load team configuration |
 | `/api/events` | GET | SSE stream for live updates |
 
 ## Design Philosophy
@@ -120,25 +136,6 @@ npx claude-task-viewer --dir=~/.claude-work
 
 **Limited interaction:** You can delete tasks and add notes, but task status, subject, and description reflect Claude's actual work and can only be changed by Claude Code itself.
 
-## Roadmap
-
-### ✅ Completed
-- **Real-time observation** — Live updates feed showing what Claude is doing across all sessions
-- **Task dependencies** — Visualise blockedBy/blocks relationships
-- **Task deletion** — Delete tasks with dependency checking
-- **Keyboard shortcuts** — ?, D, Esc for quick actions
-- **Session discovery** — Automatic detection of all Claude Code sessions
-- **Search** — Search across sessions and tasks
-
-### 🚧 Planned
-- **Enhanced search & filter** — Filter by status, dependencies, date ranges
-- **Session grouping** — Group sessions by project or time period
-- **Task timeline** — See when tasks were created and completed
-- **Export** — Export session data for analysis or reporting
-- **Desktop notifications** — Optional notifications when tasks complete
-
-[Open an issue](https://github.com/L1AD/claude-task-viewer/issues) with ideas or feedback.
-
 ## License
 
 MIT

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "claude-code-kanban",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "bin": {
-    "claude-task-viewer": "./server.js"
+    "claude-code-kanban": "./server.js"
   },
   "scripts": {
     "start": "node server.js",

package/public/index.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CC Kanban</title>
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%231a1a1a'/%3E%3Crect x='4' y='6' width='7' height='20' rx='2' fill='%23e8927c'/%3E%3Crect x='13' y='6' width='7' height='14' rx='2' fill='%23e8927c'/%3E%3Crect x='22' y='6' width='7' height='8' rx='2' fill='%23e8927c'/%3E%3C/svg%3E">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Playfair+Display:wght@400;500;600&display=swap" rel="stylesheet">
@@ -173,6 +174,12 @@
       padding: 0 16px 10px;
     }
 
+    .reset-btn {
+      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+    }
+
     .filter-dropdown {
       flex: 1;
       appearance: none;
@@ -340,31 +347,14 @@
 
     .session-branch {
       font-size: 10px;
-      color: var(--accent);
-      margin-top: 3px;
-      padding: 2px 6px;
-      background: var(--border);
-      border-radius: 3px;
-      display: inline-block;
-      font-family: var(--mono);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .session-branch {
-      font-size: 10px;
-      color: var(--accent);
-      margin-top: 3px;
-      padding: 2px 6px;
-      background: var(--border);
-      border-radius: 3px;
-      display: inline-block;
+      color: var(--text-muted);
+      margin-top: 2px;
+      display: block;
+      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      max-width: 100%;
-      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+      opacity: 0.7;
     }
 
     .session-progress {
@@ -1650,6 +1640,12 @@
             <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 id="sessions-list" class="sessions-list"></div>
       </div>
@@ -1758,14 +1754,57 @@
     let currentSessionId = null;
     let currentTasks = [];
     let viewMode = 'session';
-    let sessionFilter = localStorage.getItem('sessionFilter') || 'all'; // 'all' or 'active'
-    let sessionLimit = localStorage.getItem('sessionLimit') || '20'; // '10', '20', '50', 'all'
+    let sessionFilter = 'active';
+    let sessionLimit = '20';
     let filterProject = null; // null = all projects, or project path to filter
     let searchQuery = ''; // Search query for fuzzy search
     let allTasksCache = []; // Cache all tasks for search
     let bulkDeleteSessionId = null; // Track session for bulk delete
     let ownerFilter = '';
 
+    function getUrlState() {
+      const params = new URLSearchParams(window.location.search);
+      return {
+        session: params.get('session'),
+        view: params.get('view'),
+        filter: params.get('filter'),
+        limit: params.get('limit'),
+        project: params.get('project'),
+        owner: params.get('owner'),
+        search: params.get('search'),
+      };
+    }
+
+    function updateUrl() {
+      const params = new URLSearchParams();
+      if (viewMode === 'all') params.set('view', 'all');
+      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 (ownerFilter) params.set('owner', ownerFilter);
+      if (searchQuery) params.set('search', searchQuery);
+      const qs = params.toString();
+      const url = qs ? `?${qs}` : window.location.pathname;
+      history.replaceState(null, '', url);
+    }
+
+    function resetState() {
+      history.replaceState(null, '', window.location.pathname);
+      sessionFilter = 'active';
+      sessionLimit = '20';
+      filterProject = null;
+      ownerFilter = '';
+      searchQuery = '';
+      viewMode = 'all';
+      currentSessionId = null;
+      const searchInput = document.getElementById('search-input');
+      if (searchInput) searchInput.value = '';
+      document.getElementById('search-clear-btn')?.classList.remove('visible');
+      loadPreferences();
+      fetchSessions().then(() => showAllTasks());
+    }
+
     // DOM
     const sessionsList = document.getElementById('sessions-list');
     const noSession = document.getElementById('no-session');
@@ -1826,6 +1865,7 @@
         clearBtn.classList.remove('visible');
       }
 
+      updateUrl();
       renderSessions();
     }
 
@@ -1834,6 +1874,7 @@
       searchInput.value = '';
       searchQuery = '';
       document.getElementById('search-clear-btn').classList.remove('visible');
+      updateUrl();
       renderSessions();
     }
 
@@ -2090,12 +2131,14 @@
         currentTasks = newTasks;
         currentSessionId = sessionId;
         ownerFilter = '';
+        updateUrl();
         renderSession();
       } catch (error) {
         console.error('Failed to fetch tasks:', error);
         currentTasks = [];
         currentSessionId = sessionId;
         lastCurrentTasksHash = '';
+        updateUrl();
         renderSession();
       }
     }
@@ -2111,6 +2154,7 @@
           tasks = tasks.filter(t => t.project === filterProject);
         }
         currentTasks = tasks;
+        updateUrl();
         renderAllTasks();
         renderSessions();
       } catch (error) {
@@ -2709,12 +2753,13 @@
         let refreshTimer = null;
         function debouncedRefresh(sessionId, isMetadata) {
           clearTimeout(refreshTimer);
+          const delay = isMetadata ? 2000 : 500;
           refreshTimer = setTimeout(() => {
             fetchSessions().catch(err => console.error('[SSE] fetchSessions failed:', err));
             if (currentSessionId && (isMetadata || sessionId === currentSessionId)) {
               fetchTasks(currentSessionId);
             }
-          }, 500);
+          }, delay);
         }
 
         eventSource.onmessage = (event) => {
@@ -2778,18 +2823,19 @@
 
     function filterBySessions(value) {
       sessionFilter = value;
-      localStorage.setItem('sessionFilter', sessionFilter);
+      updateUrl();
       renderSessions();
     }
 
     function changeSessionLimit(value) {
       sessionLimit = value;
-      localStorage.setItem('sessionLimit', sessionLimit);
+      updateUrl();
       fetchSessions();
     }
 
     function filterByProject(project) {
       filterProject = project || null;
+      updateUrl();
       renderSessions();
       fetchLiveUpdates();
       showAllTasks();
@@ -2956,23 +3002,52 @@
       const c = value ? getOwnerColor(value) : null;
       select.style.color = c ? c.color : '';
       select.style.backgroundColor = c ? c.bg : '';
+      updateUrl();
       renderKanban();
     }
 
     // Init
     loadTheme();
+
+    const urlState = getUrlState();
+    sessionFilter = urlState.filter || 'active';
+    sessionLimit = urlState.limit || '20';
+    filterProject = urlState.project || null;
+    ownerFilter = urlState.owner || '';
+    searchQuery = urlState.search || '';
+
     loadPreferences();
     setupEventSource();
 
-    // Fetch sessions and show newest one by default
+    if (urlState.search) {
+      document.getElementById('search-input').value = urlState.search;
+      document.getElementById('search-clear-btn').classList.add('visible');
+    }
+
     fetchSessions().then(() => {
-      if (sessions.length > 0) {
-        // Sessions are already sorted by newest first from API
+      if (urlState.view === 'all') {
+        showAllTasks();
+      } else if (urlState.session) {
+        fetchTasks(urlState.session);
+      } else if (sessions.length > 0) {
         fetchTasks(sessions[0].id);
       } else {
         showAllTasks();
       }
     });
+
+    window.addEventListener('popstate', () => {
+      const s = getUrlState();
+      sessionFilter = s.filter || 'active';
+      sessionLimit = s.limit || '20';
+      filterProject = s.project || null;
+      ownerFilter = s.owner || '';
+      searchQuery = s.search || '';
+      loadPreferences();
+      if (s.view === 'all') showAllTasks();
+      else if (s.session) fetchTasks(s.session);
+      else if (sessions.length > 0) fetchTasks(sessions[0].id);
+    });
   </script>
 
   <!-- Help Modal -->

package/server.js

@@ -517,11 +517,27 @@ projectsWatcher.on('all', (event, filePath) => {
 });
 
 // Start server
-app.listen(PORT, () => {
-  console.log(`Claude Task Viewer running at http://localhost:${PORT}`);
+const server = app.listen(PORT, () => {
+  const actualPort = server.address().port;
+  console.log(`Claude Task Viewer running at http://localhost:${actualPort}`);
 
-  // Open browser if --open flag is passed
   if (process.argv.includes('--open')) {
-    import('open').then(open => open.default(`http://localhost:${PORT}`));
+    import('open').then(open => open.default(`http://localhost:${actualPort}`));
+  }
+});
+
+server.on('error', (err) => {
+  if (err.code === 'EADDRINUSE') {
+    console.log(`Port ${PORT} in use, trying random port...`);
+    const fallback = app.listen(0, () => {
+      const actualPort = fallback.address().port;
+      console.log(`Claude Task Viewer running at http://localhost:${actualPort}`);
+
+      if (process.argv.includes('--open')) {
+        import('open').then(open => open.default(`http://localhost:${actualPort}`));
+      }
+    });
+  } else {
+    throw err;
   }
 });