claude-code-kanban 5.4.0 → 6.1.0

package/public/app.js

@@ -4,7 +4,8 @@ const STORAGE_NS = window.__STORAGE_NS__ ? `${window.__STORAGE_NS__}:` : '';
 // Theme is hub-wide (echoed to every app via hub:theme), so it stays shared across config dirs.
 const GLOBAL_KEYS = new Set(['theme', 'color-theme']);
 const nsKey = (k) => (GLOBAL_KEYS.has(k) ? k : STORAGE_NS + k);
-const { normalizeProjectPath, isExactProjectPath, isExactProjectFilter, projectMatcher } = projectMatch;
+const { normalizeProjectPath, isExactProjectPath, isExactProjectFilter, projectMatcher, sessionProjectKey } =
+  projectMatch;
 const store = {
   keys() {
     const out = [];
@@ -3600,7 +3601,8 @@ function renderSessions() {
     const showCtx = !!session.contextStatus && !zenMode;
     const linkedDocsCount = getSessionPreviewPaths(session.id).length;
     const bookmarksCount = loadPins(session.id).length;
-    const hasScratchpad = _hasScratchpad(_sessionScratchpadKey(session.id));
+    const padEmoji = store.getItem(_padEmojiKey(session.id));
+    const hasScratchpad = !!padEmoji || _hasScratchpad(_sessionScratchpadKey(session.id));
     const tempClass =
       session.hasRecentLog || session.hasRecentActivity || session.inProgress || session.hasWaitingForUser
         ? 'warm'
@@ -3631,7 +3633,7 @@ function renderSessions() {
                 ${isTeam || session.project || showCtx ? `<span class="team-info-btn" onclick="event.stopPropagation(); showSessionInfoModal('${sid}')" title="View session info"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>` : ''}
                 ${renderWorkflowBadge(session)}
                 ${renderLoopBadge(session)}
-                ${hasScratchpad ? `<span class="scratchpad-badge" onclick="event.stopPropagation(); openSessionScratchpad('${sid}')" title="Open scratchpad"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></span>` : ''}
+                ${hasScratchpad ? `<span class="scratchpad-badge${padEmoji ? ' has-emoji' : ''}" onclick="event.stopPropagation(); openSessionScratchpad('${sid}')" title="Open scratchpad">${padEmoji ? escapeHtml(padEmoji) : `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`}</span>` : ''}
                 ${bookmarksCount > 0 ? `<span class="bookmarks-badge" onclick="event.stopPropagation(); openSessionWithBookmarks('${sid}')" title="${bookmarksCount} bookmarked message${bookmarksCount > 1 ? 's' : ''}"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>${bookmarksCount}</span>` : ''}
                 ${linkedDocsCount > 0 ? `<span class="linked-docs-badge" onclick="event.stopPropagation(); showSessionInfoModal('${sid}')" title="${linkedDocsCount} linked document${linkedDocsCount > 1 ? 's' : ''}">${linkSvg(10)}${linkedDocsCount}</span>` : ''}
                 ${session.hasPlan && !session.planSourceSessionId ? `<span class="plan-indicator" onclick="event.stopPropagation(); openPlanForSession('${sid}')" title="View plan">${ICON_PLAN}</span>` : ''}
@@ -3781,7 +3783,7 @@ function renderSessions() {
         // Each session under its own project block, so a worktree session reads as its repo's.
         const byProject = new Map();
         for (const s of bucket) {
-          const key = s.project || '';
+          const key = sessionProjectKey(s) || '';
           if (!byProject.has(key)) byProject.set(key, []);
           byProject.get(key).push(s);
         }
@@ -3844,9 +3846,10 @@ function renderSessions() {
     const groups = new Map();
     const ungrouped = [];
     for (const session of sgRest) {
-      if (session.project) {
-        if (!groups.has(session.project)) groups.set(session.project, []);
-        groups.get(session.project).push(session);
+      const key = sessionProjectKey(session);
+      if (key) {
+        if (!groups.has(key)) groups.set(key, []);
+        groups.get(key).push(session);
       } else {
         ungrouped.push(session);
       }
@@ -3861,12 +3864,13 @@ function renderSessions() {
     // back out restores its old slot instead of jumping to the top.
     const latestByPath = new Map();
     for (const s of filteredSessions) {
-      if (!s.project) continue;
+      const key = sessionProjectKey(s);
+      if (!key) continue;
       const t = new Date(s.modifiedAt).getTime();
-      latestByPath.set(s.project, Math.max(latestByPath.get(s.project) ?? -Infinity, t));
+      latestByPath.set(key, Math.max(latestByPath.get(key) ?? -Infinity, t));
     }
     const byRecency = [...latestByPath.keys()].sort((a, b) => latestByPath.get(b) - latestByPath.get(a));
-    const loadedPaths = new Set(sessions.map((s) => s.project));
+    const loadedPaths = new Set(sessions.map(sessionProjectKey));
     stableGroupOrder = mergeOrder(PROJECT_ORDER_KEY, stableGroupOrder, loadedPaths, byRecency);
     const sortedGroups = stableGroupOrder.filter((p) => groups.has(p)).map((p) => [p, groups.get(p)]);
 
@@ -4407,7 +4411,8 @@ function sgGroupForSession(session) {
 }
 
 function sgUserGroupFor(session) {
-  return sgGroupOf('session', session.id) || (session.project ? sgGroupOf('project', session.project) : null);
+  const project = sessionProjectKey(session);
+  return sgGroupOf('session', session.id) || (project ? sgGroupOf('project', project) : null);
 }
 
 // Transient groups come from the server (`dispatch start --group`) and go when their sessions
@@ -4424,20 +4429,18 @@ function sgTransientGroup(name) {
   return group;
 }
 
-function dispatchedTitle({ parent, outcome }) {
+function dispatchedTitle({ parent }) {
   const starter = parent && sessions.find((s) => s.id === parent);
   const by = starter ? sessionDisplayName(starter) : 'another session';
-  return `Started by ${by}${outcome ? ` · ${outcome}` : ''}${parent ? ' — click to reveal it' : ''}`;
+  return `Started by ${by}${parent ? ' — click to reveal it' : ''}`;
 }
 
 // A user group with the same name takes the session in, so Keep does not split a group in two.
-// With no group of its own, a started session follows its starter into the starter's named group.
 function sgDispatchGroupFor(session) {
   if (sgReleased.has(session.id)) return null;
   const name = session.dispatchGroup;
-  if (name) return sessionGroups.find((g) => g.name.toLowerCase() === name) || sgTransientGroup(name);
-  const starter = session.startedBy && sessions.find((s) => s.id === session.startedBy);
-  return starter ? sgUserGroupFor(starter) : null;
+  if (!name) return null;
+  return sessionGroups.find((g) => g.name.toLowerCase() === name) || sgTransientGroup(name);
 }
 
 function sgKeepTransient(name) {
@@ -4467,7 +4470,8 @@ function sgHostOf(group, session) {
   const m = group.members.find((x) => x.type === 'session' && x.ref === session.id);
   const isMemberProject = (path) => !!path && group.members.some((x) => x.type === 'project' && x.ref === path);
   if (m?.under && isMemberProject(m.under)) return m.under;
-  if (!m?.loose && isMemberProject(session.project)) return session.project;
+  const own = sessionProjectKey(session);
+  if (!m?.loose && isMemberProject(own)) return own;
   return null;
 }
 // `opts.under` places the session under another project block of the group; `opts.loose` lifts it
@@ -4478,9 +4482,9 @@ function sgAssign(groupId, type, ref, opts = {}) {
   sgDetach(type, ref);
   // Pulling a whole project in supersedes the individual placements of its sessions.
   if (type === 'project') {
-    for (const s of sessions) if (s.project === ref) sgDetach('session', s.id);
+    for (const s of sessions) if (sessionProjectKey(s) === ref) sgDetach('session', s.id);
   }
-  const own = type === 'session' ? sessions.find((s) => s.id === ref)?.project : null;
+  const own = type === 'session' ? sessionProjectKey(sessions.find((s) => s.id === ref)) : null;
   // Under its own project block is simply the natural placement - no override needed.
   const under = opts.under && opts.under !== own ? opts.under : null;
   const loose = !under && !!opts.loose;
@@ -4758,7 +4762,7 @@ function sgGroupDropZone(target) {
     return fromHost === path && fromGroupId === pathGroup.id ? null : { zone, groupId: pathGroup.id, under: path };
   }
   // Stacking a session onto its own project block would only fold it back where it sits today.
-  if (dragSession?.project === path) return releasable ? { zone } : null;
+  if (dragSession && sessionProjectKey(dragSession) === path) return releasable ? { zone } : null;
   return { zone, pairWith: path };
 }
 
@@ -4811,7 +4815,11 @@ function sgOnDrop(e) {
     // Stacked onto an ungrouped item: seed a group, then let the user name it in place.
     const target = hit.pairWith
       ? { type: 'project', ref: hit.pairWith, path: hit.pairWith }
-      : { type: 'session', ref: hit.pairSession, path: sessions.find((s) => s.id === hit.pairSession)?.project };
+      : {
+          type: 'session',
+          ref: hit.pairSession,
+          path: sessionProjectKey(sessions.find((s) => s.id === hit.pairSession)),
+        };
     const group = sgCreateGroup(target.path ? target.path.split(/[/\\]/).pop() : '');
     sgAssign(group.id, target.type, target.ref);
     sgAssign(group.id, drag.kind, drag.ref);
@@ -5253,7 +5261,7 @@ function expandActiveGroups({ onlyNew = false } = {}) {
 function uncollapseFor(session) {
   const group = sgGroupForSession(session);
   const keys = [
-    session.project || '__ungrouped__',
+    sessionProjectKey(session) || '__ungrouped__',
     ...pinnedCollapseKeys(session),
     group && sgKey(group.id),
     SECTION_GROUPS,
@@ -5271,7 +5279,11 @@ function pinnedCollapseKeys(session) {
   if (!isInPinnedGroup(session)) return [];
   const group = sgGroupForSession(session);
   const host = sgHostOf(group, session);
-  return [pinKey(session.project || '__ungrouped__'), host && pinKey(host), group && `__pinned_group_${group.id}__`];
+  return [
+    pinKey(sessionProjectKey(session) || '__ungrouped__'),
+    host && pinKey(host),
+    group && `__pinned_group_${group.id}__`,
+  ];
 }
 
 // A card that moves into a collapsed Pinned sub-section would vanish from under the click.
@@ -5791,6 +5803,7 @@ const SHORTCUT_TABS = [
           { keys: ['Enter'], label: 'Toggle task detail panel' },
           { keys: ['D'], label: 'Delete selected task' },
           { keys: ['N'], label: 'Toggle scratchpad (in the sidebar: the item under the cursor)' },
+          { keys: ['Ctrl', 'E'], combo: true, label: 'Set the session scratchpad emoji (in the scratchpad)' },
           { keys: ['R'], label: 'Refresh data' },
           { keys: ['Esc'], label: 'Close panel / clear selection' },
         ],
@@ -6037,6 +6050,140 @@ function _hasScratchpad(key) {
   return !!(store.getItem(key) || '').trim();
 }
 
+// Not under SESSION_PAD_PREFIX: _parsePadKey would read it as a session pad.
+const PAD_EMOJI_PREFIX = 'pad-emoji-';
+const PAD_EMOJIS = [
+  '🔥',
+  '🚧',
+  '🐛',
+  '✅',
+  '⭐',
+  '📌',
+  '💡',
+  '🧪',
+  '🚀',
+  '⚠️',
+  '🔒',
+  '🧹',
+  '📝',
+  '🎯',
+  '🧭',
+  '🛠️',
+  '🔍',
+  '📦',
+  '🎨',
+  '⏳',
+  '❓',
+  '💬',
+  '🧠',
+  '🏁',
+];
+const PAD_EMOJI_COLS = 8;
+const _scratchpadEmojiBtn = document.getElementById('scratchpad-emoji-btn');
+const _scratchpadEmojiPicker = document.getElementById('scratchpad-emoji-picker');
+const _scratchpadEmojiGrid = document.getElementById('scratchpad-emoji-grid');
+const _scratchpadEmojiInput = document.getElementById('scratchpad-emoji-input');
+_scratchpadEmojiGrid.style.gridTemplateColumns = `repeat(${PAD_EMOJI_COLS}, 1fr)`;
+let _scratchpadEmojiCursor = 0;
+
+function _padEmojiKey(sessionId) {
+  return PAD_EMOJI_PREFIX + sessionId;
+}
+
+function _scratchpadEmojiSessionId() {
+  const pad = _parsePadKey(_scratchpadKey() || '');
+  return pad?.kind === 'session' ? pad.id : null;
+}
+
+function _firstGrapheme(s) {
+  const seg = new Intl.Segmenter(undefined, { granularity: 'grapheme' }).segment(s.trim());
+  return seg[Symbol.iterator]().next().value?.segment || '';
+}
+
+function _syncScratchpadEmojiBtn() {
+  const sid = _scratchpadEmojiSessionId();
+  _scratchpadEmojiBtn.hidden = !sid;
+  const emoji = sid ? store.getItem(_padEmojiKey(sid)) : null;
+  _scratchpadEmojiBtn.textContent = emoji || '+';
+  _scratchpadEmojiBtn.classList.toggle('set', !!emoji);
+  _scratchpadEmojiBtn.title = `${emoji ? 'Change' : 'Set'} scratchpad emoji (Ctrl+E)`;
+}
+
+function _markScratchpadEmojiCursor() {
+  _scratchpadEmojiGrid.querySelectorAll('button').forEach((b, i) => {
+    b.classList.toggle('kb', i === _scratchpadEmojiCursor);
+  });
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
+function toggleScratchpadEmojiPicker() {
+  if (_scratchpadEmojiPicker.classList.contains('open')) _closeScratchpadEmojiPicker();
+  else _openScratchpadEmojiPicker();
+}
+
+function _openScratchpadEmojiPicker() {
+  const sid = _scratchpadEmojiSessionId();
+  if (!sid) return;
+  const cur = store.getItem(_padEmojiKey(sid));
+  _scratchpadEmojiCursor = Math.max(0, PAD_EMOJIS.indexOf(cur));
+  _scratchpadEmojiGrid.innerHTML = PAD_EMOJIS.map(
+    (e, i) => `<button type="button" data-i="${i}" class="${e === cur ? 'cur' : ''}">${e}</button>`,
+  ).join('');
+  _markScratchpadEmojiCursor();
+  _scratchpadEmojiInput.value = '';
+  _scratchpadEmojiPicker.classList.add('open');
+  _scratchpadEmojiPicker.focus();
+}
+
+function _closeScratchpadEmojiPicker(refocus = true) {
+  if (!_scratchpadEmojiPicker.classList.contains('open')) return;
+  _scratchpadEmojiPicker.classList.remove('open');
+  if (refocus) _scratchpadTextarea.focus();
+}
+
+function setScratchpadEmoji(value) {
+  const sid = _scratchpadEmojiSessionId();
+  if (!sid) return;
+  const emoji = _firstGrapheme(value || '');
+  if (emoji) store.setItem(_padEmojiKey(sid), emoji);
+  else store.removeItem(_padEmojiKey(sid));
+  _syncScratchpadEmojiBtn();
+  _closeScratchpadEmojiPicker();
+  renderSessions();
+}
+
+_scratchpadEmojiGrid.addEventListener('click', (e) => {
+  const b = e.target.closest('button[data-i]');
+  if (b) setScratchpadEmoji(PAD_EMOJIS[+b.dataset.i]);
+});
+
+// Stops propagation so the global handler does not read Escape as "close the scratchpad".
+_scratchpadEmojiPicker.addEventListener('keydown', (e) => {
+  e.stopPropagation();
+  if (matchKey(e, 'Escape')) {
+    e.preventDefault();
+    _closeScratchpadEmojiPicker();
+    return;
+  }
+  if (e.target === _scratchpadEmojiInput) {
+    if (matchKey(e, 'Enter') && _scratchpadEmojiInput.value.trim()) {
+      e.preventDefault();
+      setScratchpadEmoji(_scratchpadEmojiInput.value);
+    }
+    return;
+  }
+  const moves = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: PAD_EMOJI_COLS, ArrowUp: -PAD_EMOJI_COLS };
+  const move = matchKey(e, e.key) && moves[e.key];
+  if (move) {
+    e.preventDefault();
+    _scratchpadEmojiCursor = Math.min(PAD_EMOJIS.length - 1, Math.max(0, _scratchpadEmojiCursor + move));
+    _markScratchpadEmojiCursor();
+  } else if (matchKey(e, 'Enter')) {
+    e.preventDefault();
+    setScratchpadEmoji(PAD_EMOJIS[_scratchpadEmojiCursor]);
+  }
+});
+
 function _scratchpadKey() {
   if (_scratchpadKeyOverride) return _scratchpadKeyOverride;
   if (currentSessionId) return _sessionScratchpadKey(currentSessionId);
@@ -6073,6 +6220,8 @@ function showScratchpad(keyOverride) {
   if (!key) return;
   _scratchpadTextarea.value = store.getItem(key) || '';
   _scratchpadCharcount.textContent = `${_scratchpadTextarea.value.length} chars`;
+  _syncScratchpadEmojiBtn();
+  _closeScratchpadEmojiPicker(false);
   _scratchpadModal.classList.add('visible');
   _scratchpadTextarea.focus();
 }
@@ -6083,6 +6232,7 @@ function closeScratchpad() {
     _scratchpadSaveTimer = null;
   }
   saveScratchpad();
+  _closeScratchpadEmojiPicker(false);
   _scratchpadKeyOverride = null;
   _scratchpadModal.classList.remove('visible');
 }
@@ -6115,6 +6265,10 @@ _scratchpadTextarea.addEventListener('input', () => {
 // Bound on the textarea: the global handler returns early on TEXTAREA targets.
 _scratchpadTextarea.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') closeScratchpad();
+  else if (e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && e.code === 'KeyE' && _scratchpadEmojiSessionId()) {
+    e.preventDefault();
+    _openScratchpadEmojiPicker();
+  }
 });
 
 // Vimium eats Escape inside a text field and only blurs it, so the page never sees the key.
@@ -6153,8 +6307,21 @@ function _updateStorageTotal() {
   if (el) el.textContent = `${(_getStorageTotalSize() / 1024).toFixed(1)} KB`;
 }
 
-function _getKnownSessionIds() {
-  return new Set(sessions.map((s) => s.id));
+// From the server, because `sessions` is only the sidebar's loaded page (docs/session-scanning.md).
+// Loaded sessions are added for placeholders whose transcript does not exist yet.
+let _storageKnownSessions = null;
+
+async function _fetchKnownSessions() {
+  const res = await fetch('/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);
+  _storageKnownSessions = known;
+  return known;
+}
+
+function _storageSessionMap() {
+  return _storageKnownSessions ?? new Map(sessions.map((s) => [s.id, s]));
 }
 
 function _sessionLabel(session, id) {
@@ -6162,7 +6329,7 @@ function _sessionLabel(session, id) {
 }
 
 function _groupByProject(sessionIds) {
-  const sessionMap = new Map(sessions.map((s) => [s.id, s]));
+  const sessionMap = _storageSessionMap();
   const groups = new Map();
   const orphans = [];
   for (const id of sessionIds) {
@@ -6197,14 +6364,18 @@ function _renderOrphanGroup(count, innerHtml) {
   return _renderProjectGroup('Orphaned', `<span class="storage-item-badge orphan">${count}</span>`, innerHtml);
 }
 
-function showStorageManager() {
+async function showStorageManager() {
+  _storageKnownSessions = null;
   _updateStorageTotal();
-  _updateOrphanedCount();
   document.querySelectorAll('.storage-tab').forEach((t) => {
     t.classList.toggle('active', t.dataset.tab === 'sessions');
   });
-  document.getElementById('storage-modal').classList.add('visible');
+  const modal = document.getElementById('storage-modal');
+  modal.classList.add('visible');
+  const known = await _fetchKnownSessions().catch(() => null);
+  if (!modal.classList.contains('visible')) return;
   _renderStorageTab();
+  if (known) _updateOrphanedCount(known);
 }
 
 function closeStorageManager() {
@@ -6349,20 +6520,31 @@ function _storageUnpinMessage(sessionId, pinId) {
 }
 
 function _renderStorageScratchpads() {
-  const allItems = [];
+  const groupItems = [];
+  const projectItems = [];
+  const scratchBySession = new Map();
+  const sessionItem = (id) => {
+    if (!scratchBySession.has(id))
+      scratchBySession.set(id, { key: _sessionScratchpadKey(id), kind: 'session', id, chars: 0 });
+    return scratchBySession.get(id);
+  };
   for (const key of store.keys()) {
+    if (key.startsWith(PAD_EMOJI_PREFIX)) {
+      sessionItem(key.slice(PAD_EMOJI_PREFIX.length)).emoji = store.getItem(key);
+      continue;
+    }
     const parsed = _parsePadKey(key);
     if (!parsed) continue;
-    allItems.push({ key, ...parsed, chars: (store.getItem(key) || '').length });
+    const chars = (store.getItem(key) || '').length;
+    if (parsed.kind === 'session') sessionItem(parsed.id).chars = chars;
+    else (parsed.kind === 'group' ? groupItems : projectItems).push({ key, ...parsed, chars });
+  }
+  if (!groupItems.length && !projectItems.length && !scratchBySession.size) {
+    return '<div class="storage-empty">No scratchpads</div>';
   }
-  if (!allItems.length) return '<div class="storage-empty">No scratchpads</div>';
 
-  const groupItems = allItems.filter((i) => i.kind === 'group');
-  const projectItems = allItems.filter((i) => i.kind === 'project');
-  const sessionItems = allItems.filter((i) => i.kind === 'session');
-  const sessionIds = sessionItems.map((i) => i.id);
-  const { groups: projectGroups, orphans } = _groupByProject(sessionIds);
-  const scratchBySession = new Map(sessionItems.map((i) => [i.id, i]));
+  const { groups: projectGroups, orphans } = _groupByProject(scratchBySession.keys());
+  const sessionMap = _storageSessionMap();
 
   function renderScratchItem(item) {
     const jsKey = escAttrJs(item.key);
@@ -6375,13 +6557,10 @@ function _renderStorageScratchpads() {
         label = escapeHtml(_projectLabel(item.id));
         break;
       default:
-        label = _sessionLabel(
-          sessions.find((s) => s.id === item.id),
-          item.id,
-        );
+        label = _sessionLabel(sessionMap.get(item.id), item.id);
     }
     return `<div class="storage-item">
-      <span class="storage-item-id" title="${escapeHtml(item.id)}">${label}</span>
+      <span class="storage-item-id" title="${escapeHtml(item.id)}">${item.emoji ? `${escapeHtml(item.emoji)} ` : ''}${label}</span>
       <span class="storage-item-badge">${item.kind}</span>
       <span class="storage-item-meta">${item.chars} chars</span>
       <div class="storage-item-actions">
@@ -6452,6 +6631,11 @@ function _storagePreviewPin(sessionId, pinId) {
 
 function _storageDeleteScratchpad(key) {
   store.removeItem(key);
+  const pad = _parsePadKey(key);
+  if (pad?.kind === 'session' && store.getItem(_padEmojiKey(pad.id))) {
+    store.removeItem(_padEmojiKey(pad.id));
+    renderSessions();
+  }
   _renderStorageTab();
   _updateStorageTotal();
 }
@@ -6530,43 +6714,42 @@ function _storageClearLinkedDocs(sessionId) {
   afterLinkedDocsChanged(sessionId);
 }
 
-function _findOrphanedKeys() {
-  const known = _getKnownSessionIds();
+function _findOrphanedKeys(known) {
   if (!known.size) return [];
   const orphaned = [];
   for (const id of pinnedSessionIds) if (!known.has(id)) orphaned.push(`__pinned__${id}`);
   for (const id of stickySessionIds) if (!known.has(id)) orphaned.push(`__sticky__${id}`);
+  const sessionKeyPrefixes = ['pinned-messages-', PAD_EMOJI_PREFIX, PREVIEW_STORAGE_PREFIX, PAD_LINKED_PREFIX];
   for (const key of store.keys()) {
     const pad = _parsePadKey(key);
     if (pad?.kind === 'group') {
       if (!sgGroupById(pad.id)) orphaned.push(key);
-    } else if (key.startsWith('pinned-messages-')) {
-      if (!known.has(key.slice('pinned-messages-'.length))) orphaned.push(key);
-    } else if (pad?.kind === 'session') {
-      if (!known.has(pad.id)) orphaned.push(key);
-    } else if (key.startsWith(PREVIEW_STORAGE_PREFIX)) {
-      if (!known.has(key.slice(PREVIEW_STORAGE_PREFIX.length))) orphaned.push(key);
-    } else if (key.startsWith(PAD_LINKED_PREFIX)) {
-      if (!known.has(key.slice(PAD_LINKED_PREFIX.length))) orphaned.push(key);
+      continue;
     }
+    const prefix = pad ? null : sessionKeyPrefixes.find((p) => key.startsWith(p));
+    const id = pad?.kind === 'session' ? pad.id : prefix && key.slice(prefix.length);
+    if (id && !known.has(id)) orphaned.push(key);
   }
   return orphaned;
 }
 
-function _updateOrphanedCount() {
+function _updateOrphanedCount(known) {
   const btn = document.getElementById('storage-cleanup-btn');
   if (!btn) return;
-  const count = _findOrphanedKeys().length;
+  const count = _findOrphanedKeys(known).length;
   btn.textContent = count ? `Clean Orphaned (${count})` : 'Clean Orphaned';
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
-function cleanupOrphanedStorage() {
-  if (!sessions.length) {
-    showToast('Sessions not loaded yet — try again after they appear');
+async function cleanupOrphanedStorage() {
+  let known;
+  try {
+    known = await _fetchKnownSessions();
+  } catch {
+    showToast('Could not list sessions — nothing was cleaned');
     return;
   }
-  const orphaned = _findOrphanedKeys();
+  const orphaned = _findOrphanedKeys(known);
   let pinsChanged = false;
   for (const key of orphaned) {
     if (key.startsWith('__pinned__')) {
@@ -6586,7 +6769,7 @@ function cleanupOrphanedStorage() {
   renderSessions();
   _renderStorageTab();
   _updateStorageTotal();
-  _updateOrphanedCount();
+  _updateOrphanedCount(known);
 }
 //#endregion
 
@@ -8632,8 +8815,9 @@ function setupEventSource() {
 const CONTEXT_COLORS = { green: '#5b9a6b', yellow: '#b8a63e', orange: '#c07840', red: '#b85555' };
 const COST_THRESHOLDS = { green: 0.5, yellow: 2, orange: 5 };
 const MODEL_THRESHOLDS = [
-  { match: /sonnet|haiku/i, yellow: 100000, orange: 130000, red: 150000 },
-  { match: /opus/i, yellow: 100000, orange: 200000, red: 700000 },
+  { match: /sonnet/i, yellow: 120000, orange: 200000, red: 300000 },
+  { match: /haiku/i, yellow: 100000, orange: 130000, red: 150000 },
+  { match: /opus/i, yellow: 150000, orange: 250000, red: 400000 },
 ];
 const DEFAULT_THRESHOLDS = { yellow: 100000, orange: 130000, red: 150000 };
 
@@ -8747,6 +8931,73 @@ function formatCost(usd) {
   return `$${usd.toFixed(2)}`;
 }
 
+const CACHE_TTL = { '5m': { ms: 5 * 60000, write: 1.25 }, '1h': { ms: 60 * 60000, write: 2 } };
+// List input price, $ per million tokens. Most specific prefix first.
+const INPUT_PRICE_PER_MTOK = [
+  ['claude-fable-5', 10],
+  ['claude-mythos-5', 10],
+  ['claude-opus-5-5', 4],
+  ['claude-opus-5', 5],
+  ['claude-opus-4', 5],
+  ['claude-sonnet-5', 2],
+  ['claude-sonnet-4', 3],
+  ['claude-haiku-4', 1],
+];
+
+// Same token count Claude Code prices in its own estimated_cache_write_usd.
+function cacheRewrite(usage, modelId, writeRate) {
+  const price = INPUT_PRICE_PER_MTOK.find(([prefix]) => modelId?.startsWith(prefix))?.[1];
+  const tokens =
+    (usage.input_tokens || 0) +
+    (usage.cache_read_input_tokens || 0) +
+    (usage.cache_creation_input_tokens || 0) +
+    (usage.output_tokens || 0);
+  if (!price || !tokens) return null;
+  return { tokens, usd: (tokens / 1e6) * price * writeRate };
+}
+
+function formatCacheLeft(expiresAt, expiredText) {
+  const left = Math.max(0, Math.floor((expiresAt - Date.now()) / 1000));
+  if (left === 0) return { text: expiredText, color: 'var(--text-muted)' };
+  const text = `${Math.floor(left / 60)}:${String(left % 60).padStart(2, '0')}`;
+  const color = left < 120 ? CONTEXT_COLORS.red : left < 300 ? CONTEXT_COLORS.orange : CONTEXT_COLORS.green;
+  return { text, color };
+}
+
+let cacheTimerInterval = null;
+
+function tickCacheTimers() {
+  const els = document.querySelectorAll('.cache-timer');
+  if (!els.length) {
+    clearInterval(cacheTimerInterval);
+    cacheTimerInterval = null;
+    return;
+  }
+  if (!isOnScreen()) return;
+  for (const el of els) {
+    const { text, color } = formatCacheLeft(Number(el.dataset.expires), el.dataset.expiredText);
+    if (el.textContent === text) continue;
+    el.textContent = text;
+    el.style.color = color;
+  }
+}
+
+function renderCacheTimer(lastRequestAt, ttl, usage, modelId) {
+  const cache = CACHE_TTL[ttl];
+  if (!lastRequestAt || !cache) return '';
+  const expiresAt = lastRequestAt + cache.ms;
+  const rewrite = cacheRewrite(usage, modelId, cache.write);
+  const expiredText = rewrite ? `expired · ~${formatCost(rewrite.usd)}` : 'expired';
+  const { text, color } = formatCacheLeft(expiresAt, expiredText);
+  cacheTimerInterval ??= setInterval(tickCacheTimers, 1000);
+  const at = new Date(expiresAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  const cost = rewrite
+    ? ` It writes ${formatTokens(rewrite.tokens / 1000)} tokens again, about ${formatCost(rewrite.usd)} at list price.`
+    : '';
+  const title = `Prompt cache, ${ttl} TTL. Expires at ${at}; the next request after that writes it again.${cost}`;
+  return `<div class="stat-item" title="${escapeHtml(title)}"><span class="stat-label">Cache</span><span class="stat-value cache-timer" data-expires="${expiresAt}" data-expired-text="${escapeHtml(expiredText)}" style="color:${color}">${text}</span></div>`;
+}
+
 function renderContextDetail(session, { tokens = true } = {}) {
   const ctx = getCtx(session);
   if (!ctx) return '';
@@ -8784,6 +9035,7 @@ function renderContextDetail(session, { tokens = true } = {}) {
           <div class="detail-context-stats">
             ${tokenRows}
             <div class="stat-item"><span class="stat-label">Cost</span><span class="stat-value" style="color:${getCostColor(cost.total_cost_usd)}">${formatCost(cost.total_cost_usd)}</span></div>
+            ${renderCacheTimer(raw.cache?.last_request_at, session.cacheTtl, usage, raw.model?.id)}
             ${cost.total_duration_ms != null ? `<div class="stat-item"><span class="stat-label">Duration</span><span class="stat-value">${formatDuration(cost.total_duration_ms)}</span></div>` : ''}
             ${cost.total_api_duration_ms != null ? `<div class="stat-item"><span class="stat-label">API time</span><span class="stat-value">${formatDuration(cost.total_api_duration_ms)}</span></div>` : ''}
             ${cost.total_lines_added != null ? `<div class="stat-item"><span class="stat-label">Lines</span><span class="stat-value"><span style="color:${CONTEXT_COLORS.green}">+${(cost.total_lines_added || 0).toLocaleString()}</span> / <span style="color:${CONTEXT_COLORS.red}">-${(cost.total_lines_removed || 0).toLocaleString()}</span></span></div>` : ''}
@@ -12271,14 +12523,16 @@ function formatTerminalProc(s) {
 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, terminals: terminalProcStats } = await res.json());
+    ({ cck, host, terminals: terminalProcStats } = await res.json());
   } catch (_) {
     return;
   }
-  document.getElementById('terminal-manager-stats').textContent = cck ? `cck ${formatTerminalProc(cck)}` : '';
+  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]')) {
     el.textContent = formatTerminalProc(terminalProcStats[el.dataset.proc]);
   }
@@ -12384,7 +12638,8 @@ const newSpecs = new Map();
 // Sessions another session started (`dispatch start`), shown where they will stay until
 // their transcript appears. Kept apart from newSpecs: their prompt is already sent.
 const dispatchSpecs = new Map();
-const ns = { projects: [], picked: [], matches: [], idx: -1, folder: '', browsing: false, resume: false };
+const ns = { projects: [], picked: [], matches: [], idx: -1, folder: '', busy: false, resume: false };
+const NEW_SESSION_STAY_KEY = 'new-session-stay';
 
 const PLACEHOLDER_NAMES = { pick: 'Resume session', dispatch: 'Started session', new: 'New session' };
 const PLACEHOLDER_HINTS = {
@@ -12400,8 +12655,7 @@ function placeholderSession(id, spec) {
     mode: spec.mode,
     name: spec.name || PLACEHOLDER_NAMES[spec.mode] || PLACEHOLDER_NAMES.new,
     dispatchGroup: spec.group || undefined,
-    startedBy: spec.startedBy || undefined,
-    dispatched: spec.mode === 'dispatch' ? { parent: spec.startedBy || null } : undefined,
+    dispatched: spec.mode === 'dispatch' ? { parent: spec.parent || null } : undefined,
     project: spec.cwd,
     worktree: spec.worktree ? { repo: spec.cwd, name: spec.worktree === true ? 'new' : spec.worktree } : null,
     modifiedAt: new Date(spec.startedAt).toISOString(),
@@ -12435,7 +12689,7 @@ async function loadDispatches() {
         name: r.name,
         worktree: r.worktree,
         group: r.group,
-        startedBy: r.parent,
+        parent: r.parent,
         startedAt: r.startedAt,
       });
     }
@@ -12444,9 +12698,13 @@ async function loadDispatches() {
 
 async function onDispatchUpdate() {
   await loadDispatches();
+  refreshPlaceholders();
+  fetchSessions(false).catch(() => {});
+}
+
+function refreshPlaceholders() {
   sessions = mergePlaceholders(sessions.filter((s) => !s.placeholder));
   renderSessions();
-  fetchSessions(false).catch(() => {});
 }
 
 // With no first message there is no transcript, so an ended placeholder leaves nothing to come back to.
@@ -12525,6 +12783,7 @@ function openNewSession(folder, resume = false) {
   for (const id of ['ns-name', 'ns-wt-name', 'ns-prompt']) document.getElementById(id).value = '';
   document.getElementById('ns-wt').checked = false;
   document.getElementById('ns-model').value = '';
+  document.getElementById('ns-stay').checked = store.getItem(NEW_SESSION_STAY_KEY) === 'true';
   setNewSessionError('');
   const current = viewMode === 'session' ? sessions.find((s) => s.id === currentSessionId)?.project : null;
   setNewSessionFolder(folder || current || '');
@@ -12658,36 +12917,44 @@ function renderNewSessionForm() {
   const problem = newSessionProblem(v);
   setNewSessionError(problem);
   const start = document.getElementById('ns-start');
-  start.disabled = !v.cwd || !!problem || ns.browsing;
+  start.disabled = !v.cwd || !!problem || ns.busy;
   const verb = ns.resume ? 'Resume' : 'Start';
   start.textContent = v.cwd ? `${verb} in ${pathBasename(v.cwd)}` : verb;
 }
 
+// Resolves to the response body, or to { error } with the message for the dialog.
+async function newSessionPost(url, body, failure) {
+  try {
+    const res = await terminalFetch(url, 'POST', body);
+    const out = await res.json().catch(() => ({}));
+    if (res.ok) return out;
+    return { error: res.status === 401 ? STALE_TOKEN_MSG : out.error || `${failure} (${res.status})` };
+  } catch (e) {
+    return { error: e.message };
+  }
+}
+
+function setNewSessionBusy(on) {
+  ns.busy = on;
+  renderNewSessionForm();
+}
+
 async function browseNewSessionFolder() {
-  if (ns.browsing) return;
-  ns.browsing = true;
+  if (ns.busy) return;
   closeFolderList();
   const btn = document.getElementById('ns-browse');
   btn.textContent = 'Opening…';
-  renderNewSessionForm();
-  try {
-    const start = ns.folder || ns.picked[0] || ns.projects[0];
-    const res = await terminalFetch('/api/terminal/pick-folder', 'POST', start ? { start } : null);
-    const body = await res.json().catch(() => ({}));
-    if (res.status === 401) setNewSessionError(STALE_TOKEN_MSG);
-    else if (!res.ok) setNewSessionError(body.error || `Folder dialog failed (${res.status})`);
-    else if (body.path) {
-      ns.picked = [body.path, ...ns.picked.filter((p) => p !== body.path)];
-      setNewSessionFolder(body.path);
-    }
-  } catch (e) {
-    setNewSessionError(e.message);
-  } finally {
-    ns.browsing = false;
-    btn.textContent = 'Browse…';
-    renderNewSessionForm();
-    document.getElementById(ns.folder ? fieldAfterFolder() : 'ns-folder').focus();
+  setNewSessionBusy(true);
+  const start = ns.folder || ns.picked[0] || ns.projects[0];
+  const r = await newSessionPost('/api/terminal/pick-folder', start ? { start } : null, 'Folder dialog failed');
+  if (r.path) {
+    ns.picked = [r.path, ...ns.picked.filter((p) => p !== r.path)];
+    setNewSessionFolder(r.path);
   }
+  btn.textContent = 'Browse…';
+  setNewSessionBusy(false);
+  if (r.error) setNewSessionError(r.error);
+  document.getElementById(ns.folder ? fieldAfterFolder() : 'ns-folder').focus();
 }
 
 function fieldAfterFolder() {
@@ -12696,15 +12963,36 @@ function fieldAfterFolder() {
 
 function startNewSession() {
   const v = newSessionValues();
-  if (!v.cwd || newSessionProblem(v) || ns.browsing) return;
+  if (!v.cwd || newSessionProblem(v) || ns.busy) return;
   const id = crypto.randomUUID();
   newSpecs.set(id, { ...(ns.resume ? { cwd: v.cwd } : v), mode: ns.resume ? 'pick' : 'new', startedAt: Date.now() });
-  sessions = mergePlaceholders(sessions.filter((s) => !s.placeholder));
   setTerminalMode(id, true);
+  if (!ns.resume && document.getElementById('ns-stay').checked) return startNewSessionInBackground(id, v);
+  sessions = mergePlaceholders(sessions.filter((s) => !s.placeholder));
   closeNewSession();
   fetchTasks(id).then(() => sessionsList.querySelector('.session-item.active')?.scrollIntoView({ block: 'nearest' }));
 }
 
+async function startNewSessionInBackground(id, v) {
+  refreshPlaceholders();
+  setNewSessionBusy(true);
+  const r = await newSessionPost('/api/terminal/start', { id, ...v }, 'Start failed');
+  setNewSessionBusy(false);
+  if (r.error) {
+    dropPlaceholder(id);
+    return setNewSessionError(r.error);
+  }
+  // A server started before the page's code changed ignores the id and picks its own.
+  if (r.session !== id) {
+    const spec = newSpecs.get(id);
+    forgetPlaceholder(id);
+    newSpecs.set(r.session, spec);
+    setTerminalMode(r.session, true);
+    refreshPlaceholders();
+  }
+  closeNewSession();
+}
+
 const SpeechRecognitionApi = window.SpeechRecognition || window.webkitSpeechRecognition;
 const promptVoice = { rec: null };
 
@@ -12780,6 +13068,9 @@ function initNewSession() {
     renderNewSessionForm();
     if (e.target.checked) document.getElementById('ns-wt-name').focus();
   });
+  document
+    .getElementById('ns-stay')
+    .addEventListener('change', (e) => store.setItem(NEW_SESSION_STAY_KEY, String(e.target.checked)));
   for (const id of ['ns-name', 'ns-wt-name', 'ns-prompt', 'ns-model']) {
     document.getElementById(id).addEventListener('input', renderNewSessionForm);
   }