claude-code-kanban 3.0.0 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "bin": {
@@ -16,7 +16,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/NikiforovAll/claude-task-viewer.git"
+    "url": "git+https://github.com/NikiforovAll/claude-code-kanban.git"
   },
   "keywords": [
     "claude",
@@ -31,16 +31,16 @@
   "author": "NikiforovAll",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/NikiforovAll/claude-task-viewer/issues"
+    "url": "https://github.com/NikiforovAll/claude-code-kanban/issues"
   },
-  "homepage": "https://github.com/NikiforovAll/claude-task-viewer#readme",
+  "homepage": "https://github.com/NikiforovAll/claude-code-kanban#readme",
   "dependencies": {
     "chokidar": "^3.5.3",
     "express": "^4.18.2",
-    "open": "^10.0.0"
+    "open": "^11.0.0"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "files": [
     "server.js",

package/public/app.js

@@ -25,7 +25,7 @@ let agentPollInterval = null;
 let selectedTaskId = null;
 let selectedSessionId = null;
 let focusZone = 'board'; // 'board' | 'sidebar'
-let appConfig = { marketplaceUrl: null };
+let appConfig = { marketplaceUrl: null, costUrl: null };
 let selectedSessionIdx = -1;
 let selectedSessionKbId = null;
 let sessionJustSelected = false;
@@ -129,27 +129,33 @@ let lastTasksHash = '';
 //#endregion
 
 //#region DATA_FETCHING
-async function fetchSessions() {
+async function fetchSessions(includeTasks = true) {
   try {
     const allPinnedIds = new Set([...pinnedSessionIds, ...stickySessionIds]);
     if (revealedPlanSessionId) allPinnedIds.add(revealedPlanSessionId);
     if (revealedStorageSessionId) allPinnedIds.add(revealedStorageSessionId);
     const pinnedParam = allPinnedIds.size > 0 ? `&pinned=${[...allPinnedIds].join(',')}` : '';
-    const [newSessions, newTasks] = await Promise.all([
-      fetch(`/api/sessions?limit=${sessionLimit}${pinnedParam}`).then((r) => r.json()),
-      fetch('/api/tasks/all').then((r) => r.json()),
-    ]);
+    const sessionsPromise = fetch(`/api/sessions?limit=${sessionLimit}${pinnedParam}`).then((r) => r.json());
+
+    let newSessions, newTasks;
+    if (includeTasks) {
+      [newSessions, newTasks] = await Promise.all([sessionsPromise, fetch('/api/tasks/all').then((r) => r.json())]);
+    } else {
+      newSessions = await sessionsPromise;
+    }
 
     const sessionsHash = JSON.stringify(newSessions);
-    const tasksHash = JSON.stringify(newTasks);
-    if (sessionsHash === lastSessionsHash && tasksHash === lastTasksHash) {
-      return;
+    if (includeTasks) {
+      const tasksHash = JSON.stringify(newTasks);
+      if (sessionsHash === lastSessionsHash && tasksHash === lastTasksHash) return;
+      lastTasksHash = tasksHash;
+      allTasksCache = newTasks;
+    } else {
+      if (sessionsHash === lastSessionsHash) return;
     }
     lastSessionsHash = sessionsHash;
-    lastTasksHash = tasksHash;
 
     sessions = newSessions;
-    allTasksCache = newTasks;
     renderSessions();
     renderLiveUpdatesFromCache();
   } catch (error) {
@@ -2792,9 +2798,9 @@ function navigateSession(direction, items) {
     const restoredIdx = selectedSessionKbId ? items.findIndex((el) => getKbId(el) === selectedSessionKbId) : -1;
     newIdx = restoredIdx >= 0 ? restoredIdx : 0;
   }
-  if (newIdx >= 0 && newIdx < items.length) {
-    selectSessionByIndex(newIdx, items);
-  }
+  if (newIdx < 0) newIdx = items.length - 1;
+  else if (newIdx >= items.length) newIdx = 0;
+  selectSessionByIndex(newIdx, items);
 }
 
 function setGroupCollapsed(header, collapsed) {
@@ -3975,6 +3981,22 @@ document.addEventListener('keydown', (e) => {
     toggleScratchpad();
     return;
   }
+  if (e.key === '$' && !e.ctrlKey && !e.altKey && !e.metaKey) {
+    e.preventDefault();
+    hubNavigate('cost', contextSid ? `?view=detail&session=${encodeURIComponent(contextSid)}` : undefined);
+    return;
+  }
+  if (matchKey(e, 'KeyM')) {
+    e.preventDefault();
+    const mSession = contextSid ? sessions.find((s) => s.id === contextSid) : null;
+    hubNavigate('marketplace', mSession?.project ? `?project=${encodeURIComponent(mSession.project)}` : undefined);
+    return;
+  }
+  if (matchKey(e, 'KeyT')) {
+    e.preventDefault();
+    toggleTheme();
+    return;
+  }
   if (e.key === '?' || (e.key === '/' && e.shiftKey)) {
     e.preventDefault();
     showHelpModal();
@@ -4043,7 +4065,7 @@ function setupEventSource() {
       if (isMetadata) {
         clearTimeout(metadataRefreshTimer);
         metadataRefreshTimer = setTimeout(async () => {
-          fetchSessions().catch((err) => console.error('[SSE] fetchSessions failed:', err));
+          fetchSessions(false).catch((err) => console.error('[SSE] fetchSessions failed:', err));
           if (currentSessionId) {
             await fetchAgents(currentSessionId);
             if (!agentLogMode) fetchMessages(currentSessionId);
@@ -4084,7 +4106,7 @@ function setupEventSource() {
         pendingAgentSessionIds.add(data.sessionId);
         clearTimeout(agentRefreshTimer);
         agentRefreshTimer = setTimeout(() => {
-          fetchSessions().catch((err) => console.error('[SSE] fetchSessions failed:', err));
+          fetchSessions(false).catch((err) => console.error('[SSE] fetchSessions failed:', err));
           if (viewMode === 'project' && currentProjectSessionIds.some((id) => pendingAgentSessionIds.has(id))) {
             refreshProjectAgents();
           } else if (currentSessionId && pendingAgentSessionIds.has(currentSessionId)) {
@@ -4109,8 +4131,22 @@ function setupEventSource() {
     };
   }
 
-  // Fallback poll every 30s in case SSE silently drops
+  // When the tab becomes visible after being hidden, catch up immediately
+  let _pollMissed = false;
+  document.addEventListener('visibilitychange', () => {
+    if (!document.hidden && _pollMissed) {
+      _pollMissed = false;
+      fetchSessions().catch(() => {});
+      if (currentSessionId) fetchTasks(currentSessionId).catch(() => {});
+    }
+  });
+
+  // Fallback poll every 30s in case SSE silently drops; skip when tab is hidden
   setInterval(() => {
+    if (document.hidden) {
+      _pollMissed = true;
+      return;
+    }
     fetchSessions().catch(() => {});
   }, 30000);
 
@@ -4581,7 +4617,6 @@ function updateThemeColor(isLight) {
 //#endregion
 
 //#region THEME
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function toggleTheme() {
   const isCurrentlyLight = document.body.classList.contains('light');
   if (isCurrentlyLight) {
@@ -4941,6 +4976,8 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
   _infoModalSessionId = session.id;
   updateStickyBtnState();
   updateDismissBtnState();
+  const costBtn = document.getElementById('session-info-cost-btn');
+  if (costBtn) costBtn.style.display = window.__HUB__?.enabled || appConfig.costUrl ? '' : 'none';
   modal.classList.add('visible');
 
   const keyHandler = (e) => {
@@ -5043,6 +5080,15 @@ function openFolderInEditor(folder, file) {
   postAndToast('/api/open-folder', body, 'folder');
 }
 
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function openCost(sessionId) {
+  if (window.__HUB__?.enabled) {
+    hubNavigate('cost', `?view=detail&session=${encodeURIComponent(sessionId)}`);
+  } else if (appConfig.costUrl) {
+    window.open(`${appConfig.costUrl}?view=detail&session=${encodeURIComponent(sessionId)}`, '_blank');
+  }
+}
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function openMarketplace(projectPath) {
   const params = new URLSearchParams({ project: projectPath });
@@ -5233,33 +5279,42 @@ if (urlState.search) {
   document.getElementById('search-clear-btn').classList.add('visible');
 }
 
-fetch('/api/config')
-  .then((r) => r.json())
-  .then((c) => {
-    appConfig = c;
-  })
-  .catch(() => {});
-
-fetchSessions().then(async () => {
-  if (urlState.projectView) {
-    try {
-      await fetchProjectView(atob(urlState.projectView));
-    } catch (_) {
+Promise.all([
+  fetch('/hub-config')
+    .then((r) => r.json())
+    .then((cfg) => {
+      if (!cfg.enabled) return;
+      window.__HUB__ = cfg;
+    })
+    .catch(() => {}),
+  fetch('/api/config')
+    .then((r) => r.json())
+    .then((c) => {
+      appConfig = c;
+    })
+    .catch(() => {}),
+])
+  .then(() => fetchSessions())
+  .then(async () => {
+    if (urlState.projectView) {
+      try {
+        await fetchProjectView(atob(urlState.projectView));
+      } catch (_) {
+        showAllTasks();
+      }
+    } else if (urlState.session) {
+      await fetchTasks(urlState.session);
+    } else {
       showAllTasks();
     }
-  } else if (urlState.session) {
-    await fetchTasks(urlState.session);
-  } else {
-    showAllTasks();
-  }
-  if (urlState.messages && currentSessionId) {
-    toggleMessagePanel();
-    // Re-render after panel layout settles so scroll dimensions are correct
-    requestAnimationFrame(() => {
-      if (currentMessages.length) renderMessages(currentMessages);
-    });
-  }
-});
+    if (urlState.messages && currentSessionId) {
+      toggleMessagePanel();
+      // Re-render after panel layout settles so scroll dimensions are correct
+      requestAnimationFrame(() => {
+        if (currentMessages.length) renderMessages(currentMessages);
+      });
+    }
+  });
 
 window.addEventListener('popstate', () => {
   const s = getUrlState();
@@ -5282,23 +5337,17 @@ window.addEventListener('popstate', () => {
 //#endregion
 
 // #region HUB_INTEGRATION
-(async function initHub() {
-  const cfg = await fetch('/hub-config')
-    .then((r) => r.json())
-    .catch(() => ({}));
-  if (!cfg.enabled) return;
-  window.__HUB__ = cfg;
-  document.addEventListener('keydown', (e) => {
-    if (e.ctrlKey && e.altKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
-      e.preventDefault();
-      window.parent?.postMessage({ type: 'hub:keydown', key: e.key }, '*');
-    }
-    if (e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey && /^[1-9]$/.test(e.key)) {
-      e.preventDefault();
-      window.parent?.postMessage({ type: 'hub:keydown', key: e.key }, '*');
-    }
-  });
-})();
+document.addEventListener('keydown', (e) => {
+  if (!window.__HUB__?.enabled) return;
+  if (e.ctrlKey && e.altKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+    e.preventDefault();
+    window.parent?.postMessage({ type: 'hub:keydown', key: e.key }, '*');
+  }
+  if (e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey && /^[1-9]$/.test(e.key)) {
+    e.preventDefault();
+    window.parent?.postMessage({ type: 'hub:keydown', key: e.key }, '*');
+  }
+});
 
 window.hubNavigate = function hubNavigate(app, url) {
   if (!window.__HUB__?.enabled) return;

package/public/index.html

@@ -46,7 +46,7 @@
       <header class="sidebar-header">
         <div class="logo">
           <div class="logo-mark">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <svg viewBox="4 6 16 12" fill="none" stroke="currentColor" stroke-width="2.5">
               <path d="M5 13l4 4L19 7"/>
             </svg>
           </div>
@@ -183,7 +183,7 @@
                 <circle cx="12" cy="17" r="0.5" fill="currentColor"/>
               </svg>
             </button>
-            <a href="https://github.com/NikiforovAll/claude-task-viewer" target="_blank" class="icon-btn" title="View on GitHub" aria-label="View on GitHub">
+            <a href="https://github.com/NikiforovAll/claude-code-kanban" target="_blank" class="icon-btn" title="View on GitHub" aria-label="View on GitHub">
               <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                 <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
               </svg>
@@ -396,6 +396,18 @@
                 <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">N</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Toggle scratchpad</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;">T</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Toggle theme</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);">Jump to cost</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;">M</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Jump to marketplace</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;">Shift+S</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Storage manager</td>
@@ -487,6 +499,9 @@
           <button id="session-info-sticky-btn" class="icon-btn" style="display:none" title="Sticky pin — always show at top" onclick="toggleSessionSticky(_infoModalSessionId); updateStickyBtnState()">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>
           </button>
+          <button id="session-info-cost-btn" class="icon-btn" style="display:none" title="Open in Cost" onclick="openCost(_infoModalSessionId)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 18V6"/></svg>
+          </button>
           <button class="modal-close" aria-label="Close dialog" onclick="closeTeamModal()">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M18 6L6 18M6 6l12 12"/>

package/server.js

@@ -48,17 +48,18 @@ function getClaudeDir() {
   return process.env.CLAUDE_DIR || path.join(os.homedir(), '.claude');
 }
 
-function getMarketplaceUrl() {
-  const idx = process.argv.findIndex(arg => arg.startsWith('--marketplace-url'));
+function getArgUrl(argName, envName) {
+  const idx = process.argv.findIndex(arg => arg.startsWith(`--${argName}`));
   if (idx !== -1) {
     const arg = process.argv[idx];
     if (arg.includes('=')) return arg.split('=').slice(1).join('=');
     if (process.argv[idx + 1]) return process.argv[idx + 1];
   }
-  return process.env.MARKETPLACE_URL || null;
+  return process.env[envName] || null;
 }
 
-const MARKETPLACE_URL = getMarketplaceUrl();
+const MARKETPLACE_URL = getArgUrl('marketplace-url', 'MARKETPLACE_URL');
+const COST_URL = getArgUrl('cost-url', 'COST_URL');
 const CLAUDE_DIR = getClaudeDir();
 const TASKS_DIR = path.join(CLAUDE_DIR, 'tasks');
 const PROJECTS_DIR = path.join(CLAUDE_DIR, 'projects');
@@ -1276,7 +1277,7 @@ app.get('/api/version', (req, res) => {
 });
 
 app.get('/api/config', (req, res) => {
-  res.json({ marketplaceUrl: MARKETPLACE_URL });
+  res.json({ marketplaceUrl: MARKETPLACE_URL, costUrl: COST_URL });
 });
 
 // API: Get all tasks across all sessions