claude-code-kanban 7.4.0 → 7.5.0

package/public/app.js

@@ -2,23 +2,69 @@
 // Set by the server in index.html: null for the default Claude dir, a per-dir prefix otherwise.
 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 THEME_KEY = 'theme';
+const COLOR_THEME_KEY = 'color-theme';
+const GLOBAL_KEYS = new Set([THEME_KEY, COLOR_THEME_KEY]);
+// localStorage names are kept as they are: renaming one drops what users saved under it.
+const MESSAGE_PANEL_OPEN_KEY = 'message-panel-open';
+const MESSAGE_PANEL_FULL_KEY = 'message-panel-full';
+const ACTIVITY_FILTER_KEY = 'activityFilter';
+const COLLAPSED_GROUPS_KEY = 'collapsedGroups';
+const PINNED_SESSIONS_KEY = 'pinned-sessions';
+const STICKY_SESSIONS_KEY = 'sticky-sessions';
+const GROUP_PINNED_KEY = 'groupPinnedSessions';
+const SIDEBAR_COLLAPSED_KEY = 'sidebar-collapsed';
+const SIDEBAR_WIDTH_KEY = 'sidebar-width';
+const PINNED_MESSAGES_PREFIX = 'pinned-messages-';
+const pinsKey = (sessionId) => PINNED_MESSAGES_PREFIX + sessionId;
+const modalFullscreenKey = (modalId) => `modal-fullscreen-${modalId}`;
+const sectionCollapsedKey = (containerId) => `${containerId}Collapsed`;
+const panelWidthKey = (panelId) => `${panelId}-width`;
 const nsKey = (k) => (GLOBAL_KEYS.has(k) ? k : STORAGE_NS + k);
 const { normalizeProjectPath, isExactProjectPath, isExactProjectFilter, projectMatcher, sessionProjectKey } =
   projectMatch;
-const store = {
-  keys() {
-    const out = [];
-    for (let i = 0; i < localStorage.length; i++) {
-      const k = localStorage.key(i);
-      if (k.startsWith(STORAGE_NS)) out.push(k.slice(STORAGE_NS.length));
-    }
-    return out;
-  },
-  getItem: (k) => localStorage.getItem(nsKey(k)),
-  setItem: (k, v) => localStorage.setItem(nsKey(k), v),
-  removeItem: (k) => localStorage.removeItem(nsKey(k)),
-};
+// Storage throws when the browser blocks site data or the quota is full. Saved UI state is
+// optional, so a failed read gives null and a failed write returns false.
+function namespacedStorage(area) {
+  const attempt = (fn, fallback) => {
+    try {
+      return fn(window[area]);
+    } catch {
+      return fallback;
+    }
+  };
+  return {
+    keys: () =>
+      attempt((s) => {
+        const out = [];
+        for (let i = 0; i < s.length; i++) {
+          const k = s.key(i);
+          if (k.startsWith(STORAGE_NS)) out.push(k.slice(STORAGE_NS.length));
+        }
+        return out;
+      }, []),
+    getItem: (k) => attempt((s) => s.getItem(nsKey(k)), null),
+    setItem: (k, v) =>
+      attempt((s) => {
+        s.setItem(nsKey(k), v);
+        return true;
+      }, false),
+    removeItem: (k) => attempt((s) => s.removeItem(nsKey(k))),
+    readJson(k, fallback = null) {
+      try {
+        return JSON.parse(this.getItem(k)) ?? fallback;
+      } catch {
+        return fallback;
+      }
+    },
+    writeJson(k, v) {
+      return this.setItem(k, JSON.stringify(v));
+    },
+  };
+}
+const store = namespacedStorage('localStorage');
+// Every config dir's board is served on the hub's one kanban origin, so sessionStorage is shared.
+const tabStore = namespacedStorage('sessionStorage');
 
 // 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.
@@ -118,28 +164,19 @@ 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();
-  }
+  const saved = store.readJson(DISMISSED_KEY, {});
+  return new Map(Object.entries(saved).filter(([, at]) => isDismissFresh(at)));
 }
 
 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',
-      );
-    }
+  // The map still works in memory, so only the next reload is affected. Say so once.
+  if (!store.writeJson(DISMISSED_KEY, Object.fromEntries(dismissedSessionIds)) && !dismissSaveWarned) {
+    dismissSaveWarned = true;
+    showToast(
+      'Could not save to browser storage: dismissed sessions come back on reload. If storage is full, Storage → Clean Orphaned frees space.',
+      'error',
+    );
   }
 }
 
@@ -158,7 +195,7 @@ function resetMessageScrollState() {
   msgUserScrolledUp = false;
   msgHasMore = false;
   msgLoadingMore = false;
-  currentMessages = [];
+  setCurrentMessages([]);
   lastMessagesHash = '';
   const btn = document.getElementById('msg-jump-latest');
   if (btn) btn.style.display = 'none';
@@ -172,7 +209,9 @@ function getUrlState() {
     project: params.get('project'),
     owner: params.get('owner'),
     search: params.get('search'),
-    messages: params.has('messages') ? params.get('messages') === '1' : store.getItem('message-panel-open') === 'true',
+    messages: params.has('messages')
+      ? params.get('messages') === '1'
+      : store.getItem(MESSAGE_PANEL_OPEN_KEY) === 'true',
     projectView: params.get('projectView'),
   };
 }
@@ -196,32 +235,23 @@ function updateUrl() {
 
 const LAST_VIEW_KEY = 'lastView';
 function persistLastView() {
-  try {
-    const data = {
-      view: viewMode,
-      session: currentSessionId,
-      projectPath: viewMode === 'project' ? currentProjectPath : null,
-      // The project filter also lives in the URL, but the hub recreates each iframe at the app's
-      // base URL on reload, so the query string alone doesn't survive a hub refresh.
-      project: filterProject,
-    };
-    store.setItem(LAST_VIEW_KEY, JSON.stringify(data));
-  } catch (_) {}
+  store.writeJson(LAST_VIEW_KEY, {
+    view: viewMode,
+    session: currentSessionId,
+    projectPath: viewMode === 'project' ? currentProjectPath : null,
+    // The project filter also lives in the URL, but the hub recreates each iframe at the app's
+    // base URL on reload, so the query string alone doesn't survive a hub refresh.
+    project: filterProject,
+  });
 }
 function loadLastView() {
-  try {
-    return JSON.parse(store.getItem(LAST_VIEW_KEY)) || null;
-  } catch (_) {
-    return null;
-  }
+  return store.readJson(LAST_VIEW_KEY);
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function resetState() {
   history.replaceState(null, '', window.location.pathname);
-  try {
-    store.removeItem(LAST_VIEW_KEY);
-  } catch (_) {}
+  store.removeItem(LAST_VIEW_KEY);
   sessionFilter = FILTER_DEFAULTS.session;
   sessionLimit = SESSION_PAGE;
   filterProject = FILTER_DEFAULTS.project;
@@ -267,31 +297,52 @@ let lastTasksHash = '';
 //#endregion
 
 //#region DATA_FETCHING
+function apiPath(strings, ...values) {
+  return strings.reduce((out, s, i) => out + encodeURIComponent(values[i - 1]) + s);
+}
+
+function api(path, { method, body, query, headers, cache } = {}) {
+  const qs = query ? new URLSearchParams(Object.entries(query).filter(([, v]) => v != null)).toString() : '';
+  const json = body != null;
+  return fetch(qs ? `${path}?${qs}` : path, {
+    method,
+    cache,
+    headers: json ? { 'Content-Type': 'application/json', ...headers } : headers,
+    body: json ? JSON.stringify(body) : undefined,
+  });
+}
+
+async function getJson(path, fallback = null, opts) {
+  try {
+    const res = await api(path, opts);
+    return res.ok ? await res.json() : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
 async function fetchSessions(includeTasks = true, focusId = currentSessionId) {
   try {
     const allPinnedIds = new Set([...pinnedSessionIds, ...stickySessionIds]);
     if (revealedPlanSessionId) allPinnedIds.add(revealedPlanSessionId);
     if (revealedStorageSessionId) allPinnedIds.add(revealedStorageSessionId);
-    const pinnedParam = allPinnedIds.size > 0 ? `&pinned=${[...allPinnedIds].join(',')}` : '';
-    // The focused session must come back whatever the filters say: renderSession and the
-    // info modal both look it up in `sessions` and bail when it is absent, so a session
-    // opened from outside the current filter would leave the view on the previous one.
-    const includeParam = focusId ? `&include=${encodeURIComponent(focusId)}` : '';
-    const projectParam =
-      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) => {
-      sessionsHasMore = r.headers.get('X-Has-More') === 'true';
-      return r.json();
+    const recent = filterProject === '__recent__';
+    const res = await api('/api/sessions', {
+      query: {
+        limit: sessionLimit,
+        pinned: allPinnedIds.size > 0 ? [...allPinnedIds].join(',') : null,
+        // The focused session must come back whatever the filters say: renderSession and the
+        // info modal both look it up in `sessions` and bail when it is absent, so a session
+        // opened from outside the current filter would leave the view on the previous one.
+        include: focusId || null,
+        recentHours: recent ? RECENT_PROJECT_HOURS : null,
+        project: !recent && filterProject ? filterProject : null,
+        filter: sessionFilter === 'active' ? 'active' : null,
+      },
     });
-
-    const newSessions = await sessionsPromise;
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    sessionsHasMore = res.headers.get('X-Has-More') === 'true';
+    const newSessions = await res.json();
     const sessionsHash = JSON.stringify(newSessions);
     if (sessionsHash !== lastSessionsHash) {
       lastSessionsHash = sessionsHash;
@@ -316,9 +367,7 @@ function markSessionRead(sessionId) {
   if (!session?.unread) return;
   session.unread = false;
   document.querySelector(`.session-item[data-session-id="${CSS.escape(sessionId)}"]`)?.classList.remove('unread');
-  fetch(`/api/sessions/${encodeURIComponent(sessionId)}/read`, { method: 'POST' }).catch((e) =>
-    console.error('[markSessionRead]', e),
-  );
+  api(apiPath`/api/sessions/${sessionId}/read`, { method: 'POST' }).catch((e) => console.error('[markSessionRead]', e));
 }
 
 function markOpenSessionRead() {
@@ -326,7 +375,8 @@ function markOpenSessionRead() {
 }
 
 async function loadSearchTasks() {
-  const newTasks = await fetch('/api/tasks/all').then((r) => r.json());
+  const newTasks = await getJson('/api/tasks/all');
+  if (!newTasks) return;
   const tasksHash = JSON.stringify(newTasks);
   if (tasksHash === lastTasksHash) return;
   lastTasksHash = tasksHash;
@@ -360,14 +410,9 @@ 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 [];
-  }
+  const rows = await getJson('/api/sessions', [], { query: { limit: 1, include: ids.join(',') } });
+  const byId = new Map(rows.map((s) => [s.id, s]));
+  return ids.map((id) => byId.get(id)).filter(Boolean);
 }
 
 async function fetchSessionById(id) {
@@ -401,11 +446,7 @@ function sessionSearch(onFound) {
   let found = null;
   let timer = null;
   const run = async (key) => {
-    let ids = [];
-    try {
-      const r = await fetch(`/api/sessions/search?q=${encodeURIComponent(key)}`);
-      if (r.ok) ids = await r.json();
-    } catch (_) {}
+    const ids = await getJson('/api/sessions/search', [], { query: { q: key } });
     if (key !== current) return;
     const rows = ids.length ? await fetchSessionsByIds(ids) : [];
     if (key !== current) return;
@@ -492,13 +533,14 @@ function fuzzyMatch(text, query) {
 
 //#endregion
 
+//#region SESSION_ACTIVITY
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function toggleSection(containerId, chevronId) {
   const container = document.getElementById(containerId);
   const chevron = document.getElementById(chevronId);
   const collapsed = container.classList.toggle('collapsed');
   chevron.classList.toggle('rotated', collapsed);
-  store.setItem(`${containerId}Collapsed`, collapsed);
+  store.setItem(sectionCollapsedKey(containerId), collapsed);
 }
 
 function isWaitingSession(s) {
@@ -635,7 +677,7 @@ function setActivityFilter(kind) {
   } else {
     toggleActivityKind(kind);
   }
-  store.setItem('activityFilter', JSON.stringify([...activityFilter]));
+  store.writeJson(ACTIVITY_FILTER_KEY, [...activityFilter]);
   // active/waiting only make sense with the active session filter on
   const targetFilter = activityFilter.size > 0 ? 'active' : sessionFilter;
   if (targetFilter !== sessionFilter) {
@@ -658,7 +700,7 @@ async function fetchTasks(sessionId) {
       openTerminal(sessionId, terminalOpenMode(sessionId));
     viewMode = 'session';
     document.getElementById('message-toggle')?.style.removeProperty('display');
-    const res = await fetch(`/api/sessions/${sessionId}`);
+    const res = await api(apiPath`/api/sessions/${sessionId}`);
 
     if (!res.ok) throw new Error(`Failed to fetch tasks: ${res.status}`);
     const newTasks = await res.json();
@@ -710,14 +752,16 @@ async function fetchTasks(sessionId) {
     renderSession();
   }
 }
+//#endregion
 
-// #region TIMINGS
+//#region TIMINGS
 const WAITING_TTL_MS = 30 * 60 * 1000;
 const AGENT_LOG_MAX = 8;
 const LIVE_INDICATOR_MS = 10 * 1000;
 const JUST_NOW_MS = 60 * 1000;
-// #endregion
+//#endregion
 
+//#region AGENT_FETCHING
 function resetAgentState() {
   currentAgents = [];
   currentWaiting = null;
@@ -728,7 +772,7 @@ function resetAgentState() {
 
 async function fetchAgents(sessionId) {
   try {
-    const res = await fetch(`/api/sessions/${sessionId}/agents`);
+    const res = await api(apiPath`/api/sessions/${sessionId}/agents`);
     if (!res.ok) {
       resetAgentState();
       return;
@@ -760,7 +804,7 @@ async function fetchProjectView(projectPath) {
   viewMode = 'project';
   currentProjectPath = projectPath;
   currentSessionId = null;
-  currentMessages = [];
+  setCurrentMessages([]);
   lastMessagesHash = '';
   if (messagePanelOpen) toggleMessagePanel();
   document.getElementById('message-toggle')?.style.setProperty('display', 'none');
@@ -774,19 +818,8 @@ async function fetchProjectView(projectPath) {
 
   const encoded = btoa(projectPath);
   const [tasksResult, agentResults] = await Promise.all([
-    fetch(`/api/projects/${encodeURIComponent(encoded)}/tasks`)
-      .then((r) => r.json())
-      .catch((e) => {
-        console.error('[fetchProjectView] tasks:', e);
-        return [];
-      }),
-    Promise.all(
-      activeSessionIds.map((id) =>
-        fetch(`/api/sessions/${id}/agents`)
-          .then((r) => r.json())
-          .catch(() => ({ agents: [] })),
-      ),
-    ),
+    getJson(apiPath`/api/projects/${encoded}/tasks`, []),
+    Promise.all(activeSessionIds.map((id) => getJson(apiPath`/api/sessions/${id}/agents`, { agents: [] }))),
   ]);
   currentTasks = tasksResult;
   const seen = new Set();
@@ -821,11 +854,7 @@ async function refreshProjectAgents() {
   const projectSessions = sessions.filter((s) => s.project === currentProjectPath);
   const activeSessionIds = projectSessions.filter((s) => isSessionActive(s) || isAnyPinned(s.id)).map((s) => s.id);
   const agentResults = await Promise.all(
-    activeSessionIds.map((id) =>
-      fetch(`/api/sessions/${id}/agents`)
-        .then((r) => r.json())
-        .catch(() => ({ agents: [] })),
-    ),
+    activeSessionIds.map((id) => getJson(apiPath`/api/sessions/${id}/agents`, { agents: [] })),
   );
   const seen = new Set();
   currentAgents = [];
@@ -850,6 +879,7 @@ async function refreshProjectAgents() {
   lastAgentsHash = hash;
   renderAgentFooter();
 }
+//#endregion
 
 //#region MESSAGE_PANEL
 function setMessagePanelVisible(open) {
@@ -879,7 +909,7 @@ function toggleMessagePanel() {
   const panel = document.getElementById('message-panel');
   messagePanelOpen = !messagePanelOpen;
   termState.panelHidden = false;
-  store.setItem('message-panel-open', messagePanelOpen);
+  store.setItem(MESSAGE_PANEL_OPEN_KEY, messagePanelOpen);
   panel.classList.toggle('visible', messagePanelOpen);
   document.getElementById('message-toggle')?.classList.toggle('active', messagePanelOpen);
   if (messagePanelOpen && currentSessionId) {
@@ -902,7 +932,7 @@ function applyMessagePanelFull(on) {
 // 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);
+  store.setItem(MESSAGE_PANEL_FULL_KEY, on);
   applyMessagePanelFull(on);
 }
 
@@ -914,7 +944,7 @@ function initMessagePanelFull() {
     new ResizeObserver(sync).observe(sidebar);
     sync();
   }
-  applyMessagePanelFull(store.getItem('message-panel-full') === 'true');
+  applyMessagePanelFull(store.getItem(MESSAGE_PANEL_FULL_KEY) === 'true');
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
@@ -922,7 +952,7 @@ async function openSessionWithBookmarks(sessionId) {
   if (!messagePanelOpen) {
     const panel = document.getElementById('message-panel');
     messagePanelOpen = true;
-    store.setItem('message-panel-open', 'true');
+    store.setItem(MESSAGE_PANEL_OPEN_KEY, 'true');
     panel.classList.add('visible');
     document.getElementById('message-toggle')?.classList.add('active');
   }
@@ -964,12 +994,12 @@ async function viewAgentLog(agentId) {
     agentLogSSE.close();
     agentLogSSE = null;
   }
-  agentLogSSE = new EventSource(`/api/sessions/${agentLogMode.sessionId}/agents/${resolvedId}/messages/stream`);
+  agentLogSSE = new EventSource(apiPath`/api/sessions/${agentLogMode.sessionId}/agents/${resolvedId}/messages/stream`);
   agentLogSSE.addEventListener('agent-log-update', (e) => {
     if (!agentLogMode || agentLogMode.agentId !== resolvedId) return;
     try {
       const data = JSON.parse(e.data);
-      currentMessages = data.messages;
+      setCurrentMessages(data.messages);
       if (messagePanelOpen) renderMessages(data.messages);
       maybeFollowLatest();
     } catch (_) {}
@@ -998,11 +1028,11 @@ async function fetchAgentMessages() {
   if (!agentLogMode) return;
   const { sessionId, agentId } = agentLogMode;
   try {
-    const res = await fetch(`/api/sessions/${sessionId}/agents/${agentId}/messages?limit=100`);
-    if (!res.ok || !agentLogMode || agentLogMode.agentId !== agentId) return;
-    const data = await res.json();
-    if (!agentLogMode || agentLogMode.agentId !== agentId) return;
-    currentMessages = data.messages;
+    const data = await getJson(apiPath`/api/sessions/${sessionId}/agents/${agentId}/messages`, null, {
+      query: { limit: 100 },
+    });
+    if (!data || !agentLogMode || agentLogMode.agentId !== agentId) return;
+    setCurrentMessages(data.messages);
     if (messagePanelOpen) renderMessages(data.messages);
     maybeFollowLatest();
   } catch (e) {
@@ -1020,10 +1050,8 @@ function openLiveLatestMessage() {
 
 const MSG_PAGE_LIMIT = 15;
 
-async function fetchSessionMessagesPage(sessionId, { before } = {}) {
-  const qs = new URLSearchParams({ limit: MSG_PAGE_LIMIT });
-  if (before) qs.set('before', before);
-  const res = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/messages?${qs}`);
+async function fetchSessionMessagesPage(sessionId, { before, limit = MSG_PAGE_LIMIT } = {}) {
+  const res = await api(apiPath`/api/sessions/${sessionId}/messages`, { query: { limit, before: before || null } });
   return res.ok ? res.json() : null;
 }
 
@@ -1049,18 +1077,16 @@ async function fetchMessages(sessionId) {
       if (hash === lastMessagesHash) return;
       lastMessagesHash = hash;
       msgHasMore = data.hasMore !== false;
-      currentMessages = data.messages;
+      setCurrentMessages(data.messages);
       if (messagePanelOpen) renderMessages(data.messages);
     } else {
       if (data.messages.length && currentMessages.length) {
         const lastKnown = currentMessages[currentMessages.length - 1].timestamp;
         const newMsgs = data.messages.filter((m) => m.timestamp > lastKnown);
         if (newMsgs.length) {
-          currentMessages = [...currentMessages, ...newMsgs];
-          if (currentMessages.length > MSG_MAX_LOADED) {
-            currentMessages = currentMessages.slice(-MSG_MAX_LOADED);
-            msgHasMore = true;
-          }
+          const merged = [...currentMessages, ...newMsgs];
+          if (merged.length > MSG_MAX_LOADED) msgHasMore = true;
+          setCurrentMessages(merged.slice(-MSG_MAX_LOADED));
           if (messagePanelOpen) renderMessages(currentMessages);
         }
       }
@@ -1087,10 +1113,7 @@ async function loadOlderMessages() {
     if (data.messages.length) {
       loader.remove();
       const prevHeight = container.scrollHeight;
-      currentMessages = [...data.messages, ...currentMessages];
-      if (currentMessages.length > MSG_MAX_LOADED) {
-        currentMessages = currentMessages.slice(0, MSG_MAX_LOADED);
-      }
+      setCurrentMessages([...data.messages, ...currentMessages].slice(0, MSG_MAX_LOADED));
       renderMessages(currentMessages);
       container.scrollTop = container.scrollHeight - prevHeight;
     }
@@ -1675,10 +1698,9 @@ function rejectWaitingPlan(inputId) {
 async function respondWaiting(payload) {
   if (!currentSessionId || !currentWaiting?.id) return;
   try {
-    const res = await fetch(`/api/sessions/${encodeURIComponent(currentSessionId)}/waiting/respond`, {
+    const res = await api(apiPath`/api/sessions/${currentSessionId}/waiting/respond`, {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id: currentWaiting.id, ...payload }),
+      body: { id: currentWaiting.id, ...payload },
     });
     if (res.ok || res.status === 409 || res.status === 410) {
       clearWaitingUi();
@@ -1725,9 +1747,7 @@ function clearWaitingUi() {
 async function discardWaiting() {
   if (!currentSessionId) return;
   try {
-    const res = await fetch(`/api/sessions/${encodeURIComponent(currentSessionId)}/waiting/discard`, {
-      method: 'POST',
-    });
+    const res = await api(apiPath`/api/sessions/${currentSessionId}/waiting/discard`, { method: 'POST' });
     if (res.ok) clearWaitingUi();
   } catch (e) {
     console.error('[discardWaiting]', e);
@@ -1852,15 +1872,12 @@ function getPinId(m) {
 }
 
 function loadPins(sessionId) {
-  try {
-    return JSON.parse(store.getItem(`pinned-messages-${sessionId}`)) || [];
-  } catch {
-    return [];
-  }
+  return readStoredList(pinsKey(sessionId));
 }
 
 function savePins(sessionId, pins) {
-  store.setItem(`pinned-messages-${sessionId}`, JSON.stringify(pins));
+  if (pins.length) store.writeJson(pinsKey(sessionId), pins);
+  else store.removeItem(pinsKey(sessionId));
 }
 
 function isPinned(m) {
@@ -1991,6 +2008,7 @@ function showPinnedMsgDetail(pinIdx) {
   autoSizeModal(pinModal, body);
   const pinBtn = document.getElementById('msg-detail-pin-btn');
   if (pinBtn) pinBtn.classList.add('active');
+  syncMsgDetailPaneBtn();
   document.getElementById('msg-detail-modal').classList.add('visible');
   mountReplyReview(pin, body, pinModal);
 }
@@ -2026,34 +2044,22 @@ let stickySessionIds = new Set();
 const deferredPinPlacement = new Set();
 
 function loadPinnedSessions() {
-  try {
-    return new Set(JSON.parse(store.getItem('pinned-sessions')) || []);
-  } catch {
-    return new Set();
-  }
+  return new Set(readStoredList(PINNED_SESSIONS_KEY));
 }
 
 function loadStickySessions() {
-  try {
-    return new Set(JSON.parse(store.getItem('sticky-sessions')) || []);
-  } catch {
-    return new Set();
-  }
+  return new Set(readStoredList(STICKY_SESSIONS_KEY));
 }
 
 function savePinnedSessions() {
-  store.setItem('pinned-sessions', JSON.stringify([...pinnedSessionIds]));
-  store.setItem('sticky-sessions', JSON.stringify([...stickySessionIds]));
+  store.writeJson(PINNED_SESSIONS_KEY, [...pinnedSessionIds]);
+  store.writeJson(STICKY_SESSIONS_KEY, [...stickySessionIds]);
 }
 
 // Mirror pin state to server so it can be queried by the CLI. UI remains source of truth for itself.
 function offloadSessionPin(sessionId) {
   const state = getSessionPinState(sessionId);
-  fetch('/api/session/pin', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ id: sessionId, state }),
-  }).catch(() => {});
+  api('/api/session/pin', { method: 'POST', body: { id: sessionId, state } }).catch(() => {});
 }
 
 function clearSessionPin(sessionId) {
@@ -2236,33 +2242,27 @@ function highlightSelectedMsg() {
   if (el) el.classList.add('selected');
 }
 
-function showMsgDetail(idx) {
-  currentMsgDetailIdx = idx;
-  document.getElementById('msg-detail-waiting-footer').innerHTML = '';
-  msgHighlightDimmed = false;
-  const m = currentMessages[idx];
-  if (!m) return;
-  highlightSelectedMsg();
-  const body = document.getElementById('msg-detail-body');
+function msgDetailTitle(m) {
+  if (m.type === 'tool_use') return m.tool;
+  if (m.type === 'teammate') return m.teammateId || 'Teammate';
+  return m.type === 'assistant' ? 'Claude' : m.agentMessage ? m.systemLabel : m.systemLabel ? 'System' : 'User';
+}
+
+// The message dialog and a message pane render a message the same way.
+function msgDetailContent(m) {
   if (m.type === 'tool_use') {
-    document.getElementById('msg-detail-title').textContent = m.tool;
     const fullText = m.fullDetail || m.detail || '';
     const descHtml =
       m.description && m.description !== fullText
         ? `<div style="margin-bottom:8px;color:var(--text-secondary);font-size:0.85rem">${escapeHtml(m.description)}</div>`
         : '';
     let agentExtraHtml = '';
-    const agentBtn = document.getElementById('msg-detail-agent-btn');
     if (m.tool === 'Agent' && m.agentId) {
       const agentRespText = m.agentLastMessage ? stripAnsi(m.agentLastMessage.trim()) : null;
       const agentPromptText = m.agentPrompt || null;
       const respHtml = agentRespText ? renderMarkdown(agentRespText) : null;
       const promptHtml = agentPromptText ? renderMarkdown(agentPromptText) : null;
       agentExtraHtml += renderAgentTabs(promptHtml, respHtml, agentPromptText, agentRespText);
-      agentBtn.style.display = '';
-      agentBtn.dataset.agentId = m.agentId;
-    } else {
-      agentBtn.style.display = 'none';
     }
     const sendProto = m.tool === 'SendMessage' && m.params?.protocol;
     const isFindings = m.tool === 'ReportFindings';
@@ -2296,7 +2296,7 @@ function showMsgDetail(idx) {
     }
     const answersHtml = m.answerPayload ? renderAnswerPayloadHtml(m.answerPayload) : '';
     const toolResultImagesHtml = renderToolResultImagesHtml(m.toolResultImageCount, m.toolUseId);
-    body.innerHTML =
+    return (
       mainHtml +
       toolParamsHtml +
       answersHtml +
@@ -2304,53 +2304,94 @@ function showMsgDetail(idx) {
       findingsHtml +
       (hasAgentTabs ? '' : toolResultHtml) +
       toolResultImagesHtml +
-      agentExtraHtml;
-  } else if (m.type === 'teammate') {
-    document.getElementById('msg-detail-title').textContent = m.teammateId || 'Teammate';
-    document.getElementById('msg-detail-agent-btn').style.display = 'none';
+      agentExtraHtml
+    );
+  }
+  if (m.type === 'teammate') {
     if (m.isProtocol) {
-      body.innerHTML = m.protocolData
+      return m.protocolData
         ? renderProtocolDetail(m.protocolData)
         : `<div class="teammate-idle-detail"><span class="protocol-label">${escapeHtml(m.protocolLabel || m.protocolType)}</span></div>`;
-    } else {
-      const text = stripAnsi(m.fullText || m.text || '');
-      body.innerHTML = renderMarkdown(text);
     }
-  } else {
-    const rawText = stripAnsi(m.fullText || m.text || '');
-    const cmd = m.type === 'user' ? parseCommandMessage(rawText) : null;
-    document.getElementById('msg-detail-title').textContent =
-      m.type === 'assistant' ? 'Claude' : m.agentMessage ? m.systemLabel : m.systemLabel ? 'System' : 'User';
-    document.getElementById('msg-detail-agent-btn').style.display = 'none';
-    const userExtras = m.type === 'user' ? renderUserAttachments(m) : '';
-    if (m.compactSummary) {
-      body.innerHTML = renderMarkdown(m.compactSummary) + userExtras;
-    } else if (cmd) {
-      const args = parseCommandArgs(rawText) || null;
-      const cleanBody = rawText
-        .replace(/<command-[^>]+>[\s\S]*?<\/command-[^>]+>/g, '')
-        .replace(/<local-command-[^>]+>[\s\S]*?<\/local-command-[^>]+>/g, '')
-        .trim();
-      let cmdHtml = `<code>${escapeHtml(cmd)}${args ? ` ${escapeHtml(args)}` : ''}</code>`;
-      if (cleanBody) cmdHtml += `<div style="margin-top:10px">${renderMarkdown(cleanBody)}</div>`;
-      body.innerHTML = cmdHtml + userExtras;
-    } else if (rawText) {
-      body.innerHTML = renderMarkdown(rawText) + userExtras;
-    } else {
-      body.innerHTML = userExtras || '<em>No content</em>';
-    }
-  }
+    return renderMarkdown(stripAnsi(m.fullText || m.text || ''));
+  }
+  const rawText = stripAnsi(m.fullText || m.text || '');
+  const cmd = m.type === 'user' ? parseCommandMessage(rawText) : null;
+  const userExtras = m.type === 'user' ? renderUserAttachments(m) : '';
+  if (m.compactSummary) return renderMarkdown(m.compactSummary) + userExtras;
+  if (cmd) {
+    const args = parseCommandArgs(rawText) || null;
+    const cleanBody = rawText
+      .replace(/<command-[^>]+>[\s\S]*?<\/command-[^>]+>/g, '')
+      .replace(/<local-command-[^>]+>[\s\S]*?<\/local-command-[^>]+>/g, '')
+      .trim();
+    let cmdHtml = `<code>${escapeHtml(cmd)}${args ? ` ${escapeHtml(args)}` : ''}</code>`;
+    if (cleanBody) cmdHtml += `<div style="margin-top:10px">${renderMarkdown(cleanBody)}</div>`;
+    return cmdHtml + userExtras;
+  }
+  if (rawText) return renderMarkdown(rawText) + userExtras;
+  return userExtras || '<em>No content</em>';
+}
+
+// The detail modal holds an index, so a list that shifts under it must move the index too.
+function setCurrentMessages(msgs) {
+  const shown = currentMessages[currentMsgDetailIdx];
+  currentMessages = msgs;
+  if (!shown) return;
+  const id = getPinId(shown);
+  const same = msgs[currentMsgDetailIdx];
+  const idx = same && getPinId(same) === id ? currentMsgDetailIdx : msgs.findIndex((m) => getPinId(m) === id);
+  currentMsgDetailIdx = idx >= 0 ? idx : null;
+  setMsgDetailMeta(shown, idx >= 0 && msgPosition(idx));
+  syncMsgDetailPaneBtn();
+}
+
+const msgPosition = (idx) => `${idx + 1} of ${currentMessages.length}`;
+
+function showMsgDetail(idx) {
+  currentMsgDetailIdx = idx;
+  document.getElementById('msg-detail-waiting-footer').innerHTML = '';
+  msgHighlightDimmed = false;
+  const m = currentMessages[idx];
+  if (!m) return;
+  highlightSelectedMsg();
+  renderMsgDetail(m, msgPosition(idx));
+}
+
+// A message outside the loaded log has no index, so it shows like a pinned message, with follow off.
+function showUnloadedMsgDetail(m) {
+  currentMsgDetailIdx = null;
+  document.getElementById('msg-detail-waiting-footer').innerHTML = '';
+  highlightSelectedMsg();
+  msgDetailFollowLatest = false;
+  renderMsgDetail(m);
+}
+
+const msgDetailMeta = (m) => [m.model, formatDate(m.timestamp)].filter(Boolean);
+
+function setMsgDetailMeta(m, position) {
+  const meta = msgDetailMeta(m);
+  if (position) meta.push(position);
+  document.getElementById('msg-detail-meta').textContent = meta.join(' · ');
+}
+
+function renderMsgDetail(m, position) {
+  const body = document.getElementById('msg-detail-body');
+  document.getElementById('msg-detail-title').textContent = msgDetailTitle(m);
+  body.innerHTML = msgDetailContent(m);
+  const agentBtn = document.getElementById('msg-detail-agent-btn');
+  const agentId = m.type === 'tool_use' && m.tool === 'Agent' ? m.agentId : null;
+  agentBtn.style.display = agentId ? '' : 'none';
+  if (agentId) agentBtn.dataset.agentId = agentId;
   const overlay = document.getElementById('msg-detail-modal');
   const modal = overlay.querySelector('.modal');
   autoSizeModal(modal, body);
   setMsgDetailFollow(msgDetailFollowLatest);
 
-  const meta = [formatDate(m.timestamp)];
-  if (m.model) meta.unshift(m.model);
-  meta.push(`${idx + 1} of ${currentMessages.length}`);
-  document.getElementById('msg-detail-meta').textContent = meta.join(' · ');
+  setMsgDetailMeta(m, position);
   currentPinDetailId = null;
   updateMsgDetailPinState();
+  syncMsgDetailPaneBtn();
   overlay.classList.add('visible');
   mountReplyReview(m, body, modal);
 }
@@ -2450,12 +2491,12 @@ function _applyModalFullscreen(modalId, on) {
 function toggleModalFullscreen(modalId) {
   const on = !_modalEl(modalId).classList.contains('fullscreen');
   _applyModalFullscreen(modalId, on);
-  store.setItem(`modal-fullscreen-${modalId}`, String(on));
+  store.setItem(modalFullscreenKey(modalId), String(on));
 }
 
 function loadModalFullscreen() {
   _forEachFullscreenModal((modalId) => {
-    if (store.getItem(`modal-fullscreen-${modalId}`) === 'true') _applyModalFullscreen(modalId, true);
+    if (store.getItem(modalFullscreenKey(modalId)) === 'true') _applyModalFullscreen(modalId, true);
   });
 }
 
@@ -2639,6 +2680,16 @@ function sendMessageAddress(peerName) {
   return `SendMessage(${peerName})`;
 }
 
+async function copyText(text, what, okMsg = `Copied ${what}`) {
+  const ok = await navigator.clipboard.writeText(text).then(
+    () => true,
+    () => false,
+  );
+  if (!ok) showToast(`Failed to copy ${what}`, 'error');
+  else if (okMsg) showToast(okMsg, 'success');
+  return ok;
+}
+
 async function copyWithFeedback(text, btn) {
   if (btn.dataset.copying) return;
   try {
@@ -2652,6 +2703,7 @@ async function copyWithFeedback(text, btn) {
     }, 1500);
   } catch (e) {
     console.error('Failed to copy:', e);
+    showToast('Failed to copy', 'error');
   }
 }
 
@@ -2767,25 +2819,25 @@ function renderAnswerPayloadHtml(answerPayload) {
         })
         .join('');
       return `<div style="margin-top:6px">
-      <div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:2px">${escapeHtml(q)}</div>
+      <div class="tool-detail-label">${escapeHtml(q)}</div>
       <ul style="margin:2px 0 0 16px;padding:0">${items}</ul>
     </div>`;
     })
     .join('');
-  return `<div style="margin-top:10px;padding-top:8px;border-top:1px solid var(--border)">
-    <div style="font-size:0.8rem;color:var(--text-muted);margin-bottom:4px">Answers</div>
+  return `<div class="tool-detail-section-wide">
+    <div class="tool-detail-heading">Answers</div>
     ${rows}
   </div>`;
 }
 
 //#region FINDINGS
 const FINDING_VERDICT_COLORS = {
-  CONFIRMED: 'var(--danger, #ef5350)',
-  PLAUSIBLE: 'var(--warning, #f0b429)',
+  CONFIRMED: 'var(--danger)',
+  PLAUSIBLE: 'var(--warning)',
 };
 const FINDING_OUTCOME_COLORS = {
-  fixed: 'var(--success, #3ecf8e)',
-  no_change_needed: 'var(--info, #60a5fa)',
+  fixed: 'var(--success)',
+  no_change_needed: 'var(--info)',
   skipped: 'var(--text-muted)',
 };
 function findingBadge(label, color) {
@@ -2878,7 +2930,7 @@ function renderToolParamsHtml(params) {
       blocks.push({ k, display, full });
     } else {
       badges.push(
-        `<span style="display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:3px;background:var(--bg-secondary);font-size:0.75rem"><span style="color:var(--text-muted)">${escapeHtml(k)}:</span> ${escapeHtml(display)}</span>`,
+        `<span style="display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:3px;background:var(--bg-hover);font-size:0.75rem"><span style="color:var(--text-muted)">${escapeHtml(k)}:</span> ${escapeHtml(display)}</span>`,
       );
     }
   }
@@ -2893,20 +2945,20 @@ function renderToolParamsHtml(params) {
     html += `<div style="margin-top:6px;font-size:0.75rem"><span style="color:var(--text-muted)">${escapeHtml(k)}:</span> <span style="word-break:break-all">${escapeHtml(display)}</span>${suffix}</div>`;
   }
   for (const { k, pretty } of jsonBlocks) {
-    html += `<div style="margin-top:8px;padding-top:6px;border-top:1px solid var(--border)">
-          <div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:2px">${escapeHtml(k)}</div>
-          <pre class="${TINTED_PRE_CLASS}" style="max-height:300px;overflow:auto;font-size:0.75rem">${escapeHtml(pretty)}</pre>
+    html += `<div class="tool-detail-section">
+          <div class="tool-detail-label">${escapeHtml(k)}</div>
+          <pre class="${TINTED_PRE_CLASS} tool-detail-pre-scroll" style="font-size:0.75rem">${escapeHtml(pretty)}</pre>
         </div>`;
   }
   if (params.old_string || params.new_string) {
-    html += `<div style="margin-top:8px;padding-top:6px;border-top:1px solid var(--border)">`;
+    html += `<div class="tool-detail-section">`;
     if (params.old_string) {
-      html += `<div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:2px">old_string</div>
-            <pre class="${TINTED_PRE_CLASS}" style="max-height:200px;overflow:auto;border-left:3px solid #e55;padding-left:8px">${escapeHtml(params.old_string)}</pre>`;
+      html += `<div class="tool-detail-label">old_string</div>
+            <pre class="${TINTED_PRE_CLASS} msg-detail-pre-old">${escapeHtml(params.old_string)}</pre>`;
     }
     if (params.new_string) {
-      html += `<div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:2px;margin-top:6px">new_string</div>
-            <pre class="${TINTED_PRE_CLASS}" style="max-height:200px;overflow:auto;border-left:3px solid #5b5;padding-left:8px">${escapeHtml(params.new_string)}</pre>`;
+      html += `<div class="tool-detail-label" style="margin-top:6px">new_string</div>
+            <pre class="${TINTED_PRE_CLASS} msg-detail-pre-new">${escapeHtml(params.new_string)}</pre>`;
     }
     html += `</div>`;
   }
@@ -2916,29 +2968,32 @@ function renderToolParamsHtml(params) {
     // small writes render as before.
     const fullContent = params.contentFull || params.content;
     const isTruncated = !!params.contentFull || params.content.length > CONTENT_TRUNCATE_MAX;
-    const truncContent = isTruncated
-      ? `${params.content.slice(0, CONTENT_TRUNCATE_MAX)}${params.content.length > CONTENT_TRUNCATE_MAX ? '\n... (truncated)' : ''}`
-      : params.content;
+    const marker = '\n... (truncated)';
+    let code = params.content.slice(0, CONTENT_TRUNCATE_MAX);
+    if (code.endsWith(marker)) code = code.slice(0, -marker.length);
+    const lang = langOfPath(params.file_path);
+    const truncHtml = (highlightCode(code, lang) ?? escapeHtml(code)) + (isTruncated ? escapeHtml(marker) : '');
     let writeMoreBtn = '',
       fullBlock = '';
     if (isTruncated) {
-      const toggle = makeExpandToggle(escapeHtml(truncContent), escapeHtml(fullContent), {
+      const toggle = makeExpandToggle(truncHtml, escapeHtml(fullContent), {
         fontSize: '0.75rem',
         maxHeight: '500px',
         tinted: true,
+        highlightLang: lang,
       });
       writeMoreBtn = ` ${toggle.btn}`;
       fullBlock = toggle.full;
     }
-    html += `<div style="margin-top:8px;padding-top:6px;border-top:1px solid var(--border)">
-          <div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:2px">content${writeMoreBtn}</div>
-          <pre class="${TINTED_PRE_CLASS}" style="max-height:300px;overflow:auto">${escapeHtml(truncContent)}</pre>
+    html += `<div class="tool-detail-section">
+          <div class="tool-detail-label">content${writeMoreBtn}</div>
+          <pre class="${TINTED_PRE_CLASS} tool-detail-pre-scroll">${truncHtml}</pre>
           ${fullBlock}
         </div>`;
   }
   if (params.plan) {
-    html += `<div style="margin-top:8px;padding-top:6px;border-top:1px solid var(--border)">
-          <div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:4px">Plan</div>
+    html += `<div class="tool-detail-section">
+          <div class="tool-detail-label" style="margin-bottom:4px">Plan</div>
           <div class="markdown-body">${renderMarkdown(params.plan)}</div>
         </div>`;
   }
@@ -2971,20 +3026,22 @@ function toolOutputHtml(text) {
   return sanitizeOutputHtml(text);
 }
 
+// Strings and comments share one pass, so the apostrophe in "# don't" does not open a string.
 function highlightBash(escaped) {
   return escaped
-    .replace(/^(\s*)(#.*)$/gm, '$1<span style="color:#6a9955">$2</span>')
-    .replace(/(&#x27;[\s\S]*?&#x27;|&quot;[\s\S]*?&quot;)/g, '<span style="color:#ce9178">$1</span>')
+    .replace(/(&#39;[\s\S]*?&#39;|&quot;[\s\S]*?&quot;)|^(\s*)(#.*)$/gm, (_, str, indent, comment) =>
+      str ? `<span class="hljs-string">${str}</span>` : `${indent}<span class="hljs-comment">${comment}</span>`,
+    )
     .replace(
       /\b(if|then|else|elif|fi|for|do|done|while|until|case|esac|function|return|in|select)\b/g,
-      '<span style="color:#c586c0">$1</span>',
+      '<span class="hljs-keyword">$1</span>',
     )
     .replace(
       /\b(echo|cd|ls|cat|grep|awk|sed|rm|cp|mv|mkdir|chmod|chown|export|source|exit|test|read|printf|set|unset|eval|exec|trap|wait|kill|sudo|apt|npm|npx|git|docker|curl|wget|pip|python|node|make|dotnet)\b/g,
-      '<span style="color:#569cd6">$1</span>',
+      '<span class="hljs-built_in">$1</span>',
     )
-    .replace(/(\$\{[^}]*\}|\$[A-Za-z_][A-Za-z0-9_]*)/g, '<span style="color:#9cdcfe">$1</span>')
-    .replace(/((?:^|\s)(?:&amp;&amp;|\|\||[|;])(?:\s|$))/g, '<span style="color:#d4d4d4;font-weight:bold">$1</span>');
+    .replace(/(\$\{[^}]*\}|\$[A-Za-z_][A-Za-z0-9_]*)/g, '<span class="hljs-variable">$1</span>')
+    .replace(/((?:^|\s)(?:&amp;&amp;|\|\||[|;])(?:\s|$))/g, '<span style="font-weight:bold">$1</span>');
 }
 
 const TINTED_PRE_CLASS = 'msg-detail-pre msg-detail-pre-tinted';
@@ -2992,6 +3049,12 @@ let _expandIdCounter = 0;
 function _applyExpandToggle(btn, fullEl) {
   const truncEl = btn.parentElement.nextElementSibling;
   const expand = fullEl.style.display === 'none';
+  // The full text is highlighted on first expand, so opening a message with a large Write stays fast.
+  if (expand && fullEl.dataset.hlLang) {
+    const html = highlightCode(fullEl.textContent, fullEl.dataset.hlLang);
+    if (html) fullEl.innerHTML = html;
+    delete fullEl.dataset.hlLang;
+  }
   fullEl.style.display = expand ? 'block' : 'none';
   if (truncEl) truncEl.style.display = expand ? 'none' : 'block';
   btn.textContent = expand ? 'Show less' : 'Show more';
@@ -3012,7 +3075,8 @@ function makeExpandToggle(_truncatedHtml, fullHtml, opts = {}) {
   const cls = opts.tinted ? TINTED_PRE_CLASS : 'msg-detail-pre';
   const btn = `<button data-expand-id="${id}" onclick="_toggleExpand(this)" class="expand-toggle-btn" style="font-size:${fontSize}">Show more</button>`;
   const mhStyle = maxHeight ? `max-height:${maxHeight};` : '';
-  const full = `<pre id="${id}" class="${cls}" style="${mhStyle}overflow:auto;display:none">${fullHtml}</pre>`;
+  const hl = opts.highlightLang ? ` data-hl-lang="${escapeHtml(opts.highlightLang)}"` : '';
+  const full = `<pre id="${id}" class="${cls}"${hl} style="${mhStyle}overflow:auto;display:none">${fullHtml}</pre>`;
   return { btn, full };
 }
 
@@ -3051,8 +3115,8 @@ function renderToolResultHtml(toolResult, isTruncated, fullResult, toolUseId) {
   } else if (isTruncated) {
     truncLabel = '<span style="color:var(--text-muted);font-size:0.8rem;margin-left:6px">(truncated)</span>';
   }
-  return `<div style="margin-top:10px;padding-top:8px;border-top:1px solid var(--border)">
-        <div style="font-size:0.8rem;color:var(--text-muted);margin-bottom:4px">Output${truncLabel}</div>
+  return `<div class="tool-detail-section-wide">
+        <div class="tool-detail-heading">Output${truncLabel}</div>
         <pre class="msg-detail-pre" style="overflow:auto">${escaped}</pre>
         ${fullBlock}
       </div>`;
@@ -3078,9 +3142,7 @@ async function _toggleToolResultExpand(btn) {
     btn.disabled = true;
     btn.textContent = 'Loading…';
     try {
-      const r = await fetch(
-        `/api/sessions/${encodeURIComponent(currentSessionId)}/tool-result/${encodeURIComponent(btn.dataset.toolUseId)}`,
-      );
+      const r = await api(apiPath`/api/sessions/${currentSessionId}/tool-result/${btn.dataset.toolUseId}`);
       if (!r.ok) throw new Error(`HTTP ${r.status}`);
       const { content } = await r.json();
       f.innerHTML = toolOutputHtml(content);
@@ -3088,7 +3150,7 @@ async function _toggleToolResultExpand(btn) {
     } catch (_e) {
       btn.textContent = 'Show more';
       btn.disabled = false;
-      showToast('Failed to load full output');
+      showToast('Failed to load full output', 'error');
       return;
     }
     btn.disabled = false;
@@ -3121,14 +3183,10 @@ async function copyMsgToClipboard(btn) {
 
 async function postAndToast(url, body, label) {
   try {
-    const r = await fetch(url, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(body),
-    });
-    showToast(r.ok ? `Opened ${label}` : `Failed to open ${label}`);
+    const r = await api(url, { method: 'POST', body });
+    showToast(`${r.ok ? 'Opened' : 'Failed to open'} ${label}`, r.ok ? 'success' : 'error');
   } catch (_e) {
-    showToast(`Failed to open ${label}`);
+    showToast(`Failed to open ${label}`, 'error');
   }
 }
 
@@ -3341,7 +3399,7 @@ function togglePinFromAgentModal() {
 async function dismissAgent(agentId) {
   if (!currentSessionId || !agentId) return;
   try {
-    const res = await fetch(`/api/sessions/${currentSessionId}/agents/${agentId}/stop`, { method: 'POST' });
+    const res = await api(apiPath`/api/sessions/${currentSessionId}/agents/${agentId}/stop`, { method: 'POST' });
     if (res.ok) {
       currentWaiting = null;
       fetchAgents(currentSessionId);
@@ -3427,14 +3485,6 @@ function showAgentModal(agentId) {
   const dismissBtn = document.getElementById('agent-modal-dismiss-btn');
   dismissBtn.style.display = agent.status === 'active' || agent.status === 'idle' ? '' : 'none';
   modal.classList.add('visible');
-  const keyHandler = (e) => {
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      closeAgentModal();
-      document.removeEventListener('keydown', keyHandler);
-    }
-  };
-  document.addEventListener('keydown', keyHandler);
 }
 
 function closeAgentModal() {
@@ -3607,9 +3657,7 @@ function getFilteredSessions() {
 
 function saveOrder(key, prev, next) {
   if (next.length === prev.length && next.every((id, i) => id === prev[i])) return prev;
-  try {
-    store.setItem(key, JSON.stringify(next));
-  } catch (_) {}
+  store.writeJson(key, next);
   return next;
 }
 
@@ -3804,7 +3852,7 @@ function renderSessions() {
     return;
   }
 
-  const groupPinned = store.getItem('groupPinnedSessions') !== 'false';
+  const groupPinned = store.getItem(GROUP_PINNED_KEY) !== 'false';
   const pinWeight = (s) => (isPlacedSticky(s.id) ? 2 : isInPinnedGroup(s) ? 1 : 0);
   const pinSort = (a, b) => pinWeight(b) - pinWeight(a);
   const renderGroupSessions = (sessions, pinKey) => {
@@ -4351,11 +4399,7 @@ function startAddTask(tile) {
     input.disabled = true;
     const sessionId = currentSessionId;
     try {
-      const res = await fetch(`/api/tasks/${sessionId}`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ subject }),
-      });
+      const res = await api(apiPath`/api/tasks/${sessionId}`, { method: 'POST', body: { subject } });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       // The response carries the finished task, and the watcher will resend it within the
       // SSE debounce anyway -- so show it now rather than paying a session refetch for it.
@@ -4447,11 +4491,7 @@ async function onColumnDrop(e) {
   task.status = newStatus;
   renderKanban();
   try {
-    const res = await fetch(`/api/tasks/${sessionId}/${taskId}`, {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ status: newStatus }),
-    });
+    const res = await api(apiPath`/api/tasks/${sessionId}/${taskId}`, { method: 'PUT', body: { status: newStatus } });
     if (res.ok) return;
   } catch (_) {}
   if (task.status === newStatus) {
@@ -4488,34 +4528,28 @@ function pinKey(projectPath) {
 }
 
 function loadSessionGroups() {
-  try {
-    const list = JSON.parse(store.getItem(SESSION_GROUPS_KEY) || 'null')?.groups;
-    sessionGroups = (Array.isArray(list) ? list : [])
-      .filter((g) => g && typeof g.id === 'string')
-      .map((g) => ({
-        id: g.id,
-        name: typeof g.name === 'string' && g.name.trim() ? g.name : 'Group',
-        members: (Array.isArray(g.members) ? g.members : [])
-          .filter((m) => m && (m.type === 'project' || m.type === 'session') && typeof m.ref === 'string')
-          .map((m) => {
-            const out = { type: m.type, ref: m.ref };
-            if (typeof m.under === 'string' && m.under) out.under = m.under;
-            if (m.loose === true) out.loose = true;
-            return out;
-          }),
-      }));
-    const released = JSON.parse(store.getItem(SESSION_GROUPS_KEY) || 'null')?.released;
-    sgReleased = new Set(Array.isArray(released) ? released.filter((id) => typeof id === 'string') : []);
-  } catch (_) {
-    sessionGroups = [];
-    sgReleased = new Set();
-  }
+  const saved = store.readJson(SESSION_GROUPS_KEY);
+  const list = saved?.groups;
+  sessionGroups = (Array.isArray(list) ? list : [])
+    .filter((g) => g && typeof g.id === 'string')
+    .map((g) => ({
+      id: g.id,
+      name: typeof g.name === 'string' && g.name.trim() ? g.name : 'Group',
+      members: (Array.isArray(g.members) ? g.members : [])
+        .filter((m) => m && (m.type === 'project' || m.type === 'session') && typeof m.ref === 'string')
+        .map((m) => {
+          const out = { type: m.type, ref: m.ref };
+          if (typeof m.under === 'string' && m.under) out.under = m.under;
+          if (m.loose === true) out.loose = true;
+          return out;
+        }),
+    }));
+  const released = saved?.released;
+  sgReleased = new Set(Array.isArray(released) ? released.filter((id) => typeof id === 'string') : []);
 }
 
 function persistSessionGroups() {
-  try {
-    store.setItem(SESSION_GROUPS_KEY, JSON.stringify({ version: 1, groups: sessionGroups, released: [...sgReleased] }));
-  } catch (_) {}
+  store.writeJson(SESSION_GROUPS_KEY, { version: 1, groups: sessionGroups, released: [...sgReleased] });
 }
 
 function sgGroupById(id) {
@@ -5030,10 +5064,13 @@ function initSessionGroupsDnd() {
 // Non-drag path: right-click or long-press a session / project header.
 let sgLongPressTimer = null;
 
-function sgCloseMenu() {
+function sgCloseMenu(restore) {
   document.removeEventListener('keydown', sgMenuKeydown, true);
   const menu = document.getElementById('sg-menu');
-  if (menu) menu.remove();
+  if (menu) {
+    menu.remove();
+    takeMenuFocus(restore);
+  }
 }
 
 // Run in the capture phase: the global handler would otherwise read these keys as sidebar shortcuts.
@@ -5047,11 +5084,25 @@ function menuKeydown(e, items, close) {
   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') close();
+  else if (e.key === 'Escape' || e.key === 'Tab') close(true);
   if (next !== null) items[next]?.focus();
 }
 
+let menuReturnFocus = null;
+
+// Only when nothing else has taken focus: it is on body, or still inside what is closing.
+function restoreFocusTo(el, closing) {
+  const now = document.activeElement;
+  if (el?.isConnected && (!now || now === document.body || closing?.contains(now))) el.focus();
+}
+
+function takeMenuFocus(restore) {
+  if (restore) restoreFocusTo(menuReturnFocus);
+  menuReturnFocus = null;
+}
+
 function placeMenu(menu, x, y) {
+  menuReturnFocus = document.activeElement;
   document.body.appendChild(menu);
   const rect = menu.getBoundingClientRect();
   menu.style.left = `${Math.min(x, window.innerWidth - rect.width - 8)}px`;
@@ -5135,7 +5186,7 @@ function sgOnTouchStart(e) {
 document.addEventListener('click', (e) => {
   const item = e.target.closest('.sg-menu-item');
   if (!item) {
-    if (!e.target.closest('.sg-menu')) sgCloseMenu();
+    if (!e.target.closest('.sg-menu')) sgCloseMenu(true);
     return;
   }
   e.stopPropagation();
@@ -5359,9 +5410,7 @@ function setGroupCollapsed(header, collapsed) {
 }
 
 function persistCollapsedGroups() {
-  try {
-    store.setItem('collapsedGroups', JSON.stringify([...collapsedProjectGroups]));
-  } catch (_) {}
+  store.writeJson(COLLAPSED_GROUPS_KEY, [...collapsedProjectGroups]);
 }
 
 let prevActiveSessionIds = null; // null until primed by the first onlyNew pass
@@ -5548,42 +5597,6 @@ sessionsList.addEventListener('click', (e) => {
   if (focusZone === 'sidebar' || (!taskInUse && !terminalPaneFocused())) setFocusZone('sidebar', el);
 });
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function getAvailableTasksOptions(currentTaskId = null) {
-  const pending = currentTasks.filter((t) => t.status === 'pending' && t.id !== currentTaskId);
-  const inProgress = currentTasks.filter((t) => t.status === 'in_progress' && t.id !== currentTaskId);
-  const completed = currentTasks.filter((t) => t.status === 'completed' && t.id !== currentTaskId);
-
-  // Build options grouped by status
-  let options = '';
-
-  if (pending.length > 0) {
-    options += '<optgroup label="Pending">';
-    pending.forEach((t, _idx) => {
-      options += `<option value="${escapeHtml(t.id)}">#${t.id} - ${escapeHtml(t.subject)}</option>`;
-    });
-    options += '</optgroup>';
-  }
-
-  if (inProgress.length > 0) {
-    options += '<optgroup label="In Progress">';
-    inProgress.forEach((t, _idx) => {
-      options += `<option value="${escapeHtml(t.id)}">#${t.id} - ${escapeHtml(t.subject)}</option>`;
-    });
-    options += '</optgroup>';
-  }
-
-  if (completed.length > 0) {
-    options += '<optgroup label="Completed">';
-    completed.forEach((t, _idx) => {
-      options += `<option value="${escapeHtml(t.id)}">#${t.id} - ${escapeHtml(t.subject)}</option>`;
-    });
-    options += '</optgroup>';
-  }
-
-  return options;
-}
-
 //#endregion
 
 //#region TASK_DETAIL
@@ -5594,15 +5607,9 @@ async function showTaskDetail(taskId, sessionId = null) {
 
   // If task not found in currentTasks, fetch it from the session
   if (!task && sessionId && sessionId !== 'undefined') {
-    try {
-      const res = await fetch(`/api/sessions/${sessionId}`);
-      const tasks = await res.json();
-      task = tasks.find((t) => t.id === taskId);
-      if (!task) return;
-    } catch (error) {
-      console.error('Failed to fetch task:', error);
-      return;
-    }
+    const tasks = await getJson(apiPath`/api/sessions/${sessionId}`, []);
+    task = tasks.find((t) => t.id === taskId);
+    if (!task) return;
   }
 
   if (!task) return;
@@ -5782,11 +5789,7 @@ function editDescription(descEl, task, sessionId) {
 
 async function saveTaskField(taskId, sessionId, field, value) {
   try {
-    const res = await fetch(`/api/tasks/${sessionId}/${taskId}`, {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ [field]: value }),
-    });
+    const res = await api(apiPath`/api/tasks/${sessionId}/${taskId}`, { method: 'PUT', body: { [field]: value } });
 
     if (res.ok) {
       lastCurrentTasksHash = null;
@@ -5805,47 +5808,6 @@ function closeDetailPanel() {
   taskHighlightDimmed = false;
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function showBlockedTaskModal(task) {
-  const messageDiv = document.getElementById('blocked-task-message');
-
-  const blockedByList = task.blockedBy
-    .map((id) => {
-      const blockingTask = currentTasks.find((t) => t.id === id);
-      if (blockingTask) {
-        return `<li><strong>#${blockingTask.id}</strong> - ${escapeHtml(blockingTask.subject)}</li>`;
-      }
-      return `<li><strong>#${id}</strong></li>`;
-    })
-    .join('');
-
-  messageDiv.innerHTML = `
-        <p style="margin-bottom: 12px;">Task <strong>#${task.id}</strong> - ${escapeHtml(task.subject)} is currently blocked by:</p>
-        <ul style="margin: 0 0 16px 20px; padding: 0;">${blockedByList}</ul>
-        <p style="margin: 0; color: var(--text-secondary); font-size: 13px;">
-          Please resolve these dependencies before moving this task to <strong>In Progress</strong>.
-        </p>
-      `;
-
-  const modal = document.getElementById('blocked-task-modal');
-  modal.classList.add('visible');
-
-  // Handle ESC key
-  const keyHandler = (e) => {
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      closeBlockedTaskModal();
-      document.removeEventListener('keydown', keyHandler);
-    }
-  };
-  document.addEventListener('keydown', keyHandler);
-}
-
-function closeBlockedTaskModal() {
-  const modal = document.getElementById('blocked-task-modal');
-  modal.classList.remove('visible');
-}
-
 //#endregion
 
 //#region DELETE_TASK
@@ -5858,6 +5820,7 @@ function confirmModal({ title, message, okLabel }) {
   document.getElementById('confirm-modal-message').textContent = message;
   const buttons = [document.getElementById('confirm-cancel-btn'), document.getElementById('confirm-ok-btn')];
   buttons[1].textContent = okLabel;
+  const returnFocus = document.activeElement;
   modal.classList.add('visible');
   buttons[1].focus();
 
@@ -5876,6 +5839,7 @@ function confirmModal({ title, message, okLabel }) {
       modal.classList.remove('visible');
       document.removeEventListener('keydown', onKey);
       closeConfirmModal = null;
+      if (!ok) restoreFocusTo(returnFocus, modal);
       resolve(ok);
     };
   });
@@ -5892,20 +5856,18 @@ async function deleteTask(taskId, sessionId) {
   if (!ok) return;
 
   try {
-    const res = await fetch(`/api/tasks/${sessionId}/${taskId}`, {
-      method: 'DELETE',
-    });
+    const res = await api(apiPath`/api/tasks/${sessionId}/${taskId}`, { method: 'DELETE' });
 
     if (res.ok) {
       closeDetailPanel();
       await refreshCurrentView();
     } else {
-      const error = await res.json();
-      alert(`Failed to delete task: ${error.error || 'Unknown error'}`);
+      const error = await res.json().catch(() => ({}));
+      showToast(`Failed to delete task: ${error.error || 'Unknown error'}`, 'error');
     }
   } catch (error) {
     console.error('Failed to delete task:', error);
-    alert('Failed to delete task');
+    showToast('Failed to delete task', 'error');
   }
 }
 
@@ -5942,14 +5904,20 @@ const SHORTCUT_TABS = [
         ],
       },
       {
-        title: 'View',
+        title: 'Tabs',
         rows: [
-          { keys: ['\\'], label: 'Toggle sidebar' },
           { keys: ['[', ']'], label: 'Previous / next tab (a split counts as one)' },
           { keys: ['Alt', '[ / ]'], combo: true, label: 'Change the tab in the focused side of a split' },
           { keys: ['|'], label: 'Split with the tab before it / unsplit (or drag a tab onto a side)' },
           { keys: ['{', '}'], label: 'Focus left / right side of a split' },
-          { keys: ['Alt', 'W'], combo: true, label: 'Close the focused tab' },
+          { keys: ['Alt', 'W'], combo: true, label: 'Close the focused pane' },
+          { keys: ['Shift', 'F10'], combo: true, label: 'Focused tab menu (or Menu key)' },
+        ],
+      },
+      {
+        title: 'View',
+        rows: [
+          { keys: ['\\'], label: 'Toggle sidebar' },
           { keys: ['T'], label: 'Toggle theme' },
           { keys: ['Shift', 'S'], combo: true, label: 'Storage manager' },
           { keys: ['Ctrl', 'Shift', 'Z'], combo: true, label: 'Zen mode (current session only)' },
@@ -5959,13 +5927,6 @@ const SHORTCUT_TABS = [
           { keys: ['?'], label: 'Show this help' },
         ],
       },
-      {
-        title: 'Copy',
-        rows: [
-          { keys: ['Shift', 'C'], combo: true, label: 'Session id' },
-          { keys: ['Ctrl', 'Shift', 'C'], combo: true, label: 'Session name (SendMessage address)' },
-        ],
-      },
     ],
   },
   {
@@ -5980,7 +5941,7 @@ const SHORTCUT_TABS = [
           { 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: ['Shift', 'F10'], combo: true, label: 'Session menu: move to group, fork (or Menu key)' },
           { keys: ['Ctrl', 'D'], combo: true, label: 'Dismiss session (pinned: to Pinned group)' },
           { keys: ['Shift', 'L'], combo: true, label: 'Toggle session log' },
           { keys: ['Shift', 'M'], combo: true, label: 'Open last message' },
@@ -5994,6 +5955,8 @@ const SHORTCUT_TABS = [
           { keys: ['Ctrl', 'Alt', 'N'], combo: true, hubMod: true, label: 'New session' },
           { keys: ['Ctrl', 'Alt', 'R'], combo: true, hubMod: true, label: 'Resume session (claude -r)' },
           { keys: ['Ctrl', 'Alt', 'S'], combo: true, hubMod: true, label: 'Swap to previous session' },
+          { keys: ['Shift', 'C'], combo: true, label: 'Copy session id' },
+          { keys: ['Ctrl', 'Shift', 'C'], combo: true, label: 'Copy session name (SendMessage address)' },
         ],
       },
     ],
@@ -6006,7 +5969,7 @@ const SHORTCUT_TABS = [
         rows: [
           { keys: ['Ctrl', '`'], combo: true, label: 'Show / hide terminal' },
           { keys: ['Alt', '`'], combo: true, label: 'Focus terminal / page' },
-          { keys: ['Alt', 'Shift', '`'], combo: true, label: 'End and close terminal' },
+          { keys: ['Alt', 'Shift', '`'], combo: true, label: 'End terminal' },
           { keys: ['Ctrl', 'Shift', '`'], combo: true, label: 'All terminals' },
           { keys: ['Ctrl', '+/−/0'], combo: true, label: 'Terminal text size' },
         ],
@@ -6020,9 +5983,9 @@ const SHORTCUT_TABS = [
       {
         title: 'Hub',
         rows: [
-          { keys: ['M'], label: 'Jump to marketplace' },
-          { keys: ['$'], label: 'Jump to cost' },
-          { keys: ['Ctrl', 'M'], combo: true, label: 'Jump to memory' },
+          { keys: ['M'], opens: 'project.plugins', label: 'Jump to marketplace' },
+          { keys: ['$'], opens: 'session.cost', label: 'Jump to cost' },
+          { keys: ['Ctrl', 'M'], opens: 'project.memory', combo: true, label: 'Jump to memory' },
           {
             keys: ['Ctrl', 'Alt', '←/→'],
             action: ['hub.prevApp', 'hub.nextApp'],
@@ -6104,8 +6067,14 @@ function buildHelpShortcuts(groups) {
 let helpTab = 0;
 const helpFilter = document.getElementById('help-filter');
 
-// Hub keys do nothing outside Claude Code Hub, so the standalone board drops that tab.
-const helpTabs = () => SHORTCUT_TABS.filter((t) => hub.inHub || !t.hub);
+// Hub keys do nothing outside Claude Code Hub, except the app links that the --*-url flags set.
+const hubRowWorks = (r) => (r.opens ? hub.can(r.opens) : hub.inHub);
+const helpTabs = () =>
+  SHORTCUT_TABS.map((t) =>
+    t.hub
+      ? { ...t, groups: t.groups.map((g) => ({ ...g, rows: g.rows.filter(hubRowWorks) })).filter((g) => g.rows.length) }
+      : t,
+  ).filter((t) => t.groups.length);
 
 // The matching rows of every tab, in their groups.
 function filteredShortcutGroups(query) {
@@ -6113,7 +6082,7 @@ function filteredShortcutGroups(query) {
     .flatMap((t) => t.groups)
     .map((g) => ({
       title: g.title,
-      rows: g.rows.filter((r) => fuzzyMatch(`${r.label} ${helpKeys(r).join(' ')}`, query)),
+      rows: g.rows.filter((r) => fuzzyMatch(`${r.label} ${helpKeys(r).join(' ')}`.replaceAll('−', '-'), query)),
     }))
     .filter((g) => g.rows.length);
 }
@@ -6494,7 +6463,7 @@ function _updateStorageTotal() {
 let _storageKnownSessions = null;
 
 async function _fetchKnownSessions() {
-  const res = await fetch('/api/sessions/known');
+  const res = await api('/api/sessions/known');
   if (!res.ok) throw new Error(`HTTP ${res.status}`);
   const known = new Map((await res.json()).map((s) => [s.id, s]));
   for (const s of sessions) known.set(s.id, s);
@@ -6587,12 +6556,10 @@ function _renderStorageSessions() {
 
   const msgMap = new Map();
   for (const key of store.keys()) {
-    if (!key.startsWith('pinned-messages-')) continue;
-    const sid = key.slice('pinned-messages-'.length);
-    try {
-      const pins = JSON.parse(store.getItem(key)) || [];
-      if (pins.length) msgMap.set(sid, { pins, key });
-    } catch {}
+    if (!key.startsWith(PINNED_MESSAGES_PREFIX)) continue;
+    const sid = key.slice(PINNED_MESSAGES_PREFIX.length);
+    const pins = loadPins(sid);
+    if (pins.length) msgMap.set(sid, { pins });
   }
 
   const allIds = [...new Set([...pinnedIds, ...msgMap.keys()])];
@@ -6672,7 +6639,7 @@ function _storageUnpinSession(id) {
 }
 
 function _storageClearSessionPins(sessionId) {
-  store.removeItem(`pinned-messages-${sessionId}`);
+  store.removeItem(pinsKey(sessionId));
   if (currentSessionId === sessionId) {
     currentPins = [];
     const el = document.getElementById('message-panel-pinned');
@@ -6683,20 +6650,16 @@ function _storageClearSessionPins(sessionId) {
 }
 
 function _storageUnpinMessage(sessionId, pinId) {
-  const key = `pinned-messages-${sessionId}`;
-  try {
-    const pins = JSON.parse(store.getItem(key)) || [];
-    const idx = pins.findIndex((p) => p.id === pinId);
-    if (idx < 0) return;
-    pins.splice(idx, 1);
-    if (pins.length) store.setItem(key, JSON.stringify(pins));
-    else store.removeItem(key);
-    if (currentSessionId === sessionId) {
-      currentPins = pins;
-      const el = document.getElementById('message-panel-pinned');
-      if (el) el.innerHTML = renderPinnedSection();
-    }
-  } catch {}
+  const pins = loadPins(sessionId);
+  const idx = pins.findIndex((p) => p.id === pinId);
+  if (idx < 0) return;
+  pins.splice(idx, 1);
+  savePins(sessionId, pins);
+  if (currentSessionId === sessionId) {
+    currentPins = pins;
+    const el = document.getElementById('message-panel-pinned');
+    if (el) el.innerHTML = renderPinnedSection();
+  }
   _renderStorageTab();
   _updateStorageTotal();
 }
@@ -6796,19 +6759,14 @@ function _storagePreviewScratchpad(key) {
 
 function _storagePreviewPin(sessionId, pinId) {
   closeStorageManager();
-  const key = `pinned-messages-${sessionId}`;
-  try {
-    const pins = JSON.parse(store.getItem(key)) || [];
-    const pin = pins.find((p) => p.id === pinId);
-    if (!pin) return;
-    document.getElementById('msg-detail-pin-btn').style.display = 'none';
-    currentMsgDetailIdx = null;
-    currentPinDetailId = null;
-    _renderPinToDetail(pin);
-    document.getElementById('msg-detail-modal').classList.add('visible');
-  } catch (e) {
-    console.error('_storagePreviewPin error:', e);
-  }
+  const pin = loadPins(sessionId).find((p) => p.id === pinId);
+  if (!pin) return;
+  document.getElementById('msg-detail-pin-btn').style.display = 'none';
+  currentMsgDetailIdx = null;
+  currentPinDetailId = null;
+  syncMsgDetailPaneBtn();
+  _renderPinToDetail(pin);
+  document.getElementById('msg-detail-modal').classList.add('visible');
 }
 
 function _storageDeleteScratchpad(key) {
@@ -6901,7 +6859,7 @@ function _findOrphanedKeys(known) {
   const orphaned = [];
   for (const id of pinnedSessionIds) if (!known.has(id)) orphaned.push(`__pinned__${id}`);
   for (const id of stickySessionIds) if (!known.has(id)) orphaned.push(`__sticky__${id}`);
-  const sessionKeyPrefixes = ['pinned-messages-', PAD_EMOJI_PREFIX, PREVIEW_STORAGE_PREFIX, PAD_LINKED_PREFIX];
+  const sessionKeyPrefixes = [PINNED_MESSAGES_PREFIX, PAD_EMOJI_PREFIX, PREVIEW_STORAGE_PREFIX, PAD_LINKED_PREFIX];
   for (const key of store.keys()) {
     const pad = _parsePadKey(key);
     if (pad?.kind === 'group') {
@@ -6928,23 +6886,28 @@ async function cleanupOrphanedStorage() {
   try {
     known = await _fetchKnownSessions();
   } catch {
-    showToast('Could not list sessions — nothing was cleaned');
+    showToast('Failed to list sessions — nothing was cleaned', 'error');
     return;
   }
   const orphaned = _findOrphanedKeys(known);
-  let pinsChanged = false;
+  const unpinned = new Set();
   for (const key of orphaned) {
     if (key.startsWith('__pinned__')) {
-      pinnedSessionIds.delete(key.slice('__pinned__'.length));
-      pinsChanged = true;
+      const id = key.slice('__pinned__'.length);
+      pinnedSessionIds.delete(id);
+      unpinned.add(id);
     } else if (key.startsWith('__sticky__')) {
-      stickySessionIds.delete(key.slice('__sticky__'.length));
-      pinsChanged = true;
+      const id = key.slice('__sticky__'.length);
+      stickySessionIds.delete(id);
+      unpinned.add(id);
     } else {
       store.removeItem(key);
+      // The server copy would bring the links back on the next merge.
+      if (key.startsWith(PREVIEW_STORAGE_PREFIX)) forgetServerLinkedDoc(key.slice(PREVIEW_STORAGE_PREFIX.length));
     }
   }
-  if (pinsChanged) savePinnedSessions();
+  if (unpinned.size) savePinnedSessions();
+  for (const id of unpinned) offloadSessionPin(id);
   const removed = orphaned.length;
 
   showToast(removed ? `Cleaned ${removed} orphaned item${removed > 1 ? 's' : ''}` : 'No orphaned items found');
@@ -6961,6 +6924,10 @@ function matchKey(e, ...keys) {
   return keys.some((k) => e.key === k || e.code === k);
 }
 
+function shiftOnly(e, code) {
+  return e.code === code && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey;
+}
+
 function dismissSessionFromList(sid) {
   const prevIdx = selectedSessionIdx;
   if (!setSessionDismissed(sid, true)) return;
@@ -7009,10 +6976,10 @@ async function confirmDismissBlockers(sid) {
   const has = [sticky && 'a sticky pin', terminal && 'a running terminal'].filter(Boolean).join(' and ');
   const [title, verb, okLabel] =
     sticky && terminal
-      ? ['Unpin and Close Terminal', 'Unpin, close the terminal', 'Unpin, close and dismiss']
+      ? ['Unpin and End Terminal', 'Unpin, end the terminal', 'Unpin, end and dismiss']
       : sticky
         ? ['Remove Sticky Pin', 'Remove the pin', 'Unpin and dismiss']
-        : ['Close Terminal', 'Close the terminal', 'Close and dismiss'];
+        : ['End Terminal', 'End the terminal', 'End and dismiss'];
   const ok = await confirmModal({ title, message: `"${name}" has ${has}. ${verb} and dismiss the session?`, okLabel });
   if (!ok) return false;
   if (sticky) unpinSession(sid);
@@ -7110,11 +7077,7 @@ document.addEventListener('keydown', (e) => {
     } else if (e.key === '?' && document.getElementById('help-modal').classList.contains('visible')) {
       e.preventDefault();
       closeHelpModal();
-    } else if (
-      e.code === 'KeyM' &&
-      e.shiftKey &&
-      document.getElementById('msg-detail-modal').classList.contains('visible')
-    ) {
+    } else if (shiftOnly(e, 'KeyM') && document.getElementById('msg-detail-modal').classList.contains('visible')) {
       e.preventDefault();
       closeMsgDetailModal();
     } else if (document.getElementById('msg-detail-modal').classList.contains('visible')) {
@@ -7177,6 +7140,10 @@ document.addEventListener('keydown', (e) => {
     e.preventDefault();
     return;
   }
+  if (isMenuKey(e) && ((focusZone === 'sidebar' && sgOpenMenuForKbSelection()) || openFocusedPaneMenu())) {
+    e.preventDefault();
+    return;
+  }
   const plainShift = !e.ctrlKey && !e.altKey && !e.metaKey;
   if (plainShift && e.key === '|' && togglePaneSplit()) {
     e.preventDefault();
@@ -7186,17 +7153,17 @@ document.addEventListener('keydown', (e) => {
     e.preventDefault();
     return;
   }
-  if (e.code === 'KeyL' && e.shiftKey) {
+  if (shiftOnly(e, 'KeyL')) {
     e.preventDefault();
     toggleMessagePanel();
     return;
   }
-  if (e.code === 'KeyP' && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
+  if (shiftOnly(e, 'KeyP')) {
     e.preventDefault();
     openProjectPicker();
     return;
   }
-  if (e.code === 'KeyM' && e.shiftKey) {
+  if (shiftOnly(e, 'KeyM')) {
     e.preventDefault();
     const msgDetailModal = document.getElementById('msg-detail-modal');
     if (msgDetailModal.classList.contains('visible')) {
@@ -7210,12 +7177,12 @@ document.addEventListener('keydown', (e) => {
     }
     return;
   }
-  if (e.code === 'KeyS' && e.shiftKey) {
+  if (shiftOnly(e, 'KeyS')) {
     e.preventDefault();
     showStorageManager();
     return;
   }
-  if (e.code === 'KeyZ' && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
+  if (shiftOnly(e, 'KeyZ')) {
     e.preventDefault();
     toggleZenMode();
     return;
@@ -7271,11 +7238,6 @@ 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;
-    }
   }
 
   // Board navigation
@@ -7340,17 +7302,17 @@ document.addEventListener('keydown', (e) => {
   const cursorEl = focusZone === 'sidebar' ? sessionsList.querySelector('.kb-selected') : null;
   const contextSid =
     focusZone === 'sidebar' ? cursorEl?.dataset.sessionId || currentSessionId : selectedSessionId || currentSessionId;
-  if (matchKey(e, 'KeyP') && !e.shiftKey) {
+  if (matchKey(e, 'KeyP')) {
     e.preventDefault();
     if (contextSid) openPlanForSession(contextSid);
     return;
   }
-  if (matchKey(e, 'KeyI') && !e.shiftKey) {
+  if (matchKey(e, 'KeyI')) {
     e.preventDefault();
     if (contextSid) showSessionInfoModal(contextSid);
     return;
   }
-  if (matchKey(e, 'KeyN') && !e.shiftKey) {
+  if (matchKey(e, 'KeyN')) {
     e.preventDefault();
     const cursorKey = _scratchpadKeyOf(cursorEl);
     if (cursorKey) showScratchpad(cursorKey);
@@ -7368,13 +7330,13 @@ document.addEventListener('keydown', (e) => {
     openMarketplace(mSession?.project);
     return;
   }
-  if (e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && e.key === 'm') {
+  if (ClaudeHub.comboOf(e) === 'ctrl+m') {
     e.preventDefault();
     const mSession = contextSid ? sessions.find((s) => s.id === contextSid) : null;
     openMemory(mSession?.project);
     return;
   }
-  if (e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && e.key === 'd') {
+  if (ClaudeHub.comboOf(e) === 'ctrl+d') {
     e.preventDefault();
     if (!contextSid) return;
     dismissSession(contextSid);
@@ -7394,10 +7356,7 @@ document.addEventListener('keydown', (e) => {
       showToast('No live session name: the session is not running');
       return;
     }
-    navigator.clipboard
-      .writeText(text)
-      .then(() => showToast(`Copied ${label}: ${e.ctrlKey ? text : text.slice(0, 8)}`, 'success'))
-      .catch(() => showToast(`Failed to copy ${label}`));
+    copyText(text, label, `Copied ${label}: ${e.ctrlKey ? text : text.slice(0, 8)}`);
     return;
   }
   if (matchKey(e, 'KeyR')) {
@@ -8034,7 +7993,7 @@ async function sendReview() {
   const items = reviewItems();
   if (!items.length) return;
   try {
-    const res = await terminalFetch(`/api/sessions/${encodeURIComponent(sessionId)}/review`, 'POST', {
+    const res = await terminalFetch(apiPath`/api/sessions/${sessionId}/review`, 'POST', {
       source,
       comments: items.map(({ quote, comment, context }) => ({ quote, comment, ...context })),
     });
@@ -8044,14 +8003,19 @@ async function sendReview() {
     else if (data.delivered === 'terminal') showToast('Pasted into the terminal: press Enter there to send', 'info');
     else {
       const { markdown } = data;
-      const copy = () => navigator.clipboard.writeText(markdown).catch(() => {});
+      const copy = async () => {
+        const copied = await navigator.clipboard.writeText(markdown).then(
+          () => true,
+          () => false,
+        );
+        showToast(
+          copied ? 'Copied the review. Paste it into the session.' : 'Failed to copy the review',
+          'info',
+          { label: 'Copy again', onClick: copy },
+          'Sessions get reviews directly when the cck plugin runs there and board events are on.',
+        );
+      };
       await copy();
-      showToast(
-        'Review copied. Paste it into the session.',
-        'info',
-        { label: 'Copy again', onClick: copy },
-        'Run /claude-code-kanban:follow there to send reviews directly.',
-      );
     }
     clearReviewDrafts(key);
     if (activeReview?.key === key) onSent?.();
@@ -8066,12 +8030,8 @@ const PREVIEW_STORAGE_PREFIX = 'preview-paths-';
 let currentPreviewPath = null;
 
 function readStoredList(key) {
-  try {
-    const arr = JSON.parse(store.getItem(key) || '[]');
-    return Array.isArray(arr) ? arr : [];
-  } catch {
-    return [];
-  }
+  const arr = store.readJson(key);
+  return Array.isArray(arr) ? arr : [];
 }
 
 function getSessionPreviewPaths(sessionId) {
@@ -8105,7 +8065,7 @@ function removeSessionPreviewPath(sessionId, filePath) {
 }
 
 function saveSessionPreviewPaths(sessionId, paths) {
-  if (paths.length) store.setItem(PREVIEW_STORAGE_PREFIX + sessionId, JSON.stringify(paths.slice(0, MAX_LINKED_DOCS)));
+  if (paths.length) store.writeJson(PREVIEW_STORAGE_PREFIX + sessionId, paths.slice(0, MAX_LINKED_DOCS));
   else store.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
 }
 
@@ -8122,14 +8082,7 @@ function setSessionDocLink(sessionId, filePath, unlink) {
 
 // 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;
-  }
+  const bySession = await getJson('/api/document/links', {});
   for (const [sessionId, paths] of Object.entries(bySession || {})) {
     const local = getSessionPreviewPaths(sessionId);
     const known = new Set(local.map(canonicalPath));
@@ -8141,8 +8094,9 @@ async function mergeServerLinkedDocs() {
 }
 
 function forgetServerLinkedDoc(sessionId, filePath) {
-  const q = filePath ? `?path=${encodeURIComponent(filePath)}` : '';
-  fetch(`/api/document/links/${encodeURIComponent(sessionId)}${q}`, { method: 'DELETE' }).catch(() => {});
+  api(apiPath`/api/document/links/${sessionId}`, { method: 'DELETE', query: { path: filePath || null } }).catch(
+    () => {},
+  );
 }
 
 function afterLinkedDocsChanged(sessionId) {
@@ -8223,13 +8177,24 @@ function bindPreviewRelativeLinks(bodyEl, baseOf = () => currentPreviewPath) {
 // backtracking on the main thread, and .jsonl/.log files in a scratchpad reach megabytes.
 const HLJS_MAX_CHARS = 256 * 1024;
 
+function langOfPath(path) {
+  return typeof path === 'string' ? (path.split('.').pop() || '').toLowerCase() : '';
+}
+
+function highlightCode(text, lang) {
+  if (typeof hljs === 'undefined' || text.length > HLJS_MAX_CHARS || !hljs.getLanguage(lang)) return null;
+  try {
+    return hljs.highlight(text, { language: lang, ignoreIllegals: true }).value;
+  } catch (_) {
+    return null;
+  }
+}
+
 function renderSourcePreview(filePath, content) {
-  const ext = (filePath.split('.').pop() || '').toLowerCase();
-  if (typeof hljs !== 'undefined' && content.length <= HLJS_MAX_CHARS && hljs.getLanguage(ext)) {
-    try {
-      const value = hljs.highlight(content, { language: ext, ignoreIllegals: true }).value;
-      return `<pre class="preview-source"><code class="hljs language-${escapeHtml(ext)}">${value}</code></pre>`;
-    } catch (_) {}
+  const ext = langOfPath(filePath);
+  const value = highlightCode(content, ext);
+  if (value != null) {
+    return `<pre class="preview-source"><code class="hljs language-${escapeHtml(ext)}">${value}</code></pre>`;
   }
   return `<pre class="preview-source"><code class="hljs">${escapeHtml(content)}</code></pre>`;
 }
@@ -8304,7 +8269,7 @@ function updatePreviewLinkBtn() {
   btn.style.display = '';
   const linked = isPreviewLinkedToCurrentSession();
   btn.title = linked ? 'Unlink from current session' : 'Link to current session';
-  btn.style.color = linked ? 'var(--accent, #5b9a6b)' : '';
+  btn.style.color = linked ? 'var(--accent)' : '';
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
@@ -8359,16 +8324,14 @@ function openPreviewInEditor() {
 async function openPreviewByPath(filePath, base, onUnsupported) {
   if (!filePath) return;
   try {
-    const qs = new URLSearchParams({ path: filePath });
-    if (base) qs.set('base', base);
-    const r = await fetch(`/api/preview?${qs}`);
+    const r = await api('/api/preview', { query: { path: filePath, base: base || null } });
     if (!r.ok) {
-      showToast('Preview file unavailable');
+      showToast('Preview file unavailable', 'error');
       return;
     }
     const data = await r.json();
     if (data.exists === false) {
-      showToast('File not found');
+      showToast('File not found', 'error');
       return;
     }
     if (data.kind === null) {
@@ -8378,7 +8341,7 @@ async function openPreviewByPath(filePath, base, onUnsupported) {
     }
     openPreviewModal(data.path, data.content, data.kind);
   } catch {
-    showToast('Failed to load preview');
+    showToast('Failed to load preview', 'error');
   }
 }
 
@@ -8450,12 +8413,8 @@ async function loadPreviewKinds(sessionId, paths) {
   try {
     await Promise.all(
       pending.map(async (p) => {
-        let kind = null;
-        try {
-          const r = await fetch(`/api/file/resolve?path=${encodeURIComponent(p)}`);
-          if (r.ok) kind = (await r.json()).kind;
-        } catch (_) {}
-        previewKindByPath.set(p, kind);
+        const data = await getJson('/api/file/resolve', {}, { query: { path: p } });
+        previewKindByPath.set(p, data.kind ?? null);
       }),
     );
   } finally {
@@ -8475,21 +8434,18 @@ function getOfferedPadPaths(sessionId) {
 }
 
 function setOfferedPadPaths(sessionId, paths) {
-  store.setItem(PAD_LINKED_PREFIX + sessionId, JSON.stringify(paths));
+  store.writeJson(PAD_LINKED_PREFIX + sessionId, paths);
 }
 
 async function loadSessionPads(sessionId) {
   if (!sessionId || padsFetched.has(sessionId)) return;
   padsFetched.add(sessionId);
-  let pads;
-  try {
-    const r = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/pads`);
-    if (!r.ok) throw new Error(r.status);
-    pads = (await r.json()).pads || [];
-  } catch (_) {
+  const data = await getJson(apiPath`/api/sessions/${sessionId}/pads`);
+  if (!data) {
     padsFetched.delete(sessionId);
     return;
   }
+  const pads = data.pads || [];
   const offered = new Set(getOfferedPadPaths(sessionId).map(canonicalPath));
   const fresh = pads.map((p) => p.path).filter((p) => !offered.has(canonicalPath(p)));
   if (!fresh.length) return;
@@ -8652,15 +8608,10 @@ function makeSectionLoader({ attr, endpoint, pick, innerHtml, ttlMs = 0 }) {
       const cached = store.get(sessionId);
       if (cached && Date.now() - cached.at < ttlMs) return;
       inFlight.add(sessionId);
-      try {
-        const res = await fetch(`/api/sessions/${sessionId}/${endpoint}`);
-        if (!res.ok) return;
-        store.set(sessionId, { at: Date.now(), data: pick(await res.json()) });
-      } catch (_) {
-        return;
-      } finally {
-        inFlight.delete(sessionId);
-      }
+      const data = await getJson(apiPath`/api/sessions/${sessionId}/${endpoint}`);
+      inFlight.delete(sessionId);
+      if (!data) return;
+      store.set(sessionId, { at: Date.now(), data: pick(data) });
       paintSectionSlots(attr, sessionId, innerHtml(sessionId));
     },
   };
@@ -8910,13 +8861,9 @@ async function toggleScratchFolder(sessionId, dirPath) {
   }
   scratchFolders.set(dirPath, { status: 'loading', children: [] });
   scratchFilesSection.repaint(sessionId);
-  let entry = { status: 'error', children: [] };
-  try {
-    const res = await fetch(`/api/sessions/${sessionId}/scratchpad-files?path=${encodeURIComponent(dirPath)}`);
-    if (res.ok) entry = { status: 'ready', children: (await res.json()).files || [] };
-  } catch (_) {
-    // Reads "Failed to load"; closing and reopening the folder retries.
-  }
+  const data = await getJson(apiPath`/api/sessions/${sessionId}/scratchpad-files`, null, { query: { path: dirPath } });
+  // An error entry reads "Failed to load"; closing and reopening the folder retries.
+  const entry = data ? { status: 'ready', children: data.files || [] } : { status: 'error', children: [] };
   // The user may have closed the folder while the request was in flight.
   if (scratchFolders.has(dirPath)) {
     scratchFolders.set(dirPath, entry);
@@ -9017,10 +8964,7 @@ async function linkFileByPath(sessionId, raw, slot) {
     }
   } 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 r = await api('/api/file/resolve', { query: { path: value, base: getSessionBaseDir(sessionId) || null } });
       const data = await r.json().catch(() => ({}));
       if (!r.ok || !data.exists) {
         fail(data.error || 'File not found');
@@ -9247,7 +9191,12 @@ function setupEventSource() {
   connect();
 }
 
-const CONTEXT_COLORS = { green: '#5b9a6b', yellow: '#b8a63e', orange: '#c07840', red: '#b85555' };
+const CONTEXT_COLORS = {
+  green: 'var(--success)',
+  yellow: 'var(--warning)',
+  orange: 'color-mix(in srgb, var(--warning), var(--danger))',
+  red: 'var(--danger)',
+};
 const COST_THRESHOLDS = { green: 0.5, yellow: 2, orange: 5 };
 const MODEL_THRESHOLDS = [
   { match: /sonnet/i, yellow: 120000, orange: 200000, red: 300000 },
@@ -9707,6 +9656,7 @@ function showWaitingDetail() {
   document.getElementById('msg-detail-meta').textContent = meta.join(' · ');
   currentPinDetailId = null;
   updateMsgDetailPinState();
+  syncMsgDetailPaneBtn();
   overlay.classList.add('visible');
 }
 
@@ -9964,10 +9914,7 @@ function renderMarkdown(text) {
 }
 
 function isLightTheme() {
-  const saved = store.getItem('theme');
-  return (
-    document.body.classList.contains('light') || (!saved && window.matchMedia('(prefers-color-scheme: light)').matches)
-  );
+  return document.body.classList.contains('light');
 }
 
 function getMermaidTheme() {
@@ -10073,28 +10020,13 @@ async function copyAgentTabActive(groupId, btn) {
   copyAgentTab(key, btn);
 }
 
-const ownerColors = [
-  { bg: 'rgba(37, 99, 235, 0.14)', color: '#1d5bbf' }, // blue
-  { bg: 'rgba(168, 85, 247, 0.14)', color: '#7c3aed' }, // purple
-  { bg: 'rgba(14, 165, 133, 0.14)', color: '#0d7d65' }, // teal
-  { bg: 'rgba(220, 80, 30, 0.14)', color: '#c04a1a' }, // red-orange
-  { bg: 'rgba(202, 138, 4, 0.14)', color: '#92700c' }, // amber
-  { bg: 'rgba(219, 39, 119, 0.14)', color: '#b5246a' }, // pink
-  { bg: 'rgba(22, 163, 74, 0.14)', color: '#15803d' }, // green
-  { bg: 'rgba(99, 102, 241, 0.14)', color: '#4f46e5' }, // indigo
-];
-const namedColorMap = {
-  red: { bg: 'rgba(239, 68, 68, 0.14)', color: '#dc2626' },
-  blue: { bg: 'rgba(37, 99, 235, 0.14)', color: '#1d5bbf' },
-  green: { bg: 'rgba(22, 163, 74, 0.14)', color: '#15803d' },
-  purple: { bg: 'rgba(168, 85, 247, 0.14)', color: '#7c3aed' },
-  orange: { bg: 'rgba(234, 88, 12, 0.14)', color: '#c2410c' },
-  pink: { bg: 'rgba(219, 39, 119, 0.14)', color: '#b5246a' },
-  yellow: { bg: 'rgba(202, 138, 4, 0.14)', color: '#92700c' },
-  teal: { bg: 'rgba(14, 165, 133, 0.14)', color: '#0d7d65' },
-  indigo: { bg: 'rgba(99, 102, 241, 0.14)', color: '#4f46e5' },
-  cyan: { bg: 'rgba(6, 182, 212, 0.14)', color: '#0891b2' },
-};
+const ownerColor = (hue) => ({
+  bg: `color-mix(in srgb, var(--owner-${hue}) 13%, transparent)`,
+  color: `var(--owner-${hue})`,
+});
+const OWNER_HUES = ['blue', 'purple', 'teal', 'orange', 'yellow', 'pink', 'green', 'indigo'];
+const ownerColors = OWNER_HUES.map(ownerColor);
+const namedColorMap = Object.fromEntries([...OWNER_HUES, 'red', 'cyan'].map((h) => [h, ownerColor(h)]));
 const ownerColorCache = {};
 const teamColorMap = {};
 function isInternalTask(task) {
@@ -10406,7 +10338,7 @@ document.addEventListener('click', (e) => {
   if (breadcrumb) {
     e.stopPropagation();
     const path = breadcrumb.dataset.fullPath;
-    if (path) navigator.clipboard.writeText(path).catch(() => {});
+    if (path) copyText(path, 'project path');
     return;
   }
 
@@ -10427,13 +10359,13 @@ document.addEventListener('click', (e) => {
 
   if (e.target.closest('.pinned-ungroup-btn')) {
     e.stopPropagation();
-    store.setItem('groupPinnedSessions', 'false');
+    store.setItem(GROUP_PINNED_KEY, 'false');
     renderSessions();
     return;
   }
 
   if (e.target.closest('.pinned-regroup-banner')) {
-    store.setItem('groupPinnedSessions', 'true');
+    store.setItem(GROUP_PINNED_KEY, 'true');
     renderSessions();
     return;
   }
@@ -10449,10 +10381,15 @@ document.addEventListener('click', (e) => {
     }
     if (sgHeader.dataset.transientGroup && e.target.closest('.sg-delete')) {
       const name = sgHeader.dataset.transientGroup;
-      if (confirm(`Delete group “${name}”? Its sessions go back to Projects.`)) {
+      confirmModal({
+        title: 'Delete Group',
+        message: `Delete group “${name}”? Its sessions go back to Projects.`,
+        okLabel: 'Delete',
+      }).then((ok) => {
+        if (!ok) return;
         sgDeleteTransient(name);
         renderSessions();
-      }
+      });
       return;
     }
     const groupId = sgHeader.dataset.groupId;
@@ -10463,10 +10400,15 @@ document.addEventListener('click', (e) => {
         return;
       }
       if (e.target.closest('.sg-delete')) {
-        if (confirm(`Delete group “${group.name}”? Its sessions and projects go back to Projects.`)) {
+        confirmModal({
+          title: 'Delete Group',
+          message: `Delete group “${group.name}”? Its sessions and projects go back to Projects.`,
+          okLabel: 'Delete',
+        }).then((ok) => {
+          if (!ok) return;
           sgDeleteGroup(groupId);
           renderSessions();
-        }
+        });
         return;
       }
     } else if (!sgHeader.dataset.transientGroup) return;
@@ -10511,15 +10453,9 @@ let projectsCache = null;
 
 async function loadProjects() {
   if (!projectsCacheDirty && projectsCache) return projectsCache;
-  let projects;
-  try {
-    const res = await fetch('/api/projects');
-    projects = await res.json();
-  } catch (_e) {
-    projects = [...new Set(sessions.map((s) => s.project).filter(Boolean))]
-      .sort()
-      .map((p) => ({ path: p, modifiedAt: null }));
-  }
+  const projects =
+    (await getJson('/api/projects')) ??
+    [...new Set(sessions.map((s) => s.project).filter(Boolean))].sort().map((p) => ({ path: p, modifiedAt: null }));
   projectsCache = projects;
   projectsCacheDirty = false;
   return projects;
@@ -10558,52 +10494,36 @@ function updateThemeColor(isLight) {
 //#endregion
 
 //#region THEME
-function toggleTheme() {
-  const isCurrentlyLight = document.body.classList.contains('light');
-  if (isCurrentlyLight) {
-    document.body.classList.remove('light');
-    document.body.classList.add('dark-forced');
-    store.setItem('theme', 'dark');
-  } else {
-    document.body.classList.add('light');
-    document.body.classList.remove('dark-forced');
-    store.setItem('theme', 'light');
-  }
-  updateThemeIcon();
-  updateThemeColor(!isCurrentlyLight);
-  syncHljsTheme();
-  reinitMermaidTheme();
-}
-
-function syncHljsTheme() {
-  const light = isLightTheme();
+function applyTheme(light) {
+  document.body.classList.toggle('light', light);
+  document.body.classList.toggle('dark-forced', !light);
+  document.getElementById('theme-icon-dark').style.display = light ? 'none' : 'block';
+  document.getElementById('theme-icon-light').style.display = light ? 'block' : 'none';
+  updateThemeColor(light);
   const dark$ = document.getElementById('hljs-theme-dark');
   const light$ = document.getElementById('hljs-theme-light');
   if (dark$) dark$.disabled = light;
   if (light$) light$.disabled = !light;
+  reinitMermaidTheme();
 }
 
-function updateThemeIcon() {
-  const light = isLightTheme();
-  document.getElementById('theme-icon-dark').style.display = light ? 'none' : 'block';
-  document.getElementById('theme-icon-light').style.display = light ? 'block' : 'none';
+function toggleTheme() {
+  const light = !isLightTheme();
+  store.setItem(THEME_KEY, light ? 'light' : 'dark');
+  applyTheme(light);
 }
 
 function loadTheme() {
-  const saved = store.getItem('theme');
-  if (saved === 'light') {
-    document.body.classList.add('light');
-    document.body.classList.remove('dark-forced');
-  } else if (saved === 'dark') {
-    document.body.classList.remove('light');
-    document.body.classList.add('dark-forced');
-  }
-  // If no saved preference, system prefers-color-scheme CSS handles it
-  updateThemeIcon();
-  updateThemeColor(document.body.classList.contains('light'));
-  syncHljsTheme();
+  const saved = store.getItem(THEME_KEY);
+  const system = window.matchMedia('(prefers-color-scheme: light)');
+  applyTheme(saved ? saved === 'light' : system.matches);
+  // The prefers-color-scheme CSS only covers the first paint; the class decides after that, so it
+  // follows the system until the user picks a theme.
+  system.addEventListener('change', (e) => {
+    if (!store.getItem(THEME_KEY)) applyTheme(e.matches);
+  });
   buildThemeMenu();
-  const colorTheme = store.getItem('color-theme');
+  const colorTheme = store.getItem(COLOR_THEME_KEY);
   if (colorTheme) document.body.dataset.colorTheme = colorTheme;
   syncColorThemeSelect(colorTheme || 'ember');
 }
@@ -10661,10 +10581,10 @@ function syncColorThemeSelect(id) {
 function setColorTheme(id) {
   if (!id || id === 'ember') {
     delete document.body.dataset.colorTheme;
-    store.removeItem('color-theme');
+    store.removeItem(COLOR_THEME_KEY);
   } else {
     document.body.dataset.colorTheme = id;
-    store.setItem('color-theme', id);
+    store.setItem(COLOR_THEME_KEY, id);
   }
   syncColorThemeSelect(id);
 }
@@ -10676,13 +10596,13 @@ function expandSidebar() {
   const sidebar = document.querySelector('.sidebar');
   if (!sidebar.classList.contains('collapsed')) return;
   sidebar.classList.remove('collapsed');
-  store.setItem('sidebar-collapsed', false);
+  store.setItem(SIDEBAR_COLLAPSED_KEY, false);
 }
 
 function toggleSidebar() {
   const sidebar = document.querySelector('.sidebar');
   const collapsed = sidebar.classList.toggle('collapsed');
-  store.setItem('sidebar-collapsed', collapsed);
+  store.setItem(SIDEBAR_COLLAPSED_KEY, collapsed);
   if (collapsed) {
     sidebar.style.width = '';
     if (focusZone === 'sidebar') setFocusZone('board');
@@ -10694,10 +10614,10 @@ function toggleSidebar() {
 
 function loadSidebarState() {
   const sidebar = document.querySelector('.sidebar');
-  if (store.getItem('sidebar-collapsed') === 'true') {
+  if (store.getItem(SIDEBAR_COLLAPSED_KEY) === 'true') {
     sidebar.classList.add('collapsed');
   }
-  const w = store.getItem('sidebar-width');
+  const w = store.getItem(SIDEBAR_WIDTH_KEY);
   if (w) {
     sidebar.style.setProperty('--sidebar-width', w);
   }
@@ -10752,12 +10672,12 @@ function initSidebarResize() {
     },
     onEnd() {
       sidebar.classList.remove('resizing');
-      store.setItem('sidebar-width', sidebar.style.getPropertyValue('--sidebar-width'));
+      store.setItem(SIDEBAR_WIDTH_KEY, sidebar.style.getPropertyValue('--sidebar-width'));
     },
   });
 }
 
-function initPanelResize(panelId, handleId, cssVar, storageKey) {
+function initPanelResize(panelId, handleId, cssVar) {
   const panel = document.getElementById(panelId);
   const handle = document.getElementById(handleId);
   let startWidth;
@@ -10773,7 +10693,7 @@ function initPanelResize(panelId, handleId, cssVar, storageKey) {
     },
     onEnd() {
       panel.classList.remove('resizing');
-      store.setItem(storageKey, panel.style.getPropertyValue(cssVar));
+      store.setItem(panelWidthKey(panelId), panel.style.getPropertyValue(cssVar));
     },
   });
 }
@@ -10783,7 +10703,7 @@ function loadPanelWidths() {
     ['detail-panel', '--detail-panel-width'],
     ['message-panel', '--message-panel-width'],
   ].forEach(([id, cssVar]) => {
-    const w = store.getItem(`${id}-width`);
+    const w = store.getItem(panelWidthKey(id));
     if (w) document.getElementById(id).style.setProperty(cssVar, w);
   });
 }
@@ -10815,29 +10735,18 @@ async function showSessionInfoModal(sessionId) {
   };
 
   const teamPromise = session.isTeam
-    ? fetch(`/api/teams/${session.teamName || sessionId}`)
-        .then((r) => (r.ok ? r.json() : null))
-        .catch(() => null)
+    ? getJson(apiPath`/api/teams/${session.teamName || sessionId}`)
     : Promise.resolve(null);
 
-  const planPromise = fetch(`/api/sessions/${sessionId}/plan`)
-    .then((r) => (r.ok ? r.json() : null))
-    .catch(() => null)
-    .then((data) => {
-      if (data?.content) _pendingPlanPath = data.path || null;
-      return data?.content || null;
-    });
+  const planPromise = getJson(apiPath`/api/sessions/${sessionId}/plan`).then((data) => {
+    if (data?.content) _pendingPlanPath = data.path || null;
+    return data?.content || null;
+  });
 
   const tasksPromise =
-    cachedTasks.length > 0
-      ? Promise.resolve(cachedTasks)
-      : fetch(`/api/sessions/${sessionId}`)
-          .then((r) => (r.ok ? r.json() : []))
-          .catch(() => []);
+    cachedTasks.length > 0 ? Promise.resolve(cachedTasks) : getJson(apiPath`/api/sessions/${sessionId}`, []);
 
-  const parentPromise = fetch(`/api/sessions/${sessionId}/parent`)
-    .then((r) => (r.ok ? r.json() : null))
-    .catch(() => null);
+  const parentPromise = getJson(apiPath`/api/sessions/${sessionId}/parent`);
 
   const [teamConfig, planContent, tasks, parentInfo] = await Promise.all([
     teamPromise,
@@ -10983,13 +10892,13 @@ function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
     _pendingPlanContent = planContent;
     const titleMatch = planContent.match(/^#\s+(.+)$/m);
     const planTitle = titleMatch ? titleMatch[1].trim() : null;
-    html += `<div data-plan-card="1" onclick="openPlanModal()" style="margin-bottom: 16px; padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.15s ease;" onmouseover="this.style.borderColor='var(--accent)';this.style.background='var(--bg-hover)'" onmouseout="this.style.borderColor='var(--border)';this.style.background='var(--bg-elevated)'">
-          <span style="font-size: 14px;">📋</span>
-          <div style="flex: 1; min-width: 0;">
-            <div style="font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;">Plan</div>
-            ${planTitle ? `<div style="font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${escapeHtml(planTitle)}</div>` : ''}
+    html += `<div class="plan-card" data-plan-card="1" onclick="openPlanModal()">
+          <span class="plan-card-icon">📋</span>
+          <div class="plan-card-text">
+            <div class="plan-card-label">Plan</div>
+            ${planTitle ? `<div class="plan-card-title">${escapeHtml(planTitle)}</div>` : ''}
           </div>
-          <svg viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2" style="width: 16px; height: 16px; flex-shrink: 0;"><path d="M9 18l6-6-6-6"/></svg>
+          <svg viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2" class="plan-card-chevron"><path d="M9 18l6-6-6-6"/></svg>
         </div>`;
   }
 
@@ -11053,7 +10962,6 @@ function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
   // Bind to the section, not bodyEl: bodyEl outlives the modal, so listeners on it
   // would stack up once per open and fire the click handler N times.
   bindLinkedDocsHandlers(bodyEl.querySelector('.linked-docs-section'), session.id);
-  const alreadyVisible = modal.classList.contains('visible');
   _infoModalSessionId = session.id;
   updateStickyBtnState();
   updateDismissBtnState();
@@ -11065,21 +10973,6 @@ function showInfoModal(session, teamConfig, tasks, planContent, parentInfo) {
   if (mkBtn) mkBtn.style.display = proj && hub.can('project.plugins') ? '' : 'none';
   if (memBtn) memBtn.style.display = proj && hub.can('project.memory') ? '' : 'none';
   modal.classList.add('visible');
-
-  if (alreadyVisible) return; // re-render during deferred hydration — key handler already attached
-
-  const keyHandler = (e) => {
-    if (e.key === 'Escape') {
-      // An inline editor inside the modal owns Escape first — it reverts itself.
-      if (['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) return;
-      if (document.getElementById('plan-modal').classList.contains('visible')) return;
-      if (document.getElementById('tool-stats-modal').classList.contains('visible')) return;
-      e.preventDefault();
-      closeTeamModal();
-      document.removeEventListener('keydown', keyHandler);
-    }
-  };
-  document.addEventListener('keydown', keyHandler);
 }
 
 function closeTeamModal() {
@@ -11464,30 +11357,23 @@ function initProjectPicker() {
 //#region PLAN
 function refreshOpenPlan() {
   if (!_planSessionId || !document.getElementById('plan-modal').classList.contains('visible')) return;
-  fetch(`/api/sessions/${_planSessionId}/plan`)
-    .then((r) => (r.ok ? r.json() : null))
-    .then((data) => {
-      if (data?.content && (data.content !== _pendingPlanContent || data.path !== _pendingPlanPath)) {
-        _pendingPlanContent = data.content;
-        _pendingPlanPath = data.path || null;
-        document.getElementById('plan-modal-body').innerHTML = renderMarkdown(_pendingPlanContent);
-        mountPlanReview();
-      }
-    })
-    .catch(() => {});
+  getJson(apiPath`/api/sessions/${_planSessionId}/plan`).then((data) => {
+    if (data?.content && (data.content !== _pendingPlanContent || data.path !== _pendingPlanPath)) {
+      _pendingPlanContent = data.content;
+      _pendingPlanPath = data.path || null;
+      document.getElementById('plan-modal-body').innerHTML = renderMarkdown(_pendingPlanContent);
+      mountPlanReview();
+      syncPlanPaneBtn();
+    }
+  });
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function showLoopModal(sessionId) {
   const body = document.getElementById('loop-modal-body');
-  body.innerHTML = '<div style="padding:16px;color:var(--text-secondary);">Loading…</div>';
+  body.innerHTML = '<div class="modal-status">Loading…</div>';
   document.getElementById('loop-modal').classList.add('visible');
-  fetch(`/api/sessions/${sessionId}/loop`)
-    .then((r) => (r.ok ? r.json() : { wakeups: [], crons: [] }))
-    .catch(() => ({ wakeups: [], crons: [] }))
-    .then((data) => {
-      renderLoopModalBody(data);
-    });
+  getJson(apiPath`/api/sessions/${sessionId}/loop`, { wakeups: [], crons: [] }).then(renderLoopModalBody);
 }
 
 function fmtLoopDelay(s) {
@@ -11554,8 +11440,7 @@ function renderLoopModalBody(data) {
   const wakeups = data.wakeups || [];
   const crons = data.crons || [];
   if (!wakeups.length && !crons.length) {
-    body.innerHTML =
-      '<div style="padding:24px;text-align:center;color:var(--text-secondary);">No scheduled wakeups or cron jobs.</div>';
+    body.innerHTML = '<div class="modal-empty">No scheduled wakeups or cron jobs.</div>';
     return;
   }
   const section = (title, items, kind) =>
@@ -11604,23 +11489,19 @@ function showWorkflowModal(sessionId) {
   _workflowSessionId = sessionId;
   setWorkflowHeader('Workflows', null);
   const body = document.getElementById('workflow-modal-body');
-  body.innerHTML = '<div style="padding:16px;color:var(--text-secondary);">Loading…</div>';
+  body.innerHTML = '<div class="modal-status">Loading…</div>';
   document.getElementById('workflow-modal').classList.add('visible');
-  fetch(`/api/sessions/${sessionId}/workflows`)
-    .then((r) => (r.ok ? r.json() : { workflows: [] }))
-    .catch(() => ({ workflows: [] }))
-    .then((data) => {
-      _workflowList = data.workflows || [];
-      if (!_workflowList.length) {
-        setWorkflowHeader('Workflows', null);
-        body.innerHTML =
-          '<div style="padding:24px;text-align:center;color:var(--text-secondary);">No workflow scripts for this session.</div>';
-      } else if (_workflowList.length === 1) {
-        showWorkflowRun(_workflowList[0].id);
-      } else {
-        renderWorkflowPicker(_workflowList);
-      }
-    });
+  getJson(apiPath`/api/sessions/${sessionId}/workflows`, { workflows: [] }).then((data) => {
+    _workflowList = data.workflows || [];
+    if (!_workflowList.length) {
+      setWorkflowHeader('Workflows', null);
+      body.innerHTML = '<div class="modal-empty">No workflow scripts for this session.</div>';
+    } else if (_workflowList.length === 1) {
+      showWorkflowRun(_workflowList[0].id);
+    } else {
+      renderWorkflowPicker(_workflowList);
+    }
+  });
 }
 
 function setWorkflowHeader(name, wfId) {
@@ -11658,17 +11539,14 @@ function showWorkflowRun(wfId) {
   const name = _workflowList.find((w) => w.id === wfId)?.name || wfId;
   setWorkflowHeader(name, wfId);
   const body = document.getElementById('workflow-modal-body');
-  body.innerHTML = '<div style="padding:16px;color:var(--text-secondary);">Loading…</div>';
-  fetch(`/api/sessions/${_workflowSessionId}/workflows/${encodeURIComponent(wfId)}/run`)
-    .then((r) => (r.ok ? r.json() : null))
-    .catch(() => null)
-    .then((run) => {
-      if (!run) {
-        body.innerHTML = '<div style="padding:16px;color:var(--text-secondary);">Failed to load run state.</div>';
-        return;
-      }
-      renderWorkflowRun(run);
-    });
+  body.innerHTML = '<div class="modal-status">Loading…</div>';
+  getJson(apiPath`/api/sessions/${_workflowSessionId}/workflows/${wfId}/run`).then((run) => {
+    if (!run) {
+      body.innerHTML = '<div class="modal-status">Failed to load run state.</div>';
+      return;
+    }
+    renderWorkflowRun(run);
+  });
 }
 
 function fmtTokens(t) {
@@ -11752,27 +11630,24 @@ function renderWorkflowRun(run) {
 
 function loadWorkflowCode(wfId, codeEl) {
   if (!codeEl) return;
-  codeEl.innerHTML = '<div style="padding:8px 0;color:var(--text-secondary);">Loading…</div>';
-  fetch(`/api/sessions/${_workflowSessionId}/workflows/${encodeURIComponent(wfId)}`)
-    .then((r) => (r.ok ? r.json() : null))
-    .catch(() => null)
-    .then((data) => {
-      if (!data?.content) {
-        codeEl.innerHTML = '<div style="padding:8px 0;color:var(--text-secondary);">Failed to load script.</div>';
-        return;
-      }
-      let highlighted;
-      if (typeof hljs !== 'undefined' && hljs.getLanguage('javascript')) {
-        highlighted = hljs.highlight(data.content, { language: 'javascript' }).value;
-      } else {
-        highlighted = escapeHtml(data.content);
-      }
-      codeEl.innerHTML = `<pre><code class="hljs language-javascript">${highlighted}</code></pre>`;
-    });
+  codeEl.innerHTML = '<div class="modal-status-tight">Loading…</div>';
+  getJson(apiPath`/api/sessions/${_workflowSessionId}/workflows/${wfId}`).then((data) => {
+    if (!data?.content) {
+      codeEl.innerHTML = '<div class="modal-status-tight">Failed to load script.</div>';
+      return;
+    }
+    let highlighted;
+    if (typeof hljs !== 'undefined' && hljs.getLanguage('javascript')) {
+      highlighted = hljs.highlight(data.content, { language: 'javascript' }).value;
+    } else {
+      highlighted = escapeHtml(data.content);
+    }
+    codeEl.innerHTML = `<pre><code class="hljs language-javascript">${highlighted}</code></pre>`;
+  });
 }
 
 function openWorkflowInEditor(wfId) {
-  postAndToast(`/api/sessions/${_workflowSessionId}/workflows/${encodeURIComponent(wfId)}/open`, {}, 'in editor');
+  postAndToast(apiPath`/api/sessions/${_workflowSessionId}/workflows/${wfId}/open`, {}, 'in editor');
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
@@ -11788,17 +11663,14 @@ function closeWorkflowModal() {
 }
 
 function openPlanForSession(sid) {
-  fetch(`/api/sessions/${sid}/plan`)
-    .then((r) => (r.ok ? r.json() : null))
-    .catch(() => null)
-    .then((data) => {
-      if (data?.content) {
-        _pendingPlanContent = data.content;
-        _pendingPlanPath = data.path || null;
-        _planSessionId = sid;
-        openPlanModal();
-      }
-    });
+  getJson(apiPath`/api/sessions/${sid}/plan`).then((data) => {
+    if (data?.content) {
+      _pendingPlanContent = data.content;
+      _pendingPlanPath = data.path || null;
+      _planSessionId = sid;
+      openPlanModal();
+    }
+  });
 }
 
 function openPlanModal() {
@@ -11814,6 +11686,7 @@ function openPlanModal() {
     controls.innerHTML = planApprovalControlsHtml('plan-modal-reject-feedback');
     document.querySelector('#plan-modal .modal-footer').prepend(controls);
   }
+  syncPlanPaneBtn();
   document.getElementById('plan-modal').classList.add('visible');
   mountPlanReview();
   const keyHandler = (e) => {
@@ -11848,7 +11721,7 @@ function closePlanModal() {
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function openPlanInEditor() {
   if (!_planSessionId) return;
-  postAndToast(`/api/sessions/${_planSessionId}/plan/open`, {}, 'in editor');
+  postAndToast(apiPath`/api/sessions/${_planSessionId}/plan/open`, {}, 'in editor');
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
@@ -11895,22 +11768,19 @@ let _toolStatsData = null;
 function showToolStatsModal(sessionId) {
   if (!sessionId) return;
   const body = document.getElementById('tool-stats-modal-body');
-  body.innerHTML = '<div style="padding:16px;color:var(--text-secondary);">Loading…</div>';
+  body.innerHTML = '<div class="modal-status">Loading…</div>';
   document.getElementById('tool-stats-modal').classList.add('visible');
 
-  fetch(`/api/sessions/${sessionId}/tool-stats`)
-    .then((r) => (r.ok ? r.json() : null))
-    .catch(() => null)
-    .then((data) => {
-      if (!data) {
-        body.innerHTML = '<div style="padding:16px;color:var(--text-secondary);">Failed to load tool statistics.</div>';
-        return;
-      }
-      _toolStatsSortCol = 'count';
-      _toolStatsSortDir = 'desc';
-      _toolStatsData = data;
-      body.innerHTML = renderToolStatsBody(data);
-    });
+  getJson(apiPath`/api/sessions/${sessionId}/tool-stats`).then((data) => {
+    if (!data) {
+      body.innerHTML = '<div class="modal-status">Failed to load tool statistics.</div>';
+      return;
+    }
+    _toolStatsSortCol = 'count';
+    _toolStatsSortDir = 'desc';
+    _toolStatsData = data;
+    body.innerHTML = renderToolStatsBody(data);
+  });
 }
 
 function renderToolStatsBody(data) {
@@ -11927,7 +11797,7 @@ function renderToolStatsBody(data) {
   if (!tools?.length) {
     return (
       summary +
-      '<div style="padding:24px;text-align:center;color:var(--text-tertiary);">No tool calls recorded in this session.</div>'
+      '<div class="modal-empty" style="color:var(--text-tertiary)">No tool calls recorded in this session.</div>'
     );
   }
 
@@ -12074,10 +11944,7 @@ function paneOwnOrigin(pane) {
 
 async function probePaneFraming(sid, pane) {
   const q = new URLSearchParams({ ancestors: paneAncestors().join(',') });
-  const { frameable } = await paneRequest(
-    'GET',
-    `/api/panes/${encodeURIComponent(sid)}/${encodeURIComponent(pane.id)}/framing?${q}`,
-  );
+  const { frameable } = await paneRequest('GET', `${apiPath`/api/panes/${sid}/${pane.id}/framing`}?${q}`);
   if (frameable === false) paneRefused.add(pane.target);
   return frameable;
 }
@@ -12101,10 +11968,8 @@ function applyPaneLayout(sid, layout) {
 }
 
 async function fetchPaneLayout(sid) {
-  try {
-    const r = await fetch(`/api/panes/${encodeURIComponent(sid)}`);
-    if (r.ok) applyPaneLayout(sid, await r.json());
-  } catch {}
+  const layout = await getJson(apiPath`/api/panes/${sid}`);
+  if (layout) applyPaneLayout(sid, layout);
 }
 
 function refetchPaneLayout() {
@@ -12114,11 +11979,7 @@ function refetchPaneLayout() {
 
 async function paneRequest(method, path, body) {
   try {
-    const r = await fetch(path, {
-      method,
-      headers: body ? { 'Content-Type': 'application/json' } : undefined,
-      body: body ? JSON.stringify(body) : undefined,
-    });
+    const r = await api(path, { method, body });
     const data = await r.json().catch(() => ({}));
     return r.ok ? data : { error: data.error || `${method} failed (${r.status})`, code: data.code };
   } catch {
@@ -12130,11 +11991,8 @@ async function paneRequest(method, path, body) {
 const PANE_STATE_CAP = 20;
 
 function loadPaneState(key) {
-  try {
-    const map = JSON.parse(sessionStorage.getItem(key));
-    if (map && typeof map === 'object') return map;
-  } catch {}
-  return {};
+  const map = tabStore.readJson(key);
+  return map && typeof map === 'object' ? map : {};
 }
 
 // Puts `sid` last, so the cap drops the least recent session. A null value removes it.
@@ -12142,14 +12000,12 @@ function savePaneState(key, map, sid, value) {
   delete map[sid];
   if (value != null) map[sid] = value;
   const capped = Object.fromEntries(Object.entries(map).slice(-PANE_STATE_CAP));
-  try {
-    sessionStorage.setItem(key, JSON.stringify(capped));
-  } catch {}
+  tabStore.writeJson(key, capped);
   return capped;
 }
 
-// `cck.paneActive`: {[sessionId]: paneId}.
-const PANE_ACTIVE_KEY = 'cck.paneActive';
+// {[sessionId]: paneId}.
+const PANE_ACTIVE_KEY = 'pane-active';
 let paneActive = loadPaneState(PANE_ACTIVE_KEY);
 
 function getActivePaneId(sid) {
@@ -12162,10 +12018,10 @@ function setActivePaneId(sid, id) {
   notePairFocus(sid, id);
 }
 
-// `cck.panePairs`: {[sessionId]: [{l, r, f}]}; sides are pane ids or 'board', `f` the side focused
+// {[sessionId]: [{l, r, f}]}; sides are pane ids or 'board', `f` the side focused
 // last. A tab is in one pair at most, and the pair that holds the active tab is the split on
 // screen. Clicks never change a pair; only the split keys and drags do.
-const PANE_PAIRS_KEY = 'cck.panePairs';
+const PANE_PAIRS_KEY = 'pane-pairs';
 const PANE_SPLIT_RATIO_KEY = 'pane-split-ratio';
 let panePairs = loadPaneState(PANE_PAIRS_KEY);
 const clampSplitRatio = (r) => Math.min(0.85, Math.max(0.15, r));
@@ -12302,6 +12158,8 @@ const PANE_ICONS = {
     '<svg class="kind" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 5v14"/><path d="M12 5v8"/><path d="M18 5v11"/></svg>',
   url: '<svg class="kind" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></svg>',
   file: '<svg class="kind" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>',
+  message:
+    '<svg class="kind" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
   warning:
     '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12" y2="17"/></svg>',
 };
@@ -12407,9 +12265,11 @@ function markPaneSide(el, side, focused) {
   el.classList.toggle('pane-focus', focused);
 }
 
+const paneLabel = (p) => (p.kind === 'message' ? p.title : p.target);
+
 function renderPaneTabs(sid, layout, split) {
-  // A rebuild mid-drag removes the dragged tab, and then no dragend fires.
-  if (paneDragId) return;
+  // A rebuild mid-drag removes the dragged tab, and then no dragend fires. Mid-rename it drops the input.
+  if (paneDragId || paneRenameId) return;
   const active = getActivePaneId(sid);
   const state = (id) => (active === id ? ' on' : split && splitSideOf(split, id) ? ' shown' : '');
   const tab = (id, cls, inner, tip) =>
@@ -12430,8 +12290,8 @@ function renderPaneTabs(sid, layout, split) {
     return tab(
       p.id,
       '',
-      `${p.kind === 'url' ? PANE_ICONS.url : PANE_ICONS.file}<span class="pane-title">${escapeHtml(p.title)}</span><span class="state ${escapeHtml(frame)}" title="${escapeHtml(frameTip)}"></span><button class="pane-x" data-close="${escapeHtml(p.id)}" title="Close pane (Alt+W)" aria-label="Close pane">×</button>`,
-      p.target,
+      `${PANE_ICONS[p.kind] || PANE_ICONS.file}<span class="pane-title">${escapeHtml(p.title)}</span><span class="state ${escapeHtml(frame)}" title="${escapeHtml(frameTip)}"></span><button class="pane-x" data-close="${escapeHtml(p.id)}" title="Close pane (Alt+W)" aria-label="Close pane">×</button>`,
+      paneLabel(p),
     );
   };
   const itemHtml = ({ ids, pair }) =>
@@ -12471,7 +12331,8 @@ function markPaneFrameFocus() {
 }
 
 function paneCardHtml(title, text, button) {
-  return `<div class="pane-card"><div class="pane-card-box">${PANE_ICONS.warning}<h3>${escapeHtml(title)}</h3><p>${escapeHtml(text)}</p><button class="btn btn-primary" data-pane-open>${escapeHtml(button)}</button></div></div>`;
+  const btn = button ? `<button class="btn btn-primary" data-pane-open>${escapeHtml(button)}</button>` : '';
+  return `<div class="pane-card"><div class="pane-card-box">${PANE_ICONS.warning}<h3>${escapeHtml(title)}</h3><p>${escapeHtml(text)}</p>${btn}</div></div>`;
 }
 
 // Returns the key of the view to show.
@@ -12534,11 +12395,11 @@ async function loadPaneView(sid, pane, view, scroll) {
     }
     return;
   }
-  let data = null;
-  try {
-    const r = await fetch(`/api/preview?${new URLSearchParams({ path: pane.target })}`);
-    if (r.ok) data = await r.json();
-  } catch {}
+  if (pane.kind === 'message') {
+    await loadMessagePaneView(sid, pane, view);
+    return;
+  }
+  const data = await getJson('/api/preview', null, { query: { path: pane.target } });
   if (data?.kind === 'html') {
     // The frame's origin is opaque, so the page restores its own scroll on load.
     const restore = scroll
@@ -12551,14 +12412,9 @@ async function loadPaneView(sid, pane, view, scroll) {
     return;
   }
   if (data?.kind) {
-    const doc = document.createElement('div');
-    doc.className = 'pane-doc';
-    doc.dataset.path = data.path;
-    const body = document.createElement('div');
-    body.className = 'pane-doc-body rendered-md modal-zoomable';
+    const body = appendPaneDoc(view);
+    body.parentElement.dataset.path = data.path;
     renderPreviewContent(body, data.path, data.content, data.kind);
-    doc.append(body, paneDocGrip(doc));
-    view.appendChild(doc);
     attachPaneReview(view, sid, fileReviewOpts(data.path, data.kind, body, null));
     return;
   }
@@ -12571,6 +12427,49 @@ async function loadPaneView(sid, pane, view, scroll) {
   view.insertAdjacentHTML('beforeend', paneCardHtml(title, text, button));
 }
 
+// The target is the message's pin id, `type|timestamp|text`. The log holds only the latest pages,
+// so a message not loaded comes from the page that ends at its timestamp.
+async function findPaneMessage(sid, target) {
+  const own = (list) => list.find((m) => getPinId(m) === target);
+  if (sid === currentSessionId && !agentLogMode) {
+    const loaded = own(currentMessages);
+    if (loaded) return loaded;
+  }
+  const ts = Date.parse(target.split('|')[1]);
+  if (Number.isFinite(ts)) {
+    try {
+      // Parallel tool calls share one timestamp, so the page is wider than one message.
+      const page = await fetchSessionMessagesPage(sid, { before: new Date(ts + 1).toISOString(), limit: 50 });
+      const found = page && own(page.messages);
+      if (found) return found;
+    } catch {}
+  }
+  return sid === currentSessionId ? own(currentPins) || null : null;
+}
+
+function appendPaneDoc(view) {
+  const doc = document.createElement('div');
+  doc.className = 'pane-doc';
+  const body = document.createElement('div');
+  body.className = 'pane-doc-body rendered-md modal-zoomable';
+  doc.append(body, paneDocGrip(doc));
+  view.appendChild(doc);
+  return body;
+}
+
+async function loadMessagePaneView(sid, pane, view) {
+  const m = await findPaneMessage(sid, pane.target);
+  if (!m) {
+    view.insertAdjacentHTML(
+      'beforeend',
+      paneCardHtml('Message not found', 'The session log no longer has this message.'),
+    );
+    return;
+  }
+  const meta = [msgDetailTitle(m), ...msgDetailMeta(m)].join(' · ');
+  appendPaneDoc(view).innerHTML = `<div class="pane-msg-meta">${escapeHtml(meta)}</div>${msgDetailContent(m)}`;
+}
+
 function onPaneFileChanged(filePath) {
   for (const [key, view] of paneFrames) {
     const [sid, paneId] = key.split('/');
@@ -12727,9 +12626,25 @@ function cyclePaneStrip(step) {
   return true;
 }
 
-function closeFocusedPane() {
+function isMenuKey(e) {
+  return e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey);
+}
+
+function focusedPaneId() {
   const sid = paneSessionId();
-  const id = sid && !wantsTerminal() && getActivePaneId(sid);
+  return sid && !wantsTerminal() && getActivePaneId(sid);
+}
+
+function openFocusedPaneMenu() {
+  const id = focusedPaneId();
+  const tab = id && paneStrip.querySelector(`.pane-tab[data-pane="${CSS.escape(id)}"]`);
+  if (!tab?.offsetParent) return false;
+  const rect = tab.getBoundingClientRect();
+  return openPaneMenu(rect.left + 16, rect.bottom, id);
+}
+
+function closeFocusedPane() {
+  const id = focusedPaneId();
   if (!id || id === 'board') return false;
   closePane(id);
   return true;
@@ -12751,7 +12666,7 @@ async function closePane(paneId) {
   }
   unmountPane(sid, paneId);
   syncPanes();
-  const res = await paneRequest('DELETE', `/api/panes/${encodeURIComponent(sid)}/${encodeURIComponent(paneId)}`);
+  const res = await paneRequest('DELETE', apiPath`/api/panes/${sid}/${paneId}`);
   if (res.layout) applyPaneLayout(sid, res.layout);
   else if (res.code === 'no_pane') fetchPaneLayout(sid);
   else showToast(res.error, 'error');
@@ -12781,21 +12696,39 @@ function reloadPane(id) {
 function openPaneExternally(id) {
   const pane = paneById(id);
   if (!pane) return;
+  if (pane.kind === 'message') {
+    openPaneMessageDetail(pane);
+    return;
+  }
   openLinkedDoc(pane.target, getSessionBaseDir(paneSessionId()));
 }
 
+async function openPaneMessageDetail(pane) {
+  const sid = paneSessionId();
+  const m = await findPaneMessage(sid, pane.target);
+  if (sid !== paneSessionId()) return;
+  if (!m) {
+    showToast('Message not found');
+    return;
+  }
+  const idx = currentMessages.indexOf(m);
+  if (idx >= 0) showMsgDetail(idx);
+  else showUnloadedMsgDetail(m);
+}
+
 function copyPaneTarget(id) {
   const pane = paneById(id);
   if (!pane) return;
-  navigator.clipboard.writeText(pane.target).then(
-    () => showToast(pane.kind === 'url' ? 'URL copied' : 'Path copied', 'success'),
-    () => showToast('Copy failed', 'error'),
-  );
+  copyText(pane.target, pane.kind === 'url' ? 'URL' : 'path');
 }
 
-function closePaneMenu() {
+function closePaneMenu(restore) {
   document.removeEventListener('keydown', paneMenuKeydown, true);
-  document.getElementById('pane-menu')?.remove();
+  const menu = document.getElementById('pane-menu');
+  if (menu) {
+    menu.remove();
+    takeMenuFocus(restore);
+  }
 }
 
 function paneMenuKeydown(e) {
@@ -12820,7 +12753,7 @@ async function deleteBoardTasks(onlyCompleted) {
   });
   if (!ok) return;
   const q = onlyCompleted ? '?status=completed' : '';
-  const res = await paneRequest('DELETE', `/api/tasks/${encodeURIComponent(sid)}${q}`);
+  const res = await paneRequest('DELETE', `${apiPath`/api/tasks/${sid}`}${q}`);
   if (res.error) {
     showToast(`Failed to delete tasks: ${res.error}`, 'error');
     return;
@@ -12830,6 +12763,42 @@ async function deleteBoardTasks(onlyCompleted) {
   await refreshCurrentView();
 }
 
+let paneRenameId = null;
+
+function beginPaneRename(id) {
+  const pane = paneById(id);
+  const tab = paneStrip.querySelector(`.pane-tab[data-pane="${CSS.escape(id)}"]`);
+  const title = tab?.querySelector('.pane-title');
+  if (!pane || !title) return;
+  paneRenameId = id;
+  tab.draggable = false;
+  const input = document.createElement('input');
+  input.className = 'pane-title-input';
+  input.value = pane.title;
+  input.setAttribute('aria-label', 'Pane title');
+  title.replaceWith(input);
+  input.focus();
+  input.select();
+}
+
+async function endPaneRename(input, save) {
+  const id = paneRenameId;
+  if (!id) return;
+  paneRenameId = null;
+  paneTabsHtml = '';
+  const sid = paneSessionId();
+  const pane = paneById(id);
+  const title = input.value.trim();
+  if (save && sid && pane && title !== pane.title) {
+    const res = await paneRequest('PATCH', apiPath`/api/panes/${sid}/${id}`, {
+      title,
+    });
+    if (res.error) showToast(res.error, 'error');
+    else applyPaneLayout(sid, res.layout);
+  }
+  syncPanes();
+}
+
 const paneMenuItem = (act, label) =>
   `<button class="pane-menu-item" role="menuitem" data-pane-act="${escapeHtml(act)}">${label}</button>`;
 
@@ -12844,22 +12813,26 @@ function openPaneMenu(x, y, id) {
         paneMenuItem('deleteCompleted', 'Delete completed tasks') +
         paneMenuItem('deleteAll', 'Delete all tasks'),
     );
-    return;
+    return true;
   }
   const pane = paneById(id);
-  if (!pane) return;
+  if (!pane) return false;
   const url = pane.kind === 'url';
+  const message = pane.kind === 'message';
+  const label = paneLabel(pane);
   showPaneMenu(
     x,
     y,
     pane.id,
     'Pane actions',
-    `<div class="pane-menu-label" title="${escapeHtml(pane.target)}">${escapeHtml(pane.target)}</div>` +
-      paneMenuItem('copy', url ? 'Copy URL' : 'Copy path') +
-      paneMenuItem('open', url ? 'Open in new tab' : 'Open in preview') +
+    `<div class="pane-menu-label" title="${escapeHtml(label)}">${escapeHtml(label)}</div>` +
+      (message ? '' : paneMenuItem('copy', url ? 'Copy URL' : 'Copy path')) +
+      paneMenuItem('open', url ? 'Open in new tab' : message ? 'Open in message dialog' : 'Open in preview') +
+      paneMenuItem('rename', 'Rename') +
       paneMenuItem('reload', 'Reload') +
       paneMenuItem('close', 'Close pane'),
   );
+  return true;
 }
 
 function showPaneMenu(x, y, id, ariaLabel, html) {
@@ -12880,6 +12853,7 @@ function showPaneMenu(x, y, id, ariaLabel, html) {
 const PANE_MENU_ACTIONS = {
   copy: copyPaneTarget,
   open: openPaneExternally,
+  rename: beginPaneRename,
   reload: reloadPane,
   close: closePane,
   deleteCompleted: () => deleteBoardTasks(true),
@@ -12902,32 +12876,81 @@ async function addPane(raw) {
   const t = sid && paneTargetFrom(raw);
   if (!t) return;
   if (t.error) {
-    showToast(t.error);
+    showToast(t.error, 'error');
     return;
   }
-  const res = await paneRequest('POST', `/api/panes/${encodeURIComponent(sid)}`, {
-    target: t.target,
-    base: getSessionBaseDir(sid) || undefined,
-  });
+  if (!(await postPane(sid, { target: t.target, base: getSessionBaseDir(sid) || undefined }))) return;
+  closePanePop();
+  syncPanes();
+}
+
+// Shows the added pane. True when its session is still on screen, null when the add failed.
+async function postPane(sid, body) {
+  const res = await paneRequest('POST', apiPath`/api/panes/${sid}`, body);
   if (!res.pane) {
     showToast(res.error, 'error');
-    return;
+    return null;
   }
   setActivePaneId(sid, res.pane.id);
   applyPaneLayout(sid, res.layout);
-  if (sid !== paneSessionId()) return;
-  closePanePop();
-  syncPanes();
+  return sid === paneSessionId();
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function openPreviewInPane() {
-  const filePath = currentPreviewPath;
+function openFileInPane(filePath, closeModal) {
   if (!filePath || !paneSessionId()) return;
-  closePreviewModal();
+  closeModal();
   addPane(filePath);
 }
 
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function openPreviewInPane() {
+  openFileInPane(currentPreviewPath, closePreviewModal);
+}
+
+// The plan modal also opens other sessions' plans; the pane goes to the plan's session, wherever it is.
+const planPaneAllowed = () => !!_pendingPlanPath && !!_planSessionId;
+
+function syncPlanPaneBtn() {
+  document.getElementById('plan-pane-btn').style.display = planPaneAllowed() ? '' : 'none';
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+async function openPlanInPane() {
+  if (!planPaneAllowed()) return;
+  const sid = _planSessionId;
+  const target = _pendingPlanPath;
+  closePlanModal();
+  if (sid === paneSessionId()) return addPane(target);
+  if ((await postPane(sid, { target, base: getSessionBaseDir(sid) || undefined })) !== false) return;
+  const s = sessions.find((x) => x.id === sid);
+  showToast(`Plan added to ${s ? sessionDisplayName(s) : 'its session'}`, 'success', {
+    label: 'Open',
+    onClick: () => openSession(sid),
+  });
+}
+
+function msgDetailPaneSource() {
+  if (agentLogMode || !paneSessionId()) return null;
+  if (currentMsgDetailIdx != null) return currentMessages[currentMsgDetailIdx] || null;
+  const pin = currentPinDetailId && currentPins.find((p) => p.id === currentPinDetailId);
+  return pin && pin.type !== 'agent' ? pin : null;
+}
+
+function syncMsgDetailPaneBtn() {
+  document.getElementById('msg-detail-pane-btn').style.display = msgDetailPaneSource()?.timestamp ? '' : 'none';
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+async function openMsgInPane() {
+  const m = msgDetailPaneSource();
+  if (!m?.timestamp) return;
+  const sid = paneSessionId();
+  const d = new Date(m.timestamp);
+  const title = `${msgDetailTitle(m) || 'Message'} ${d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}`;
+  closeMsgDetailModal();
+  if (await postPane(sid, { kind: 'message', target: getPinId(m), title })) syncPanes();
+}
+
 let panePopMatches = [];
 // -1 means Enter adds the typed value.
 let panePopIdx = -1;
@@ -12980,7 +13003,19 @@ function closePanePop() {
   panePop.classList.remove('visible');
 }
 
+paneStrip.addEventListener('keydown', (e) => {
+  const input = e.target.closest?.('.pane-title-input');
+  if (input && (e.key === 'Enter' || e.key === 'Escape')) {
+    e.preventDefault();
+    endPaneRename(input, e.key === 'Enter');
+  }
+});
+paneStrip.addEventListener('focusout', (e) => {
+  const input = e.target.closest?.('.pane-title-input');
+  if (input) endPaneRename(input, true);
+});
 paneStrip.addEventListener('click', (e) => {
+  if (e.target.closest('.pane-title-input')) return;
   const close = e.target.closest('[data-close]');
   if (close) {
     closePane(close.dataset.close);
@@ -13004,7 +13039,8 @@ document.addEventListener('click', (e) => {
   if (!menu) return;
   const act = e.target.closest('.pane-menu-item')?.dataset.paneAct;
   if (act) PANE_MENU_ACTIONS[act](menu.dataset.pane);
-  if (act || !menu.contains(e.target)) closePaneMenu();
+  if (act) closePaneMenu();
+  else if (!menu.contains(e.target)) closePaneMenu(true);
 });
 function focusSideOf(el) {
   if (el?.classList.contains('side-l')) focusPaneSide('l');
@@ -13060,18 +13096,13 @@ paneSplitBox.addEventListener(
 function endPaneDrag() {
   if (!paneDragId) return;
   paneDragId = null;
+  markPaneDrop(null);
   paneSplitBox.classList.remove('dropping');
-  paneStrip.classList.remove('drop-hot');
   for (const el of paneDrop.children) el.classList.remove('hot');
   paneStrip.querySelector('.pane-tab.dragging')?.classList.remove('dragging');
   syncPanes();
 }
 
-function draggedPair() {
-  const sid = paneSessionId();
-  return (sid && paneDragId && pairOf(sid, paneDragId)) || null;
-}
-
 paneStrip.addEventListener('dragstart', (e) => {
   const tab = e.target.closest('.pane-tab');
   if (!tab || !paneSessionId() || wantsTerminal()) return;
@@ -13081,24 +13112,64 @@ paneStrip.addEventListener('dragstart', (e) => {
   tab.classList.add('dragging');
   paneSplitBox.classList.add('dropping');
 });
+
+// A split shows as one strip item, so a drop moves the dragged tab's whole item; the first item
+// holds the board and stays put. Elsewhere on the strip, a split tab's drop ends its split.
+function paneDropAction(e) {
+  const sid = paneSessionId();
+  const tab = e.target.closest?.('.pane-tab');
+  if (!sid || !paneDragId) return null;
+  if (tab) {
+    const [fixed, ...movable] = paneStripItems(sid);
+    const itemOf = (id) => movable.find((it) => it.ids.includes(id));
+    const from = itemOf(paneDragId);
+    const to = itemOf(tab.dataset.pane);
+    if (from && to && from !== to) {
+      const el = to.pair ? tab.closest('.pane-pair') : tab;
+      const box = el.getBoundingClientRect();
+      return { kind: 'move', sid, el, fixed, movable, from, to, after: e.clientX > box.left + box.width / 2 };
+    }
+  }
+  const pair = pairOf(sid, paneDragId);
+  return pair ? { kind: 'unpair', sid, pair } : null;
+}
+
+function markPaneDrop(action) {
+  paneStrip.classList.toggle('drop-hot', action?.kind === 'unpair');
+  for (const el of paneStrip.querySelectorAll('.pane-tab, .pane-pair')) {
+    el.classList.toggle('drop-before', el === action?.el && !action.after);
+    el.classList.toggle('drop-after', el === action?.el && action.after);
+  }
+}
+
+async function movePaneItem({ sid, fixed, movable, from, to, after }) {
+  const items = movable.filter((it) => it !== from);
+  items.splice(items.indexOf(to) + (after ? 1 : 0), 0, from);
+  const order = [fixed, ...items].flatMap((it) => it.ids).filter((id) => id !== 'board');
+  const res = await paneRequest('PATCH', apiPath`/api/panes/${sid}`, { order });
+  if (res.error) showToast(res.error, 'error');
+  else applyPaneLayout(sid, res.layout);
+}
+
 paneStrip.addEventListener('dragend', endPaneDrag);
 paneStrip.addEventListener('dragover', (e) => {
-  if (!draggedPair()) return;
-  e.preventDefault();
-  paneStrip.classList.add('drop-hot');
+  const action = paneDropAction(e);
+  markPaneDrop(action);
+  if (action) e.preventDefault();
 });
 paneStrip.addEventListener('dragleave', (e) => {
-  if (!paneStrip.contains(e.relatedTarget)) paneStrip.classList.remove('drop-hot');
+  if (!paneStrip.contains(e.relatedTarget)) markPaneDrop(null);
 });
 paneStrip.addEventListener('drop', (e) => {
-  const pair = draggedPair();
-  if (!pair) return;
+  const action = paneDropAction(e);
+  if (!action) return;
   e.preventDefault();
-  const sid = paneSessionId();
-  const shown = !!splitSideOf(pair, getActivePaneId(sid));
+  const { sid, pair } = action;
+  const shown = pair && !!splitSideOf(pair, getActivePaneId(sid));
   const keep = shown ? pair[otherSide(splitSideOf(pair, paneDragId))] : null;
   endPaneDrag();
-  unpairPanes(sid, pair, keep);
+  if (action.kind === 'move') movePaneItem(action);
+  else unpairPanes(sid, pair, keep);
 });
 paneDrop.addEventListener('dragover', (e) => {
   if (!paneDragId) return;
@@ -13215,8 +13286,7 @@ panePop.addEventListener('keydown', (e) => {
 // leaving the session view or switching sessions drops only the socket; coming back
 // reattaches and the server replays the screen.
 const TERMINAL_TOKEN_KEY = 'terminal-token';
-// Every config dir's board is served on the hub's one kanban origin, so sessionStorage is shared.
-const TERMINAL_FOCUS_KEY = nsKey('terminal-focus');
+const TERMINAL_FOCUS_KEY = 'terminal-focus';
 const TERMINAL_TOKEN_RE = /^[0-9a-f]{64}$/;
 const TERMINAL_MODES_KEY = 'terminal-sessions';
 const TERMINAL_FONT_KEY = 'terminal-font-size';
@@ -13269,17 +13339,11 @@ function readTerminalToken() {
     history.replaceState(null, '', location.pathname + location.search);
     return m[1];
   }
-  try {
-    return sessionStorage.getItem(TERMINAL_TOKEN_KEY);
-  } catch (_) {
-    return null;
-  }
+  return tabStore.getItem(TERMINAL_TOKEN_KEY);
 }
 
 function storeTerminalToken(token) {
-  try {
-    sessionStorage.setItem(TERMINAL_TOKEN_KEY, token);
-  } catch (_) {}
+  tabStore.setItem(TERMINAL_TOKEN_KEY, token);
 }
 
 let tokenRefresh = null;
@@ -13313,9 +13377,7 @@ function setTerminalMode(sessionId, on) {
   const modes = terminalModes();
   if (on) modes.add(sessionId);
   else modes.delete(sessionId);
-  try {
-    store.setItem(TERMINAL_MODES_KEY, JSON.stringify([...modes].slice(-50)));
-  } catch (_) {}
+  store.writeJson(TERMINAL_MODES_KEY, [...modes].slice(-50));
 }
 
 function wantsTerminal() {
@@ -13378,19 +13440,14 @@ function terminalShortcut(e, probe = false) {
 }
 
 function readSwapPair() {
-  try {
-    const pair = JSON.parse(store.getItem(SWAP_KEY));
-    if (Array.isArray(pair) && pair.length === 2) return pair;
-  } catch {}
-  return [null, null];
+  const pair = readStoredList(SWAP_KEY);
+  return pair.length === 2 ? pair : [null, null];
 }
 
 function setSwapPair(last, previous) {
   lastSessionId = last;
   previousSessionId = previous;
-  try {
-    store.setItem(SWAP_KEY, JSON.stringify([last, previous]));
-  } catch {}
+  store.writeJson(SWAP_KEY, [last, previous]);
 }
 
 async function swapToPreviousSession() {
@@ -13887,18 +13944,13 @@ window.addEventListener('focus', () => {
   });
 });
 window.addEventListener('pagehide', () => {
-  try {
-    if (termState.attached && termState.shown && terminalHadFocus) {
-      sessionStorage.setItem(TERMINAL_FOCUS_KEY, currentSessionId);
-    } else sessionStorage.removeItem(TERMINAL_FOCUS_KEY);
-  } catch (_) {}
+  if (termState.attached && termState.shown && terminalHadFocus) tabStore.setItem(TERMINAL_FOCUS_KEY, currentSessionId);
+  else tabStore.removeItem(TERMINAL_FOCUS_KEY);
 });
 
 function restoreTerminalFocus(sessionId) {
-  try {
-    if (sessionStorage.getItem(TERMINAL_FOCUS_KEY) === sessionId) termState.focusNext = true;
-    sessionStorage.removeItem(TERMINAL_FOCUS_KEY);
-  } catch (_) {}
+  if (tabStore.getItem(TERMINAL_FOCUS_KEY) === sessionId) termState.focusNext = true;
+  tabStore.removeItem(TERMINAL_FOCUS_KEY);
 }
 
 // The terminal stands in for the board, so it takes the board zone however focus arrives
@@ -14093,14 +14145,16 @@ function endTerminalSession() {
 }
 
 // Detaching first means no exit message reaches the pane, so no Resume prompt shows before the board.
-function closeTerminalSession(id = termState.sessionId) {
+// Terminal mode must go too: left on, opening the session again reconnects in 'auto' and resumes claude.
+async function closeTerminalSession(id = termState.sessionId) {
   if (id === termState.sessionId) {
     if (terminalPaneFocused()) leaveTerminalPane();
     detachTerminal();
   }
   setTerminalMode(id, false);
   syncTerminal();
-  return endTerminal(id);
+  await terminalFetch(apiPath`/api/terminals/${id}`, 'DELETE').catch(() => {});
+  dropPlaceholder(id);
 }
 
 function openTerminalManager() {
@@ -14133,13 +14187,9 @@ async function pollTerminalProcStats() {
   if (!isOnScreen()) return;
   let cck;
   let host;
-  try {
-    const res = await fetch('/api/terminals/stats', { cache: 'no-store' });
-    if (!res.ok) return;
-    ({ cck, host, terminals: terminalProcStats } = await res.json());
-  } catch (_) {
-    return;
-  }
+  const stats = await getJson('/api/terminals/stats', null, { cache: 'no-store' });
+  if (!stats) return;
+  ({ cck, host, terminals: terminalProcStats } = stats);
   const parts = [cck && `cck ${formatTerminalProc(cck)}`, host && `terminal host ${formatTerminalProc(host)}`];
   document.getElementById('terminal-manager-stats').textContent = parts.filter(Boolean).join(' · ');
   for (const el of document.querySelectorAll('#terminal-manager-body [data-proc]')) {
@@ -14200,35 +14250,22 @@ async function renderTerminalManager() {
   body.querySelectorAll('[data-end]').forEach((b) => {
     b.onclick = async () => {
       b.disabled = true;
-      await endTerminal(b.dataset.end);
+      await closeTerminalSession(b.dataset.end);
       renderTerminalManager();
     };
   });
 }
 
 async function terminalFetch(url, method, body) {
-  const send = () =>
-    fetch(url, {
-      method,
-      headers: {
-        'X-Terminal-Token': terminalToken || '',
-        ...(body && { 'Content-Type': 'application/json' }),
-      },
-      ...(body && { body: JSON.stringify(body) }),
-    });
+  const send = () => api(url, { method, body, headers: { 'X-Terminal-Token': terminalToken || '' } });
   const res = await send();
   return res.status === 401 && (await refreshTerminalToken()) ? send() : res;
 }
 
-async function endTerminal(id) {
-  await terminalFetch(`/api/terminals/${encodeURIComponent(id)}`, 'DELETE').catch(() => {});
-  dropPlaceholder(id);
-}
-
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 async function endAllTerminals() {
   const buttons = document.querySelectorAll('#terminal-manager-body [data-end]');
-  await Promise.all([...buttons].map((b) => endTerminal(b.dataset.end)));
+  await Promise.all([...buttons].map((b) => closeTerminalSession(b.dataset.end)));
   renderTerminalManager();
 }
 
@@ -14294,23 +14331,21 @@ function mergePlaceholders(list) {
 }
 
 async function loadDispatches() {
-  try {
-    const res = await fetch('/api/dispatch', { cache: 'no-store' });
-    const { running = [] } = await res.json();
-    dispatchSpecs.clear();
-    for (const r of running) {
-      if (!r.session || sessions.some((s) => s.id === r.session && !s.placeholder)) continue;
-      dispatchSpecs.set(r.session, {
-        mode: 'dispatch',
-        cwd: r.cwd,
-        name: r.name,
-        worktree: r.worktree,
-        group: r.group,
-        parent: r.parent,
-        startedAt: r.startedAt,
-      });
-    }
-  } catch (_) {}
+  const data = await getJson('/api/dispatch', null, { cache: 'no-store' });
+  if (!data) return;
+  dispatchSpecs.clear();
+  for (const r of data.running || []) {
+    if (!r.session || sessions.some((s) => s.id === r.session && !s.placeholder)) continue;
+    dispatchSpecs.set(r.session, {
+      mode: 'dispatch',
+      cwd: r.cwd,
+      name: r.name,
+      worktree: r.worktree,
+      group: r.group,
+      parent: r.parent,
+      startedAt: r.startedAt,
+    });
+  }
 }
 
 async function onDispatchUpdate() {
@@ -14377,8 +14412,10 @@ async function restorePendingSessions() {
 }
 
 async function loadTerminals() {
-  const res = await fetch('/api/terminals', { cache: 'no-store' });
-  const list = (await res.json()).sessions || [];
+  const res = await api('/api/terminals', { cache: 'no-store' });
+  const data = await res.json();
+  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+  const list = data.sessions || [];
   runningTerminals = new Set(list.map((t) => t.id));
   pushTerminalClaims();
   renderActivityChip();
@@ -14767,7 +14804,7 @@ if ('serviceWorker' in navigator) {
 
 //#region INIT
 loadTheme();
-if (store.getItem('sessions-filtersCollapsed') === 'true') {
+if (store.getItem(sectionCollapsedKey('sessions-filters')) === 'true') {
   document.getElementById('sessions-filters').classList.add('collapsed');
   document.getElementById('sessions-chevron').classList.add('rotated');
 }
@@ -14806,27 +14843,19 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 loadSidebarState();
-try {
-  const cg = JSON.parse(store.getItem('collapsedGroups') || '[]');
-  // biome-ignore lint/suspicious/useIterableCallbackReturn: forEach side-effect
-  cg.forEach((p) => collapsedProjectGroups.add(p));
-} catch (_) {}
+for (const p of readStoredList(COLLAPSED_GROUPS_KEY)) collapsedProjectGroups.add(p);
 loadSessionGroups();
 initSessionGroupsDnd();
 initSessionPicker();
 initProjectPicker();
-try {
-  const af = JSON.parse(store.getItem('activityFilter') || '[]');
-  // biome-ignore lint/suspicious/useIterableCallbackReturn: forEach side-effect
-  af.forEach((k) => activityFilter.add(k));
-} catch (_) {}
+for (const k of readStoredList(ACTIVITY_FILTER_KEY)) activityFilter.add(k);
 initSidebarResize();
 applyModalZoom();
 loadModalFullscreen();
 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');
+initPanelResize('detail-panel', 'detail-panel-resize', '--detail-panel-width');
+initPanelResize('message-panel', 'message-panel-resize', '--message-panel-width');
 initMessagePanelFull();
 
 const msgContentEl = document.getElementById('message-panel-content');
@@ -14939,12 +14968,7 @@ function pluginWarning(plugin) {
   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')),
-    );
+    btn.addEventListener('click', () => copyText(plugin.installCommand, 'install command'));
   }
   return btn;
 }
@@ -14953,18 +14977,17 @@ function refreshRateLimits() {
   if (footerState.timer) return;
   footerState.timer = setTimeout(() => {
     footerState.timer = null;
-    fetch('/api/rate-limits')
-      .then((r) => r.json())
-      .then((rl) => {
-        scheduleRateLimitReset(rl);
-        const fh = rl?.five_hour?.used_percentage ?? null;
-        const sd = rl?.seven_day?.used_percentage ?? null;
-        const key = `${fh}|${sd}`;
-        if (key === footerState.limitsKey) return;
-        footerState.limitsKey = key;
-        renderSidebarFooter(rl);
-      })
-      .catch(() => {});
+    // The route answers null when no session has reported limits, so failure needs its own value.
+    getJson('/api/rate-limits', false).then((rl) => {
+      if (rl === false) return;
+      scheduleRateLimitReset(rl);
+      const fh = rl?.five_hour?.used_percentage ?? null;
+      const sd = rl?.seven_day?.used_percentage ?? null;
+      const key = `${fh}|${sd}`;
+      if (key === footerState.limitsKey) return;
+      footerState.limitsKey = key;
+      renderSidebarFooter(rl);
+    });
   }, 1500);
 }
 
@@ -14979,15 +15002,12 @@ function scheduleRateLimitReset(rl) {
   const ms = Math.min(...resets) * 1000 - Date.now() + 1000;
   footerState.resetTimer = setTimeout(refreshRateLimits, Math.min(Math.max(ms, 0), 2 ** 31 - 1));
 }
-fetch('/api/version')
-  .then((r) => r.json())
-  .then((d) => {
-    footerState.version = d.version;
-    footerState.plugin = d.plugin ?? null;
-    renderSidebarFooter(null);
-    refreshRateLimits();
-  })
-  .catch(() => {});
+getJson('/api/version', {}).then((d) => {
+  footerState.version = d.version;
+  footerState.plugin = d.plugin ?? null;
+  renderSidebarFooter(null);
+  refreshRateLimits();
+});
 
 const urlState = getUrlState();
 const lastView = loadLastView();
@@ -15014,12 +15034,10 @@ if (urlState.search) {
   document.getElementById('boot-verb').textContent = pickRandom(verbs);
 }
 
-fetch('/api/config')
-  .then((r) => r.json())
+getJson('/api/config')
   .then((c) => {
-    appConfig = c;
+    if (c) appConfig = c;
   })
-  .catch(() => {})
   .then(restorePendingSessions)
   .then(() =>
     fetchSessions(