claude-code-kanban 4.22.0 → 4.23.2

package/lib/file-url.js

@@ -24,6 +24,8 @@ function fileUrlToPath(value) {
   if (typeof value !== 'string' || !/^file:/i.test(value)) return value;
   // Backslashes are not legal in a URL, so this cannot corrupt a well-formed one.
   let url = value.replace(/\\/g, '/');
+  // A scheme with no path body: POSIX Node resolves it to "/" rather than throwing.
+  if (/^file:\/*$/i.test(url)) return value;
   const drive = DRIVE_URL.exec(url);
   if (drive) url = `file:///${drive[1]}`;
   try {

package/lib/parsers.js

@@ -160,6 +160,17 @@ function formatTaskUsage(usage) {
   return parts.length ? ' · ' + parts.join(' · ') : '';
 }
 
+// Raw per-agent cost for the agent modal's chips plus the formatted one-liner for
+// the inline message row. Null when the source carried no numbers.
+function agentUsageEntry(subagentTokens, toolUses, durationMs) {
+  const usage = {};
+  if (subagentTokens != null) usage.tokens = subagentTokens;
+  if (toolUses != null) usage.tools = toolUses;
+  if (durationMs != null) usage.durationMs = durationMs;
+  if (!Object.keys(usage).length) return null;
+  return { usage, usageText: formatTaskUsage({ subagentTokens, toolUses, durationMs }) };
+}
+
 function pushUserMessage(messages, text, timestamp, sysLabel, extras) {
   if (sysLabel === '__skip__') return;
   let safeText = text || '';
@@ -1099,6 +1110,7 @@ function buildSessionDigest(jsonlPath) {
     const taskIdRe = /<task-id>([a-zA-Z0-9_-]+)<\/task-id>/;
     const nameByToolUseId = {};
     const descByToolUseId = {};
+    const usageByToolUseId = {};
     for (const line of content.split('\n')) {
       // Terminated-teammate detection: check first since cheap substring guards
       if (line.includes('teammate-message') &&
@@ -1171,34 +1183,34 @@ function buildSessionDigest(jsonlPath) {
       } else if (line.includes('User rejected tool use') && line.includes('"tool_use_id"')) {
         const m = tmToolIdRe.exec(line);
         if (m) rejectedToolUseIds.add(m[1]);
-      } else if (line.includes('<task-notification>') &&
-                 (line.includes('<status>killed</status>') || line.includes('<status>error</status>'))) {
-        const idMatch = taskIdRe.exec(line);
-        if (idMatch) killedAgentIds.add(idMatch[1]);
+      } else if (line.includes('<task-notification>')) {
+        // The envelope's tags survive JSON escaping, so read them off the raw line.
+        // This covers every delivery shape (user message, queue-operation,
+        // queued_command attachment) without enumerating them.
+        if (line.includes('<status>killed</status>') || line.includes('<status>error</status>')) {
+          const idMatch = taskIdRe.exec(line);
+          if (idMatch) killedAgentIds.add(idMatch[1]);
+        }
+        if (line.includes('<subagent_tokens>')) {
+          const notif = parseTaskNotification(line);
+          const u = notif?.usage;
+          const entry = u && notif.toolUseId ? agentUsageEntry(u.subagentTokens, u.toolUses, u.durationMs) : null;
+          if (entry) usageByToolUseId[notif.toolUseId] = entry;
+        }
       } else if (line.includes('"toolUseResult"') && line.includes('"agentId"') && line.includes('"tool_result"')) {
         try {
           const obj = JSON.parse(line);
           const tur = obj.toolUseResult;
           if (tur?.agentId) {
-            // Foreground agents report their cost on the completion toolUseResult
-            // (totalTokens/totalToolUseCount/totalDurationMs) — the same numbers a
-            // background agent surfaces via its <task-notification> <usage> block. Keep
-            // the raw numbers (for the agent modal's per-stat chips) and a formatted
-            // one-liner via the shared formatter (for the inline message row):
-            // " · 31.5k tok · 5 tools · 34s".
-            const usage = {};
-            if (tur.totalTokens != null) usage.tokens = tur.totalTokens;
-            if (tur.totalToolUseCount != null) usage.tools = tur.totalToolUseCount;
-            if (tur.totalDurationMs != null) usage.durationMs = tur.totalDurationMs;
-            const hasUsage = Object.keys(usage).length > 0;
-            const usageText = hasUsage
-              ? formatTaskUsage({ subagentTokens: usage.tokens, toolUses: usage.tools, durationMs: usage.durationMs })
-              : null;
+            // Foreground agents report their cost on the completion toolUseResult;
+            // background agents report the same numbers in their <task-notification>.
+            const { usage, usageText } = agentUsageEntry(tur.totalTokens, tur.totalToolUseCount, tur.totalDurationMs)
+              || { usage: null, usageText: null };
             const blocks = obj.message?.content;
             if (Array.isArray(blocks)) {
               for (const b of blocks) {
                 if (b.type === 'tool_result' && b.tool_use_id && !map[b.tool_use_id]) {
-                  map[b.tool_use_id] = { agentId: tur.agentId, prompt: tur.prompt || null, usage: hasUsage ? usage : null, usageText };
+                  map[b.tool_use_id] = { agentId: tur.agentId, prompt: tur.prompt || null, usage, usageText };
                 }
               }
             }
@@ -1207,6 +1219,7 @@ function buildSessionDigest(jsonlPath) {
       }
     }
     for (const [key, entry] of Object.entries(map)) {
+      if (!entry.usage && usageByToolUseId[key]) Object.assign(entry, usageByToolUseId[key]);
       if (nameByToolUseId[key]) entry.name = nameByToolUseId[key];
       if (descByToolUseId[key]) entry.description = descByToolUseId[key];
       // Prefer the full prompt from the assistant's tool_use input — Claude Code's

package/package.json

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

package/public/app.js

@@ -1460,8 +1460,8 @@ function getToolIcon(toolName) {
 }
 const AGENT_LOG_ICON =
   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>';
-function agentLogButton(agentId) {
-  return `<button class="msg-agent-log-btn" onclick="event.stopPropagation();viewAgentLog('${escAttrJs(agentId)}')" title="View agent log">${AGENT_LOG_ICON}</button>`;
+function agentLogButton(agentId, cls = 'msg-agent-log-btn') {
+  return `<button class="${escapeHtml(cls)}" onclick="event.stopPropagation();viewAgentLog('${escAttrJs(agentId)}')" title="View agent log">${AGENT_LOG_ICON}</button>`;
 }
 
 function getPinId(m) {
@@ -2763,9 +2763,14 @@ function renderAgentFooter() {
         const agentColor = resolveNamedColor(a.color);
         const colorStyle = agentColor ? ` style="border-left:3px solid ${agentColor.color}"` : '';
         const selectedClass = a.agentId === currentAgentModalId ? ' selected' : '';
+        const cardModel = shortModelName(a.model);
+        const modelChipHtml = cardModel
+          ? `<span class="agent-card-model" title="${escapeHtml(a.model)}">${escapeHtml(cardModel)}</span>`
+          : '';
         return `<div class="agent-card${selectedClass}" data-agent-id="${escapeHtml(a.agentId)}"${colorStyle} onclick="showAgentModal('${escAttrJs(a.agentId)}')">
+          ${agentLogButton(a.agentId, 'agent-card-log-btn')}
           <div class="agent-type-row">${typeNs ? `<span class="agent-type-ns">${escapeHtml(typeNs)}</span>` : ''}<span class="agent-type-name">${escapeHtml(typeName)}</span>${nameBadgeHtml}</div>
-          <div class="agent-status-row"><span class="agent-dot ${a.status}"></span><span class="agent-status">${statusText}</span></div>
+          <div class="agent-status-row"><span class="agent-dot ${a.status}"></span><span class="agent-status">${statusText}</span>${modelChipHtml}</div>
           ${msgHtml}
         </div>`;
       })
@@ -2878,10 +2883,8 @@ function showAgentModal(agentId) {
     return `<span class="agent-chip${cls}"${style}${title}>${labelHtml}<span class="agent-chip-val">${value}</span></span>`;
   };
 
-  // Agent cost stats live on the launch row's message (resolved from the completion
-  // toolUseResult), not on the agent-activity record — so read them from there.
   const agentMsg = currentMessages.find((m) => m.tool === 'Agent' && m.agentId === agentId);
-  const usageStats = agentMsg?.agentUsageStats || null;
+  const usageStats = agent.usage || null;
   const fmtTok = fmtTokens;
 
   const chips = [];
@@ -3137,9 +3140,9 @@ function renderSessions() {
     const total = session.taskCount;
     const percent = total > 0 ? Math.round((session.completed / total) * 100) : 0;
     const isActive = session.id === currentSessionId && viewMode === 'session';
-    const hasInProgress = session.inProgress > 0;
-    const isLive =
-      hasInProgress || (session.modifiedAt && Date.now() - new Date(session.modifiedAt).getTime() <= LIVE_INDICATOR_MS);
+    // hasRecentLog carries the server's registry-idle correction: an open-but-idle
+    // terminal keeps touching its JSONL, so mtime alone is not proof of activity.
+    const isLive = session.hasRecentLog && Date.now() - Date.parse(session.modifiedAt) <= LIVE_INDICATOR_MS;
     const rawName = session.name || session.id;
     const sessionName = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(rawName)
       ? rawName.slice(0, 8)
@@ -4612,8 +4615,6 @@ function activateSelectedSession(items) {
 
 function setFocusZone(zone) {
   const sidebar = document.querySelector('.sidebar');
-  // Clear all zone visuals
-  sidebar.classList.remove('sidebar-focused');
   clearKbSelection();
   clearTaskSelection();
 
@@ -4623,7 +4624,6 @@ function setFocusZone(zone) {
       sidebar.classList.remove('collapsed');
       localStorage.setItem('sidebar-collapsed', false);
     }
-    sidebar.classList.add('sidebar-focused');
     const items = getNavigableItems();
     if (items.length > 0) {
       const activeIdx = items.findIndex((el) => el.classList.contains('active'));
@@ -5767,7 +5767,6 @@ document.addEventListener('keydown', (e) => {
     }
     if (e.key === 'Escape') {
       // Plain unfocus — drop the keyboard cursor without jumping into the board
-      document.querySelector('.sidebar').classList.remove('sidebar-focused');
       clearKbSelection();
       focusZone = 'board';
       return;

package/public/style.css

@@ -562,6 +562,7 @@ body::before {
 }
 
 .session-item {
+  position: relative;
   display: block;
   width: 100%;
   padding: 13px 15px;
@@ -574,11 +575,63 @@ body::before {
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+/* `.active` is the open session, `.kb-selected` the keyboard cursor. The cursor
+   must win when both land on one card, which is why it is ordered second. */
 .session-item.active {
   background: var(--bg-deep);
   border-color: var(--accent);
 }
 
+.session-item.kb-selected {
+  background: var(--bg-elevated);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent-dim);
+}
+
+.session-item.stale {
+  opacity: 0.85;
+}
+
+.session-item.stale:hover,
+.session-item.stale.active,
+.session-item.stale.kb-selected,
+.session-item.stale:has(.session-pin-btn.sticky) {
+  opacity: 1;
+}
+
+.session-item.stale .session-time,
+.session-item.warm .session-time {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.session-item.stale .session-time::before,
+.session-item.warm .session-time::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.session-item.warm .session-time {
+  color: var(--success);
+}
+
+.session-item.warm .session-time::before {
+  background: var(--success);
+}
+
+.session-item.stale .session-time {
+  color: var(--text-muted);
+}
+
+.session-item.stale .session-time::before {
+  background: transparent;
+  border: 1px solid var(--text-muted);
+}
+
 .session-name {
   font-size: 13px;
   color: var(--text-primary);
@@ -590,12 +643,11 @@ body::before {
 }
 
 .session-indicators .pulse {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
   background: var(--accent);
   border-radius: 50%;
   animation: pulse 2s ease-in-out infinite;
-  box-shadow: 0 0 12px var(--accent-glow);
 }
 
 @keyframes pulse {
@@ -694,6 +746,10 @@ body::before {
   transition: width 0.5s ease-out;
 }
 
+.session-item:not(.active) .progress-fill {
+  background: color-mix(in srgb, var(--text-tertiary) 55%, transparent);
+}
+
 .progress-text {
   font-size: 11px;
   font-weight: 500;
@@ -3597,6 +3653,25 @@ body::before {
 .agent-card:hover {
   border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
 }
+.agent-card-log-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: flex;
+  padding: 2px;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  opacity: 0.45;
+  transition:
+    opacity 0.15s,
+    color 0.15s;
+}
+.agent-card-log-btn:hover {
+  opacity: 1;
+  color: var(--accent);
+}
 .agent-card.selected,
 .agent-card.selected:hover {
   background: var(--bg-elevated);
@@ -3662,6 +3737,20 @@ body::before {
   font-size: 11px;
   color: var(--text-tertiary);
 }
+.agent-card-model {
+  margin-left: auto;
+  padding: 1px 6px;
+  font-family: var(--font-mono, monospace);
+  font-size: 9.5px;
+  line-height: 1.4;
+  color: var(--text-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 45%;
+}
 .agent-message {
   font-size: 11px;
   color: var(--text-muted);
@@ -5415,79 +5504,6 @@ pre.mermaid svg {
   color: var(--accent);
 }
 
-/* Session list hover accent bar */
-.session-item {
-  position: relative;
-}
-
-.session-item::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 0;
-  height: 60%;
-  background: var(--accent);
-  border-radius: 0 2px 2px 0;
-  transition: width 0.15s ease;
-}
-
-.session-item:hover::before {
-  width: 0;
-}
-
-.sidebar-focused .session-item.active::before {
-  width: 0;
-}
-
-.session-item.kb-selected,
-.session-item.kb-selected:hover,
-.session-item.active.kb-selected {
-  background: var(--bg-elevated);
-  border-color: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent-dim);
-}
-
-.session-item.kb-selected::before {
-  width: 0;
-}
-.session-item.stale .session-time,
-.session-item.warm .session-time {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-.session-item.stale .session-time::before,
-.session-item.warm .session-time::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-.session-item.warm .session-time {
-  color: var(--success);
-}
-.session-item.warm .session-time::before {
-  background: var(--success);
-}
-.session-item.stale {
-  opacity: 0.85;
-}
-.session-item.stale:hover,
-.session-item.stale.active,
-.session-item.stale.kb-selected,
-.session-item.stale:has(.session-pin-btn.sticky) {
-  opacity: 1;
-}
-.session-item.stale .session-time {
-  color: var(--text-muted);
-}
-.session-item.stale .session-time::before {
-  background: transparent;
-  border: 1px solid var(--text-muted);
-}
 /* #endregion */
 
 /* #region SESSION_GROUPS */

package/server.js

@@ -2007,16 +2007,16 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
     // (same pattern as agentsNeedingModel below). Each field shares the same resolve flow:
     // look up in progressMap by agentId, fall back to per-field extractor, persist only
     // on actual change.
+    // progressMap is keyed by tool_use_id; re-key by agentId, first value per field wins.
     const byAgentId = {};
-    const nameByAgentId = {};
-    const descByAgentId = {};
     if (meta.jsonlPath) {
       try {
         const progressMap = getProgressMap(meta.jsonlPath);
         for (const entry of Object.values(progressMap)) {
-          if (entry.prompt && !byAgentId[entry.agentId]) byAgentId[entry.agentId] = entry.prompt;
-          if (entry.name && !nameByAgentId[entry.agentId]) nameByAgentId[entry.agentId] = entry.name;
-          if (entry.description && !descByAgentId[entry.agentId]) descByAgentId[entry.agentId] = entry.description;
+          const e = (byAgentId[entry.agentId] ||= {});
+          for (const f of ['prompt', 'name', 'description', 'usage']) {
+            if (entry[f] && !e[f]) e[f] = entry[f];
+          }
         }
       } catch (_) {}
     }
@@ -2025,12 +2025,12 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
         field: 'prompt',
         flag: 'promptUnavailable',
         lookup: (a) => {
-          if (byAgentId[a.agentId]) return byAgentId[a.agentId];
+          if (byAgentId[a.agentId]?.prompt) return byAgentId[a.agentId].prompt;
           try { return extractPromptFromTranscript(subagentJsonlForExtraction(meta, a.agentId)); } catch (_) { return null; }
         },
       },
-      { field: 'agentName',   flag: 'agentNameUnavailable',   lookup: (a) => nameByAgentId[a.agentId] || null },
-      { field: 'description', flag: 'descriptionUnavailable', lookup: (a) => descByAgentId[a.agentId] || null },
+      { field: 'agentName',   flag: 'agentNameUnavailable',   lookup: (a) => byAgentId[a.agentId]?.name || null },
+      { field: 'description', flag: 'descriptionUnavailable', lookup: (a) => byAgentId[a.agentId]?.description || null },
     ];
     if (meta.jsonlPath) {
       for (const { field, flag, lookup } of reconcileFields) {
@@ -2133,6 +2133,11 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
     }
 
     const waitingForUser = checkWaitingForUser(agentDir, logMtime);
+    // Attached after persistAgent so it stays response-only.
+    for (const agent of visibleAgents) {
+      const usage = byAgentId[agent.agentId]?.usage;
+      if (usage) agent.usage = usage;
+    }
     res.json({ agents: visibleAgents, waitingForUser, teamColors });
   } catch {
     res.json({ agents: [], waitingForUser: null });
@@ -2499,7 +2504,6 @@ app.get('/api/sessions/:sessionId/messages', (req, res) => {
         msg.agentId = entry.agentId;
         if (entry.description) msg.agentDescription = entry.description;
         if (entry.usageText) msg.agentUsage = entry.usageText;
-        if (entry.usage) msg.agentUsageStats = entry.usage;
         if (entry.prompt && !msg.agentPrompt) msg.agentPrompt = entry.prompt;
         try {
           const agentFile = path.join(agentDir, `${entry.agentId}.jsonl`);