claude-code-kanban 3.6.0 → 3.7.0

package/package.json

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

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);
 }
 
@@ -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;

package/public/style.css

@@ -1824,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;
@@ -2787,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;
 }
@@ -2802,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;
 }

package/server.js

@@ -119,18 +119,11 @@ function isAgentFresh(agent) {
   return (Date.now() - new Date(ts).getTime()) < AGENT_TTL_MS;
 }
 
-const sessionLogStatCache = new Map();
 function getSessionLogStat(meta) {
   if (!meta.jsonlPath) return { mtime: null, hasMessages: false };
   try {
     const st = statSync(meta.jsonlPath);
-    const cached = sessionLogStatCache.get(meta.jsonlPath);
-    if (cached && cached.mtime === st.mtimeMs) return cached;
-    const content = readFileSync(meta.jsonlPath, 'utf8');
-    const hasMessages = content.includes('"type":"assistant"');
-    const data = { mtime: st.mtimeMs, hasMessages };
-    sessionLogStatCache.set(meta.jsonlPath, data);
-    return data;
+    return { mtime: st.mtimeMs, hasMessages: st.size > 1000 };
   } catch (e) { return { mtime: null, hasMessages: false }; }
 }