claude-code-kanban 2.2.0-rc.9 → 2.2.0

package/public/app.js

@@ -30,9 +30,23 @@ let selectedSessionKbId = null;
 let sessionJustSelected = false;
 let agentLogMode = null;
 let agentLogSSE = null;
+let msgHasMore = false;
+let msgLoadingMore = false;
+let msgUserScrolledUp = false;
+const MSG_MAX_LOADED = 200;
 let currentProjectPath = null;
 let currentProjectSessionIds = [];
 
+function resetMessageScrollState() {
+  msgUserScrolledUp = false;
+  msgHasMore = false;
+  msgLoadingMore = false;
+  currentMessages = [];
+  lastMessagesHash = '';
+  const btn = document.getElementById('msg-jump-latest');
+  if (btn) btn.style.display = 'none';
+}
+
 function getUrlState() {
   const params = new URLSearchParams(window.location.search);
   return {
@@ -77,6 +91,7 @@ function resetState() {
   currentSessionId = null;
   currentProjectPath = null;
   currentProjectSessionIds = [];
+  resetMessageScrollState();
   const searchInput = document.getElementById('search-input');
   if (searchInput) searchInput.value = '';
   document.getElementById('search-clear-btn')?.classList.remove('visible');
@@ -116,6 +131,7 @@ async function fetchSessions() {
   try {
     const allPinnedIds = new Set([...pinnedSessionIds, ...stickySessionIds]);
     if (revealedPlanSessionId) allPinnedIds.add(revealedPlanSessionId);
+    if (revealedStorageSessionId) allPinnedIds.add(revealedStorageSessionId);
     const pinnedParam = allPinnedIds.size > 0 ? `&pinned=${[...allPinnedIds].join(',')}` : '';
     const [newSessions, newTasks] = await Promise.all([
       fetch(`/api/sessions?limit=${sessionLimit}${pinnedParam}`).then((r) => r.json()),
@@ -342,7 +358,7 @@ function fuzzyMatch(text, query) {
   if (text.includes(query)) return true;
 
   // Split by common delimiters to search in individual words
-  const words = text.split(/[\s\-_/.]+/);
+  const words = text.split(/[\s\-_/.\\]+/);
 
   // Check if query matches start of any word
   for (const word of words) {
@@ -440,10 +456,13 @@ async function fetchTasks(sessionId) {
     if (revealedPlanSessionId && sessionId !== revealedPlanSessionId) {
       revealedPlanSessionId = null;
     }
+    if (revealedStorageSessionId && sessionId !== revealedStorageSessionId) {
+      revealedStorageSessionId = null;
+    }
     currentSessionId = sessionId;
     currentPins = loadPins(sessionId);
     ownerFilter = '';
-    lastMessagesHash = '';
+    resetMessageScrollState();
     for (const k of Object.keys(ownerColorCache)) delete ownerColorCache[k];
     for (const k of Object.keys(teamColorMap)) delete teamColorMap[k];
     sessionJustSelected = true;
@@ -613,6 +632,7 @@ async function viewAgentLog(agentId) {
   const shortId = resolvedId.length > 8 ? resolvedId.slice(0, 8) : resolvedId;
   const agentSessionId = agent._sourceSessionId || currentSessionId;
   agentLogMode = { agentId: resolvedId, sessionId: agentSessionId, agentType: agent.type || 'unknown' };
+  resetMessageScrollState();
   closeAgentModal();
   document.getElementById('message-toggle')?.style.removeProperty('display');
   if (!messagePanelOpen) toggleMessagePanel();
@@ -650,7 +670,7 @@ function exitAgentLogMode() {
   }
   const header = document.querySelector('.message-panel-header h3');
   if (header) header.textContent = 'Session Log';
-  lastMessagesHash = '';
+  resetMessageScrollState();
   if (currentSessionId) fetchMessages(currentSessionId);
 }
 
@@ -682,9 +702,6 @@ async function fetchMessages(sessionId) {
     const res = await fetch(`/api/sessions/${sessionId}/messages?limit=15`);
     if (!res.ok) return;
     const data = await res.json();
-    const hash = JSON.stringify(data.messages);
-    if (hash === lastMessagesHash) return;
-    lastMessagesHash = hash;
     let agentEnriched = false;
     for (const m of data.messages) {
       if (m.agentId && m.agentPrompt) {
@@ -697,16 +714,75 @@ async function fetchMessages(sessionId) {
     }
     if (agentEnriched) renderAgentFooter();
     if (agentLogMode) return;
-    currentMessages = data.messages;
-    if (messagePanelOpen) renderMessages(data.messages);
-    if (msgDetailFollowLatest && data.messages.length) {
-      showMsgDetail(data.messages.length - 1);
+
+    if (!msgUserScrolledUp) {
+      const hash = JSON.stringify(data.messages);
+      if (hash === lastMessagesHash) return;
+      lastMessagesHash = hash;
+      msgHasMore = data.hasMore !== false;
+      currentMessages = data.messages;
+      if (messagePanelOpen) renderMessages(data.messages);
+    } else {
+      if (data.messages.length && currentMessages.length) {
+        const lastKnown = currentMessages[currentMessages.length - 1].timestamp;
+        const newMsgs = data.messages.filter((m) => m.timestamp > lastKnown);
+        if (newMsgs.length) {
+          currentMessages = [...currentMessages, ...newMsgs];
+          if (currentMessages.length > MSG_MAX_LOADED) {
+            currentMessages = currentMessages.slice(-MSG_MAX_LOADED);
+            msgHasMore = true;
+          }
+          if (messagePanelOpen) renderMessages(currentMessages);
+        }
+      }
+    }
+
+    if (msgDetailFollowLatest && currentMessages.length) {
+      showMsgDetail(currentMessages.length - 1);
     }
   } catch (e) {
     console.error('[fetchMessages]', e);
   }
 }
 
+async function loadOlderMessages() {
+  if (agentLogMode || msgLoadingMore || !msgHasMore || !currentMessages.length) return;
+  msgLoadingMore = true;
+  const container = document.getElementById('message-panel-content');
+  const loader = document.createElement('div');
+  loader.className = 'msg-loading-more';
+  loader.textContent = 'Loading...';
+  container.prepend(loader);
+  try {
+    const before = currentMessages[0].timestamp;
+    const res = await fetch(`/api/sessions/${currentSessionId}/messages?limit=15&before=${encodeURIComponent(before)}`);
+    if (!res.ok) return;
+    const data = await res.json();
+    msgHasMore = data.hasMore && data.messages.length > 0;
+    if (data.messages.length) {
+      loader.remove();
+      const prevHeight = container.scrollHeight;
+      currentMessages = [...data.messages, ...currentMessages];
+      if (currentMessages.length > MSG_MAX_LOADED) {
+        currentMessages = currentMessages.slice(0, MSG_MAX_LOADED);
+      }
+      renderMessages(currentMessages);
+      container.scrollTop = container.scrollHeight - prevHeight;
+    }
+  } catch (e) {
+    console.error('[loadOlderMessages]', e);
+  } finally {
+    if (loader.parentNode) loader.remove();
+    requestAnimationFrame(() => {
+      msgLoadingMore = false;
+      // Chain auto-load if content still doesn't overflow
+      if (msgHasMore && currentMessages.length < MSG_MAX_LOADED && container.scrollHeight <= container.clientHeight) {
+        loadOlderMessages();
+      }
+    });
+  }
+}
+
 function parseCommandMessage(text) {
   const nameMatch = text.match(/<command-name>([^<]+)<\/command-name>/);
   if (nameMatch) return nameMatch[1].trim();
@@ -752,10 +828,10 @@ function renderPinnedSection() {
             <div class="msg-body"><div class="msg-text">${escapeHtml(cleanMessageText(p.text || ''))}</div><div class="msg-time">${formatDate(p.timestamp)}</div></div>${unpin}
           </div>`;
       } else if (p.type === 'tool_use') {
-        const toolDetail = p.detail ? ` <span style="color:var(--text-muted)">${escapeHtml(p.detail)}</span>` : '';
-        const pinnedAgentLogBtn = p.tool === 'Agent' && p.agentId ? agentLogButton(p.agentId) : '';
+        const toolDetail = getToolDetail(p.tool, p.params, p.detail);
+        const pinnedAgentLogBtn = resolveAgentLogBtn(p);
         return `<div class="msg-item msg-tool" ${click}>
-            ${MSG_ICON_TOOL}
+            ${getToolIcon(p.tool)}
             <div class="msg-body"><div class="msg-text">${escapeHtml(p.tool || '')}${toolDetail}</div><div class="msg-time">${formatDate(p.timestamp)}</div></div>${pinnedAgentLogBtn}${unpin}
           </div>`;
       } else if (p.type === 'agent') {
@@ -786,96 +862,163 @@ function renderPinnedSection() {
       </div>`;
 }
 
-function renderMessages(messages) {
-  const container = document.getElementById('message-panel-content');
-  const pinnedContainer = document.getElementById('message-panel-pinned');
-  pinnedContainer.innerHTML = agentLogMode ? '' : renderPinnedSection();
-  if (!messages.length) {
-    container.innerHTML = '<div class="msg-empty">No messages found for this session</div>';
-    return;
-  }
-  const msgsHtml = messages
-    .map((m, i) => {
-      const pinBtn = renderMsgPinBtn(m, i);
-      const clickable = `onclick="msgDetailFollowLatest=false;showMsgDetail(${i})" style="cursor:pointer"`;
-      if (m.type === 'user') {
-        if (m.systemLabel) {
-          return `<div class="msg-item msg-system" ${clickable}>
-              ${MSG_ICON_SYSTEM}
-              <div class="msg-body"><div class="msg-text"><code>${escapeHtml(m.systemLabel)}</code></div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${pinBtn}
-            </div>`;
-        }
+function resolveAgentLogBtn(m) {
+  if (m.tool === 'Agent' && m.agentId) return agentLogButton(m.agentId);
+  if (m.tool === 'SendMessage' && m.params?.to) {
+    const recipient = currentAgents.find((a) => (a.type || a.name) === m.params.to);
+    if (recipient) return agentLogButton(recipient.agentId);
+  }
+  return '';
+}
+
+function toolGroupKey(m) {
+  return m.type === 'tool_use' ? `${m.tool}\0${m.detail || ''}` : null;
+}
+
+function renderToolItem(m, i, compact) {
+  const toolDetail = getToolDetail(m.tool, m.params, m.detail);
+  const agentLink =
+    m.tool === 'Agent' && m.agentId
+      ? ` <span class="msg-agent-link" title="View agent" onclick="event.stopPropagation();showAgentModal('${escapeHtml(m.agentId)}')">⇗</span>`
+      : '';
+  const agentLogBtn = resolveAgentLogBtn(m);
+  const recipientColor = m.tool === 'SendMessage' && m.params?.to ? resolveNamedColor(teamColorMap[m.params.to]) : null;
+  const borderStyle = recipientColor ? `border-left:3px solid ${recipientColor.color};` : '';
+  const compactClass = compact ? ' msg-tool-grouped' : '';
+  const combinedStyle = `style="${borderStyle}cursor:pointer"`;
+  const itemClickAttr =
+    m.tool === 'Agent' && m.agentId
+      ? `onclick="showAgentModal('${escapeHtml(m.agentId)}')" ${combinedStyle}`
+      : `onclick="msgDetailFollowLatest=false;showMsgDetail(${i})" ${combinedStyle}`;
+  const pinBtn = renderMsgPinBtn(m, i);
+  return `<div class="msg-item msg-tool${compactClass}" ${itemClickAttr}>
+      ${getToolIcon(m.tool)}
+      <div class="msg-body"><div class="msg-text">${escapeHtml(m.tool)}${toolDetail}${agentLink}</div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${agentLogBtn}${pinBtn}
+    </div>`;
+}
+
+function renderMessageList(messages) {
+  const parts = [];
+  let i = 0;
+  while (i < messages.length) {
+    const m = messages[i];
+
+    if (m.type === 'tool_use') {
+      const key = toolGroupKey(m);
+      let runEnd = i + 1;
+      while (runEnd < messages.length && toolGroupKey(messages[runEnd]) === key) runEnd++;
+      const count = runEnd - i;
+
+      if (count >= 2) {
+        const first = messages[i];
+        const last = messages[runEnd - 1];
+        const toolDetail = getToolDetail(first.tool, first.params, first.detail);
+        const gid = `tool-group-${i}`;
+        const timeRange = `${formatDate(first.timestamp)} – ${formatDate(last.timestamp)}`;
+        const grpAgentLogBtn = resolveAgentLogBtn(first);
+        const grpPinBtn = renderMsgPinBtn(first, i);
+        parts.push(`<div class="msg-tool-group">
+            <div class="msg-item msg-tool msg-tool-group-header" onclick="toggleToolGroup('${gid}')" style="cursor:pointer">
+              ${getToolIcon(first.tool)}
+              <div class="msg-body"><div class="msg-text">${escapeHtml(first.tool)}${toolDetail}<span class="tool-count-badge">×${count}</span></div><div class="msg-time">${timeRange}</div></div>${grpAgentLogBtn}${grpPinBtn}
+            </div>
+            <div class="msg-tool-group-items" id="${gid}">${Array.from({ length: count }, (_, j) => renderToolItem(messages[i + j], i + j, true)).join('')}</div>
+          </div>`);
+        i = runEnd;
+        continue;
+      }
+
+      parts.push(renderToolItem(m, i, false));
+      i++;
+      continue;
+    }
+
+    const clickable = `onclick="msgDetailFollowLatest=false;showMsgDetail(${i})" style="cursor:pointer"`;
+    const pinBtn = renderMsgPinBtn(m, i);
+    if (m.type === 'user') {
+      if (m.systemLabel) {
+        parts.push(`<div class="msg-item msg-system" ${clickable}>
+            ${MSG_ICON_SYSTEM}
+            <div class="msg-body"><div class="msg-text"><code>${escapeHtml(m.systemLabel)}</code></div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${pinBtn}
+          </div>`);
+      } else {
         const cmd = parseCommandMessage(m.text);
         const displayText = cmd ? cmd : escapeHtml(cleanMessageText(m.text));
         const isCmd = !!cmd;
-        return `<div class="msg-item msg-user${isCmd ? ' msg-cmd' : ''}" ${clickable}>
+        parts.push(`<div class="msg-item msg-user${isCmd ? ' msg-cmd' : ''}" ${clickable}>
             ${MSG_ICON_USER}
             <div class="msg-body"><div class="msg-text">${isCmd ? `<code>${escapeHtml(displayText)}</code>` : displayText}</div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${pinBtn}
-          </div>`;
-      } else if (m.type === 'assistant') {
-        return `<div class="msg-item msg-assistant" ${clickable}>
-            ${MSG_ICON_ASSISTANT}
-            <div class="msg-body"><div class="msg-text">${escapeHtml(cleanMessageText(m.text))}</div><div class="msg-time">${m.model ? `${escapeHtml(m.model)} · ` : ''}${formatDate(m.timestamp)}</div></div>${pinBtn}
-          </div>`;
-      } else if (m.type === 'tool_use') {
-        const toolDetail = m.detail ? ` <span style="color:var(--text-muted)">${escapeHtml(m.detail)}</span>` : '';
-        const agentLink =
-          m.tool === 'Agent' && m.agentId
-            ? ` <span class="msg-agent-link" title="View agent" onclick="event.stopPropagation();showAgentModal('${escapeHtml(m.agentId)}')">⇗</span>`
-            : '';
-        let agentLogBtn = '';
-        if (m.tool === 'Agent' && m.agentId) {
-          agentLogBtn = agentLogButton(m.agentId);
-        } else if (m.tool === 'SendMessage' && m.params?.to) {
-          const recipient = currentAgents.find((a) => (a.type || a.name) === m.params.to);
-          if (recipient) agentLogBtn = agentLogButton(recipient.agentId);
-        }
-        const recipientColor =
-          m.tool === 'SendMessage' && m.params?.to ? resolveNamedColor(teamColorMap[m.params.to]) : null;
-        const borderStyle = recipientColor ? `border-left:3px solid ${recipientColor.color};` : '';
-        const combinedStyle = `style="${borderStyle}cursor:pointer"`;
-        const itemClickAttr =
-          m.tool === 'Agent' && m.agentId
-            ? `onclick="showAgentModal('${escapeHtml(m.agentId)}')" ${combinedStyle}`
-            : `onclick="msgDetailFollowLatest=false;showMsgDetail(${i})" ${combinedStyle}`;
-        return `<div class="msg-item msg-tool" ${itemClickAttr}>
-            ${MSG_ICON_TOOL}
-            <div class="msg-body"><div class="msg-text">${escapeHtml(m.tool)}${toolDetail}${agentLink}</div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${agentLogBtn}${pinBtn}
-          </div>`;
-      } else if (m.type === 'teammate') {
-        if (m.teammateId && m.color && !teamColorMap[m.teammateId]) teamColorMap[m.teammateId] = m.color;
-        const tmColor = m.color ? resolveNamedColor(m.color)?.color || m.color : '';
-        const nameSpan = `<span class="teammate-name" style="${tmColor ? `color:${escapeHtml(tmColor)}` : ''}">${escapeHtml(m.teammateId || 'teammate')}</span>`;
-        let tmLookupName = m.teammateId;
-        if (m.teammateId === 'system' && m.protocolType === 'teammate_terminated' && m.protocolData?.message) {
-          const shutMatch = m.protocolData.message.match(/^(.+?) has shut down/);
-          if (shutMatch) tmLookupName = shutMatch[1];
-        }
-        const tmAgent = tmLookupName ? currentAgents.find((a) => (a.type || a.name) === tmLookupName) : null;
-        const tmLogBtn = tmAgent ? agentLogButton(tmAgent.agentId) : '';
-        if (m.isIdle) {
-          return `<div class="msg-item msg-teammate msg-idle" ${clickable}>
-              ${MSG_ICON_IDLE}
-              <div class="msg-body"><div class="msg-text">${nameSpan} <span class="idle-label">${escapeHtml(m.protocolLabel || 'idle')}</span></div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${tmLogBtn}
-            </div>`;
-        }
-        if (m.isProtocol) {
-          return `<div class="msg-item msg-teammate msg-protocol" ${clickable}>
-              ${MSG_ICON_TEAMMATE}
-              <div class="msg-body"><div class="msg-text">${nameSpan} <span class="protocol-label">${escapeHtml(m.protocolLabel || m.protocolType)}</span></div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${tmLogBtn}
-            </div>`;
-        }
+          </div>`);
+      }
+    } else if (m.type === 'assistant') {
+      parts.push(`<div class="msg-item msg-assistant" ${clickable}>
+          ${MSG_ICON_ASSISTANT}
+          <div class="msg-body"><div class="msg-text">${escapeHtml(cleanMessageText(m.text))}</div><div class="msg-time">${m.model ? `${escapeHtml(m.model)} · ` : ''}${formatDate(m.timestamp)}</div></div>${pinBtn}
+        </div>`);
+    } else if (m.type === 'teammate') {
+      if (m.teammateId && m.color && !teamColorMap[m.teammateId]) teamColorMap[m.teammateId] = m.color;
+      const tmColor = m.color ? resolveNamedColor(m.color)?.color || m.color : '';
+      const nameSpan = `<span class="teammate-name" style="${tmColor ? `color:${escapeHtml(tmColor)}` : ''}">${escapeHtml(m.teammateId || 'teammate')}</span>`;
+      let tmLookupName = m.teammateId;
+      if (m.teammateId === 'system' && m.protocolType === 'teammate_terminated' && m.protocolData?.message) {
+        const shutMatch = m.protocolData.message.match(/^(.+?) has shut down/);
+        if (shutMatch) tmLookupName = shutMatch[1];
+      }
+      const tmAgent = tmLookupName ? currentAgents.find((a) => (a.type || a.name) === tmLookupName) : null;
+      const tmLogBtn = tmAgent ? agentLogButton(tmAgent.agentId) : '';
+      if (m.isIdle) {
+        parts.push(`<div class="msg-item msg-teammate msg-idle" ${clickable}>
+            ${MSG_ICON_IDLE}
+            <div class="msg-body"><div class="msg-text">${nameSpan} <span class="idle-label">${escapeHtml(m.protocolLabel || 'idle')}</span></div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${tmLogBtn}
+          </div>`);
+      } else if (m.isProtocol) {
+        parts.push(`<div class="msg-item msg-teammate msg-protocol" ${clickable}>
+            ${MSG_ICON_TEAMMATE}
+            <div class="msg-body"><div class="msg-text">${nameSpan} <span class="protocol-label">${escapeHtml(m.protocolLabel || m.protocolType)}</span></div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${tmLogBtn}
+          </div>`);
+      } else {
         const summaryText = m.summary ? escapeHtml(m.summary) : escapeHtml((m.text || '').slice(0, 80));
-        return `<div class="msg-item msg-teammate" ${clickable}>
+        parts.push(`<div class="msg-item msg-teammate" ${clickable}>
             ${MSG_ICON_TEAMMATE}
             <div class="msg-body"><div class="msg-text">${nameSpan} ${summaryText}</div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${tmLogBtn}${pinBtn}
-          </div>`;
+          </div>`);
       }
-      return '';
-    })
-    .join('');
-  container.innerHTML = msgsHtml;
-  container.scrollTop = container.scrollHeight;
+    }
+    i++;
+  }
+  return parts.join('');
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
+function toggleToolGroup(id) {
+  const el = document.getElementById(id);
+  if (el) el.classList.toggle('show');
+}
+
+function renderMessages(messages) {
+  const container = document.getElementById('message-panel-content');
+  const pinnedContainer = document.getElementById('message-panel-pinned');
+  pinnedContainer.innerHTML = agentLogMode ? '' : renderPinnedSection();
+  if (!messages.length) {
+    container.innerHTML = '<div class="msg-empty">No messages found for this session</div>';
+    return;
+  }
+  const msgsHtml = renderMessageList(messages);
+  const limitBanner =
+    currentMessages.length >= MSG_MAX_LOADED
+      ? `<div class="msg-limit-banner">Showing last ${MSG_MAX_LOADED} messages</div>`
+      : '';
+  container.innerHTML = limitBanner + msgsHtml;
+  if (!msgUserScrolledUp) container.scrollTop = container.scrollHeight;
+  // Auto-load more if content doesn't overflow yet
+  if (
+    msgHasMore &&
+    !msgLoadingMore &&
+    currentMessages.length < MSG_MAX_LOADED &&
+    container.scrollHeight <= container.clientHeight
+  ) {
+    loadOlderMessages();
+  }
 }
 
 let currentMsgDetailIdx = null;
@@ -897,6 +1040,40 @@ const MSG_ICON_TEAMMATE =
   '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>';
 const MSG_ICON_IDLE =
   '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6"/></svg>';
+const ICON_TASK =
+  '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>';
+const ICON_WEB =
+  '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>';
+const TOOL_ICONS = {
+  Bash: '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="18" rx="2"/><polyline points="7 10 10 13 7 16"/><line x1="13" y1="16" x2="17" y2="16"/></svg>',
+  Read: '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',
+  Write:
+    '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>',
+  Edit: '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
+  Glob: '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><circle cx="14" cy="14" r="3"/><line x1="16.5" y1="16.5" x2="19" y2="19"/></svg>',
+  Grep: '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
+  Agent: MSG_ICON_TEAMMATE,
+  SendMessage:
+    '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>',
+  TaskCreate: ICON_TASK,
+  TaskUpdate: ICON_TASK,
+  TaskGet: ICON_TASK,
+  TaskList: ICON_TASK,
+  ToolSearch:
+    '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>',
+  AskUserQuestion:
+    '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
+  Skill:
+    '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
+  WebFetch: ICON_WEB,
+  WebSearch: ICON_WEB,
+  NotebookEdit:
+    '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>',
+  LSP: '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>',
+};
+function getToolIcon(toolName) {
+  return TOOL_ICONS[toolName] || MSG_ICON_TOOL;
+}
 const AGENT_LOG_ICON =
   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>';
 function agentLogButton(agentId) {
@@ -1077,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();
@@ -1184,7 +1370,7 @@ function showMsgDetail(idx) {
       const detailRendered = m.tool === 'Bash' ? highlightBash(detailEscaped) : detailEscaped;
       mainHtml = `${descHtml}<pre class="msg-detail-pre">${detailRendered}</pre>`;
     } else {
-      mainHtml = '<em>No details</em>';
+      mainHtml = TASK_TOOLS.has(m.tool) ? '' : '<em>No details</em>';
     }
     body.innerHTML = mainHtml + toolParamsHtml + taskResultHtml + (hasAgentTabs ? '' : toolResultHtml) + agentExtraHtml;
   } else if (m.type === 'teammate') {
@@ -1199,14 +1385,25 @@ function showMsgDetail(idx) {
       body.innerHTML = renderMarkdown(text);
     }
   } else {
-    const text = stripAnsi(m.fullText || m.text);
+    const rawText = stripAnsi(m.fullText || m.text);
+    const cmd = m.type === 'user' ? parseCommandMessage(rawText) : null;
     document.getElementById('msg-detail-title').textContent =
       m.type === 'assistant' ? 'Claude' : m.systemLabel ? 'System' : 'User';
     document.getElementById('msg-detail-agent-btn').style.display = 'none';
     if (m.compactSummary) {
       body.innerHTML = renderMarkdown(m.compactSummary);
+    } else if (cmd) {
+      const argsMatch = rawText.match(/<command-args>([^<]*)<\/command-args>/);
+      const args = argsMatch?.[1].trim() ? argsMatch[1].trim() : null;
+      const cleanBody = rawText
+        .replace(/<command-[^>]+>[\s\S]*?<\/command-[^>]+>/g, '')
+        .replace(/<local-command-[^>]+>[\s\S]*?<\/local-command-[^>]+>/g, '')
+        .trim();
+      let cmdHtml = `<code>${escapeHtml(cmd)}${args ? ` ${escapeHtml(args)}` : ''}</code>`;
+      if (cleanBody) cmdHtml += `<div style="margin-top:10px">${renderMarkdown(cleanBody)}</div>`;
+      body.innerHTML = cmdHtml;
     } else {
-      body.innerHTML = renderMarkdown(text);
+      body.innerHTML = renderMarkdown(rawText);
     }
   }
   const modal = document.getElementById('msg-detail-modal').querySelector('.modal');
@@ -1318,6 +1515,32 @@ function renderProtocolDetail(data) {
 }
 
 const TASK_TOOLS = new Set(['TaskCreate', 'TaskUpdate', 'TaskGet', 'TaskList']);
+const TASK_STATUS_COLORS = {
+  pending: 'var(--text-muted)',
+  in_progress: 'var(--info)',
+  completed: 'var(--success)',
+  deleted: 'var(--danger)',
+};
+function formatTaskStatusBadge(status) {
+  const color = TASK_STATUS_COLORS[status] || 'var(--text-muted)';
+  return `<span style="color:${color};font-weight:600;text-transform:uppercase;font-size:0.85em">${escapeHtml(status)}</span>`;
+}
+function formatTaskToolDetail(params) {
+  if (!params) return '';
+  const parts = [];
+  if (params.taskId) {
+    const id = String(params.taskId).replace(/^#/, '');
+    parts.push(`<span style="color:var(--text-muted)">#${escapeHtml(id)}</span>`);
+  }
+  if (params.status) parts.push(formatTaskStatusBadge(params.status));
+  if (params.subject) parts.push(`<span style="color:var(--text-secondary)">${escapeHtml(params.subject)}</span>`);
+  return parts.length ? ` ${parts.join(' ')}` : '';
+}
+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 '';
+}
 function renderTaskResult(toolResult) {
   if (!toolResult) return '';
   const lines = toolResult.trim().split('\n');
@@ -1330,17 +1553,9 @@ function renderTaskResult(toolResult) {
   const title = fields.find(([k]) => /^Task/.test(k));
   const status = fields.find(([k]) => k === 'Status');
   const rest = fields.filter(([k]) => !/^Task/.test(k) && k !== 'Status');
-  const statusColors = {
-    pending: 'var(--text-muted)',
-    in_progress: 'var(--info)',
-    completed: 'var(--success)',
-    deleted: 'var(--danger)',
-  };
-  const sc = status ? statusColors[status[1]] || 'var(--text-muted)' : '';
   let html = '<div class="protocol-detail">';
   if (title) html += `<span class="protocol-type-badge">${escapeHtml(title[1])}</span>`;
-  if (status)
-    html += `<span style="display:inline-block;font-size:10px;font-weight:600;color:${sc};text-transform:uppercase;margin-bottom:6px">${escapeHtml(status[1])}</span>`;
+  if (status) html += `<span style="display:inline-block;margin-bottom:6px">${formatTaskStatusBadge(status[1])}</span>`;
   if (rest.length) {
     html += '<div class="protocol-fields">';
     for (const [k, v] of rest) {
@@ -1447,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;
@@ -1539,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)) {
@@ -1614,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>`;
@@ -1717,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()]);
@@ -1774,6 +2010,7 @@ function closeAgentModal() {
 
 //#region RENDERING
 let revealedPlanSessionId = null;
+let revealedStorageSessionId = null;
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 async function revealPlanSession(planSessionId) {
   if (revealedPlanSessionId === planSessionId) {
@@ -1868,6 +2105,10 @@ function renderSessions() {
       const planSession = sessions.find((s) => s.id === revealedPlanSessionId);
       if (planSession) filteredSessions.push(planSession);
     }
+    if (revealedStorageSessionId && !filteredSessions.some((s) => s.id === revealedStorageSessionId)) {
+      const storageSession = sessions.find((s) => s.id === revealedStorageSessionId);
+      if (storageSession) filteredSessions.push(storageSession);
+    }
   }
   if (filterProject) {
     filteredSessions = filteredSessions.filter((s) => matchesProjectFilter(s.project));
@@ -1875,30 +2116,34 @@ function renderSessions() {
 
   // Apply search filter
   if (searchQuery) {
-    filteredSessions = filteredSessions.filter((session) => {
-      // Search in session name and ID
-      if (session.name && fuzzyMatch(session.name, searchQuery)) return true;
-      if (session.id && fuzzyMatch(session.id, searchQuery)) return true;
-
-      // Search in project path
-      if (session.project && fuzzyMatch(session.project, searchQuery)) return true;
-
-      // Search in description
-      if (session.description && fuzzyMatch(session.description, searchQuery)) return true;
-
-      // Search in tasks for this session
-      const sessionTasks = allTasksCache.filter((t) => t.sessionId === session.id);
-      return sessionTasks.some(
-        (task) =>
-          (task.subject && fuzzyMatch(task.subject, searchQuery)) ||
-          (task.description && fuzzyMatch(task.description, searchQuery)) ||
-          (task.activeForm && fuzzyMatch(task.activeForm, searchQuery)),
-      );
-    });
+    const taskMatchIds = new Set();
+    for (const t of allTasksCache) {
+      if (
+        (t.subject && fuzzyMatch(t.subject, searchQuery)) ||
+        (t.description && fuzzyMatch(t.description, searchQuery)) ||
+        (t.activeForm && fuzzyMatch(t.activeForm, searchQuery))
+      )
+        taskMatchIds.add(t.sessionId);
+    }
+    const matchesSearch = (s) =>
+      (s.name && fuzzyMatch(s.name, searchQuery)) ||
+      (s.id && fuzzyMatch(s.id, searchQuery)) ||
+      (s.project && fuzzyMatch(s.project, searchQuery)) ||
+      (s.description && fuzzyMatch(s.description, searchQuery)) ||
+      taskMatchIds.has(s.id);
+
+    filteredSessions = filteredSessions.filter(matchesSearch);
+
+    // Re-add pinned/sticky sessions that match the query but were excluded by active filter
+    if (pinnedSessionIds.size > 0 || stickySessionIds.size > 0) {
+      const filteredIds = new Set(filteredSessions.map((s) => s.id));
+      const missingPinned = sessions.filter((s) => isAnyPinned(s.id) && !filteredIds.has(s.id) && matchesSearch(s));
+      if (missingPinned.length) filteredSessions = [...missingPinned, ...filteredSessions];
+    }
   }
 
-  // Always include pinned/sticky sessions even if they don't match filters
-  if ((pinnedSessionIds.size > 0 || stickySessionIds.size > 0) && !searchQuery) {
+  // Include pinned/sticky sessions even if they don't match active/recent filter
+  if (!searchQuery && (pinnedSessionIds.size > 0 || stickySessionIds.size > 0)) {
     const filteredIds = new Set(filteredSessions.map((s) => s.id));
     const missingPinned = sessions.filter((s) => isAnyPinned(s.id) && !filteredIds.has(s.id));
     if (missingPinned.length) filteredSessions = [...missingPinned, ...filteredSessions];
@@ -1956,7 +2201,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}">
@@ -3324,9 +3569,16 @@ function _renderStorageSessions() {
   return html;
 }
 
-function _storageViewSession(id) {
+async function _storageViewSession(id) {
   closeStorageManager();
-  fetchTasks(id);
+  revealedStorageSessionId = id;
+  if (!sessions.some((s) => s.id === id)) {
+    lastSessionsHash = '';
+    await fetchSessions();
+  }
+  await fetchTasks(id);
+  const el = document.querySelector(`.session-item[data-session-id="${CSS.escape(id)}"]`);
+  if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
 }
 
 function _storageUnpinSession(id) {
@@ -4025,6 +4277,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) {
@@ -4288,22 +4567,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() {
@@ -4477,8 +4755,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');
@@ -4616,6 +4906,8 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
   }
 
   bodyEl.innerHTML = html;
+  _infoModalSessionId = session.id;
+  updateStickyBtnState();
   modal.classList.add('visible');
 
   const keyHandler = (e) => {
@@ -4778,6 +5070,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;
@@ -4788,6 +5083,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();
@@ -4800,6 +5109,42 @@ initSidebarResize();
 loadPanelWidths();
 initPanelResize('detail-panel', 'detail-panel-resize', '--detail-panel-width', 'detail-panel-width');
 initPanelResize('message-panel', 'message-panel-resize', '--message-panel-width', 'message-panel-width');
+
+const msgContentEl = document.getElementById('message-panel-content');
+const jumpLatestBtn = document.createElement('button');
+jumpLatestBtn.id = 'msg-jump-latest';
+jumpLatestBtn.className = 'msg-jump-latest';
+jumpLatestBtn.style.display = 'none';
+jumpLatestBtn.textContent = '\u2193 Latest';
+jumpLatestBtn.onclick = function () {
+  msgContentEl.scrollTop = msgContentEl.scrollHeight;
+  msgUserScrolledUp = false;
+  this.style.display = 'none';
+};
+msgContentEl.parentElement.appendChild(jumpLatestBtn);
+
+let msgScrollThrottled = false;
+msgContentEl.addEventListener('scroll', () => {
+  if (msgScrollThrottled) return;
+  msgScrollThrottled = true;
+  requestAnimationFrame(() => {
+    msgScrollThrottled = false;
+    const el = msgContentEl;
+    if (el.scrollTop === 0 && msgHasMore && !msgLoadingMore) {
+      loadOlderMessages();
+    }
+    const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 50;
+    msgUserScrolledUp = !nearBottom;
+    jumpLatestBtn.style.display = msgUserScrolledUp ? '' : 'none';
+  });
+});
+// Load older messages on wheel-up when content doesn't overflow
+msgContentEl.addEventListener('wheel', function (e) {
+  if (e.deltaY < 0 && this.scrollTop === 0 && msgHasMore && !msgLoadingMore) {
+    loadOlderMessages();
+  }
+});
+
 fetch('/api/version')
   .then((r) => r.json())
   .then((d) => {
@@ -4838,6 +5183,10 @@ fetchSessions().then(async () => {
   }
   if (urlState.messages && currentSessionId) {
     toggleMessagePanel();
+    // Re-render after panel layout settles so scroll dimensions are correct
+    requestAnimationFrame(() => {
+      if (currentMessages.length) renderMessages(currentMessages);
+    });
   }
 });