claude-code-kanban 5.0.0 → 5.1.0

package/package.json

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

package/public/app.js

@@ -446,6 +446,33 @@ function isActiveSession(s) {
 function isSessionLive(s) {
   return !!s.hasRecentLog && Date.now() - Date.parse(s.modifiedAt) <= LIVE_INDICATOR_MS;
 }
+function isJustFinished(s) {
+  return (
+    !isWaitingSession(s) &&
+    !isActiveSession(s) &&
+    !!s.hasRecentActivity &&
+    Date.now() - Date.parse(s.modifiedAt) < JUST_NOW_MS
+  );
+}
+
+// The JUST_NOW_MS mark is a client-side boundary; no server update arrives when a session crosses it.
+let justFinishedTimer = null;
+function scheduleJustFinishedExpiry() {
+  clearTimeout(justFinishedTimer);
+  let next = Infinity;
+  for (const s of sessions) {
+    if (isJustFinished(s)) next = Math.min(next, Date.parse(s.modifiedAt) + JUST_NOW_MS - Date.now());
+  }
+  if (next === Infinity) return;
+  justFinishedTimer = setTimeout(() => {
+    if (!skipOffScreen()) renderSessionViews();
+  }, next + 50);
+}
+
+function renderSessionViews() {
+  renderSessions();
+  if (isSessionPickerOpen()) renderSessionPicker();
+}
 
 const ACTIVITY_PREDICATES = {
   waiting: isWaitingSession,
@@ -619,6 +646,7 @@ async function fetchTasks(sessionId) {
 const WAITING_TTL_MS = 30 * 60 * 1000;
 const AGENT_LOG_MAX = 8;
 const LIVE_INDICATOR_MS = 10 * 1000;
+const JUST_NOW_MS = 60 * 1000;
 // #endregion
 
 function resetAgentState() {
@@ -1698,6 +1726,7 @@ const ICON_AGENT_ACTIVE =
   '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>';
 const ICON_TERMINAL =
   '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>';
+const TERMINAL_TITLE = 'Running in a terminal here';
 const ICON_CHAT =
   '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
 const TOOL_ICONS = {
@@ -3356,7 +3385,12 @@ function getFilteredSessions() {
     // The open session keeps its row even when it belongs to another project, so that
     // revealing one by id has something to scroll to. Same exemption the active branch
     // above already makes, for the same reason.
-    filteredSessions = filteredSessions.filter((s) => matchesProjectFilter(s.project) || s.id === currentSessionId);
+    filteredSessions = filteredSessions.filter(
+      (s) =>
+        matchesProjectFilter(s.project) ||
+        s.id === currentSessionId ||
+        (filterProject === '__recent__' && isAnyPinned(s.id)),
+    );
   }
 
   if (activityFilter.size > 0) {
@@ -3425,6 +3459,7 @@ function renderSessions() {
   // Rebuilding the list under the pointer cancels an in-flight drop and would swallow a
   // half-typed group name, and the SSE path can fire at any moment — defer instead.
   if (sgDrag || sgIsEditing() || zenPanelIsEditing()) return;
+  scheduleJustFinishedExpiry();
   refreshProjectList();
 
   // Zen narrows the rendered list only — the session picker keeps calling getFilteredSessions()
@@ -3493,15 +3528,19 @@ function renderSessions() {
     const linkedDocsCount = getSessionPreviewPaths(session.id).length;
     const bookmarksCount = loadPins(session.id).length;
     const hasScratchpad = _hasScratchpad(_sessionScratchpadKey(session.id));
-    const tempClass = session.hasRecentLog || session.inProgress || session.hasWaitingForUser ? 'warm' : 'stale';
+    const tempClass =
+      session.hasRecentLog || session.hasRecentActivity || session.inProgress || session.hasWaitingForUser
+        ? 'warm'
+        : 'stale';
     // Open tasks keep an idle session warm, but the green dot is for a session that is working.
     const idleClass =
       tempClass === 'warm' && !session.hasWaitingForUser && !session.hasRecentLog && !session.hasRunningAgents
         ? 'idle'
         : '';
+    const justFinishedClass = isJustFinished(session) ? 'just-finished' : '';
     const sid = escAttrJs(session.id);
     return `
-          <button onclick="openSession('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${session.hasWaitingForUser ? 'permission-pending' : ''} ${session.unread ? 'unread' : ''} ${tempClass} ${idleClass} ${showCtx ? 'has-context' : ''}" title="${escapeHtml(tooltip)}">
+          <button onclick="openSession('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${session.hasWaitingForUser ? 'permission-pending' : ''} ${session.unread ? 'unread' : ''} ${tempClass} ${idleClass} ${justFinishedClass} ${showCtx ? 'has-context' : ''}" title="${escapeHtml(tooltip)}">
             <span class="session-pin-btn${pinClass}" onclick="event.stopPropagation();toggleSessionPin('${sid}')" title="${pinTitle} session">${pinState === 'sticky' ? SESSION_STAR_SVG : SESSION_PIN_SVG}</span>
             <div class="session-name">${escapeHtml(sessionName)}</div>
             ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
@@ -3519,7 +3558,7 @@ function renderSessions() {
                 ${session.hasPlan && !session.planSourceSessionId ? `<span class="plan-indicator" onclick="event.stopPropagation(); openPlanForSession('${sid}')" title="View plan">${ICON_PLAN}</span>` : ''}
                 ${session.planSourceSessionId ? `<span class="plan-indicator" title="Implements plan — click to reveal plan session" onclick="event.stopPropagation(); revealPlanSession('${escAttrJs(session.planSourceSessionId)}')">${ICON_PLAN}</span>` : ''}
                 ${session.sharedTaskList ? `<span class="shared-tasklist-badge" title="Shared task list: ${escapeHtml(session.sharedTaskList)}">${linkSvg(12)}</span>` : ''}
-                ${runningTerminals.has(session.id) ? `<span class="terminal-badge" onclick="event.stopPropagation(); showSessionTerminal('${escAttrJs(session.id)}')" title="Running in a terminal here">${ICON_TERMINAL}</span>` : ''}
+                ${runningTerminals.has(session.id) ? `<span class="terminal-badge" onclick="event.stopPropagation(); showSessionTerminal('${escAttrJs(session.id)}')" title="${TERMINAL_TITLE}">${ICON_TERMINAL}</span>` : ''}
                 ${session.hasWaitingForUser ? `<span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>` : ''}
                 ${session.hasRunningAgents && !session.hasWaitingForUser ? `<span class="agent-badge agent-badge-active" title="Agents running">${ICON_AGENT_ACTIVE}</span>` : ''}
                 ${isLive || session.hasRunningAgents ? `<span class="pulse" title="${isLive ? 'Live' : 'Active agents'}"></span>` : ''}
@@ -4451,9 +4490,9 @@ function sgHeaderHtml(group, countHtml) {
   const actions = group.transient
     ? `<span class="sg-action sg-keep" title="Keep this group after its sessions end">Keep</span>
           <span class="sg-action sg-delete" title="Delete group (sessions return to Projects)">&times;</span>`
-    : `${headerPadBtnHtml(_groupScratchpadKey(group.id), group.name)}
-          <span class="sg-action sg-rename" title="Rename group"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></span>
-          <span class="sg-action sg-delete" title="Delete group (members return to Projects)">&times;</span>`;
+    : `<span class="sg-action sg-rename" title="Rename group"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></span>
+          <span class="sg-action sg-delete" title="Delete group (members return to Projects)">&times;</span>
+          ${headerPadBtnHtml(_groupScratchpadKey(group.id), group.name)}`;
   return `
         <div ${attrs} data-group-path="${escapeHtml(sgKey(group.id))}">
           ${groupChevronSvg()}
@@ -8283,7 +8322,7 @@ function formatDate(dateStr) {
   const now = new Date();
   const diff = now - date;
 
-  if (diff < 60000) return 'just now';
+  if (diff < JUST_NOW_MS) return 'just now';
   if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
   if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
   return date.toLocaleDateString();
@@ -9704,8 +9743,12 @@ function closeSessionPicker({ refocus = true } = {}) {
   if (refocus && spFromTerminal && wantsTerminal()) focusTerminalPane();
 }
 
+function isSessionPickerOpen() {
+  return document.getElementById('session-picker-modal').classList.contains('visible');
+}
+
 function toggleSessionPicker() {
-  if (document.getElementById('session-picker-modal').classList.contains('visible')) closeSessionPicker();
+  if (isSessionPickerOpen()) closeSessionPicker();
   else openSessionPicker();
 }
 
@@ -9772,24 +9815,35 @@ function spMatches(session, query) {
 }
 
 // Spelled out rather than interpolated so the class never comes from a variable.
-const SP_DOTS = {
-  waiting: '<span class="activity-dot waiting"></span>',
-  live: '<span class="activity-dot live"></span>',
-  active: '<span class="activity-dot active"></span>',
-  idle: '<span class="activity-dot"></span>',
+const SP_STATES = {
+  waiting: '<span class="sp-state waiting">',
+  live: '<span class="sp-state live">',
+  active: '<span class="sp-state active">',
+  justFinished: '<span class="sp-state just-finished">',
+  recent: '<span class="sp-state recent">',
+  idle: '<span class="sp-state idle">',
 };
 
+const SP_DOT = '<span class="activity-dot"></span>';
+const SP_TERMINAL = `<span class="sp-terminal" title="${TERMINAL_TITLE}">${ICON_TERMINAL}</span>`;
+
+function spState(session) {
+  if (isWaitingSession(session)) return 'waiting';
+  if (isSessionLive(session)) return 'live';
+  if (isActiveSession(session)) return 'active';
+  if (isJustFinished(session)) return 'justFinished';
+  return session.hasRecentActivity || session.inProgress > 0 ? 'recent' : 'idle';
+}
+
 function spDotHtml(session) {
-  if (isWaitingSession(session)) return SP_DOTS.waiting;
-  if (isSessionLive(session)) return SP_DOTS.live;
-  return isActiveSession(session) ? SP_DOTS.active : SP_DOTS.idle;
+  return `${SP_STATES[spState(session)]}${runningTerminals.has(session.id) ? SP_TERMINAL : SP_DOT}</span>`;
 }
 
 function spPinHtml(session) {
   const state = getSessionPinState(session.id);
   if (state === 'sticky') return `<span class="sp-pin sticky" title="Sticky">${SESSION_STAR_SVG}</span>`;
   if (state === 'pinned') return `<span class="sp-pin pinned" title="Pinned">${SESSION_PIN_SVG}</span>`;
-  return '';
+  return '<span class="sp-pin"></span>';
 }
 
 function renderSessionPicker() {
@@ -9821,11 +9875,11 @@ function renderSessionPicker() {
       return `<button class="sp-row${s.id === currentSessionId ? ' current' : ''}${outside ? ' outside' : ''}" data-idx="${i}" title="${escapeHtml(s.project ? `${s.id}\n${s.project}` : s.id)}">
         ${spDotHtml(s)}
         <span class="sp-name">${escapeHtml(sessionDisplayName(s))}</span>
-        ${spPinHtml(s)}
         <span class="sp-project">${escapeHtml(project)}</span>
         ${s.gitBranch ? `<span class="sp-branch">${escapeHtml(s.gitBranch)}</span>` : ''}
         <span class="sp-count">${s.completed}/${s.taskCount}</span>
         <span class="sp-time">${formatDate(s.modifiedAt)}</span>
+        ${spPinHtml(s)}
       </button>`;
     })
     .join('');
@@ -11619,7 +11673,7 @@ async function loadTerminals() {
 function setRunningTerminals(ids) {
   runningTerminals = new Set(ids);
   if (ids.some((id) => !sessions.some((s) => s.id === id))) fetchSessions(false).catch(() => {});
-  else renderSessions();
+  else renderSessionViews();
   renderActivityChip();
 }
 

package/public/style.css

@@ -969,6 +969,20 @@ body.booting .boot-splash {
   background: var(--text-tertiary);
 }
 
+/* Declared on the element, not :root, so it picks up body.light's --success. */
+.session-item.just-finished,
+.sp-state.just-finished {
+  --success-faded: color-mix(in srgb, var(--success) 35%, var(--text-muted));
+}
+
+.session-item.warm.idle.just-finished .session-time {
+  color: var(--success-faded);
+}
+
+.session-item.warm.idle.just-finished .session-time::before {
+  background: var(--success-faded);
+}
+
 .session-item.warm.permission-pending .session-time {
   color: var(--warning);
 }
@@ -6104,16 +6118,46 @@ select.form-input option:checked {
   border-color: var(--accent);
 }
 
-.sp-row .activity-dot.live {
-  background: var(--success);
+.sp-state {
+  flex: none;
+  width: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
 }
 
-.sp-row .activity-dot.active {
-  background: var(--accent);
+.sp-state.live {
+  color: var(--success);
 }
 
-.sp-row .activity-dot.waiting {
-  background: var(--warning);
+.sp-state.active {
+  color: var(--accent);
+}
+
+.sp-state.waiting {
+  color: var(--warning);
+}
+
+.sp-state.just-finished {
+  color: var(--success-faded);
+}
+
+.sp-state.recent {
+  color: var(--text-tertiary);
+}
+
+.sp-state.idle {
+  color: var(--text-muted);
+}
+
+.sp-state .activity-dot {
+  background: currentColor;
+}
+
+.sp-state.idle .activity-dot {
+  background: transparent;
+  border: 1px solid currentColor;
 }
 
 .sp-name,
@@ -6132,6 +6176,9 @@ select.form-input option:checked {
 
 .sp-pin {
   flex: none;
+  width: 14px;
+  display: flex;
+  justify-content: center;
   line-height: 0;
 }
 

package/server.js

@@ -1580,7 +1580,7 @@ app.get('/api/sessions', async (req, res) => {
     if (recentHours > 0) {
       const cutoff = Date.now() - recentHours * 3600 * 1000;
       const activity = projectActivity();
-      sessions = sessions.filter(s => (activity.get(s.project) || 0) > cutoff || includeIds.has(s.id));
+      sessions = sessions.filter(s => (activity.get(s.project) || 0) > cutoff || pinnedIds.has(s.id));
     }
 
     const paged = limit !== null && limit > 0;