claude-code-kanban 2.2.0 → 2.3.1

package/lib/parsers.js

@@ -541,6 +541,7 @@ function buildAgentProgressMap(jsonlPath) {
     const tmToolIdRe = /"tool_use_id":"([^"]+)"/;
     const tmAgentIdRe = /agent_id: ([a-zA-Z0-9_@-]+)/;
     const nameByToolUseId = {};
+    const descByToolUseId = {};
     for (const line of content.split('\n')) {
       if (line.includes('"agent_progress"')) {
         const agentMatch = re.exec(line);
@@ -574,8 +575,24 @@ function buildAgentProgressMap(jsonlPath) {
           const blocks = obj.message?.content;
           if (Array.isArray(blocks)) {
             for (const b of blocks) {
-              if (b.type === 'tool_use' && b.name === 'Agent' && b.id && b.input?.name) {
-                nameByToolUseId[b.id] = b.input.name;
+              if (b.type === 'tool_use' && b.name === 'Agent' && b.id) {
+                if (b.input?.name) nameByToolUseId[b.id] = b.input.name;
+                if (b.input?.description) descByToolUseId[b.id] = b.input.description;
+              }
+            }
+          }
+        } catch (_) {}
+      } 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) {
+            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 };
+                }
               }
             }
           }
@@ -584,6 +601,7 @@ function buildAgentProgressMap(jsonlPath) {
     }
     for (const [key, entry] of Object.entries(map)) {
       if (nameByToolUseId[key]) entry.name = nameByToolUseId[key];
+      if (descByToolUseId[key]) entry.description = descByToolUseId[key];
     }
   } catch (_) {}
   return map;

package/package.json

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

package/public/app.js

@@ -25,6 +25,7 @@ let agentPollInterval = null;
 let selectedTaskId = null;
 let selectedSessionId = null;
 let focusZone = 'board'; // 'board' | 'sidebar'
+let appConfig = { marketplaceUrl: null };
 let selectedSessionIdx = -1;
 let selectedSessionKbId = null;
 let sessionJustSelected = false;
@@ -36,6 +37,7 @@ let msgUserScrolledUp = false;
 const MSG_MAX_LOADED = 200;
 let currentProjectPath = null;
 let currentProjectSessionIds = [];
+const dismissedSessionIds = new Set();
 
 function resetMessageScrollState() {
   msgUserScrolledUp = false;
@@ -627,7 +629,10 @@ async function viewAgentLog(agentId) {
     await fetchAgents(currentSessionId);
     agent = findAgentById(agentId);
   }
-  if (!agent) return;
+  if (!agent) {
+    if (!currentSessionId) return;
+    agent = { agentId: agentId, type: 'Agent', _sourceSessionId: currentSessionId };
+  }
   const resolvedId = agent.agentId;
   const shortId = resolvedId.length > 8 ? resolvedId.slice(0, 8) : resolvedId;
   const agentSessionId = agent._sourceSessionId || currentSessionId;
@@ -652,6 +657,7 @@ async function viewAgentLog(agentId) {
       const data = JSON.parse(e.data);
       currentMessages = data.messages;
       if (messagePanelOpen) renderMessages(data.messages);
+      maybeFollowLatest();
     } catch (_) {}
   });
   agentLogSSE.onerror = () => {};
@@ -684,6 +690,7 @@ async function fetchAgentMessages() {
     if (!agentLogMode || agentLogMode.agentId !== agentId) return;
     currentMessages = data.messages;
     if (messagePanelOpen) renderMessages(data.messages);
+    maybeFollowLatest();
   } catch (e) {
     console.error('[fetchAgentMessages]', e);
   }
@@ -737,9 +744,7 @@ async function fetchMessages(sessionId) {
       }
     }
 
-    if (msgDetailFollowLatest && currentMessages.length) {
-      showMsgDetail(currentMessages.length - 1);
-    }
+    maybeFollowLatest();
   } catch (e) {
     console.error('[fetchMessages]', e);
   }
@@ -1317,6 +1322,8 @@ function _renderPinToDetail(pin) {
 }
 
 const SESSION_PIN_SVG = PIN_SVG.replace('width="14" height="14"', 'width="12" height="12"');
+const MARKETPLACE_SVG =
+  '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>';
 
 //#endregion
 
@@ -1538,8 +1545,15 @@ function formatTaskToolDetail(params) {
 }
 function getToolDetail(tool, params, detail) {
   if (TASK_TOOLS.has(tool)) return formatTaskToolDetail(params);
-  if (detail) return ` <span style="color:var(--text-muted)">${escapeHtml(detail)}</span>`;
-  return '';
+  if (!detail) return '';
+  let extra = '';
+  if (tool === 'Read' && params) {
+    const parts = [];
+    if (params.offset) parts.push(`L${params.offset}`);
+    if (params.limit) parts.push(`+${params.limit}`);
+    if (parts.length) extra = ` <span style="color:var(--text-muted);opacity:.7">${parts.join(' ')}</span>`;
+  }
+  return ` <span style="color:var(--text-muted)">${escapeHtml(detail)}</span>${extra}`;
 }
 function renderTaskResult(toolResult) {
   if (!toolResult) return '';
@@ -1828,10 +1842,12 @@ function renderAgentFooter() {
             : a.status === 'idle'
               ? `idle · ${formatDuration(elapsed)}`
               : `active · ${formatDuration(elapsed)}`;
+        const descText = a.description || '';
         const promptTrimmed = stripAnsi(stripTeammateWrapper((a.prompt || '').trim())).replace(/[\r\n]+/g, ' ');
-        const promptTrunc = promptTrimmed.length > 60 ? `${promptTrimmed.substring(0, 60)}…` : promptTrimmed;
-        const msgHtml = promptTrunc
-          ? `<div class="agent-message" title="${escapeHtml(promptTrimmed)}">${escapeHtml(promptTrunc)}</div>`
+        const displayText = descText || promptTrimmed;
+        const displayTrunc = displayText.length > 60 ? `${displayText.substring(0, 60)}…` : displayText;
+        const msgHtml = displayTrunc
+          ? `<div class="agent-message" title="${escapeHtml(displayText)}">${escapeHtml(displayTrunc)}</div>`
           : '';
         const rawType = a.type || 'unknown';
         const colonIdx = rawType.indexOf(':');
@@ -2091,6 +2107,7 @@ function renderSessions() {
     const now = Date.now();
     const activeSessionIds = new Set();
     filteredSessions = filteredSessions.filter((s) => {
+      if (dismissedSessionIds.has(s.id)) return false;
       const isActive =
         s.hasMessages &&
         ((!s.sharedTaskList && (s.pending > 0 || s.inProgress > 0)) ||
@@ -2219,6 +2236,7 @@ function renderSessions() {
                 ${session.hasRunningAgents ? '<span class="agent-badge" title="Active agents">🤖</span>' : ''}
                 ${session.planSourceSessionId ? `<span class="plan-indicator" title="Implements plan — click to reveal plan session" onclick="event.stopPropagation(); revealPlanSession('${escapeHtml(session.planSourceSessionId)}')">📋</span>` : ''}
                 ${session.hasWaitingForUser ? '<span class="agent-badge" title="Waiting for user">❓</span>' : ''}
+                ${(window.__HUB__?.enabled || appConfig.marketplaceUrl) && session.project ? `<span class="marketplace-btn" data-project-path="${escapeHtml(session.project)}" onclick="event.stopPropagation(); openMarketplace(this.dataset.projectPath)" title="Open in Marketplace">${MARKETPLACE_SVG}</span>` : ''}
                 ${isLive ? '<span class="pulse"></span>' : ''}
               </span>
               <div class="progress-bar"><div class="progress-fill" style="width: ${percent}%"></div></div>
@@ -2770,7 +2788,7 @@ function navigateSession(direction, items) {
   }
   const currentEl = items[selectedSessionIdx];
   let newIdx = selectedSessionIdx + direction;
-  if (!currentEl || !currentEl.isConnected) {
+  if (!currentEl?.isConnected) {
     const restoredIdx = selectedSessionKbId ? items.findIndex((el) => getKbId(el) === selectedSessionKbId) : -1;
     newIdx = restoredIdx >= 0 ? restoredIdx : 0;
   }
@@ -4081,7 +4099,12 @@ function setupEventSource() {
       }
 
       if (data.type === 'team-update') {
-        debouncedRefresh(data.teamName, false);
+        const teamSession = sessions.find((s) => s.isTeam && s.teamName === data.teamName);
+        if (teamSession) {
+          debouncedRefresh(teamSession.id, false);
+        } else if (currentSessionId) {
+          debouncedRefresh(currentSessionId, false);
+        }
       }
     };
   }
@@ -4238,6 +4261,12 @@ function renderContextDetail(raw) {
 //#endregion
 
 //#region UTILS
+function maybeFollowLatest() {
+  if (msgDetailFollowLatest && currentMessages.length) {
+    showMsgDetail(currentMessages.length - 1);
+  }
+}
+
 function isSessionActive(s) {
   return s.hasRecentLog || s.inProgress > 0 || s.hasActiveAgents || s.hasWaitingForUser;
 }
@@ -4908,6 +4937,7 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
   bodyEl.innerHTML = html;
   _infoModalSessionId = session.id;
   updateStickyBtnState();
+  updateDismissBtnState();
   modal.classList.add('visible');
 
   const keyHandler = (e) => {
@@ -4925,6 +4955,25 @@ function closeTeamModal() {
   document.getElementById('team-modal').classList.remove('visible');
 }
 
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function toggleDismissSession(sessionId) {
+  if (dismissedSessionIds.has(sessionId)) {
+    dismissedSessionIds.delete(sessionId);
+  } else {
+    dismissedSessionIds.add(sessionId);
+  }
+  updateDismissBtnState();
+  renderSessions();
+}
+
+function updateDismissBtnState() {
+  const btn = document.getElementById('session-info-dismiss-btn');
+  if (!btn || !_infoModalSessionId) return;
+  const isDismissed = dismissedSessionIds.has(_infoModalSessionId);
+  btn.textContent = isDismissed ? 'Restore' : 'Dismiss';
+  btn.title = isDismissed ? 'Restore — show in active list again' : 'Dismiss — hide from active list';
+}
+
 let _planSessionId = null;
 
 //#endregion
@@ -4991,6 +5040,18 @@ function openFolderInEditor(folder, file) {
   postAndToast('/api/open-folder', body, 'folder');
 }
 
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function openMarketplace(projectPath) {
+  const params = new URLSearchParams({ project: projectPath });
+  if (window.__HUB__?.enabled) {
+    hubNavigate('marketplace', `?${params}`);
+  } else if (appConfig.marketplaceUrl) {
+    const url = new URL(appConfig.marketplaceUrl);
+    url.search = params.toString();
+    window.open(url.toString(), '_blank');
+  }
+}
+
 //#endregion
 
 //#region OWNER_FILTER
@@ -4999,7 +5060,7 @@ function updateOwnerFilter() {
   const select = document.getElementById('owner-filter');
 
   const session = sessions.find((s) => s.id === currentSessionId);
-  if (!session || !session.isTeam) {
+  if (!session?.isTeam) {
     bar.classList.remove('visible');
     return;
   }
@@ -5169,6 +5230,13 @@ 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 {
@@ -5209,3 +5277,24 @@ window.addEventListener('popstate', () => {
   if (s.messages !== messagePanelOpen) toggleMessagePanel();
 });
 //#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 }, '*');
+    }
+  });
+})();
+
+window.hubNavigate = function hubNavigate(app, url) {
+  if (!window.__HUB__?.enabled) return;
+  window.parent?.postMessage({ type: 'hub:navigate', app, url }, '*');
+};
+// #endregion HUB_INTEGRATION

package/public/index.html

@@ -496,6 +496,7 @@
       </div>
       <div id="team-modal-body" class="modal-body"></div>
       <div class="modal-footer">
+        <button id="session-info-dismiss-btn" class="btn btn-secondary" onclick="toggleDismissSession(_infoModalSessionId)">Dismiss</button>
         <button class="btn btn-primary" onclick="closeTeamModal()">Close</button>
       </div>
     </div>

package/public/style.css

@@ -3330,6 +3330,22 @@ pre.mermaid svg {
   color: var(--accent);
 }
 
+.marketplace-btn {
+  color: #888;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  transition:
+    color 0.15s,
+    filter 0.15s;
+  border-radius: 3px;
+}
+
+.marketplace-btn:hover {
+  color: var(--accent);
+  filter: drop-shadow(0 0 3px var(--accent));
+}
+
 .project-group-header .group-count {
   font-weight: 400;
   color: var(--text-muted);

package/server.js

@@ -48,6 +48,17 @@ function getClaudeDir() {
   return process.env.CLAUDE_DIR || path.join(os.homedir(), '.claude');
 }
 
+function getMarketplaceUrl() {
+  const idx = process.argv.findIndex(arg => arg.startsWith('--marketplace-url'));
+  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;
+}
+
+const MARKETPLACE_URL = getMarketplaceUrl();
 const CLAUDE_DIR = getClaudeDir();
 const TASKS_DIR = path.join(CLAUDE_DIR, 'tasks');
 const PROJECTS_DIR = path.join(CLAUDE_DIR, 'projects');
@@ -181,6 +192,10 @@ app.param('taskId', (req, res, next, val) => {
 // Parse JSON bodies
 app.use(express.json());
 
+app.get('/hub-config', (_req, res) => {
+  res.json({ enabled: !!process.env.CLAUDE_HUB, url: process.env.HUB_URL || null });
+});
+
 // Serve static files
 app.get('/sw.js', (req, res) => {
   res.setHeader('Cache-Control', 'no-cache');
@@ -1016,14 +1031,17 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
 
     const agentsNeedingPrompt = agents.filter(a => !a.prompt);
     const agentsNeedingName = agents.filter(a => !a.agentName);
-    if ((agentsNeedingPrompt.length || agentsNeedingName.length) && meta.jsonlPath) {
+    const agentsNeedingDesc = agents.filter(a => !a.description);
+    if ((agentsNeedingPrompt.length || agentsNeedingName.length || agentsNeedingDesc.length) && meta.jsonlPath) {
       let byAgentId = {};
       let nameByAgentId = {};
+      let descByAgentId = {};
       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;
         }
       } catch (_) {}
       for (const agent of agentsNeedingPrompt) {
@@ -1034,6 +1052,9 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
       for (const agent of agentsNeedingName) {
         if (nameByAgentId[agent.agentId]) agent.agentName = nameByAgentId[agent.agentId];
       }
+      for (const agent of agentsNeedingDesc) {
+        if (descByAgentId[agent.agentId]) agent.description = descByAgentId[agent.agentId];
+      }
     }
 
     const agentsNeedingModel = agents.filter(a => !a.model);
@@ -1199,6 +1220,7 @@ app.get('/api/sessions/:sessionId/messages', (req, res) => {
       const entry = progressMap[msg.toolUseId];
       if (entry) {
         msg.agentId = entry.agentId;
+        if (entry.description) msg.agentDescription = entry.description;
         if (entry.prompt && !msg.agentPrompt) msg.agentPrompt = entry.prompt;
         try {
           const agentFile = path.join(agentDir, entry.agentId + '.json');
@@ -1244,6 +1266,10 @@ app.get('/api/version', (req, res) => {
   res.json({ version: pkg.version });
 });
 
+app.get('/api/config', (req, res) => {
+  res.json({ marketplaceUrl: MARKETPLACE_URL });
+});
+
 // API: Get all tasks across all sessions
 app.get('/api/tasks/all', async (req, res) => {
   try {
@@ -1445,9 +1471,16 @@ watcher.on('all', (event, filePath) => {
 function broadcastToMappedSessions(taskListName, event, filePath) {
   const { listToSessions } = loadAllTaskMaps();
   const map = listToSessions[taskListName];
-  if (!map) return;
-  for (const sid of Object.keys(map)) {
-    broadcast({ type: 'update', event, sessionId: sid, file: path.basename(filePath) });
+  if (map) {
+    for (const sid of Object.keys(map)) {
+      broadcast({ type: 'update', event, sessionId: sid, file: path.basename(filePath) });
+    }
+    return;
+  }
+  // Fallback: check if taskListName is a team name
+  const cfg = loadTeamConfig(taskListName);
+  if (cfg?.leadSessionId) {
+    broadcast({ type: 'update', event, sessionId: cfg.leadSessionId, file: path.basename(filePath) });
   }
 }