claude-code-kanban 4.22.0 → 4.23.1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "4.22.0",
+  "version": "4.23.1",
   "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>`;
       })
@@ -3137,9 +3142,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 +4617,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 +4626,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 +5769,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 */