claude-code-kanban 3.10.0 → 4.1.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,11 @@ 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);
+    }
   } catch (e) {
     console.error('[fetchAgents]', e);
   }
@@ -899,6 +909,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 +1066,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 +1132,45 @@ 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 (!currentWaiting?.timestamp) return '';
+  const age = Date.now() - new Date(currentWaiting.timestamp).getTime();
+  if (age >= WAITING_TTL_MS) 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>`
+    : '';
+  return `<div class="msg-item msg-waiting">${ICON_CHAT}<div class="msg-body"><div class="msg-text">${escapeHtml(label)}</div>${previewHtml}<div class="msg-time">waiting…</div></div></div>`;
+}
+
 function renderMessages(messages) {
   const container = document.getElementById('message-panel-content');
   const pinnedContainer = document.getElementById('message-panel-pinned');
@@ -1116,7 +1184,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 (
@@ -1152,6 +1220,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 +1247,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 +1548,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 +1556,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 +1654,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 +1759,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;
@@ -2322,10 +2431,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) => {
@@ -2458,6 +2565,7 @@ function renderSessions() {
     const showCtx = !!session.contextStatus;
     const linkedDocsCount = getSessionPreviewPaths(session.id).length;
     const bookmarksCount = loadPins(session.id).length;
+    const hasScratchpad = !!(localStorage.getItem(_sessionScratchpadKey(session.id)) || '').trim();
     const tempClass = session.hasRecentLog || session.inProgress || session.hasWaitingForUser ? 'warm' : 'stale';
     return `
           <button onclick="fetchTasks('${session.id}')" data-session-id="${session.id}" class="session-item ${isActive ? 'active' : ''} ${session.hasWaitingForUser ? 'permission-pending' : ''} ${tempClass} ${showCtx ? 'has-context' : ''}" title="${tooltip}">
@@ -2474,12 +2582,10 @@ function renderSessions() {
                 ${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>` : ''}
                 ${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>` : ''}
-                ${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>' : ''}
+                ${hasScratchpad ? `<span class="scratchpad-badge" onclick="event.stopPropagation(); openSessionScratchpad('${session.id}')" title="Open scratchpad"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></span>` : ''}
+                ${session.planSourceSessionId ? `<span class="plan-indicator" title="Implements plan — click to reveal plan session" onclick="event.stopPropagation(); revealPlanSession('${escapeHtml(session.planSourceSessionId)}')"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>` : ''}
+                ${session.hasWaitingForUser ? `<span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>` : ''}
+                ${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>
@@ -3613,9 +3719,17 @@ const _scratchpadCharcount = document.getElementById('scratchpad-charcount');
 
 let _scratchpadKeyOverride = null;
 
+function _sessionScratchpadKey(sessionId) {
+  return `scratchpad-${sessionId}`;
+}
+
+function _isSessionScratchpadKey(key) {
+  return key.startsWith('scratchpad-') && !key.startsWith('scratchpad-project:');
+}
+
 function _scratchpadKey() {
   if (_scratchpadKeyOverride) return _scratchpadKeyOverride;
-  if (currentSessionId) return `scratchpad-${currentSessionId}`;
+  if (currentSessionId) return _sessionScratchpadKey(currentSessionId);
   if (currentProjectPath) return `scratchpad-project:${currentProjectPath}`;
   return null;
 }
@@ -3628,6 +3742,11 @@ function toggleScratchpad() {
   }
 }
 
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
+function openSessionScratchpad(sessionId) {
+  showScratchpad(_sessionScratchpadKey(sessionId));
+}
+
 function showScratchpad(keyOverride) {
   _scratchpadKeyOverride = keyOverride || null;
   const key = _scratchpadKey();
@@ -3652,11 +3771,16 @@ function saveScratchpad() {
   const key = _scratchpadKey();
   if (!key) return;
   const val = _scratchpadTextarea.value;
-  if (val.trim()) {
+  const had = !!(localStorage.getItem(key) || '').trim();
+  const has = !!val.trim();
+  if (has) {
     localStorage.setItem(key, val);
   } else {
     localStorage.removeItem(key);
   }
+  if (had !== has && _isSessionScratchpadKey(key)) {
+    renderSessions();
+  }
 }
 
 _scratchpadTextarea.addEventListener('input', () => {
@@ -4075,7 +4199,7 @@ function _findOrphanedKeys() {
     const key = localStorage.key(i);
     if (key.startsWith('pinned-messages-')) {
       if (!known.has(key.slice('pinned-messages-'.length))) orphaned.push(key);
-    } else if (key.startsWith('scratchpad-') && !key.startsWith('scratchpad-project:')) {
+    } else if (_isSessionScratchpadKey(key)) {
       if (!known.has(key.slice('scratchpad-'.length))) orphaned.push(key);
     } else if (key.startsWith(PREVIEW_STORAGE_PREFIX)) {
       if (!known.has(key.slice(PREVIEW_STORAGE_PREFIX.length))) orphaned.push(key);
@@ -4360,6 +4484,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
@@ -5068,7 +5193,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) =>
@@ -5473,13 +5598,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
@@ -5500,8 +5625,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;
@@ -5518,7 +5652,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');
@@ -5538,6 +5672,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 }]);
   }
@@ -5569,19 +5710,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>`;
 
@@ -5667,6 +5814,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
@@ -5687,6 +5839,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)) {
@@ -5696,6 +5854,7 @@ function toggleDismissSession(sessionId) {
   }
   updateDismissBtnState();
   renderSessions();
+  renderActivityChip();
 }
 
 function updateDismissBtnState() {
@@ -5781,7 +5940,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) {
@@ -5793,7 +5951,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) {
@@ -5805,6 +5962,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
@@ -5970,6 +6140,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) {

package/public/index.html

@@ -527,6 +527,12 @@
           <button id="session-info-cost-btn" class="icon-btn" style="display:none" title="Open in Cost" onclick="openCost(_infoModalSessionId)">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 18V6"/></svg>
           </button>
+          <button id="session-info-marketplace-btn" class="icon-btn" style="display:none" title="Open in Marketplace" onclick="openMarketplaceForInfoModal()">
+            <svg width="16" height="16" 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>
+          </button>
+          <button id="session-info-memory-btn" class="icon-btn" style="display:none" title="Open in Memory" onclick="openMemoryForInfoModal()">
+            <svg width="16" height="16" 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>
+          </button>
           <button class="modal-close" aria-label="Close dialog" onclick="closeTeamModal()">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M18 6L6 18M6 6l12 12"/>