claude-code-kanban 4.7.0 → 4.8.0

package/README.md

@@ -34,7 +34,7 @@ All changes are non-destructive — existing settings are preserved.
 npx claude-code-kanban --open
 ```
 
-Open http://localhost:3456 (or use `--open` to auto-launch the browser).
+Open http://localhost:3541 (or use `--open` to auto-launch the browser).
 
 ### 3. Use Claude Code as usual
 
@@ -64,7 +64,7 @@ npx claude-code-kanban --open            # Auto-open browser
 npx claude-code-kanban --dir=~/.claude-work  # Custom Claude config dir
 ```
 
-If port 3456 is in use, the server falls back to a random available port.
+If port 3541 is in use, the server falls back to a random available port.
 
 ### Global install
 

package/cli.js

@@ -145,7 +145,7 @@ function printTopHelp() {
   console.log('  --help, -h            Show help (top-level, noun-level, or leaf-level)');
   console.log('  --version, -v         Print version and exit');
   console.log('\nServer mode (no subcommand):');
-  console.log('  --port <n>            Port to listen on (default 3456)');
+  console.log('  --port <n>            Port to listen on (default 3541)');
   console.log('  --dir <path>          Override Claude config dir (default ~/.claude)');
   console.log('  --open                Open browser on start');
   console.log('  --install, --uninstall    Install or remove the agent-spy hook');
@@ -187,7 +187,7 @@ function getArgValue(args, name) {
   return args[idx + 1] && !args[idx + 1].startsWith('--') ? args[idx + 1] : null;
 }
 
-function cliPort() { return process.env.PORT || 3456; }
+function cliPort() { return process.env.PORT || 3541; }
 function unreachable() { return `Cannot reach cck server on port ${cliPort()}. Start it first with "claude-code-kanban".`; }
 
 class CliUnreachable extends Error { constructor() { super(unreachable()); this.code = 'unreachable'; } }

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.0",
+  "version": "4.8.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "bin": {

package/plugin/plugins/claude-code-kanban/.claude-plugin/plugin.json

@@ -1,5 +1,5 @@
 {
   "name": "claude-code-kanban",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Agent activity tracking for claude-code-kanban dashboard"
 }

package/plugin/plugins/claude-code-kanban/skills/kanban/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: kanban
 description: Drive the claude-code-kanban browser dashboard from this Claude session. Use this skill when the user mentions "kanban" together with "session" — e.g. "open this session in kanban", "show kanban", "focus current session in kanban", "pin/unpin a session in kanban", "preview this file in kanban", or asks to peek/view a kanban session.
-compatibility: Requires the `claude-code-kanban` CLI on PATH and the server running locally (default port 3456).
+compatibility: Requires the `claude-code-kanban` CLI on PATH and the server running locally (default port 3541).
 ---
 
 # Kanban Skill
@@ -69,6 +69,6 @@ Add `--json` to any list-style verb for machine-readable output.
 
 ## Troubleshooting
 
-- **"Cannot reach cck server on port 3456"** → ask the user to start it: `claude-code-kanban` (or `npm start` in the cck repo).
+- **"Cannot reach cck server on port 3541"** → ask the user to start it: `claude-code-kanban` (or `npm start` in the cck repo).
 - **Different port** → set `PORT=<n>` env var when invoking the CLI.
 - **Ambiguous session prefix (HTTP 409)** → use the full id. With `${CLAUDE_SESSION_ID}` this won't happen.

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

package/public/style.css

@@ -2101,7 +2101,63 @@ body::before {
   overflow: hidden;
 }
 .msg-assistant .msg-text {
-  color: var(--accent-text);
+  color: var(--text-primary);
+}
+.msg-text-md {
+  display: block; /* override .msg-text -webkit-box clamp */
+  -webkit-line-clamp: none;
+  white-space: normal; /* override .msg-text pre-wrap */
+  font-size: 12px;
+}
+/* Element spacing/borders come from .rendered-md (also on .msg-md-content);
+   these are only the compact-feed deltas: smaller type + code/quote chrome. */
+.msg-text-md table,
+.msg-text-md pre,
+.msg-text-md code {
+  font-size: 11px;
+}
+.msg-text-md h1,
+.msg-text-md h2,
+.msg-text-md h3,
+.msg-text-md h4,
+.msg-text-md h5,
+.msg-text-md h6 {
+  font-size: 12px;
+  font-weight: 600;
+}
+.msg-text-md pre {
+  padding: 6px 8px;
+  background: var(--bg-hover);
+  border-radius: 4px;
+  overflow-x: auto;
+}
+.msg-text-md blockquote {
+  padding-left: 8px;
+  border-left: 2px solid var(--border);
+  color: var(--text-secondary);
+}
+.msg-md-content > :first-child {
+  margin-top: 0;
+}
+.msg-md-content > :last-child {
+  margin-bottom: 0;
+}
+/* Soften just the bottom edge of a truncated preview so it reads as "continues"
+   without obscuring the last line of text. */
+.msg-md-content.is-truncated {
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 0.85em), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 0.85em), transparent);
+}
+.msg-md-more {
+  display: block;
+  width: fit-content;
+  margin: 3px auto 0 0;
+  padding: 1px 8px;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: var(--bg-hover);
+  border-radius: 9px;
 }
 .msg-tool .msg-text {
   color: var(--text-secondary);
@@ -2147,6 +2203,12 @@ body::before {
 .msg-agent-link:hover {
   opacity: 1;
 }
+.msg-agent-usage {
+  color: var(--text-muted);
+  font-size: 10px;
+  opacity: 0.55;
+  margin-left: 6px;
+}
 .msg-pin-btn {
   flex-shrink: 0;
   background: none;
@@ -2912,6 +2974,10 @@ body::before {
   color: var(--warning);
   animation: agent-badge-pulse 1.6s ease-in-out infinite;
 }
+.agent-badge-active {
+  color: var(--accent, var(--text-secondary));
+  animation: agent-badge-pulse 1.6s ease-in-out infinite;
+}
 @keyframes agent-badge-pulse {
   0%,
   100% {

package/server.js

@@ -38,7 +38,7 @@ if (require("./cli").runCli(process.argv)) return;
 
 
 const app = express();
-const PORT = process.env.PORT || 3456;
+const PORT = process.env.PORT || 3541;
 
 // Parse --dir flag for custom Claude directory
 function getClaudeDir() {
@@ -120,6 +120,16 @@ function readAgentJsonl(filePath) {
   return merged;
 }
 
+// Agent-activity record files in a session dir, excluding the `_`-prefixed sidecars
+// (_waiting.json, _name-*). Returns [] if the dir is missing/unreadable.
+function listAgentFiles(agentDir) {
+  try {
+    return readdirSync(agentDir).filter((f) => f.endsWith('.jsonl') && !f.startsWith('_'));
+  } catch (_) {
+    return [];
+  }
+}
+
 function persistAgent(dir, agent) {
   const file = path.join(dir, agent.agentId + '.jsonl');
   fs.appendFile(file, JSON.stringify({ ...agent, event: 'server-update' }) + '\n', 'utf8').catch(() => {});
@@ -1284,7 +1294,7 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
     const isTeam = !!teamConfig;
     const teamMemberNames = isTeam ? new Set(teamConfig.members.map(m => m.name)) : null;
 
-    const files = readdirSync(agentDir).filter(f => f.endsWith('.jsonl') && !f.startsWith('_'));
+    const files = listAgentFiles(agentDir);
     const agents = [];
     for (const file of files) {
       try {
@@ -1738,6 +1748,8 @@ app.get('/api/sessions/:sessionId/messages', (req, res) => {
       if (entry) {
         msg.agentId = entry.agentId;
         if (entry.description) msg.agentDescription = entry.description;
+        if (entry.usageText) msg.agentUsage = entry.usageText;
+        if (entry.usage) msg.agentUsageStats = entry.usage;
         if (entry.prompt && !msg.agentPrompt) msg.agentPrompt = entry.prompt;
         try {
           const agentFile = path.join(agentDir, entry.agentId + '.jsonl');
@@ -1752,6 +1764,33 @@ app.get('/api/sessions/:sessionId/messages', (req, res) => {
         } catch (_) {}
       }
     }
+    // Mid-run fallback: the progressMap only carries agentId once the agent completes
+    // (this build writes no agent_progress lines), so a still-running subagent's launch
+    // row has no agentId yet — leaving its ⇗ link / agent modal inert until completion.
+    // Correlate by PROMPT against the live agent-activity files (which know the agentId
+    // from launch): the activity prompt is the launch prompt plus appended harness
+    // boilerplate, so the tool_use prompt is a prefix. Resolving agentId here makes the
+    // row behave identically while running as it does after it finishes.
+    const unresolved = agentMessages.filter(m => !m.agentId && m.agentPrompt);
+    if (unresolved.length && existsSync(agentDir)) {
+      const activity = listAgentFiles(agentDir)
+        .map((f) => { try { return readAgentJsonl(path.join(agentDir, f)); } catch (_) { return null; } })
+        .filter((a) => a && a.agentId && a.prompt);
+      const usedIds = new Set(agentMessages.map(m => m.agentId).filter(Boolean));
+      for (const msg of unresolved) {
+        const key = msg.agentPrompt.slice(0, 200);
+        const match = activity.find(a =>
+          !usedIds.has(a.agentId) &&
+          (!msg.agentType || a.type === msg.agentType) &&
+          a.prompt.startsWith(key)
+        );
+        if (match) {
+          msg.agentId = match.agentId;
+          usedIds.add(match.agentId);
+          if (match.lastMessage) msg.agentLastMessage = match.lastMessage;
+        }
+      }
+    }
   }
   const cachedCompact = compactSummaryCache.get(jsonlPath);
   let compactSummaries;