claude-code-kanban 3.5.3 → 3.7.0

package/lib/parsers.js

@@ -714,6 +714,27 @@ function buildAgentProgressMap(jsonlPath) {
 
 function readCompactSummaries(jsonlPath) {
   const results = [];
+  // Inline format: newer Claude Code stores the summary directly in the parent
+  // session JSONL as a user message with isCompactSummary: true (no subagent file).
+  try {
+    const content = readFileSync(jsonlPath, 'utf8');
+    for (const line of content.split('\n')) {
+      if (!line.trim() || !line.includes('isCompactSummary')) continue;
+      try {
+        const obj = JSON.parse(line);
+        if (!obj.isCompactSummary) continue;
+        const c = obj.message?.content;
+        let text = typeof c === 'string'
+          ? c
+          : Array.isArray(c) ? c.filter(b => b?.type === 'text' && b.text).map(b => b.text).join('\n') : '';
+        if (!text) continue;
+        // Strip the "This session is being continued..." preamble if present.
+        text = text.replace(/^This session is being continued[^\n]*\n+(The summary below[^\n]*\n+)?/i, '').trim();
+        if (text) results.push({ timestamp: obj.timestamp, summary: text });
+      } catch (_) {}
+    }
+  } catch (_) {}
+  // Legacy format: summary lives in subagents/agent-acompact-*.jsonl.
   try {
     const subagentsDir = path.join(path.dirname(jsonlPath), path.basename(jsonlPath, '.jsonl'), 'subagents');
     const files = readdirSync(subagentsDir).filter(f => f.startsWith('agent-acompact-') && f.endsWith('.jsonl'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "3.5.3",
+  "version": "3.7.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "bin": {
@@ -51,6 +51,7 @@
     "public/**/*"
   ],
   "devDependencies": {
+    "@biomejs/biome": "2.4.14",
     "ajv": "^8.18.0",
     "ajv-formats": "^3.0.1",
     "husky": "^9.1.7"

package/public/app.js

@@ -59,7 +59,9 @@ function getUrlState() {
     project: params.get('project'),
     owner: params.get('owner'),
     search: params.get('search'),
-    messages: params.get('messages') === '1',
+    messages: params.has('messages')
+      ? params.get('messages') === '1'
+      : localStorage.getItem('message-panel-open') === 'true',
     projectView: params.get('projectView'),
   };
 }
@@ -653,6 +655,7 @@ async function refreshProjectAgents() {
 function toggleMessagePanel() {
   const panel = document.getElementById('message-panel');
   messagePanelOpen = !messagePanelOpen;
+  localStorage.setItem('message-panel-open', messagePanelOpen);
   panel.classList.toggle('visible', messagePanelOpen);
   document.getElementById('message-toggle')?.classList.toggle('active', messagePanelOpen);
   if (messagePanelOpen && currentSessionId) {
@@ -667,10 +670,13 @@ async function openSessionWithBookmarks(sessionId) {
   if (!messagePanelOpen) {
     const panel = document.getElementById('message-panel');
     messagePanelOpen = true;
+    localStorage.setItem('message-panel-open', 'true');
     panel.classList.add('visible');
     document.getElementById('message-toggle')?.classList.add('active');
   }
   await fetchTasks(sessionId);
+  if (currentMessages.length) renderMessages(currentMessages);
+  fetchMessages(sessionId);
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
@@ -1503,10 +1509,25 @@ function closeMsgDetailModal() {
   msgDetailFollowLatest = false;
 }
 
+function _setModalWidth(modal, slot, on, maxWidth, width) {
+  const mwKey = `prev${slot}MaxWidth`;
+  const wKey = `prev${slot}Width`;
+  if (on) {
+    modal.dataset[mwKey] = modal.style.maxWidth || '';
+    modal.dataset[wKey] = modal.style.width || '';
+    modal.style.maxWidth = maxWidth;
+    modal.style.width = width;
+  } else {
+    modal.style.maxWidth = modal.dataset[mwKey] || '';
+    modal.style.width = modal.dataset[wKey] || '';
+  }
+}
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function toggleModalFullscreen(modalId) {
   const modal = document.querySelector(`#${modalId} .modal`);
   const isFs = modal.classList.toggle('fullscreen');
+  _setModalWidth(modal, 'Fs', isFs, '', '');
   updateFullscreenBtnIcon(`${modalId}-fullscreen-btn`, isFs);
 }
 
@@ -1623,9 +1644,9 @@ function getToolDetail(tool, params, detail) {
     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>`;
+    if (parts.length) extra = ` <span style="color:var(--text-muted)">${parts.join(' ')}</span>`;
   }
-  return ` <span style="color:var(--text-muted)">${escapeHtml(detail)}</span>${extra}`;
+  return ` <span style="color:var(--text-secondary)">${escapeHtml(detail)}</span>${extra}`;
 }
 function renderTaskResult(toolResult) {
   if (!toolResult) return '';
@@ -1737,17 +1758,30 @@ function highlightBash(escaped) {
 }
 
 let _expandIdCounter = 0;
+function _toggleExpand(btn) {
+  const f = document.getElementById(btn.dataset.expandId);
+  const t = btn.parentElement.nextElementSibling;
+  const expand = f.style.display === 'none';
+  f.style.display = expand ? 'block' : 'none';
+  t.style.display = expand ? 'none' : 'block';
+  btn.textContent = expand ? 'Show less' : 'Show more';
+  const panel = btn.closest('.message-panel');
+  if (panel) panel.classList.toggle('msg-expanded-wide', expand);
+  const modal = btn.closest('.modal');
+  if (modal) _setModalWidth(modal, 'Expand', expand, '60vw', '60vw');
+}
 function makeExpandToggle(_truncatedHtml, fullHtml, opts = {}) {
   const id = `expand-${++_expandIdCounter}`;
   const fontSize = opts.fontSize || '0.8rem';
   const maxHeight = opts.maxHeight || '';
-  const btn = `<button onclick="var f=document.getElementById('${id}'),t=this.parentElement.nextElementSibling,expand=f.style.display==='none';f.style.display=expand?'block':'none';t.style.display=expand?'none':'block';this.textContent=expand?'Show less':'Show more'" style="background:none;border:none;color:var(--accent);cursor:pointer;font-size:${fontSize};text-decoration:underline;margin-left:6px">Show more</button>`;
+  const btn = `<button data-expand-id="${id}" onclick="_toggleExpand(this)" style="background:none;border:none;color:var(--accent);cursor:pointer;font-size:${fontSize};text-decoration:underline;margin-left:6px">Show more</button>`;
   const mhStyle = maxHeight ? `max-height:${maxHeight};` : '';
   const full = `<pre id="${id}" class="msg-detail-pre" style="${mhStyle}overflow:auto;display:none">${fullHtml}</pre>`;
   return { btn, full };
 }
 
 function autoSizeModal(modal, body) {
+  if (modal.classList.contains('fullscreen')) return;
   modal.style.maxWidth = '';
   modal.classList.remove('has-mermaid');
   const hasMermaid = body.querySelector('pre.mermaid') !== null;
@@ -2277,7 +2311,10 @@ function renderSessions() {
     const hasInProgress = session.inProgress > 0;
     const isLive =
       hasInProgress || (session.modifiedAt && Date.now() - new Date(session.modifiedAt).getTime() <= LIVE_INDICATOR_MS);
-    const sessionName = session.name || session.id;
+    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)
+      : rawName;
     const useGrouped = sessionFilter === 'active' && session.project;
     const primaryName = useGrouped ? sessionName : session.project ? session.project.split('/').pop() : sessionName;
     const secondaryName = useGrouped ? null : session.project ? sessionName : null;
@@ -2299,8 +2336,9 @@ function renderSessions() {
     const showCtx = !!session.contextStatus;
     const linkedDocsCount = getSessionPreviewPaths(session.id).length;
     const bookmarksCount = loadPins(session.id).length;
+    const tempClass = session.hasRecentLog || session.inProgress || session.hasWaitingForUser ? 'warm' : 'stale';
     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}">
+          <button onclick="fetchTasks('${session.id}')" data-session-id="${session.id}" class="session-item ${isActive ? 'active' : ''} ${session.hasWaitingForUser ? 'permission-pending' : ''} ${tempClass} ${showCtx ? 'has-context' : ''}" title="${tooltip}">
             <span class="session-pin-btn${pinClass}" onclick="event.stopPropagation();toggleSessionPin('${escapeHtml(session.id)}')" title="${pinTitle} session">${SESSION_PIN_SVG}</span>
             <div class="session-name">${escapeHtml(primaryName)}</div>
             ${secondaryName ? `<div class="session-secondary">${escapeHtml(secondaryName)}</div>` : ''}
@@ -3957,6 +3995,19 @@ function matchKey(e, ...keys) {
   return keys.some((k) => e.key === k || e.code === k);
 }
 
+const MODAL_ESC_PRIORITY = ['preview-modal', 'msg-detail-modal', 'plan-modal'];
+const MODAL_CLOSERS = {
+  'preview-modal': () => closePreviewModal(),
+  'msg-detail-modal': () => {
+    closeMsgDetailModal();
+    msgDetailFollowLatest = false;
+  },
+  'plan-modal': () => closePlanModal(),
+  'team-modal': () => closeTeamModal(),
+  'agent-modal': () => closeAgentModal(),
+  'help-modal': () => closeHelpModal(),
+};
+
 document.addEventListener('keydown', (e) => {
   if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') {
     return;
@@ -3969,9 +4020,13 @@ document.addEventListener('keydown', (e) => {
         closeScratchpad();
         return;
       }
-      // biome-ignore lint/suspicious/useIterableCallbackReturn: forEach side-effect
-      document.querySelectorAll('.modal-overlay.visible').forEach((m) => m.classList.remove('visible'));
-      msgDetailFollowLatest = false;
+      // Close only the topmost so a child Esc doesn't also dismiss its parent.
+      const visible = [...document.querySelectorAll('.modal-overlay.visible')];
+      const topId = MODAL_ESC_PRIORITY.find((id) => visible.some((m) => m.id === id)) || visible[visible.length - 1].id;
+      const close = MODAL_CLOSERS[topId];
+      if (close) close();
+      else document.getElementById(topId).classList.remove('visible');
+      e.stopImmediatePropagation();
     } else if (
       e.code === 'KeyM' &&
       e.shiftKey &&
@@ -4241,8 +4296,24 @@ function openPreviewModal(filePath, content) {
   currentPreviewPath = filePath;
   document.getElementById('preview-modal-title').textContent = filePath.split(/[\\/]/).pop();
   const { fm, body } = /\.(md|markdown)$/i.test(filePath) ? splitFrontmatter(content) : { fm: null, body: content };
-  document.getElementById('preview-modal-body').innerHTML =
-    (fm ? renderFrontmatterBlock(fm) : '') + renderMarkdown(body);
+  const bodyEl = document.getElementById('preview-modal-body');
+  bodyEl.innerHTML = (fm ? renderFrontmatterBlock(fm) : '') + renderMarkdown(body);
+  if (!bodyEl.dataset.relLinkBound) {
+    bodyEl.addEventListener('click', (e) => {
+      const a = e.target.closest('a[href]');
+      if (!a) return;
+      const href = a.getAttribute('href');
+      if (!href || href.startsWith('#')) return;
+      const isAbsoluteUrl = /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith('//');
+      const isAbsolutePath = href.startsWith('/') || /^[a-zA-Z]:[\\/]/.test(href);
+      if (isAbsoluteUrl) return;
+      if (!/\.(md|markdown)(#.*)?$/i.test(href)) return;
+      e.preventDefault();
+      const cleanHref = href.replace(/#.*$/, '');
+      openPreviewByPath(cleanHref, isAbsolutePath ? undefined : currentPreviewPath);
+    });
+    bodyEl.dataset.relLinkBound = '1';
+  }
   document.getElementById('preview-modal-meta').textContent = filePath;
   document.getElementById('preview-modal').classList.add('visible');
   updatePreviewLinkBtn();
@@ -4313,7 +4384,6 @@ function refreshInfoModalLinkedDocs() {
   bindLinkedDocsHandlers(node, _infoModalSessionId);
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function closePreviewModal() {
   resetModalFullscreen('preview-modal');
   currentPreviewPath = null;
@@ -4325,10 +4395,12 @@ function openPreviewInEditor() {
   postAndToast('/api/open-in-editor', { file: currentPreviewPath }, 'in editor');
 }
 
-async function openPreviewByPath(filePath) {
+async function openPreviewByPath(filePath, base) {
   if (!filePath) return;
   try {
-    const r = await fetch(`/api/preview?path=${encodeURIComponent(filePath)}`);
+    const qs = new URLSearchParams({ path: filePath });
+    if (base) qs.set('base', base);
+    const r = await fetch(`/api/preview?${qs}`);
     if (!r.ok) {
       showToast('Preview file unavailable');
       return;
@@ -4372,22 +4444,33 @@ async function handlePreviewOpenEvent(data) {
   openPreviewModal(filePath, content);
 }
 
+function getSessionBaseDir(sessionId) {
+  const s = sessions.find((x) => x.id === sessionId);
+  return s?.cwd || s?.project || '';
+}
+
 function renderLinkedDocsHtml(sessionId) {
   const paths = getSessionPreviewPaths(sessionId);
   if (!paths.length) return '';
+  const baseDir = getSessionBaseDir(sessionId);
   const items = paths
     .map((p, i) => {
       const name = p.split(/[\\/]/).pop();
-      return `<a href="#" class="linked-doc-link" data-idx="${i}" title="${escapeHtml(p)}" style="color:var(--accent-text);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;">${escapeHtml(name)}</a>`;
+      const rel = baseDir ? toRelativeIfUnder(p, baseDir) : null;
+      const pathSpan = rel ? `<span class="linked-doc-path" title="${escapeHtml(p)}">${escapeHtml(rel)}</span>` : '';
+      return `<li class="linked-doc-item">
+        <a href="#" class="linked-doc-link" data-idx="${i}" title="${escapeHtml(p)}">${escapeHtml(name)}</a>
+        ${pathSpan}
+      </li>`;
     })
-    .join(', ');
+    .join('');
   return `<div class="linked-docs-section" style="margin-bottom:16px;font-size:12px;">
     <div style="font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;display:flex;align-items:center;gap:6px;">
       ${linkSvg(12)}
       <span>Linked documents</span>
       <span style="background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;padding:0 6px;font-size:10px;color:var(--text-secondary);">${paths.length}</span>
     </div>
-    <div>${items}</div>
+    <ul class="linked-doc-list">${items}</ul>
   </div>`;
 }
 
@@ -4396,10 +4479,11 @@ function bindLinkedDocsHandlers(container, sessionId) {
   const links = container.querySelectorAll('.linked-doc-link');
   if (!links.length) return;
   const paths = getSessionPreviewPaths(sessionId);
+  const base = getSessionBaseDir(sessionId);
   for (const link of links) {
     link.addEventListener('click', (e) => {
       e.preventDefault();
-      openPreviewByPath(paths[+link.dataset.idx]);
+      openPreviewByPath(paths[+link.dataset.idx], base);
     });
   }
 }
@@ -4748,6 +4832,18 @@ function escapeHtml(text) {
   return div.innerHTML;
 }
 
+function toRelativeIfUnder(filePath, baseDir) {
+  if (!filePath || !baseDir) return null;
+  const fp = filePath.replace(/\\/g, '/').replace(/\/+$/, '');
+  const bd = baseDir.replace(/\\/g, '/').replace(/\/+$/, '');
+  const isWin = /^[a-zA-Z]:\//.test(fp) || /^[a-zA-Z]:\//.test(bd);
+  const a = isWin ? fp.toLowerCase() : fp;
+  const b = isWin ? bd.toLowerCase() : bd;
+  if (a === b) return '.';
+  if (!a.startsWith(`${b}/`)) return null;
+  return fp.slice(bd.length + 1);
+}
+
 function renderMarkdown(text) {
   if (typeof DOMPurify !== 'undefined' && typeof marked !== 'undefined') {
     return DOMPurify.sanitize(marked.parse(text));
@@ -5867,6 +5963,25 @@ document.addEventListener('keydown', (e) => {
   }
 });
 
+document.addEventListener('click', (e) => {
+  if (!window.__HUB__?.enabled) return;
+  const a = e.target.closest?.('a[href]');
+  if (!a) return;
+  const href = a.getAttribute('href');
+  if (!href) return;
+  let url;
+  try {
+    url = new URL(href, window.location.href);
+  } catch (_) {
+    return;
+  }
+  if (url.origin === window.location.origin) return;
+  if (url.protocol !== 'http:' && url.protocol !== 'https:') return;
+  e.preventDefault();
+  e.stopPropagation();
+  window.parent?.postMessage({ type: 'hub:openExternal', url: url.href }, '*');
+});
+
 window.hubNavigate = function hubNavigate(app, url) {
   if (!window.__HUB__?.enabled) return;
   window.parent?.postMessage({ type: 'hub:navigate', app, url }, '*');

package/public/style.css

@@ -549,14 +549,13 @@ body::before {
 
 .session-branch {
   font-size: 10px;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   margin-top: 2px;
   display: block;
   font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  opacity: 0.7;
 }
 
 .session-plan {
@@ -1825,6 +1824,9 @@ body::before {
 .message-panel.visible {
   display: flex;
 }
+.message-panel.msg-expanded-wide {
+  width: 60vw;
+}
 .message-panel-header {
   padding: 16px 20px;
   display: flex;
@@ -1877,7 +1879,7 @@ body::before {
   width: 16px;
   height: 16px;
   margin-top: 2px;
-  opacity: 0.6;
+  opacity: 0.9;
 }
 .msg-body {
   flex: 1;
@@ -2575,6 +2577,40 @@ body::before {
   color: var(--text-primary);
 }
 
+.linked-doc-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.linked-doc-item {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.linked-doc-link {
+  color: var(--accent-text);
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 3px;
+  flex-shrink: 0;
+}
+
+.linked-doc-path {
+  color: var(--text-muted);
+  font-size: 11px;
+  opacity: 0.7;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
 /* #endregion */
 
 /* #region PERMISSION_PENDING */
@@ -2754,8 +2790,8 @@ body.light .msg-assistant .msg-text {
 }
 
 .modal.fullscreen {
-  width: 90vw;
-  max-width: 90vw;
+  width: 80vw;
+  max-width: 80vw;
   height: 92vh;
   max-height: 92vh;
 }
@@ -2769,8 +2805,8 @@ body.light .msg-assistant .msg-text {
 }
 
 .modal.plan-modal.fullscreen {
-  width: 90vw;
-  max-width: 90vw;
+  width: 80vw;
+  max-width: 80vw;
   height: 92vh;
   max-height: 92vh;
 }
@@ -3678,7 +3714,39 @@ pre.mermaid svg {
 .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.6;
+  opacity: 0.85;
+}
+.session-item.stale:hover,
+.session-item.stale.active,
+.session-item.stale.kb-selected {
+  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 */

package/server.js

@@ -1475,15 +1475,26 @@ async function readMarkdownFile(absPath) {
   }
 }
 
-function resolvePreviewPath(filePath) {
+function resolvePreviewPath(filePath, base) {
   if (!filePath || typeof filePath !== 'string') return null;
-  return path.isAbsolute(filePath) ? filePath : path.resolve(filePath);
+  if (path.isAbsolute(filePath)) return filePath;
+  if (base && typeof base === 'string' && path.isAbsolute(base)) {
+    let baseDir = base;
+    try {
+      if (statSync(base).isFile()) baseDir = path.dirname(base);
+    } catch {
+      // base doesn't exist — fall back to dirname if it looks like a file
+      if (path.extname(base)) baseDir = path.dirname(base);
+    }
+    return path.resolve(baseDir, filePath);
+  }
+  return path.resolve(filePath);
 }
 
 app.post('/api/preview', async (req, res) => {
   try {
-    const { path: filePath, sessionId } = req.body || {};
-    const abs = resolvePreviewPath(filePath);
+    const { path: filePath, sessionId, base } = req.body || {};
+    const abs = resolvePreviewPath(filePath, base);
     if (!abs) return res.status(400).json({ error: 'path is required' });
     const content = await readMarkdownFile(abs);
     broadcast({ type: 'preview:open', path: abs, content, sessionId: sessionId || null });
@@ -1548,7 +1559,7 @@ app.post('/api/session/pin', async (req, res) => {
 
 app.get('/api/preview', async (req, res) => {
   try {
-    const abs = resolvePreviewPath(req.query.path);
+    const abs = resolvePreviewPath(req.query.path, req.query.base);
     if (!abs) return res.status(400).json({ error: 'path is required' });
     const content = await readMarkdownFile(abs);
     res.json({ path: abs, content });