claude-code-kanban 4.11.0 → 4.13.0

package/README.md

@@ -8,9 +8,7 @@
 
 > Watch Claude Code work, in real time.
 
-![Dark mode](assets/screenshot-dark-v2.png)
-
-![Light mode](assets/screenshot-light-v2.png)
+![Kanban board with session log](assets/shot-session-log.png)
 
 ## Getting Started
 
@@ -22,11 +20,7 @@ Hooks enable subagent tracking, waiting-for-user detection, and session activity
 npx claude-code-kanban --install
 ```
 
-This will:
-- Copy `agent-spy.sh` to `~/.claude/hooks/` (requires `jq`)
-- Add `SubagentStart`, `SubagentStop`, `TeammateIdle`, and `PostToolUse` hooks to `~/.claude/settings.json`
-
-All changes are non-destructive — existing settings are preserved.
+Non-destructive — existing settings in `~/.claude/settings.json` are preserved. Uninstall anytime with `npx claude-code-kanban --uninstall`.
 
 ### 2. Start the dashboard
 
@@ -34,72 +28,34 @@ All changes are non-destructive — existing settings are preserved.
 npx claude-code-kanban --open
 ```
 
-Open http://localhost:3541 (or use `--open` to auto-launch the browser).
-
 ### 3. Use Claude Code as usual
 
-Tasks, agents, and messages appear on the board automatically. No changes to your Claude Code workflow needed.
-
-> To uninstall hooks: `npx claude-code-kanban --uninstall`
+Tasks, agents, and messages appear on the board automatically — Claude Code writes task files and conversation logs to `~/.claude`, the dashboard watches them and streams updates to the browser via SSE. It never directs Claude's work.
 
 ## Features
 
 - **Real-time Kanban board** — Tasks move through Pending → In Progress → Completed as Claude works
-- **Agent log** — Live subagent tracking (start/stop/idle) with prompts, duration, and status
-- **Session message log** — Browse recent messages, tool calls, and model info (`Shift+L`)
+- **Session log** — The full conversation timeline: prompts, replies, tool calls and results (`Shift+L`)
+- **Agent log** — Live subagent tracking with prompts, duration, status, and idle detection
+- **Task detail panel** — Full description, notes, blockedBy/blocks dependencies, inline editing
+- **Follow & pin** — Follow the latest message live (`Shift+M`), pin the messages that matter
+- **Tool stats & impact** — Per-session tool usage breakdown and file impact
 - **Waiting-for-user indicators** — Amber highlight on sessions needing permission or input
-- **Plan correlation** — Plan sessions linked to their implementation sessions
 - **Agent teams** — Color-coded team members, owner filtering, member count badges
-- **Task dependencies** — See blockedBy/blocks relationships and the critical path
-- **Live activity feed** — Stream of all in-progress tasks across every session
-- **Session management** — Fuzzy search, project/branch display, active/stale session styling
-- **Cleanup** — Delete tasks (with dependency checks) or bulk-delete entire sessions
-- **Keyboard shortcuts** — Press `?` for help; `Shift+M` for live message follow
-
-## Configuration
-
-```bash
-PORT=8080 npx claude-code-kanban        # Custom port
-npx claude-code-kanban --open            # Auto-open browser
-npx claude-code-kanban --dir=~/.claude-work  # Custom Claude config dir
-```
-
-If port 3541 is in use, the server falls back to a random available port.
-
-### Global install
-
-```bash
-npm install -g claude-code-kanban
-claude-code-kanban --open
-```
-
-## How It Works
+- **17 color themes** — Dracula, Nord, Catppuccin, Gruvbox, Tokyo Night, and more — each in light and dark
+- **Storage manager** — Inspect disk usage and clean up stale sessions and tasks
+- **Keyboard-first** — Press `?` for the full shortcut reference
 
-Claude Code writes task files to `~/.claude/tasks/` and conversation logs to `~/.claude/projects/`. The dashboard watches these directories with [chokidar](https://github.com/paulmillr/chokidar) and pushes updates to the browser via Server-Sent Events (SSE). Nothing is modified — the dashboard is read-only.
+![Session info](assets/shot-session-info.png)
 
-**Tasks** are picked up automatically from Claude Code's native task system (TodoWrite). No hooks needed.
+![Subagent preview](assets/shot-subagent-preview.png)
 
-**Hooks** extend observability beyond tasks. When installed, lightweight shell scripts fire on Claude Code lifecycle events and write JSON markers that the dashboard picks up:
+![Theme picker](assets/shot-theme-picker.png)
 
-| Hook event | What it enables |
-|------------|----------------|
-| `SubagentStart` / `SubagentStop` | Agent log — see subagent spawns, durations, prompts |
-| `TeammateIdle` | Idle detection for team member agents |
-| `PostToolUse` | Waiting-for-user detection (permission prompts, AskUserQuestion) |
 
 ## Context Window Monitoring
 
-Track real-time context window usage for each Claude Code session directly in the dashboard sidebar and detail panel.
-
-### Setup
-
-The installer copies `context-status.sh` alongside the agent hooks:
-
-```bash
-npx claude-code-kanban --install
-```
-
-Then add it to your statusline in `~/.claude/settings.json`:
+Per-session context usage bars, token/cost breakdowns, and model info in the sidebar and detail panel. The installer copies `context-status.sh` — wire it into your statusline in `~/.claude/settings.json`:
 
 ```json
 {
@@ -111,27 +67,17 @@ Then add it to your statusline in `~/.claude/settings.json`:
 }
 ```
 
-The script pipes through — your existing statusline still works. It just writes a snapshot to `~/.claude/context-status/{sessionId}.json` on each update.
-
-### What you get
+The script pipes through, so your existing statusline keeps working.
 
-- **Sidebar bar** — compact context usage bar per session with color thresholds (green → yellow → orange → red) and a 200K token marker
-- **Detail panel** — input/output token breakdown, cache read tokens, cost, duration, API time, lines added/removed, and model name
-- Only shown for active or pinned sessions
-
-## FAQ
-
-**Does this control Claude?**
-No. The viewer only observes — it never writes to task files or directs Claude's work.
-
-**Does it work with agent teams?**
-Yes. Team sessions are auto-detected with color-coded members and owner filtering.
+## Configuration
 
-**Does it require Claude Code to be running?**
-No. You can browse past sessions anytime. Live updates resume when Claude starts working again.
+```bash
+PORT=8080 npx claude-code-kanban             # Custom port (falls back if busy)
+npx claude-code-kanban --open                # Auto-open browser
+npx claude-code-kanban --dir=~/.claude-work  # Custom Claude config dir
+```
 
-**What happens without hooks?**
-The Kanban board still shows tasks, but you won't see the agent log, waiting-for-user indicators, or live session activity. Run `npx claude-code-kanban --install` for the full experience.
+Global install: `npm install -g claude-code-kanban`, then `claude-code-kanban --open`.
 
 ## License
 

package/lib/parsers.js

@@ -551,6 +551,7 @@ function readRecentMessages(jsonlPath, limit = 10) {
     const messages = [];
     const toolResults = new Map();
     const toolResultExtras = new Map();
+    const toolResultImageCounts = new Map();
     let readSize = Math.min(65536, stat.size);
 
     while (messages.length < limit) {
@@ -567,6 +568,7 @@ function readRecentMessages(jsonlPath, limit = 10) {
       messages.length = 0;
       toolResults.clear();
       toolResultExtras.clear();
+      toolResultImageCounts.clear();
       for (const line of clean.split('\n')) {
         if (!line.trim()) continue;
         try {
@@ -823,6 +825,15 @@ function readRecentMessages(jsonlPath, limit = 10) {
                       .filter(c => c.type === 'text' && c.text)
                       .map(c => c.text)
                       .join('\n');
+                    // A Read on an image file (e.g. .png) returns the image as a
+                    // base64 block inside the tool_result. Count them so the
+                    // renderer can request each by index and show what the agent
+                    // saw; the bytes are fetched lazily per image via the endpoint.
+                    let imgCount = 0;
+                    for (const c of block.content) {
+                      if (c && c.type === 'image' && c.source && c.source.type === 'base64') imgCount++;
+                    }
+                    if (imgCount) toolResultImageCounts.set(block.tool_use_id, imgCount);
                   }
                   if (resultText) {
                     toolResults.set(block.tool_use_id, resultText);
@@ -900,6 +911,9 @@ function readRecentMessages(jsonlPath, limit = 10) {
         }
         msg.toolResultTruncated = truncated;
       }
+      if (msg.type === 'tool_use' && msg.toolUseId && toolResultImageCounts.has(msg.toolUseId)) {
+        msg.toolResultImageCount = toolResultImageCounts.get(msg.toolUseId);
+      }
       if (msg.type === 'tool_use' && msg.tool === 'AskUserQuestion'
           && msg.toolUseId && toolResultExtras.has(msg.toolUseId)) {
         const extra = toolResultExtras.get(msg.toolUseId);
@@ -981,18 +995,49 @@ function readUserImage(jsonlPath, msgUuid, blockIndex) {
   return null;
 }
 
+// Read the Nth base64 image embedded in a tool_result block (e.g. the output of
+// a Read on an image file). Scans for the tool_result matching toolUseId.
+function readToolResultImage(jsonlPath, toolUseId, n) {
+  if (!toolUseId || !jsonlPath) return null;
+  const idx = Number(n);
+  if (!Number.isInteger(idx) || idx < 0) return null;
+  try {
+    const content = readFileSync(jsonlPath, 'utf8');
+    const lines = content.split('\n');
+    for (const line of lines) {
+      if (!line || line.indexOf(toolUseId) === -1) continue;
+      let obj;
+      try { obj = JSON.parse(line); } catch (_) { continue; }
+      const blocks = obj?.message?.content;
+      if (!Array.isArray(blocks)) continue;
+      for (const block of blocks) {
+        if (block?.type !== 'tool_result' || block.tool_use_id !== toolUseId) continue;
+        if (!Array.isArray(block.content)) continue;
+        const images = block.content.filter(
+          (c) => c && c.type === 'image' && c.source && c.source.type === 'base64',
+        );
+        const img = images[idx];
+        if (!img) return null;
+        return { mediaType: img.source.media_type || 'image/png', data: img.source.data };
+      }
+    }
+  } catch (_) {}
+  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
+// Serve pasted image N from <claudeDir>/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) {
+function readCachedImage(sessionId, n, claudeDir) {
   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);
+  const baseDir = claudeDir || path.join(require('os').homedir(), '.claude');
+  const dir = path.join(baseDir, 'image-cache', sessionId);
   try {
     const match = readdirSync(dir).find((f) => {
       const dot = f.lastIndexOf('.');
@@ -1438,6 +1483,7 @@ module.exports = {
   readMessagesPage,
   readFullToolResult,
   readUserImage,
+  readToolResultImage,
   readCachedImage,
   updateLoopInfo,
   buildLoopInfoFromState,

package/package.json

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

package/public/app.js

@@ -1643,17 +1643,24 @@ function _renderPinToDetail(pin) {
   if (pin.type === 'tool_use') {
     document.getElementById('msg-detail-title').textContent = pin.tool || 'Tool';
     const fullText = pin.fullDetail || pin.detail || '';
-    const pinParamsHtml = renderToolParamsHtml(pin.params);
-    const pinResultHtml = renderToolResultHtml(
-      pin.toolResult,
-      pin.toolResultTruncated,
-      pin.toolResultFull,
-      pin.toolUseId,
-    );
+    const pinFindings = pin.tool === 'ReportFindings';
+    const pinParamsHtml = pinFindings
+      ? renderFindingsReport(pin.params, pin.toolResult)
+      : renderToolParamsHtml(pin.params);
+    const pinResultHtml = pinFindings
+      ? ''
+      : renderToolResultHtml(pin.toolResult, pin.toolResultTruncated, pin.toolResultFull, pin.toolUseId);
     const pinDetailEscaped = escapeHtml(fullText);
     const pinDetailRendered = pin.tool === 'Bash' ? highlightBash(pinDetailEscaped) : pinDetailEscaped;
+    // Tool-result images are intentionally omitted here: their URL is built from
+    // the global currentSessionId, but a pin can belong to a different session,
+    // so rendering them would point at the wrong session's image.
     body.innerHTML =
-      (fullText ? `<pre class="${TINTED_PRE_CLASS}">${pinDetailRendered}</pre>` : '<em>No details</em>') +
+      (fullText
+        ? `<pre class="${TINTED_PRE_CLASS}">${pinDetailRendered}</pre>`
+        : pinFindings
+          ? ''
+          : '<em>No details</em>') +
       pinParamsHtml +
       pinResultHtml;
   } else if (pin.type === 'agent') {
@@ -1679,6 +1686,17 @@ const linkSvg = (size) =>
 //#endregion
 
 //#region MODALS
+// Shared markup for an attachment image and the labeled section that holds a grid
+// of them — used by both user-pasted images and agent tool-result images.
+function attachImageTag(url, alt) {
+  return `<img src="${url}" loading="lazy" alt="${alt}" class="user-attach-image" />`;
+}
+function attachImageSection(label, imgsHtml) {
+  return imgsHtml
+    ? `<div class="user-attach-section"><div class="user-attach-label">${label}</div><div class="user-attach-images">${imgsHtml}</div></div>`
+    : '';
+}
+
 function renderUserAttachments(m) {
   const parts = [];
   if (m.images?.length && currentSessionId) {
@@ -1687,20 +1705,17 @@ function renderUserAttachments(m) {
       .map((img) => {
         // 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" />`;
+        if (img.kind === 'cache') return attachImageTag(`/api/sessions/${sid}/cached-image/${img.n}`, 'user image');
+        if (m.uuid)
+          return attachImageTag(
+            `/api/sessions/${sid}/user-image/${encodeURIComponent(m.uuid)}/${img.blockIndex}`,
+            'user image',
+          );
+        return '';
       })
       .join('');
-    parts.push(
-      `<div class="user-attach-section"><div class="user-attach-label">Attached images</div><div class="user-attach-images">${imgs}</div></div>`,
-    );
+    const section = attachImageSection('Attached images', imgs);
+    if (section) parts.push(section);
   }
   if (m.toolResultRefs?.length) {
     const refs = m.toolResultRefs
@@ -1761,11 +1776,15 @@ function showMsgDetail(idx) {
       agentBtn.style.display = 'none';
     }
     const sendProto = m.tool === 'SendMessage' && m.params?.protocol;
-    const toolParamsHtml = renderToolParamsHtml(
-      sendProto ? Object.fromEntries(Object.entries(m.params).filter(([k]) => k !== 'protocol')) : m.params,
-    );
-    const hideResult = m.tool === 'SendMessage' || TASK_TOOLS.has(m.tool);
+    const isFindings = m.tool === 'ReportFindings';
+    const toolParamsHtml = isFindings
+      ? ''
+      : renderToolParamsHtml(
+          sendProto ? Object.fromEntries(Object.entries(m.params).filter(([k]) => k !== 'protocol')) : m.params,
+        );
+    const hideResult = m.tool === 'SendMessage' || TASK_TOOLS.has(m.tool) || isFindings;
     const taskResultHtml = TASK_TOOLS.has(m.tool) ? renderTaskResult(m.toolResult) : '';
+    const findingsHtml = isFindings ? renderFindingsReport(m.params, m.toolResult) : '';
     const toolResultHtml = hideResult
       ? ''
       : renderToolResultHtml(m.toolResult, m.toolResultTruncated, m.toolResultFull, m.toolUseId);
@@ -1777,8 +1796,8 @@ function showMsgDetail(idx) {
       mainHtml = `${descHtml}<div class="markdown-body">${renderMarkdown(fullText)}</div>`;
     } else if (hasAgentTabs) {
       mainHtml = descHtml || '';
-    } else if (taskResultHtml) {
-      mainHtml = '';
+    } else if (taskResultHtml || findingsHtml) {
+      mainHtml = descHtml || '';
     } else if (fullText) {
       const detailEscaped = escapeHtml(fullText);
       const detailRendered = m.tool === 'Bash' ? highlightBash(detailEscaped) : detailEscaped;
@@ -1787,8 +1806,16 @@ function showMsgDetail(idx) {
       mainHtml = TASK_TOOLS.has(m.tool) ? '' : '<em>No details</em>';
     }
     const answersHtml = m.answerPayload ? renderAnswerPayloadHtml(m.answerPayload) : '';
+    const toolResultImagesHtml = renderToolResultImagesHtml(m.toolResultImageCount, m.toolUseId);
     body.innerHTML =
-      mainHtml + toolParamsHtml + answersHtml + taskResultHtml + (hasAgentTabs ? '' : toolResultHtml) + agentExtraHtml;
+      mainHtml +
+      toolParamsHtml +
+      answersHtml +
+      taskResultHtml +
+      findingsHtml +
+      (hasAgentTabs ? '' : toolResultHtml) +
+      toolResultImagesHtml +
+      agentExtraHtml;
   } else if (m.type === 'teammate') {
     document.getElementById('msg-detail-title').textContent = m.teammateId || 'Teammate';
     document.getElementById('msg-detail-agent-btn').style.display = 'none';
@@ -1978,6 +2005,7 @@ function formatTaskToolDetail(params) {
 }
 function getToolDetail(tool, params, detail) {
   if (TASK_TOOLS.has(tool)) return formatTaskToolDetail(params);
+  if (tool === 'ReportFindings') return formatFindingsToolDetail(params);
   if (!detail) return '';
   let extra = '';
   if (tool === 'Read' && params) {
@@ -2044,6 +2072,66 @@ function renderAnswerPayloadHtml(answerPayload) {
   </div>`;
 }
 
+//#region FINDINGS
+const FINDING_VERDICT_COLORS = {
+  CONFIRMED: 'var(--danger, #ef5350)',
+  PLAUSIBLE: 'var(--warning, #f0b429)',
+};
+const FINDING_OUTCOME_COLORS = {
+  fixed: 'var(--success, #3ecf8e)',
+  no_change_needed: 'var(--info, #60a5fa)',
+  skipped: 'var(--text-muted)',
+};
+function findingBadge(label, color) {
+  return `<span class="finding-badge" style="color:${color}">${escapeHtml(label)}</span>`;
+}
+function formatFindingsToolDetail(params) {
+  const findings = Array.isArray(params?.findings) ? params.findings : [];
+  const parts = [
+    `<span style="color:var(--text-secondary)">${findings.length} finding${findings.length === 1 ? '' : 's'}</span>`,
+  ];
+  const confirmed = findings.filter((f) => f && f.verdict === 'CONFIRMED').length;
+  const plausible = findings.filter((f) => f && f.verdict === 'PLAUSIBLE').length;
+  if (confirmed) parts.push(`<span style="color:${FINDING_VERDICT_COLORS.CONFIRMED}">${confirmed} confirmed</span>`);
+  if (plausible) parts.push(`<span style="color:${FINDING_VERDICT_COLORS.PLAUSIBLE}">${plausible} plausible</span>`);
+  if (params?.level) parts.push(findingBadge(params.level, 'var(--text-muted)'));
+  return ` ${parts.join(' <span style="color:var(--text-muted)">·</span> ')}`;
+}
+function renderFindingsReport(params, toolResult) {
+  const findings = Array.isArray(params?.findings) ? params.findings : [];
+  let html = '<div class="protocol-detail findings-report">';
+  html += `<span class="protocol-type-badge">${findings.length} finding${findings.length === 1 ? '' : 's'}</span>`;
+  if (params?.level) html += ` ${findingBadge(`level: ${params.level}`, 'var(--text-muted)')}`;
+  if (!findings.length) {
+    html += '<div class="finding-scenario">No findings survived verification.</div>';
+  } else {
+    html += '<div class="findings-list">';
+    findings.forEach((f, i) => {
+      if (!f || typeof f !== 'object') return;
+      const badges = [];
+      if (f.verdict && FINDING_VERDICT_COLORS[f.verdict]) {
+        badges.push(findingBadge(f.verdict, FINDING_VERDICT_COLORS[f.verdict]));
+      }
+      if (f.outcome && FINDING_OUTCOME_COLORS[f.outcome]) {
+        badges.push(findingBadge(f.outcome.replace(/_/g, ' '), FINDING_OUTCOME_COLORS[f.outcome]));
+      }
+      const loc = f.file ? `${f.file}${f.line != null ? `:${f.line}` : ''}` : '';
+      html += `<div class="finding-card">
+          <span class="finding-rank">${i + 1}</span>
+          <div class="finding-main">
+            ${badges.length || loc ? `<div class="finding-badges">${badges.join('')}${loc ? `<span class="finding-file">${escapeHtml(loc)}</span>` : ''}</div>` : ''}
+            ${f.summary ? `<div class="finding-summary">${escapeHtml(f.summary)}</div>` : ''}
+            ${f.failure_scenario ? `<div class="finding-scenario">${escapeHtml(f.failure_scenario)}</div>` : ''}
+          </div>
+        </div>`;
+    });
+    html += '</div>';
+  }
+  if (toolResult) html += `<div class="findings-result-note">${escapeHtml(toolResult.trim())}</div>`;
+  return `${html}</div>`;
+}
+//#endregion
+
 function renderToolParamsHtml(params) {
   if (!params) return '';
   const BLOCK_KEYS = new Set(['old_string', 'new_string', 'content', 'contentFull', 'plan']);
@@ -2240,6 +2328,18 @@ function renderToolResultHtml(toolResult, isTruncated, fullResult, toolUseId) {
       </div>`;
 }
 
+// Render base64 images returned by a tool (e.g. a Read on a .png) so the user
+// can see what the agent saw, mirroring how user-attached images are shown.
+function renderToolResultImagesHtml(count, toolUseId) {
+  if (!count || !currentSessionId || !toolUseId) return '';
+  const sid = encodeURIComponent(currentSessionId);
+  const tid = encodeURIComponent(toolUseId);
+  const imgs = Array.from({ length: count }, (_, i) =>
+    attachImageTag(`/api/sessions/${sid}/tool-result-image/${tid}/${i}`, 'tool result image'),
+  ).join('');
+  return attachImageSection('Image output', imgs);
+}
+
 async function _toggleToolResultExpand(btn) {
   const f = document.getElementById(btn.dataset.expandId);
   if (!f) return;

package/public/style.css

@@ -2337,7 +2337,7 @@ body::before {
   z-index: 1;
   line-height: 0;
 }
-.session-item:hover .session-pin-btn:not(.pinned) {
+.session-item:hover .session-pin-btn:not(.pinned):not(.sticky) {
   opacity: 0.5;
 }
 .session-pin-btn:hover {
@@ -2833,6 +2833,75 @@ body::before {
 
 /* #endregion */
 
+/* #region FINDINGS */
+.findings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+.finding-card {
+  display: flex;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-surface);
+}
+.finding-rank {
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: 0.8rem;
+  min-width: 1.6em;
+  text-align: right;
+  line-height: 1.7;
+}
+.finding-main {
+  flex: 1;
+  min-width: 0;
+}
+.finding-badges {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+.finding-badge {
+  display: inline-block;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 1px 6px;
+  border-radius: 3px;
+  border: 1px solid currentColor;
+  white-space: nowrap;
+}
+.finding-file {
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  word-break: break-all;
+}
+.finding-summary {
+  font-size: 0.88rem;
+  color: var(--text-primary);
+  margin-bottom: 2px;
+}
+.finding-scenario {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+.findings-result-note {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+/* #endregion */
+
 /* #region AGENT_FOOTER */
 .agent-footer {
   display: none;
@@ -4355,7 +4424,8 @@ pre.mermaid svg {
 }
 .session-item.stale:hover,
 .session-item.stale.active,
-.session-item.stale.kb-selected {
+.session-item.stale.kb-selected,
+.session-item.stale:has(.session-pin-btn.sticky) {
   opacity: 1;
 }
 .session-item.stale .session-time {

package/server.js

@@ -22,6 +22,7 @@ const {
   extractModelFromTranscript,
   readFullToolResult,
   readUserImage,
+  readToolResultImage,
   readCachedImage,
   updateLoopInfo,
   buildLoopInfoFromState
@@ -53,7 +54,7 @@ function getClaudeDir() {
       return dir.startsWith('~') ? dir.replace('~', os.homedir()) : dir;
     }
   }
-  return process.env.CLAUDE_DIR || path.join(os.homedir(), '.claude');
+  return process.env.CLAUDE_CONFIG_DIR || process.env.CLAUDE_DIR || path.join(os.homedir(), '.claude');
 }
 
 function getArgUrl(argName, envName) {
@@ -232,13 +233,13 @@ function checkAgentStatus(agentDir, stale, logMtime, isTeam) {
     for (const file of readdirSync(agentDir).filter(f => f.endsWith('.jsonl') && !f.startsWith('_'))) {
       try {
         const agent = readAgentJsonl(path.join(agentDir, file));
-        if (isTeam && isAgentLive(agent)) {
+        // Idle agents never mark a session active (an idle teammate lingers and
+        // would pin the filter). Teams skip freshness so long-running teammates stay visible.
+        if (agent.status === 'active' && (isTeam || isAgentFresh(agent))) {
           result.hasActive = true;
-          if (agent.status === 'active') result.hasRunning = true;
-        } else if (isAgentFresh(agent)) {
-          if (agent.status === 'active') { result.hasActive = true; result.hasRunning = true; }
+          result.hasRunning = true;
         }
-        if (result.hasRunning && result.hasActive) break;
+        if (result.hasRunning) break;
       } catch (e) { /* skip invalid */ }
     }
   } catch (e) { /* ignore */ }
@@ -307,7 +308,7 @@ function loadLiveSessions() {
         try {
           const s = JSON.parse(readFileSync(path.join(SESSIONS_DIR, file), 'utf8'));
           if (s?.sessionId && s.kind === 'interactive') {
-            sessions.push({ sessionId: s.sessionId, cwd: s.cwd || null, startedAt: s.startedAt || 0 });
+            sessions.push({ sessionId: s.sessionId, cwd: s.cwd || null, startedAt: s.startedAt || 0, status: s.status || null });
           }
         } catch (_) { /* skip invalid */ }
       }
@@ -318,6 +319,20 @@ function loadLiveSessions() {
   return sessions;
 }
 
+// An open-but-idle interactive session keeps touching its JSONL (metadata-line
+// rewrites), so mtime alone reads as activity for as long as the terminal stays
+// open. Claude Code's live-session registry knows the real state — trust its
+// 'idle' over the mtime. No registry entry (or any other status) falls back to
+// the mtime rule.
+function isRegistryIdle(sessionId) {
+  const live = loadLiveSessions().find(s => s.sessionId === sessionId);
+  return live?.status === 'idle';
+}
+
+function hasRecentLogActivity(sessionId, logAge) {
+  return logAge <= SESSION_STALE_MS && !isRegistryIdle(sessionId);
+}
+
 // Given a self-team config, return the live interactive session id that owns it
 // (same cwd, startedAt within the boot window of the team's createdAt), or null.
 function resolveSelfTeamOwner(cfg) {
@@ -452,19 +467,29 @@ function getCustomTaskDir(sessionId) {
   // Check team-named task directory (teams store tasks under ~/.claude/tasks/<teamName>/).
   // Match either the recorded leadSessionId, or — for 2.1.x self-teams whose lead is a
   // team-lead agent id — the live interactive session that owns the team (see resolveSelfTeamOwner).
+  // A live session can own several team dirs at once — its own (often empty) self-team plus a
+  // resumed session's dir holding the real tasks — so pick the richest, mirroring attachTeamTasks'
+  // "prefer more tasks" rule. Returning the first match (readdir order) can pick the empty dir,
+  // making the board show 0 tasks while the session card counts the other dir.
   if (existsSync(TEAMS_DIR)) {
     try {
+      let bestDir = null, bestCount = -1;
       for (const dir of readdirSync(TEAMS_DIR, { withFileTypes: true })) {
         if (!dir.isDirectory()) continue;
         const cfg = loadTeamConfig(dir.name);
         if (!cfg) continue;
         const owns = cfg.leadSessionId === sessionId
           || (isAutoSelfTeam(cfg) && resolveSelfTeamOwner(cfg) === sessionId);
-        if (owns) {
-          const teamTaskDir = path.join(TASKS_DIR, dir.name);
-          if (existsSync(teamTaskDir)) return teamTaskDir;
+        if (!owns) continue;
+        const teamTaskDir = path.join(TASKS_DIR, dir.name);
+        if (!existsSync(teamTaskDir)) continue;
+        const count = getTaskCounts(teamTaskDir).taskCount;
+        if (count > bestCount) {
+          bestCount = count;
+          bestDir = teamTaskDir;
         }
       }
+      if (bestDir) return bestDir;
     } catch (_) {}
   }
   return null;
@@ -808,7 +833,7 @@ function buildSessionObject(id, meta, overrides = {}) {
     hasActiveAgents: false,
     hasRunningAgents: false,
     hasWaitingForUser: false,
-    hasRecentLog: logAge <= SESSION_STALE_MS,
+    hasRecentLog: hasRecentLogActivity(id, logAge),
     jsonlPath: meta.jsonlPath || null,
     tasksDir: null,
     projectDir: meta.jsonlPath ? path.dirname(meta.jsonlPath) : null,
@@ -866,7 +891,7 @@ app.get('/api/sessions', async (req, res) => {
           // Cheap-probe: when filter=active, skip expensive enrichment for inactive non-pinned sessions.
           // Mirrors the post-filter predicate using only signals already computed above.
           if (activeFilter && !pinnedIds.has(entry.name)) {
-            const hasRecentLog = logAge <= SESSION_STALE_MS;
+            const hasRecentLog = hasRecentLogActivity(entry.name, logAge);
             const cheaplyActive = logStat.hasMessages && (
               hasRecentLog
               || agentStatus.hasActive
@@ -967,7 +992,7 @@ app.get('/api/sessions', async (req, res) => {
 
         // Cheap-probe: no tasks here (metadata-only), so active = recent log OR live agent.
         if (activeFilter && !pinnedIds.has(sessionId)) {
-          const hasRecentLog = logAge <= SESSION_STALE_MS;
+          const hasRecentLog = hasRecentLogActivity(sessionId, logAge);
           const cheaplyActive = logStat.hasMessages && (
             hasRecentLog || metaAgentStatus.hasActive || !!metaAgentStatus.waitingForUser
           );
@@ -1927,9 +1952,11 @@ app.get('/api/sessions/:sessionId/messages', (req, res) => {
       compactedMsgs[i].compactSummary = compactSummaries[i].summary;
     }
   }
+  // The client keeps needing toolUseId when it builds a follow-up URL from it:
+  // lazy-fetching a truncated tool result, or fetching each tool-result image.
+  const clientNeedsToolUseId = (msg) => msg.toolResultTruncated || msg.toolResultImageCount;
   for (const msg of messages) {
-    // Keep toolUseId on truncated tool results so the client can lazy-fetch the full text
-    if (msg.toolUseId && !msg.toolResultTruncated) delete msg.toolUseId;
+    if (msg.toolUseId && !clientNeedsToolUseId(msg)) delete msg.toolUseId;
     delete msg.promptId;
   }
   res.json({ messages, hasMore, sessionId: req.params.sessionId });
@@ -2069,8 +2096,21 @@ app.get('/api/sessions/:sessionId/user-image/:msgUuid/:blockIndex', (req, res) =
   res.end(buf);
 });
 
+app.get('/api/sessions/:sessionId/tool-result-image/:toolUseId/:n', (req, res) => {
+  const metadata = loadSessionMetadata();
+  const meta = metadata[req.params.sessionId] || metadata[resolveSessionId(req.params.sessionId)];
+  const jsonlPath = meta?.jsonlPath;
+  if (!jsonlPath) return res.status(404).end();
+  const img = readToolResultImage(jsonlPath, req.params.toolUseId, req.params.n);
+  if (!img) return res.status(404).end();
+  const buf = Buffer.from(img.data, 'base64');
+  res.setHeader('Content-Type', img.mediaType);
+  res.setHeader('Cache-Control', 'no-store');
+  res.end(buf);
+});
+
 app.get('/api/sessions/:sessionId/cached-image/:n', (req, res) => {
-  const img = readCachedImage(req.params.sessionId, req.params.n);
+  const img = readCachedImage(req.params.sessionId, req.params.n, CLAUDE_DIR);
   if (!img) return res.status(404).end();
   res.setHeader('Content-Type', img.mediaType);
   res.setHeader('Cache-Control', 'no-store');