claude-code-kanban 4.4.0 → 4.6.0

package/public/app.js

@@ -27,6 +27,8 @@ let agentDurationInterval = null;
 let agentPollInterval = null;
 let selectedTaskId = null;
 let selectedSessionId = null;
+// Task stays selected (keyboard nav) but its white highlight is dimmed once the detail panel closes.
+let taskHighlightDimmed = false;
 let focusZone = 'board'; // 'board' | 'sidebar'
 let appConfig = { marketplaceUrl: null, costUrl: null, memoryUrl: null };
 let selectedSessionIdx = -1;
@@ -161,12 +163,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) {
@@ -582,7 +588,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() {
@@ -1026,7 +1031,7 @@ function renderToolItem(m, i, compact) {
       ? `onclick="showAgentModal('${escapeHtml(m.agentId)}')" ${combinedStyle}`
       : `onclick="msgDetailFollowLatest=false;showMsgDetail(${i})" ${combinedStyle}`;
   const pinBtn = renderMsgPinBtn(m, i);
-  return `<div class="msg-item msg-tool${compactClass}" ${itemClickAttr}>
+  return `<div class="msg-item msg-tool${compactClass}" data-msg-idx="${i}" ${itemClickAttr}>
       ${getToolIcon(m.tool)}
       <div class="msg-body"><div class="msg-text">${escapeHtml(m.tool)}${toolDetail}${agentLink}</div><div class="msg-time">${formatDate(m.timestamp)}</div></div>${agentLogBtn}${pinBtn}
     </div>`;
@@ -1068,7 +1073,7 @@ function renderMessageList(messages) {
       continue;
     }
 
-    const clickable = `onclick="msgDetailFollowLatest=false;showMsgDetail(${i})" style="cursor:pointer"`;
+    const clickable = `data-msg-idx="${i}" onclick="msgDetailFollowLatest=false;showMsgDetail(${i})" style="cursor:pointer"`;
     const pinBtn = renderMsgPinBtn(m, i);
     if (m.type === 'user') {
       if (m.systemLabel) {
@@ -1094,9 +1099,10 @@ function renderMessageList(messages) {
         if (displayText) textHtml = isCmd ? `<code>${escapeHtml(displayText)}</code>` : displayText;
         else if (chips.length) textHtml = '<em class="msg-text-muted">(attachment)</em>';
         else textHtml = '';
-        parts.push(`<div class="msg-item msg-user${isCmd ? ' msg-cmd' : ''}" ${clickable}>
+        const queuedTag = m.queued ? '<span class="msg-queued-tag">queued</span>' : '';
+        parts.push(`<div class="msg-item msg-user${isCmd ? ' msg-cmd' : ''}${m.queued ? ' msg-queued' : ''}" ${clickable}>
             ${MSG_ICON_USER}
-            <div class="msg-body"><div class="msg-text">${textHtml}${cmdArgsHtml}</div>${chipsHtml}<div class="msg-time">${formatDate(m.timestamp)}</div></div>${pinBtn}
+            <div class="msg-body"><div class="msg-text">${textHtml}${cmdArgsHtml}</div>${chipsHtml}<div class="msg-time">${formatDate(m.timestamp)}${queuedTag}</div></div>${pinBtn}
           </div>`);
       }
     } else if (m.type === 'assistant') {
@@ -1144,42 +1150,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
@@ -1214,6 +1258,7 @@ function renderMessages(messages) {
       ? `<div class="msg-limit-banner">Showing last ${MSG_MAX_LOADED} messages</div>`
       : '';
   container.innerHTML = limitBanner + msgsHtml + renderWaitingEntry();
+  highlightSelectedMsg();
   if (!msgUserScrolledUp) container.scrollTop = container.scrollHeight;
   // Auto-load more if content doesn't overflow yet
   if (
@@ -1228,6 +1273,8 @@ function renderMessages(messages) {
 
 let currentMsgDetailIdx = null;
 let msgDetailFollowLatest = false;
+// Message stays tracked but its highlight is dimmed once the detail modal closes.
+let msgHighlightDimmed = false;
 const MSG_DETAIL_WAITING_IDX = -2;
 let currentPins = [];
 let pinnedCollapsed = false;
@@ -1246,6 +1293,8 @@ const MSG_ICON_TEAMMATE =
   '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>';
 const MSG_ICON_IDLE =
   '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6"/></svg>';
+const ICON_AGENT =
+  '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 2v2M15 2v2M9 20v2M15 20v2M20 9h2M20 14h2M2 9h2M2 14h2"/></svg>';
 const ICON_TASK =
   '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>';
 const ICON_WEB =
@@ -1268,7 +1317,7 @@ const TOOL_ICONS = {
   Edit: '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
   Glob: '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><circle cx="14" cy="14" r="3"/><line x1="16.5" y1="16.5" x2="19" y2="19"/></svg>',
   Grep: '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
-  Agent: MSG_ICON_TEAMMATE,
+  Agent: ICON_AGENT,
   SendMessage:
     '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>',
   TaskCreate: ICON_TASK,
@@ -1354,6 +1403,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,
@@ -1363,6 +1426,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,
@@ -1588,10 +1654,20 @@ const linkSvg = (size) =>
 //#region MODALS
 function renderUserAttachments(m) {
   const parts = [];
-  if (m.images?.length && m.uuid && currentSessionId) {
+  if (m.images?.length && currentSessionId) {
+    const sid = encodeURIComponent(currentSessionId);
     const imgs = m.images
       .map((img) => {
-        const url = `/api/sessions/${encodeURIComponent(currentSessionId)}/user-image/${encodeURIComponent(m.uuid)}/${img.blockIndex}`;
+        // Cache-kind images live on disk (image-cache/<sessionId>/<n>.png); base64
+        // images are read from the JSONL block and need the message uuid.
+        let url;
+        if (img.kind === 'cache') {
+          url = `/api/sessions/${sid}/cached-image/${img.n}`;
+        } else if (m.uuid) {
+          url = `/api/sessions/${sid}/user-image/${encodeURIComponent(m.uuid)}/${img.blockIndex}`;
+        } else {
+          return '';
+        }
         return `<img src="${url}" loading="lazy" alt="user image" class="user-attach-image" />`;
       })
       .join('');
@@ -1620,10 +1696,22 @@ function renderUserAttachments(m) {
   return parts.join('');
 }
 
+// Highlight the message whose detail is open, mirroring task-card selection.
+function highlightSelectedMsg() {
+  const container = document.getElementById('message-panel-content');
+  if (!container) return;
+  for (const el of container.querySelectorAll('.msg-item.selected')) el.classList.remove('selected');
+  if (msgHighlightDimmed || currentMsgDetailIdx == null || currentMsgDetailIdx < 0) return;
+  const el = container.querySelector(`.msg-item[data-msg-idx="${currentMsgDetailIdx}"]`);
+  if (el) el.classList.add('selected');
+}
+
 function showMsgDetail(idx) {
   currentMsgDetailIdx = idx;
+  msgHighlightDimmed = false;
   const m = currentMessages[idx];
   if (!m) return;
+  highlightSelectedMsg();
   const body = document.getElementById('msg-detail-body');
   if (m.type === 'tool_use') {
     document.getElementById('msg-detail-title').textContent = m.tool;
@@ -1671,7 +1759,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';
@@ -1725,6 +1815,12 @@ function showMsgDetail(idx) {
 function closeMsgDetailModal() {
   resetModalFullscreen('msg-detail-modal');
   msgDetailFollowLatest = false;
+  // Drop the message highlight on close, mirroring task-card behavior.
+  msgHighlightDimmed = true;
+  const container = document.getElementById('message-panel-content');
+  if (container) {
+    for (const el of container.querySelectorAll('.msg-item.selected')) el.classList.remove('selected');
+  }
 }
 
 function _setModalWidth(modal, slot, on, maxWidth, width) {
@@ -1890,16 +1986,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>`,
@@ -1908,8 +2063,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)">`;
@@ -1924,14 +2090,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,
@@ -2109,6 +2279,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');
 }
@@ -2221,7 +2401,8 @@ function renderAgentFooter() {
           : '';
         const agentColor = resolveNamedColor(a.color);
         const colorStyle = agentColor ? ` style="border-left:3px solid ${agentColor.color}"` : '';
-        return `<div class="agent-card"${colorStyle} onclick="showAgentModal('${a.agentId}')">
+        const selectedClass = a.agentId === currentAgentModalId ? ' selected' : '';
+        return `<div class="agent-card${selectedClass}" data-agent-id="${escapeHtml(a.agentId)}"${colorStyle} onclick="showAgentModal('${a.agentId}')">
           <div class="agent-type-row">${typeNs ? `<span class="agent-type-ns">${escapeHtml(typeNs)}</span>` : ''}<span class="agent-type-name">${escapeHtml(typeName)}</span>${nameBadgeHtml}</div>
           <div class="agent-status-row"><span class="agent-dot ${a.status}"></span><span class="agent-status">${statusText}</span></div>
           ${msgHtml}
@@ -2313,6 +2494,7 @@ function showAgentModal(agentId) {
   const agent = findAgentById(agentId);
   if (!agent) return;
   currentAgentModalId = agentId;
+  highlightSelectedAgent();
   const modal = document.getElementById('agent-modal');
   const title = document.getElementById('agent-modal-title');
   const body = document.getElementById('agent-modal-body');
@@ -2382,6 +2564,16 @@ function showAgentModal(agentId) {
 function closeAgentModal() {
   resetModalFullscreen('agent-modal');
   currentAgentModalId = null;
+  highlightSelectedAgent();
+}
+
+function highlightSelectedAgent() {
+  const content = document.getElementById('agent-footer-content');
+  if (!content) return;
+  for (const el of content.querySelectorAll('.agent-card.selected')) el.classList.remove('selected');
+  if (currentAgentModalId == null) return;
+  const el = content.querySelector(`.agent-card[data-agent-id="${currentAgentModalId}"]`);
+  if (el) el.classList.add('selected');
 }
 
 //#endregion
@@ -2463,7 +2655,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;
@@ -2472,8 +2663,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;
     });
@@ -2613,11 +2803,12 @@ 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>` : ''}
+                ${isTeam || session.project || showCtx ? `<span class="team-info-btn" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="View session info"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>` : ''}
                 ${session.hasPlan && !session.planSourceSessionId ? `<span class="plan-indicator" onclick="event.stopPropagation(); openPlanForSession('${session.id}')" title="View plan"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>` : ''}
                 ${renderLoopBadge(session)}
                 ${linkedDocsCount > 0 ? `<span class="linked-docs-badge" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="${linkedDocsCount} linked document${linkedDocsCount > 1 ? 's' : ''}">${linkSvg(10)}${linkedDocsCount}</span>` : ''}
@@ -2715,6 +2906,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(/[/\\]/)
@@ -2727,7 +2919,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>
@@ -2741,11 +2933,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__')}
@@ -2935,7 +3128,7 @@ function renderKanban() {
       document.querySelector(`.task-card[data-task-id="${selectedTaskId}"][data-session-id="${selectedSessionId}"]`) ||
       document.querySelector(`.task-card[data-task-id="${selectedTaskId}"]`);
     if (card) {
-      if (focusZone === 'board') card.classList.add('selected');
+      if (focusZone === 'board' && !taskHighlightDimmed) card.classList.add('selected');
     } else {
       selectedTaskId = null;
       selectedSessionId = null;
@@ -3023,6 +3216,7 @@ function selectTask(taskId, sessionId) {
   if (prev) prev.classList.remove('selected');
   selectedTaskId = taskId;
   selectedSessionId = sessionId;
+  taskHighlightDimmed = false;
   if (!taskId) return;
   const card =
     document.querySelector(`.task-card[data-task-id="${taskId}"][data-session-id="${sessionId}"]`) ||
@@ -3263,6 +3457,8 @@ function setFocusZone(zone) {
       }
     }
   } else {
+    // Focusing the board is an explicit nav gesture — restore the highlight.
+    taskHighlightDimmed = false;
     // Session changed while in sidebar — reset stale selection
     if (selectedSessionId && selectedSessionId !== currentSessionId) {
       selectedTaskId = null;
@@ -3565,6 +3761,10 @@ async function addNote(event, taskId, sessionId) {
 function closeDetailPanel() {
   detailPanel.classList.remove('visible');
   document.getElementById('delete-task-btn').style.display = 'none';
+  // Keep the task selected for keyboard nav, but drop its white highlight.
+  taskHighlightDimmed = true;
+  const sel = document.querySelector('.task-card.selected');
+  if (sel) sel.classList.remove('selected');
 }
 
 let deleteTaskId = null;
@@ -5139,6 +5339,8 @@ function isWaitingFresh() {
 function showWaitingDetail() {
   if (!isWaitingFresh()) return;
   currentMsgDetailIdx = MSG_DETAIL_WAITING_IDX;
+  msgHighlightDimmed = false;
+  highlightSelectedMsg();
   const tool = currentWaiting.toolName || 'unknown';
   const label = getWaitingLabel(currentWaiting.kind, tool);
   const body = document.getElementById('msg-detail-body');
@@ -5778,9 +5980,9 @@ function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
     infoRows.push(['Team Config', teamConfig.configPath, { openPath: configDir, openFile: teamConfig.configPath }]);
   }
   const clickableStyle =
-    "font-family: 'IBM Plex Mono', monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; color: var(--accent-text); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;";
+    'font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; color: var(--accent-text); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;';
   const plainStyle =
-    "font-family: 'IBM Plex Mono', monospace; font-size: 12px; user-select: all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;";
+    'font-family: var(--mono); font-size: 12px; color: var(--text-primary); user-select: all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;';
   html += `<div class="team-modal-meta info-grid">`;
   infoRows.forEach(([label, value, opts]) => {
     const copyVal = escapeHtml(value).replace(/"/g, '&quot;');
@@ -5803,6 +6005,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);
@@ -6044,6 +6253,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);
@@ -6181,13 +6400,14 @@ function showToolStatsModal(sessionId) {
 }
 
 function renderToolStatsBody(data) {
-  const { totalCalls, uniqueTools, totalFailed, tools } = 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) {
@@ -6212,6 +6432,7 @@ function renderToolStatsBody(data) {
       <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
@@ -6221,6 +6442,7 @@ function renderToolStatsBody(data) {
       <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>`