claude-code-kanban 4.29.0 → 4.31.0

package/public/app.js

@@ -4,6 +4,7 @@ const STORAGE_NS = window.__STORAGE_NS__ ? `${window.__STORAGE_NS__}:` : '';
 // Theme is hub-wide (echoed to every app via hub:theme), so it stays shared across config dirs.
 const GLOBAL_KEYS = new Set(['theme', 'color-theme']);
 const nsKey = (k) => (GLOBAL_KEYS.has(k) ? k : STORAGE_NS + k);
+const { normalizeProjectPath, isExactProjectPath, isExactProjectFilter, projectMatcher } = projectMatch;
 const store = {
   keys() {
     const out = [];
@@ -20,18 +21,24 @@ const store = {
 
 // The baseline "nothing is filtered" state: what resetState() returns to, what updateUrl() omits
 // from the query string, and what decides whether a control tints ember in the header summary.
-const FILTER_DEFAULTS = { project: '__recent__', session: 'active', limit: '20' };
+const FILTER_DEFAULTS = { project: '__recent__', session: 'active' };
+const RECENT_PROJECT_HOURS = 24;
 
 let sessions = [];
 let currentSessionId = null;
-let lastSessionId = null;
-let previousSessionId = null;
+// Kept in the store because a config-dir switch in the hub reloads this page.
+const SWAP_KEY = 'swap-sessions';
+let [lastSessionId, previousSessionId] = readSwapPair();
 let currentTasks = [];
 let viewMode = 'session';
 let sessionFilter = FILTER_DEFAULTS.session;
 // Only meaningful while sessionFilter === 'active' (filterBySessions clears it otherwise)
 const activityFilter = new Set(); // kinds: 'waiting' | 'active'
-let sessionLimit = FILTER_DEFAULTS.limit;
+// The sidebar asks for one page and grows by a page when it is scrolled to the end. A live
+// refresh asks for the same count, so the loaded rows stay loaded.
+const SESSION_PAGE = 20;
+let sessionLimit = SESSION_PAGE;
+let sessionsHasMore = false;
 // Narrows the sidebar to the open session only. Kept out of FILTER_DEFAULTS/updateUrl because it
 // is not a filter — it has no select, no summary token, and never reaches the session picker.
 // Persisted in localStorage rather than the URL: the hub recreates each iframe at the app's base
@@ -58,6 +65,8 @@ let currentWaiting = null;
 let lastWaitingHash = '';
 let lastAgentsHash = '';
 let messagePanelOpen = false;
+let logAutoOpened = false;
+const logDismissed = new Set();
 let lastMessagesHash = '';
 let currentMessages = [];
 let agentDurationInterval = null;
@@ -91,7 +100,50 @@ let msgUserScrolledUp = false;
 const MSG_MAX_LOADED = 200;
 let currentProjectPath = null;
 let currentProjectSessionIds = [];
-const dismissedSessionIds = new Set();
+// Session id -> dismissed-at. Kept for a day: past that the session has usually gone stale,
+// and a reload (the hub reloads this page on a config-dir switch) must not bring it back.
+const DISMISSED_KEY = 'dismissed-sessions';
+const DISMISS_TTL_MS = 24 * 60 * 60 * 1000;
+const isDismissFresh = (at) => typeof at === 'number' && at > Date.now() - DISMISS_TTL_MS;
+const dismissedSessionIds = loadDismissedSessions();
+let dismissSaveWarned = false;
+
+function loadDismissedSessions() {
+  try {
+    const saved = Object.entries(JSON.parse(store.getItem(DISMISSED_KEY) || '{}'));
+    return new Map(saved.filter(([, at]) => isDismissFresh(at)));
+  } catch {
+    return new Map();
+  }
+}
+
+function persistDismissedSessions() {
+  for (const [id, at] of dismissedSessionIds) if (!isDismissFresh(at)) dismissedSessionIds.delete(id);
+  try {
+    store.setItem(DISMISSED_KEY, JSON.stringify(Object.fromEntries(dismissedSessionIds)));
+  } catch (e) {
+    console.error('[dismissed-sessions]', e);
+    // The map still works in memory, so only the next reload is affected. Say so once.
+    if (!dismissSaveWarned) {
+      dismissSaveWarned = true;
+      showToast(
+        'Browser storage is full: dismissed sessions come back on reload. Storage → Clean Orphaned frees space.',
+        'error',
+      );
+    }
+  }
+}
+
+function setSessionDismissed(id, dismissed) {
+  if (dismissed === dismissedSessionIds.has(id)) return false;
+  if (dismissed) dismissedSessionIds.set(id, Date.now());
+  else dismissedSessionIds.delete(id);
+  persistDismissedSessions();
+  updateDismissBtnState();
+  renderSessions();
+  renderActivityChip();
+  return true;
+}
 
 function resetMessageScrollState() {
   msgUserScrolledUp = false;
@@ -107,9 +159,7 @@ function getUrlState() {
   const params = new URLSearchParams(window.location.search);
   return {
     session: params.get('session'),
-    view: params.get('view'),
     filter: params.get('filter'),
-    limit: params.get('limit'),
     project: params.get('project'),
     owner: params.get('owner'),
     search: params.get('search'),
@@ -120,15 +170,13 @@ function getUrlState() {
 
 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 !== FILTER_DEFAULTS.session) params.set('filter', sessionFilter);
-  if (sessionLimit !== FILTER_DEFAULTS.limit) params.set('limit', sessionLimit);
   if (filterProject && filterProject !== FILTER_DEFAULTS.project) params.set('project', filterProject);
   if (ownerFilter) params.set('owner', ownerFilter);
   if (searchQuery) params.set('search', searchQuery);
-  if (messagePanelOpen) params.set('messages', '1');
+  if (messagePanelOpen && !logAutoOpened) params.set('messages', '1');
   const qs = params.toString();
   const url = qs ? `?${qs}` : window.location.pathname;
   history.replaceState(null, '', url);
@@ -165,16 +213,12 @@ function resetState() {
     store.removeItem(LAST_VIEW_KEY);
   } catch (_) {}
   sessionFilter = FILTER_DEFAULTS.session;
-  sessionLimit = FILTER_DEFAULTS.limit;
+  sessionLimit = SESSION_PAGE;
   filterProject = FILTER_DEFAULTS.project;
   zenMode = false;
   store.removeItem(ZEN_KEY);
   renderZenState();
-  ownerFilter = '';
   searchQuery = '';
-  viewMode = 'all';
-  if (agentLogMode) exitAgentLogMode();
-  currentSessionId = null;
   currentProjectPath = null;
   currentProjectSessionIds = [];
   resetMessageScrollState();
@@ -182,7 +226,8 @@ function resetState() {
   if (searchInput) searchInput.value = '';
   document.getElementById('search-clear-btn')?.classList.remove('visible');
   renderFilterState();
-  fetchSessions().then(() => showAllTasks());
+  showNoSession();
+  fetchSessions();
 }
 
 //#endregion
@@ -223,51 +268,90 @@ async function fetchSessions(includeTasks = true) {
     // opened from outside the current filter would leave the view on the previous one.
     const includeParam = currentSessionId ? `&include=${encodeURIComponent(currentSessionId)}` : '';
     const projectParam =
-      filterProject && filterProject !== '__recent__' ? `&project=${encodeURIComponent(filterProject)}` : '';
+      filterProject === '__recent__'
+        ? `&recentHours=${RECENT_PROJECT_HOURS}`
+        : filterProject
+          ? `&project=${encodeURIComponent(filterProject)}`
+          : '';
     const filterParam = sessionFilter === 'active' ? '&filter=active' : '';
     const sessionsPromise = fetch(
       `/api/sessions?limit=${sessionLimit}${pinnedParam}${includeParam}${projectParam}${filterParam}`,
-    ).then((r) => r.json());
-
-    let newSessions, newTasks;
-    if (includeTasks) {
-      [newSessions, newTasks] = await Promise.all([sessionsPromise, fetch('/api/tasks/all').then((r) => r.json())]);
-    } else {
-      newSessions = await sessionsPromise;
-    }
+    ).then((r) => {
+      sessionsHasMore = r.headers.get('X-Has-More') === 'true';
+      return r.json();
+    });
 
+    const newSessions = await sessionsPromise;
     const sessionsHash = JSON.stringify(newSessions);
-    if (includeTasks) {
-      const tasksHash = JSON.stringify(newTasks);
-      if (sessionsHash === lastSessionsHash && tasksHash === lastTasksHash) return;
-      lastTasksHash = tasksHash;
-      allTasksCache = newTasks;
-    } else {
-      if (sessionsHash === lastSessionsHash) return;
+    if (sessionsHash !== lastSessionsHash) {
+      lastSessionsHash = sessionsHash;
+      sessions = mergePlaceholders(newSessions);
+      renderSessions();
+      renderActivityChip();
     }
-    lastSessionsHash = sessionsHash;
+    // A list too short to scroll gives no scroll event, so fill it until it can scroll.
+    if (sessionsHasMore) setTimeout(loadMoreIfNearEnd);
 
-    sessions = mergePlaceholders(newSessions);
-    renderSessions();
-    renderActivityChip();
+    if (includeTasks && searchQuery) await loadSearchTasks();
   } catch (error) {
     console.error('Failed to fetch sessions:', error);
   }
 }
 
-// One session by id, ignoring every sidebar filter — that is what `include` means.
-async function fetchSessionById(id) {
+async function loadSearchTasks() {
+  const newTasks = await fetch('/api/tasks/all').then((r) => r.json());
+  const tasksHash = JSON.stringify(newTasks);
+  if (tasksHash === lastTasksHash) return;
+  lastTasksHash = tasksHash;
+  allTasksCache = newTasks;
+  if (searchQuery) renderSessions();
+}
+
+let sessionsLoadingMore = false;
+async function loadMoreSessions() {
+  if (!sessionsHasMore || sessionsLoadingMore) return;
+  sessionsLoadingMore = true;
+  sessionLimit += SESSION_PAGE;
   try {
-    const r = await fetch(`/api/sessions?limit=1&include=${encodeURIComponent(id)}`);
-    return r.ok ? (await r.json()).find((s) => s.id === id) || null : null;
+    await fetchSessions(false);
+  } finally {
+    sessionsLoadingMore = false;
+  }
+}
+
+function resetSessionPage() {
+  sessionLimit = SESSION_PAGE;
+  sessionsList.scrollTop = 0;
+}
+
+const LOAD_MORE_MARGIN_PX = 240;
+function loadMoreIfNearEnd() {
+  const { scrollTop, clientHeight, scrollHeight } = sessionsList;
+  if (clientHeight > 0 && scrollTop + clientHeight >= scrollHeight - LOAD_MORE_MARGIN_PX) loadMoreSessions();
+}
+sessionsList.addEventListener('scroll', loadMoreIfNearEnd, { passive: true });
+
+// Sessions by id, in the order given, ignoring every sidebar filter — that is what `include` means.
+async function fetchSessionsByIds(ids) {
+  try {
+    const r = await fetch(`/api/sessions?limit=1&include=${ids.map(encodeURIComponent).join(',')}`);
+    if (!r.ok) return [];
+    const byId = new Map((await r.json()).map((s) => [s.id, s]));
+    return ids.map((id) => byId.get(id)).filter(Boolean);
   } catch (_) {
-    return null;
+    return [];
   }
 }
 
+async function fetchSessionById(id) {
+  return (await fetchSessionsByIds([id]))[0] || null;
+}
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function handleSearch(query) {
+  const wasSearching = !!searchQuery;
   searchQuery = query.toLowerCase().trim();
+  if (searchQuery && !wasSearching) loadSearchTasks().catch(() => {});
 
   // Show/hide clear button
   const clearBtn = document.getElementById('search-clear-btn');
@@ -465,11 +549,10 @@ async function fetchTasks(sessionId) {
       revealedStorageSessionId = null;
     }
     if (currentSessionId && currentSessionId !== sessionId) deferredPinPlacement.delete(currentSessionId);
-    if (lastSessionId !== sessionId) {
-      previousSessionId = lastSessionId;
-      lastSessionId = sessionId;
-    }
+    if (lastSessionId !== sessionId) setSwapPair(sessionId, lastSessionId);
+    const switched = sessionId !== currentSessionId;
     currentSessionId = sessionId;
+    if (switched) autoRevealLog(sessionId, newTasks.length === 0);
     currentPins = loadPins(sessionId);
     ownerFilter = '';
     resetMessageScrollState();
@@ -632,7 +715,27 @@ async function refreshProjectAgents() {
 }
 
 //#region MESSAGE_PANEL
+function setMessagePanelVisible(open) {
+  messagePanelOpen = open;
+  document.getElementById('message-panel').classList.toggle('visible', open);
+  document.getElementById('message-toggle')?.classList.toggle('active', open);
+}
+
+// An empty board has nothing to show, so the log opens in its place. It is not the user's choice,
+// so it is not stored, it closes again on a session with tasks, and a manual close sticks for that session.
+function autoRevealLog(sessionId, empty) {
+  if (empty && !messagePanelOpen && !logDismissed.has(sessionId) && !wantsTerminal()) {
+    setMessagePanelVisible(true);
+    logAutoOpened = true;
+  } else if (!empty && logAutoOpened) {
+    setMessagePanelVisible(false);
+    logAutoOpened = false;
+  }
+}
+
 function toggleMessagePanel() {
+  if (logAutoOpened && messagePanelOpen && currentSessionId) logDismissed.add(currentSessionId);
+  logAutoOpened = false;
   const panel = document.getElementById('message-panel');
   messagePanelOpen = !messagePanelOpen;
   termState.panelHidden = false;
@@ -646,6 +749,34 @@ function toggleMessagePanel() {
   updateUrl();
 }
 
+function applyMessagePanelFull(on) {
+  document.getElementById('message-panel').classList.toggle('full-width', on);
+  const btn = document.getElementById('message-panel-full-btn');
+  btn.classList.toggle('active', on);
+  btn.setAttribute('aria-pressed', String(on));
+  const label = on ? 'Restore width' : 'Expand to full width';
+  btn.title = label;
+  btn.setAttribute('aria-label', label);
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
+function toggleMessagePanelFull() {
+  const on = !document.getElementById('message-panel').classList.contains('full-width');
+  store.setItem('message-panel-full', on);
+  applyMessagePanelFull(on);
+}
+
+function initMessagePanelFull() {
+  const panel = document.getElementById('message-panel');
+  const sidebar = document.querySelector('.sidebar');
+  if (sidebar) {
+    const sync = () => panel.style.setProperty('--sidebar-edge', `${sidebar.getBoundingClientRect().right}px`);
+    new ResizeObserver(sync).observe(sidebar);
+    sync();
+  }
+  applyMessagePanelFull(store.getItem('message-panel-full') === 'true');
+}
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
 async function openSessionWithBookmarks(sessionId) {
   if (!messagePanelOpen) {
@@ -2243,22 +2374,41 @@ function isAnyModalOpen() {
 
 const ZOOM_KEYS = { '+': 0.1, '=': 0.1, NumpadAdd: 0.1, '-': -0.1, _: -0.1, NumpadSubtract: -0.1, 0: 0, Numpad0: 0 };
 
+function zoomDelta(e) {
+  if (!(e.ctrlKey || e.metaKey) || e.altKey) return undefined;
+  return ZOOM_KEYS[e.key] ?? ZOOM_KEYS[e.code];
+}
+
 let _toastTimer = null;
 let _manualRefreshing = false;
 //#endregion
 
 //#region TOAST
-function showToast(msg, type) {
+// `action` ({label, onClick}) adds a button and keeps the toast up long enough to reach it.
+function showToast(msg, type, action) {
   const el = document.getElementById('toast');
   clearTimeout(_toastTimer);
   el.style.transition = 'none';
-  el.classList.remove('visible', 'toast-success', 'toast-error', 'toast-info');
+  el.classList.remove('visible', 'toast-success', 'toast-error', 'toast-info', 'has-action');
   void el.offsetHeight;
   el.style.transition = '';
   el.textContent = msg;
+  const hide = () => el.classList.remove('visible', 'has-action');
+  if (action) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'toast-action';
+    btn.textContent = action.label;
+    btn.addEventListener('click', () => {
+      hide();
+      action.onClick();
+    });
+    el.append(btn);
+    el.classList.add('has-action');
+  }
   if (type) el.classList.add(`toast-${type}`);
   el.classList.add('visible');
-  _toastTimer = setTimeout(() => el.classList.remove('visible'), 2000);
+  _toastTimer = setTimeout(hide, action ? 8000 : 2000);
 }
 
 async function copyWithFeedback(text, btn) {
@@ -3073,6 +3223,8 @@ let revealedStorageSessionId = null;
 // Opens a session and scrolls the sidebar to it, refetching first when the id
 // fell outside the session list the current filters asked for.
 async function revealSession(id) {
+  // Explicit opens restore a dismissed session; activity and auto-follow do not.
+  setSessionDismissed(id, false);
   let session = sessions.find((s) => s.id === id);
   if (!session) {
     lastSessionsHash = '';
@@ -3107,53 +3259,18 @@ async function revealPlanSession(planSessionId) {
   await revealSession(planSessionId);
 }
 
-async function showAllTasks() {
-  try {
-    viewMode = 'all';
-    if (agentLogMode) exitAgentLogMode();
-    currentSessionId = null;
-    ownerFilter = '';
-    resetAgentState();
-    const res = await fetch('/api/tasks/all');
-    allTasksCache = await res.json();
-    let tasks = allTasksCache;
-    if (filterProject) {
-      tasks = tasks.filter((t) => matchesProjectFilter(t.project));
-    }
-    currentTasks = tasks;
-    updateUrl();
-    renderAllTasks();
-    renderSessions();
-    renderActivityChip();
-  } catch (error) {
-    console.error('Failed to fetch all tasks:', error);
-  }
-}
-
-function renderAllTasks() {
-  noSession.style.display = 'none';
-  sessionView.classList.add('visible');
-  document.getElementById('owner-filter-bar').classList.remove('visible');
-
-  const visibleTasks = currentTasks.filter((t) => !isInternalTask(t));
-  const totalTasks = visibleTasks.length;
-  const completed = visibleTasks.filter((t) => t.status === 'completed').length;
-  const percent = totalTasks > 0 ? Math.round((completed / totalTasks) * 100) : 0;
-
-  const isFiltered = filterProject && filterProject !== '__recent__';
-  const projectName = isFiltered ? filterProject.split(/[/\\]/).pop() : null;
-  sessionTitle.textContent = isFiltered
-    ? `Tasks: ${projectName}`
-    : filterProject === '__recent__'
-      ? 'Recent Tasks'
-      : 'All Tasks';
-  sessionMeta.textContent = isFiltered
-    ? `${totalTasks} tasks in this project`
-    : `${totalTasks} tasks across ${sessions.length} sessions`;
-  progressPercent.textContent = `${percent}%`;
-  progressBar.style.width = `${percent}%`;
-
-  renderKanban();
+function showNoSession() {
+  viewMode = 'none';
+  if (agentLogMode) exitAgentLogMode();
+  currentSessionId = null;
+  ownerFilter = '';
+  resetAgentState();
+  currentTasks = [];
+  updateUrl();
+  sessionView.classList.remove('visible');
+  noSession.style.display = '';
+  renderSessions();
+  renderActivityChip();
 }
 
 // Filter pipeline: active filter → force-include revealed/current (non-pinned) sessions →
@@ -3260,8 +3377,7 @@ function renderSessions() {
   // Rebuilding the list under the pointer cancels an in-flight drop and would swallow a
   // half-typed group name, and the SSE path can fire at any moment — defer instead.
   if (sgDrag || sgIsEditing() || zenPanelIsEditing()) return;
-  // Update project dropdown
-  updateProjectDropdown();
+  refreshProjectList();
 
   // Zen narrows the rendered list only — the session picker keeps calling getFilteredSessions()
   // and still offers everything, or there would be no way to switch sessions without leaving zen.
@@ -3274,16 +3390,16 @@ function renderSessions() {
 
     if (zenMode) {
       emptyMsg = 'Zen mode: no session open';
-      emptyHint = 'Press Shift+Z to leave zen mode, then open a session';
+      emptyHint = 'Press Ctrl+Shift+Z to leave zen mode, then open a session';
     } else if (searchQuery) {
       emptyMsg = `No results for "${searchQuery}"`;
       emptyHint = 'Try a different search term or clear the search';
     } else if (filterProject && sessionFilter === 'active') {
-      emptyMsg = 'No active sessions for this project';
-      emptyHint = 'Try "All Sessions" or "All Projects"';
+      emptyMsg = 'No active sessions for this project filter';
+      emptyHint = 'Try "All Sessions" or clear the project filter';
     } else if (filterProject) {
-      emptyMsg = 'No sessions for this project';
-      emptyHint = 'Select "All Projects" to see all';
+      emptyMsg = 'No sessions for this project filter';
+      emptyHint = 'Clear the project filter to see all';
     } else if (sessionFilter === 'active') {
       emptyMsg = 'No active sessions';
       emptyHint = 'Select "All Sessions" to see all';
@@ -3338,7 +3454,6 @@ function renderSessions() {
             ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
             ${gitBranch ? `<div class="session-branch">${gitBranch}</div>` : ''}
             ${session.planTitle ? `<div class="session-plan">${escapeHtml(session.planTitle)}</div>` : ''}
-            ${renderGoalSubtitle(session)}
             <div class="session-progress">
               <span class="session-indicators">
                 ${isTeam ? `<span class="team-badge" title="${memberCount} team members"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>${memberCount}</span>` : ''}
@@ -3729,9 +3844,8 @@ function renderProjectView() {
 
 function renderTaskCard(task) {
   const isBlocked = task.blockedBy && task.blockedBy.length > 0;
-  const useSlug = viewMode === 'all' || viewMode === 'project';
+  const useSlug = 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._taskDir || task.sessionId || currentSessionId || '';
 
@@ -3762,7 +3876,6 @@ function renderTaskCard(task) {
             }
           </div>
           <div class="task-title">${escapeHtml(task.subject)}</div>
-          ${sessionLabel ? `<div class="task-session">${escapeHtml(sessionLabel)}</div>` : ''}
           ${task.status === 'in_progress' && task.activeForm ? `<div class="task-active">${escapeHtml(task.activeForm)}</div>` : ''}
           ${isBlocked ? `<div class="task-blocked">Waiting on ${task.blockedBy.map((id) => `#${id}`).join(', ')}</div>` : ''}
           ${task.description ? `<div class="task-desc">${escapeHtml(task.description.split('\n')[0])}</div>` : ''}
@@ -4196,7 +4309,6 @@ function sgAssign(groupId, type, ref, opts = {}) {
     if (loose) member.loose = true;
     group.members.push(member);
   }
-  if (collapsedProjectGroups.delete(sgKey(groupId))) persistCollapsedGroups();
   persistSessionGroups();
 }
 
@@ -4468,7 +4580,11 @@ function sgOnDrop(e) {
   if (hit.groupId) {
     if (hit.reorder) sgReorderMember(hit.groupId, drag, hit.reorder);
     else if (drag.kind === 'group') sgReorderGroup(drag.ref, hit.groupId);
-    else sgAssign(hit.groupId, drag.kind, drag.ref, { under: hit.under, loose: hit.loose });
+    else {
+      sgAssign(hit.groupId, drag.kind, drag.ref, { under: hit.under, loose: hit.loose });
+      // A drop shows where the card landed; a move from the context menu leaves the group as it was.
+      if (collapsedProjectGroups.delete(sgKey(hit.groupId))) persistCollapsedGroups();
+    }
   } else {
     sgDetach(drag.kind, drag.ref);
     if (drag.kind === 'session') sgReleased.add(drag.ref);
@@ -4505,6 +4621,10 @@ function initSessionGroupsDnd() {
   sessionsList.addEventListener('drop', sgOnDrop);
   sessionsList.addEventListener('dragend', sgOnDragEnd);
   sessionsList.addEventListener('contextmenu', sgOnContextMenu);
+  // The Menu key fires contextmenu at the focused element, which by then is our menu.
+  document.addEventListener('contextmenu', (e) => {
+    if (e.target.closest?.('.sg-menu')) e.preventDefault();
+  });
   sessionsList.addEventListener('keydown', (e) => {
     const input = e.target.closest?.('.sg-name-input');
     if (!input) return;
@@ -4539,32 +4659,68 @@ function initSessionGroupsDnd() {
 let sgLongPressTimer = null;
 
 function sgCloseMenu() {
+  document.removeEventListener('keydown', sgMenuKeydown, true);
   const menu = document.getElementById('sg-menu');
   if (menu) menu.remove();
 }
 
+// Capture phase: the global handler would otherwise read these keys as sidebar shortcuts.
+function sgMenuKeydown(e) {
+  const menu = document.getElementById('sg-menu');
+  if (!menu || e.ctrlKey || e.altKey || e.metaKey) return;
+  const items = [...menu.querySelectorAll('.sg-menu-item')];
+  const i = items.indexOf(document.activeElement);
+  e.stopPropagation();
+  if (e.key === 'Enter' || e.key === ' ') return;
+  e.preventDefault();
+  let next = null;
+  if (matchKey(e, 'ArrowDown')) next = (i + 1) % items.length;
+  else if (matchKey(e, 'ArrowUp')) next = i < 0 ? items.length - 1 : (i - 1 + items.length) % items.length;
+  else if (e.key === 'Home') next = 0;
+  else if (e.key === 'End') next = items.length - 1;
+  else if (e.key === 'Escape' || e.key === 'Tab') sgCloseMenu();
+  if (next !== null) items[next]?.focus();
+}
+
+function sgOpenMenuForKbSelection() {
+  const el = sessionsList.querySelector('.kb-selected');
+  if (!el?.matches('.session-item, .project-group-header')) return false;
+  const payload = sgDragPayload(el);
+  if (!payload?.ref) return false;
+  const rect = el.getBoundingClientRect();
+  sgOpenMenu(rect.left + 16, rect.bottom, payload.kind, payload.ref);
+  return true;
+}
+
 function sgOpenMenu(x, y, kind, ref) {
   sgCloseMenu();
   const current = sgGroupOf(kind, ref);
   const label = kind === 'project' ? 'project' : 'session';
   const rows = sessionGroups
     .filter((g) => g.id !== current?.id)
-    .map((g) => `<button class="sg-menu-item" data-sg-move="${escapeHtml(g.id)}">${escapeHtml(g.name)}</button>`)
+    .map(
+      (g) =>
+        `<button class="sg-menu-item" role="menuitem" data-sg-move="${escapeHtml(g.id)}">${escapeHtml(g.name)}</button>`,
+    )
     .join('');
   const menu = document.createElement('div');
   menu.id = 'sg-menu';
   menu.className = 'sg-menu';
+  menu.setAttribute('role', 'menu');
+  menu.setAttribute('aria-label', `Move ${label} to group`);
   menu.dataset.sgKind = kind;
   menu.dataset.sgRef = ref;
   menu.innerHTML = `
-        <div class="sg-menu-label">Move ${label} to group</div>
+        <div class="sg-menu-label" aria-hidden="true">Move ${label} to group</div>
         ${rows}
-        <button class="sg-menu-item" data-sg-move="__new__">+ New group…</button>
-        ${current ? `<button class="sg-menu-item sg-menu-remove" data-sg-move="__none__">Remove from “${escapeHtml(current.name)}”</button>` : ''}`;
+        <button class="sg-menu-item" role="menuitem" data-sg-move="__new__">+ New group…</button>
+        ${current ? `<button class="sg-menu-item sg-menu-remove" role="menuitem" data-sg-move="__none__">Remove from “${escapeHtml(current.name)}”</button>` : ''}`;
   document.body.appendChild(menu);
   const rect = menu.getBoundingClientRect();
   menu.style.left = `${Math.min(x, window.innerWidth - rect.width - 8)}px`;
   menu.style.top = `${Math.min(y, window.innerHeight - rect.height - 8)}px`;
+  document.addEventListener('keydown', sgMenuKeydown, true);
+  menu.querySelector('.sg-menu-item')?.focus();
 }
 
 function sgOnContextMenu(e) {
@@ -5198,13 +5354,7 @@ async function saveTaskField(taskId, sessionId, field, value) {
 
     if (res.ok) {
       lastCurrentTasksHash = null;
-      if (viewMode === 'all') {
-        const tasksRes = await fetch('/api/tasks/all');
-        currentTasks = await tasksRes.json();
-        renderKanban();
-      } else {
-        await fetchTasks(sessionId);
-      }
+      await fetchTasks(sessionId);
       showTaskDetail(taskId, sessionId);
     }
   } catch (error) {
@@ -5288,11 +5438,11 @@ function deleteTask(taskId, sessionId) {
     if (e.key === 'Escape') {
       e.preventDefault();
       closeDeleteConfirmModal();
-    } else if (matchKey(e, 'ArrowLeft', 'KeyH')) {
+    } else if (matchKey(e, 'ArrowLeft')) {
       e.preventDefault();
       focusIdx = 0;
       buttons[focusIdx].focus();
-    } else if (matchKey(e, 'ArrowRight', 'KeyL')) {
+    } else if (matchKey(e, 'ArrowRight')) {
       e.preventDefault();
       focusIdx = 1;
       buttons[focusIdx].focus();
@@ -5354,10 +5504,10 @@ const SHORTCUT_PAIRS = [
     {
       title: 'Navigate',
       rows: [
-        { keys: ['J', '↓'], label: 'Next item' },
-        { keys: ['K', '↑'], label: 'Previous item' },
-        { keys: ['H', '←'], label: 'Left column / collapse group' },
-        { keys: ['L', '→'], label: 'Right column / expand group' },
+        { keys: ['↓'], label: 'Next item' },
+        { keys: ['↑'], label: 'Previous item' },
+        { keys: ['←'], label: 'Left column / collapse group' },
+        { keys: ['→'], label: 'Right column / expand group' },
         { keys: ['Tab'], label: 'Switch sidebar ↔ board' },
         { keys: ['Enter', 'Space'], label: 'Open selected item' },
       ],
@@ -5366,14 +5516,15 @@ const SHORTCUT_PAIRS = [
       title: 'Session',
       rows: [
         { keys: ['P'], label: 'Open plan' },
-        { keys: ['Shift', 'P'], combo: true, label: 'Session picker' },
+        { keys: ['Ctrl', 'Shift', 'P'], combo: true, label: 'Session picker' },
         { keys: ['I'], label: 'Session info' },
         { keys: ['.'], label: 'Pin / unpin' },
         { keys: ['>'], label: 'Toggle sticky' },
+        { keys: ['Shift', 'F10'], combo: true, label: 'Move to group (or Menu key)' },
         { keys: ['Ctrl', 'D'], combo: true, label: 'Dismiss session' },
         { keys: ['Shift', 'L'], combo: true, label: 'Toggle session log' },
         { keys: ['Shift', 'M'], combo: true, label: 'Open last message' },
-        { keys: ['J', 'K'], label: 'Previous / next message in detail' },
+        { keys: ['↑', '↓'], label: 'Previous / next message in detail' },
         { keys: ['Ctrl', 'Enter'], combo: true, label: 'Allow / approve the waiting prompt' },
       ],
     },
@@ -5395,7 +5546,7 @@ const SHORTCUT_PAIRS = [
         { keys: ['['], label: 'Toggle sidebar' },
         { keys: ['T'], label: 'Toggle theme' },
         { keys: ['Shift', 'S'], combo: true, label: 'Storage manager' },
-        { keys: ['Shift', 'Z'], combo: true, label: 'Zen mode (current session only)' },
+        { keys: ['Ctrl', 'Shift', 'Z'], combo: true, label: 'Zen mode (current session only)' },
         { keys: ['Ctrl', '+'], combo: true, label: 'Larger modal text' },
         { keys: ['Ctrl', '−'], combo: true, label: 'Smaller modal text' },
         { keys: ['Ctrl', '0'], combo: true, label: 'Reset modal text size' },
@@ -5432,6 +5583,7 @@ const SHORTCUT_PAIRS = [
         { keys: ['Alt', '`'], combo: true, label: 'Focus terminal / page' },
         { keys: ['Alt', 'Shift', '`'], combo: true, label: 'End and close terminal' },
         { keys: ['Ctrl', 'Shift', '`'], combo: true, label: 'All terminals' },
+        { keys: ['Ctrl', '+/−/0'], combo: true, label: 'Terminal text size' },
       ],
     },
     {
@@ -5490,9 +5642,7 @@ function closeHelpModal() {
 }
 
 async function refreshCurrentView() {
-  if (viewMode === 'all') {
-    await showAllTasks();
-  } else if (currentSessionId) {
+  if (currentSessionId) {
     await fetchTasks(currentSessionId);
   } else {
     await fetchSessions();
@@ -5979,11 +6129,12 @@ function _renderStorageLinkedDocs() {
     const name = linkedDocLabel(p);
     const sid = escAttrJs(sessionId);
     const jsPath = escAttrJs(p);
+    const what = LINKED_DOC_OPENERS[linkedDocOpener(p)].noun;
     return `<div class="storage-item" style="padding-left:24px;">
       <span class="storage-item-id" title="${escapeHtml(p)}">${escapeHtml(name)}</span>
       <div class="storage-item-actions">
         <button onclick="_storagePreviewLinkedDoc('${jsPath}')">View</button>
-        <button onclick="copyWithFeedback('${jsPath}', this)" title="Copy path" aria-label="Copy path">${ICON_COPY}</button>
+        <button onclick="copyWithFeedback('${jsPath}', this)" title="Copy ${what}" aria-label="Copy ${what}">${ICON_COPY}</button>
         <button class="danger" onclick="_storageUnlinkDoc('${sid}','${jsPath}')">Unlink</button>
       </div>
     </div>`;
@@ -6025,10 +6176,12 @@ function _storagePreviewLinkedDoc(path) {
 
 function _storageUnlinkDoc(sessionId, path) {
   setSessionDocLink(sessionId, path, true);
+  forgetServerLinkedDoc(sessionId, path);
 }
 
 function _storageClearLinkedDocs(sessionId) {
   store.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
+  forgetServerLinkedDoc(sessionId);
   // The auto-link record deliberately survives: clearing is unlinking every row at
   // once, and an unlinked pad must not come back on the next read of the transcript.
   afterLinkedDocsChanged(sessionId);
@@ -6130,13 +6283,11 @@ document.addEventListener('keydown', (e) => {
   // Scale the open modal's reading surface instead of letting the browser zoom
   // the whole page. Sits above the text-field guard so it still works with the
   // caret in a field inside the modal.
-  if ((e.ctrlKey || e.metaKey) && !e.altKey) {
-    const delta = ZOOM_KEYS[e.key] ?? ZOOM_KEYS[e.code];
-    if (delta !== undefined && isZoomableModalOpen()) {
-      e.preventDefault();
-      adjustModalZoom(delta);
-      return;
-    }
+  const zoom = zoomDelta(e);
+  if (zoom !== undefined && isZoomableModalOpen()) {
+    e.preventDefault();
+    adjustModalZoom(zoom);
+    return;
   }
 
   // Above the text-field guard: xterm's input is a textarea, and the toggle must work from it.
@@ -6148,11 +6299,7 @@ document.addEventListener('keydown', (e) => {
       return;
     }
     if (e.key === 'Enter' || e.key === ' ') return;
-    const step = matchKey(e, 'ArrowLeft', 'ArrowUp', 'KeyH', 'KeyK')
-      ? -1
-      : matchKey(e, 'ArrowRight', 'ArrowDown', 'KeyL', 'KeyJ')
-        ? 1
-        : 0;
+    const step = matchKey(e, 'ArrowLeft', 'ArrowUp') ? -1 : matchKey(e, 'ArrowRight', 'ArrowDown') ? 1 : 0;
     if (step) {
       e.preventDefault();
       const buttons = [...terminalPrompt.querySelectorAll('button')];
@@ -6172,7 +6319,7 @@ document.addEventListener('keydown', (e) => {
     return;
   }
 
-  // Modal guard — only Escape, Shift+M, and msg-detail J/K navigation pass through
+  // Modal guard — only Escape, Shift+M, and msg-detail arrow navigation pass through
   if (isAnyModalOpen()) {
     if (e.key === 'Escape') {
       if (_scratchpadModal.classList.contains('visible')) {
@@ -6206,7 +6353,7 @@ document.addEventListener('keydown', (e) => {
       ) {
         e.preventDefault();
         respondWaiting({ behavior: 'allow' });
-      } else if (matchKey(e, 'ArrowDown', 'KeyJ')) {
+      } else if (matchKey(e, 'ArrowDown')) {
         e.preventDefault();
         if (currentMsgDetailIdx === MSG_DETAIL_WAITING_IDX) {
           msgDetailFollowLatest = true;
@@ -6221,7 +6368,7 @@ document.addEventListener('keydown', (e) => {
           msgDetailFollowLatest = true;
           showMsgDetail(currentMsgDetailIdx);
         }
-      } else if (matchKey(e, 'ArrowUp', 'KeyK')) {
+      } else if (matchKey(e, 'ArrowUp')) {
         e.preventDefault();
         if (currentMsgDetailIdx === MSG_DETAIL_WAITING_IDX) {
           if (currentMessages.length) {
@@ -6272,12 +6419,6 @@ document.addEventListener('keydown', (e) => {
     toggleZenMode();
     return;
   }
-  // Ctrl+Shift+P is the browser's own; only the bare chord opens the picker.
-  if (e.code === 'KeyP' && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
-    e.preventDefault();
-    openSessionPicker();
-    return;
-  }
   if (e.key === '.' || e.key === '>') {
     const sid = sessionsList.querySelector('.kb-selected')?.dataset.sessionId || currentSessionId;
     if (sid) {
@@ -6306,22 +6447,22 @@ document.addEventListener('keydown', (e) => {
 
   // Sidebar navigation
   if (focusZone === 'sidebar') {
-    if (matchKey(e, 'ArrowDown', 'KeyJ')) {
+    if (matchKey(e, 'ArrowDown')) {
       e.preventDefault();
       navigateSession(1);
       return;
     }
-    if (matchKey(e, 'ArrowUp', 'KeyK')) {
+    if (matchKey(e, 'ArrowUp')) {
       e.preventDefault();
       navigateSession(-1);
       return;
     }
-    if (matchKey(e, 'ArrowLeft', 'KeyH')) {
+    if (matchKey(e, 'ArrowLeft')) {
       e.preventDefault();
       handleSidebarHorizontal(-1);
       return;
     }
-    if (matchKey(e, 'ArrowRight', 'KeyL')) {
+    if (matchKey(e, 'ArrowRight')) {
       e.preventDefault();
       handleSidebarHorizontal(1);
       return;
@@ -6331,6 +6472,11 @@ document.addEventListener('keydown', (e) => {
       activateSelectedSession();
       return;
     }
+    const menuKey = e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey);
+    if (menuKey && sgOpenMenuForKbSelection()) {
+      e.preventDefault();
+      return;
+    }
     if (e.key === 'Escape') {
       // Plain unfocus — drop the keyboard cursor without jumping into the board
       clearKbSelection();
@@ -6341,16 +6487,16 @@ document.addEventListener('keydown', (e) => {
 
   // Board navigation
   if (focusZone === 'board') {
-    if (matchKey(e, 'ArrowDown', 'KeyJ', 'ArrowUp', 'KeyK', 'ArrowLeft', 'KeyH', 'ArrowRight', 'KeyL')) {
+    if (matchKey(e, 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight')) {
       e.preventDefault();
       if (!selectedTaskId && !document.querySelector('.task-card.selected')) {
         setFocusZone('sidebar');
         return;
       }
-      if (matchKey(e, 'ArrowDown', 'KeyJ')) navigateVertical(1);
-      else if (matchKey(e, 'ArrowUp', 'KeyK')) navigateVertical(-1);
-      else if (matchKey(e, 'ArrowLeft', 'KeyH')) navigateHorizontal(-1);
-      else if (matchKey(e, 'ArrowRight', 'KeyL')) navigateHorizontal(1);
+      if (matchKey(e, 'ArrowDown')) navigateVertical(1);
+      else if (matchKey(e, 'ArrowUp')) navigateVertical(-1);
+      else if (matchKey(e, 'ArrowLeft')) navigateHorizontal(-1);
+      else if (matchKey(e, 'ArrowRight')) navigateHorizontal(1);
 
       if (selectedTaskId && detailPanel.classList.contains('visible')) {
         showTaskDetail(selectedTaskId, selectedSessionId);
@@ -6433,12 +6579,8 @@ document.addEventListener('keydown', (e) => {
   }
   if (e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && e.key === 'd') {
     e.preventDefault();
-    if (!contextSid || dismissedSessionIds.has(contextSid)) return;
     const prevIdx = selectedSessionIdx;
-    dismissedSessionIds.add(contextSid);
-    updateDismissBtnState();
-    renderSessions();
-    renderActivityChip();
+    if (!contextSid || !setSessionDismissed(contextSid, true)) return;
     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
@@ -6449,10 +6591,11 @@ document.addEventListener('keydown', (e) => {
         if (targetSid) {
           fetchTasks(targetSid).then(() => selectSessionByIndex(targetIdx, getNavigableItems()));
         } else {
-          showAllTasks().then(() => selectSessionByIndex(targetIdx, getNavigableItems()));
+          showNoSession();
+          selectSessionByIndex(targetIdx, getNavigableItems());
         }
       } else {
-        showAllTasks();
+        showNoSession();
       }
     } else if (targetIdx >= 0) {
       selectSessionByIndex(targetIdx, newItems);
@@ -6555,6 +6698,31 @@ function setSessionDocLink(sessionId, filePath, unlink) {
   afterLinkedDocsChanged(sessionId);
 }
 
+// Links sent while no tab was open reach the browser only through the server copy.
+async function mergeServerLinkedDocs() {
+  let bySession;
+  try {
+    const res = await fetch('/api/document/links');
+    if (!res.ok) return;
+    bySession = await res.json();
+  } catch {
+    return;
+  }
+  for (const [sessionId, paths] of Object.entries(bySession || {})) {
+    const local = getSessionPreviewPaths(sessionId);
+    const known = new Set(local.map(canonicalPath));
+    const missing = (paths || []).filter((p) => !known.has(canonicalPath(p)));
+    if (!missing.length) continue;
+    store.setItem(PREVIEW_STORAGE_PREFIX + sessionId, JSON.stringify([...missing, ...local].slice(0, 20)));
+    afterLinkedDocsChanged(sessionId);
+  }
+}
+
+function forgetServerLinkedDoc(sessionId, filePath) {
+  const q = filePath ? `?path=${encodeURIComponent(filePath)}` : '';
+  fetch(`/api/document/links/${encodeURIComponent(sessionId)}${q}`, { method: 'DELETE' }).catch(() => {});
+}
+
 function afterLinkedDocsChanged(sessionId) {
   if (_infoModalSessionId === sessionId) refreshInfoModalLinkedDocs();
   renderSessions();
@@ -6770,6 +6938,7 @@ function handleSessionOpenEvent(data) {
   if (!isSessionActive(target)) {
     stickySessionIds.add(id);
   }
+  setSessionDismissed(id, false);
   fetchTasks(id);
 }
 
@@ -6789,10 +6958,13 @@ async function handlePreviewOpenEvent(data) {
 // Linked docs live in localStorage, so the CLI can only reach them through a tab:
 // the server broadcasts the resolved path and every tab applies it idempotently.
 function handleDocumentLinkEvent(data) {
-  const { path: filePath, sessionId, unlink } = data;
+  const { path: filePath, sessionId, unlink, open } = data;
   if (!filePath || !sessionId) return;
   setSessionDocLink(sessionId, filePath, unlink);
-  showToast(`${unlink ? 'Unlinked' : 'Linked'} ${filePath.split(/[\\/]/).pop()}`);
+  const msg = `${unlink ? 'Unlinked' : 'Linked'} ${linkedDocLabel(filePath)}`;
+  // Every tab gets the event; only the one on screen offers to open the URL.
+  if (open && isOnScreen()) showToast(msg, 'info', { label: 'Open', onClick: () => openExternal(filePath) });
+  else showToast(msg);
 }
 
 function getSessionBaseDir(sessionId) {
@@ -6874,10 +7046,13 @@ function isScratchpadPath(p) {
 // `linkedDocOpener` is the only place a linked path is classified; the row's tag,
 // tooltip and action are all read from here, so a new destination is one entry.
 const LINKED_DOC_OPENERS = {
-  preview: { tag: '', hint: '' },
+  preview: { tag: '', hint: '', cls: '', noun: 'path' },
+  url: { tag: '', hint: ' — opens in a new tab', cls: ' is-url', noun: 'URL' },
   scratch: {
     tag: '(scratchpad)',
     hint: ' — opens in the scratch viewer',
+    cls: ' is-editor',
+    noun: 'path',
     url: '/api/scratchpad/open',
     body: (p) => ({ path: p }),
     toast: 'in the scratch viewer',
@@ -6885,6 +7060,8 @@ const LINKED_DOC_OPENERS = {
   editor: {
     tag: '(editor)',
     hint: ' — opens in editor',
+    cls: ' is-editor',
+    noun: 'path',
     url: '/api/open-in-editor',
     body: (p) => ({ file: p }),
     toast: 'in editor',
@@ -6895,6 +7072,7 @@ const LINKED_DOC_OPENERS = {
 // text, but the pad is what the user linked, so the viewer wins over the raw file.
 // Without the CLI there is nothing to launch, so it falls back to the editor.
 function linkedDocOpener(p) {
+  if (linkUrl(p)) return 'url';
   if (isScratchpadPath(p)) return appConfig.scratchAvailable ? 'scratch' : 'editor';
   // A path whose kind has not arrived yet renders as previewable, which is what the
   // click does anyway — openPreviewByPath falls back to the editor on a null kind.
@@ -6904,12 +7082,17 @@ function linkedDocOpener(p) {
 // Every manifest is called scratchpad.json, so the pad's folder names it. Kept
 // independent of the opener: the pad is still the pad when the CLI is missing.
 function linkedDocLabel(p) {
+  if (linkUrl(p)) return p.replace(/^https?:\/\//i, '').replace(/\/$/, '');
   const parts = p.split(/[\\/]/).filter(Boolean);
   return isScratchpadPath(p) ? parts[parts.length - 2] || parts[parts.length - 1] : parts[parts.length - 1];
 }
 
 function openLinkedDoc(p, baseDir) {
   const opener = linkedDocOpener(p);
+  if (opener === 'url') {
+    openExternal(p);
+    return;
+  }
   if (opener === 'preview') {
     openPreviewByPath(p, baseDir, openFileInEditor);
     return;
@@ -6922,21 +7105,24 @@ function renderLinkedDocsHtml(sessionId) {
   const paths = getSessionPreviewPaths(sessionId);
   // Kicked off from the render rather than the three call sites, so a new surface that
   // shows linked docs cannot forget it. Returns at once once every path is cached.
-  loadPreviewKinds(sessionId, paths);
+  const rows = paths.map((p) => ({ p, opener: linkedDocOpener(p) }));
+  const filePaths = rows.filter((r) => r.opener !== 'url').map((r) => r.p);
+  loadPreviewKinds(sessionId, filePaths);
   const baseDir = getSessionBaseDir(sessionId);
-  const items = paths
-    .map((p) => {
-      const opener = linkedDocOpener(p);
-      const { tag, hint } = LINKED_DOC_OPENERS[opener];
+  const items = rows
+    .map(({ p, opener }) => {
+      const { tag, hint, cls, noun } = LINKED_DOC_OPENERS[opener];
       const name = linkedDocLabel(p);
+      const isUrl = opener === 'url';
       const rel = baseDir ? toRelativeIfUnder(p, baseDir) : null;
       const pathSpan = rel ? `<span class="linked-doc-path" title="${escapeHtml(p)}">${escapeHtml(rel)}</span>` : '';
       const attr = escapeHtml(p);
-      return `<li class="linked-doc-item${opener === 'preview' ? '' : ' is-editor'}">
-        <a href="#" class="linked-doc-link" data-path="${attr}" title="${escapeHtml(p + hint)}">${escapeHtml(name)}</a>
+      const href = isUrl ? `href="${attr}" target="_blank" rel="noopener"` : 'href="#"';
+      return `<li class="linked-doc-item${cls}">
+        <a ${href} class="linked-doc-link" data-path="${attr}" title="${escapeHtml(p + hint)}">${escapeHtml(name)}</a>${isUrl ? '<span class="linked-doc-external" aria-hidden="true">↗</span>' : ''}
         ${pathSpan}${tag ? `<span class="linked-doc-path">${tag}</span>` : ''}
         <span class="row-actions linked-doc-actions">
-          <button type="button" class="linked-doc-copy" data-path="${attr}" title="Copy path" aria-label="Copy path of ${escapeHtml(name)}">${ICON_COPY}</button>
+          <button type="button" class="linked-doc-copy" data-path="${attr}" title="Copy ${noun}" aria-label="Copy ${noun} of ${escapeHtml(name)}">${ICON_COPY}</button>
           <button type="button" class="linked-doc-remove" data-path="${attr}" title="Unlink" aria-label="Unlink ${escapeHtml(name)}">&times;</button>
         </span>
       </li>`;
@@ -6945,13 +7131,13 @@ function renderLinkedDocsHtml(sessionId) {
   // Rendered even when empty — the add button has to stay reachable.
   const body = paths.length
     ? `<ul class="linked-doc-list">${items}</ul>`
-    : '<div class="linked-docs-empty">No linked files yet</div>';
+    : '<div class="linked-docs-empty">No linked documents yet</div>';
   return `<div class="linked-docs-section panel-section">
     <div class="panel-section-header">
       ${linkSvg(12)}
       <span>Linked documents</span>
       <span class="panel-section-count">${paths.length}</span>
-      <button type="button" class="linked-docs-add-btn" title="Link a file" aria-label="Link a file">+</button>
+      <button type="button" class="linked-docs-add-btn" title="Link a file or URL" aria-label="Link a file or URL">+</button>
     </div>
     <div class="linked-doc-editor-slot"></div>
     ${body}
@@ -7220,7 +7406,7 @@ function bindLinkedDocsHandlers(container, sessionId) {
   if (!container) return;
   container.addEventListener('click', (e) => {
     const hit = e.target.closest('.linked-doc-link, .linked-doc-copy, .linked-doc-remove, .linked-docs-add-btn');
-    if (!hit) return;
+    if (!hit || hit.target === '_blank') return;
     e.preventDefault();
     if (hit.classList.contains('linked-docs-add-btn')) {
       startLinkedDocInput(container, sessionId);
@@ -7228,6 +7414,7 @@ function bindLinkedDocsHandlers(container, sessionId) {
       copyWithFeedback(hit.dataset.path, hit);
     } else if (hit.classList.contains('linked-doc-remove')) {
       removeSessionPreviewPath(sessionId, hit.dataset.path);
+      forgetServerLinkedDoc(sessionId, hit.dataset.path);
       afterLinkedDocsChanged(sessionId);
     } else {
       openLinkedDoc(hit.dataset.path, getSessionBaseDir(sessionId));
@@ -7238,7 +7425,7 @@ function bindLinkedDocsHandlers(container, sessionId) {
 function startLinkedDocInput(container, sessionId) {
   const slot = container.querySelector('.linked-doc-editor-slot');
   if (!slot) return;
-  slot.innerHTML = `<input class="linked-doc-input" type="text" spellcheck="false" placeholder="Absolute path, file:// URL, or relative to the session cwd">
+  slot.innerHTML = `<input class="linked-doc-input" type="text" spellcheck="false" placeholder="Path, file:// or https:// URL">
     <div class="linked-doc-hint">${escapeHtml(getSessionBaseDir(sessionId) || 'no session cwd — absolute paths only')}</div>
     <div class="linked-doc-error"></div>
     <div class="edit-actions">
@@ -7252,6 +7439,9 @@ function startLinkedDocInput(container, sessionId) {
   };
   slot.querySelector('.edit-save').addEventListener('click', save);
   slot.querySelector('.edit-cancel').addEventListener('click', cancel);
+  input.addEventListener('input', () => {
+    slot.querySelector('.linked-doc-error').textContent = '';
+  });
   input.addEventListener('keydown', (e) => {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -7274,27 +7464,38 @@ async function linkFileByPath(sessionId, raw, slot) {
     else showToast(msg, 'error');
   };
   if (!value) {
-    fail('Enter a file path');
+    fail('Enter a file path or URL');
     return;
   }
-  try {
-    const qs = new URLSearchParams({ path: value });
-    const base = getSessionBaseDir(sessionId);
-    if (base) qs.set('base', base);
-    const r = await fetch(`/api/file/resolve?${qs}`);
-    const data = await r.json().catch(() => ({}));
-    if (!r.ok || !data.exists) {
-      fail(data.error || 'File not found');
+  let target;
+  if (/^[a-z][a-z0-9+.-]*:\/\//i.test(value) && !/^file:/i.test(value)) {
+    target = linkUrl(value);
+    if (!target) {
+      fail('Only http and https URLs can be linked');
+      return;
+    }
+  } else {
+    try {
+      const qs = new URLSearchParams({ path: value });
+      const base = getSessionBaseDir(sessionId);
+      if (base) qs.set('base', base);
+      const r = await fetch(`/api/file/resolve?${qs}`);
+      const data = await r.json().catch(() => ({}));
+      if (!r.ok || !data.exists) {
+        fail(data.error || 'File not found');
+        return;
+      }
+      target = data.path;
+    } catch {
+      fail('Failed to resolve file');
       return;
     }
-    // Close the editor before the refresh: a sidebar panel defers its re-render while an
-    // input is open, so leaving it up would hide the file that was just linked.
-    if (slot) slot.innerHTML = '';
-    setSessionDocLink(sessionId, data.path, false);
-    showToast('Linked to session', 'success');
-  } catch {
-    fail('Failed to resolve file');
   }
+  // Close the editor before the refresh: a sidebar panel defers its re-render while an
+  // input is open, so leaving it up would hide the file that was just linked.
+  if (slot) slot.innerHTML = '';
+  setSessionDocLink(sessionId, target, false);
+  showToast('Linked to session', 'success');
 }
 //#endregion
 
@@ -7324,12 +7525,6 @@ function setupEventSource() {
   const pendingTaskSessionIds = new Set();
   const pendingAgentSessionIds = new Set();
 
-  function refreshAllView() {
-    currentTasks = filterProject ? allTasksCache.filter((t) => matchesProjectFilter(t.project)) : allTasksCache;
-    renderAllTasks();
-    renderActivityChip();
-  }
-
   async function refreshSessionDetail(sessionId) {
     await fetchAgents(sessionId);
     if (!agentLogMode) fetchMessages(sessionId);
@@ -7349,6 +7544,7 @@ function setupEventSource() {
             .catch(() => {});
       }
       wasConnected = true;
+      mergeServerLinkedDocs();
       retryDelay = 1000;
       hideOffline();
     };
@@ -7383,9 +7579,7 @@ function setupEventSource() {
         taskRefreshTimer = setTimeout(async () => {
           if (skipOffScreen()) return;
           await fetchSessions().catch((err) => console.error('[SSE] fetchSessions failed:', err));
-          if (viewMode === 'all') {
-            refreshAllView();
-          } else if (viewMode === 'project' && currentProjectPath) {
+          if (viewMode === 'project' && currentProjectPath) {
             const hasUpdate = currentProjectSessionIds.some((id) => pendingTaskSessionIds.has(id));
             if (hasUpdate) fetchProjectView(currentProjectPath);
           } else if (currentSessionId && pendingTaskSessionIds.has(currentSessionId)) {
@@ -7472,10 +7666,7 @@ function setupEventSource() {
     pendingTaskSessionIds.clear();
     pendingAgentSessionIds.clear();
     const sessionsLoaded = fetchSessions().catch(() => {});
-    if (viewMode === 'all') {
-      await sessionsLoaded;
-      refreshAllView();
-    } else if (viewMode === 'project' && currentProjectPath) {
+    if (viewMode === 'project' && currentProjectPath) {
       await sessionsLoaded;
       fetchProjectView(currentProjectPath);
     } else if (currentSessionId) {
@@ -8133,10 +8324,44 @@ function getMermaidTheme() {
   return isLightTheme() ? 'default' : 'dark';
 }
 
+// Mermaid is about 3 MB, so it loads on the first diagram instead of on the page's critical path.
+const MERMAID_SCRIPT = {
+  src: 'https://cdn.jsdelivr.net/npm/mermaid@12.0.0/dist/mermaid.min.js',
+  integrity: 'sha384-xzghz1GQ5u9HCpVskeDPqMsdogD1yvuMQbEK53+wi+G70+6J1AG0L2cfi9PHjDWI',
+};
+let mermaidLoading = null;
+
+function loadMermaid() {
+  mermaidLoading ??= new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = MERMAID_SCRIPT.src;
+    script.integrity = MERMAID_SCRIPT.integrity;
+    script.crossOrigin = 'anonymous';
+    script.onload = () => {
+      mermaid.initialize({ startOnLoad: false, theme: getMermaidTheme() });
+      resolve();
+    };
+    script.onerror = () => {
+      script.remove();
+      mermaidLoading = null;
+      reject(new Error('mermaid failed to load'));
+    };
+    document.head.appendChild(script);
+  });
+  return mermaidLoading;
+}
+
 function initMermaidBlocks(container) {
-  if (typeof mermaid === 'undefined') return;
   const blocks = (container || document).querySelectorAll('pre.mermaid:not([data-processed])');
-  if (blocks.length) mermaid.run({ nodes: [...blocks] });
+  if (!blocks.length) return;
+  if (typeof mermaid === 'undefined') {
+    loadMermaid().then(
+      () => initMermaidBlocks(container),
+      (err) => console.warn(err.message),
+    );
+    return;
+  }
+  mermaid.run({ nodes: [...blocks] });
 }
 
 function reinitMermaidTheme() {
@@ -8270,18 +8495,106 @@ function toggleFilterMenu(e) {
   document.getElementById('filter-menu-btn')?.setAttribute('aria-expanded', 'true');
   renderFilterState();
   document.addEventListener('click', closeFilterMenu, { once: true });
-  // Capture phase: the global keydown handler bails out on SELECT targets, and every
-  // focusable thing in this popover is a select — Escape would never reach it otherwise.
+  // Capture phase: the global keydown handler bails out on form fields, and the path box
+  // has focus — Escape would never reach it otherwise.
   document.addEventListener('keydown', filterMenuKeydown, true);
-  document.getElementById('project-filter')?.focus();
+  pfIdx = -1;
+  renderProjectOptions();
+  const input = document.getElementById('project-filter');
+  input?.focus();
+  input?.select();
 }
 
 function filterMenuKeydown(e) {
-  if (e.key !== 'Escape') return;
-  e.stopPropagation();
-  if (closeFilterMenu()) document.getElementById('filter-menu-btn')?.focus();
+  if (e.key === 'Escape') {
+    e.stopPropagation();
+    if (closeFilterMenu()) document.getElementById('filter-menu-btn')?.focus();
+    return;
+  }
+  if (e.target.id !== 'project-filter') return;
+  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+    e.preventDefault();
+    const n = pfOptions.length;
+    if (!n) return;
+    pfIdx = e.key === 'ArrowDown' ? (pfIdx + 1) % n : (pfIdx - 1 + n) % n;
+    renderProjectOptions();
+  } else if (e.key === 'Enter') {
+    e.preventDefault();
+    if (pfIdx >= 0 && pfOptions[pfIdx]) pickProject(pfOptions[pfIdx].path);
+    else closeFilterMenu();
+  }
+}
+
+// The menu's project list: projects the path box matches, newest activity first.
+const PF_MAX = 7;
+let pfOptions = [];
+let pfIdx = -1;
+
+function renderProjectOptions() {
+  const list = document.getElementById('project-filter-options');
+  const input = document.getElementById('project-filter');
+  if (!list || !input) return;
+  const text = projectFilterText();
+  const q = normalizeProjectPath(text.trim());
+  const partial = !!q && !isExactProjectPath(q);
+  const needle = partial ? q : '';
+  const selected = q && !partial ? q : null;
+  const byRecent = (a, b) => (b.modifiedAt || '').localeCompare(a.modifiedAt || '');
+  pfOptions = (projectsCache || [])
+    .map((p) => ({ ...p, norm: normalizeProjectPath(p.path) }))
+    .filter((p) => !needle || p.norm.includes(needle))
+    .sort(byRecent)
+    .slice(0, PF_MAX);
+  if (pfIdx >= pfOptions.length) pfIdx = pfOptions.length - 1;
+  list.innerHTML = pfOptions.length
+    ? pfOptions
+        .map((p, i) => {
+          const cut = Math.max(p.path.lastIndexOf('/'), p.path.lastIndexOf('\\')) + 1;
+          const at = needle ? p.norm.indexOf(needle) : -1;
+          const range = at >= 0 ? [at, at + needle.length] : null;
+          const isSel = p.norm === selected;
+          return `<li id="pf-opt-${i}" role="option" class="pf-opt${i === pfIdx ? ' hl' : ''}" aria-selected="${isSel ? 'true' : 'false'}" data-path="${escapeHtml(p.path)}" title="${escapeHtml(p.path)}">
+            <span class="pf-name">${markRange(p.path, cut, p.path.length, range)}</span>
+            <span class="pf-dir"><bdi>${markRange(p.path, 0, cut, range)}</bdi></span>
+            <span class="pf-age">${p.modifiedAt ? shortAge(p.modifiedAt) : ''}</span>
+          </li>`;
+        })
+        .join('')
+    : `<li class="pf-empty">${
+        partial ? `No project path contains “${escapeHtml(text.trim())}”` : 'No projects yet'
+      }</li>`;
+  if (pfIdx >= 0) input.setAttribute('aria-activedescendant', `pf-opt-${pfIdx}`);
+  else input.removeAttribute('aria-activedescendant');
+  list.querySelector('.pf-opt.hl')?.scrollIntoView({ block: 'nearest' });
 }
 
+function shortAge(iso) {
+  const min = Math.max(0, (Date.now() - new Date(iso).getTime()) / 60000);
+  if (min < 60) return `${Math.floor(min)}m`;
+  if (min < 1440) return `${Math.floor(min / 60)}h`;
+  if (min < 60 * 24 * 60) return `${Math.floor(min / 1440)}d`;
+  return `${Math.floor(min / (1440 * 30))}mo`;
+}
+
+// The slice [from, to) of text, with the part inside range marked.
+function markRange(text, from, to, range) {
+  if (!range || range[1] <= from || range[0] >= to) return escapeHtml(text.slice(from, to));
+  const a = Math.max(from, range[0]);
+  const b = Math.min(to, range[1]);
+  return `${escapeHtml(text.slice(from, a))}<mark>${escapeHtml(text.slice(a, b))}</mark>${escapeHtml(text.slice(b, to))}`;
+}
+
+function pickProject(path) {
+  filterByProject(path);
+  closeFilterMenu();
+  document.getElementById('filter-menu-btn')?.focus();
+}
+
+document.getElementById('project-filter-options')?.addEventListener('click', (e) => {
+  const opt = e.target.closest('.pf-opt');
+  if (opt) pickProject(opt.dataset.path);
+});
+
 function closeFilterMenu() {
   const menu = document.getElementById('filter-menu');
   if (!menu?.classList.contains('open')) return false;
@@ -8291,50 +8604,53 @@ function closeFilterMenu() {
   return true;
 }
 
-// One row per filter control: the select it mirrors, its value, whether it differs from the
-// default, and two label forms — terse tokens for the header strip (which has ~15 characters
+// One row per filter: whether it differs from the default, and two label forms — terse tokens for the header strip (which has ~15 characters
 // before the sidebar's width ellipsises it) and long form for its tooltip.
 const FILTERS = [
   {
-    id: 'project-filter',
-    value: () => filterProject ?? '',
     active: () => filterProject !== FILTER_DEFAULTS.project,
-    short: () => (filterProject ? filterProject.split(/[/\\]/).pop() : 'all proj'),
-    long: () => (filterProject ? `project ${filterProject}` : 'all projects'),
+    short: () => {
+      if (filterProject === '__recent__') return 'recent';
+      if (!filterProject) return 'all proj';
+      const name = pathBasename(filterProject);
+      return isExactProjectFilter(filterProject) ? name : `*${name}*`;
+    },
+    long: () => {
+      if (filterProject === '__recent__') return 'projects active in the last 24h';
+      if (!filterProject) return 'all projects';
+      return isExactProjectFilter(filterProject)
+        ? `project ${filterProject}`
+        : `project path contains "${filterProject}"`;
+    },
   },
   {
-    id: 'session-filter',
-    value: () => sessionFilter,
     active: () => sessionFilter !== FILTER_DEFAULTS.session,
     short: () => 'inactive',
     long: () => 'including inactive sessions',
   },
-  {
-    id: 'session-limit',
-    value: () => sessionLimit,
-    active: () => sessionLimit !== FILTER_DEFAULTS.limit,
-    short: () => (sessionLimit === 'all' ? 'n=∞' : `n=${sessionLimit}`),
-    long: () => (sessionLimit === 'all' ? 'no session limit' : `showing ${sessionLimit}`),
-  },
 ];
 
-// Keeps the header (summary + funnel tint) and the popover's selects in sync with state.
+// Keeps the header (summary + funnel tint) and the popover's controls in sync with state.
 // Safe to call on every filter change — it only touches classes, values, and text.
 function renderFilterState() {
   const short = [];
   const long = [];
   for (const f of FILTERS) {
-    const active = f.active();
-    if (active) {
-      short.push(f.short());
-      long.push(f.long());
-    }
-    const el = document.getElementById(f.id);
-    if (!el) continue;
-    const value = String(f.value());
-    if (el.value !== value) el.value = value;
-    el.classList.toggle('non-default', active);
+    if (!f.active()) continue;
+    short.push(f.short());
+    long.push(f.long());
+  }
+  const input = document.getElementById('project-filter');
+  if (input) {
+    const value = projectFilterText();
+    if (input.value !== value) input.value = value;
   }
+  const recent = document.getElementById('project-recent-btn');
+  recent?.setAttribute('aria-pressed', String(filterProject === '__recent__'));
+  for (const b of document.querySelectorAll('[data-session-filter]')) {
+    b.setAttribute('aria-checked', String(b.dataset.sessionFilter === sessionFilter));
+  }
+  if (document.getElementById('filter-menu')?.classList.contains('open')) renderProjectOptions();
 
   const summary = document.getElementById('filter-summary');
   if (summary) {
@@ -8359,12 +8675,16 @@ function renderZenState() {
   if (!btn) return;
   btn.classList.toggle('active', zenMode);
   btn.setAttribute('aria-pressed', String(zenMode));
-  btn.title = zenMode ? 'Zen mode on — show all sessions (Shift+Z)' : 'Zen mode: current session only (Shift+Z)';
+  btn.title = zenMode
+    ? 'Zen mode on — show all sessions (Ctrl+Shift+Z)'
+    : 'Zen mode: current session only (Ctrl+Shift+Z)';
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function filterBySessions(value) {
+  if (value === sessionFilter) return;
   sessionFilter = value;
+  resetSessionPage();
   if (value !== 'active') activityFilter.clear();
   renderFilterState();
   updateUrl();
@@ -8376,18 +8696,18 @@ function filterBySessions(value) {
   fetchSessions(false);
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function changeSessionLimit(value) {
-  sessionLimit = value;
-  renderFilterState();
-  updateUrl();
-  fetchSessions();
+function projectFilterText() {
+  return filterProject && filterProject !== '__recent__' ? filterProject : '';
 }
 
+let filterMatcher = { query: null, match: null };
 function matchesProjectFilter(project) {
   if (!filterProject) return true;
   if (filterProject === '__recent__') return recentProjects.has(project);
-  return project === filterProject;
+  if (filterMatcher.query !== filterProject) {
+    filterMatcher = { query: filterProject, match: projectMatcher(filterProject) };
+  }
+  return filterMatcher.match(project);
 }
 
 //#endregion
@@ -8507,11 +8827,31 @@ document.addEventListener('click', (e) => {
 
 // Used in HTML; also called by the hub project shim, so no biome suppression is needed.
 function filterByProject(project) {
+  clearTimeout(projectFilterTimer);
   filterProject = project || null;
+  resetSessionPage();
   renderFilterState();
-  updateUrl();
   fetchSessions(false);
-  showAllTasks();
+  showNoSession();
+}
+
+// The sidebar narrows on every key from the rows it has; the server round trip for rows past
+// the limit waits for a pause in typing.
+const PROJECT_FILTER_DEBOUNCE_MS = 250;
+let projectFilterTimer = null;
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function typeProjectFilter(value) {
+  filterProject = value.trim() ? value : null;
+  pfIdx = -1;
+  updateUrl();
+  renderSessions();
+  clearTimeout(projectFilterTimer);
+  projectFilterTimer = setTimeout(() => filterByProject(filterProject), PROJECT_FILTER_DEBOUNCE_MS);
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function toggleRecentProjects() {
+  filterByProject(filterProject === '__recent__' ? null : '__recent__');
 }
 
 let projectsCache = null;
@@ -8532,22 +8872,20 @@ async function loadProjects() {
   return projects;
 }
 
-async function updateProjectDropdown() {
-  const dropdown = document.getElementById('project-filter');
-
+async function refreshProjectList() {
   if (!projectsCacheDirty && projectsCache) {
-    renderProjectDropdown(dropdown, projectsCache);
+    renderFilterState();
     return;
   }
 
   const projects = await loadProjects();
-  const cutoff = Date.now() - 24 * 60 * 60 * 1000;
+  const cutoff = Date.now() - RECENT_PROJECT_HOURS * 60 * 60 * 1000;
   const prevRecent = recentProjects;
   recentProjects = new Set(
     projects.filter((p) => p.modifiedAt && new Date(p.modifiedAt).getTime() > cutoff).map((p) => p.path),
   );
 
-  renderProjectDropdown(dropdown, projects);
+  renderFilterState();
 
   // recentProjects was empty before — sidebar rendered with __recent__ filter
   // dropping every session. Re-render now that we know which projects qualify.
@@ -8556,28 +8894,6 @@ async function updateProjectDropdown() {
   }
 }
 
-function renderProjectDropdown(dropdown, projects) {
-  const recentSelected = filterProject === '__recent__' ? ' selected' : '';
-  // A hub-pushed project with no session history isn't in /api/projects, so synthesize its
-  // option here rather than in the hub shim — this also survives the SSE re-render below.
-  const list =
-    filterProject && filterProject !== '__recent__' && !projects.some((p) => p.path === filterProject)
-      ? [...projects, { path: filterProject, modifiedAt: null }]
-      : projects;
-  dropdown.innerHTML =
-    '<option value="">All Projects</option>' +
-    `<option value="__recent__"${recentSelected}>Recent (24h)</option>` +
-    list
-      .map((p) => {
-        const name = p.path.split(/[/\\]/).pop();
-        const selected = p.path === filterProject ? ' selected' : '';
-        return `<option value="${escapeHtml(p.path)}"${selected} title="${escapeHtml(p.path)}">${escapeHtml(name)}</option>`;
-      })
-      .join('');
-  // The option list just changed under the select — re-assert tint and header summary.
-  renderFilterState();
-}
-
 function updateThemeColor(isLight) {
   document.querySelectorAll('meta[name="theme-color"]').forEach((m) => {
     m.setAttribute('content', isLight ? '#e8e6e3' : '#101114');
@@ -8993,13 +9309,6 @@ function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
   });
   html += `</div>`;
 
-  if (session.goal?.condition) {
-    html += `<div class="info-goal-card">
-          <div class="info-goal-head"><span class="info-goal-icon">◎</span>Goal</div>
-          <div class="info-goal-text">${escapeHtml(session.goal.condition)}</div>
-        </div>`;
-  }
-
   if (session.contextStatus) {
     html += `<hr style="border: none; border-top: 1px solid var(--border); margin: 12px 0;">`;
     html += renderContextDetail(session.contextStatus);
@@ -9121,14 +9430,7 @@ function openSessionFromInfo(sessionId) {
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function toggleDismissSession(sessionId) {
-  if (dismissedSessionIds.has(sessionId)) {
-    dismissedSessionIds.delete(sessionId);
-  } else {
-    dismissedSessionIds.add(sessionId);
-  }
-  updateDismissBtnState();
-  renderSessions();
-  renderActivityChip();
+  setSessionDismissed(sessionId, !dismissedSessionIds.has(sessionId));
 }
 
 function updateDismissBtnState() {
@@ -9152,47 +9454,67 @@ let spIdx = 0;
 let spPeekTimer = null;
 let spPeekToken = 0;
 let spPeekedId = null;
+let spFromTerminal = false;
+let spRenderedQuery = null;
 // Per-open cache: spSource is frozen while the picker is up, so a fetched log stays valid.
 const spPeekCache = new Map();
 
-// A session outside the sidebar filter has no name to fuzzy-match against, so a full id
-// is read as a request for that exact session and resolved against the server instead.
-// Values: 'pending' while the request is out, then the session or null.
-const spGlobal = new Map();
+// A query also searches session ids and names in every transcript on the server, so a
+// session outside the sidebar filter is found too. Values: 'pending', then the rows.
+const spSearch = new Map();
+let spSearchTimer = null;
 
-async function spResolveGlobal(id) {
-  spGlobal.set(id, 'pending');
-  spGlobal.set(id, await fetchSessionById(id));
-  if (document.getElementById('session-picker-input').value.trim().toLowerCase() === id) renderSessionPicker();
+function spSearchKey(query) {
+  return query.length >= 3 ? query.toLowerCase() : null;
 }
 
-// The row to show for a query nothing in the list matched, as `{ hit, empty }` — one of
-// the two is always null. Starts the lookup when the query is an id not asked about yet.
-function spResolveMiss(query) {
-  if (!SESSION_UUID_RE.test(query)) {
-    return { hit: null, empty: spSource.length ? 'No session matches' : 'No sessions in the current sidebar filter' };
-  }
-  const id = query.toLowerCase();
-  if (!spGlobal.has(id)) spResolveGlobal(id);
-  const found = spGlobal.get(id);
-  if (found === 'pending') return { hit: null, empty: 'Looking up session…' };
-  return found ? { hit: found, empty: null } : { hit: null, empty: 'No session with that id' };
+function spScheduleSearch(key) {
+  clearTimeout(spSearchTimer);
+  spSearchTimer = setTimeout(async () => {
+    spSearch.set(key, 'pending');
+    let ids = [];
+    try {
+      const r = await fetch(`/api/sessions/search?q=${encodeURIComponent(key)}`);
+      if (r.ok) ids = await r.json();
+    } catch (_) {}
+    spSearch.set(key, ids.length ? await fetchSessionsByIds(ids) : []);
+    renderSessionPicker();
+  }, 100);
+}
+
+// The server rows not already matched in the sidebar list, and whether a search is still out.
+function spSearchRows(key, localRows) {
+  if (!key) return { rows: [], pending: false };
+  const found = spSearch.get(key);
+  if (!found) spScheduleSearch(key);
+  if (!Array.isArray(found)) return { rows: [], pending: true };
+  const seen = new Set(localRows.map((s) => s.id));
+  return { rows: found.filter((s) => !seen.has(s.id)), pending: false };
 }
 
 function openSessionPicker() {
+  spFromTerminal = terminalPaneFocused();
   const input = document.getElementById('session-picker-input');
   input.value = '';
   spSource = getFilteredSessions().sort((a, b) => Date.parse(b.modifiedAt) - Date.parse(a.modifiedAt));
   spPeekCache.clear();
-  spGlobal.clear();
+  spSearch.clear();
+  spRenderedQuery = null;
   document.getElementById('session-picker-modal').classList.add('visible');
   renderSessionPicker();
   input.focus();
 }
 
-function closeSessionPicker() {
+// refocus: false when a session is being opened, which moves the terminal focus itself.
+function closeSessionPicker({ refocus = true } = {}) {
   spSetPeeking(false);
   hideModalOverlay('session-picker-modal');
+  if (refocus && spFromTerminal && wantsTerminal()) focusTerminalPane();
+}
+
+function toggleSessionPicker() {
+  if (document.getElementById('session-picker-modal').classList.contains('visible')) closeSessionPicker();
+  else openSessionPicker();
 }
 
 function spIsPeeking() {
@@ -9274,21 +9596,30 @@ function spDotHtml(session) {
 function renderSessionPicker() {
   const list = document.getElementById('session-picker-list');
   const query = document.getElementById('session-picker-input').value.trim();
-  spRows = spSource.filter((s) => spMatches(s, query));
+  // Search rows that arrive for the same query append below, so the cursor stays on its row.
+  const selectedId = query === spRenderedQuery ? spRows[spIdx]?.id : null;
+  spRenderedQuery = query;
+  const key = spSearchKey(query);
+  const local = spSource.filter((s) => spMatches(s, query));
+  const found = spSearchRows(key, local);
+  spRows = [...local, ...found.rows];
   if (!spRows.length) {
-    const { hit, empty } = spResolveMiss(query);
-    if (hit) spRows = [hit];
-    else {
-      spIdx = -1;
-      list.innerHTML = `<div class="sp-empty">${empty}</div>`;
-      return;
-    }
+    spIdx = -1;
+    const empty = found.pending
+      ? 'Searching all sessions…'
+      : spSource.length || key
+        ? 'No session matches'
+        : 'No sessions in the current sidebar filter';
+    list.innerHTML = `<div class="sp-empty">${empty}</div>`;
+    return;
   }
 
+  // Rows past the sidebar list come from the server search and show their full project path.
   list.innerHTML = spRows
     .map((s, i) => {
-      const project = s.project ? s.project.split(/[/\\]/).pop() : '';
-      return `<button class="sp-row${s.id === currentSessionId ? ' current' : ''}" data-idx="${i}" title="${escapeHtml(s.id)}">
+      const outside = i >= local.length;
+      const project = s.project ? (outside ? s.project : pathBasename(s.project)) : '';
+      return `<button class="sp-row${s.id === currentSessionId ? ' current' : ''}${outside ? ' outside' : ''}" data-idx="${i}" title="${escapeHtml(s.project ? `${s.id}\n${s.project}` : s.id)}">
         ${spDotHtml(s)}
         <span class="sp-name">${escapeHtml(sessionDisplayName(s))}</span>
         <span class="sp-project">${escapeHtml(project)}</span>
@@ -9298,7 +9629,8 @@ function renderSessionPicker() {
       </button>`;
     })
     .join('');
-  spSelect(0);
+  const keep = spRows.findIndex((s) => s.id === selectedId);
+  spSelect(Math.max(0, keep));
 }
 
 function spSelect(idx) {
@@ -9314,7 +9646,8 @@ function spSelect(idx) {
 async function spOpen(idx) {
   const session = spRows[idx];
   if (!session) return;
-  closeSessionPicker();
+  closeSessionPicker({ refocus: false });
+  if (spFromTerminal) termState.focusNext = true;
   await revealSession(session.id);
 }
 
@@ -9325,7 +9658,7 @@ function initSessionPicker() {
   input.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') closeSessionPicker();
     else if (matchKey(e, 'ArrowDown') || (e.ctrlKey && e.key === 'n')) spSelect(spIdx + 1);
-    else if (matchKey(e, 'ArrowUp') || (e.ctrlKey && e.key === 'p')) spSelect(spIdx - 1);
+    else if (matchKey(e, 'ArrowUp') || (e.ctrlKey && !e.shiftKey && e.key === 'p')) spSelect(spIdx - 1);
     else if (e.key === 'Enter') spOpen(spIdx);
     else if (e.ctrlKey && e.code === 'Space') spSetPeeking(!spIsPeeking());
     else return;
@@ -9455,16 +9788,6 @@ function renderLoopModalBody(data) {
   body.innerHTML = section('Wakeups', wakeups, 'wakeup') + section('Cron jobs', crons, 'cron');
 }
 
-function renderGoalSubtitle(session) {
-  const g = session.goal;
-  if (!g?.condition) return '';
-  const short = g.condition.length > 70 ? `${g.condition.slice(0, 70)}…` : g.condition;
-  // Only active (unmet) goals reach here — a met goal auto-clears. Clicking
-  // opens the info modal (full text); stopPropagation so it doesn't also
-  // trigger the card's fetchTasks.
-  return `<div class="session-goal" onclick="event.stopPropagation(); showSessionInfoModal('${escAttrJs(session.id)}')" title="${escapeHtml(g.condition)}"><span class="session-goal-icon">◎</span><span class="session-goal-text">${escapeHtml(short)}</span></div>`;
-}
-
 function renderLoopBadge(session) {
   const li = session.loopInfo;
   const total = (li?.wakeupCount || 0) + (li?.cronCount || 0);
@@ -9944,6 +10267,9 @@ const TERMINAL_TOKEN_RE = /^[0-9a-f]{64}$/;
 // Swap to the previous session.
 const CCK_CTRL_ALT_KEYS = new Set(['KeyN', 'KeyR', 'KeyS']);
 const TERMINAL_MODES_KEY = 'terminal-sessions';
+const TERMINAL_FONT_KEY = 'terminal-font-size';
+const TERMINAL_FONT_MIN = 8;
+const TERMINAL_FONT_MAX = 32;
 const ACK_BATCH_BYTES = 32 * 1024;
 const TERMINAL_RETRY_MS = [500, 1000, 2000, 4000, 8000];
 const TERMINAL_STABLE_MS = 5000;
@@ -10056,9 +10382,24 @@ function terminalPaneFocused() {
   return document.getElementById('terminal-pane').contains(document.activeElement);
 }
 
+const TEXT_FIELD_SELECTOR = 'input, textarea, select, [contenteditable]';
+
 function terminalShortcut(e) {
   const ctrlAlt = e.ctrlKey && e.altKey && !e.shiftKey && !e.metaKey;
+  const ctrlShift = e.ctrlKey && e.shiftKey && !e.altKey && !e.metaKey;
+  // Ctrl+_ is Claude Code's undo, so the zoom keys leave it to the terminal.
+  const zoom = e.key === '_' ? undefined : zoomDelta(e);
+  if (zoom !== undefined && termState.term && terminalPaneFocused()) {
+    return () => adjustTerminalFontSize(Math.sign(zoom));
+  }
   if (ctrlAlt && e.code === 'KeyS') return swapToPreviousSession;
+  // Cancelling the default also stops Chrome's system print dialog, which this page has no use for.
+  if (ctrlShift && e.code === 'KeyP') return toggleSessionPicker;
+  // Ctrl+Shift+Z is redo in a text field, so only the terminal's own textarea gives it up.
+  if (ctrlShift && e.code === 'KeyZ') {
+    const field = e.target?.closest?.(TEXT_FIELD_SELECTOR);
+    return field && !document.getElementById('terminal-pane').contains(field) ? null : toggleZenMode;
+  }
   if (ctrlAlt && (e.code === 'KeyN' || e.code === 'KeyR') && terminalAvailable()) {
     return () => openNewSession(null, e.code === 'KeyR');
   }
@@ -10073,6 +10414,22 @@ function terminalShortcut(e) {
   return null;
 }
 
+function readSwapPair() {
+  try {
+    const pair = JSON.parse(store.getItem(SWAP_KEY));
+    if (Array.isArray(pair) && pair.length === 2) return pair;
+  } catch {}
+  return [null, null];
+}
+
+function setSwapPair(last, previous) {
+  lastSessionId = last;
+  previousSessionId = previous;
+  try {
+    store.setItem(SWAP_KEY, JSON.stringify([last, previous]));
+  } catch {}
+}
+
 function swapToPreviousSession() {
   const target = currentSessionId === lastSessionId ? previousSessionId : lastSessionId;
   if (!target || target === currentSessionId) return;
@@ -10100,7 +10457,10 @@ function syncTerminal() {
   if (view !== termState.syncedView) {
     termState.syncedView = view;
     // The terminal shows the same conversation, so the log panel only takes width; it comes back when the terminal goes.
-    if (on && messagePanelOpen) {
+    if (on && logAutoOpened) {
+      setMessagePanelVisible(false);
+      logAutoOpened = false;
+    } else if (on && messagePanelOpen) {
       toggleMessagePanel();
       termState.panelHidden = true;
     } else if (!on && arrived && termState.panelHidden) toggleMessagePanel();
@@ -10129,6 +10489,7 @@ function syncTerminal() {
 
 // Only paths the user drives call this; restores, deep links and refreshes call fetchTasks, so they never take focus.
 function openSession(sessionId) {
+  setSessionDismissed(sessionId, false);
   const alreadyOpen = sessionId === currentSessionId && viewMode === 'session' && termState.shown;
   if (!alreadyOpen) termState.openedByUser = sessionId;
   else if (termState.attached && promptAwaitsUser(sessionId)) focusTerminalPane();
@@ -10148,7 +10509,7 @@ function takeTerminalFocus(sessionId) {
 // The terminal attaches asynchronously; by then the user may be typing elsewhere or reading a modal.
 function promptAwaitsUser(sessionId) {
   if (!sessions.find((s) => s.id === sessionId)?.hasWaitingForUser || isAnyModalOpen()) return false;
-  return !document.activeElement?.matches('input, textarea, select, [contenteditable]');
+  return !document.activeElement?.matches(TEXT_FIELD_SELECTOR);
 }
 
 function onTerminalShown(focus = true) {
@@ -10249,9 +10610,10 @@ function ensureTerm() {
   const host = document.getElementById('terminal-host');
   const fontFamily =
     cfg.fontFamily || getComputedStyle(document.body).getPropertyValue('--font-mono').trim() || 'monospace';
+  const fontSize = terminalFontSize();
   const term = new window.Terminal({
     fontFamily,
-    fontSize: cfg.fontSize,
+    fontSize,
     scrollback: cfg.scrollback,
     cursorBlink: true,
     allowProposedApi: true,
@@ -10275,7 +10637,7 @@ function ensureTerm() {
     // No WebGL: xterm falls back to its DOM renderer.
   }
   document.fonts
-    ?.load(`${cfg.fontSize}px ${fontFamily}`)
+    ?.load(`${fontSize}px ${fontFamily}`)
     .then(repaintTerminal)
     .catch(() => {});
   term.attachCustomKeyEventHandler(terminalKeyFilter);
@@ -10355,6 +10717,27 @@ function fitTerminal() {
   } catch (_) {}
 }
 
+function clampTerminalFont(v) {
+  return Math.min(TERMINAL_FONT_MAX, Math.max(TERMINAL_FONT_MIN, v));
+}
+
+function terminalFontSize() {
+  const saved = Number.parseInt(store.getItem(TERMINAL_FONT_KEY), 10);
+  return saved ? clampTerminalFont(saved) : appConfig.terminal.fontSize;
+}
+
+function adjustTerminalFontSize(step) {
+  const term = termState.term;
+  const size = step === 0 ? appConfig.terminal.fontSize : clampTerminalFont(term.options.fontSize + step);
+  if (size !== term.options.fontSize) {
+    if (step === 0) store.removeItem(TERMINAL_FONT_KEY);
+    else store.setItem(TERMINAL_FONT_KEY, String(size));
+    term.options.fontSize = size;
+    fitTerminal();
+  }
+  showToast(`Terminal ${size}px`);
+}
+
 function terminalSend(msg) {
   if (termState.ws?.readyState === WebSocket.OPEN) termState.ws.send(JSON.stringify(msg));
 }
@@ -10562,8 +10945,8 @@ function terminalOpenMode(sessionId) {
 // replays the same screen, and the placeholder gives way to the real card.
 function adoptPickedSession(oldId, id) {
   const focused = terminalPaneFocused();
-  if (lastSessionId === oldId) lastSessionId = id;
-  if (previousSessionId === oldId) previousSessionId = id;
+  const adopt = (x) => (x === oldId ? id : x);
+  setSwapPair(adopt(lastSessionId), adopt(previousSessionId));
   setTerminalMode(id, true);
   forgetPlaceholder(oldId);
   if (currentSessionId !== oldId || viewMode !== 'session') return renderSessions();
@@ -10842,7 +11225,7 @@ async function onDispatchUpdate() {
 // With no first message there is no transcript, so an ended placeholder leaves nothing to come back to.
 function dropPlaceholder(id) {
   if (!forgetPlaceholder(id)) return;
-  if (currentSessionId === id && viewMode === 'session') showAllTasks();
+  if (currentSessionId === id && viewMode === 'session') showNoSession();
   else renderSessions();
 }
 
@@ -10852,8 +11235,8 @@ function forgetPlaceholder(id) {
   // Before the socket's close handler runs, or it would reconnect and start the session again.
   if (termState.sessionId === id) detachTerminal();
   sessions = sessions.filter((s) => s.id !== id);
-  if (previousSessionId === id) previousSessionId = null;
-  if (lastSessionId === id) lastSessionId = null;
+  const forget = (x) => (x === id ? null : x);
+  setSwapPair(forget(lastSessionId), forget(previousSessionId));
   return true;
 }
 
@@ -11233,19 +11616,16 @@ document.addEventListener('DOMContentLoaded', () => {
     marked.use({ renderer });
   }
 
-  if (typeof mermaid !== 'undefined') {
-    mermaid.initialize({ startOnLoad: false, theme: getMermaidTheme() });
-    let mermaidPending = false;
-    const mo = new MutationObserver(() => {
-      if (mermaidPending) return;
-      mermaidPending = true;
-      queueMicrotask(() => {
-        mermaidPending = false;
-        initMermaidBlocks();
-      });
+  let mermaidPending = false;
+  const mo = new MutationObserver(() => {
+    if (mermaidPending) return;
+    mermaidPending = true;
+    queueMicrotask(() => {
+      mermaidPending = false;
+      initMermaidBlocks();
     });
-    mo.observe(document.body, { childList: true, subtree: true });
-  }
+  });
+  mo.observe(document.body, { childList: true, subtree: true });
 });
 
 loadSidebarState();
@@ -11269,6 +11649,7 @@ initModalResize();
 loadPanelWidths();
 initPanelResize('detail-panel', 'detail-panel-resize', '--detail-panel-width', 'detail-panel-width');
 initPanelResize('message-panel', 'message-panel-resize', '--message-panel-width', 'message-panel-width');
+initMessagePanelFull();
 
 const msgContentEl = document.getElementById('message-panel-content');
 const jumpLatestBtn = document.createElement('button');
@@ -11305,7 +11686,7 @@ msgContentEl.addEventListener('wheel', function (e) {
   }
 });
 
-const footerState = { version: null, limitsKey: null, timer: null };
+const footerState = { version: null, plugin: null, limitsKey: null, timer: null };
 function formatResetIn(epochSec) {
   if (!epochSec) return null;
   const ms = epochSec * 1000 - Date.now();
@@ -11351,12 +11732,45 @@ function renderSidebarFooter(rateLimits) {
   const children = [];
   if (footerState.version) {
     const v = document.createElement('span');
+    v.className = 'footer-version';
     v.textContent = `v${footerState.version}`;
+    const warn = pluginWarning(footerState.plugin);
+    if (warn) v.append(warn);
     children.push(v);
   }
   if (fh != null || sd != null) children.push(makeLimitSpan(rateLimits));
   el.replaceChildren(...children);
 }
+function pluginWarning(plugin) {
+  const problem =
+    plugin &&
+    {
+      missing: 'The claude-code-kanban plugin is not installed',
+      disabled: `The claude-code-kanban plugin ${plugin.installed} is disabled`,
+      mismatch: `Plugin ${plugin.installed} is installed, this board ships ${plugin.bundled}`,
+    }[plugin.state];
+  if (!problem) return null;
+  const fix =
+    plugin.state === 'disabled'
+      ? 'Enable it with /plugin in Claude Code.'
+      : `Click to copy: ${plugin.installCommand}\nThen restart open sessions, they keep the old hooks.`;
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.className = 'footer-plugin-warning';
+  btn.textContent = '⚠';
+  btn.title = `${problem} (${plugin.configDir}).\n${fix}`;
+  btn.setAttribute('aria-label', problem);
+  if (plugin.state !== 'disabled') {
+    btn.addEventListener('click', () =>
+      navigator.clipboard
+        .writeText(plugin.installCommand)
+        .then(() => showToast('Install command copied', 'success'))
+        .catch(() => showToast('Could not copy the command', 'error')),
+    );
+  }
+  return btn;
+}
+
 function refreshRateLimits() {
   if (footerState.timer) return;
   footerState.timer = setTimeout(() => {
@@ -11383,6 +11797,7 @@ fetch('/api/version')
   .then((r) => r.json())
   .then((d) => {
     footerState.version = d.version;
+    footerState.plugin = d.plugin ?? null;
     renderSidebarFooter(null);
     refreshRateLimits();
   })
@@ -11391,7 +11806,6 @@ fetch('/api/version')
 const urlState = getUrlState();
 const lastView = loadLastView();
 sessionFilter = urlState.filter || FILTER_DEFAULTS.session;
-sessionLimit = urlState.limit || FILTER_DEFAULTS.limit;
 // The URL wins; the persisted view only fills in when it carries a project key, so 'all' (null)
 // restores as 'all' and pre-existing blobs without the key still default to '__recent__'.
 filterProject = urlState.project || (lastView && 'project' in lastView ? lastView.project : FILTER_DEFAULTS.project);
@@ -11436,27 +11850,26 @@ Promise.all([
       try {
         await fetchProjectView(atob(urlState.projectView));
       } catch (_) {
-        showAllTasks();
+        showNoSession();
       }
     } else if (urlState.session) {
       await fetchTasks(urlState.session);
-    } else if (urlState.view === 'all') {
-      showAllTasks();
     } else {
       const last = loadLastView();
       if (last?.view === 'project' && last.projectPath && sessions.some((s) => s.project === last.projectPath)) {
         try {
           await fetchProjectView(last.projectPath);
         } catch (_) {
-          showAllTasks();
+          showNoSession();
         }
       } else if (last?.view === 'session' && last.session && sessions.some((s) => s.id === last.session)) {
         await fetchTasks(last.session);
       } else {
-        showAllTasks();
+        showNoSession();
       }
     }
     if (urlState.messages && currentSessionId) {
+      if (logAutoOpened) setMessagePanelVisible(false);
       toggleMessagePanel();
       // Re-render after panel layout settles so scroll dimensions are correct
       requestAnimationFrame(() => {
@@ -11472,7 +11885,7 @@ Promise.all([
 window.addEventListener('popstate', () => {
   const s = getUrlState();
   sessionFilter = s.filter || FILTER_DEFAULTS.session;
-  sessionLimit = s.limit || FILTER_DEFAULTS.limit;
+  resetSessionPage();
   filterProject = s.project || FILTER_DEFAULTS.project;
   ownerFilter = s.owner || '';
   searchQuery = s.search || '';
@@ -11484,10 +11897,10 @@ window.addEventListener('popstate', () => {
     try {
       fetchProjectView(atob(s.projectView));
     } catch (_) {
-      showAllTasks();
+      showNoSession();
     }
   } else if (s.session) fetchTasks(s.session);
-  else showAllTasks();
+  else showNoSession();
   if (s.messages !== messagePanelOpen) toggleMessagePanel();
 });
 //#endregion
@@ -11498,6 +11911,7 @@ window.addEventListener('popstate', () => {
 // these tests only decide whether a press is the hub's to handle.
 function isHubKey(e) {
   if (!window.__HUB__?.enabled) return false;
+  if (hubKeys) return hubKeys.has(hubCombo(e));
   if (e.ctrlKey && e.altKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) return true;
   // Own branch: the Alt+digit case below requires !ctrlKey. The hub owns the Ctrl+Alt+letter
   // keymap and ignores unbound letters.
@@ -11514,6 +11928,19 @@ function isHubKey(e) {
   return e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey && (/^[1-9]$/.test(e.key) || /^Digit[1-9]$/.test(e.code));
 }
 
+// The combos the hub binds, from its hub:keys message. Null until one arrives: a hub from before
+// hub:keys sends none, and the fallback filter above is what such a hub expects.
+let hubKeys = null;
+
+// A copy of the hub's comboOf(): its names must match the hub:keys list.
+function hubCombo(e) {
+  const lower = (e.key || '').toLowerCase();
+  const m = /^(?:Key|Digit)([A-Z1-9])$/.exec(e.code || '');
+  const key = /^[a-z1-9]$/.test(lower) ? lower : m ? m[1].toLowerCase() : e.key;
+  const mods = [e.ctrlKey && 'ctrl', e.altKey && 'alt', e.shiftKey && 'shift', e.metaKey && 'meta'];
+  return [...mods, key].filter(Boolean).join('+');
+}
+
 document.addEventListener('keydown', (e) => {
   if (!isHubKey(e)) return;
   e.preventDefault();
@@ -11539,6 +11966,13 @@ document.addEventListener('click', (e) => {
   hubPost({ type: 'hub:openExternal', url: url.href });
 });
 
+// The click handler above only catches anchors. A script open goes the same way, because
+// in the hub's installed PWA window a framed app's own `_blank` open does nothing.
+function openExternal(url) {
+  if (window.__HUB__?.enabled) hubPost({ type: 'hub:openExternal', url });
+  else window.open(url, '_blank', 'noopener');
+}
+
 window.hubNavigate = function hubNavigate(app, url) {
   if (!window.__HUB__?.enabled) return;
   hubPost({ type: 'hub:navigate', app, url });
@@ -11586,6 +12020,14 @@ function hubPost(message) {
   });
 })();
 
+(function initHubKeys() {
+  window.addEventListener('message', (e) => {
+    if (e.source !== window.parent || e.origin !== hubOrigin()) return;
+    if (e.data?.type !== 'hub:keys' || !Array.isArray(e.data.keys)) return;
+    hubKeys = new Set(e.data.keys.filter((k) => typeof k === 'string'));
+  });
+})();
+
 (function initHubProject() {
   window.addEventListener('message', (e) => {
     if (e.source !== window.parent || e.origin !== hubOrigin()) return;
@@ -11593,7 +12035,6 @@ function hubPost(message) {
     const dirPath = e.data.project;
     if (typeof dirPath !== 'string' || !dirPath || dirPath === filterProject) return;
     filterByProject(dirPath);
-    updateProjectDropdown();
   });
 })();
 // #endregion HUB_INTEGRATION