claude-code-kanban 4.6.0 → 4.7.1

package/README.md

@@ -34,7 +34,7 @@ All changes are non-destructive — existing settings are preserved.
 npx claude-code-kanban --open
 ```
 
-Open http://localhost:3456 (or use `--open` to auto-launch the browser).
+Open http://localhost:3541 (or use `--open` to auto-launch the browser).
 
 ### 3. Use Claude Code as usual
 
@@ -64,7 +64,7 @@ npx claude-code-kanban --open            # Auto-open browser
 npx claude-code-kanban --dir=~/.claude-work  # Custom Claude config dir
 ```
 
-If port 3456 is in use, the server falls back to a random available port.
+If port 3541 is in use, the server falls back to a random available port.
 
 ### Global install
 

package/cli.js

@@ -145,7 +145,7 @@ function printTopHelp() {
   console.log('  --help, -h            Show help (top-level, noun-level, or leaf-level)');
   console.log('  --version, -v         Print version and exit');
   console.log('\nServer mode (no subcommand):');
-  console.log('  --port <n>            Port to listen on (default 3456)');
+  console.log('  --port <n>            Port to listen on (default 3541)');
   console.log('  --dir <path>          Override Claude config dir (default ~/.claude)');
   console.log('  --open                Open browser on start');
   console.log('  --install, --uninstall    Install or remove the agent-spy hook');
@@ -187,7 +187,7 @@ function getArgValue(args, name) {
   return args[idx + 1] && !args[idx + 1].startsWith('--') ? args[idx + 1] : null;
 }
 
-function cliPort() { return process.env.PORT || 3456; }
+function cliPort() { return process.env.PORT || 3541; }
 function unreachable() { return `Cannot reach cck server on port ${cliPort()}. Start it first with "claude-code-kanban".`; }
 
 class CliUnreachable extends Error { constructor() { super(unreachable()); this.code = 'unreachable'; } }

package/lib/parsers.js

@@ -442,13 +442,20 @@ function getSystemMessageLabel(text) {
     const statusMatch = text.match(/<status>([^<]+)<\/status>/);
     return statusMatch ? `Background task ${statusMatch[1]}` : 'Background task notification';
   }
-  if (text.includes('<local-command-stdout>') && text.includes('Compacted')) return 'Compacted';
+  // The "Compacted (ctrl+o…)" stdout echo is redundant with the isCompactSummary
+  // chip (modern Claude Code stores the summary inline). Skipping it lets the one
+  // summary-bearing chip stand alone instead of trailing a bare marker that the
+  // resume prompt sorts away from, preventing collapse.
+  if (text.includes('<local-command-stdout>') && text.includes('Compacted')) return '__skip__';
   if (text.includes('<local-command-stdout>')) return 'Command output';
   if (text.includes('<local-command-caveat>')) return 'System notification';
   if (text.includes('.output completed') && text.includes('Background command')) return 'Background task completed';
   if (text.startsWith('This session is being continued from a previous conversation')) return '__skip__';
   if (text.includes('<command-name>/clear</command-name>')) return '__skip__';
-  if (text.includes('<command-name>/compact</command-name>')) return 'Compacted';
+  // The /compact trigger record is redundant: the boundary stdout + isCompactSummary
+  // record already render as one expandable "Compacted" chip. Skip it so the chip
+  // collapses cleanly instead of leaving a separate marker where the user typed it.
+  if (text.includes('<command-name>/compact</command-name>')) return '__skip__';
   return null;
 }
 
@@ -641,6 +648,26 @@ function readRecentMessages(jsonlPath, limit = 10) {
               }
             }
           } else if (obj.type === 'user' && obj.message?.role === 'user' && !obj.isMeta) {
+            if (obj.isCompactSummary) {
+              // Surface the compaction summary as a single expandable "Compacted"
+              // chip (compactSummary), never a raw bubble. The boundary marker plus
+              // the /compact command/stdout records collapse into this one entry below.
+              const raw = typeof obj.message.content === 'string'
+                ? obj.message.content
+                : Array.isArray(obj.message.content)
+                  ? obj.message.content.filter((b) => b.type === 'text').map((b) => b.text).join('\n')
+                  : '';
+              const summary = raw
+                .replace(/^This session is being continued[^\n]*\n+(The summary below[^\n]*\n+)?/i, '')
+                .trim();
+              messages.push({
+                type: 'user',
+                systemLabel: 'Compacted',
+                compactSummary: summary || null,
+                timestamp: obj.timestamp
+              });
+              continue;
+            }
             if (typeof obj.message.content === 'string') {
               const t = obj.message.content;
               const tmMatch = t.match(/<teammate-message\s+([^>]*)>([\s\S]*?)<\/teammate-message>/);
@@ -801,6 +828,12 @@ function readRecentMessages(jsonlPath, limit = 10) {
     messages.sort((a, b) => (a.timestamp || '').localeCompare(b.timestamp || ''));
     for (let i = messages.length - 1; i > 0; i--) {
       if (messages[i].systemLabel === 'Compacted' && messages[i - 1].systemLabel === 'Compacted') {
+        // Carry the summary body onto the surviving chip so collapsing the
+        // boundary + /compact command + stdout + isCompactSummary records into
+        // one entry never drops the expandable summary.
+        if (messages[i].compactSummary && !messages[i - 1].compactSummary) {
+          messages[i - 1].compactSummary = messages[i].compactSummary;
+        }
         messages.splice(i, 1);
       }
     }

package/package.json

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

package/plugin/plugins/claude-code-kanban/.claude-plugin/plugin.json

@@ -1,5 +1,5 @@
 {
   "name": "claude-code-kanban",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Agent activity tracking for claude-code-kanban dashboard"
 }

package/plugin/plugins/claude-code-kanban/skills/kanban/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: kanban
 description: Drive the claude-code-kanban browser dashboard from this Claude session. Use this skill when the user mentions "kanban" together with "session" — e.g. "open this session in kanban", "show kanban", "focus current session in kanban", "pin/unpin a session in kanban", "preview this file in kanban", or asks to peek/view a kanban session.
-compatibility: Requires the `claude-code-kanban` CLI on PATH and the server running locally (default port 3456).
+compatibility: Requires the `claude-code-kanban` CLI on PATH and the server running locally (default port 3541).
 ---
 
 # Kanban Skill
@@ -69,6 +69,6 @@ Add `--json` to any list-style verb for machine-readable output.
 
 ## Troubleshooting
 
-- **"Cannot reach cck server on port 3456"** → ask the user to start it: `claude-code-kanban` (or `npm start` in the cck repo).
+- **"Cannot reach cck server on port 3541"** → ask the user to start it: `claude-code-kanban` (or `npm start` in the cck repo).
 - **Different port** → set `PORT=<n>` env var when invoking the CLI.
 - **Ambiguous session prefix (HTTP 409)** → use the full id. With `${CLAUDE_SESSION_ID}` this won't happen.

package/public/app.js

@@ -511,6 +511,8 @@ function setActivityFilter(kind) {
     // waiting is a sub-state of active — couple them so one click covers all running sessions
     toggleActivityKind('active');
     toggleActivityKind('waiting');
+    // Expand sections that have active sessions so they're visible on click
+    if (activityFilter.has('active')) expandActiveGroups();
   } else {
     toggleActivityKind(kind);
   }
@@ -2829,6 +2831,8 @@ function renderSessions() {
 
   // Group active sessions by project
   if (sessionFilter === 'active') {
+    // Auto-expand a collapsed section when newly-active work lands in it (live refresh).
+    expandActiveGroups({ onlyNew: true });
     const groups = new Map();
     const ungrouped = [];
     for (const session of filteredSessions) {
@@ -3212,8 +3216,7 @@ async function onColumnDrop(e) {
 
 //#region KEYBOARD_NAV
 function selectTask(taskId, sessionId) {
-  const prev = document.querySelector('.task-card.selected');
-  if (prev) prev.classList.remove('selected');
+  clearTaskSelection();
   selectedTaskId = taskId;
   selectedSessionId = sessionId;
   taskHighlightDimmed = false;
@@ -3330,6 +3333,11 @@ function clearKbSelection() {
   if (prev) prev.classList.remove('kb-selected');
 }
 
+function clearTaskSelection() {
+  const prev = document.querySelector('.task-card.selected');
+  if (prev) prev.classList.remove('selected');
+}
+
 function selectSessionByIndex(idx, items) {
   items = items || getNavigableItems();
   if (items.length === 0) return;
@@ -3368,11 +3376,37 @@ function setGroupCollapsed(header, collapsed) {
   header.classList.toggle('collapsed', collapsed);
   const container = getGroupSessionsContainer(header);
   if (container) container.classList.toggle('collapsed', collapsed);
+  persistCollapsedGroups();
+}
+
+function persistCollapsedGroups() {
   try {
     localStorage.setItem('collapsedGroups', JSON.stringify([...collapsedProjectGroups]));
   } catch (_) {}
 }
 
+let prevActiveSessionIds = null; // null until primed by the first onlyNew pass
+
+// Expand collapsed project sections that contain active sessions; leave the rest collapsed.
+// onlyNew: expand only for sessions that became active since the last call, so a section the
+// user manually collapsed stays collapsed until NEW active work lands in it (live refresh path).
+// The first onlyNew pass only primes the tracking set — it respects saved collapse state on load.
+// onlyNew=false force-expands every section with active work (explicit chip click).
+function expandActiveGroups({ onlyNew = false } = {}) {
+  const primed = prevActiveSessionIds !== null;
+  const activeIds = new Set();
+  let changed = false;
+  for (const s of sessions) {
+    if (!isSessionActive(s)) continue;
+    activeIds.add(s.id);
+    if (onlyNew && (!primed || prevActiveSessionIds.has(s.id))) continue;
+    if (collapsedProjectGroups.delete(s.project || '__ungrouped__')) changed = true;
+  }
+  prevActiveSessionIds = activeIds;
+  if (changed) persistCollapsedGroups();
+  // renderSessions() re-renders headers/containers from the updated set
+}
+
 function isGroupHeader(el) {
   return el.classList.contains('project-group-header') || el.classList.contains('pinned-sub-header');
 }
@@ -3434,8 +3468,7 @@ function setFocusZone(zone) {
   // Clear all zone visuals
   sidebar.classList.remove('sidebar-focused');
   clearKbSelection();
-  const selCard = document.querySelector('.task-card.selected');
-  if (selCard) selCard.classList.remove('selected');
+  clearTaskSelection();
 
   focusZone = zone;
   if (zone === 'sidebar') {
@@ -3761,10 +3794,8 @@ async function addNote(event, taskId, sessionId) {
 function closeDetailPanel() {
   detailPanel.classList.remove('visible');
   document.getElementById('delete-task-btn').style.display = 'none';
-  // Keep the task selected for keyboard nav, but drop its white highlight.
-  taskHighlightDimmed = true;
-  const sel = document.querySelector('.task-card.selected');
-  if (sel) sel.classList.remove('selected');
+  // Keep the task selected AND highlighted after closing (no dim-off).
+  taskHighlightDimmed = false;
 }
 
 let deleteTaskId = null;
@@ -4618,7 +4649,10 @@ document.addEventListener('keydown', (e) => {
       return;
     }
     if (e.key === 'Escape') {
-      setFocusZone('board');
+      // Plain unfocus — drop the keyboard cursor without jumping into the board
+      document.querySelector('.sidebar').classList.remove('sidebar-focused');
+      clearKbSelection();
+      focusZone = 'board';
       return;
     }
   }
@@ -4669,6 +4703,11 @@ document.addEventListener('keydown', (e) => {
     if (detailPanel.classList.contains('visible')) closeDetailPanel();
     else if (agentLogMode) exitAgentLogMode();
     else if (messagePanelOpen) toggleMessagePanel();
+    else {
+      // Nothing open — plain unfocus: drop the task-card selection highlight
+      clearTaskSelection();
+      selectedTaskId = null;
+    }
     return;
   }
 

package/public/style.css

@@ -454,22 +454,15 @@ body::before {
   padding: 12px 14px;
   margin-bottom: 4px;
   background: transparent;
-  border: 1px solid transparent;
+  border: 1px solid var(--border);
   border-radius: 8px;
   text-align: left;
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.12),
-    0 1px 2px rgba(0, 0, 0, 0.08);
-}
-
-.session-item:hover {
-  background: var(--bg-hover);
 }
 
 .session-item.active {
-  background: var(--bg-elevated);
+  background: var(--bg-deep);
   border-color: var(--accent);
 }
 
@@ -1173,7 +1166,7 @@ body::before {
   height: 100vh;
   background: var(--bg-surface);
   border-left: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
-  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
+  box-shadow: -1px 0 12px rgba(0, 0, 0, 0.04);
   display: none;
   flex-direction: column;
   z-index: 100;
@@ -2011,7 +2004,7 @@ body::before {
   height: 100vh;
   background: var(--bg-deep);
   border-left: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
-  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
+  box-shadow: -1px 0 12px rgba(0, 0, 0, 0.04);
   display: none;
   flex-direction: column;
   z-index: 99;
@@ -4228,11 +4221,6 @@ pre.mermaid svg {
   width: 0;
 }
 
-.sidebar-focused .session-item.active {
-  background: transparent;
-  border-color: var(--accent);
-}
-
 .sidebar-focused .session-item.active::before {
   width: 0;
 }

package/server.js

@@ -38,7 +38,7 @@ if (require("./cli").runCli(process.argv)) return;
 
 
 const app = express();
-const PORT = process.env.PORT || 3456;
+const PORT = process.env.PORT || 3541;
 
 // Parse --dir flag for custom Claude directory
 function getClaudeDir() {