claude-code-kanban 3.6.0 → 3.8.0

package/lib/parsers.js

@@ -552,14 +552,15 @@ function readRecentMessages(jsonlPath, limit = 10) {
       readSize *= 4;
     }
 
-    // Attach tool results to their corresponding tool_use messages
+    // Attach tool results to their corresponding tool_use messages.
+    // For perf, we never ship the full text in the messages payload — when
+    // truncated, the client lazy-fetches via /api/sessions/:id/tool-result/:toolUseId.
     for (const msg of messages) {
       if (msg.type === 'tool_use' && msg.toolUseId && toolResults.has(msg.toolUseId)) {
         const full = toolResults.get(msg.toolUseId);
         const truncated = full.length > TOOL_RESULT_MAX;
         msg.toolResult = truncated ? full.slice(0, TOOL_RESULT_MAX) + '\n... (truncated)' : full;
         msg.toolResultTruncated = truncated;
-        if (truncated) msg.toolResultFull = full;
       }
     }
 
@@ -578,6 +579,34 @@ function readRecentMessages(jsonlPath, limit = 10) {
   }
 }
 
+function readFullToolResult(jsonlPath, toolUseId) {
+  if (!toolUseId || !jsonlPath || !existsSync(jsonlPath)) return null;
+  try {
+    const content = readFileSync(jsonlPath, 'utf8');
+    const lines = content.split('\n');
+    for (const line of lines) {
+      if (!line || line.indexOf(toolUseId) === -1) continue;
+      try {
+        const obj = JSON.parse(line);
+        if (obj?.message?.content && Array.isArray(obj.message.content)) {
+          for (const block of obj.message.content) {
+            if (block.type === 'tool_result' && block.tool_use_id === toolUseId) {
+              if (typeof block.content === 'string') return block.content;
+              if (Array.isArray(block.content)) {
+                return block.content
+                  .filter((c) => c.type === 'text' && c.text)
+                  .map((c) => c.text)
+                  .join('\n');
+              }
+            }
+          }
+        }
+      } catch (_) {}
+    }
+  } catch (_) {}
+  return null;
+}
+
 function readMessagesPage(jsonlPath, limit = 10, beforeTimestamp = null) {
   const fetchLimit = limit + 1;
   const applyFilter = beforeTimestamp
@@ -850,6 +879,7 @@ module.exports = {
   readSessionInfoFromJsonl,
   readRecentMessages,
   readMessagesPage,
+  readFullToolResult,
   buildAgentProgressMap,
   buildSessionDigest,
   readCompactSummaries,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "3.6.0",
+  "version": "3.8.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'),
   };
 }
@@ -494,6 +496,7 @@ async function fetchTasks(sessionId) {
     if (revealedStorageSessionId && sessionId !== revealedStorageSessionId) {
       revealedStorageSessionId = null;
     }
+    if (currentSessionId && currentSessionId !== sessionId) deferredPinPlacement.delete(currentSessionId);
     currentSessionId = sessionId;
     currentPins = loadPins(sessionId);
     ownerFilter = '';
@@ -653,6 +656,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 +671,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
@@ -1200,6 +1207,9 @@ function togglePin(msgIndex) {
       text: m.text || null,
       fullText: m.fullText || null,
       tool: m.tool || null,
+      toolUseId: m.toolUseId || null,
+      toolResult: m.toolResult || null,
+      toolResultTruncated: m.toolResultTruncated || false,
       detail: m.detail || null,
       fullDetail: m.fullDetail || null,
       description: m.description || null,
@@ -1288,6 +1298,8 @@ function togglePinnedCollapse() {
 //#region PINNING
 let pinnedSessionIds = new Set();
 let stickySessionIds = new Set();
+// Pinning the currently-selected session keeps it in place until deselected (less UI movement).
+const deferredPinPlacement = new Set();
 
 function loadPinnedSessions() {
   try {
@@ -1310,35 +1322,45 @@ function savePinnedSessions() {
   localStorage.setItem('sticky-sessions', JSON.stringify([...stickySessionIds]));
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function toggleSessionPin(sessionId) {
   if (pinnedSessionIds.has(sessionId)) {
     pinnedSessionIds.delete(sessionId);
     stickySessionIds.delete(sessionId);
+    deferredPinPlacement.delete(sessionId);
   } else {
     pinnedSessionIds.add(sessionId);
+    if (sessionId === currentSessionId) deferredPinPlacement.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);
+    deferredPinPlacement.delete(sessionId);
   } else {
     pinnedSessionIds.add(sessionId);
     stickySessionIds.add(sessionId);
+    if (sessionId === currentSessionId) deferredPinPlacement.add(sessionId);
   }
   savePinnedSessions();
   renderSessions();
 }
 
+function isPlacedPinned(id) {
+  return pinnedSessionIds.has(id) && !deferredPinPlacement.has(id);
+}
+function isPlacedSticky(id) {
+  return stickySessionIds.has(id) && !deferredPinPlacement.has(id);
+}
+
 function handleSessionPinEvent({ id, state }) {
   if (!id) return;
   pinnedSessionIds.delete(id);
   stickySessionIds.delete(id);
+  deferredPinPlacement.delete(id);
   if (state === 'pinned') pinnedSessionIds.add(id);
   if (state === 'sticky') {
     pinnedSessionIds.add(id);
@@ -1366,11 +1388,16 @@ function _renderPinToDetail(pin) {
     document.getElementById('msg-detail-title').textContent = pin.tool || 'Tool';
     const fullText = pin.fullDetail || pin.detail || '';
     const pinParamsHtml = renderToolParamsHtml(pin.params);
-    const pinResultHtml = renderToolResultHtml(pin.toolResult, pin.toolResultTruncated, pin.toolResultFull);
+    const pinResultHtml = renderToolResultHtml(
+      pin.toolResult,
+      pin.toolResultTruncated,
+      pin.toolResultFull,
+      pin.toolUseId,
+    );
     const pinDetailEscaped = escapeHtml(fullText);
     const pinDetailRendered = pin.tool === 'Bash' ? highlightBash(pinDetailEscaped) : pinDetailEscaped;
     body.innerHTML =
-      (fullText ? `<pre class="msg-detail-pre">${pinDetailRendered}</pre>` : '<em>No details</em>') +
+      (fullText ? `<pre class="${TINTED_PRE_CLASS}">${pinDetailRendered}</pre>` : '<em>No details</em>') +
       pinParamsHtml +
       pinResultHtml;
   } else if (pin.type === 'agent') {
@@ -1431,7 +1458,7 @@ function showMsgDetail(idx) {
     const taskResultHtml = TASK_TOOLS.has(m.tool) ? renderTaskResult(m.toolResult) : '';
     const toolResultHtml = hideResult
       ? ''
-      : renderToolResultHtml(m.toolResult, m.toolResultTruncated, m.toolResultFull);
+      : renderToolResultHtml(m.toolResult, m.toolResultTruncated, m.toolResultFull, m.toolUseId);
     const hasAgentTabs = m.tool === 'Agent' && m.agentId && (m.agentLastMessage || m.agentPrompt);
     let mainHtml;
     if (sendProto) {
@@ -1445,7 +1472,7 @@ function showMsgDetail(idx) {
     } else if (fullText) {
       const detailEscaped = escapeHtml(fullText);
       const detailRendered = m.tool === 'Bash' ? highlightBash(detailEscaped) : detailEscaped;
-      mainHtml = `${descHtml}<pre class="msg-detail-pre">${detailRendered}</pre>`;
+      mainHtml = `${descHtml}<pre class="${TINTED_PRE_CLASS}">${detailRendered}</pre>`;
     } else {
       mainHtml = TASK_TOOLS.has(m.tool) ? '' : '<em>No details</em>';
     }
@@ -1503,10 +1530,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);
 }
 
@@ -1677,11 +1719,11 @@ function renderToolParamsHtml(params) {
     html += `<div style="margin-top:8px;padding-top:6px;border-top:1px solid var(--border)">`;
     if (params.old_string) {
       html += `<div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:2px">old_string</div>
-            <pre class="msg-detail-pre" style="max-height:200px;overflow:auto;border-left:3px solid #e55;padding-left:8px">${escapeHtml(params.old_string)}</pre>`;
+            <pre class="${TINTED_PRE_CLASS}" style="max-height:200px;overflow:auto;border-left:3px solid #e55;padding-left:8px">${escapeHtml(params.old_string)}</pre>`;
     }
     if (params.new_string) {
       html += `<div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:2px;margin-top:6px">new_string</div>
-            <pre class="msg-detail-pre" style="max-height:200px;overflow:auto;border-left:3px solid #5b5;padding-left:8px">${escapeHtml(params.new_string)}</pre>`;
+            <pre class="${TINTED_PRE_CLASS}" style="max-height:200px;overflow:auto;border-left:3px solid #5b5;padding-left:8px">${escapeHtml(params.new_string)}</pre>`;
     }
     html += `</div>`;
   }
@@ -1696,13 +1738,14 @@ function renderToolParamsHtml(params) {
       const toggle = makeExpandToggle(escapeHtml(truncContent), escapeHtml(params.content), {
         fontSize: '0.75rem',
         maxHeight: '500px',
+        tinted: true,
       });
       writeMoreBtn = ` ${toggle.btn}`;
       fullBlock = toggle.full;
     }
     html += `<div style="margin-top:8px;padding-top:6px;border-top:1px solid var(--border)">
           <div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:2px">content${writeMoreBtn}</div>
-          <pre class="msg-detail-pre" style="max-height:300px;overflow:auto">${escapeHtml(truncContent)}</pre>
+          <pre class="${TINTED_PRE_CLASS}" style="max-height:300px;overflow:auto">${escapeHtml(truncContent)}</pre>
           ${fullBlock}
         </div>`;
   }
@@ -1736,18 +1779,36 @@ function highlightBash(escaped) {
     .replace(/((?:^|\s)(?:&amp;&amp;|\|\||[|;])(?:\s|$))/g, '<span style="color:#d4d4d4;font-weight:bold">$1</span>');
 }
 
+const TINTED_PRE_CLASS = 'msg-detail-pre msg-detail-pre-tinted';
 let _expandIdCounter = 0;
+function _applyExpandToggle(btn, fullEl) {
+  const truncEl = btn.parentElement.nextElementSibling;
+  const expand = fullEl.style.display === 'none';
+  fullEl.style.display = expand ? 'block' : 'none';
+  if (truncEl) truncEl.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 _toggleExpand(btn) {
+  const f = document.getElementById(btn.dataset.expandId);
+  if (f) _applyExpandToggle(btn, f);
+}
 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 cls = opts.tinted ? TINTED_PRE_CLASS : 'msg-detail-pre';
+  const btn = `<button data-expand-id="${id}" onclick="_toggleExpand(this)" class="expand-toggle-btn" style="font-size:${fontSize}">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>`;
+  const full = `<pre id="${id}" class="${cls}" 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;
@@ -1762,7 +1823,7 @@ function autoSizeModal(modal, body) {
   if (desired > current) modal.style.maxWidth = `${desired}px`;
 }
 
-function renderToolResultHtml(toolResult, isTruncated, fullResult) {
+function renderToolResultHtml(toolResult, isTruncated, fullResult, toolUseId) {
   if (!toolResult) return '';
   const stripped = stripLineNumbers(toolResult);
   const escaped = escapeHtml(stripped);
@@ -1772,6 +1833,10 @@ function renderToolResultHtml(toolResult, isTruncated, fullResult) {
     const toggle = makeExpandToggle(escaped, escapeHtml(stripLineNumbers(fullResult)));
     truncLabel = toggle.btn;
     fullBlock = toggle.full;
+  } else if (isTruncated && toolUseId) {
+    const id = `expand-${++_expandIdCounter}`;
+    truncLabel = `<button data-expand-id="${id}" data-tool-use-id="${escapeHtml(toolUseId)}" onclick="_toggleToolResultExpand(this)" class="expand-toggle-btn" style="font-size:0.8rem">Show more</button>`;
+    fullBlock = `<pre id="${id}" class="msg-detail-pre" style="overflow:auto;display:none"></pre>`;
   } else if (isTruncated) {
     truncLabel = '<span style="color:var(--text-muted);font-size:0.8rem;margin-left:6px">(truncated)</span>';
   }
@@ -1782,12 +1847,42 @@ function renderToolResultHtml(toolResult, isTruncated, fullResult) {
       </div>`;
 }
 
+async function _toggleToolResultExpand(btn) {
+  const f = document.getElementById(btn.dataset.expandId);
+  if (!f) return;
+  if (!btn.dataset.loaded) {
+    if (!currentSessionId || !btn.dataset.toolUseId) return;
+    btn.disabled = true;
+    btn.textContent = 'Loading…';
+    try {
+      const r = await fetch(
+        `/api/sessions/${encodeURIComponent(currentSessionId)}/tool-result/${encodeURIComponent(btn.dataset.toolUseId)}`,
+      );
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      const { content } = await r.json();
+      f.textContent = stripLineNumbers(content);
+      btn.dataset.loaded = '1';
+    } catch (_e) {
+      btn.textContent = 'Show more';
+      btn.disabled = false;
+      showToast('Failed to load full output');
+      return;
+    }
+    btn.disabled = false;
+  }
+  _applyExpandToggle(btn, f);
+}
+
 function buildToolContent(m) {
   let content = m.fullDetail || m.detail || '';
   if (m.toolResult) content += `\n\n--- Output ---\n\n${m.toolResultFull || m.toolResult}`;
   return content;
 }
 
+function getMessageDisplayContent(m) {
+  return m.type === 'tool_use' ? buildToolContent(m) : m.compactSummary || stripAnsi(m.fullText || m.text);
+}
+
 function getDetailMsg() {
   if (currentMsgDetailIdx != null) return currentMessages[currentMsgDetailIdx];
   if (currentPinDetailId) return currentPins.find((p) => p.id === currentPinDetailId);
@@ -1798,8 +1893,7 @@ function getDetailMsg() {
 async function copyMsgToClipboard(btn) {
   const m = getDetailMsg();
   if (!m) return;
-  const content = m.type === 'tool_use' ? buildToolContent(m) : stripAnsi(m.fullText || m.text);
-  copyWithFeedback(content, btn);
+  copyWithFeedback(getMessageDisplayContent(m), btn);
 }
 
 async function postAndToast(url, body, label) {
@@ -1819,9 +1913,8 @@ async function postAndToast(url, body, label) {
 async function openMsgInEditor() {
   const m = getDetailMsg();
   if (!m) return;
-  const content = m.type === 'tool_use' ? buildToolContent(m) : stripAnsi(m.fullText || m.text);
-  const title = m.type === 'tool_use' ? m.tool : m.type;
-  postAndToast('/api/open-in-editor', { content, title }, 'in editor');
+  const title = m.type === 'tool_use' ? m.tool : m.compactSummary ? 'compact-summary' : m.type;
+  postAndToast('/api/open-in-editor', { content: getMessageDisplayContent(m), title }, 'in editor');
 }
 
 function formatDuration(ms) {
@@ -2298,7 +2391,8 @@ function renderSessions() {
 
     const pinState = getSessionPinState(session.id);
     const pinClass = pinState === 'sticky' ? ' sticky' : pinState === 'pinned' ? ' pinned' : '';
-    const pinTitle = pinState === 'pinned' || pinState === 'sticky' ? 'Unpin' : 'Pin';
+    const pinTitle =
+      pinState === 'pinned' || pinState === 'sticky' ? 'Unpin session (.)' : 'Pin session (. · > sticky)';
     const showCtx = !!session.contextStatus;
     const linkedDocsCount = getSessionPreviewPaths(session.id).length;
     const bookmarksCount = loadPins(session.id).length;
@@ -2349,12 +2443,10 @@ function renderSessions() {
     const groupPinned = localStorage.getItem('groupPinnedSessions') !== 'false';
     const renderGroupSessions = (sessions, pinKey) => {
       if (!groupPinned || pinnedSessionIds.size === 0) return sessions.map(renderSessionCard).join('');
-      const gPinned = sessions.filter((s) => pinnedSessionIds.has(s.id) && !stickySessionIds.has(s.id));
+      const gPinned = sessions.filter((s) => isPlacedPinned(s.id) && !isPlacedSticky(s.id));
       if (gPinned.length === 0) return sessions.map(renderSessionCard).join('');
       const gIdlePinned = gPinned.filter((s) => !isSessionActive(s));
-      const gUnpinned = sessions.filter(
-        (s) => !pinnedSessionIds.has(s.id) || isSessionActive(s) || stickySessionIds.has(s.id),
-      );
+      const gUnpinned = sessions.filter((s) => !isPlacedPinned(s.id) || isSessionActive(s) || isPlacedSticky(s.id));
       const pinCollapsed = collapsedProjectGroups.has(pinKey);
       if (gIdlePinned.length === 0 && !pinCollapsed) return gUnpinned.map(renderSessionCard).join('');
       return (
@@ -2381,8 +2473,7 @@ function renderSessions() {
       );
     };
     if (!groupPinned && (pinnedSessionIds.size > 0 || stickySessionIds.size > 0)) {
-      const pinWeight = (s) =>
-        stickySessionIds.has(s.id) ? 2 : pinnedSessionIds.has(s.id) && !isSessionActive(s) ? 1 : 0;
+      const pinWeight = (s) => (isPlacedSticky(s.id) ? 2 : isPlacedPinned(s.id) && !isSessionActive(s) ? 1 : 0);
       const pinSort = (a, b) => pinWeight(b) - pinWeight(a);
       for (const [, arr] of groups) arr.sort(pinSort);
       ungrouped.sort(pinSort);
@@ -2458,12 +2549,10 @@ function renderSessions() {
 
     sessionsList.innerHTML = html;
   } else {
-    const sticky = filteredSessions.filter((s) => stickySessionIds.has(s.id));
-    const idlePinned = filteredSessions.filter((s) => pinnedSessionIds.has(s.id) && !isSessionActive(s));
+    const sticky = filteredSessions.filter((s) => isPlacedSticky(s.id));
+    const idlePinned = filteredSessions.filter((s) => isPlacedPinned(s.id) && !isSessionActive(s));
     const rest = filteredSessions.filter(
-      (s) =>
-        (!pinnedSessionIds.has(s.id) && !stickySessionIds.has(s.id)) ||
-        (pinnedSessionIds.has(s.id) && isSessionActive(s)),
+      (s) => (!isPlacedPinned(s.id) && !isPlacedSticky(s.id)) || (isPlacedPinned(s.id) && isSessionActive(s)),
     );
     let html = '';
     if (sticky.length > 0) {
@@ -2826,17 +2915,26 @@ function getGroupSessionsContainer(header) {
 
 function getNavigableItems() {
   const items = [];
+  const walkGroupContainer = (container) => {
+    if (!container) return;
+    for (const child of container.children) {
+      if (child.classList.contains('pinned-sub-section')) {
+        const subHeader = child.querySelector('.pinned-sub-header');
+        if (subHeader) items.push(subHeader);
+        const subItems = child.querySelector('.pinned-sub-items');
+        if (subItems && !subItems.classList.contains('collapsed')) {
+          for (const s of subItems.querySelectorAll(':scope > .session-item')) items.push(s);
+        }
+      } else if (child.classList.contains('session-item')) {
+        items.push(child);
+      }
+    }
+  };
   for (const el of sessionsList.children) {
     if (el.classList.contains('project-group-header')) {
       items.push(el);
       if (!collapsedProjectGroups.has(el.dataset.groupPath)) {
-        const container = getGroupSessionsContainer(el);
-        if (container) {
-          for (const s of container.querySelectorAll('.session-item')) {
-            if (s.closest('.pinned-sub-items.collapsed')) continue;
-            items.push(s);
-          }
-        }
+        walkGroupContainer(getGroupSessionsContainer(el));
       }
     } else if (el.classList.contains('session-item')) {
       items.push(el);
@@ -2897,49 +2995,57 @@ function setGroupCollapsed(header, collapsed) {
   } catch (_) {}
 }
 
+function isGroupHeader(el) {
+  return el.classList.contains('project-group-header') || el.classList.contains('pinned-sub-header');
+}
+
+function findParentHeader(el) {
+  const subContainer = el.closest('.pinned-sub-items');
+  if (subContainer?.previousElementSibling?.classList.contains('pinned-sub-header')) {
+    return subContainer.previousElementSibling;
+  }
+  const container = el.closest('.project-group-sessions');
+  if (!container) return null;
+  let header = container.previousElementSibling;
+  while (header && !header.classList.contains('project-group-header')) header = header.previousElementSibling;
+  return header;
+}
+
 function handleSidebarHorizontal(direction) {
   const items = getNavigableItems();
   if (selectedSessionIdx < 0 || selectedSessionIdx >= items.length) return;
   const el = items[selectedSessionIdx];
-  const isHeader = el.classList.contains('project-group-header');
   const collapse = direction < 0;
 
-  if (isHeader) {
-    const groupPath = el.dataset.groupPath;
-    const isCollapsed = collapsedProjectGroups.has(groupPath);
+  if (isGroupHeader(el)) {
+    const isCollapsed = collapsedProjectGroups.has(el.dataset.groupPath);
     if (collapse) {
       if (!isCollapsed) setGroupCollapsed(el, true);
+    } else if (isCollapsed) {
+      setGroupCollapsed(el, false);
     } else {
-      if (isCollapsed) {
-        setGroupCollapsed(el, false);
-      } else {
-        navigateSession(1);
-      }
-    }
-  } else {
-    if (collapse) {
-      const container = el.closest('.project-group-sessions');
-      if (container) {
-        let header = container.previousElementSibling;
-        while (header && !header.classList.contains('project-group-header')) header = header.previousElementSibling;
-        if (header) {
-          const headerIdx = items.indexOf(header);
-          if (headerIdx >= 0) selectSessionByIndex(headerIdx, items);
-        }
-      }
-    } else {
-      activateSelectedSession(items);
+      navigateSession(1);
     }
+    return;
   }
+
+  if (!collapse) {
+    activateSelectedSession(items);
+    return;
+  }
+
+  const header = findParentHeader(el);
+  if (!header) return;
+  const headerIdx = items.indexOf(header);
+  if (headerIdx >= 0) selectSessionByIndex(headerIdx, items);
 }
 
 function activateSelectedSession(items) {
   items = items || getNavigableItems();
   if (selectedSessionIdx < 0 || selectedSessionIdx >= items.length) return;
   const el = items[selectedSessionIdx];
-  if (el.classList.contains('project-group-header')) {
-    const groupPath = el.dataset.groupPath;
-    setGroupCollapsed(el, !collapsedProjectGroups.has(groupPath));
+  if (isGroupHeader(el)) {
+    setGroupCollapsed(el, !collapsedProjectGroups.has(el.dataset.groupPath));
   } else {
     el.click();
   }
@@ -4048,6 +4154,14 @@ document.addEventListener('keydown', (e) => {
     showStorageManager();
     return;
   }
+  if (e.key === '.' || e.key === '>') {
+    const sid = sessionsList.querySelector('.kb-selected')?.dataset.sessionId || currentSessionId;
+    if (sid) {
+      e.preventDefault();
+      (e.shiftKey ? toggleSessionSticky : toggleSessionPin)(sid);
+      return;
+    }
+  }
 
   // Tab toggles focus zone
   if (e.key === 'Tab') {
@@ -4179,6 +4293,18 @@ document.addEventListener('keydown', (e) => {
     hubNavigate('memory', mSession?.project ? `?project=${encodeURIComponent(mSession.project)}` : undefined);
     return;
   }
+  if (e.code === 'KeyC' && e.shiftKey) {
+    e.preventDefault();
+    if (!contextSid) {
+      showToast('No session selected');
+      return;
+    }
+    navigator.clipboard
+      .writeText(contextSid)
+      .then(() => showToast(`Copied session id: ${contextSid.slice(0, 8)}`, 'success'))
+      .catch(() => showToast('Failed to copy session id'));
+    return;
+  }
   if (matchKey(e, 'KeyR')) {
     e.preventDefault();
     if (_manualRefreshing) return;
@@ -5952,4 +6078,24 @@ window.hubNavigate = function hubNavigate(app, url) {
   if (!window.__HUB__?.enabled) return;
   window.parent?.postMessage({ type: 'hub:navigate', app, url }, '*');
 };
+
+(function initHubTheme() {
+  const getTheme = () => (document.body.classList.contains('light') ? 'light' : 'dark');
+  const hubOrigin = () => (window.__HUB__?.url ? new URL(window.__HUB__.url).origin : null);
+  let lastTheme = getTheme();
+  window.addEventListener('message', (e) => {
+    if (e.source !== window.parent || e.origin !== hubOrigin()) return;
+    if (e.data?.type !== 'hub:theme') return;
+    if (getTheme() === e.data.theme) return;
+    window.toggleTheme();
+    lastTheme = getTheme();
+  });
+  new MutationObserver(() => {
+    const t = getTheme();
+    if (t === lastTheme) return;
+    lastTheme = t;
+    const origin = hubOrigin();
+    if (origin) window.parent.postMessage({ type: 'hub:theme', theme: t }, origin);
+  }).observe(document.body, { attributes: true, attributeFilter: ['class'] });
+})();
 // #endregion HUB_INTEGRATION

package/public/index.html

@@ -421,6 +421,14 @@
                 <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;">.</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Pin/unpin selected session</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;">&gt;</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Toggle sticky on selected session</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>
@@ -445,6 +453,10 @@
                 <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>
               </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+C</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Copy session id</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;">J/K</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Navigate messages in detail modal</td>

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;
@@ -2233,6 +2236,19 @@ body::before {
   font-family: var(--font-mono);
   font-size: 0.85rem;
 }
+.msg-detail-pre-tinted {
+  background: rgba(127, 127, 127, 0.15);
+  border-radius: 4px;
+  padding: 8px 10px;
+}
+.expand-toggle-btn {
+  background: none;
+  border: none;
+  color: var(--accent);
+  cursor: pointer;
+  text-decoration: underline;
+  margin-left: 6px;
+}
 .msg-cmd .msg-text code {
   background: var(--bg-hover);
   padding: 2px 6px;
@@ -2787,8 +2803,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 +2818,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;
 }
@@ -3485,7 +3501,8 @@ pre.mermaid svg {
   color: var(--text-primary);
 }
 
-.project-group-header.kb-selected {
+.project-group-header.kb-selected,
+.pinned-sub-header.kb-selected {
   color: var(--text-primary);
   background: var(--bg-hover);
   border-radius: 4px;

package/server.js

@@ -19,7 +19,8 @@ const {
   readCompactSummaries,
   findTerminatedTeammates,
   extractPromptFromTranscript,
-  extractModelFromTranscript
+  extractModelFromTranscript,
+  readFullToolResult
 } = require('./lib/parsers');
 
 if (process.argv.includes("--install") || process.argv.includes("--uninstall")) {
@@ -119,18 +120,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 }; }
 }
 
@@ -1300,12 +1294,23 @@ app.get('/api/sessions/:sessionId/messages', (req, res) => {
     }
   }
   for (const msg of messages) {
-    if (msg.toolUseId) delete msg.toolUseId;
+    // Keep toolUseId on truncated tool results so the client can lazy-fetch the full text
+    if (msg.toolUseId && !msg.toolResultTruncated) delete msg.toolUseId;
     delete msg.promptId;
   }
   res.json({ messages, hasMore, sessionId: req.params.sessionId });
 });
 
+app.get('/api/sessions/:sessionId/tool-result/:toolUseId', (req, res) => {
+  const metadata = loadSessionMetadata();
+  const meta = metadata[req.params.sessionId];
+  const jsonlPath = meta?.jsonlPath;
+  if (!jsonlPath) return res.status(404).json({ error: 'session not found' });
+  const content = readFullToolResult(jsonlPath, req.params.toolUseId);
+  if (content == null) return res.status(404).json({ error: 'tool result not found' });
+  res.json({ toolUseId: req.params.toolUseId, content });
+});
+
 app.get('/api/version', (req, res) => {
   const pkg = require('./package.json');
   res.json({ version: pkg.version });