claude-code-kanban 4.3.0 → 4.5.0

package/public/app.js

@@ -161,12 +161,16 @@ async function fetchSessions(includeTasks = true) {
     const allPinnedIds = new Set([...pinnedSessionIds, ...stickySessionIds]);
     if (revealedPlanSessionId) allPinnedIds.add(revealedPlanSessionId);
     if (revealedStorageSessionId) allPinnedIds.add(revealedStorageSessionId);
+    // When server filters by activity, the focused session may not be active —
+    // include it in pinned so the server still returns it.
+    if (sessionFilter === 'active' && currentSessionId) allPinnedIds.add(currentSessionId);
     const pinnedParam = allPinnedIds.size > 0 ? `&pinned=${[...allPinnedIds].join(',')}` : '';
     const projectParam =
       filterProject && filterProject !== '__recent__' ? `&project=${encodeURIComponent(filterProject)}` : '';
-    const sessionsPromise = fetch(`/api/sessions?limit=${sessionLimit}${pinnedParam}${projectParam}`).then((r) =>
-      r.json(),
-    );
+    const filterParam = sessionFilter === 'active' ? '&filter=active' : '';
+    const sessionsPromise = fetch(
+      `/api/sessions?limit=${sessionLimit}${pinnedParam}${projectParam}${filterParam}`,
+    ).then((r) => r.json());
 
     let newSessions, newTasks;
     if (includeTasks) {
@@ -494,10 +498,21 @@ function renderActivityChip() {
     .join('');
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function setActivityFilter(kind) {
+function toggleActivityKind(kind) {
   if (activityFilter.has(kind)) activityFilter.delete(kind);
   else activityFilter.add(kind);
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function setActivityFilter(kind) {
+  if (kind === 'active') {
+    // waiting is a sub-state of active — couple them so one click covers all running sessions
+    toggleActivityKind('active');
+    toggleActivityKind('waiting');
+  } else {
+    toggleActivityKind(kind);
+  }
+  localStorage.setItem('activityFilter', JSON.stringify([...activityFilter]));
   // active/waiting only make sense with the active session filter on
   const targetFilter = activityFilter.size > 0 ? 'active' : sessionFilter;
   if (targetFilter !== sessionFilter) {
@@ -571,7 +586,6 @@ async function fetchTasks(sessionId) {
 const WAITING_TTL_MS = 30 * 60 * 1000;
 const AGENT_LOG_MAX = 8;
 const LIVE_INDICATOR_MS = 10 * 1000;
-const ACTIVE_PLAN_MS = 10 * 60 * 1000;
 // #endregion
 
 function resetAgentState() {
@@ -1133,42 +1147,80 @@ function toggleToolGroup(id) {
   if (el) el.classList.toggle('show');
 }
 
-const WAITING_PLAN_PREVIEW_CHARS = 120;
-const WAITING_PREVIEW_MAX_CHARS = 200;
-
 function getWaitingLabel(kind, tool) {
   if (kind !== 'question') return `Awaiting permission: ${tool}`;
   if (tool === 'ExitPlanMode') return 'Plan awaiting approval';
   return 'Question pending';
 }
 
-function getWaitingPreview(toolInput) {
-  if (!toolInput) return '';
-  try {
-    const parsed = JSON.parse(toolInput);
-    if (parsed.questions?.[0]?.question) return parsed.questions[0].question;
-    if (parsed.plan) {
-      const t = parsed.plan.match(/^#\s+(.+)/m);
-      return t ? t[1] : parsed.plan.slice(0, WAITING_PLAN_PREVIEW_CHARS);
-    }
-    if (parsed.command) return parsed.command;
-    if (parsed.file_path) return parsed.file_path;
-  } catch (_) {
-    /* toolInput may be truncated/non-JSON */
-  }
+function getWaitingPill(kind, tool) {
+  if (kind === 'question' && tool === 'ExitPlanMode') return 'Plan awaiting approval';
+  if (kind === 'question') return 'Question pending';
+  return 'Awaiting permission';
+}
+
+function deriveWaitingDetail(tool, params) {
+  if (!params) return '';
+  const trunc = (s) => (s.length > 80 ? `${s.slice(0, 80)}...` : s);
+  if (params.file_path) return params.file_path.replace(/^.*[/\\]/, '');
+  if (params.command) return trunc(params.command);
+  if (params.pattern) return trunc(params.pattern);
+  if (params.query) return trunc(params.query);
+  if (params.url) return trunc(params.url);
+  if (params.skill) {
+    const s = params.skill + (typeof params.args === 'string' ? ` ${params.args}` : '');
+    return trunc(s);
+  }
+  if (tool === 'AskUserQuestion' && params.questions?.[0]?.question) return trunc(params.questions[0].question);
+  if (tool === 'ExitPlanMode' && typeof params.plan === 'string') {
+    const t = params.plan.match(/^#\s+(.+)/m);
+    return trunc(t ? t[1] : params.plan);
+  }
+  if (params.description) return trunc(String(params.description));
   return '';
 }
 
+function renderWaitingBody(tool, params) {
+  if (!params) return '';
+  if (tool === 'AskUserQuestion' && Array.isArray(params.questions)) {
+    const items = params.questions
+      .map((q) => {
+        const head = `<div style="font-weight:600">${escapeHtml(q.question || '')}</div>`;
+        const opts = Array.isArray(q.options)
+          ? `<ul style="margin:2px 0 0 16px;padding:0">${q.options
+              .map(
+                (o) =>
+                  `<li><span style="font-weight:600">${escapeHtml(o.label || '')}</span>${o.description ? ` — <span style="color:var(--text-muted)">${escapeHtml(o.description)}</span>` : ''}</li>`,
+              )
+              .join('')}</ul>`
+          : '';
+        return `<div style="margin-top:6px">${head}${opts}</div>`;
+      })
+      .join('');
+    return items;
+  }
+  return renderToolParamsHtml(params);
+}
+
 function renderWaitingEntry() {
   if (!isWaitingFresh()) return '';
   const tool = currentWaiting.toolName || 'unknown';
-  const label = getWaitingLabel(currentWaiting.kind, tool);
-  const preview = getWaitingPreview(currentWaiting.toolInput);
-  const previewHtml = preview
-    ? `<div class="msg-waiting-preview">${escapeHtml(preview.slice(0, WAITING_PREVIEW_MAX_CHARS))}</div>`
-    : '';
+  let params = null;
+  if (currentWaiting.toolInput) {
+    try {
+      params = JSON.parse(currentWaiting.toolInput);
+    } catch (_) {
+      /* toolInput may be truncated/non-JSON */
+    }
+  }
+  const pillText = getWaitingPill(currentWaiting.kind, tool);
+  const detail = deriveWaitingDetail(tool, params);
+  const detailHtml = detail ? ` <span style="color:var(--text-secondary)">${escapeHtml(detail)}</span>` : '';
+  const bodyHtml = renderWaitingBody(tool, params);
+  const bodyWrap = bodyHtml ? `<div class="msg-waiting-body">${bodyHtml}</div>` : '';
+  const pill = `<span class="msg-waiting-pill">${escapeHtml(pillText)}</span>`;
   const discardBtn = `<button class="msg-waiting-discard" title="Discard permission prompt" onclick="event.stopPropagation();discardWaiting()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>`;
-  return `<div class="msg-item msg-waiting" onclick="msgDetailFollowLatest=false;showWaitingDetail()">${ICON_CHAT}<div class="msg-body"><div class="msg-text">${escapeHtml(label)}</div>${previewHtml}<div class="msg-time">waiting…</div></div>${discardBtn}</div>`;
+  return `<div class="msg-item msg-waiting" onclick="msgDetailFollowLatest=false;showWaitingDetail()">${getToolIcon(tool)}<div class="msg-body"><div class="msg-text">${pill} <span style="font-weight:600">${escapeHtml(tool)}</span>${detailHtml}</div>${bodyWrap}<div class="msg-time">waiting…</div></div>${discardBtn}</div>`;
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
@@ -1343,6 +1395,20 @@ function togglePin(msgIndex) {
     currentPins.splice(idx, 1);
   } else {
     pinnedCollapsed = false;
+    // Strip large server-truncated `*Full` payloads (Write contentFull,
+    // MCP passthrough <k>Full) before stashing in localStorage — a few
+    // pinned big writes can blow past the per-origin quota. On pin
+    // expand, the modal falls back to the truncated string + the lazy
+    // /api/sessions/:id/tool-result/:toolUseId endpoint.
+    let paramsForPin = null;
+    if (m.params) {
+      paramsForPin = {};
+      for (const [k, v] of Object.entries(m.params)) {
+        if (k === 'contentFull') continue;
+        if (k.endsWith('Full') && typeof v === 'string' && typeof m.params[k.slice(0, -4)] === 'string') continue;
+        paramsForPin[k] = v;
+      }
+    }
     currentPins.push({
       id,
       type: m.type,
@@ -1352,6 +1418,9 @@ function togglePin(msgIndex) {
       toolUseId: m.toolUseId || null,
       toolResult: m.toolResult || null,
       toolResultTruncated: m.toolResultTruncated || false,
+      toolResultFull: null,
+      answerPayload: m.answerPayload || null,
+      params: paramsForPin,
       detail: m.detail || null,
       fullDetail: m.fullDetail || null,
       description: m.description || null,
@@ -1660,7 +1729,9 @@ function showMsgDetail(idx) {
     } else {
       mainHtml = TASK_TOOLS.has(m.tool) ? '' : '<em>No details</em>';
     }
-    body.innerHTML = mainHtml + toolParamsHtml + taskResultHtml + (hasAgentTabs ? '' : toolResultHtml) + agentExtraHtml;
+    const answersHtml = m.answerPayload ? renderAnswerPayloadHtml(m.answerPayload) : '';
+    body.innerHTML =
+      mainHtml + toolParamsHtml + answersHtml + taskResultHtml + (hasAgentTabs ? '' : toolResultHtml) + agentExtraHtml;
   } else if (m.type === 'teammate') {
     document.getElementById('msg-detail-title').textContent = m.teammateId || 'Teammate';
     document.getElementById('msg-detail-agent-btn').style.display = 'none';
@@ -1879,16 +1950,75 @@ function renderTaskResult(toolResult) {
   return `${html}</div>`;
 }
 
+function renderAnswerPayloadHtml(answerPayload) {
+  if (!answerPayload?.answers || typeof answerPayload.answers !== 'object') return '';
+  const qs = Array.isArray(answerPayload.questions) ? answerPayload.questions : [];
+  const findOptionDesc = (qText, label) => {
+    const q = qs.find((x) => x && x.question === qText);
+    if (!q || !Array.isArray(q.options)) return null;
+    const opt = q.options.find((o) => o && o.label === label);
+    return opt?.description ? opt.description : null;
+  };
+  const rows = Object.entries(answerPayload.answers)
+    .map(([q, a]) => {
+      const ansList = Array.isArray(a) ? a : [a];
+      const items = ansList
+        .map((label) => {
+          const desc = findOptionDesc(q, label);
+          const descHtml = desc ? ` <span style="color:var(--text-muted)">— ${escapeHtml(desc)}</span>` : '';
+          return `<li><span style="font-weight:600">${escapeHtml(String(label))}</span>${descHtml}</li>`;
+        })
+        .join('');
+      return `<div style="margin-top:6px">
+      <div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:2px">${escapeHtml(q)}</div>
+      <ul style="margin:2px 0 0 16px;padding:0">${items}</ul>
+    </div>`;
+    })
+    .join('');
+  return `<div style="margin-top:10px;padding-top:8px;border-top:1px solid var(--border)">
+    <div style="font-size:0.8rem;color:var(--text-muted);margin-bottom:4px">Answers</div>
+    ${rows}
+  </div>`;
+}
+
 function renderToolParamsHtml(params) {
   if (!params) return '';
-  const BLOCK_KEYS = new Set(['old_string', 'new_string', 'content', 'plan']);
+  const BLOCK_KEYS = new Set(['old_string', 'new_string', 'content', 'contentFull', 'plan']);
   const badges = [],
-    blocks = [];
+    blocks = [],
+    jsonBlocks = [];
   for (const [k, v] of Object.entries(params)) {
     if (BLOCK_KEYS.has(k)) continue;
+    // Skip sibling `<k>Full` entries — they're used as expand targets, not
+    // rendered as their own field. Only treat it as a sibling when the
+    // trimmed key holds a server-truncated string (ends with the truncation
+    // marker), otherwise a real param that happens to end in "Full" would
+    // disappear.
+    if (k.endsWith('Full')) {
+      const baseKey = k.slice(0, -4);
+      const base = params[baseKey];
+      if (typeof base === 'string' && base.endsWith('... (truncated)') && typeof v === 'string') {
+        continue;
+      }
+    }
+    if (v !== null && typeof v === 'object') {
+      let pretty;
+      try {
+        pretty = JSON.stringify(v, null, 2);
+      } catch (_) {
+        pretty = String(v);
+      }
+      if (pretty.length > CONTENT_TRUNCATE_MAX) {
+        pretty = `${pretty.slice(0, CONTENT_TRUNCATE_MAX)}\n... (truncated)`;
+      }
+      jsonBlocks.push({ k, pretty });
+      continue;
+    }
     const display = typeof v === 'boolean' ? (v ? 'yes' : 'no') : String(v);
     if (display.length > 60) {
-      blocks.push({ k, display });
+      const fullKey = `${k}Full`;
+      const full = typeof params[fullKey] === 'string' ? params[fullKey] : null;
+      blocks.push({ k, display, full });
     } else {
       badges.push(
         `<span style="display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:3px;background:var(--bg-secondary);font-size:0.75rem"><span style="color:var(--text-muted)">${escapeHtml(k)}:</span> ${escapeHtml(display)}</span>`,
@@ -1897,8 +2027,19 @@ function renderToolParamsHtml(params) {
   }
   let html = '';
   if (badges.length) html += `<div style="margin-top:6px;display:flex;flex-wrap:wrap;gap:4px">${badges.join('')}</div>`;
-  for (const { k, display } of blocks) {
-    html += `<div style="margin-top:6px;font-size:0.75rem"><span style="color:var(--text-muted)">${escapeHtml(k)}:</span> <span style="word-break:break-all">${escapeHtml(display)}</span></div>`;
+  for (const { k, display, full } of blocks) {
+    let suffix = '';
+    if (full && full.length > display.length) {
+      const toggle = makeExpandToggle(escapeHtml(display), escapeHtml(full), { fontSize: '0.75rem' });
+      suffix = ` ${toggle.btn}${toggle.full}`;
+    }
+    html += `<div style="margin-top:6px;font-size:0.75rem"><span style="color:var(--text-muted)">${escapeHtml(k)}:</span> <span style="word-break:break-all">${escapeHtml(display)}</span>${suffix}</div>`;
+  }
+  for (const { k, pretty } of jsonBlocks) {
+    html += `<div style="margin-top:8px;padding-top:6px;border-top:1px solid var(--border)">
+          <div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:2px">${escapeHtml(k)}</div>
+          <pre class="${TINTED_PRE_CLASS}" style="max-height:300px;overflow:auto;font-size:0.75rem">${escapeHtml(pretty)}</pre>
+        </div>`;
   }
   if (params.old_string || params.new_string) {
     html += `<div style="margin-top:8px;padding-top:6px;border-top:1px solid var(--border)">`;
@@ -1913,14 +2054,18 @@ function renderToolParamsHtml(params) {
     html += `</div>`;
   }
   if (params.content) {
-    const contentTruncated = params.content.length > CONTENT_TRUNCATE_MAX;
-    const truncContent = contentTruncated
-      ? `${params.content.slice(0, CONTENT_TRUNCATE_MAX)}\n... (truncated)`
+    // params.contentFull is set by the server when the truncated `content`
+    // ends with `... (truncated)`. Fall back to params.content otherwise so
+    // small writes render as before.
+    const fullContent = params.contentFull || params.content;
+    const isTruncated = !!params.contentFull || params.content.length > CONTENT_TRUNCATE_MAX;
+    const truncContent = isTruncated
+      ? `${params.content.slice(0, CONTENT_TRUNCATE_MAX)}${params.content.length > CONTENT_TRUNCATE_MAX ? '\n... (truncated)' : ''}`
       : params.content;
     let writeMoreBtn = '',
       fullBlock = '';
-    if (contentTruncated) {
-      const toggle = makeExpandToggle(escapeHtml(truncContent), escapeHtml(params.content), {
+    if (isTruncated) {
+      const toggle = makeExpandToggle(escapeHtml(truncContent), escapeHtml(fullContent), {
         fontSize: '0.75rem',
         maxHeight: '500px',
         tinted: true,
@@ -2098,6 +2243,16 @@ async function postAndToast(url, body, label) {
 async function openMsgInEditor() {
   const m = getDetailMsg();
   if (!m) return;
+  // Write/Edit tool calls record the source path — open that directly instead
+  // of dumping the rendered modal body into a temp buffer.
+  const filePath =
+    m.type === 'tool_use' && (m.tool === 'Write' || m.tool === 'Edit')
+      ? m.params?.file_path || m.fullDetail || null
+      : null;
+  if (filePath) {
+    postAndToast('/api/open-in-editor', { file: filePath }, 'in editor');
+    return;
+  }
   const title = m.type === 'tool_use' ? m.tool : m.compactSummary ? 'compact-summary' : m.type;
   postAndToast('/api/open-in-editor', { content: getMessageDisplayContent(m), title }, 'in editor');
 }
@@ -2452,7 +2607,6 @@ function renderSessions() {
   // project filter → search filter → ensure pinned/sticky sessions are always included
   let filteredSessions = sessions;
   if (sessionFilter === 'active') {
-    const now = Date.now();
     const activeSessionIds = new Set();
     filteredSessions = filteredSessions.filter((s) => {
       if (dismissedSessionIds.has(s.id)) return false;
@@ -2461,8 +2615,7 @@ function renderSessions() {
         ((!s.sharedTaskList && (s.pending > 0 || s.inProgress > 0)) ||
           s.hasActiveAgents ||
           s.hasWaitingForUser ||
-          s.hasRecentLog ||
-          (s.hasPlan && !s.planImplementationSessionId && now - new Date(s.modifiedAt).getTime() <= ACTIVE_PLAN_MS));
+          s.hasRecentLog);
       if (isActive) activeSessionIds.add(s.id);
       return isActive;
     });
@@ -2602,12 +2755,13 @@ function renderSessions() {
             ${secondaryName ? `<div class="session-secondary">${escapeHtml(secondaryName)}</div>` : ''}
             ${gitBranch ? `<div class="session-branch">${gitBranch}</div>` : ''}
             ${session.planTitle ? `<div class="session-plan">${escapeHtml(session.planTitle)}</div>` : ''}
+            ${renderGoalSubtitle(session)}
             <div class="session-progress">
               <span class="session-indicators">
                 ${isTeam ? `<span class="team-badge" title="${memberCount} team members"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>${memberCount}</span>` : ''}
                 ${session.sharedTaskList ? `<span class="shared-tasklist-badge" title="Shared task list: ${escapeHtml(session.sharedTaskList)}">${linkSvg(12)}</span>` : ''}
                 ${isTeam || session.project || showCtx ? `<span class="team-info-btn" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="View session info">ℹ</span>` : ''}
-                ${session.hasPlan ? `<span class="plan-indicator" onclick="event.stopPropagation(); openPlanForSession('${session.id}')" title="View plan"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>` : ''}
+                ${session.hasPlan && !session.planSourceSessionId ? `<span class="plan-indicator" onclick="event.stopPropagation(); openPlanForSession('${session.id}')" title="View plan"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>` : ''}
                 ${renderLoopBadge(session)}
                 ${linkedDocsCount > 0 ? `<span class="linked-docs-badge" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="${linkedDocsCount} linked document${linkedDocsCount > 1 ? 's' : ''}">${linkSvg(10)}${linkedDocsCount}</span>` : ''}
                 ${bookmarksCount > 0 ? `<span class="bookmarks-badge" onclick="event.stopPropagation(); openSessionWithBookmarks('${session.id}')" title="${bookmarksCount} bookmarked message${bookmarksCount > 1 ? 's' : ''}"><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="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>${bookmarksCount}</span>` : ''}
@@ -2704,6 +2858,7 @@ function renderSessions() {
       const folderName = projectPath.split(/[/\\]/).pop();
       const isCollapsed = collapsedProjectGroups.has(projectPath);
       const escapedPath = escapeHtml(projectPath);
+      const activeCount = projectSessions.reduce((n, s) => n + (isSessionActive(s) ? 1 : 0), 0);
       const breadcrumbParts = projectPath
         .replace(/^\/home\/[^/]+/, '~')
         .split(/[/\\]/)
@@ -2716,7 +2871,7 @@ function renderSessions() {
             <div class="project-group-header${isCollapsed ? ' collapsed' : ''}" data-group-path="${escapedPath}">
               <svg class="group-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
               <span class="group-name">${escapeHtml(folderName)}</span>
-              <span class="group-count">${projectSessions.length}</span>
+              <span class="group-count" title="${activeCount} active / ${projectSessions.length} total">${activeCount > 0 ? `<span class="group-count-active">${activeCount}</span><span class="group-count-sep">/</span>` : ''}${projectSessions.length}</span>
               <span class="project-view-btn" data-project-path="${escapedPath}" title="Open project view — combined tasks from all sessions">
                 <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="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
               </span>
@@ -2730,11 +2885,12 @@ function renderSessions() {
 
     if (ungrouped.length > 0 && sortedGroups.length > 0) {
       const isCollapsed = collapsedProjectGroups.has('__ungrouped__');
+      const ungroupedActive = ungrouped.reduce((n, s) => n + (isSessionActive(s) ? 1 : 0), 0);
       html += `
             <div class="project-group-header${isCollapsed ? ' collapsed' : ''}" data-group-path="__ungrouped__">
               <svg class="group-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
               <span class="group-name">Ungrouped</span>
-              <span class="group-count">${ungrouped.length}</span>
+              <span class="group-count" title="${ungroupedActive} active / ${ungrouped.length} total">${ungroupedActive > 0 ? `<span class="group-count-active">${ungroupedActive}</span><span class="group-count-sep">/</span>` : ''}${ungrouped.length}</span>
             </div>
             <div class="project-group-sessions${isCollapsed ? ' collapsed' : ''}">
               ${renderGroupSessions(ungrouped, '__pinned___ungrouped__')}
@@ -4256,13 +4412,14 @@ function matchKey(e, ...keys) {
   return keys.some((k) => e.key === k || e.code === k);
 }
 
-const MODAL_ESC_PRIORITY = ['preview-modal', 'msg-detail-modal', 'plan-modal', 'loop-modal'];
+const MODAL_ESC_PRIORITY = ['preview-modal', 'msg-detail-modal', 'tool-stats-modal', 'plan-modal', 'loop-modal'];
 const MODAL_CLOSERS = {
   'preview-modal': () => closePreviewModal(),
   'msg-detail-modal': () => {
     closeMsgDetailModal();
     msgDetailFollowLatest = false;
   },
+  'tool-stats-modal': () => closeToolStatsModal(),
   'plan-modal': () => closePlanModal(),
   'loop-modal': () => closeLoopModal(),
   'team-modal': () => closeTeamModal(),
@@ -5791,6 +5948,13 @@ function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
   });
   html += `</div>`;
 
+  if (session.goal?.condition) {
+    html += `<div class="info-goal-card">
+          <div class="info-goal-head"><span class="info-goal-icon">◎</span>Goal</div>
+          <div class="info-goal-text">${escapeHtml(session.goal.condition)}</div>
+        </div>`;
+  }
+
   if (session.contextStatus) {
     html += `<hr style="border: none; border-top: 1px solid var(--border); margin: 12px 0;">`;
     html += renderContextDetail(session.contextStatus);
@@ -5885,6 +6049,7 @@ function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
   const keyHandler = (e) => {
     if (e.key === 'Escape') {
       if (document.getElementById('plan-modal').classList.contains('visible')) return;
+      if (document.getElementById('tool-stats-modal').classList.contains('visible')) return;
       e.preventDefault();
       closeTeamModal();
       document.removeEventListener('keydown', keyHandler);
@@ -6031,6 +6196,16 @@ function renderLoopModalBody(data) {
   body.innerHTML = section('Wakeups', wakeups, 'wakeup') + section('Cron jobs', crons, 'cron');
 }
 
+function renderGoalSubtitle(session) {
+  const g = session.goal;
+  if (!g?.condition) return '';
+  const short = g.condition.length > 70 ? `${g.condition.slice(0, 70)}…` : g.condition;
+  // Only active (unmet) goals reach here — a met goal auto-clears. Clicking
+  // opens the info modal (full text); stopPropagation so it doesn't also
+  // trigger the card's fetchTasks.
+  return `<div class="session-goal" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="${escapeHtml(g.condition)}"><span class="session-goal-icon">◎</span>${escapeHtml(short)}</div>`;
+}
+
 function renderLoopBadge(session) {
   const li = session.loopInfo;
   const total = (li?.wakeupCount || 0) + (li?.cronCount || 0);
@@ -6140,6 +6315,108 @@ function openMemoryForInfoModal() {
 
 //#endregion
 
+//#region TOOL_STATS_MODAL
+let _toolStatsSortCol = 'count';
+let _toolStatsSortDir = 'desc';
+let _toolStatsData = null;
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function showToolStatsModal(sessionId) {
+  if (!sessionId) return;
+  const body = document.getElementById('tool-stats-modal-body');
+  body.innerHTML = '<div style="padding:16px;color:var(--text-secondary);">Loading…</div>';
+  document.getElementById('tool-stats-modal').classList.add('visible');
+
+  fetch(`/api/sessions/${sessionId}/tool-stats`)
+    .then((r) => (r.ok ? r.json() : null))
+    .catch(() => null)
+    .then((data) => {
+      if (!data) {
+        body.innerHTML = '<div style="padding:16px;color:var(--text-secondary);">Failed to load tool statistics.</div>';
+        return;
+      }
+      _toolStatsSortCol = 'count';
+      _toolStatsSortDir = 'desc';
+      _toolStatsData = data;
+      body.innerHTML = renderToolStatsBody(data);
+    });
+}
+
+function renderToolStatsBody(data) {
+  const { totalCalls, uniqueTools, totalFailed, totalRejected, tools } = data;
+
+  const summary = `
+    <div class="tool-stats-summary">
+      <div class="tool-stats-chip"><span class="tool-stats-chip-val">${totalCalls}</span><span class="tool-stats-chip-lbl">Total calls</span></div>
+      <div class="tool-stats-chip"><span class="tool-stats-chip-val">${uniqueTools}</span><span class="tool-stats-chip-lbl">Unique tools</span></div>
+      <div class="tool-stats-chip"><span class="tool-stats-chip-val${totalFailed > 0 ? ' failed' : ''}">${totalFailed}</span><span class="tool-stats-chip-lbl">Failed</span></div>
+      <div class="tool-stats-chip"><span class="tool-stats-chip-val${totalRejected > 0 ? ' rejected' : ''}">${totalRejected}</span><span class="tool-stats-chip-lbl">Rejected</span></div>
+    </div>`;
+
+  if (!tools?.length) {
+    return (
+      summary +
+      '<div style="padding:24px;text-align:center;color:var(--text-tertiary);">No tool calls recorded in this session.</div>'
+    );
+  }
+
+  const sorted = [...tools].sort((a, b) => {
+    if (_toolStatsSortCol === 'name')
+      return _toolStatsSortDir === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
+    return _toolStatsSortDir === 'asc'
+      ? a[_toolStatsSortCol] - b[_toolStatsSortCol]
+      : b[_toolStatsSortCol] - a[_toolStatsSortCol];
+  });
+  const arrow = (col) => (col === _toolStatsSortCol ? (_toolStatsSortDir === 'asc' ? ' ▲' : ' ▼') : '');
+
+  const table = `<table class="tool-stats-table">
+    <thead><tr>
+      <th onclick="toolStatsSortBy('name')">Tool${arrow('name')}</th>
+      <th onclick="toolStatsSortBy('count')">Calls${arrow('count')}</th>
+      <th onclick="toolStatsSortBy('success')">✓ Success${arrow('success')}</th>
+      <th onclick="toolStatsSortBy('failed')">✗ Failed${arrow('failed')}</th>
+      <th onclick="toolStatsSortBy('rejected')">⊘ Rejected${arrow('rejected')}</th>
+      <th onclick="toolStatsSortBy('impact')" title="Share of total tool output by character count">Impact${arrow('impact')}</th>
+    </tr></thead>
+    <tbody>${sorted
+      .map(
+        (t) => `<tr>
+      <td class="tool-name">${escapeHtml(t.name)}</td>
+      <td>${t.count}</td>
+      <td>${t.success > 0 ? `<span class="badge-success">${t.success}</span>` : '—'}</td>
+      <td>${t.failed > 0 ? `<span class="badge-failed">${t.failed}</span>` : '—'}</td>
+      <td>${t.rejected > 0 ? `<span class="badge-rejected">${t.rejected}</span>` : '—'}</td>
+      <td class="impact-cell">${
+        t.impact != null
+          ? `<div class="impact-cell-inner"><div class="impact-bar-wrap"><div class="impact-bar-fill" style="width:${t.impact}%"></div></div><span class="impact-pct">${t.impact < 1 ? '<1' : t.impact}%</span></div>`
+          : '—'
+      }</td>
+    </tr>`,
+      )
+      .join('')}</tbody>
+  </table>`;
+
+  return summary + table;
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function toolStatsSortBy(col) {
+  if (_toolStatsSortCol === col) {
+    _toolStatsSortDir = _toolStatsSortDir === 'asc' ? 'desc' : 'asc';
+  } else {
+    _toolStatsSortCol = col;
+    _toolStatsSortDir = col === 'name' ? 'asc' : 'desc';
+  }
+  if (!_toolStatsData) return;
+  const body = document.getElementById('tool-stats-modal-body');
+  body.innerHTML = renderToolStatsBody(_toolStatsData);
+}
+
+function closeToolStatsModal() {
+  document.getElementById('tool-stats-modal').classList.remove('visible');
+}
+//#endregion
+
 //#region OWNER_FILTER
 function updateOwnerFilter() {
   const bar = document.getElementById('owner-filter-bar');
@@ -6239,6 +6516,11 @@ try {
   // biome-ignore lint/suspicious/useIterableCallbackReturn: forEach side-effect
   cg.forEach((p) => collapsedProjectGroups.add(p));
 } catch (_) {}
+try {
+  const af = JSON.parse(localStorage.getItem('activityFilter') || '[]');
+  // biome-ignore lint/suspicious/useIterableCallbackReturn: forEach side-effect
+  af.forEach((k) => activityFilter.add(k));
+} catch (_) {}
 initSidebarResize();
 loadPanelWidths();
 initPanelResize('detail-panel', 'detail-panel-resize', '--detail-panel-width', 'detail-panel-width');

package/public/index.html

@@ -543,11 +543,30 @@
       <div id="team-modal-body" class="modal-body"></div>
       <div class="modal-footer">
         <button id="session-info-dismiss-btn" class="btn btn-secondary" onclick="toggleDismissSession(_infoModalSessionId); closeTeamModal()">Dismiss</button>
+        <button class="btn btn-secondary" onclick="showToolStatsModal(_infoModalSessionId)" title="Tool invocation statistics">Tool Stats</button>
         <button class="btn btn-primary" onclick="closeTeamModal()">Close</button>
       </div>
     </div>
   </div>
 
+  <!-- Tool Stats Modal (stacked on top of info modal) -->
+  <div id="tool-stats-modal" class="modal-overlay plan-modal-overlay" onclick="closeToolStatsModal()">
+    <div class="modal tool-stats-modal" onclick="event.stopPropagation()">
+      <div class="modal-header">
+        <h3 id="tool-stats-modal-title" class="modal-title">Tool Statistics</h3>
+        <button class="modal-close" aria-label="Close dialog" onclick="closeToolStatsModal()">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 6L6 18M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+      <div id="tool-stats-modal-body" class="modal-body" style="overflow-y:auto;flex:1 1 auto;min-height:0;"></div>
+      <div class="modal-footer">
+        <button class="btn btn-primary" onclick="closeToolStatsModal()">Close</button>
+      </div>
+    </div>
+  </div>
+
   <!-- Plan Modal (stacked on top of info modal) -->
   <div id="plan-modal" class="modal-overlay plan-modal-overlay" onclick="closePlanModal()">
     <div class="modal plan-modal" onclick="event.stopPropagation()">