claude-code-kanban 4.5.0 → 4.6.0

package/lib/parsers.js

@@ -107,6 +107,15 @@ function parseJsonlLine(line) {
     };
   }
 
+  if (obj.type === 'queue-operation' && obj.operation === 'enqueue') {
+    return {
+      ...base,
+      role: 'user',
+      queued: true,
+      content: typeof obj.content === 'string' ? obj.content : null
+    };
+  }
+
   if (obj.type === 'progress') {
     return { ...base, cwd: obj.cwd || null, version: obj.version || null, slug: obj.slug || null };
   }
@@ -118,6 +127,25 @@ const TOOL_RESULT_MAX = 1500;
 const USER_TEXT_MAX = 500;
 const INTERRUPT_MARKER = '[Request interrupted by user]';
 
+// Newer Claude Code no longer inlines pasted images as base64 blocks. It writes
+// them to ~/.claude/image-cache/<sessionId>/<N>.<ext> and leaves only a text marker
+// in the message — an inline "[Image #N]" placeholder and/or a standalone
+// "[Image: source: ...\N.ext]" line. Pull out the N references (so the UI can serve
+// the cached file) and strip the verbose source lines from the displayed text — the
+// rendered preview replaces them; the short "[Image #N]" placeholders stay.
+// Runs on the per-message scan hot path, so it skips the regexes entirely unless a
+// marker is present. Returns { refs: [{ kind: 'cache', n }], text }.
+function parseImageMarkers(text) {
+  const raw = text || '';
+  if (!raw.includes('[Image')) return { refs: [], text: raw.trim() };
+  const ns = new Set();
+  for (const m of raw.matchAll(/\[Image #(\d+)\]/g)) ns.add(Number(m[1]));
+  for (const m of raw.matchAll(/\[Image: source:[^\]]*?(\d+)\.[a-z0-9]+\]/gi)) ns.add(Number(m[1]));
+  const refs = [...ns].sort((a, b) => a - b).map((n) => ({ kind: 'cache', n }));
+  const cleaned = raw.replace(/\[Image: source:[^\]]*\]/gi, '').trim();
+  return { refs, text: cleaned };
+}
+
 function pushUserMessage(messages, text, timestamp, sysLabel, extras) {
   if (sysLabel === '__skip__') return;
   const safeText = text || '';
@@ -133,6 +161,7 @@ function pushUserMessage(messages, text, timestamp, sysLabel, extras) {
     if (extras.uuid) msg.uuid = extras.uuid;
     if (extras.images && extras.images.length) msg.images = extras.images;
     if (extras.toolResultRefs && extras.toolResultRefs.length) msg.toolResultRefs = extras.toolResultRefs;
+    if (extras.queued) msg.queued = true;
   }
   messages.push(msg);
 }
@@ -669,6 +698,7 @@ function readRecentMessages(jsonlPath, limit = 10) {
                   texts.push(block.text);
                 } else if (block.type === 'image' && block.source && block.source.type === 'base64') {
                   images.push({
+                    kind: 'base64',
                     blockIndex: idx,
                     mediaType: block.source.media_type || 'image/png',
                     dataLen: typeof block.source.data === 'string' ? block.source.data.length : 0
@@ -709,18 +739,31 @@ function readRecentMessages(jsonlPath, limit = 10) {
                 }
               });
               const joined = texts.join('\n').trim();
-              const hasText = joined && joined !== INTERRUPT_MARKER;
-              const hasImages = images.length > 0;
+              // Prefer inline base64 blocks when present; otherwise fall back to
+              // file-cache references parsed from the text markers.
+              const { refs, text: displayText } = parseImageMarkers(joined);
+              const allImages = images.length ? images : refs;
+              const hasText = displayText && displayText !== INTERRUPT_MARKER;
+              const hasImages = allImages.length > 0;
               if (hasText || hasImages) {
                 pushUserMessage(
                   messages,
-                  joined,
+                  displayText,
                   obj.timestamp,
-                  getSystemMessageLabel(joined),
-                  { uuid: obj.uuid, images, toolResultRefs: hasText ? toolResultRefs : [] }
+                  getSystemMessageLabel(displayText),
+                  { uuid: obj.uuid, images: allImages, toolResultRefs: hasText ? toolResultRefs : [] }
                 );
               }
             }
+          } else if (obj.type === 'queue-operation' && obj.operation === 'enqueue') {
+            // Queued messages are stored as top-level `content`, not under
+            // message.content, and never re-emitted as a type:'user' line.
+            // Surface them so the Session Log reflects what the user sent.
+            const qt = typeof obj.content === 'string' ? obj.content : '';
+            if (qt) {
+              const { refs, text } = parseImageMarkers(qt);
+              pushUserMessage(messages, text, obj.timestamp, null, { queued: true, images: refs });
+            }
           }
         } catch (e) { /* partial line */ }
       }
@@ -821,6 +864,31 @@ function readUserImage(jsonlPath, msgUuid, blockIndex) {
   return null;
 }
 
+const CACHED_IMAGE_MIME = {
+  png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif', webp: 'image/webp',
+};
+
+// Serve pasted image N from ~/.claude/image-cache/<sessionId>/. The cached file may
+// be any image format, so resolve it by index rather than assuming .png. sessionId
+// is validated to a bare id to prevent path traversal.
+function readCachedImage(sessionId, n) {
+  const idx = Number(n);
+  if (!sessionId || !/^[A-Za-z0-9._-]+$/.test(sessionId)) return null;
+  if (!Number.isInteger(idx) || idx < 0) return null;
+  const dir = path.join(require('os').homedir(), '.claude', 'image-cache', sessionId);
+  try {
+    const match = readdirSync(dir).find((f) => {
+      const dot = f.lastIndexOf('.');
+      return dot > 0 && f.slice(0, dot) === String(idx) && CACHED_IMAGE_MIME[f.slice(dot + 1).toLowerCase()];
+    });
+    if (!match) return null;
+    const ext = match.slice(match.lastIndexOf('.') + 1).toLowerCase();
+    return { mediaType: CACHED_IMAGE_MIME[ext], buffer: readFileSync(path.join(dir, match)) };
+  } catch (_) {
+    return null;
+  }
+}
+
 function readMessagesPage(jsonlPath, limit = 10, beforeTimestamp = null) {
   const fetchLimit = limit + 1;
   const applyFilter = beforeTimestamp
@@ -1237,6 +1305,7 @@ module.exports = {
   readMessagesPage,
   readFullToolResult,
   readUserImage,
+  readCachedImage,
   updateLoopInfo,
   buildLoopInfoFromState,
   buildAgentProgressMap,

package/package.json

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

package/public/app.js

@@ -27,6 +27,8 @@ let agentDurationInterval = null;
 let agentPollInterval = null;
 let selectedTaskId = null;
 let selectedSessionId = null;
+// Task stays selected (keyboard nav) but its white highlight is dimmed once the detail panel closes.
+let taskHighlightDimmed = false;
 let focusZone = 'board'; // 'board' | 'sidebar'
 let appConfig = { marketplaceUrl: null, costUrl: null, memoryUrl: null };
 let selectedSessionIdx = -1;
@@ -1029,7 +1031,7 @@ function renderToolItem(m, i, compact) {
       ? `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}>
+  return `<div class="msg-item msg-tool${compactClass}" data-msg-idx="${i}" ${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>`;
@@ -1071,7 +1073,7 @@ function renderMessageList(messages) {
       continue;
     }
 
-    const clickable = `onclick="msgDetailFollowLatest=false;showMsgDetail(${i})" style="cursor:pointer"`;
+    const clickable = `data-msg-idx="${i}" onclick="msgDetailFollowLatest=false;showMsgDetail(${i})" style="cursor:pointer"`;
     const pinBtn = renderMsgPinBtn(m, i);
     if (m.type === 'user') {
       if (m.systemLabel) {
@@ -1097,9 +1099,10 @@ function renderMessageList(messages) {
         if (displayText) textHtml = isCmd ? `<code>${escapeHtml(displayText)}</code>` : displayText;
         else if (chips.length) textHtml = '<em class="msg-text-muted">(attachment)</em>';
         else textHtml = '';
-        parts.push(`<div class="msg-item msg-user${isCmd ? ' msg-cmd' : ''}" ${clickable}>
+        const queuedTag = m.queued ? '<span class="msg-queued-tag">queued</span>' : '';
+        parts.push(`<div class="msg-item msg-user${isCmd ? ' msg-cmd' : ''}${m.queued ? ' msg-queued' : ''}" ${clickable}>
             ${MSG_ICON_USER}
-            <div class="msg-body"><div class="msg-text">${textHtml}${cmdArgsHtml}</div>${chipsHtml}<div class="msg-time">${formatDate(m.timestamp)}</div></div>${pinBtn}
+            <div class="msg-body"><div class="msg-text">${textHtml}${cmdArgsHtml}</div>${chipsHtml}<div class="msg-time">${formatDate(m.timestamp)}${queuedTag}</div></div>${pinBtn}
           </div>`);
       }
     } else if (m.type === 'assistant') {
@@ -1255,6 +1258,7 @@ function renderMessages(messages) {
       ? `<div class="msg-limit-banner">Showing last ${MSG_MAX_LOADED} messages</div>`
       : '';
   container.innerHTML = limitBanner + msgsHtml + renderWaitingEntry();
+  highlightSelectedMsg();
   if (!msgUserScrolledUp) container.scrollTop = container.scrollHeight;
   // Auto-load more if content doesn't overflow yet
   if (
@@ -1269,6 +1273,8 @@ function renderMessages(messages) {
 
 let currentMsgDetailIdx = null;
 let msgDetailFollowLatest = false;
+// Message stays tracked but its highlight is dimmed once the detail modal closes.
+let msgHighlightDimmed = false;
 const MSG_DETAIL_WAITING_IDX = -2;
 let currentPins = [];
 let pinnedCollapsed = false;
@@ -1287,6 +1293,8 @@ 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_AGENT =
+  '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 2v2M15 2v2M9 20v2M15 20v2M20 9h2M20 14h2M2 9h2M2 14h2"/></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 =
@@ -1309,7 +1317,7 @@ const TOOL_ICONS = {
   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,
+  Agent: ICON_AGENT,
   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,
@@ -1646,10 +1654,20 @@ const linkSvg = (size) =>
 //#region MODALS
 function renderUserAttachments(m) {
   const parts = [];
-  if (m.images?.length && m.uuid && currentSessionId) {
+  if (m.images?.length && currentSessionId) {
+    const sid = encodeURIComponent(currentSessionId);
     const imgs = m.images
       .map((img) => {
-        const url = `/api/sessions/${encodeURIComponent(currentSessionId)}/user-image/${encodeURIComponent(m.uuid)}/${img.blockIndex}`;
+        // Cache-kind images live on disk (image-cache/<sessionId>/<n>.png); base64
+        // images are read from the JSONL block and need the message uuid.
+        let url;
+        if (img.kind === 'cache') {
+          url = `/api/sessions/${sid}/cached-image/${img.n}`;
+        } else if (m.uuid) {
+          url = `/api/sessions/${sid}/user-image/${encodeURIComponent(m.uuid)}/${img.blockIndex}`;
+        } else {
+          return '';
+        }
         return `<img src="${url}" loading="lazy" alt="user image" class="user-attach-image" />`;
       })
       .join('');
@@ -1678,10 +1696,22 @@ function renderUserAttachments(m) {
   return parts.join('');
 }
 
+// Highlight the message whose detail is open, mirroring task-card selection.
+function highlightSelectedMsg() {
+  const container = document.getElementById('message-panel-content');
+  if (!container) return;
+  for (const el of container.querySelectorAll('.msg-item.selected')) el.classList.remove('selected');
+  if (msgHighlightDimmed || currentMsgDetailIdx == null || currentMsgDetailIdx < 0) return;
+  const el = container.querySelector(`.msg-item[data-msg-idx="${currentMsgDetailIdx}"]`);
+  if (el) el.classList.add('selected');
+}
+
 function showMsgDetail(idx) {
   currentMsgDetailIdx = idx;
+  msgHighlightDimmed = false;
   const m = currentMessages[idx];
   if (!m) return;
+  highlightSelectedMsg();
   const body = document.getElementById('msg-detail-body');
   if (m.type === 'tool_use') {
     document.getElementById('msg-detail-title').textContent = m.tool;
@@ -1785,6 +1815,12 @@ function showMsgDetail(idx) {
 function closeMsgDetailModal() {
   resetModalFullscreen('msg-detail-modal');
   msgDetailFollowLatest = false;
+  // Drop the message highlight on close, mirroring task-card behavior.
+  msgHighlightDimmed = true;
+  const container = document.getElementById('message-panel-content');
+  if (container) {
+    for (const el of container.querySelectorAll('.msg-item.selected')) el.classList.remove('selected');
+  }
 }
 
 function _setModalWidth(modal, slot, on, maxWidth, width) {
@@ -2365,7 +2401,8 @@ function renderAgentFooter() {
           : '';
         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}')">
+        const selectedClass = a.agentId === currentAgentModalId ? ' selected' : '';
+        return `<div class="agent-card${selectedClass}" data-agent-id="${escapeHtml(a.agentId)}"${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>${nameBadgeHtml}</div>
           <div class="agent-status-row"><span class="agent-dot ${a.status}"></span><span class="agent-status">${statusText}</span></div>
           ${msgHtml}
@@ -2457,6 +2494,7 @@ function showAgentModal(agentId) {
   const agent = findAgentById(agentId);
   if (!agent) return;
   currentAgentModalId = agentId;
+  highlightSelectedAgent();
   const modal = document.getElementById('agent-modal');
   const title = document.getElementById('agent-modal-title');
   const body = document.getElementById('agent-modal-body');
@@ -2526,6 +2564,16 @@ function showAgentModal(agentId) {
 function closeAgentModal() {
   resetModalFullscreen('agent-modal');
   currentAgentModalId = null;
+  highlightSelectedAgent();
+}
+
+function highlightSelectedAgent() {
+  const content = document.getElementById('agent-footer-content');
+  if (!content) return;
+  for (const el of content.querySelectorAll('.agent-card.selected')) el.classList.remove('selected');
+  if (currentAgentModalId == null) return;
+  const el = content.querySelector(`.agent-card[data-agent-id="${currentAgentModalId}"]`);
+  if (el) el.classList.add('selected');
 }
 
 //#endregion
@@ -2760,7 +2808,7 @@ function renderSessions() {
               <span class="session-indicators">
                 ${isTeam ? `<span class="team-badge" title="${memberCount} team members"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>${memberCount}</span>` : ''}
                 ${session.sharedTaskList ? `<span class="shared-tasklist-badge" title="Shared task list: ${escapeHtml(session.sharedTaskList)}">${linkSvg(12)}</span>` : ''}
-                ${isTeam || session.project || showCtx ? `<span class="team-info-btn" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="View session info">ℹ</span>` : ''}
+                ${isTeam || session.project || showCtx ? `<span class="team-info-btn" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="View session info"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>` : ''}
                 ${session.hasPlan && !session.planSourceSessionId ? `<span class="plan-indicator" onclick="event.stopPropagation(); openPlanForSession('${session.id}')" title="View plan"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>` : ''}
                 ${renderLoopBadge(session)}
                 ${linkedDocsCount > 0 ? `<span class="linked-docs-badge" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="${linkedDocsCount} linked document${linkedDocsCount > 1 ? 's' : ''}">${linkSvg(10)}${linkedDocsCount}</span>` : ''}
@@ -3080,7 +3128,7 @@ function renderKanban() {
       document.querySelector(`.task-card[data-task-id="${selectedTaskId}"][data-session-id="${selectedSessionId}"]`) ||
       document.querySelector(`.task-card[data-task-id="${selectedTaskId}"]`);
     if (card) {
-      if (focusZone === 'board') card.classList.add('selected');
+      if (focusZone === 'board' && !taskHighlightDimmed) card.classList.add('selected');
     } else {
       selectedTaskId = null;
       selectedSessionId = null;
@@ -3168,6 +3216,7 @@ function selectTask(taskId, sessionId) {
   if (prev) prev.classList.remove('selected');
   selectedTaskId = taskId;
   selectedSessionId = sessionId;
+  taskHighlightDimmed = false;
   if (!taskId) return;
   const card =
     document.querySelector(`.task-card[data-task-id="${taskId}"][data-session-id="${sessionId}"]`) ||
@@ -3408,6 +3457,8 @@ function setFocusZone(zone) {
       }
     }
   } else {
+    // Focusing the board is an explicit nav gesture — restore the highlight.
+    taskHighlightDimmed = false;
     // Session changed while in sidebar — reset stale selection
     if (selectedSessionId && selectedSessionId !== currentSessionId) {
       selectedTaskId = null;
@@ -3710,6 +3761,10 @@ async function addNote(event, taskId, sessionId) {
 function closeDetailPanel() {
   detailPanel.classList.remove('visible');
   document.getElementById('delete-task-btn').style.display = 'none';
+  // Keep the task selected for keyboard nav, but drop its white highlight.
+  taskHighlightDimmed = true;
+  const sel = document.querySelector('.task-card.selected');
+  if (sel) sel.classList.remove('selected');
 }
 
 let deleteTaskId = null;
@@ -5284,6 +5339,8 @@ function isWaitingFresh() {
 function showWaitingDetail() {
   if (!isWaitingFresh()) return;
   currentMsgDetailIdx = MSG_DETAIL_WAITING_IDX;
+  msgHighlightDimmed = false;
+  highlightSelectedMsg();
   const tool = currentWaiting.toolName || 'unknown';
   const label = getWaitingLabel(currentWaiting.kind, tool);
   const body = document.getElementById('msg-detail-body');
@@ -5923,9 +5980,9 @@ function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
     infoRows.push(['Team Config', teamConfig.configPath, { openPath: configDir, openFile: teamConfig.configPath }]);
   }
   const clickableStyle =
-    "font-family: 'IBM Plex Mono', monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; color: var(--accent-text); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;";
+    'font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; color: var(--accent-text); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;';
   const plainStyle =
-    "font-family: 'IBM Plex Mono', monospace; font-size: 12px; user-select: all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;";
+    'font-family: var(--mono); font-size: 12px; color: var(--text-primary); user-select: all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;';
   html += `<div class="team-modal-meta info-grid">`;
   infoRows.forEach(([label, value, opts]) => {
     const copyVal = escapeHtml(value).replace(/"/g, '&quot;');

package/public/style.css

@@ -18,16 +18,22 @@
   --accent-text: #f0a070;
   --accent-dim: rgba(232, 111, 51, 0.22);
   --accent-glow: rgba(232, 111, 51, 0.55);
+  --gold: #d9b667;
   --success: #3ecf8e;
   --success-dim: rgba(62, 207, 142, 0.18);
   --warning: #f0b429;
   --warning-dim: rgba(240, 180, 41, 0.18);
+  --danger: #ef5350;
+  --danger-dim: rgba(239, 83, 80, 0.18);
   --team: #60a5fa;
   --team-dim: rgba(96, 165, 250, 0.18);
   --plan: #86a886;
   --plan-dim: rgba(134, 168, 134, 0.18);
   --mono: 'IBM Plex Mono', monospace;
   --serif: 'Playfair Display', serif;
+  /* aliases: many rules reference --font-mono/--font-serif; keep them on-brand */
+  --font-mono: var(--mono);
+  --font-serif: var(--serif);
 }
 
 * {
@@ -85,7 +91,7 @@ body::before {
 .sidebar {
   width: var(--sidebar-width, 300px);
   background: var(--bg-surface);
-  border-right: 1px solid var(--border);
+  border-right: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
   box-shadow: 1px 0 12px rgba(0, 0, 0, 0.04);
   display: flex;
   flex-direction: column;
@@ -510,7 +516,7 @@ body::before {
   color: var(--text-secondary);
   margin-top: 2px;
   display: block;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+  font-family: var(--mono);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -656,10 +662,10 @@ body::before {
   gap: 8px;
 }
 .detail-context-stats .stat-label {
-  color: var(--text-tertiary);
+  color: var(--text-secondary);
 }
 .detail-context-stats .stat-value {
-  color: var(--text-secondary);
+  color: var(--text-primary);
 }
 .detail-context-stats .stat-divider {
   grid-column: 1 / -1;
@@ -811,7 +817,7 @@ body::before {
 
 /* #region HEADER */
 .view-header {
-  padding: 16px 24px;
+  padding: 12px 24px;
   border-bottom: 1px solid var(--border);
   background: var(--bg-surface);
   display: flex;
@@ -821,9 +827,11 @@ body::before {
 
 .view-title {
   font-family: var(--serif);
-  font-size: 26px;
+  font-size: 20px;
   font-weight: 400;
   letter-spacing: -0.03em;
+  line-height: 1.15;
+  text-wrap: balance;
   display: flex;
   align-items: center;
   gap: 12px;
@@ -1018,12 +1026,12 @@ body::before {
 
 /* #region TASK_CARD */
 .task-card {
-  padding: 16px;
-  padding-left: 18px;
+  padding: 10px 12px;
+  padding-left: 14px;
   background: var(--bg-surface);
   border: 1px solid var(--border);
   border-left: 2px solid var(--text-muted);
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1067,18 +1075,18 @@ body::before {
 .task-card.selected,
 .task-card.selected:hover {
   background: var(--bg-elevated);
-  border-color: var(--team);
-  border-left: 2px solid var(--team);
+  border-color: var(--accent);
+  border-left: 2px solid var(--accent);
   box-shadow:
-    0 0 0 1px var(--team-dim),
-    0 0 12px var(--team-dim);
+    0 0 0 1px var(--accent-dim),
+    0 0 12px var(--accent-dim);
   opacity: 1;
 }
 
 .task-id {
   font-size: 11px;
   color: var(--text-muted);
-  margin-bottom: 6px;
+  margin-bottom: 4px;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1099,9 +1107,9 @@ body::before {
 }
 
 .task-title {
-  font-size: 14px;
+  font-size: 13px;
   color: var(--text-primary);
-  line-height: 1.4;
+  line-height: 1.35;
 }
 
 .task-card.completed .task-title {
@@ -1112,15 +1120,15 @@ body::before {
 .task-session {
   font-size: 12px;
   color: var(--accent);
-  margin-top: 6px;
+  margin-top: 4px;
 }
 
 .task-active {
   display: flex;
   align-items: center;
   gap: 6px;
-  margin-top: 10px;
-  padding-top: 10px;
+  margin-top: 8px;
+  padding-top: 8px;
   border-top: 1px solid var(--border);
   font-size: 11px;
   font-weight: 500;
@@ -1147,7 +1155,7 @@ body::before {
   font-size: 12px;
   font-weight: 450;
   color: var(--text-tertiary);
-  margin-top: 8px;
+  margin-top: 6px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -1164,7 +1172,7 @@ body::before {
   width: var(--detail-panel-width, 540px);
   height: 100vh;
   background: var(--bg-surface);
-  border-left: 1px solid var(--border);
+  border-left: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
   box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
   display: none;
   flex-direction: column;
@@ -1441,13 +1449,10 @@ body::before {
   font-size: 12px;
 }
 
-.detail-desc pre code.hljs {
-  padding: 12px;
-  border-radius: 6px;
-}
-
+.detail-desc pre code.hljs,
 .detail-desc pre code {
-  background: var(--bg-elevated);
+  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
   padding: 12px;
   border-radius: 6px;
   display: block;
@@ -1455,9 +1460,10 @@ body::before {
 }
 
 .detail-desc code {
-  background: var(--bg-elevated);
-  padding: 2px 6px;
-  border-radius: 3px;
+  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
+  padding: 1px 5px;
+  border-radius: 4px;
   font-size: 0.9em;
 }
 
@@ -1588,18 +1594,19 @@ body::before {
   align-items: center;
   justify-content: center;
   font-size: 11px;
-  background: var(--bg-deep);
+  background: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: var(--team);
+  color: var(--text-muted);
   cursor: pointer;
   flex-shrink: 0;
   transition: all 0.15s ease;
 }
 
 .team-info-btn:hover {
-  background: var(--team-dim);
-  border-color: var(--team);
+  background: var(--bg-hover);
+  border-color: var(--border);
+  color: var(--text-secondary);
 }
 
 .plan-indicator {
@@ -1737,10 +1744,10 @@ body::before {
 }
 
 .loop-field-val code {
-  background: var(--bg);
+  background: var(--bg-deep);
   padding: 2px 6px;
   border-radius: 4px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--mono);
   font-size: 12px;
 }
 
@@ -1830,8 +1837,8 @@ body::before {
   font-size: 11px;
   font-weight: 500;
   border-radius: 999px;
-  border: 1px solid var(--border-color, rgba(127, 127, 127, 0.25));
-  background: var(--bg-secondary, rgba(127, 127, 127, 0.08));
+  border: 1px solid var(--border);
+  background: var(--bg-surface);
   color: var(--text-secondary);
   white-space: nowrap;
   line-height: 1.4;
@@ -2002,8 +2009,8 @@ body::before {
   right: 0;
   width: var(--message-panel-width, 540px);
   height: 100vh;
-  background: var(--bg-surface);
-  border-left: 1px solid var(--border);
+  background: var(--bg-deep);
+  border-left: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
   box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
   display: none;
   flex-direction: column;
@@ -2047,22 +2054,39 @@ body::before {
   padding: 8px 10px;
   border-radius: 6px;
   font-size: 12px;
-  line-height: 1.5;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
+  line-height: 1.4;
+  background: var(--bg-surface);
+  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
 }
 .msg-item.msg-user {
-  border-left: 3px solid var(--text-muted);
+  border-left: 3px solid var(--gold);
+}
+.msg-queued-tag {
+  margin-left: 8px;
+  padding: 0 5px;
+  border-radius: 3px;
+  font-size: 9px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--gold);
+  background: color-mix(in srgb, var(--gold) 14%, transparent);
 }
 .msg-item.msg-assistant {
   border-left: 3px solid var(--accent);
 }
 .msg-item.msg-tool {
-  border-left: 3px solid var(--team);
+  border-left: 2px solid color-mix(in srgb, var(--text-muted) 45%, transparent);
   font-size: 11px;
   padding: 5px 10px;
   color: var(--text-secondary);
 }
+.msg-item.selected,
+.msg-item.selected:hover {
+  background: var(--bg-elevated);
+  box-shadow:
+    0 0 0 1px var(--accent),
+    0 0 12px var(--accent-dim);
+}
 .msg-icon {
   flex-shrink: 0;
   width: 16px;
@@ -2093,7 +2117,7 @@ body::before {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--hover);
+  background: var(--bg-hover);
   color: var(--text-secondary);
   font-size: 10px;
   font-weight: 600;
@@ -2213,7 +2237,7 @@ body::before {
 }
 .pinned-item-unpin:hover {
   opacity: 1;
-  color: var(--danger, #e55);
+  color: var(--danger);
 }
 .msg-pin-btn.pinned svg,
 #msg-detail-pin-btn.active svg,
@@ -2313,7 +2337,7 @@ body::before {
 }
 .agent-tab-copy {
   margin-left: auto;
-  background: var(--surface-hover);
+  background: var(--bg-hover);
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: 4px 6px;
@@ -2431,8 +2455,9 @@ body::before {
   font-size: 0.85rem;
 }
 .msg-detail-pre-tinted {
-  background: rgba(127, 127, 127, 0.15);
-  border-radius: 4px;
+  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
+  border-radius: 6px;
   padding: 8px 10px;
 }
 .expand-toggle-btn {
@@ -2546,7 +2571,7 @@ body::before {
 .msg-waiting-discard:hover {
   /* biome-ignore lint/complexity/noImportantStyles: override parent hover opacity */
   opacity: 1 !important;
-  color: var(--danger, #e54d4d);
+  color: var(--danger);
 }
 .msg-waiting .msg-text {
   font-weight: 500;
@@ -2666,7 +2691,7 @@ body::before {
   display: inline-block;
   padding: 2px 10px;
   border-radius: 4px;
-  background: var(--bg-secondary);
+  background: var(--bg-surface);
   color: var(--text-secondary);
   font-size: 0.8rem;
   font-weight: 600;
@@ -2706,7 +2731,7 @@ body::before {
   left: 50%;
   transform: translateX(-50%);
   background: var(--accent);
-  color: var(--bg);
+  color: var(--bg-deep);
   border: none;
   border-radius: 16px;
   padding: 6px 16px;
@@ -2722,7 +2747,7 @@ body::before {
 .msg-loading-more {
   text-align: center;
   padding: 8px;
-  color: var(--text-dim);
+  color: var(--text-muted);
   font-size: 12px;
 }
 .msg-limit-banner {
@@ -2783,18 +2808,28 @@ body::before {
   flex-direction: column;
   gap: 3px;
   padding: 8px 12px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
+  background: var(--bg-deep);
+  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
   border-radius: 8px;
   white-space: nowrap;
   min-width: 0;
   overflow: hidden;
-  transition: opacity 0.3s;
+  transition:
+    opacity 0.3s,
+    border-color 0.15s ease;
   cursor: pointer;
   position: relative;
 }
 .agent-card:hover {
+  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
+}
+.agent-card.selected,
+.agent-card.selected:hover {
+  background: var(--bg-elevated);
   border-color: var(--accent);
+  box-shadow:
+    0 0 0 1px var(--accent-dim),
+    0 0 12px var(--accent-dim);
 }
 .agent-card.fading {
   opacity: 0.4;
@@ -2867,7 +2902,7 @@ body::before {
 .agent-dismiss-btn {
   font-size: 12px;
   padding: 4px 10px;
-  background: var(--bg-tertiary);
+  background: var(--bg-elevated);
   color: var(--text-secondary);
   border: 1px solid var(--border);
 }
@@ -2983,10 +3018,10 @@ body::before {
 /* #region LIGHT_THEME */
 body.light {
   --bg-deep: #e8e6e3;
-  --bg-surface: #f4f3f1;
-  --bg-elevated: #dddbd8;
+  --bg-surface: #efede9;
+  --bg-elevated: #fbfaf9;
   --bg-hover: #d2d0cc;
-  --border: #a09b94;
+  --border: #cfcbc4;
   --text-primary: #0a0a0a;
   --text-secondary: #444444;
   --text-tertiary: #666666;
@@ -2994,10 +3029,13 @@ body.light {
   --accent-text: #b85a20;
   --accent-dim: rgba(232, 111, 51, 0.18);
   --accent-glow: rgba(232, 111, 51, 0.5);
+  --gold: #a8842f;
   --success: #1a8a5a;
   --success-dim: rgba(26, 138, 90, 0.15);
   --warning: #b07d0a;
   --warning-dim: rgba(176, 125, 10, 0.15);
+  --danger: #c0392b;
+  --danger-dim: rgba(192, 57, 43, 0.15);
   --plan: #5a7a5a;
   --plan-dim: rgba(90, 122, 90, 0.15);
 }
@@ -3126,7 +3164,9 @@ body.light .msg-assistant .msg-text {
   max-width: 860px;
   max-height: 90vh;
   padding: 24px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  box-shadow:
+    0 16px 44px rgba(0, 0, 0, 0.38),
+    0 4px 12px rgba(0, 0, 0, 0.2);
   overflow-y: auto;
 }
 
@@ -3209,7 +3249,7 @@ body.light .msg-assistant .msg-text {
 }
 
 .preview-fm .fm-v {
-  color: var(--text, inherit);
+  color: var(--text-primary);
   word-break: break-word;
   white-space: pre-wrap;
 }
@@ -3397,13 +3437,14 @@ select.form-input option:checked {
 }
 
 .btn-secondary {
-  background: var(--bg-elevated);
-  color: var(--text-primary);
+  background: transparent;
+  color: var(--text-secondary);
   border: 1px solid var(--border);
 }
 
 .btn-secondary:hover {
   background: var(--bg-hover);
+  color: var(--text-primary);
   border-color: var(--text-muted);
 }
 
@@ -3434,7 +3475,7 @@ select.form-input option:checked {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: var(--bg-secondary);
+  background: var(--bg-surface);
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 10px 16px;
@@ -3449,7 +3490,7 @@ select.form-input option:checked {
 }
 
 .tool-stats-chip-val.failed {
-  color: var(--status-failed, #ef4444);
+  color: var(--danger);
 }
 
 .tool-stats-chip-lbl {
@@ -3490,14 +3531,14 @@ select.form-input option:checked {
 }
 
 .tool-stats-table tbody tr:nth-child(even) {
-  background: var(--bg-secondary);
+  background: var(--bg-surface);
 }
 
 .tool-stats-table tbody td {
   padding: 6px 10px;
   text-align: right;
   color: var(--text-primary);
-  border-bottom: 1px solid var(--border-subtle, var(--border));
+  border-bottom: 1px solid var(--border);
 }
 
 .tool-stats-table tbody td.tool-name {
@@ -3551,7 +3592,7 @@ select.form-input option:checked {
   width: 48px;
   height: 6px;
   border-radius: 3px;
-  background: var(--bg-hover, var(--bg-secondary));
+  background: var(--bg-hover);
   flex-shrink: 0;
   overflow: hidden;
 }
@@ -3584,11 +3625,11 @@ select.form-input option:checked {
   max-height: 50vh;
   resize: vertical;
   padding: 12px;
-  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+  font-family: var(--mono);
   font-size: 13px;
   line-height: 1.6;
   color: var(--text-primary);
-  background: var(--bg-primary);
+  background: var(--bg-deep);
   border: 1px solid var(--border);
   border-radius: 8px;
   outline: none;
@@ -3842,20 +3883,23 @@ select.form-input option:checked {
 @media (prefers-color-scheme: light) {
   body:not(.dark-forced) {
     --bg-deep: #e8e6e3;
-    --bg-surface: #f4f3f1;
-    --bg-elevated: #dddbd8;
+    --bg-surface: #efede9;
+    --bg-elevated: #fbfaf9;
     --bg-hover: #d2d0cc;
-    --border: #a09b94;
+    --border: #cfcbc4;
     --text-primary: #0a0a0a;
     --text-secondary: #444444;
     --text-tertiary: #666666;
     --text-muted: #888888;
     --accent-dim: rgba(232, 111, 51, 0.18);
     --accent-glow: rgba(232, 111, 51, 0.5);
+    --gold: #a8842f;
     --success: #1a8a5a;
     --success-dim: rgba(26, 138, 90, 0.15);
     --warning: #b07d0a;
     --warning-dim: rgba(176, 125, 10, 0.15);
+    --danger: #c0392b;
+    --danger-dim: rgba(192, 57, 43, 0.15);
     --plan: #5a7a5a;
     --plan-dim: rgba(90, 122, 90, 0.15);
   }
@@ -4197,8 +4241,8 @@ pre.mermaid svg {
 .session-item.kb-selected:hover,
 .session-item.active.kb-selected {
   background: var(--bg-elevated);
-  border-color: var(--team);
-  box-shadow: 0 0 0 1px var(--team-dim);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent-dim);
 }
 
 .session-item.kb-selected::before {

package/server.js

@@ -22,6 +22,7 @@ const {
   extractModelFromTranscript,
   readFullToolResult,
   readUserImage,
+  readCachedImage,
   updateLoopInfo,
   buildLoopInfoFromState
 } = require('./lib/parsers');
@@ -1912,6 +1913,14 @@ app.get('/api/sessions/:sessionId/user-image/:msgUuid/:blockIndex', (req, res) =
   res.end(buf);
 });
 
+app.get('/api/sessions/:sessionId/cached-image/:n', (req, res) => {
+  const img = readCachedImage(req.params.sessionId, req.params.n);
+  if (!img) return res.status(404).end();
+  res.setHeader('Content-Type', img.mediaType);
+  res.setHeader('Cache-Control', 'no-store');
+  res.end(img.buffer);
+});
+
 app.get('/api/version', (req, res) => {
   const pkg = require('./package.json');
   res.json({ version: pkg.version });