claude-code-kanban 1.11.0 → 1.12.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025
+Copyright (c) 2026
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,55 +1,27 @@
 # 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.
+[![npm version](https://img.shields.io/npm/v/claude-code-kanban)](https://www.npmjs.com/package/claude-code-kanban)
+[![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)
 
-![Dark mode](screenshot-dark-v2.png)
+> Watch Claude Code think, in real time.
 
-![Light mode](screenshot-light-v2.png)
+![Dark mode](assets/screenshot-dark-v2.png)
 
-## Why Use This?
+![Light mode](assets/screenshot-light-v2.png)
 
-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:
+## Features
 
-- **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
-- **Understand task dependencies** — See which tasks are blocked and what's holding them up
-- **Clean up completed work** — Delete tasks when no longer needed (with dependency checking)
-
-## Key Features
-
-### Observation-Focused Design
-Claude Code controls task state — the viewer shows you what's happening:
-- **Real-time status** — See tasks move through Pending → In Progress → Completed as Claude works
-- **Active session detection** — Indicators show which sessions have in-progress tasks
-- **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
-
-### Session Management
-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 filters** — Filter by active/all sessions and by project
-
-### Keyboard Shortcuts
-- `?` — Show help with all keyboard shortcuts
-- `D` — Delete the currently selected task (with confirmation and dependency checking)
-- `Esc` — Close detail panel or modals
+- **Real-time updates** — Tasks move through Pending → In Progress → Completed as Claude works
+- **Agent teams** — Color-coded team members, owner filtering, member count badges
+- **Task dependencies** — See blockedBy/blocks relationships and the critical path
+- **Live activity feed** — Stream of all in-progress tasks across every session
+- **Session management** — Fuzzy search, project/branch display, active session indicators
+- **Cleanup** — Delete tasks (with dependency checks) or bulk-delete entire sessions
+- **Keyboard shortcuts** — Press `?` for help
 
 ## Installation
 
-### Quick start
-
 ```bash
 npx claude-code-kanban
 ```
@@ -63,78 +35,26 @@ npm install -g claude-code-kanban
 claude-code-kanban --open
 ```
 
-### From source
-
-```bash
-git clone https://github.com/NikiforovAll/claude-task-viewer.git
-cd claude-task-viewer
-npm install
-npm start
-```
-
-## How It Works
-
-Claude Code stores tasks in `~/.claude/tasks/`. Each session has its own folder:
-
-```
-~/.claude/tasks/
-  └── {session-uuid}/
-      ├── 1.json
-      ├── 2.json
-      └── ...
-```
-
-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
-{
-  "id": "1",
-  "subject": "Implement user authentication",
-  "description": "Add JWT-based auth with refresh tokens",
-  "activeForm": "Setting up auth middleware",
-  "status": "in_progress",
-  "blocks": ["2", "3"],
-  "blockedBy": []
-}
-```
-
-- `activeForm` — What Claude is doing right now (shown in Live Updates)
-- `blocks` / `blockedBy` — Task dependency relationships
-
 ## Configuration
 
 ```bash
-# Custom port
-PORT=8080 npx claude-code-kanban
-
-# Open browser automatically
-npx claude-code-kanban --open
-
-# Use a different Claude config directory (for multiple accounts)
-npx claude-code-kanban --dir=~/.claude-work
+PORT=8080 npx claude-code-kanban        # Custom port
+npx claude-code-kanban --open            # Auto-open browser
+npx claude-code-kanban --dir=~/.claude-work  # Custom Claude config dir
 ```
 
-## API
+If port 3456 is in use, the server falls back to a random available port.
 
-| Endpoint | Method | Description |
-|----------|--------|-------------|
-| `/api/sessions` | GET | List all sessions with task counts |
-| `/api/sessions/:id` | GET | Get all tasks for a session |
-| `/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 |
+## FAQ
 
-## Design Philosophy
+**Does this control Claude?**
+No. Claude Code owns all task state. The viewer only observes — it never directs Claude's work.
 
-**Observation over Control**: Claude Code owns task state. The task viewer's job is to show you what Claude is doing, not to direct it. This keeps the viewer in sync with reality and prevents confusion about whether a task's status reflects what Claude is actually doing or just human intent.
+**Does it work with agent teams?**
+Yes. Team sessions are auto-detected with color-coded members and owner filtering.
 
-**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.
+**Does it require Claude Code to be running?**
+No. It reads task files from `~/.claude/tasks/`. You can view past sessions anytime.
 
 ## License
 

package/package.json

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

package/public/index.html

@@ -65,15 +65,35 @@
 
     /* Sidebar */
     .sidebar {
-      width: 300px;
+      width: var(--sidebar-width, 300px);
       background: var(--bg-surface);
       border-right: 1px solid var(--border);
       box-shadow: 1px 0 12px rgba(0, 0, 0, 0.04);
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
+      position: relative;
+      overflow: hidden;
+      transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
+    .sidebar.collapsed { width: 48px; }
+    .sidebar.collapsed .logo-text,
+    .sidebar.collapsed .connection,
+    .sidebar.collapsed .sidebar-section,
+    .sidebar.collapsed .sidebar-footer { display: none; }
+    .sidebar.collapsed .sidebar-header {
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+    }
+    .sidebar.collapsed .sidebar-toggle-btn {
+      position: static;
+    }
+    .sidebar.resizing { transition: none; }
+
     .sidebar-header {
       padding: 20px 20px 16px;
       border-bottom: none;
@@ -81,8 +101,61 @@
       background-size: 100% 1px;
       background-repeat: no-repeat;
       background-position: bottom;
+      position: relative;
+    }
+
+    .sidebar-toggle-btn {
+      position: absolute;
+      top: 20px;
+      right: 8px;
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: 6px;
+      color: var(--text-muted);
+      cursor: pointer;
+      transition: all 0.15s ease;
+      padding: 0;
+    }
+
+    .sidebar-toggle-btn:hover {
+      color: var(--text-secondary);
+      background: var(--bg-hover);
+      border-color: var(--border);
+    }
+
+    .sidebar-toggle-btn svg {
+      width: 16px;
+      height: 16px;
+      transition: transform 0.25s ease;
+    }
+
+    .sidebar.collapsed .sidebar-toggle-btn svg {
+      transform: rotate(180deg);
+    }
+
+    .sidebar-resize-handle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 4px;
+      height: 100%;
+      cursor: col-resize;
+      z-index: 10;
+      transition: background 0.15s;
+    }
+
+    .sidebar-resize-handle:hover,
+    .sidebar-resize-handle.dragging {
+      background: var(--accent-dim);
     }
 
+    .sidebar.collapsed .sidebar-resize-handle { display: none; }
+
     .logo {
       display: flex;
       align-items: center;
@@ -115,9 +188,9 @@
     .connection {
       display: flex;
       align-items: center;
-      gap: 6px;
-      margin-top: 12px;
-      font-size: 12px;
+      gap: 5px;
+      margin-top: 10px;
+      font-size: 10px;
       color: var(--text-tertiary);
       text-transform: uppercase;
       letter-spacing: 0.05em;
@@ -387,6 +460,7 @@
 
     /* Footer */
     .sidebar-footer {
+      flex-shrink: 0;
       padding: 14px 20px;
       border-top: none;
       background-image: linear-gradient(to right, transparent, var(--border), transparent);
@@ -616,6 +690,7 @@
       display: flex;
       flex-direction: column;
       gap: 8px;
+      padding-right: 8px;
     }
 
     .column-empty {
@@ -979,6 +1054,17 @@
       margin-bottom: 0;
     }
 
+    .detail-desc ol,
+    .detail-desc ul {
+      padding-left: 1.5em;
+      margin: 0 0 12px 0;
+    }
+
+    .detail-desc ol:last-child,
+    .detail-desc ul:last-child {
+      margin-bottom: 0;
+    }
+
     /* Note form */
     .note-section {
       margin-top: 24px;
@@ -1609,6 +1695,11 @@
           <span class="connection-dot"></span>
           <span>Connecting</span>
         </div>
+        <button id="sidebar-toggle" class="sidebar-toggle-btn" onclick="toggleSidebar()" title="Toggle sidebar" aria-label="Toggle sidebar">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M15 18l-6-6 6-6"/>
+          </svg>
+        </button>
       </header>
 
       <!-- Live Updates -->
@@ -1667,6 +1758,8 @@
         <div id="sessions-list" class="sessions-list"></div>
       </div>
 
+      <div class="sidebar-footer" id="sidebar-footer"></div>
+      <div class="sidebar-resize-handle" id="sidebar-resize"></div>
     </aside>
 
     <!-- Main -->
@@ -2119,8 +2212,8 @@
         <div class="live-item" onclick="openLiveTask('${task.sessionId}', '${task.id}')">
           <span class="pulse"></span>
           <div class="live-item-content">
-            <div class="live-item-action">${escapeHtml(task.activeForm || task.subject)}</div>
-            <div class="live-item-session">${escapeHtml(task.sessionName || task.sessionId.slice(0, 8))}</div>
+            <div class="live-item-action" title="${escapeHtml(task.activeForm || task.subject)}">${escapeHtml(task.activeForm || task.subject)}</div>
+            <div class="live-item-session" title="${escapeHtml(task.sessionName || task.sessionId)}">${escapeHtml(task.sessionName || task.sessionId)}</div>
           </div>
         </div>
       `).join('');
@@ -2554,6 +2647,10 @@
 
       focusZone = zone;
       if (zone === 'sidebar') {
+        if (sidebar.classList.contains('collapsed')) {
+          sidebar.classList.remove('collapsed');
+          localStorage.setItem('sidebar-collapsed', false);
+        }
         sidebar.classList.add('sidebar-focused');
         const items = getSessionItems();
         if (selectedSessionIdx < 0 && items.length > 0) {
@@ -2877,6 +2974,12 @@
 
       if (document.querySelector('.modal-overlay.visible')) return;
 
+      if (e.key === '[') {
+        e.preventDefault();
+        toggleSidebar();
+        return;
+      }
+
       // Tab toggles focus zone
       if (e.key === 'Tab') {
         e.preventDefault();
@@ -3130,6 +3233,62 @@
       updateThemeIcon();
     }
 
+    function toggleSidebar() {
+      const sidebar = document.querySelector('.sidebar');
+      const collapsed = sidebar.classList.toggle('collapsed');
+      localStorage.setItem('sidebar-collapsed', collapsed);
+      if (collapsed) {
+        sidebar.style.width = '';
+      } else {
+        const w = getComputedStyle(sidebar).getPropertyValue('--sidebar-width');
+        if (w) sidebar.style.width = w;
+      }
+    }
+
+    function loadSidebarState() {
+      const sidebar = document.querySelector('.sidebar');
+      if (localStorage.getItem('sidebar-collapsed') === 'true') {
+        sidebar.classList.add('collapsed');
+      }
+      const w = localStorage.getItem('sidebar-width');
+      if (w) {
+        sidebar.style.setProperty('--sidebar-width', w);
+      }
+    }
+
+    function initSidebarResize() {
+      const sidebar = document.querySelector('.sidebar');
+      const handle = document.getElementById('sidebar-resize');
+      let startX, startWidth;
+
+      handle.addEventListener('mousedown', (e) => {
+        if (sidebar.classList.contains('collapsed')) return;
+        startX = e.clientX;
+        startWidth = sidebar.offsetWidth;
+        sidebar.classList.add('resizing');
+        handle.classList.add('dragging');
+        document.body.style.userSelect = 'none';
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+        e.preventDefault();
+      });
+
+      function onMove(e) {
+        const w = Math.min(600, Math.max(200, startWidth + e.clientX - startX));
+        sidebar.style.setProperty('--sidebar-width', w + 'px');
+        sidebar.style.width = w + 'px';
+      }
+
+      function onUp() {
+        sidebar.classList.remove('resizing');
+        handle.classList.remove('dragging');
+        document.body.style.userSelect = '';
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+        localStorage.setItem('sidebar-width', sidebar.style.getPropertyValue('--sidebar-width'));
+      }
+    }
+
     function loadPreferences() {
       document.getElementById('session-filter').value = sessionFilter;
       document.getElementById('session-limit').value = sessionLimit;
@@ -3248,8 +3407,20 @@
       renderKanban();
     }
 
+    // Sync sidebar header height with view header
+    const sidebarHeader = document.querySelector('.sidebar-header');
+    const viewHeader = document.querySelector('.view-header');
+    new ResizeObserver(() => {
+      sidebarHeader.style.height = viewHeader.offsetHeight + 'px';
+    }).observe(viewHeader);
+
     // Init
     loadTheme();
+    loadSidebarState();
+    initSidebarResize();
+    fetch('/api/version').then(r => r.json()).then(d => {
+      document.getElementById('sidebar-footer').textContent = 'v' + d.version;
+    }).catch(() => {});
 
     const urlState = getUrlState();
     sessionFilter = urlState.filter || 'active';
@@ -3315,6 +3486,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;">Tab</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Toggle sidebar / board focus</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;">[</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Toggle sidebar collapse</td>
+              </tr>
             </table>
           </div>
           <div>

package/server.js

@@ -329,6 +329,11 @@ app.get('/api/teams/:name', (req, res) => {
   res.json(config);
 });
 
+app.get('/api/version', (req, res) => {
+  const pkg = require('./package.json');
+  res.json({ version: pkg.version });
+});
+
 // API: Get all tasks across all sessions
 app.get('/api/tasks/all', async (req, res) => {
   try {
@@ -516,6 +521,10 @@ projectsWatcher.on('all', (event, filePath) => {
   }
 });
 
+app.use('/api', (req, res) => {
+  res.status(404).json({ error: 'Not found' });
+});
+
 // Start server
 const server = app.listen(PORT, () => {
   const actualPort = server.address().port;