claude-code-kanban 2.2.0-rc.13 → 2.2.0-rc.15

package/lib/parsers.js

@@ -494,6 +494,11 @@ function readRecentMessages(jsonlPath, limit = 10) {
     require('fs').closeSync(fd);
     fd = null;
     messages.sort((a, b) => (a.timestamp || '').localeCompare(b.timestamp || ''));
+    for (let i = messages.length - 1; i > 0; i--) {
+      if (messages[i].systemLabel === 'Compacted' && messages[i - 1].systemLabel === 'Compacted') {
+        messages.splice(i, 1);
+      }
+    }
     return messages.slice(-limit);
   } catch (e) {
     if (fd) try { require('fs').closeSync(fd); } catch (_) {}
@@ -535,6 +540,7 @@ function buildAgentProgressMap(jsonlPath) {
     const bgAgentIdRe = /agentId: ([a-zA-Z0-9_@-]+)/;
     const tmToolIdRe = /"tool_use_id":"([^"]+)"/;
     const tmAgentIdRe = /agent_id: ([a-zA-Z0-9_@-]+)/;
+    const nameByToolUseId = {};
     for (const line of content.split('\n')) {
       if (line.includes('"agent_progress"')) {
         const agentMatch = re.exec(line);
@@ -562,8 +568,23 @@ function buildAgentProgressMap(jsonlPath) {
         if (toolIdMatch && agentMatch && !map[toolIdMatch[1]]) {
           map[toolIdMatch[1]] = { agentId: agentMatch[1], prompt: null };
         }
+      } else if (line.includes('"assistant"') && line.includes('"tool_use"') && line.includes('"Agent"')) {
+        try {
+          const obj = JSON.parse(line);
+          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;
+              }
+            }
+          }
+        } catch (_) {}
       }
     }
+    for (const [key, entry] of Object.entries(map)) {
+      if (nameByToolUseId[key]) entry.name = nameByToolUseId[key];
+    }
   } catch (_) {}
   return map;
 }

package/package.json

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

package/public/app.js

@@ -1254,17 +1254,26 @@ function savePinnedSessions() {
   localStorage.setItem('sticky-sessions', JSON.stringify([...stickySessionIds]));
 }
 
-// unpinned → pinned → sticky → unpinned
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function toggleSessionPin(sessionId) {
+  if (pinnedSessionIds.has(sessionId)) {
+    pinnedSessionIds.delete(sessionId);
+    stickySessionIds.delete(sessionId);
+  } else {
+    pinnedSessionIds.add(sessionId);
+  }
+  savePinnedSessions();
+  renderSessions();
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function toggleSessionSticky(sessionId) {
   if (stickySessionIds.has(sessionId)) {
     stickySessionIds.delete(sessionId);
     pinnedSessionIds.delete(sessionId);
-  } else if (pinnedSessionIds.has(sessionId)) {
-    pinnedSessionIds.delete(sessionId);
-    stickySessionIds.add(sessionId);
   } else {
     pinnedSessionIds.add(sessionId);
+    stickySessionIds.add(sessionId);
   }
   savePinnedSessions();
   renderSessions();
@@ -1653,6 +1662,13 @@ function makeExpandToggle(_truncatedHtml, fullHtml, opts = {}) {
 }
 
 function autoSizeModal(modal, body) {
+  modal.style.maxWidth = '';
+  modal.classList.remove('has-mermaid');
+  const hasMermaid = body.querySelector('pre.mermaid') !== null;
+  if (hasMermaid) {
+    modal.classList.add('has-mermaid');
+    return;
+  }
   const hasTable = body.querySelector('table') !== null;
   const hasPre = body.querySelector('pre') !== null;
   const desired = hasTable ? 1100 : body.textContent.length > 2000 || hasPre ? 960 : 860;
@@ -1745,8 +1761,9 @@ function renderAgentFooter() {
   // or started >30s after previous stopped (legitimate re-spawn). Filter the rest.
   const byType = {};
   for (const a of agents) {
-    if (!byType[a.type]) byType[a.type] = [];
-    byType[a.type].push(a);
+    const groupKey = a.agentName || a.type;
+    if (!byType[groupKey]) byType[groupKey] = [];
+    byType[groupKey].push(a);
   }
   const filtered = [];
   for (const group of Object.values(byType)) {
@@ -1820,10 +1837,15 @@ function renderAgentFooter() {
         const colonIdx = rawType.indexOf(':');
         const typeNs = colonIdx > 0 ? rawType.substring(0, colonIdx + 1) : '';
         const typeName = colonIdx > 0 ? rawType.substring(colonIdx + 1) : rawType;
+        const agentNameVal = a.agentName || null;
+        const nameColor = agentNameVal ? getOwnerColor(agentNameVal) : null;
+        const nameBadgeHtml = nameColor
+          ? `<span class="task-owner-badge task-owner-badge--compact" style="background:${nameColor.bg};color:${nameColor.color}">${escapeHtml(agentNameVal)}</span>`
+          : '';
         const agentColor = resolveNamedColor(a.color);
         const colorStyle = agentColor ? ` style="border-left:3px solid ${agentColor.color}"` : '';
         return `<div class="agent-card"${colorStyle} onclick="showAgentModal('${a.agentId}')">
-          <div class="agent-type-row">${typeNs ? `<span class="agent-type-ns">${escapeHtml(typeNs)}</span>` : ''}<span class="agent-type-name">${escapeHtml(typeName)}</span></div>
+          <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>
           ${msgHtml}
         </div>`;
@@ -1923,13 +1945,21 @@ function showAgentModal(agentId) {
   const elapsed = stopped && started ? stopped.getTime() - started.getTime() : started ? now - started.getTime() : 0;
 
   const statusDot = `<span class="agent-dot ${agent.status}" style="display:inline-block;vertical-align:middle;margin-right:6px;"></span>`;
-  title.innerHTML = `${statusDot} ${escapeHtml(agent.type || 'unknown')}`;
+  const modalNameLabel = agent.agentName ? ` · ${escapeHtml(agent.agentName)}` : '';
+  title.innerHTML = `${statusDot} ${escapeHtml(agent.type || 'unknown')}${modalNameLabel}`;
 
   const rows = [
     ['Status', agent.status],
     ['Agent ID', `<code style="font-size:12px;color:var(--text-tertiary)">${escapeHtml(agent.agentId)}</code>`],
     ['Duration', formatDuration(elapsed)],
   ];
+  if (agent.agentName) {
+    const ownerColor = getOwnerColor(agent.agentName);
+    rows.push([
+      'Owner',
+      `<span class="task-owner-badge" style="background:${ownerColor.bg};color:${ownerColor.color}">${escapeHtml(agent.agentName)}</span>`,
+    ]);
+  }
   if (agent.model)
     rows.push(['Model', `<code style="font-size:12px;color:var(--text-tertiary)">${escapeHtml(agent.model)}</code>`]);
   if (started) rows.push(['Started', started.toLocaleTimeString()]);
@@ -2167,7 +2197,7 @@ function renderSessions() {
 
     const pinState = getSessionPinState(session.id);
     const pinClass = pinState === 'sticky' ? ' sticky' : pinState === 'pinned' ? ' pinned' : '';
-    const pinTitle = pinState === 'sticky' ? 'Unpin' : pinState === 'pinned' ? 'Sticky pin' : 'Pin';
+    const pinTitle = pinState === 'pinned' || pinState === 'sticky' ? 'Unpin' : 'Pin';
     const showCtx = !!session.contextStatus;
     return `
           <button onclick="fetchTasks('${session.id}')" data-session-id="${session.id}" class="session-item ${isActive ? 'active' : ''} ${session.hasWaitingForUser ? 'permission-pending' : ''} ${!session.hasRecentLog && !session.inProgress && !session.hasWaitingForUser ? 'stale' : ''} ${showCtx ? 'has-context' : ''}" title="${tooltip}">
@@ -4243,6 +4273,33 @@ function renderMarkdown(text) {
   return `<pre style="white-space:pre-wrap;margin:0;">${escapeHtml(text)}</pre>`;
 }
 
+function isLightTheme() {
+  const saved = localStorage.getItem('theme');
+  return (
+    document.body.classList.contains('light') || (!saved && window.matchMedia('(prefers-color-scheme: light)').matches)
+  );
+}
+
+function getMermaidTheme() {
+  return isLightTheme() ? 'default' : 'dark';
+}
+
+function initMermaidBlocks(container) {
+  if (typeof mermaid === 'undefined') return;
+  const blocks = (container || document).querySelectorAll('pre.mermaid:not([data-processed])');
+  if (blocks.length) mermaid.run({ nodes: [...blocks] });
+}
+
+function reinitMermaidTheme() {
+  if (typeof mermaid === 'undefined') return;
+  mermaid.initialize({ startOnLoad: false, theme: getMermaidTheme() });
+  document.querySelectorAll('pre.mermaid[data-processed]').forEach((el) => {
+    el.removeAttribute('data-processed');
+    el.innerHTML = escapeHtml(el.getAttribute('data-original') || '');
+  });
+  initMermaidBlocks();
+}
+
 const _agentTabTexts = {};
 
 function renderAgentTabs(promptHtml, responseHtml, promptText, responseText) {
@@ -4506,22 +4563,21 @@ function toggleTheme() {
   updateThemeIcon();
   updateThemeColor(!isCurrentlyLight);
   syncHljsTheme();
+  reinitMermaidTheme();
 }
 
 function syncHljsTheme() {
-  const isLight = document.body.classList.contains('light');
-  const dark = document.getElementById('hljs-theme-dark');
-  const light = document.getElementById('hljs-theme-light');
-  if (dark) dark.disabled = isLight;
-  if (light) light.disabled = !isLight;
+  const light = isLightTheme();
+  const dark$ = document.getElementById('hljs-theme-dark');
+  const light$ = document.getElementById('hljs-theme-light');
+  if (dark$) dark$.disabled = light;
+  if (light$) light$.disabled = !light;
 }
 
 function updateThemeIcon() {
-  const saved = localStorage.getItem('theme');
-  const isLight =
-    document.body.classList.contains('light') || (!saved && window.matchMedia('(prefers-color-scheme: light)').matches);
-  document.getElementById('theme-icon-dark').style.display = isLight ? 'none' : 'block';
-  document.getElementById('theme-icon-light').style.display = isLight ? 'block' : 'none';
+  const light = isLightTheme();
+  document.getElementById('theme-icon-dark').style.display = light ? 'none' : 'block';
+  document.getElementById('theme-icon-light').style.display = light ? 'block' : 'none';
 }
 
 function loadTheme() {
@@ -4695,8 +4751,20 @@ async function showSessionInfoModal(sessionId) {
   showInfoModal(session, teamConfig, tasks, planContent);
 }
 
+let _infoModalSessionId = null;
 let _pendingPlanContent = null;
 
+function updateStickyBtnState() {
+  const stickyBtn = document.getElementById('session-info-sticky-btn');
+  if (!stickyBtn || !_infoModalSessionId) return;
+  const isSticky = stickySessionIds.has(_infoModalSessionId);
+  stickyBtn.style.display = '';
+  stickyBtn.classList.toggle('active', isSticky);
+  stickyBtn.title = isSticky ? 'Remove sticky pin' : 'Sticky pin — always show at top';
+  const svg = stickyBtn.querySelector('svg');
+  if (svg) svg.setAttribute('fill', isSticky ? 'currentColor' : 'none');
+}
+
 function showInfoModal(session, teamConfig, tasks, planContent) {
   const modal = document.getElementById('team-modal');
   const titleEl = document.getElementById('team-modal-title');
@@ -4834,6 +4902,8 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
   }
 
   bodyEl.innerHTML = html;
+  _infoModalSessionId = session.id;
+  updateStickyBtnState();
   modal.classList.add('visible');
 
   const keyHandler = (e) => {
@@ -4996,6 +5066,9 @@ document.addEventListener('DOMContentLoaded', () => {
   if (typeof marked !== 'undefined' && typeof hljs !== 'undefined') {
     const renderer = new marked.Renderer();
     renderer.code = ({ text, lang }) => {
+      if (lang === 'mermaid') {
+        return `<pre class="mermaid" data-original="${escapeHtml(text)}">${escapeHtml(text)}</pre>`;
+      }
       let highlighted;
       if (lang && hljs.getLanguage(lang)) {
         highlighted = hljs.highlight(text, { language: lang }).value;
@@ -5006,6 +5079,20 @@ document.addEventListener('DOMContentLoaded', () => {
     };
     marked.use({ renderer });
   }
+
+  if (typeof mermaid !== 'undefined') {
+    mermaid.initialize({ startOnLoad: false, theme: getMermaidTheme() });
+    let mermaidPending = false;
+    const mo = new MutationObserver(() => {
+      if (mermaidPending) return;
+      mermaidPending = true;
+      queueMicrotask(() => {
+        mermaidPending = false;
+        initMermaidBlocks();
+      });
+    });
+    mo.observe(document.body, { childList: true, subtree: true });
+  }
 });
 
 loadSidebarState();

package/public/index.html

@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github-dark.min.css" id="hljs-theme-dark">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github.min.css" id="hljs-theme-light" disabled>
   <script defer src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
   <script defer src="/app.js"></script>
 </head>
 <body>
@@ -482,11 +483,16 @@
     <div class="modal" onclick="event.stopPropagation()">
       <div class="modal-header">
         <h3 id="team-modal-title" class="modal-title">Team</h3>
-        <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"/>
-          </svg>
-        </button>
+        <div style="display:flex;align-items:center;gap:4px;">
+          <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 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"/>
+            </svg>
+          </button>
+        </div>
       </div>
       <div id="team-modal-body" class="modal-body"></div>
       <div class="modal-footer">

package/public/style.css

@@ -2009,6 +2009,9 @@ body::before {
   fill: var(--warning);
   stroke: var(--warning);
 }
+#session-info-sticky-btn.active {
+  color: var(--warning);
+}
 .pinned-sessions-divider {
   height: 1px;
   margin: 4px 8px;
@@ -2418,6 +2421,13 @@ body::before {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.task-owner-badge--compact {
+  font-size: 9px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  margin-left: 6px;
+  vertical-align: middle;
+}
 .agent-status-row {
   display: flex;
   align-items: center;
@@ -3165,6 +3175,22 @@ select.form-input option:checked {
 
 /* #endregion */
 
+/* #region MERMAID */
+pre.mermaid {
+  text-align: center;
+  background: transparent;
+  overflow-x: auto;
+}
+pre.mermaid svg {
+  max-width: 100%;
+}
+.modal.has-mermaid {
+  width: 80vw;
+  max-width: 80vw;
+  max-height: 90vh;
+}
+/* #endregion */
+
 /* #region ANIMATIONS */
 @keyframes fadeSlideIn {
   from {

package/server.js

@@ -1015,12 +1015,15 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
     }
 
     const agentsNeedingPrompt = agents.filter(a => !a.prompt);
-    if (agentsNeedingPrompt.length && meta.jsonlPath) {
+    const agentsNeedingName = agents.filter(a => !a.agentName);
+    if ((agentsNeedingPrompt.length || agentsNeedingName.length) && meta.jsonlPath) {
       let byAgentId = {};
+      let nameByAgentId = {};
       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;
         }
       } catch (_) {}
       for (const agent of agentsNeedingPrompt) {
@@ -1028,6 +1031,9 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
           || (() => { try { return extractPromptFromTranscript(subagentJsonlPath(meta, agent.agentId)); } catch (_) { return null; } })();
         if (prompt) persistPrompt(agent, prompt);
       }
+      for (const agent of agentsNeedingName) {
+        if (nameByAgentId[agent.agentId]) agent.agentName = nameByAgentId[agent.agentId];
+      }
     }
 
     const agentsNeedingModel = agents.filter(a => !a.model);