claude-code-kanban 5.3.0 → 6.0.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 = [];
@@ -1541,7 +1542,7 @@ function renderWaitingBody(tool, params) {
 const PLAN_REJECT_MSG = 'Plan rejected from the kanban board.';
 
 // Answerable only when the marker carries a request id (written by
-// approval-gate.sh, which is polling for a decision) and the gate hasn't
+// the plugin's mod, which is polling for a decision) and the gate hasn't
 // lapsed past its wait window — older or lapsed markers are only answerable
 // in the terminal.
 function isWaitingAnswerable() {
@@ -1600,9 +1601,9 @@ function rejectWaitingPlan(inputId) {
   respondWaiting({ behavior: 'deny', message: feedback || PLAN_REJECT_MSG });
 }
 
-// UI-driven approvals: POST the decision the blocking approval-gate.sh hook is
-// polling for. First writer wins (D5) — a 409/410 means the ask was answered in
-// the terminal or superseded, so just drop the card.
+// UI-driven approvals: POST the decision the plugin's mod is polling for.
+// First writer wins (D5) — a 409/410 means the ask was answered in the
+// terminal or superseded, so just drop the card.
 async function respondWaiting(payload) {
   if (!currentSessionId || !currentWaiting?.id) return;
   try {
@@ -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 };
 
@@ -8764,7 +8948,7 @@ function renderContextDetail(session, { tokens = true } = {}) {
             <div class="stat-item"><span class="stat-label">Current output</span><span class="stat-value">${formatTokens((usage.output_tokens || 0) / 1000)}</span></div>
             <div class="stat-divider"></div>
             <div class="stat-item"><span class="stat-label">Total input</span><span class="stat-value">${formatTokens(ctx.inputTokens / 1000)}</span></div>
-            <div class="stat-item"><span class="stat-label">Total output</span><span class="stat-value">${formatTokens(ctx.outputTokens / 1000)}</span></div>
+            ${ctx.outputTokens ? `<div class="stat-item"><span class="stat-label">Total output</span><span class="stat-value">${formatTokens(ctx.outputTokens / 1000)}</span></div>` : ''}
             <div class="stat-divider"></div>`
     : '';
 
@@ -8784,9 +8968,9 @@ 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>
-            <div class="stat-item"><span class="stat-label">Duration</span><span class="stat-value">${formatDuration(cost.total_duration_ms)}</span></div>
-            <div class="stat-item"><span class="stat-label">API time</span><span class="stat-value">${formatDuration(cost.total_api_duration_ms)}</span></div>
-            <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>
+            ${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>` : ''}
           </div>
         </div>`;
 }
@@ -12400,8 +12584,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 +12618,7 @@ async function loadDispatches() {
         name: r.name,
         worktree: r.worktree,
         group: r.group,
-        startedBy: r.parent,
+        parent: r.parent,
         startedAt: r.startedAt,
       });
     }

package/public/index.html

@@ -691,8 +691,18 @@
   </div>
   <div id="scratchpad-modal" class="modal-overlay" onclick="closeScratchpad()">
     <div class="modal scratchpad-modal" onclick="event.stopPropagation()">
-      <div class="modal-header">
-        <h3 class="modal-title">Scratchpad</h3>
+      <div class="modal-header scratchpad-header">
+        <div class="scratchpad-title-row">
+          <button id="scratchpad-emoji-btn" class="scratchpad-emoji-btn" type="button" onclick="toggleScratchpadEmojiPicker()"></button>
+          <h3 class="modal-title">Scratchpad</h3>
+        </div>
+        <div id="scratchpad-emoji-picker" class="scratchpad-emoji-picker" tabindex="-1">
+          <div id="scratchpad-emoji-grid" class="scratchpad-emoji-grid"></div>
+          <div class="scratchpad-emoji-row">
+            <input id="scratchpad-emoji-input" class="form-input" maxlength="16" placeholder="Paste" aria-label="Custom emoji">
+            <button type="button" class="btn btn-secondary" onclick="setScratchpadEmoji('')">Clear</button>
+          </div>
+        </div>
         <button class="modal-close" aria-label="Close dialog" onclick="closeScratchpad()">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M18 6L6 18M6 6l12 12"/>

package/public/project-match.js

@@ -23,7 +23,12 @@ const projectMatch = (() => {
       return p === q || (!!repo && normalizeProjectPath(repo) === q);
     };
   }
-  return { normalizeProjectPath, isExactProjectPath, isExactProjectFilter, projectMatcher };
+  // The project a session is listed under. A worktree transcript is filed under the worktree
+  // path, so `session.project` alone would show each worktree as a project of its own.
+  function sessionProjectKey(session) {
+    return session?.worktree?.repo || session?.project || null;
+  }
+  return { normalizeProjectPath, isExactProjectPath, isExactProjectFilter, projectMatcher, sessionProjectKey };
 })();
 
 if (typeof module === 'object' && module.exports) module.exports = projectMatch;