claude-code-kanban 4.7.1 → 4.9.0

package/lib/parsers.js

@@ -146,17 +146,49 @@ function parseImageMarkers(text) {
   return { refs, text: cleaned };
 }
 
+// Compact usage suffix for a task-notification chip: " · 22.3k tok · 6 tools · 119s".
+function formatTaskUsage(usage) {
+  if (!usage) return '';
+  const parts = [];
+  if (usage.subagentTokens != null) {
+    const t = usage.subagentTokens;
+    const tok = t >= 1000 ? (t / 1000).toFixed(1).replace(/\.0$/, '') + 'k' : String(t);
+    parts.push(tok + ' tok');
+  }
+  if (usage.toolUses != null) parts.push(usage.toolUses + (usage.toolUses === 1 ? ' tool' : ' tools'));
+  if (usage.durationMs != null) parts.push(Math.round(usage.durationMs / 1000) + 's');
+  return parts.length ? ' · ' + parts.join(' · ') : '';
+}
+
 function pushUserMessage(messages, text, timestamp, sysLabel, extras) {
   if (sysLabel === '__skip__') return;
-  const safeText = text || '';
+  let safeText = text || '';
+  let label = sysLabel;
+  // Background-task completion notifications are harness events, not user input.
+  // Whichever path delivered them (normal type:'user' or a queued enqueue), show
+  // a rich summary+usage chip and surface the agent's actual result as the body —
+  // never the raw <task-notification> envelope under a person icon.
+  const notif = parseTaskNotification(safeText);
+  if (notif) {
+    const base = notif.summary || (notif.status ? `Background task ${notif.status}` : 'Background task notification');
+    label = base + formatTaskUsage(notif.usage);
+    safeText = notif.result || base;
+  }
   const truncated = safeText.length > USER_TEXT_MAX;
   const msg = {
     type: 'user',
     text: truncated ? safeText.slice(0, USER_TEXT_MAX) + '...' : safeText,
     fullText: truncated ? safeText : null,
     timestamp,
-    ...(sysLabel && { systemLabel: sysLabel })
+    ...(label && { systemLabel: label })
   };
+  // Tag task-notifications so the client can group the duplicate enqueue+delivered
+  // pair (same taskId) and join the agent type from the agents list.
+  if (notif) {
+    msg.taskNotification = true;
+    if (notif.taskId) msg.taskId = notif.taskId;
+    if (notif.status) msg.taskStatus = notif.status;
+  }
   if (extras) {
     if (extras.uuid) msg.uuid = extras.uuid;
     if (extras.images && extras.images.length) msg.images = extras.images;
@@ -435,6 +467,58 @@ function readSessionInfoFromJsonl(jsonlPath) {
   return result;
 }
 
+// Background-task completion records arrive as a user message whose content is a
+// <task-notification> envelope. Rendering the raw text leaks the tag values as a
+// run-on line (task-id + tool-use-id + output-file path) plus the <usage> numbers
+// mashed together (subagent_tokens|tool_uses|duration_ms with tags stripped).
+// Parse the envelope into structured fields so the UI can show just the agent's
+// result and a clean metadata line instead of the raw wrapper. Returns null when
+// the text is not a task-notification.
+function parseTaskNotification(text) {
+  if (typeof text !== 'string' || !text.includes('<task-notification>')) return null;
+  // Metadata fields are machine-generated single-line values that appear before
+  // the free-form <result>, so first-match non-greedy is safe for them.
+  const pick = (tag) => {
+    const m = text.match(new RegExp(`<${tag}>([\\s\\S]*?)<\\/${tag}>`));
+    return m ? m[1].trim() : null;
+  };
+  // <result> and <usage> carry UNescaped agent text that can itself contain
+  // literal "</result>" / "<usage>" (e.g. an agent describing this very format).
+  // The real closing tags are always the LAST occurrence, so match greedily and
+  // take the last <usage> block to avoid truncating on embedded markers.
+  const lastBlock = (tag) => {
+    const m = text.match(new RegExp(`<${tag}>([\\s\\S]*)<\\/${tag}>`));
+    return m ? m[1] : null;
+  };
+  let usage = null;
+  const usageRaw = lastBlock('usage');
+  if (usageRaw != null) {
+    const uNum = (tag) => {
+      // Take the LAST match: the real <usage> wins over any example block an agent
+      // embedded in its result.
+      const last = [...usageRaw.matchAll(new RegExp(`<${tag}>([\\s\\S]*?)<\\/${tag}>`, 'g'))].at(-1);
+      if (!last) return null;
+      const n = Number(last[1]);
+      return Number.isFinite(n) ? n : null;
+    };
+    usage = {
+      subagentTokens: uNum('subagent_tokens'),
+      toolUses: uNum('tool_uses'),
+      durationMs: uNum('duration_ms')
+    };
+  }
+  const resultRaw = lastBlock('result');
+  return {
+    taskId: pick('task-id'),
+    toolUseId: pick('tool-use-id'),
+    outputFile: pick('output-file'),
+    status: pick('status'),
+    summary: pick('summary'),
+    result: resultRaw != null ? resultRaw.trim() : null,
+    usage
+  };
+}
+
 function getSystemMessageLabel(text) {
   const taskMatch = text.match(/<summary>([^<]+)<\/summary>/);
   if (taskMatch) return taskMatch[1].trim();
@@ -1044,11 +1128,25 @@ function buildSessionDigest(jsonlPath) {
           const obj = JSON.parse(line);
           const tur = obj.toolUseResult;
           if (tur?.agentId) {
+            // Foreground agents report their cost on the completion toolUseResult
+            // (totalTokens/totalToolUseCount/totalDurationMs) — the same numbers a
+            // background agent surfaces via its <task-notification> <usage> block. Keep
+            // the raw numbers (for the agent modal's per-stat chips) and a formatted
+            // one-liner via the shared formatter (for the inline message row):
+            // " · 31.5k tok · 5 tools · 34s".
+            const usage = {};
+            if (tur.totalTokens != null) usage.tokens = tur.totalTokens;
+            if (tur.totalToolUseCount != null) usage.tools = tur.totalToolUseCount;
+            if (tur.totalDurationMs != null) usage.durationMs = tur.totalDurationMs;
+            const hasUsage = Object.keys(usage).length > 0;
+            const usageText = hasUsage
+              ? formatTaskUsage({ subagentTokens: usage.tokens, toolUses: usage.tools, durationMs: usage.durationMs })
+              : null;
             const blocks = obj.message?.content;
             if (Array.isArray(blocks)) {
               for (const b of blocks) {
                 if (b.type === 'tool_result' && b.tool_use_id && !map[b.tool_use_id]) {
-                  map[b.tool_use_id] = { agentId: tur.agentId, prompt: tur.prompt || null };
+                  map[b.tool_use_id] = { agentId: tur.agentId, prompt: tur.prompt || null, usage: hasUsage ? usage : null, usageText };
                 }
               }
             }
@@ -1333,6 +1431,8 @@ module.exports = {
   parseTeamConfig,
   parseSessionsIndex,
   parseJsonlLine,
+  parseTaskNotification,
+  getSystemMessageLabel,
   readSessionInfoFromJsonl,
   readRecentMessages,
   readMessagesPage,

package/package.json

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

package/public/app.js

@@ -945,6 +945,130 @@ function cleanMessageText(text) {
     .trim();
 }
 
+// A GFM table delimiter row (|---|:--:|): only pipes/dashes/colons/spaces, with
+// at least one dash. Pairs with a preceding line that has cells to mark a table.
+function isTableDelimiter(line) {
+  const l = (line || '').trim();
+  return l.includes('-') && /^\|?[ :|-]+\|?$/.test(l);
+}
+
+// Cut a string to at most `max` chars at a word boundary (no mid-word chops).
+function truncateAtWord(s, max) {
+  if (s.length <= max) return s;
+  const cut = s.slice(0, max);
+  const sp = cut.lastIndexOf(' ');
+  return (sp > max * 0.6 ? cut.slice(0, sp) : cut).trimEnd();
+}
+
+// Build a markdown preview for an assistant message: render real markdown but
+// truncate on clean structural boundaries so the feed stays compact and the
+// output is always valid markdown (never cut mid code-fence or mid table-row).
+// Prose is bounded by a line count AND a char budget (long single paragraphs are
+// cut at a word boundary). Returns { md, remainder } where remainder is a short
+// label describing what was cut (e.g. "+12 lines"), or '' when nothing was cut.
+function buildAssistantPreview(text) {
+  const lines = stripAnsi(text || '')
+    .replace(/\r/g, '')
+    .split('\n');
+  const MAX_LINES = 5; // non-blank content lines kept before truncating
+  const MAX_CHARS = 280; // total prose/code/table chars kept
+  const MAX_ROWS = 3; // table body rows
+  const MAX_CODE_LINES = 8; // lines kept inside a fenced code block
+  const countRest = (idx) => {
+    let c = 0;
+    for (let j = idx; j < lines.length; j++) if (lines[j].trim()) c++;
+    return c;
+  };
+  const pluralize = (n, word) => `+${n} ${word}${n > 1 ? 's' : ''}`;
+  const out = [];
+  let remainder = '';
+  let content = 0;
+  let chars = 0;
+  let i = 0;
+
+  for (; i < lines.length; i++) {
+    const line = lines[i];
+    const trimmed = line.trim();
+    if (content >= MAX_LINES || chars >= MAX_CHARS) {
+      const rest = countRest(i);
+      if (rest) remainder = pluralize(rest, 'line');
+      break;
+    }
+
+    // Fenced code block — copy verbatim (capped), never break the fence open.
+    const fence = trimmed.match(/^(```|~~~)/);
+    if (fence) {
+      const marker = fence[1];
+      out.push(line);
+      let codeLines = 0;
+      let dropped = 0;
+      // Advance to the real closing fence, keeping at most MAX_CODE_LINES lines,
+      // so leftover code isn't re-parsed as top-level markdown after the cap.
+      for (i++; i < lines.length && !lines[i].trim().startsWith(marker); i++) {
+        if (codeLines < MAX_CODE_LINES) {
+          out.push(lines[i]);
+          codeLines++;
+          chars += lines[i].length;
+        } else {
+          dropped++;
+        }
+      }
+      out.push(marker); // close the fence (covers capped / unterminated blocks)
+      content++;
+      if (dropped) {
+        // Stop at the truncated code block rather than resuming after the gap.
+        remainder = pluralize(dropped, 'code line');
+        break;
+      }
+      continue;
+    }
+
+    // Table — keep header + separator + up to MAX_ROWS body rows.
+    if (line.includes('|') && isTableDelimiter(lines[i + 1])) {
+      out.push(line, lines[i + 1]);
+      content++;
+      chars += line.length;
+      i++;
+      let rows = 0;
+      let droppedRows = 0;
+      while (lines[i + 1]?.includes('|')) {
+        if (rows >= MAX_ROWS) {
+          // Skip remaining rows so they aren't re-rendered as prose lines.
+          droppedRows++;
+          i++;
+          continue;
+        }
+        out.push(lines[++i]);
+        rows++;
+      }
+      if (droppedRows) {
+        // Stop at the truncated table — don't resume with later content across
+        // the gap; the "+N rows" chip signals the table continues.
+        remainder = pluralize(droppedRows, 'row');
+        break;
+      }
+      continue;
+    }
+
+    // Prose / list / heading — bound by the remaining char budget, cutting a
+    // long line at a word boundary rather than rendering a giant paragraph.
+    const remaining = MAX_CHARS - chars;
+    if (trimmed && line.length > remaining) {
+      out.push(truncateAtWord(line, remaining));
+      // Mid-line word cut — line counts would be misleading; count only the
+      // additional full lines that follow, else just signal "more".
+      const rest = countRest(i + 1);
+      remainder = rest ? pluralize(rest, 'line') : 'more';
+      break;
+    }
+    out.push(line);
+    chars += line.length;
+    if (trimmed) content++;
+  }
+
+  return { md: out.join('\n').trim(), remainder };
+}
+
 function renderMsgPinBtn(m, i) {
   const pinned = isPinned(m);
   return `<button class="msg-pin-btn${pinned ? ' pinned' : ''}" onclick="event.stopPropagation();togglePin(${i})" title="${pinned ? 'Unpin' : 'Pin'} message">${PIN_SVG}</button>`;
@@ -1019,10 +1143,17 @@ function toolGroupKey(m) {
 
 function renderToolItem(m, i, compact) {
   const toolDetail = getToolDetail(m.tool, m.params, m.detail);
+  // m.agentId is resolved server-side even while the agent is still running (correlated
+  // from the live agent-activity files), so the ⇗ link, agent-log button, and modal
+  // click all light up DURING the run, identical to post-completion.
   const agentLink =
     m.tool === 'Agent' && m.agentId
       ? ` <span class="msg-agent-link" title="View agent" onclick="event.stopPropagation();showAgentModal('${escapeHtml(m.agentId)}')">⇗</span>`
       : '';
+  // Usage chip (tokens · tools · duration) on completed Agent rows — same stats a
+  // background agent shows, sourced here from the foreground toolUseResult.
+  const agentUsage =
+    m.tool === 'Agent' && m.agentUsage ? `<span class="msg-agent-usage">${escapeHtml(m.agentUsage)}</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};` : '';
@@ -1035,7 +1166,7 @@ function renderToolItem(m, i, compact) {
   const pinBtn = renderMsgPinBtn(m, i);
   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 class="msg-body"><div class="msg-text">${escapeHtml(m.tool)}${toolDetail}${agentLink}${agentUsage}</div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${agentLogBtn}${pinBtn}
     </div>`;
 }
 
@@ -1075,6 +1206,53 @@ function renderMessageList(messages) {
       continue;
     }
 
+    // Background task-notifications: the harness writes each one twice (an enqueue
+    // record + the delivered type:'user' record, same taskId). Collapse a run of
+    // same-taskId notifications into one ×N group (like tool groups), prefixed with
+    // the agent type joined from the loaded agents list.
+    if (m.taskNotification) {
+      let runEnd = i + 1;
+      while (runEnd < messages.length && messages[runEnd].taskNotification && messages[runEnd].taskId === m.taskId)
+        runEnd++;
+      const count = runEnd - i;
+      const agentType = m.taskId ? currentAgents.find((a) => a.agentId === m.taskId)?.type : null;
+      const typePrefix = agentType ? `${escapeHtml(agentType)} · ` : '';
+      const labelHtml = `${typePrefix}<code>${escapeHtml(m.systemLabel || 'Background task')}</code>`;
+      // Shared header row for both the single notification and the ×N group header.
+      const headerRow = (extraClass, onclick, badge, queuedTag) =>
+        `<div class="msg-item msg-system${extraClass}" ${onclick} style="cursor:pointer">
+            ${ICON_AGENT}
+            <div class="msg-body"><div class="msg-text">${labelHtml}${badge}</div><div class="msg-time">${formatDate(m.timestamp)}${queuedTag}</div></div>${renderMsgPinBtn(m, i)}
+          </div>`;
+
+      if (count >= 2) {
+        const gid = `task-group-${i}`;
+        const items = Array.from({ length: count }, (_, j) => {
+          const r = messages[i + j];
+          const idx = i + j;
+          return `<div class="msg-item msg-system msg-tool-grouped" data-msg-idx="${idx}" onclick="msgDetailFollowLatest=false;showMsgDetail(${idx})" style="cursor:pointer">
+              ${ICON_AGENT}
+              <div class="msg-body"><div class="msg-text">${r.queued ? 'queued' : 'delivered'}</div><div class="msg-time">${formatDate(r.timestamp)}</div></div>
+            </div>`;
+        }).join('');
+        parts.push(`<div class="msg-tool-group">
+            ${headerRow(' msg-tool-group-header', `onclick="toggleToolGroup('${gid}')"`, `<span class="tool-count-badge">×${count}</span>`, '')}
+            <div class="msg-tool-group-items" id="${gid}">${items}</div>
+          </div>`);
+        i = runEnd;
+        continue;
+      }
+
+      // Not collapsed (the enqueue/delivered pair wasn't consecutive): tag the queued
+      // record with the same golden marker used for other queued messages.
+      const queuedTag = m.queued ? '<span class="msg-queued-tag">queued</span>' : '';
+      parts.push(
+        headerRow('', `data-msg-idx="${i}" onclick="msgDetailFollowLatest=false;showMsgDetail(${i})"`, '', queuedTag),
+      );
+      i++;
+      continue;
+    }
+
     const clickable = `data-msg-idx="${i}" onclick="msgDetailFollowLatest=false;showMsgDetail(${i})" style="cursor:pointer"`;
     const pinBtn = renderMsgPinBtn(m, i);
     if (m.type === 'user') {
@@ -1108,9 +1286,16 @@ function renderMessageList(messages) {
           </div>`);
       }
     } else if (m.type === 'assistant') {
+      const preview = buildAssistantPreview(m.fullText || m.text);
+      const moreChip = preview.remainder ? `<div class="msg-md-more">${escapeHtml(preview.remainder)}</div>` : '';
+      const bodyHtml = preview.md
+        ? `<div class="msg-text msg-text-md">
+            <div class="msg-md-content rendered-md${preview.remainder ? ' is-truncated' : ''}">${renderMarkdown(preview.md)}</div>${moreChip}
+          </div>`
+        : `<div class="msg-text">${escapeHtml(cleanMessageText(m.text))}</div>`;
       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 class="msg-body">${bodyHtml}<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;
@@ -1309,6 +1494,8 @@ const ICON_CHECKMARK =
   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M20 6L9 17l-5-5"/></svg>';
 const ICON_AGENT_WAITING =
   '<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"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>';
+const ICON_AGENT_ACTIVE =
+  '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>';
 const ICON_CHAT =
   '<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>';
 const TOOL_ICONS = {
@@ -2519,10 +2706,18 @@ function showAgentModal(agentId) {
     return `<span class="agent-chip${cls}"${style}${title}>${labelHtml}<span class="agent-chip-val">${value}</span></span>`;
   };
 
+  // Agent cost stats live on the launch row's message (resolved from the completion
+  // toolUseResult), not on the agent-activity record — so read them from there.
+  const agentMsg = currentMessages.find((m) => m.tool === 'Agent' && m.agentId === agentId);
+  const usageStats = agentMsg?.agentUsageStats || null;
+  const fmtTok = (t) => (t >= 1000 ? `${(t / 1000).toFixed(1).replace(/\.0$/, '')}k` : `${t}`);
+
   const chips = [];
   if (agent.agentId) chips.push(chip('id', escapeHtml(shortId), { cls: 'agent-chip-mono', title: agent.agentId }));
   chips.push(chip('', escapeHtml(agent.status), { cls: `agent-chip-status agent-chip-${agent.status}` }));
   chips.push(chip('⏱', formatDuration(elapsed)));
+  if (usageStats?.tokens != null) chips.push(chip('tokens', fmtTok(usageStats.tokens), { cls: 'agent-chip-mono' }));
+  if (usageStats?.tools != null) chips.push(chip('tools', String(usageStats.tools), { cls: 'agent-chip-mono' }));
   if (shortModel) chips.push(chip('model', escapeHtml(shortModel), { cls: 'agent-chip-mono' }));
   if (agent.agentName) {
     const c = getOwnerColor(agent.agentName);
@@ -2535,8 +2730,6 @@ function showAgentModal(agentId) {
   if (started) chips.push(chip('started', started.toLocaleTimeString()));
   if (stopped) chips.push(chip('stopped', stopped.toLocaleTimeString()));
 
-  const agentMsg = currentMessages.find((m) => m.tool === 'Agent' && m.agentId === agentId);
-
   let html = `<div class="agent-chips">${chips.join('')}</div>`;
 
   const promptText = stripTeammateWrapper(agentMsg?.agentPrompt || agent.prompt || null);
@@ -2818,6 +3011,7 @@ function renderSessions() {
                 ${hasScratchpad ? `<span class="scratchpad-badge" onclick="event.stopPropagation(); openSessionScratchpad('${session.id}')" title="Open scratchpad"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></span>` : ''}
                 ${session.planSourceSessionId ? `<span class="plan-indicator" title="Implements plan — click to reveal plan session" onclick="event.stopPropagation(); revealPlanSession('${escapeHtml(session.planSourceSessionId)}')"><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>` : ''}
                 ${session.hasWaitingForUser ? `<span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>` : ''}
+                ${session.hasRunningAgents && !session.hasWaitingForUser ? `<span class="agent-badge agent-badge-active" title="Agents running">${ICON_AGENT_ACTIVE}</span>` : ''}
                 ${isLive || session.hasRunningAgents ? `<span class="pulse" title="${isLive ? 'Live' : 'Active agents'}"></span>` : ''}
               </span>
               <div class="progress-bar"><div class="progress-fill" style="width: ${percent}%"></div></div>
@@ -5162,6 +5356,11 @@ function setupEventSource() {
             refreshProjectAgents();
           } else if (currentSessionId && pendingAgentSessionIds.has(currentSessionId)) {
             fetchAgents(currentSessionId);
+            // An agent starting/stopping adds its Agent tool_use + completion rows to
+            // the transcript. Refresh the message log on the same signal so they appear
+            // at start, not only when an unrelated metadata/context refresh coincides
+            // with completion.
+            if (!agentLogMode) fetchMessages(currentSessionId);
           }
           pendingAgentSessionIds.clear();
         }, 500);
@@ -5787,6 +5986,69 @@ function loadTheme() {
   updateThemeIcon();
   updateThemeColor(document.body.classList.contains('light'));
   syncHljsTheme();
+  buildThemeMenu();
+  const colorTheme = localStorage.getItem('color-theme');
+  if (colorTheme) document.body.dataset.colorTheme = colorTheme;
+  syncColorThemeSelect(colorTheme || 'ember');
+}
+
+const COLOR_THEMES = [
+  ['ember', 'Ember'],
+  ['gruvbox', 'Gruvbox'],
+  ['catppuccin', 'Catppuccin'],
+  ['tokyo-night', 'Tokyo Night'],
+  ['solarized', 'Solarized'],
+  ['dracula', 'Dracula'],
+  ['nord', 'Nord'],
+  ['rose-pine', 'Rosé Pine'],
+  ['everforest', 'Everforest'],
+  ['kanagawa', 'Kanagawa'],
+  ['one-dark', 'One Dark'],
+  ['night-owl', 'Night Owl'],
+  ['monokai', 'Monokai Pro'],
+  ['github', 'GitHub'],
+  ['ayu', 'Ayu'],
+  ['vitesse', 'Vitesse'],
+  ['synthwave', "Synthwave '84"],
+];
+
+function buildThemeMenu() {
+  const menu = document.getElementById('themeMenu');
+  menu.innerHTML = COLOR_THEMES.map(
+    ([id, label]) =>
+      `<button type="button" class="theme-menu-item" data-theme-id="${id}"
+         onclick="event.stopPropagation(); setColorTheme('${id}'); toggleThemeMenu()">
+         <span class="theme-swatch theme-swatch-${id}"><i class="sw-bg"></i><i class="sw-accent"></i><i class="sw-ink"></i></span>${label}
+       </button>`,
+  ).join('');
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function toggleThemeMenu(e) {
+  e?.stopPropagation();
+  const menu = document.getElementById('themeMenu');
+  const open = menu.classList.toggle('open');
+  if (open) {
+    document.addEventListener('click', () => menu.classList.remove('open'), { once: true });
+  }
+}
+
+function syncColorThemeSelect(id) {
+  document.querySelectorAll('.theme-menu-item').forEach((el) => {
+    el.classList.toggle('on', el.dataset.themeId === (id || 'ember'));
+  });
+}
+
+// 'ember' (the :root default) has no override block — selecting it clears the attribute.
+function setColorTheme(id) {
+  if (!id || id === 'ember') {
+    delete document.body.dataset.colorTheme;
+    localStorage.removeItem('color-theme');
+  } else {
+    document.body.dataset.colorTheme = id;
+    localStorage.setItem('color-theme', id);
+  }
+  syncColorThemeSelect(id);
 }
 
 //#endregion
@@ -6866,21 +7128,35 @@ window.hubNavigate = function hubNavigate(app, url) {
 
 (function initHubTheme() {
   const getTheme = () => (document.body.classList.contains('light') ? 'light' : 'dark');
+  const getColorTheme = () => document.body.dataset.colorTheme || 'ember';
   const hubOrigin = () => (window.__HUB__?.url ? new URL(window.__HUB__.url).origin : null);
+  // lastTheme/lastColorTheme are updated synchronously when applying a hub
+  // message, so the (async) observer sees no diff and doesn't echo it back.
   let lastTheme = getTheme();
+  let lastColorTheme = getColorTheme();
   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();
+    if (typeof e.data.colorTheme === 'string' && e.data.colorTheme !== getColorTheme()) {
+      setColorTheme(e.data.colorTheme);
+      lastColorTheme = getColorTheme();
+    }
+    if (getTheme() !== e.data.theme) {
+      window.toggleTheme();
+      lastTheme = getTheme();
+    }
   });
   new MutationObserver(() => {
     const t = getTheme();
-    if (t === lastTheme) return;
+    const ct = getColorTheme();
+    if (t === lastTheme && ct === lastColorTheme) return;
     lastTheme = t;
+    lastColorTheme = ct;
     const origin = hubOrigin();
-    if (origin) window.parent.postMessage({ type: 'hub:theme', theme: t }, origin);
-  }).observe(document.body, { attributes: true, attributeFilter: ['class'] });
+    if (origin) window.parent.postMessage({ type: 'hub:theme', theme: t, colorTheme: ct }, origin);
+  }).observe(document.body, {
+    attributes: true,
+    attributeFilter: ['class', 'data-color-theme'],
+  });
 })();
 // #endregion HUB_INTEGRATION

package/public/index.html

@@ -15,6 +15,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Playfair+Display:wght@400;500;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/style.css">
+  <link rel="stylesheet" href="/themes.css">
   <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github-dark.min.css" id="hljs-theme-dark">
@@ -143,6 +144,10 @@
                 <ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
               </svg>
             </button>
+            <span class="icon-btn theme-picker" id="themePickerBtn" title="Color theme" onclick="toggleThemeMenu(event)">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>
+              <div class="theme-menu" id="themeMenu"></div>
+            </span>
             <button id="theme-toggle" class="icon-btn" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle theme">
               <svg id="theme-icon-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>