claude-code-kanban 4.0.0 → 4.2.0

package/public/app.js

@@ -18,6 +18,7 @@ let bulkDeleteSessionId = null; // Track session for bulk delete
 let ownerFilter = '';
 let currentAgents = [];
 let currentWaiting = null;
+let lastWaitingHash = '';
 let lastAgentsHash = '';
 let messagePanelOpen = false;
 let lastMessagesHash = '';
@@ -443,11 +444,12 @@ function renderActivityChip() {
   let waiting = 0;
   let active = 0;
   for (const s of sessions) {
+    if (dismissedSessionIds.has(s.id)) continue;
     if (s.hasWaitingForUser) waiting++;
     else if (s.inProgress > 0 || s.hasRecentLog || s.hasRunningAgents) active++;
   }
 
-  const key = `${waiting}|${active}|${[...activityFilter].sort().join(',')}`;
+  const key = `${waiting}|${active}|${dismissedSessionIds.size}|${[...activityFilter].sort().join(',')}`;
   if (key === lastChipKey) return;
   lastChipKey = key;
 
@@ -565,15 +567,18 @@ async function fetchTasks(sessionId) {
   }
 }
 
-const _AGENT_COOLDOWN_MS = 3 * 60 * 1000;
-const _AGENT_STALE_MS = 5 * 60 * 1000; // kept for reference; no longer used for force-stopping
+// #region TIMINGS
 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() {
   currentAgents = [];
   currentWaiting = null;
   lastAgentsHash = '';
+  lastWaitingHash = '';
   renderAgentFooter();
 }
 
@@ -595,6 +600,12 @@ async function fetchAgents(sessionId) {
     for (const k of Object.keys(ownerColorCache)) delete ownerColorCache[k];
     renderAgentFooter();
     if (currentSessionId === sessionId) renderKanban();
+    const waitHash = JSON.stringify(currentWaiting);
+    if (waitHash !== lastWaitingHash) {
+      lastWaitingHash = waitHash;
+      if (messagePanelOpen && currentMessages.length) renderMessages(currentMessages);
+      maybeFollowLatest();
+    }
   } catch (e) {
     console.error('[fetchAgents]', e);
   }
@@ -899,6 +910,11 @@ function parseCommandMessage(text) {
   return null;
 }
 
+function parseCommandArgs(text) {
+  const m = (text || '').match(/<command-args>([^<]*)<\/command-args>/);
+  return m?.[1].trim() || '';
+}
+
 function cleanMessageText(text) {
   const cmd = parseCommandMessage(text);
   if (cmd) return cmd;
@@ -1051,11 +1067,25 @@ function renderMessageList(messages) {
           </div>`);
       } else {
         const cmd = parseCommandMessage(m.text);
+        const cmdArgs = cmd ? parseCommandArgs(m.fullText || m.text) : '';
         const displayText = cmd ? cmd : escapeHtml(cleanMessageText(m.text));
         const isCmd = !!cmd;
+        const cmdArgsHtml =
+          cmd && cmdArgs ? ` <span style="color:var(--text-secondary)">${escapeHtml(cmdArgs)}</span>` : '';
+        const chips = [];
+        const imgCount = m.images?.length || 0;
+        const trCount = m.toolResultRefs?.length || 0;
+        if (imgCount) chips.push(`<span class="user-attach-chip">${imgCount} image${imgCount > 1 ? 's' : ''}</span>`);
+        if (trCount)
+          chips.push(`<span class="user-attach-chip">${trCount} tool result${trCount > 1 ? 's' : ''}</span>`);
+        const chipsHtml = chips.length ? `<div class="user-attach-chips">${chips.join('')}</div>` : '';
+        let textHtml;
+        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}>
             ${MSG_ICON_USER}
-            <div class="msg-body"><div class="msg-text">${isCmd ? `<code>${escapeHtml(displayText)}</code>` : displayText}</div><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)}</div></div>${pinBtn}
           </div>`);
       }
     } else if (m.type === 'assistant') {
@@ -1103,6 +1133,62 @@ 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 */
+  }
+  return '';
+}
+
+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>`
+    : '';
+  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>`;
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
+async function discardWaiting() {
+  if (!currentSessionId) return;
+  try {
+    const res = await fetch(`/api/sessions/${encodeURIComponent(currentSessionId)}/waiting/discard`, {
+      method: 'POST',
+    });
+    if (res.ok) {
+      currentWaiting = null;
+      if (currentMsgDetailIdx === MSG_DETAIL_WAITING_IDX) closeMsgDetailModal();
+      renderMessages(currentMessages);
+      renderAgentFooter();
+    }
+  } catch (e) {
+    console.error('[discardWaiting]', e);
+  }
+}
+
 function renderMessages(messages) {
   const container = document.getElementById('message-panel-content');
   const pinnedContainer = document.getElementById('message-panel-pinned');
@@ -1116,7 +1202,7 @@ function renderMessages(messages) {
     currentMessages.length >= MSG_MAX_LOADED
       ? `<div class="msg-limit-banner">Showing last ${MSG_MAX_LOADED} messages</div>`
       : '';
-  container.innerHTML = limitBanner + msgsHtml;
+  container.innerHTML = limitBanner + msgsHtml + renderWaitingEntry();
   if (!msgUserScrolledUp) container.scrollTop = container.scrollHeight;
   // Auto-load more if content doesn't overflow yet
   if (
@@ -1131,6 +1217,7 @@ function renderMessages(messages) {
 
 let currentMsgDetailIdx = null;
 let msgDetailFollowLatest = false;
+const MSG_DETAIL_WAITING_IDX = -2;
 let currentPins = [];
 let pinnedCollapsed = false;
 
@@ -1152,6 +1239,16 @@ 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 =
   '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>';
+const ICON_OPEN_EXTERNAL =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3h7v7"/><path d="M10 14L21 3"/><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></svg>';
+const ICON_COPY =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+const ICON_CHECKMARK =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M20 6L9 17l-5-5"/></svg>';
+const ICON_AGENT_WAITING =
+  '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>';
+const ICON_CHAT =
+  '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
 const TOOL_ICONS = {
   Bash: '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="18" rx="2"/><polyline points="7 10 10 13 7 16"/><line x1="13" y1="16" x2="17" y2="16"/></svg>',
   Read: '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',
@@ -1169,8 +1266,8 @@ const TOOL_ICONS = {
   TaskList: ICON_TASK,
   ToolSearch:
     '<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"/><line x1="8" y1="11" x2="14" y2="11"/></svg>',
-  AskUserQuestion:
-    '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
+  AskUserQuestion: ICON_CHAT,
+  ExitPlanMode: ICON_CHAT,
   Skill:
     '<svg class="msg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
   WebFetch: ICON_WEB,
@@ -1470,10 +1567,6 @@ function _renderPinToDetail(pin) {
 }
 
 const SESSION_PIN_SVG = PIN_SVG.replace('width="14" height="14"', 'width="12" height="12"');
-const MARKETPLACE_SVG =
-  '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>';
-const MEMORY_SVG =
-  '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>';
 const LINK_SVG_PATHS =
   '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>';
 const linkSvg = (size) =>
@@ -1482,6 +1575,40 @@ const linkSvg = (size) =>
 //#endregion
 
 //#region MODALS
+function renderUserAttachments(m) {
+  const parts = [];
+  if (m.images?.length && m.uuid && currentSessionId) {
+    const imgs = m.images
+      .map((img) => {
+        const url = `/api/sessions/${encodeURIComponent(currentSessionId)}/user-image/${encodeURIComponent(m.uuid)}/${img.blockIndex}`;
+        return `<img src="${url}" loading="lazy" alt="user image" class="user-attach-image" />`;
+      })
+      .join('');
+    parts.push(
+      `<div class="user-attach-section"><div class="user-attach-label">Attached images</div><div class="user-attach-images">${imgs}</div></div>`,
+    );
+  }
+  if (m.toolResultRefs?.length) {
+    const refs = m.toolResultRefs
+      .map((ref) => {
+        const safeId = escapeHtml(ref.toolUseId);
+        const shortId = ref.toolUseId.length > 14 ? `${ref.toolUseId.slice(0, 14)}…` : ref.toolUseId;
+        const preview = ref.preview ? escapeHtml(ref.preview) : '<em>(no text)</em>';
+        const expandId = `user-tr-${ref.toolUseId}`;
+        return `<details class="user-attach-toolresult">
+          <summary>Tool result <code>${escapeHtml(shortId)}</code></summary>
+          <pre class="${TINTED_PRE_CLASS}" id="${expandId}">${preview}</pre>
+          <button type="button" class="tool-result-expand-btn" data-expand-id="${expandId}" data-tool-use-id="${safeId}" onclick="_toggleToolResultExpand(this)">Show full</button>
+        </details>`;
+      })
+      .join('');
+    parts.push(
+      `<div class="user-attach-section"><div class="user-attach-label">Tool results in this message</div>${refs}</div>`,
+    );
+  }
+  return parts.join('');
+}
+
 function showMsgDetail(idx) {
   currentMsgDetailIdx = idx;
   const m = currentMessages[idx];
@@ -1546,25 +1673,27 @@ function showMsgDetail(idx) {
       body.innerHTML = renderMarkdown(text);
     }
   } else {
-    const rawText = stripAnsi(m.fullText || m.text);
+    const rawText = stripAnsi(m.fullText || m.text || '');
     const cmd = m.type === 'user' ? parseCommandMessage(rawText) : null;
     document.getElementById('msg-detail-title').textContent =
       m.type === 'assistant' ? 'Claude' : m.systemLabel ? 'System' : 'User';
     document.getElementById('msg-detail-agent-btn').style.display = 'none';
+    const userExtras = m.type === 'user' ? renderUserAttachments(m) : '';
     if (m.compactSummary) {
-      body.innerHTML = renderMarkdown(m.compactSummary);
+      body.innerHTML = renderMarkdown(m.compactSummary) + userExtras;
     } else if (cmd) {
-      const argsMatch = rawText.match(/<command-args>([^<]*)<\/command-args>/);
-      const args = argsMatch?.[1].trim() ? argsMatch[1].trim() : null;
+      const args = parseCommandArgs(rawText) || null;
       const cleanBody = rawText
         .replace(/<command-[^>]+>[\s\S]*?<\/command-[^>]+>/g, '')
         .replace(/<local-command-[^>]+>[\s\S]*?<\/local-command-[^>]+>/g, '')
         .trim();
       let cmdHtml = `<code>${escapeHtml(cmd)}${args ? ` ${escapeHtml(args)}` : ''}</code>`;
       if (cleanBody) cmdHtml += `<div style="margin-top:10px">${renderMarkdown(cleanBody)}</div>`;
-      body.innerHTML = cmdHtml;
+      body.innerHTML = cmdHtml + userExtras;
+    } else if (rawText) {
+      body.innerHTML = renderMarkdown(rawText) + userExtras;
     } else {
-      body.innerHTML = renderMarkdown(rawText);
+      body.innerHTML = userExtras || '<em>No content</em>';
     }
   }
   const modal = document.getElementById('msg-detail-modal').querySelector('.modal');
@@ -1649,8 +1778,7 @@ async function copyWithFeedback(text, btn) {
     await navigator.clipboard.writeText(text);
     btn.dataset.copying = '1';
     const svg = btn.innerHTML;
-    btn.innerHTML =
-      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M20 6L9 17l-5-5"/></svg>';
+    btn.innerHTML = ICON_CHECKMARK;
     setTimeout(() => {
       btn.innerHTML = svg;
       delete btn.dataset.copying;
@@ -2028,7 +2156,7 @@ function renderAgentFooter() {
     )
     .slice(0, AGENT_LOG_MAX);
 
-  const permFresh = currentWaiting?.timestamp && now - new Date(currentWaiting.timestamp).getTime() < WAITING_TTL_MS;
+  const permFresh = isWaitingFresh();
 
   if (visible.length === 0 && !permFresh) {
     footer.classList.remove('visible');
@@ -2322,10 +2450,8 @@ function renderSessions() {
 
   // Filter pipeline: active filter → force-include revealed/current (non-pinned) sessions →
   // project filter → search filter → ensure pinned/sticky sessions are always included
-  const LIVE_INDICATOR_MS = 10 * 1000;
   let filteredSessions = sessions;
   if (sessionFilter === 'active') {
-    const ACTIVE_PLAN_MS = 15 * 60 * 1000;
     const now = Date.now();
     const activeSessionIds = new Set();
     filteredSessions = filteredSessions.filter((s) => {
@@ -2473,15 +2599,13 @@ function renderSessions() {
                 ${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>` : ''}
+                ${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>` : ''}
                 ${hasScratchpad ? `<span class="scratchpad-badge" onclick="event.stopPropagation(); openSessionScratchpad('${session.id}')" title="Open scratchpad"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></span>` : ''}
-                ${session.hasRunningAgents ? '<span class="agent-badge" title="Active agents">🤖</span>' : ''}
-                ${session.planSourceSessionId ? `<span class="plan-indicator" title="Implements plan — click to reveal plan session" onclick="event.stopPropagation(); revealPlanSession('${escapeHtml(session.planSourceSessionId)}')">📋</span>` : ''}
-                ${session.hasWaitingForUser ? '<span class="agent-badge" title="Waiting for user">❓</span>' : ''}
-                ${(window.__HUB__?.enabled || appConfig.marketplaceUrl) && session.project ? `<span class="marketplace-btn" data-project-path="${escapeHtml(session.project)}" onclick="event.stopPropagation(); openMarketplace(this.dataset.projectPath)" title="Open in Marketplace">${MARKETPLACE_SVG}</span>` : ''}
-                ${(window.__HUB__?.enabled || appConfig.memoryUrl) && session.project ? `<span class="marketplace-btn" data-project-path="${escapeHtml(session.project)}" onclick="event.stopPropagation(); openMemory(this.dataset.projectPath)" title="Open in Memory">${MEMORY_SVG}</span>` : ''}
-                ${isLive ? '<span class="pulse"></span>' : ''}
+                ${session.planSourceSessionId ? `<span class="plan-indicator" title="Implements plan — click to reveal plan session" onclick="event.stopPropagation(); revealPlanSession('${escapeHtml(session.planSourceSessionId)}')"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>` : ''}
+                ${session.hasWaitingForUser ? `<span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>` : ''}
+                ${isLive || session.hasRunningAgents ? `<span class="pulse" title="${isLive ? 'Live' : 'Active agents'}"></span>` : ''}
               </span>
               <div class="progress-bar"><div class="progress-fill" style="width: ${percent}%"></div></div>
               <span class="progress-text">${session.completed}/${total}</span>
@@ -4147,7 +4271,7 @@ 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'];
+const MODAL_ESC_PRIORITY = ['preview-modal', 'msg-detail-modal', 'plan-modal', 'loop-modal'];
 const MODAL_CLOSERS = {
   'preview-modal': () => closePreviewModal(),
   'msg-detail-modal': () => {
@@ -4155,6 +4279,7 @@ const MODAL_CLOSERS = {
     msgDetailFollowLatest = false;
   },
   'plan-modal': () => closePlanModal(),
+  'loop-modal': () => closeLoopModal(),
   'team-modal': () => closeTeamModal(),
   'agent-modal': () => closeAgentModal(),
   'help-modal': () => closeHelpModal(),
@@ -4189,7 +4314,13 @@ document.addEventListener('keydown', (e) => {
     } else if (document.getElementById('msg-detail-modal').classList.contains('visible')) {
       if (matchKey(e, 'ArrowDown', 'KeyJ')) {
         e.preventDefault();
-        if (currentMsgDetailIdx < currentMessages.length - 1) {
+        if (currentMsgDetailIdx === MSG_DETAIL_WAITING_IDX) {
+          msgDetailFollowLatest = true;
+          showWaitingDetail();
+        } else if (currentMsgDetailIdx === currentMessages.length - 1 && isWaitingFresh()) {
+          msgDetailFollowLatest = false;
+          showWaitingDetail();
+        } else if (currentMsgDetailIdx < currentMessages.length - 1) {
           msgDetailFollowLatest = false;
           showMsgDetail(currentMsgDetailIdx + 1);
         } else if (currentMsgDetailIdx === currentMessages.length - 1) {
@@ -4198,7 +4329,12 @@ document.addEventListener('keydown', (e) => {
         }
       } else if (matchKey(e, 'ArrowUp', 'KeyK')) {
         e.preventDefault();
-        if (currentMsgDetailIdx > 0) {
+        if (currentMsgDetailIdx === MSG_DETAIL_WAITING_IDX) {
+          if (currentMessages.length) {
+            msgDetailFollowLatest = false;
+            showMsgDetail(currentMessages.length - 1);
+          }
+        } else if (currentMsgDetailIdx > 0) {
           msgDetailFollowLatest = false;
           showMsgDetail(currentMsgDetailIdx - 1);
         }
@@ -4223,6 +4359,9 @@ document.addEventListener('keydown', (e) => {
     const msgDetailModal = document.getElementById('msg-detail-modal');
     if (msgDetailModal.classList.contains('visible')) {
       closeMsgDetailModal();
+    } else if (isWaitingFresh()) {
+      msgDetailFollowLatest = true;
+      showWaitingDetail();
     } else if (currentMessages.length) {
       msgDetailFollowLatest = true;
       showMsgDetail(currentMessages.length - 1);
@@ -4380,6 +4519,7 @@ document.addEventListener('keydown', (e) => {
     dismissedSessionIds.add(contextSid);
     updateDismissBtnState();
     renderSessions();
+    renderActivityChip();
     const newItems = getNavigableItems();
     const targetIdx = newItems.length > 0 ? Math.max(0, prevIdx - 1) : -1;
     // If the dismissed session is currently open, navigate to the previous one
@@ -4986,11 +5126,50 @@ function renderContextDetail(raw) {
 
 //#region UTILS
 function maybeFollowLatest() {
-  if (msgDetailFollowLatest && currentMessages.length) {
+  if (!msgDetailFollowLatest) return;
+  if (isWaitingFresh()) {
+    showWaitingDetail();
+  } else if (currentMessages.length) {
     showMsgDetail(currentMessages.length - 1);
   }
 }
 
+function isWaitingFresh() {
+  if (!currentWaiting?.timestamp) return false;
+  return Date.now() - new Date(currentWaiting.timestamp).getTime() < WAITING_TTL_MS;
+}
+
+function showWaitingDetail() {
+  if (!isWaitingFresh()) return;
+  currentMsgDetailIdx = MSG_DETAIL_WAITING_IDX;
+  const tool = currentWaiting.toolName || 'unknown';
+  const label = getWaitingLabel(currentWaiting.kind, tool);
+  const body = document.getElementById('msg-detail-body');
+  let inputHtml = '';
+  if (currentWaiting.toolInput) {
+    let pretty = currentWaiting.toolInput;
+    try {
+      pretty = JSON.stringify(JSON.parse(currentWaiting.toolInput), null, 2);
+    } catch (_) {
+      /* keep raw */
+    }
+    inputHtml = `<pre class="${TINTED_PRE_CLASS}">${escapeHtml(pretty)}</pre>`;
+  }
+  body.innerHTML = inputHtml;
+  document.getElementById('msg-detail-title').textContent = label;
+  document.getElementById('msg-detail-agent-btn').style.display = 'none';
+  const modal = document.getElementById('msg-detail-modal').querySelector('.modal');
+  autoSizeModal(modal, body);
+  modal.classList.toggle('live', msgDetailFollowLatest);
+  const overlay = document.getElementById('msg-detail-modal');
+  overlay.classList.toggle('live-overlay', msgDetailFollowLatest);
+  const meta = [formatDate(currentWaiting.timestamp), 'waiting'];
+  document.getElementById('msg-detail-meta').textContent = meta.join(' · ');
+  currentPinDetailId = null;
+  updateMsgDetailPinState();
+  overlay.classList.add('visible');
+}
+
 function isSessionActive(s) {
   return s.hasRecentLog || s.inProgress > 0 || s.hasActiveAgents || s.hasWaitingForUser;
 }
@@ -5088,7 +5267,7 @@ function renderAgentTabs(promptHtml, responseHtml, promptText, responseText) {
   }
   if (!tabs.length) return '';
   const defaultTab = responseHtml ? 'response' : tabs[0].key;
-  const copyBtnHtml = `<button class="agent-tab-copy" title="Copy" onclick="copyAgentTabActive('${id}',this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg></button>`;
+  const copyBtnHtml = `<button class="agent-tab-copy" title="Copy" onclick="copyAgentTabActive('${id}',this)">${ICON_COPY}</button>`;
   const tabsHtml = tabs
     .map(
       (t) =>
@@ -5493,13 +5672,13 @@ async function showSessionInfoModal(sessionId) {
   // and re-rendered when they arrive, so the modal doesn't block on network.
   _planSessionId = sessionId;
   const cachedTasks = currentSessionId === sessionId ? currentTasks : [];
-  showInfoModal(session, null, cachedTasks, null);
+  showInfoModal(session, null, cachedTasks, null, null);
 
-  const rerender = (teamConfig, tasks, planContent) => {
+  const rerender = (teamConfig, tasks, planContent, parentInfo) => {
     if (_planSessionId !== sessionId) return; // user opened a different modal
     const modal = document.getElementById('team-modal');
     if (!modal?.classList.contains('visible')) return; // user closed modal — don't reopen
-    showInfoModal(session, teamConfig, tasks, planContent);
+    showInfoModal(session, teamConfig, tasks, planContent, parentInfo);
   };
 
   const teamPromise = session.isTeam
@@ -5520,8 +5699,17 @@ async function showSessionInfoModal(sessionId) {
           .then((r) => (r.ok ? r.json() : []))
           .catch(() => []);
 
-  const [teamConfig, planContent, tasks] = await Promise.all([teamPromise, planPromise, tasksPromise]);
-  rerender(teamConfig, tasks, planContent);
+  const parentPromise = fetch(`/api/sessions/${sessionId}/parent`)
+    .then((r) => (r.ok ? r.json() : null))
+    .catch(() => null);
+
+  const [teamConfig, planContent, tasks, parentInfo] = await Promise.all([
+    teamPromise,
+    planPromise,
+    tasksPromise,
+    parentPromise,
+  ]);
+  rerender(teamConfig, tasks, planContent, parentInfo);
 }
 
 let _infoModalSessionId = null;
@@ -5538,7 +5726,7 @@ function updateStickyBtnState() {
   if (svg) svg.setAttribute('fill', isSticky ? 'currentColor' : 'none');
 }
 
-function showInfoModal(session, teamConfig, tasks, planContent) {
+function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
   const modal = document.getElementById('team-modal');
   const titleEl = document.getElementById('team-modal-title');
   const bodyEl = document.getElementById('team-modal-body');
@@ -5558,6 +5746,13 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
   // Each row: [label, displayValue, { openPath?, copyValue? }]
   const infoRows = [];
   infoRows.push(['Session', session.id, { openClaudeDir: true, openFile: session.jsonlPath }]);
+  if (parentInfo?.parentSessionId) {
+    infoRows.push([
+      'Forked from',
+      parentInfo.parentSessionId,
+      { openClaudeDir: true, openFile: parentInfo.parentJsonlPath, openSession: parentInfo.parentSessionId },
+    ]);
+  }
   if (session.slug && session.hasPlan) {
     infoRows.push(['Slug', session.slug, { openClaudeDir: true, openFile: session.planPath }]);
   }
@@ -5589,19 +5784,25 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
     "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;";
   const plainStyle =
     "font-family: 'IBM Plex Mono', monospace; font-size: 12px; user-select: all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;";
-  html += `<div class="team-modal-meta" style="margin-bottom: 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 6px 12px; align-items: center;">`;
+  html += `<div class="team-modal-meta info-grid">`;
   infoRows.forEach(([label, value, opts]) => {
     const copyVal = escapeHtml(value).replace(/"/g, '&quot;');
     html += `<span style="font-weight: 500; color: var(--text-secondary); font-size: 12px; white-space: nowrap;">${label}</span>`;
-    if (opts?.openClaudeDir || opts?.openPath) {
-      const folder = opts.openClaudeDir ? '' : escapeHtml(opts.openPath).replace(/"/g, '&quot;');
-      const file = opts.openFile ? escapeHtml(opts.openFile).replace(/"/g, '&quot;') : '';
-      html += `<span data-folder="${folder}" data-file="${file}" data-claude-dir="${opts.openClaudeDir ? '1' : ''}" onclick="openFolderInEditor(this.dataset.claudeDir ? undefined : this.dataset.folder, this.dataset.file || undefined)" style="${clickableStyle}" title="Open in editor">${escapeHtml(value)}</span>`;
+    if (opts?.openSession) {
+      const sid = _escapeForJsAttr(escapeHtml(opts.openSession).replace(/"/g, '&quot;'));
+      html += `<span onclick="openSessionFromInfo('${sid}')" style="${clickableStyle}" title="Open session in app">${escapeHtml(value)}</span>`;
     } else {
       html += `<span style="${plainStyle}" title="${copyVal}">${escapeHtml(value)}</span>`;
     }
     const jsCopyVal = _escapeForJsAttr(copyVal);
-    html += `<button onclick="navigator.clipboard.writeText('${jsCopyVal}'); this.textContent='✓'; setTimeout(() => this.textContent='Copy', 1000)" style="padding: 2px 8px; font-size: 11px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); cursor: pointer; white-space: nowrap;">Copy</button>`;
+    const copyBtn = `<button onclick="copyWithFeedback('${jsCopyVal}', this)" title="Copy">${ICON_COPY}</button>`;
+    let openBtn = '';
+    if (opts?.openClaudeDir || opts?.openPath) {
+      const folder = opts.openClaudeDir ? '' : escapeHtml(opts.openPath).replace(/"/g, '&quot;');
+      const file = opts.openFile ? escapeHtml(opts.openFile).replace(/"/g, '&quot;') : '';
+      openBtn = `<button data-folder="${folder}" data-file="${file}" data-claude-dir="${opts.openClaudeDir ? '1' : ''}" onclick="openFolderInEditor(this.dataset.claudeDir ? undefined : this.dataset.folder, this.dataset.file || undefined)" title="Open in editor">${ICON_OPEN_EXTERNAL}</button>`;
+    }
+    html += `<span class="info-row-actions">${copyBtn}${openBtn}</span>`;
   });
   html += `</div>`;
 
@@ -5687,6 +5888,11 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
   updateDismissBtnState();
   const costBtn = document.getElementById('session-info-cost-btn');
   if (costBtn) costBtn.style.display = window.__HUB__?.enabled || appConfig.costUrl ? '' : 'none';
+  const mkBtn = document.getElementById('session-info-marketplace-btn');
+  const memBtn = document.getElementById('session-info-memory-btn');
+  const proj = session.project;
+  if (mkBtn) mkBtn.style.display = proj && (window.__HUB__?.enabled || appConfig.marketplaceUrl) ? '' : 'none';
+  if (memBtn) memBtn.style.display = proj && (window.__HUB__?.enabled || appConfig.memoryUrl) ? '' : 'none';
   modal.classList.add('visible');
 
   if (alreadyVisible) return; // re-render during deferred hydration — key handler already attached
@@ -5707,6 +5913,12 @@ function closeTeamModal() {
   _planSessionId = null;
 }
 
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function openSessionFromInfo(sessionId) {
+  closeTeamModal();
+  fetchTasks(sessionId);
+}
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function toggleDismissSession(sessionId) {
   if (dismissedSessionIds.has(sessionId)) {
@@ -5716,6 +5928,7 @@ function toggleDismissSession(sessionId) {
   }
   updateDismissBtnState();
   renderSessions();
+  renderActivityChip();
 }
 
 function updateDismissBtnState() {
@@ -5745,6 +5958,110 @@ function refreshOpenPlan() {
     .catch(() => {});
 }
 
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function showLoopModal(sessionId) {
+  const body = document.getElementById('loop-modal-body');
+  body.innerHTML = '<div style="padding:16px;color:var(--text-secondary);">Loading…</div>';
+  document.getElementById('loop-modal').classList.add('visible');
+  fetch(`/api/sessions/${sessionId}/loop`)
+    .then((r) => (r.ok ? r.json() : { wakeups: [], crons: [] }))
+    .catch(() => ({ wakeups: [], crons: [] }))
+    .then((data) => {
+      renderLoopModalBody(data);
+    });
+}
+
+function fmtLoopDelay(s) {
+  if (s == null) return '';
+  if (s < 60) return `${s}s`;
+  if (s < 3600) return `${Math.round(s / 60)}m`;
+  return `${(s / 3600).toFixed(1)}h`;
+}
+
+function fmtLoopFireTime(timestamp, delaySeconds) {
+  if (!timestamp || delaySeconds == null) return { abs: '', rel: '', status: '' };
+  const fireMs = new Date(timestamp).getTime() + delaySeconds * 1000;
+  const fireDate = new Date(fireMs);
+  const diff = fireMs - Date.now();
+  const abs = fireDate.toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+  const absSec = Math.abs(Math.round(diff / 1000));
+  const rel =
+    absSec < 60 ? `${absSec}s` : absSec < 3600 ? `${Math.round(absSec / 60)}m` : `${(absSec / 3600).toFixed(1)}h`;
+  if (diff > 0) return { abs, rel: `in ${rel}`, status: 'pending' };
+  return { abs, rel: `${rel} ago`, status: 'fired' };
+}
+
+const LOOP_CLOCK_SVG =
+  '<svg width="14" height="14" 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"/><polyline points="12 6 12 12 16 14"/></svg>';
+const LOOP_CRON_SVG =
+  '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8v4l3 3"/><circle cx="12" cy="12" r="10"/></svg>';
+
+function loopField(label, value, mono = false) {
+  if (!value) return '';
+  const inner = mono ? `<code>${escapeHtml(value)}</code>` : escapeHtml(value);
+  return `<div class="loop-field"><div class="loop-field-label">${label}</div><div class="loop-field-val">${inner}</div></div>`;
+}
+
+function renderLoopRow(item, kind) {
+  const when = item.timestamp ? formatDate(item.timestamp) : '';
+  let headline = '';
+  let footer = '';
+  let fields = '';
+  if (kind === 'wakeup') {
+    const fire = fmtLoopFireTime(item.timestamp, item.delaySeconds);
+    const delayLbl = item.delaySeconds != null ? `delay ${fmtLoopDelay(item.delaySeconds)}` : '';
+    if (fire.abs) {
+      headline = `<div class="loop-headline loop-fire-${fire.status}">${LOOP_CLOCK_SVG}<span class="loop-headline-rel">${fire.status === 'pending' ? 'Fires' : 'Fired'} ${escapeHtml(fire.rel)}</span><span class="loop-headline-abs">${escapeHtml(fire.abs)}</span></div>`;
+    }
+    fields = loopField('Reason', item.reason) + loopField('Prompt', item.prompt, true);
+    footer = `<div class="loop-foot">scheduled ${escapeHtml(when)}${delayLbl ? ` · ${delayLbl}` : ''}</div>`;
+  } else {
+    if (item.cron) {
+      headline = `<div class="loop-headline">${LOOP_CRON_SVG}<span class="loop-headline-rel"><code>${escapeHtml(item.cron)}</code></span></div>`;
+    }
+    fields = loopField('Description', item.description) + loopField('Prompt', item.prompt, true);
+    footer = `<div class="loop-foot">created ${escapeHtml(when)}</div>`;
+  }
+  return `<div class="loop-row">${headline}${fields}${footer}</div>`;
+}
+
+function renderLoopModalBody(data) {
+  const body = document.getElementById('loop-modal-body');
+  const wakeups = data.wakeups || [];
+  const crons = data.crons || [];
+  if (!wakeups.length && !crons.length) {
+    body.innerHTML =
+      '<div style="padding:24px;text-align:center;color:var(--text-secondary);">No scheduled wakeups or cron jobs.</div>';
+    return;
+  }
+  const section = (title, items, kind) =>
+    items.length
+      ? `<h4 class="loop-section-title">${title} <span class="loop-count">${items.length}</span></h4>${items.map((i) => renderLoopRow(i, kind)).join('')}`
+      : '';
+  body.innerHTML = section('Wakeups', wakeups, 'wakeup') + section('Cron jobs', crons, 'cron');
+}
+
+function renderLoopBadge(session) {
+  const li = session.loopInfo;
+  const total = (li?.wakeupCount || 0) + (li?.cronCount || 0);
+  if (total === 0) return '';
+  let tip = `${li.wakeupCount} wakeup${li.wakeupCount === 1 ? '' : 's'}, ${li.cronCount} cron${li.cronCount === 1 ? '' : 's'}`;
+  if (li.latest?.timestamp && li.latest.delaySeconds != null) {
+    const f = fmtLoopFireTime(li.latest.timestamp, li.latest.delaySeconds);
+    if (f.abs) tip += ` — latest ${f.status === 'pending' ? 'fires' : 'fired'} ${f.rel} (${f.abs})`;
+  }
+  return `<span class="loop-badge" onclick="event.stopPropagation(); showLoopModal('${session.id}')" title="${escapeHtml(tip)}"><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"/><polyline points="12 6 12 12 16 14"/></svg></span>`;
+}
+
+function closeLoopModal() {
+  document.getElementById('loop-modal').classList.remove('visible');
+}
+
 function openPlanForSession(sid) {
   fetch(`/api/sessions/${sid}/plan`)
     .then((r) => (r.ok ? r.json() : null))
@@ -5801,7 +6118,6 @@ function openCost(sessionId) {
   }
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function openMarketplace(projectPath) {
   const params = new URLSearchParams({ project: projectPath });
   if (window.__HUB__?.enabled) {
@@ -5813,7 +6129,6 @@ function openMarketplace(projectPath) {
   }
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function openMemory(projectPath) {
   const params = new URLSearchParams({ project: projectPath });
   if (window.__HUB__?.enabled) {
@@ -5825,6 +6140,19 @@ function openMemory(projectPath) {
   }
 }
 
+function openForInfoModalProject(open) {
+  const s = sessions.find((x) => x.id === _infoModalSessionId);
+  if (s?.project) open(s.project);
+}
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function openMarketplaceForInfoModal() {
+  openForInfoModalProject(openMarketplace);
+}
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function openMemoryForInfoModal() {
+  openForInfoModalProject(openMemory);
+}
+
 //#endregion
 
 //#region OWNER_FILTER
@@ -5990,6 +6318,12 @@ function makeLimitCell(label, bucket) {
   const strong = document.createElement('strong');
   strong.textContent = pct == null ? '-%' : `${Math.ceil(pct)}%`;
   cell.appendChild(strong);
+  if (reset) {
+    const r = document.createElement('span');
+    r.className = 'footer-limit-reset';
+    r.textContent = ` (${reset})`;
+    cell.appendChild(r);
+  }
   return cell;
 }
 function makeLimitSpan(rl) {