claude-code-kanban 2.1.0 → 2.2.0-rc.10

package/public/app.js

@@ -21,6 +21,7 @@ let messagePanelOpen = false;
 let lastMessagesHash = '';
 let currentMessages = [];
 let agentDurationInterval = null;
+let agentPollInterval = null;
 let selectedTaskId = null;
 let selectedSessionId = null;
 let focusZone = 'board'; // 'board' | 'sidebar'
@@ -29,6 +30,8 @@ let selectedSessionKbId = null;
 let sessionJustSelected = false;
 let agentLogMode = null;
 let agentLogSSE = null;
+let currentProjectPath = null;
+let currentProjectSessionIds = [];
 
 function getUrlState() {
   const params = new URLSearchParams(window.location.search);
@@ -41,12 +44,14 @@ function getUrlState() {
     owner: params.get('owner'),
     search: params.get('search'),
     messages: params.get('messages') === '1',
+    projectView: params.get('projectView'),
   };
 }
 
 function updateUrl() {
   const params = new URLSearchParams();
   if (viewMode === 'all') params.set('view', 'all');
+  if (viewMode === 'project' && currentProjectPath) params.set('projectView', btoa(currentProjectPath));
   if (currentSessionId) params.set('session', currentSessionId);
   if (sessionFilter !== 'active') params.set('filter', sessionFilter);
   if (sessionLimit !== '20') params.set('limit', sessionLimit);
@@ -70,6 +75,8 @@ function resetState() {
   viewMode = 'all';
   if (agentLogMode) exitAgentLogMode();
   currentSessionId = null;
+  currentProjectPath = null;
+  currentProjectSessionIds = [];
   const searchInput = document.getElementById('search-input');
   if (searchInput) searchInput.value = '';
   document.getElementById('search-clear-btn')?.classList.remove('visible');
@@ -106,9 +113,11 @@ let lastTasksHash = '';
 
 //#region DATA_FETCHING
 async function fetchSessions() {
-  console.log('[fetchSessions] Starting...');
   try {
-    const pinnedParam = pinnedSessionIds.size > 0 ? `&pinned=${[...pinnedSessionIds].join(',')}` : '';
+    const allPinnedIds = new Set([...pinnedSessionIds, ...stickySessionIds]);
+    if (revealedPlanSessionId) allPinnedIds.add(revealedPlanSessionId);
+    if (revealedStorageSessionId) allPinnedIds.add(revealedStorageSessionId);
+    const pinnedParam = allPinnedIds.size > 0 ? `&pinned=${[...allPinnedIds].join(',')}` : '';
     const [newSessions, newTasks] = await Promise.all([
       fetch(`/api/sessions?limit=${sessionLimit}${pinnedParam}`).then((r) => r.json()),
       fetch('/api/tasks/all').then((r) => r.json()),
@@ -117,7 +126,6 @@ async function fetchSessions() {
     const sessionsHash = JSON.stringify(newSessions);
     const tasksHash = JSON.stringify(newTasks);
     if (sessionsHash === lastSessionsHash && tasksHash === lastTasksHash) {
-      console.log('[fetchSessions] No changes, skipping render');
       return;
     }
     lastSessionsHash = sessionsHash;
@@ -125,9 +133,7 @@ async function fetchSessions() {
 
     sessions = newSessions;
     allTasksCache = newTasks;
-    console.log('[fetchSessions] Sessions loaded:', sessions.length);
     renderSessions();
-    console.log('[fetchSessions] Render complete');
     renderLiveUpdatesFromCache();
   } catch (error) {
     console.error('Failed to fetch sessions:', error);
@@ -410,6 +416,7 @@ let lastCurrentTasksHash = '';
 async function fetchTasks(sessionId) {
   try {
     viewMode = 'session';
+    document.getElementById('message-toggle')?.style.removeProperty('display');
     const res = await fetch(`/api/sessions/${sessionId}`);
 
     let newTasks;
@@ -423,7 +430,6 @@ async function fetchTasks(sessionId) {
 
     const hash = JSON.stringify(newTasks);
     if (sessionId === currentSessionId && hash === lastCurrentTasksHash) {
-      console.log('[fetchTasks] No changes, skipping render');
       return;
     }
     lastCurrentTasksHash = hash;
@@ -432,6 +438,12 @@ async function fetchTasks(sessionId) {
     if (agentLogMode && sessionId !== currentSessionId) exitAgentLogMode();
     if (sessionId !== currentSessionId && document.getElementById('scratchpad-modal').classList.contains('visible'))
       closeScratchpad();
+    if (revealedPlanSessionId && sessionId !== revealedPlanSessionId) {
+      revealedPlanSessionId = null;
+    }
+    if (revealedStorageSessionId && sessionId !== revealedStorageSessionId) {
+      revealedStorageSessionId = null;
+    }
     currentSessionId = sessionId;
     currentPins = loadPins(sessionId);
     ownerFilter = '';
@@ -483,6 +495,101 @@ async function fetchAgents(sessionId) {
   }
 }
 
+async function fetchProjectView(projectPath) {
+  viewMode = 'project';
+  currentProjectPath = projectPath;
+  currentSessionId = null;
+  currentMessages = [];
+  lastMessagesHash = '';
+  if (messagePanelOpen) toggleMessagePanel();
+  document.getElementById('message-toggle')?.style.setProperty('display', 'none');
+  const msgContent = document.getElementById('message-panel-content');
+  if (msgContent) msgContent.innerHTML = '';
+  const msgPinned = document.getElementById('message-panel-pinned');
+  if (msgPinned) msgPinned.innerHTML = '';
+  const projectSessions = sessions.filter((s) => s.project === projectPath);
+  currentProjectSessionIds = projectSessions.map((s) => s.id);
+  const activeSessionIds = projectSessions.filter((s) => isSessionActive(s) || isAnyPinned(s.id)).map((s) => s.id);
+
+  const encoded = btoa(projectPath);
+  const [tasksResult, agentResults] = await Promise.all([
+    fetch(`/api/projects/${encodeURIComponent(encoded)}/tasks`)
+      .then((r) => r.json())
+      .catch((e) => {
+        console.error('[fetchProjectView] tasks:', e);
+        return [];
+      }),
+    Promise.all(
+      activeSessionIds.map((id) =>
+        fetch(`/api/sessions/${id}/agents`)
+          .then((r) => r.json())
+          .catch(() => ({ agents: [] })),
+      ),
+    ),
+  ]);
+  currentTasks = tasksResult;
+  const seen = new Set();
+  currentAgents = [];
+  const mergedColors = {};
+  let mergedWaiting = null;
+  for (let i = 0; i < agentResults.length; i++) {
+    const r = agentResults[i];
+    const sid = activeSessionIds[i];
+    const agents = r.agents || (Array.isArray(r) ? r : []);
+    for (const a of agents) {
+      if (a.agentId && !seen.has(a.agentId)) {
+        seen.add(a.agentId);
+        a._sourceSessionId = sid;
+        currentAgents.push(a);
+      }
+    }
+    if (r.teamColors) Object.assign(mergedColors, r.teamColors);
+    if (r.waitingForUser && !mergedWaiting) mergedWaiting = r.waitingForUser;
+  }
+  currentWaiting = mergedWaiting;
+  Object.assign(teamColorMap, mergedColors);
+
+  renderProjectView();
+  renderAgentFooter();
+  renderKanban();
+  updateUrl();
+}
+
+async function refreshProjectAgents() {
+  if (!currentProjectPath) return;
+  const projectSessions = sessions.filter((s) => s.project === currentProjectPath);
+  const activeSessionIds = projectSessions.filter((s) => isSessionActive(s) || isAnyPinned(s.id)).map((s) => s.id);
+  const agentResults = await Promise.all(
+    activeSessionIds.map((id) =>
+      fetch(`/api/sessions/${id}/agents`)
+        .then((r) => r.json())
+        .catch(() => ({ agents: [] })),
+    ),
+  );
+  const seen = new Set();
+  currentAgents = [];
+  let mergedWaiting = null;
+  for (let i = 0; i < agentResults.length; i++) {
+    const r = agentResults[i];
+    const sid = activeSessionIds[i];
+    const agents = r.agents || (Array.isArray(r) ? r : []);
+    for (const a of agents) {
+      if (a.agentId && !seen.has(a.agentId)) {
+        seen.add(a.agentId);
+        a._sourceSessionId = sid;
+        currentAgents.push(a);
+      }
+    }
+    if (r.teamColors) Object.assign(teamColorMap, r.teamColors);
+    if (r.waitingForUser && !mergedWaiting) mergedWaiting = r.waitingForUser;
+  }
+  currentWaiting = mergedWaiting;
+  const hash = JSON.stringify({ agents: currentAgents, waiting: currentWaiting });
+  if (hash === lastAgentsHash) return;
+  lastAgentsHash = hash;
+  renderAgentFooter();
+}
+
 //#endregion
 
 //#region MESSAGE_PANEL
@@ -500,15 +607,18 @@ function toggleMessagePanel() {
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 async function viewAgentLog(agentId) {
-  let agent = currentAgents.find((a) => a.agentId === agentId);
+  let agent = findAgentById(agentId);
   if (!agent && currentSessionId) {
     await fetchAgents(currentSessionId);
-    agent = currentAgents.find((a) => a.agentId === agentId);
+    agent = findAgentById(agentId);
   }
   if (!agent) return;
-  const shortId = agentId.length > 8 ? agentId.slice(0, 8) : agentId;
-  agentLogMode = { agentId, sessionId: currentSessionId, agentType: agent.type || 'unknown' };
+  const resolvedId = agent.agentId;
+  const shortId = resolvedId.length > 8 ? resolvedId.slice(0, 8) : resolvedId;
+  const agentSessionId = agent._sourceSessionId || currentSessionId;
+  agentLogMode = { agentId: resolvedId, sessionId: agentSessionId, agentType: agent.type || 'unknown' };
   closeAgentModal();
+  document.getElementById('message-toggle')?.style.removeProperty('display');
   if (!messagePanelOpen) toggleMessagePanel();
   const header = document.querySelector('.message-panel-header h3');
   if (header) {
@@ -519,9 +629,9 @@ async function viewAgentLog(agentId) {
     agentLogSSE.close();
     agentLogSSE = null;
   }
-  agentLogSSE = new EventSource(`/api/sessions/${agentLogMode.sessionId}/agents/${agentId}/messages/stream`);
+  agentLogSSE = new EventSource(`/api/sessions/${agentLogMode.sessionId}/agents/${resolvedId}/messages/stream`);
   agentLogSSE.addEventListener('agent-log-update', (e) => {
-    if (!agentLogMode || agentLogMode.agentId !== agentId) return;
+    if (!agentLogMode || agentLogMode.agentId !== resolvedId) return;
     try {
       const data = JSON.parse(e.data);
       currentMessages = data.messages;
@@ -537,6 +647,11 @@ function exitAgentLogMode() {
     agentLogSSE.close();
     agentLogSSE = null;
   }
+  if (viewMode === 'project') {
+    if (messagePanelOpen) toggleMessagePanel();
+    document.getElementById('message-toggle')?.style.setProperty('display', 'none');
+    return;
+  }
   const header = document.querySelector('.message-panel-header h3');
   if (header) header.textContent = 'Session Log';
   lastMessagesHash = '';
@@ -648,17 +763,16 @@ function renderPinnedSection() {
             <div class="msg-body"><div class="msg-text">${escapeHtml(p.tool || '')}${toolDetail}</div><div class="msg-time">${formatDate(p.timestamp)}</div></div>${pinnedAgentLogBtn}${unpin}
           </div>`;
       } else if (p.type === 'agent') {
-        const agentClick = `onclick="showAgentModal('${escapeHtml(p.agentId)}')" style="cursor:pointer"`;
         const agentLogBtn = agentLogButton(p.agentId);
         const msgTrunc = p.lastMessage
           ? escapeHtml(
-              stripAnsi(p.lastMessage.trim())
+              stripAnsi(stripTeammateWrapper(p.lastMessage.trim()))
                 .replace(/[\r\n]+/g, ' ')
                 .slice(0, 60),
             )
           : '';
         const agentDetail = msgTrunc ? ` <span style="color:var(--text-muted)">${msgTrunc}</span>` : '';
-        return `<div class="msg-item msg-tool" ${agentClick}>
+        return `<div class="msg-item msg-tool" ${click}>
             ${MSG_ICON_TOOL}
             <div class="msg-body"><div class="msg-text">${escapeHtml(p.agentType || 'Agent')}${agentDetail}</div><div class="msg-time">${formatDate(p.timestamp)}</div></div>${agentLogBtn}${unpin}
           </div>`;
@@ -909,27 +1023,8 @@ function showPinnedMsgDetail(pinIdx) {
   }
   currentMsgDetailIdx = null;
   currentPinDetailId = pin.id;
+  _renderPinToDetail(pin);
   const body = document.getElementById('msg-detail-body');
-  const agentBtn = document.getElementById('msg-detail-agent-btn');
-  if (pin.type === 'tool_use') {
-    document.getElementById('msg-detail-title').textContent = pin.tool || 'Tool';
-    const fullText = pin.fullDetail || pin.detail || '';
-    const pinParamsHtml = renderToolParamsHtml(pin.params);
-    const pinResultHtml = renderToolResultHtml(pin.toolResult, pin.toolResultTruncated, pin.toolResultFull);
-    const pinDetailEscaped = escapeHtml(fullText);
-    const pinDetailRendered = pin.tool === 'Bash' ? highlightBash(pinDetailEscaped) : pinDetailEscaped;
-    body.innerHTML =
-      (fullText ? `<pre class="msg-detail-pre">${pinDetailRendered}</pre>` : '<em>No details</em>') +
-      pinParamsHtml +
-      pinResultHtml;
-    agentBtn.style.display = 'none';
-  } else {
-    const text = stripAnsi(pin.fullText || pin.text || '');
-    document.getElementById('msg-detail-title').textContent = pin.type === 'assistant' ? 'Claude' : 'User';
-    agentBtn.style.display = 'none';
-    body.innerHTML = renderMarkdown(text);
-  }
-  document.getElementById('msg-detail-meta').textContent = formatDate(pin.timestamp);
   const pinModal = document.getElementById('msg-detail-modal').querySelector('.modal');
   autoSizeModal(pinModal, body);
   const pinBtn = document.getElementById('msg-detail-pin-btn');
@@ -963,6 +1058,7 @@ function togglePinnedCollapse() {
 
 //#region PINNING
 let pinnedSessionIds = new Set();
+let stickySessionIds = new Set();
 
 function loadPinnedSessions() {
   try {
@@ -972,18 +1068,72 @@ function loadPinnedSessions() {
   }
 }
 
+function loadStickySessions() {
+  try {
+    return new Set(JSON.parse(localStorage.getItem('sticky-sessions')) || []);
+  } catch {
+    return new Set();
+  }
+}
+
 function savePinnedSessions() {
   localStorage.setItem('pinned-sessions', JSON.stringify([...pinnedSessionIds]));
+  localStorage.setItem('sticky-sessions', JSON.stringify([...stickySessionIds]));
 }
 
+// unpinned → pinned → sticky → unpinned
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function toggleSessionPin(sessionId) {
-  if (pinnedSessionIds.has(sessionId)) pinnedSessionIds.delete(sessionId);
-  else pinnedSessionIds.add(sessionId);
+  if (stickySessionIds.has(sessionId)) {
+    stickySessionIds.delete(sessionId);
+    pinnedSessionIds.delete(sessionId);
+  } else if (pinnedSessionIds.has(sessionId)) {
+    pinnedSessionIds.delete(sessionId);
+    stickySessionIds.add(sessionId);
+  } else {
+    pinnedSessionIds.add(sessionId);
+  }
   savePinnedSessions();
   renderSessions();
 }
 
+function getSessionPinState(sessionId) {
+  if (stickySessionIds.has(sessionId)) return 'sticky';
+  if (pinnedSessionIds.has(sessionId)) return 'pinned';
+  return 'none';
+}
+
+function isAnyPinned(sessionId) {
+  return pinnedSessionIds.has(sessionId) || stickySessionIds.has(sessionId);
+}
+
+function _renderPinToDetail(pin) {
+  const body = document.getElementById('msg-detail-body');
+  const agentBtn = document.getElementById('msg-detail-agent-btn');
+  agentBtn.style.display = 'none';
+  if (pin.type === 'tool_use') {
+    document.getElementById('msg-detail-title').textContent = pin.tool || 'Tool';
+    const fullText = pin.fullDetail || pin.detail || '';
+    const pinParamsHtml = renderToolParamsHtml(pin.params);
+    const pinResultHtml = renderToolResultHtml(pin.toolResult, pin.toolResultTruncated, pin.toolResultFull);
+    const pinDetailEscaped = escapeHtml(fullText);
+    const pinDetailRendered = pin.tool === 'Bash' ? highlightBash(pinDetailEscaped) : pinDetailEscaped;
+    body.innerHTML =
+      (fullText ? `<pre class="msg-detail-pre">${pinDetailRendered}</pre>` : '<em>No details</em>') +
+      pinParamsHtml +
+      pinResultHtml;
+  } else if (pin.type === 'agent') {
+    document.getElementById('msg-detail-title').textContent = pin.agentType || 'Agent';
+    const lastMsg = stripAnsi(pin.lastMessage || '');
+    body.innerHTML = lastMsg ? renderMarkdown(lastMsg) : '<em>No agent message</em>';
+  } else {
+    const text = stripAnsi(pin.fullText || pin.text || '');
+    document.getElementById('msg-detail-title').textContent = pin.type === 'assistant' ? 'Claude' : 'User';
+    body.innerHTML = renderMarkdown(text);
+  }
+  document.getElementById('msg-detail-meta').textContent = formatDate(pin.timestamp);
+}
+
 const SESSION_PIN_SVG = PIN_SVG.replace('width="14" height="14"', 'width="12" height="12"');
 
 //#endregion
@@ -1400,14 +1550,17 @@ function renderAgentFooter() {
   for (const group of Object.values(byType)) {
     group.sort((a, b) => new Date(a.startedAt || 0) - new Date(b.startedAt || 0));
     filtered.push(group[0]);
+    let maxStop = group[0].stoppedAt ? new Date(group[0].stoppedAt).getTime() : Infinity;
     for (let i = 1; i < group.length; i++) {
-      const prev = group[i - 1];
-      const prevStop = prev.stoppedAt ? new Date(prev.stoppedAt).getTime() : Infinity;
-      const curStart = new Date(group[i].startedAt || 0).getTime();
-      const overlapped = curStart < prevStop;
-      const reSpawn = curStart - prevStop > 30000;
-      const isActive = group[i].status === 'active' || group[i].status === 'idle';
-      if (overlapped || reSpawn || isActive) filtered.push(group[i]);
+      const cur = group[i];
+      const hasContent = cur.prompt || cur.lastMessage;
+      const curStart = new Date(cur.startedAt || 0).getTime();
+      const overlapped = curStart < maxStop;
+      const reSpawn = curStart - maxStop > 30000;
+      const isActive = cur.status === 'active' || cur.status === 'idle';
+      if (overlapped || reSpawn || isActive || hasContent) filtered.push(cur);
+      const curStop = cur.stoppedAt ? new Date(cur.stoppedAt).getTime() : Infinity;
+      if (curStop > maxStop) maxStop = curStop;
     }
   }
   // Sort: active/idle first, then by updatedAt desc
@@ -1426,6 +1579,8 @@ function renderAgentFooter() {
     footer.classList.remove('visible');
     clearInterval(agentDurationInterval);
     agentDurationInterval = null;
+    clearInterval(agentPollInterval);
+    agentPollInterval = null;
     return;
   }
 
@@ -1454,7 +1609,7 @@ function renderAgentFooter() {
             : a.status === 'idle'
               ? `idle · ${formatDuration(elapsed)}`
               : `active · ${formatDuration(elapsed)}`;
-        const promptTrimmed = stripAnsi((a.prompt || '').trim()).replace(/[\r\n]+/g, ' ');
+        const promptTrimmed = stripAnsi(stripTeammateWrapper((a.prompt || '').trim())).replace(/[\r\n]+/g, ' ');
         const promptTrunc = promptTrimmed.length > 60 ? `${promptTrimmed.substring(0, 60)}…` : promptTrimmed;
         const msgHtml = promptTrunc
           ? `<div class="agent-message" title="${escapeHtml(promptTrimmed)}">${escapeHtml(promptTrunc)}</div>`
@@ -1476,8 +1631,19 @@ function renderAgentFooter() {
   clearInterval(agentDurationInterval);
   if (visible.some((a) => a.status === 'active' || a.status === 'idle')) {
     agentDurationInterval = setInterval(() => renderAgentFooter(), 1000);
+    if (!agentPollInterval) {
+      agentPollInterval = setInterval(() => {
+        if (viewMode === 'project' && currentProjectPath) {
+          refreshProjectAgents();
+        } else if (currentSessionId) {
+          fetchAgents(currentSessionId);
+        }
+      }, 3000);
+    }
   } else {
     agentDurationInterval = setInterval(() => renderAgentFooter(), 10000);
+    clearInterval(agentPollInterval);
+    agentPollInterval = null;
   }
 }
 
@@ -1531,9 +1697,19 @@ async function dismissAgent(agentId) {
   }
 }
 
+function findAgentById(agentId) {
+  let agent = currentAgents.find((a) => a.agentId === agentId);
+  if (!agent) {
+    const atIdx = agentId.indexOf('@');
+    const memberName = atIdx > 0 ? agentId.substring(0, atIdx) : null;
+    if (memberName) agent = currentAgents.find((a) => a.type === memberName);
+  }
+  return agent || null;
+}
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function showAgentModal(agentId) {
-  const agent = currentAgents.find((a) => a.agentId === agentId);
+  const agent = findAgentById(agentId);
   if (!agent) return;
   currentAgentModalId = agentId;
   const modal = document.getElementById('agent-modal');
@@ -1552,6 +1728,8 @@ function showAgentModal(agentId) {
     ['Agent ID', `<code style="font-size:12px;color:var(--text-tertiary)">${escapeHtml(agent.agentId)}</code>`],
     ['Duration', formatDuration(elapsed)],
   ];
+  if (agent.model)
+    rows.push(['Model', `<code style="font-size:12px;color:var(--text-tertiary)">${escapeHtml(agent.model)}</code>`]);
   if (started) rows.push(['Started', started.toLocaleTimeString()]);
   if (stopped) rows.push(['Stopped', stopped.toLocaleTimeString()]);
 
@@ -1567,7 +1745,7 @@ function showAgentModal(agentId) {
       .join('') +
     `</table>`;
 
-  const promptText = agentMsg?.agentPrompt || agent.prompt || null;
+  const promptText = stripTeammateWrapper(agentMsg?.agentPrompt || agent.prompt || null);
   const responseText = agent.lastMessage ? stripAnsi(agent.lastMessage.trim()) : null;
   _agentModalPromptText = promptText;
   _agentModalResponseText = responseText;
@@ -1599,6 +1777,25 @@ function closeAgentModal() {
 //#endregion
 
 //#region RENDERING
+let revealedPlanSessionId = null;
+let revealedStorageSessionId = null;
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+async function revealPlanSession(planSessionId) {
+  if (revealedPlanSessionId === planSessionId) {
+    revealedPlanSessionId = null;
+    renderSessions();
+    return;
+  }
+  revealedPlanSessionId = planSessionId;
+  if (!sessions.some((s) => s.id === planSessionId)) {
+    lastSessionsHash = '';
+    await fetchSessions();
+  }
+  await fetchTasks(planSessionId);
+  const el = document.querySelector(`.session-item[data-session-id="${CSS.escape(planSessionId)}"]`);
+  if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+}
+
 async function showAllTasks() {
   try {
     viewMode = 'all';
@@ -1659,32 +1856,26 @@ function renderSessions() {
   let filteredSessions = sessions;
   if (sessionFilter === 'active') {
     const ACTIVE_PLAN_MS = 15 * 60 * 1000;
-    const RECENTLY_MODIFIED_MS = 5 * 60 * 1000;
     const now = Date.now();
     const activeSessionIds = new Set();
     filteredSessions = filteredSessions.filter((s) => {
       const isActive =
         s.hasMessages &&
-        (s.pending > 0 ||
-          s.inProgress > 0 ||
+        ((!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) ||
-          now - new Date(s.modifiedAt).getTime() <= RECENTLY_MODIFIED_MS);
+          (s.hasPlan && !s.planImplementationSessionId && now - new Date(s.modifiedAt).getTime() <= ACTIVE_PLAN_MS));
       if (isActive) activeSessionIds.add(s.id);
       return isActive;
     });
-    // Include plan sessions whose implementation is active
-    const planSessions = sessions.filter(
-      (s) =>
-        s.planImplementationSessionId &&
-        activeSessionIds.has(s.planImplementationSessionId) &&
-        !activeSessionIds.has(s.id),
-    );
-    if (planSessions.length) {
-      filteredSessions = filteredSessions.concat(planSessions);
-      filteredSessions.sort((a, b) => new Date(b.modifiedAt) - new Date(a.modifiedAt));
+    if (revealedPlanSessionId && !filteredSessions.some((s) => s.id === revealedPlanSessionId)) {
+      const planSession = sessions.find((s) => s.id === revealedPlanSessionId);
+      if (planSession) filteredSessions.push(planSession);
+    }
+    if (revealedStorageSessionId && !filteredSessions.some((s) => s.id === revealedStorageSessionId)) {
+      const storageSession = sessions.find((s) => s.id === revealedStorageSessionId);
+      if (storageSession) filteredSessions.push(storageSession);
     }
   }
   if (filterProject) {
@@ -1715,10 +1906,10 @@ function renderSessions() {
     });
   }
 
-  // Always include pinned sessions even if they don't match filters
-  if (pinnedSessionIds.size > 0 && !searchQuery) {
+  // Always include pinned/sticky sessions even if they don't match filters
+  if ((pinnedSessionIds.size > 0 || stickySessionIds.size > 0) && !searchQuery) {
     const filteredIds = new Set(filteredSessions.map((s) => s.id));
-    const missingPinned = sessions.filter((s) => pinnedSessionIds.has(s.id) && !filteredIds.has(s.id));
+    const missingPinned = sessions.filter((s) => isAnyPinned(s.id) && !filteredIds.has(s.id));
     if (missingPinned.length) filteredSessions = [...missingPinned, ...filteredSessions];
   }
 
@@ -1772,11 +1963,13 @@ function renderSessions() {
     const isTeam = session.isTeam;
     const memberCount = session.memberCount || 0;
 
-    const isSessionPinned = pinnedSessionIds.has(session.id);
+    const pinState = getSessionPinState(session.id);
+    const pinClass = pinState === 'sticky' ? ' sticky' : pinState === 'pinned' ? ' pinned' : '';
+    const pinTitle = pinState === 'sticky' ? 'Unpin' : pinState === 'pinned' ? 'Sticky pin' : 'Pin';
     const showCtx = !!session.contextStatus;
     return `
           <button onclick="fetchTasks('${session.id}')" data-session-id="${session.id}" class="session-item ${isActive ? 'active' : ''} ${session.hasWaitingForUser ? 'permission-pending' : ''} ${!session.hasRecentLog && !session.inProgress && !session.hasWaitingForUser ? 'stale' : ''} ${showCtx ? 'has-context' : ''}" title="${tooltip}">
-            <span class="session-pin-btn${isSessionPinned ? ' pinned' : ''}" onclick="event.stopPropagation();toggleSessionPin('${escapeHtml(session.id)}')" title="${isSessionPinned ? 'Unpin' : 'Pin'} session">${SESSION_PIN_SVG}</span>
+            <span class="session-pin-btn${pinClass}" onclick="event.stopPropagation();toggleSessionPin('${escapeHtml(session.id)}')" title="${pinTitle} session">${SESSION_PIN_SVG}</span>
             <div class="session-name">${escapeHtml(primaryName)}</div>
             ${secondaryName ? `<div class="session-secondary">${escapeHtml(secondaryName)}</div>` : ''}
             ${gitBranch ? `<div class="session-branch">${gitBranch}</div>` : ''}
@@ -1784,10 +1977,11 @@ function renderSessions() {
             <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)}"><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="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"/></svg></span>` : ''}
                 ${isTeam || session.project || showCtx ? `<span class="team-info-btn" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="View session info">ℹ</span>` : ''}
                 ${session.hasPlan ? `<span class="plan-indicator" onclick="event.stopPropagation(); openPlanForSession('${session.id}')" title="View plan"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>` : ''}
                 ${session.hasRunningAgents ? '<span class="agent-badge" title="Active agents">🤖</span>' : ''}
-                ${session.planSourceSessionId ? `<span class="plan-indicator" title="Implements plan — click to view plan session" onclick="event.stopPropagation(); fetchTasks('${escapeHtml(session.planSourceSessionId)}')">📋</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>' : ''}
                 ${isLive ? '<span class="pulse"></span>' : ''}
               </span>
@@ -1812,8 +2006,44 @@ function renderSessions() {
         ungrouped.push(session);
       }
     }
-    if (pinnedSessionIds.size > 0) {
-      const pinSort = (a, b) => (pinnedSessionIds.has(b.id) ? 1 : 0) - (pinnedSessionIds.has(a.id) ? 1 : 0);
+    const groupPinned = localStorage.getItem('groupPinnedSessions') !== 'false';
+    const renderGroupSessions = (sessions, pinKey) => {
+      if (!groupPinned || pinnedSessionIds.size === 0) return sessions.map(renderSessionCard).join('');
+      const gPinned = sessions.filter((s) => pinnedSessionIds.has(s.id) && !stickySessionIds.has(s.id));
+      if (gPinned.length === 0) return sessions.map(renderSessionCard).join('');
+      const gIdlePinned = gPinned.filter((s) => !isSessionActive(s));
+      const gUnpinned = sessions.filter(
+        (s) => !pinnedSessionIds.has(s.id) || isSessionActive(s) || stickySessionIds.has(s.id),
+      );
+      const pinCollapsed = collapsedProjectGroups.has(pinKey);
+      if (gIdlePinned.length === 0 && !pinCollapsed) return gUnpinned.map(renderSessionCard).join('');
+      return (
+        '<div class="pinned-sub-section">' +
+        '<div class="pinned-sub-header' +
+        (pinCollapsed ? ' collapsed' : '') +
+        '" data-group-path="' +
+        escapeHtml(pinKey) +
+        '">' +
+        '<svg class="group-chevron" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>' +
+        '<span class="pinned-sub-label">Pinned</span>' +
+        '<span class="group-count">' +
+        gIdlePinned.length +
+        '</span>' +
+        '<span class="pinned-ungroup-btn" title="Ungroup pinned sessions">&times;</span>' +
+        '</div>' +
+        '<div class="pinned-sub-items' +
+        (pinCollapsed ? ' collapsed' : '') +
+        '">' +
+        gIdlePinned.map(renderSessionCard).join('') +
+        '</div>' +
+        '</div>' +
+        gUnpinned.map(renderSessionCard).join('')
+      );
+    };
+    if (!groupPinned && (pinnedSessionIds.size > 0 || stickySessionIds.size > 0)) {
+      const pinWeight = (s) =>
+        stickySessionIds.has(s.id) ? 2 : pinnedSessionIds.has(s.id) && !isSessionActive(s) ? 1 : 0;
+      const pinSort = (a, b) => pinWeight(b) - pinWeight(a);
       for (const [, arr] of groups) arr.sort(pinSort);
       ungrouped.sort(pinSort);
     }
@@ -1833,6 +2063,15 @@ function renderSessions() {
     const sortedGroups = stableGroupOrder.map((p) => [p, groups.get(p)]);
 
     let html = '';
+    if (!groupPinned && pinnedSessionIds.size > 0) {
+      const hasPinnedInView = filteredSessions.some((s) => pinnedSessionIds.has(s.id));
+      if (hasPinnedInView) {
+        html += `<div class="pinned-regroup-banner">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="17" x2="12" y2="3"/><path d="M5 10l7-7 7 7"/><line x1="4" y1="21" x2="20" y2="21"/></svg>
+          Group pinned sessions
+        </div>`;
+      }
+    }
     for (const [projectPath, projectSessions] of sortedGroups) {
       const folderName = projectPath.split(/[/\\]/).pop();
       const isCollapsed = collapsedProjectGroups.has(projectPath);
@@ -1850,13 +2089,13 @@ function renderSessions() {
               <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-path-toggle" data-group-action="toggle-path" title="Show full path">
-                <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="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"/></svg>
+              <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>
             </div>
             <div class="project-group-breadcrumb" data-full-path="${escapedPath}" title="Click to copy path">${breadcrumbHtml}</div>
             <div class="project-group-sessions${isCollapsed ? ' collapsed' : ''}">
-              ${projectSessions.map(renderSessionCard).join('')}
+              ${renderGroupSessions(projectSessions, `__pinned_${projectPath}__`)}
             </div>
           `;
     }
@@ -1870,7 +2109,7 @@ function renderSessions() {
               <span class="group-count">${ungrouped.length}</span>
             </div>
             <div class="project-group-sessions${isCollapsed ? ' collapsed' : ''}">
-              ${ungrouped.map(renderSessionCard).join('')}
+              ${renderGroupSessions(ungrouped, '__pinned___ungrouped__')}
             </div>
           `;
     } else {
@@ -1879,19 +2118,28 @@ function renderSessions() {
 
     sessionsList.innerHTML = html;
   } else {
-    const pinned = filteredSessions.filter((s) => pinnedSessionIds.has(s.id));
-    const rest = filteredSessions.filter((s) => !pinnedSessionIds.has(s.id));
+    const sticky = filteredSessions.filter((s) => stickySessionIds.has(s.id));
+    const idlePinned = filteredSessions.filter((s) => pinnedSessionIds.has(s.id) && !isSessionActive(s));
+    const rest = filteredSessions.filter(
+      (s) =>
+        (!pinnedSessionIds.has(s.id) && !stickySessionIds.has(s.id)) ||
+        (pinnedSessionIds.has(s.id) && isSessionActive(s)),
+    );
     let html = '';
-    if (pinned.length > 0) {
-      const isCollapsed = collapsedProjectGroups.has('__pinned__');
+    if (sticky.length > 0) {
+      html += sticky.map(renderSessionCard).join('');
+    }
+    const isCollapsed = collapsedProjectGroups.has('__pinned__');
+    const hasPinned = pinnedSessionIds.size > 0 && filteredSessions.some((s) => pinnedSessionIds.has(s.id));
+    if (idlePinned.length > 0 || (hasPinned && isCollapsed)) {
       html += `
             <div class="project-group-header${isCollapsed ? ' collapsed' : ''}" data-group-path="__pinned__">
               <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">Pinned</span>
-              <span class="group-count">${pinned.length}</span>
+              <span class="group-count">${idlePinned.length}</span>
             </div>
             <div class="project-group-sessions${isCollapsed ? ' collapsed' : ''}">
-              ${pinned.map(renderSessionCard).join('')}
+              ${idlePinned.map(renderSessionCard).join('')}
             </div>
           `;
     }
@@ -1969,12 +2217,37 @@ function renderSession() {
   renderSessions();
 }
 
+function renderProjectView() {
+  noSession.style.display = 'none';
+  sessionView.classList.add('visible');
+
+  const folderName = currentProjectPath ? currentProjectPath.split(/[/\\]/).pop() : 'Project';
+  sessionTitle.textContent = folderName;
+
+  const metaParts = [`${currentProjectSessionIds.length} sessions`, `${currentTasks.length} tasks`];
+  if (currentProjectPath) metaParts.push(currentProjectPath);
+  sessionMeta.textContent = metaParts.join(' · ');
+
+  const completed = currentTasks.filter((t) => t.status === 'completed').length;
+  const percent = currentTasks.length > 0 ? Math.round((completed / currentTasks.length) * 100) : 0;
+
+  progressPercent.textContent = `${percent}%`;
+  progressBar.style.width = `${percent}%`;
+  const hasInProgress = currentTasks.some((t) => t.status === 'in_progress');
+  progressBar.classList.toggle('shimmer', hasInProgress && percent < 100);
+
+  updateOwnerFilter();
+  renderKanban();
+  renderSessions();
+}
+
 function renderTaskCard(task) {
   const isBlocked = task.blockedBy && task.blockedBy.length > 0;
-  const taskId = viewMode === 'all' ? `${task.sessionId?.slice(0, 4)}-${task.id}` : task.id;
+  const useSlug = viewMode === 'all' || viewMode === 'project';
+  const taskId = useSlug ? `${(task._taskDir || task.sessionId || '')?.slice(0, 4)}-${task.id}` : task.id;
   const sessionLabel = viewMode === 'all' && task.sessionName ? task.sessionName : null;
   const statusClass = task.status.replace('_', '-');
-  const actualSessionId = task.sessionId || currentSessionId;
+  const actualSessionId = task._taskDir || task.sessionId || currentSessionId || '';
 
   return `
         <div
@@ -2112,7 +2385,9 @@ async function onColumnDrop(e) {
     return;
   }
   const { taskId, sessionId } = data;
-  const task = currentTasks.find((t) => t.id === taskId && (t.sessionId || currentSessionId) === sessionId);
+  const task = currentTasks.find(
+    (t) => t.id === taskId && (t._taskDir === sessionId || (t.sessionId || currentSessionId) === sessionId),
+  );
   if (!task || task.status === newStatus) return;
   try {
     const res = await fetch(`/api/tasks/${sessionId}/${taskId}`, {
@@ -2150,7 +2425,10 @@ function getSelectedCardInfo() {
   for (let ci = 0; ci < COLUMNS.length; ci++) {
     const cards = Array.from(COLUMNS[ci].el.querySelectorAll('.task-card'));
     for (let i = 0; i < cards.length; i++) {
-      if (cards[i].dataset.taskId === selectedTaskId) {
+      if (
+        cards[i].dataset.taskId === selectedTaskId &&
+        (!selectedSessionId || cards[i].dataset.sessionId === selectedSessionId)
+      ) {
         return { colIndex: ci, cardIndex: i, card: cards[i] };
       }
     }
@@ -2200,8 +2478,9 @@ function getKbId(el) {
 }
 
 function getGroupSessionsContainer(header) {
+  const cls = header.classList.contains('pinned-sub-header') ? 'pinned-sub-items' : 'project-group-sessions';
   let el = header.nextElementSibling;
-  while (el && !el.classList.contains('project-group-sessions')) el = el.nextElementSibling;
+  while (el && !el.classList.contains(cls)) el = el.nextElementSibling;
   return el;
 }
 
@@ -2213,7 +2492,10 @@ function getNavigableItems() {
       if (!collapsedProjectGroups.has(el.dataset.groupPath)) {
         const container = getGroupSessionsContainer(el);
         if (container) {
-          for (const s of container.querySelectorAll('.session-item')) items.push(s);
+          for (const s of container.querySelectorAll('.session-item')) {
+            if (s.closest('.pinned-sub-items.collapsed')) continue;
+            items.push(s);
+          }
         }
       }
     } else if (el.classList.contains('session-item')) {
@@ -2410,7 +2692,9 @@ function getAvailableTasksOptions(currentTaskId = null) {
 
 //#region TASK_DETAIL
 async function showTaskDetail(taskId, sessionId = null) {
-  let task = currentTasks.find((t) => t.id === taskId && (!sessionId || t.sessionId === sessionId));
+  let task = currentTasks.find(
+    (t) => t.id === taskId && (!sessionId || t.sessionId === sessionId || t._taskDir === sessionId),
+  );
 
   // If task not found in currentTasks, fetch it from the session
   if (!task && sessionId && sessionId !== 'undefined') {
@@ -2502,20 +2786,25 @@ async function showTaskDetail(taskId, sessionId = null) {
         </div>
       `;
 
-  // Setup button handlers
+  // Setup button handlers (read-only in project view)
   const deleteBtn = document.getElementById('delete-task-btn');
-  deleteBtn.style.display = '';
-  deleteBtn.onclick = () => deleteTask(task.id, actualSessionId);
+  const isProjectView = viewMode === 'project';
+  deleteBtn.style.display = isProjectView ? 'none' : '';
+  if (!isProjectView) deleteBtn.onclick = () => deleteTask(task.id, actualSessionId);
 
-  // Setup inline editing
-  const titleEl = detailContent.querySelector('.detail-title');
-  if (titleEl) {
-    titleEl.onclick = () => editTitle(titleEl, task, actualSessionId);
-  }
+  const noteSection = detailContent.querySelector('.note-section');
+  if (noteSection && isProjectView) noteSection.style.display = 'none';
+
+  if (!isProjectView) {
+    const titleEl = detailContent.querySelector('.detail-title');
+    if (titleEl) {
+      titleEl.onclick = () => editTitle(titleEl, task, actualSessionId);
+    }
 
-  const descEl = detailContent.querySelector('.detail-desc');
-  if (descEl) {
-    descEl.onclick = () => editDescription(descEl, task, actualSessionId);
+    const descEl = detailContent.querySelector('.detail-desc');
+    if (descEl) {
+      descEl.onclick = () => editDescription(descEl, task, actualSessionId);
+    }
   }
 }
 
@@ -2815,6 +3104,15 @@ const _scratchpadModal = document.getElementById('scratchpad-modal');
 const _scratchpadTextarea = document.getElementById('scratchpad-textarea');
 const _scratchpadCharcount = document.getElementById('scratchpad-charcount');
 
+let _scratchpadKeyOverride = null;
+
+function _scratchpadKey() {
+  if (_scratchpadKeyOverride) return _scratchpadKeyOverride;
+  if (currentSessionId) return `scratchpad-${currentSessionId}`;
+  if (currentProjectPath) return `scratchpad-project:${currentProjectPath}`;
+  return null;
+}
+
 function toggleScratchpad() {
   if (_scratchpadModal.classList.contains('visible')) {
     closeScratchpad();
@@ -2823,9 +3121,11 @@ function toggleScratchpad() {
   }
 }
 
-function showScratchpad() {
-  if (!currentSessionId) return;
-  _scratchpadTextarea.value = localStorage.getItem(`scratchpad-${currentSessionId}`) || '';
+function showScratchpad(keyOverride) {
+  _scratchpadKeyOverride = keyOverride || null;
+  const key = _scratchpadKey();
+  if (!key) return;
+  _scratchpadTextarea.value = localStorage.getItem(key) || '';
   _scratchpadCharcount.textContent = `${_scratchpadTextarea.value.length} chars`;
   _scratchpadModal.classList.add('visible');
   _scratchpadTextarea.focus();
@@ -2837,12 +3137,19 @@ function closeScratchpad() {
     _scratchpadSaveTimer = null;
   }
   saveScratchpad();
+  _scratchpadKeyOverride = null;
   _scratchpadModal.classList.remove('visible');
 }
 
 function saveScratchpad() {
-  if (!currentSessionId) return;
-  localStorage.setItem(`scratchpad-${currentSessionId}`, _scratchpadTextarea.value);
+  const key = _scratchpadKey();
+  if (!key) return;
+  const val = _scratchpadTextarea.value;
+  if (val.trim()) {
+    localStorage.setItem(key, val);
+  } else {
+    localStorage.removeItem(key);
+  }
 }
 
 _scratchpadTextarea.addEventListener('input', () => {
@@ -2856,6 +3163,374 @@ _scratchpadTextarea.addEventListener('input', () => {
 
 //#endregion
 
+//#region STORAGE_MANAGER
+
+function _getStorageTotalSize() {
+  let bytes = 0;
+  for (let i = 0; i < localStorage.length; i++) {
+    const k = localStorage.key(i);
+    bytes += k.length + localStorage.getItem(k).length;
+  }
+  return bytes * 2; // UTF-16
+}
+
+function _updateStorageTotal() {
+  const el = document.getElementById('storage-total');
+  if (el) el.textContent = `${(_getStorageTotalSize() / 1024).toFixed(1)} KB`;
+}
+
+function _getKnownSessionIds() {
+  return new Set(sessions.map((s) => s.id));
+}
+
+function _sessionLabel(session, id) {
+  return session ? escapeHtml(session.name || session.slug || id.slice(0, 12)) : escapeHtml(id.slice(0, 12));
+}
+
+function _groupByProject(sessionIds) {
+  const sessionMap = new Map(sessions.map((s) => [s.id, s]));
+  const groups = new Map();
+  const orphans = [];
+  for (const id of sessionIds) {
+    const session = sessionMap.get(id);
+    if (!session) {
+      orphans.push({ id, session: null });
+      continue;
+    }
+    const project = session.project || '(no project)';
+    if (!groups.has(project)) groups.set(project, []);
+    groups.get(project).push({ id, session });
+  }
+  return { groups, orphans };
+}
+
+function _projectLabel(project) {
+  if (project === '(no project)') return '(no project)';
+  return project.split(/[/\\]/).pop() || project;
+}
+
+function _escapeForJsAttr(str) {
+  const jsEscaped = str.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\n/g, '\\n').replace(/\r/g, '\\r');
+  return escapeHtml(jsEscaped);
+}
+
+function _renderProjectGroup(label, meta, innerHtml) {
+  return `<div class="storage-project-group">
+    <div class="storage-project-header">
+      <span>${label}</span>
+      <span class="storage-item-meta">${meta}</span>
+    </div>
+    <div class="storage-session-group">${innerHtml}</div>
+  </div>`;
+}
+
+function _renderOrphanGroup(count, innerHtml) {
+  return _renderProjectGroup('Orphaned', `<span class="storage-item-badge orphan">${count}</span>`, innerHtml);
+}
+
+function showStorageManager() {
+  _updateStorageTotal();
+  _updateOrphanedCount();
+  document.querySelectorAll('.storage-tab').forEach((t) => {
+    t.classList.toggle('active', t.dataset.tab === 'sessions');
+  });
+  _renderStorageTab();
+  document.getElementById('storage-modal').classList.add('visible');
+}
+
+function closeStorageManager() {
+  document.getElementById('storage-modal').classList.remove('visible');
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function switchStorageTab(tab) {
+  document.querySelectorAll('.storage-tab').forEach((t) => {
+    t.classList.toggle('active', t.dataset.tab === tab);
+  });
+  _renderStorageTab();
+}
+
+function _renderStorageTab() {
+  const body = document.getElementById('storage-modal-body');
+  const tab = document.querySelector('.storage-tab.active')?.dataset.tab || 'sessions';
+  if (tab === 'sessions') body.innerHTML = _renderStorageSessions();
+  else if (tab === 'scratchpads') body.innerHTML = _renderStorageScratchpads();
+}
+
+function _renderStorageSessions() {
+  const pinnedIds = [...new Set([...pinnedSessionIds, ...stickySessionIds])];
+
+  const msgMap = new Map();
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (!key.startsWith('pinned-messages-')) continue;
+    const sid = key.slice('pinned-messages-'.length);
+    try {
+      const pins = JSON.parse(localStorage.getItem(key)) || [];
+      if (pins.length) msgMap.set(sid, { pins, key });
+    } catch {}
+  }
+
+  const allIds = [...new Set([...pinnedIds, ...msgMap.keys()])];
+  if (!allIds.length) return '<div class="storage-empty">No pinned sessions or messages</div>';
+  const { groups, orphans } = _groupByProject(allIds);
+
+  function renderMessageItems(id) {
+    const g = msgMap.get(id);
+    if (!g) return '';
+    const eid = escapeHtml(id);
+    const header = `<div class="storage-group-header" style="padding-left:12px;">
+      <span>${g.pins.length} pinned message${g.pins.length > 1 ? 's' : ''}</span>
+      <div class="storage-item-actions">
+        <button class="danger" onclick="_storageClearSessionPins('${eid}')">Clear All</button>
+      </div>
+    </div>`;
+    const items = g.pins
+      .map((p) => {
+        const type = escapeHtml(p.type || '?');
+        const text = escapeHtml((p.text || p.tool || p.agentType || '').slice(0, 60));
+        const pinId = _escapeForJsAttr(p.id || '');
+        const sid = _escapeForJsAttr(id);
+        return `<div class="storage-item storage-item-clickable" style="padding-left:24px;" onclick="_storagePreviewPin('${sid}','${pinId}')">
+        <span class="storage-item-badge">${type}</span>
+        <span class="storage-item-id">${text}</span>
+        <span class="storage-item-meta">${formatDate(p.timestamp)}</span>
+        <div class="storage-item-actions">
+          <button onclick="event.stopPropagation();_storagePreviewPin('${sid}','${pinId}')">View</button>
+          <button class="danger" onclick="event.stopPropagation();_storageUnpinMessage('${sid}','${pinId}')">Unpin</button>
+        </div>
+      </div>`;
+      })
+      .join('');
+    return header + items;
+  }
+
+  function renderSessionItem({ id, session }) {
+    const isPinned = isAnyPinned(id);
+    const eid = escapeHtml(id);
+    const actions = isPinned
+      ? `<button onclick="_storageViewSession('${eid}')">View</button>
+         <button class="danger" onclick="_storageUnpinSession('${eid}')">Unpin</button>`
+      : `<button onclick="_storageViewSession('${eid}')">View</button>`;
+    return `<div class="storage-group-header">
+      <span>${_sessionLabel(session, id)}</span>
+      <div class="storage-item-actions">${actions}</div>
+    </div>${renderMessageItems(id)}`;
+  }
+
+  let html = '';
+  for (const [project, items] of groups) {
+    const count = items.length;
+    html += _renderProjectGroup(
+      escapeHtml(_projectLabel(project)),
+      `${count} session${count > 1 ? 's' : ''}`,
+      items.map(renderSessionItem).join(''),
+    );
+  }
+  if (orphans.length) {
+    html += _renderOrphanGroup(orphans.length, orphans.map(renderSessionItem).join(''));
+  }
+  return html;
+}
+
+async function _storageViewSession(id) {
+  closeStorageManager();
+  revealedStorageSessionId = id;
+  if (!sessions.some((s) => s.id === id)) {
+    lastSessionsHash = '';
+    await fetchSessions();
+  }
+  await fetchTasks(id);
+  const el = document.querySelector(`.session-item[data-session-id="${CSS.escape(id)}"]`);
+  if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+}
+
+function _storageUnpinSession(id) {
+  pinnedSessionIds.delete(id);
+  stickySessionIds.delete(id);
+  savePinnedSessions();
+  renderSessions();
+  _renderStorageTab();
+  _updateStorageTotal();
+}
+
+function _storageClearSessionPins(sessionId) {
+  localStorage.removeItem(`pinned-messages-${sessionId}`);
+  if (currentSessionId === sessionId) {
+    currentPins = [];
+    const el = document.getElementById('message-panel-pinned');
+    if (el) el.innerHTML = '';
+  }
+  _renderStorageTab();
+  _updateStorageTotal();
+}
+
+function _storageUnpinMessage(sessionId, pinId) {
+  const key = `pinned-messages-${sessionId}`;
+  try {
+    const pins = JSON.parse(localStorage.getItem(key)) || [];
+    const idx = pins.findIndex((p) => p.id === pinId);
+    if (idx < 0) return;
+    pins.splice(idx, 1);
+    if (pins.length) localStorage.setItem(key, JSON.stringify(pins));
+    else localStorage.removeItem(key);
+    if (currentSessionId === sessionId) {
+      currentPins = pins;
+      const el = document.getElementById('message-panel-pinned');
+      if (el) el.innerHTML = renderPinnedSection();
+    }
+  } catch {}
+  _renderStorageTab();
+  _updateStorageTotal();
+}
+
+function _renderStorageScratchpads() {
+  const allItems = [];
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (!key.startsWith('scratchpad-')) continue;
+    const val = localStorage.getItem(key) || '';
+    const isProject = key.startsWith('scratchpad-project:');
+    const id = isProject ? key.slice('scratchpad-project:'.length) : key.slice('scratchpad-'.length);
+    allItems.push({ key, id, isProject, chars: val.length });
+  }
+  if (!allItems.length) return '<div class="storage-empty">No scratchpads</div>';
+
+  const projectItems = allItems.filter((i) => i.isProject);
+  const sessionItems = allItems.filter((i) => !i.isProject);
+  const sessionIds = sessionItems.map((i) => i.id);
+  const { groups: projectGroups, orphans } = _groupByProject(sessionIds);
+  const scratchBySession = new Map(sessionItems.map((i) => [i.id, i]));
+
+  function renderScratchItem(item) {
+    const session = !item.isProject ? sessions.find((s) => s.id === item.id) : null;
+    const typeBadge = item.isProject
+      ? '<span class="storage-item-badge">project</span>'
+      : '<span class="storage-item-badge">session</span>';
+    const jsKey = _escapeForJsAttr(item.key);
+    const label = item.isProject ? escapeHtml(_projectLabel(item.id)) : _sessionLabel(session, item.id);
+    return `<div class="storage-item">
+      <span class="storage-item-id" title="${escapeHtml(item.id)}">${label}</span>
+      ${typeBadge}
+      <span class="storage-item-meta">${item.chars} chars</span>
+      <div class="storage-item-actions">
+        <button onclick="_storagePreviewScratchpad('${jsKey}')">View</button>
+        <button class="danger" onclick="_storageDeleteScratchpad('${jsKey}')">Delete</button>
+      </div>
+    </div>`;
+  }
+
+  let html = '';
+
+  if (projectItems.length) {
+    html += _renderProjectGroup(
+      'Project Scratchpads',
+      `${projectItems.length}`,
+      projectItems.map(renderScratchItem).join(''),
+    );
+  }
+
+  for (const [project, items] of projectGroups) {
+    const matching = items.map((i) => scratchBySession.get(i.id)).filter(Boolean);
+    if (!matching.length) continue;
+    html += _renderProjectGroup(
+      escapeHtml(_projectLabel(project)),
+      `${matching.length} scratchpad${matching.length > 1 ? 's' : ''}`,
+      matching.map(renderScratchItem).join(''),
+    );
+  }
+
+  if (orphans.length) {
+    const orphanItems = orphans.map((i) => scratchBySession.get(i.id)).filter(Boolean);
+    if (orphanItems.length) {
+      html += _renderOrphanGroup(orphanItems.length, orphanItems.map(renderScratchItem).join(''));
+    }
+  }
+  return html;
+}
+
+function _storagePreviewScratchpad(key) {
+  closeStorageManager();
+  showScratchpad(key);
+}
+
+function _storagePreviewPin(sessionId, pinId) {
+  closeStorageManager();
+  const key = `pinned-messages-${sessionId}`;
+  try {
+    const pins = JSON.parse(localStorage.getItem(key)) || [];
+    const pin = pins.find((p) => p.id === pinId);
+    if (!pin) return;
+    document.getElementById('msg-detail-pin-btn').style.display = 'none';
+    currentMsgDetailIdx = null;
+    currentPinDetailId = null;
+    _renderPinToDetail(pin);
+    document.getElementById('msg-detail-modal').classList.add('visible');
+  } catch (e) {
+    console.error('_storagePreviewPin error:', e);
+  }
+}
+
+function _storageDeleteScratchpad(key) {
+  localStorage.removeItem(key);
+  _renderStorageTab();
+  _updateStorageTotal();
+}
+
+function _findOrphanedKeys() {
+  const known = _getKnownSessionIds();
+  if (!known.size) return [];
+  const orphaned = [];
+  for (const id of pinnedSessionIds) if (!known.has(id)) orphaned.push(`__pinned__${id}`);
+  for (const id of stickySessionIds) if (!known.has(id)) orphaned.push(`__sticky__${id}`);
+  for (let i = 0; i < localStorage.length; i++) {
+    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:')) {
+      if (!known.has(key.slice('scratchpad-'.length))) orphaned.push(key);
+    }
+  }
+  return orphaned;
+}
+
+function _updateOrphanedCount() {
+  const btn = document.getElementById('storage-cleanup-btn');
+  if (!btn) return;
+  const count = _findOrphanedKeys().length;
+  btn.textContent = count ? `Clean Orphaned (${count})` : 'Clean Orphaned';
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
+function cleanupOrphanedStorage() {
+  if (!sessions.length) {
+    showToast('Sessions not loaded yet — try again after they appear');
+    return;
+  }
+  const orphaned = _findOrphanedKeys();
+  let pinsChanged = false;
+  for (const key of orphaned) {
+    if (key.startsWith('__pinned__')) {
+      pinnedSessionIds.delete(key.slice('__pinned__'.length));
+      pinsChanged = true;
+    } else if (key.startsWith('__sticky__')) {
+      stickySessionIds.delete(key.slice('__sticky__'.length));
+      pinsChanged = true;
+    } else {
+      localStorage.removeItem(key);
+    }
+  }
+  if (pinsChanged) savePinnedSessions();
+  const removed = orphaned.length;
+
+  showToast(removed ? `Cleaned ${removed} orphaned item${removed > 1 ? 's' : ''}` : 'No orphaned items found');
+  renderSessions();
+  _renderStorageTab();
+  _updateStorageTotal();
+  _updateOrphanedCount();
+}
+//#endregion
+
 //#region KEYBOARD_SHORTCUTS
 function matchKey(e, ...keys) {
   if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return false;
@@ -2927,6 +3602,11 @@ document.addEventListener('keydown', (e) => {
     }
     return;
   }
+  if (e.code === 'KeyS' && e.shiftKey) {
+    e.preventDefault();
+    showStorageManager();
+    return;
+  }
 
   // Tab toggles focus zone
   if (e.key === 'Tab') {
@@ -3101,7 +3781,9 @@ function setupEventSource() {
 
     let taskRefreshTimer = null;
     let metadataRefreshTimer = null;
+    let agentRefreshTimer = null;
     const pendingTaskSessionIds = new Set();
+    const pendingAgentSessionIds = new Set();
 
     function debouncedRefresh(sessionId, isMetadata) {
       if (isMetadata) {
@@ -3122,6 +3804,9 @@ function setupEventSource() {
             currentTasks = filterProject ? allTasksCache.filter((t) => matchesProjectFilter(t.project)) : allTasksCache;
             renderAllTasks();
             renderLiveUpdatesFromCache();
+          } else if (viewMode === 'project' && currentProjectPath) {
+            const hasUpdate = currentProjectSessionIds.some((id) => pendingTaskSessionIds.has(id));
+            if (hasUpdate) fetchProjectView(currentProjectPath);
           } else if (currentSessionId && pendingTaskSessionIds.has(currentSessionId)) {
             fetchTasks(currentSessionId);
           }
@@ -3132,7 +3817,6 @@ function setupEventSource() {
 
     eventSource.onmessage = (event) => {
       const data = JSON.parse(event.data);
-      console.log('[SSE] Event received:', data);
       if (data.type === 'update' || data.type === 'metadata-update') {
         if (data.type === 'metadata-update') projectsCacheDirty = true;
         debouncedRefresh(data.sessionId, data.type === 'metadata-update');
@@ -3143,10 +3827,17 @@ function setupEventSource() {
       }
 
       if (data.type === 'agent-update') {
-        fetchSessions().catch((err) => console.error('[SSE] fetchSessions failed:', err));
-        if (currentSessionId && data.sessionId === currentSessionId) {
-          fetchAgents(currentSessionId);
-        }
+        pendingAgentSessionIds.add(data.sessionId);
+        clearTimeout(agentRefreshTimer);
+        agentRefreshTimer = setTimeout(() => {
+          fetchSessions().catch((err) => console.error('[SSE] fetchSessions failed:', err));
+          if (viewMode === 'project' && currentProjectSessionIds.some((id) => pendingAgentSessionIds.has(id))) {
+            refreshProjectAgents();
+          } else if (currentSessionId && pendingAgentSessionIds.has(currentSessionId)) {
+            fetchAgents(currentSessionId);
+          }
+          pendingAgentSessionIds.clear();
+        }, 500);
       }
 
       if (data.type === 'context-update') {
@@ -3154,7 +3845,6 @@ function setupEventSource() {
       }
 
       if (data.type === 'team-update') {
-        console.log('[SSE] Team update:', data.teamName);
         debouncedRefresh(data.teamName, false);
       }
     };
@@ -3312,6 +4002,10 @@ function renderContextDetail(raw) {
 //#endregion
 
 //#region UTILS
+function isSessionActive(s) {
+  return s.hasRecentLog || s.inProgress > 0 || s.hasActiveAgents || s.hasWaitingForUser;
+}
+
 function formatDate(dateStr) {
   const date = new Date(dateStr);
   const now = new Date();
@@ -3328,6 +4022,12 @@ function stripAnsi(text) {
   return typeof text === 'string' ? text.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '') : text;
 }
 
+function stripTeammateWrapper(text) {
+  if (typeof text !== 'string') return text;
+  const match = text.match(/^<teammate-message[^>]*>\n?([\s\S]*?)(?:<\/teammate-message>\s*)?$/);
+  return match ? match[1].trim() : text;
+}
+
 function escapeHtml(text) {
   const div = document.createElement('div');
   div.textContent = text;
@@ -3494,6 +4194,33 @@ document.addEventListener('click', (e) => {
     return;
   }
 
+  const projectBtn = e.target.closest('.project-view-btn');
+  if (projectBtn) {
+    e.stopPropagation();
+    const projectPath = projectBtn.dataset.projectPath;
+    if (projectPath) fetchProjectView(projectPath);
+    return;
+  }
+
+  if (e.target.closest('.pinned-ungroup-btn')) {
+    e.stopPropagation();
+    localStorage.setItem('groupPinnedSessions', 'false');
+    renderSessions();
+    return;
+  }
+
+  if (e.target.closest('.pinned-regroup-banner')) {
+    localStorage.setItem('groupPinnedSessions', 'true');
+    renderSessions();
+    return;
+  }
+
+  const pinnedSubHeader = e.target.closest('.pinned-sub-header');
+  if (pinnedSubHeader) {
+    setGroupCollapsed(pinnedSubHeader, !collapsedProjectGroups.has(pinnedSubHeader.dataset.groupPath));
+    return;
+  }
+
   const header = e.target.closest('.project-group-header');
   if (header) {
     setGroupCollapsed(header, !collapsedProjectGroups.has(header.dataset.groupPath));
@@ -3731,8 +4458,9 @@ async function showSessionInfoModal(sessionId) {
   // Fetch team config
   let teamConfig = null;
   if (session.isTeam) {
+    const teamId = session.teamName || sessionId;
     promises.push(
-      fetch(`/api/teams/${sessionId}`)
+      fetch(`/api/teams/${teamId}`)
         .then((r) => (r.ok ? r.json() : null))
         .catch(() => null)
         .then((data) => {
@@ -3804,6 +4532,9 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
   if (session.tasksDir) {
     infoRows.push(['Tasks Dir', session.tasksDir, { openPath: session.tasksDir }]);
   }
+  if (session.sharedTaskList) {
+    infoRows.push(['Shared Tasks', session.sharedTaskList]);
+  }
   if (teamConfig?.configPath) {
     const configDir = teamConfig.configPath.replace(/[/\\][^/\\]+$/, '');
     infoRows.push(['Team Config', teamConfig.configPath, { openPath: configDir, openFile: teamConfig.configPath }]);
@@ -3823,7 +4554,7 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
     } else {
       html += `<span style="${plainStyle}" title="${copyVal}">${escapeHtml(value)}</span>`;
     }
-    const jsCopyVal = copyVal.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+    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>`;
   });
   html += `</div>`;
@@ -4101,6 +4832,7 @@ searchQuery = urlState.search || '';
 
 loadPreferences();
 pinnedSessionIds = loadPinnedSessions();
+stickySessionIds = loadStickySessions();
 setupEventSource();
 
 if (urlState.search) {
@@ -4109,7 +4841,13 @@ if (urlState.search) {
 }
 
 fetchSessions().then(async () => {
-  if (urlState.session) {
+  if (urlState.projectView) {
+    try {
+      await fetchProjectView(atob(urlState.projectView));
+    } catch (_) {
+      showAllTasks();
+    }
+  } else if (urlState.session) {
     await fetchTasks(urlState.session);
   } else {
     showAllTasks();
@@ -4127,7 +4865,13 @@ window.addEventListener('popstate', () => {
   ownerFilter = s.owner || '';
   searchQuery = s.search || '';
   loadPreferences();
-  if (s.session) fetchTasks(s.session);
+  if (s.projectView) {
+    try {
+      fetchProjectView(atob(s.projectView));
+    } catch (_) {
+      showAllTasks();
+    }
+  } else if (s.session) fetchTasks(s.session);
   else showAllTasks();
   if (s.messages !== messagePanelOpen) toggleMessagePanel();
 });