claude-code-kanban 7.14.0 → 7.16.0

package/lib/parsers.js

@@ -673,16 +673,41 @@ function countTranscriptsBornBefore(dir, birthtimeMs) {
 // Cache: jsonlPath -> { ino, size, mtimeMs }, the transcript as it last grew.
 // Claude Code, `claude --resume` and backup tools set a transcript's mtime without writing
 // to it (#50), so only a file that grew, shrank or was replaced counts as activity.
+// When a session exits, Claude Code appends bookkeeping lines (cost-state, last-prompt,
+// mode, ai-title ...) with no `timestamp`; a write of only such lines is not activity either.
 const logActivityCache = new Map();
+const BOOKKEEPING_APPEND_MAX = 64 * 1024;
+
+function isBookkeepingAppend(jsonlPath, from, to) {
+  if (to - from > BOOKKEEPING_APPEND_MAX || from < 1) return false;
+  // Reads from one byte early, so the append is known to start on a line boundary.
+  const buf = Buffer.allocUnsafe(to - from + 1);
+  try {
+    const fd = fs.openSync(jsonlPath, 'r');
+    try { fs.readSync(fd, buf, 0, buf.length, from - 1); } finally { fs.closeSync(fd); }
+  } catch { return false; }
+  const text = buf.toString('utf8');
+  if (text[0] !== '\n' || !text.endsWith('\n') || text.includes('"timestamp":')) return false;
+  return text.slice(1, -1).split('\n').every((line) => {
+    if (!line) return true;
+    try {
+      const obj = JSON.parse(line);
+      return obj !== null && typeof obj === 'object';
+    } catch { return false; }
+  });
+}
 
 function transcriptActivityMs(jsonlPath, stat) {
   const prev = logActivityCache.get(jsonlPath);
-  if (prev && prev.ino === stat.ino && prev.size === stat.size) return prev.mtimeMs;
+  const sameFile = prev && prev.ino === stat.ino;
+  if (sameFile && prev.size === stat.size) return prev.mtimeMs;
+  const quiet = sameFile && stat.size > prev.size && isBookkeepingAppend(jsonlPath, prev.size, stat.size);
+  const mtimeMs = quiet ? prev.mtimeMs : stat.mtimeMs;
   logActivityCache.delete(jsonlPath);
-  logActivityCache.set(jsonlPath, { ino: stat.ino, size: stat.size, mtimeMs: stat.mtimeMs });
+  logActivityCache.set(jsonlPath, { ino: stat.ino, size: stat.size, mtimeMs });
   if (logActivityCache.size > SESSION_INFO_CACHE_MAX) logActivityCache.delete(logActivityCache.keys().next().value);
   sessionCacheDirty = true;
-  return stat.mtimeMs;
+  return mtimeMs;
 }
 
 const sessionCachesDirty = () => sessionCacheDirty;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "7.14.0",
+  "version": "7.16.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "type": "commonjs",

package/public/app.js

@@ -77,7 +77,8 @@ let sessions = [];
 let currentSessionId = null;
 // Kept in the store because a config-dir switch in the hub reloads this page.
 const SWAP_KEY = 'swap-sessions';
-let [lastSessionId, previousSessionId] = readSwapPair();
+const SWAP_HISTORY_MAX = 20;
+let swapHistory = readStoredList(SWAP_KEY).filter(Boolean);
 let currentTasks = [];
 let viewMode = 'session';
 let sessionFilter = FILTER_DEFAULTS.session;
@@ -309,12 +310,13 @@ function apiPath(strings, ...values) {
 
 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;
+  // A Blob goes as-is, and fetch takes its Content-Type from the Blob's type.
+  const json = body != null && !(body instanceof Blob);
   return fetch(qs ? `${path}?${qs}` : path, {
     method,
     cache,
     headers: json ? { 'Content-Type': 'application/json', ...headers } : headers,
-    body: json ? JSON.stringify(body) : undefined,
+    body: json ? JSON.stringify(body) : (body ?? undefined),
   });
 }
 
@@ -369,7 +371,7 @@ async function fetchSessions(includeTasks = true, focusId = currentSessionId) {
       schedulePublishSession();
     }
     // A list too short to scroll gives no scroll event, so fill it until it can scroll.
-    if (sessionsHasMore) setTimeout(loadMoreIfNearEnd);
+    if (sessionsHasMore) setTimeout(() => loadMoreIfNearEnd());
 
     if (includeTasks && searchQuery) await loadSearchTasks();
   } catch (error) {
@@ -418,11 +420,11 @@ function resetSessionPage() {
 }
 
 const LOAD_MORE_MARGIN_PX = 240;
-function loadMoreIfNearEnd() {
-  const { scrollTop, clientHeight, scrollHeight } = sessionsList;
-  if (clientHeight > 0 && scrollTop + clientHeight >= scrollHeight - LOAD_MORE_MARGIN_PX) loadMoreSessions();
+function loadMoreIfNearEnd(el = sessionsList, load = loadMoreSessions) {
+  const { scrollTop, clientHeight, scrollHeight } = el;
+  if (clientHeight > 0 && scrollTop + clientHeight >= scrollHeight - LOAD_MORE_MARGIN_PX) load();
 }
-sessionsList.addEventListener('scroll', loadMoreIfNearEnd, { passive: true });
+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) {
@@ -782,7 +784,7 @@ async function fetchTasks(sessionId) {
     revealedStorageSessionId = null;
   }
   if (currentSessionId && currentSessionId !== sessionId) deferredPinPlacement.delete(currentSessionId);
-  if (lastSessionId !== sessionId) setSwapPair(sessionId, lastSessionId);
+  pushSwapHistory(sessionId);
   const switched = sessionId !== currentSessionId;
   currentSessionId = sessionId;
   markOpenSessionRead();
@@ -6446,6 +6448,7 @@ const SHORTCUT_TABS = [
           { keys: ['I'], label: 'Session info' },
           { keys: ['.'], label: 'Pin / unpin' },
           { keys: ['>'], label: 'Toggle sticky' },
+          { keys: ['Ctrl', 'Shift', '.'], combo: true, label: 'Toggle sticky (from the terminal)' },
           { 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: ['Ctrl', 'Shift', 'L'], combo: true, label: 'Toggle session log' },
@@ -7590,9 +7593,8 @@ function dismissSessionFromList(sid) {
     return;
   }
   // Ctrl+Alt+S would reveal the dismissed session, and revealing restores it.
-  const forget = (x) => (x === sid ? null : x);
-  const fallback = currentSessionId === sid && lastSessionId === sid ? previousSessionId : null;
-  setSwapPair(forget(lastSessionId), forget(previousSessionId));
+  const fallback = currentSessionId === sid && swapHistory[0] === sid ? swapHistory[1] : null;
+  forgetSwapHistory(sid);
   const targetIdx = newItems.length > 0 ? Math.max(0, prevIdx - 1) : -1;
   // If the dismissed session is currently open, navigate to the previous one
   if (currentSessionId === sid || selectedSessionId === sid) {
@@ -12273,6 +12275,52 @@ let spFromTerminal = false;
 let spRenderedQuery = null;
 // Per-open cache: spSource is frozen while the picker is up, so a fetched log stays valid.
 const spPeekCache = new Map();
+// 'board' offers the sidebar's sessions plus a short tail of the newest others; 'all' offers
+// every session, newest first, paged like the sidebar's All filter. Each open starts on 'board'.
+let spScope = 'board';
+let spRecent = { rows: [], limit: 0, hasMore: true, loading: false };
+let spRowEls = [];
+const SP_RECENT_PAGE = 50;
+const SP_RECENT_TAIL = 5;
+
+// The first load asks for the board's count plus the tail, so the tail is there even when
+// the newest sessions are all on the board.
+async function spLoadRecent() {
+  const state = spRecent;
+  if (state.loading || !state.hasMore) return;
+  state.loading = true;
+  state.limit = state.limit ? state.limit + SP_RECENT_PAGE : spSource.length + SP_RECENT_TAIL;
+  try {
+    const res = await api('/api/sessions', { query: { limit: state.limit, pins: 'off' } });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const rows = await res.json();
+    if (state !== spRecent) return;
+    state.rows = rows;
+    state.hasMore = res.headers.get('X-Has-More') === 'true';
+  } catch (error) {
+    console.error('Failed to load recent sessions:', error);
+    state.hasMore = false;
+  } finally {
+    state.loading = false;
+  }
+  if (!isSessionPickerOpen()) return;
+  renderSessionPicker();
+  spLoadMoreNearEnd();
+}
+
+function spSetScope(scope) {
+  spScope = scope;
+  for (const el of document.querySelectorAll('#session-picker-scope [data-scope]')) {
+    el.setAttribute('aria-checked', String(el.dataset.scope === scope));
+  }
+  renderSessionPicker();
+  spLoadMoreNearEnd();
+}
+
+// Also run after each load: a page too short to scroll gives no scroll event.
+function spLoadMoreNearEnd() {
+  if (spScope === 'all') loadMoreIfNearEnd(document.getElementById('session-picker-list'), spLoadRecent);
+}
 
 const spSearch = sessionSearch(() => {
   if (document.getElementById('session-picker-modal').classList.contains('visible')) renderSessionPicker();
@@ -12285,9 +12333,11 @@ function openSessionPicker() {
   spSource = getFilteredSessions().sort((a, b) => Date.parse(b.modifiedAt) - Date.parse(a.modifiedAt));
   spPeekCache.clear();
   spRenderedQuery = null;
+  spRecent = { rows: [], limit: 0, hasMore: true, loading: false };
   document.getElementById('session-picker-modal').classList.add('visible');
-  renderSessionPicker();
+  spSetScope('board');
   input.focus();
+  spLoadRecent();
 }
 
 // refocus: false when a session is being opened, which moves the terminal focus itself.
@@ -12403,29 +12453,39 @@ function spPinHtml(session) {
 function renderSessionPicker() {
   const list = document.getElementById('session-picker-list');
   const query = document.getElementById('session-picker-input').value.trim();
-  // Search rows that arrive for the same query append below, so the cursor stays on its row.
-  const selectedId = query === spRenderedQuery ? spRows[spIdx]?.id : null;
-  spRenderedQuery = query;
-  const local = spSource.filter((s) => spMatches(s, query));
+  // Rows that arrive for the same query and scope append below, so the cursor stays on its row.
+  const renderKey = `${spScope}\n${query}`;
+  const selectedId = renderKey === spRenderedQuery ? spRows[spIdx]?.id : null;
+  spRenderedQuery = renderKey;
+  const all = spScope === 'all';
+  const board = new Set(spSource.map((s) => s.id));
+  const local = (all ? spRecent.rows : spSource).filter((s) => spMatches(s, query));
   const found = spSearch.rows(query, local);
-  spRows = [...local, ...found.rows];
+  const tail = !all && !query ? spRecent.rows.filter((s) => !board.has(s.id)).slice(0, SP_RECENT_TAIL) : [];
+  const extra = [...found.rows, ...tail];
+  spRows = [...local, ...extra];
   if (!spRows.length) {
     spIdx = -1;
-    const empty = found.pending
-      ? 'Searching all sessions…'
-      : spSource.length || query.length >= SESSION_SEARCH_MIN
-        ? 'No session matches'
-        : 'No sessions in the current sidebar filter';
+    spRowEls = [];
+    const empty =
+      found.pending || (all && spRecent.loading)
+        ? 'Searching all sessions…'
+        : all || spSource.length || query.length >= SESSION_SEARCH_MIN
+          ? 'No session matches'
+          : 'No sessions in the current sidebar filter';
     list.innerHTML = `<div class="sp-empty">${empty}</div>`;
     return;
   }
 
-  // Rows past the sidebar list come from the server search and show their full project path.
+  // Rows not on the board show their full project path; in the board scope they also sit below
+  // the board's rows, under a label.
+  const section = !all && extra.length ? '<div class="sp-section">Not on board</div>' : '';
   list.innerHTML = spRows
     .map((s, i) => {
-      const outside = i >= local.length;
+      const outside = !board.has(s.id);
+      const below = !all && i >= local.length;
       const project = s.project ? (outside ? s.project : pathBasename(s.project)) : '';
-      return `<button class="sp-row${s.id === currentSessionId ? ' current' : ''}${outside ? ' outside' : ''} ${sessionBarClass(s)}" data-idx="${i}" title="${escapeHtml(s.project ? `${s.id}\n${s.project}` : s.id)}">
+      return `${below && i === local.length ? section : ''}<button class="sp-row${s.id === currentSessionId ? ' current' : ''}${below ? ' outside' : ''} ${sessionBarClass(s)}" data-idx="${i}" title="${escapeHtml(s.project ? `${s.id}\n${s.project}` : s.id)}">
         ${spDotHtml(s)}
         <span class="sp-name">${escapeHtml(sessionDisplayName(s))}</span>
         <span class="sp-project">${escapeHtml(project)}</span>
@@ -12436,18 +12496,21 @@ function renderSessionPicker() {
       </button>`;
     })
     .join('');
+  // The section label sits between rows, so row index and child index differ.
+  spRowEls = list.querySelectorAll('.sp-row');
+  spIdx = -1;
   const keep = spRows.findIndex((s) => s.id === selectedId);
   spSelect(Math.max(0, keep));
 }
 
 function spSelect(idx) {
-  const list = document.getElementById('session-picker-list');
-  list.children[spIdx]?.classList.remove('selected');
+  spRowEls[spIdx]?.classList.remove('selected');
   spIdx = Math.min(Math.max(idx, 0), spRows.length - 1);
-  const row = list.children[spIdx];
+  const row = spRowEls[spIdx];
   row?.classList.add('selected');
   row?.scrollIntoView({ block: 'nearest' });
   spSchedulePeek();
+  if (spScope === 'all' && spIdx >= spRows.length - 5) spLoadRecent();
 }
 
 async function spOpen(idx) {
@@ -12468,14 +12531,22 @@ function initSessionPicker() {
     else if (matchKey(e, 'ArrowUp') || (e.ctrlKey && !e.shiftKey && e.key === 'p')) spSelect(spIdx - 1);
     else if (e.key === 'Enter') spOpen(spIdx);
     else if (e.ctrlKey && e.code === 'Space') spSetPeeking(!spIsPeeking());
+    else if (e.key === 'Tab' && !e.ctrlKey && !e.altKey && !e.metaKey) spSetScope(spScope === 'all' ? 'board' : 'all');
     else return;
     e.preventDefault();
     e.stopPropagation();
   });
-  document.getElementById('session-picker-list').addEventListener('click', (e) => {
+  const list = document.getElementById('session-picker-list');
+  list.addEventListener('click', (e) => {
     const row = e.target.closest('.sp-row');
     if (row) spOpen(Number(row.dataset.idx));
   });
+  list.addEventListener('scroll', spLoadMoreNearEnd, { passive: true });
+  document.getElementById('session-picker-scope').addEventListener('click', (e) => {
+    const scope = e.target.closest('[data-scope]')?.dataset.scope;
+    if (scope) spSetScope(scope);
+    input.focus();
+  });
   // Vimium eats Escape inside a text input and only blurs it, so the page never sees the key.
   // A blur that no click in the picker caused, while the window keeps focus, is that Escape.
   const modal = document.getElementById('session-picker-modal');
@@ -15045,6 +15116,7 @@ function terminalShortcut(e, probe = false) {
   if (ctrlShift && e.code === 'KeyL') return toggleMessagePanel;
   if (ctrlShift && e.code === 'KeyM') return toggleLastMessage;
   if (ctrlShift && e.code === 'KeyD') return dismissContextSession;
+  if (ctrlShift && e.code === 'Period') return currentSessionId ? () => toggleSessionSticky(currentSessionId) : null;
   if (ctrlAlt && (e.code === 'KeyN' || e.code === 'KeyR') && terminalAvailable()) {
     return () => openNewSession(null, e.code === 'KeyR');
   }
@@ -15060,20 +15132,22 @@ function terminalShortcut(e, probe = false) {
   return null;
 }
 
-function readSwapPair() {
-  const pair = readStoredList(SWAP_KEY);
-  return pair.length === 2 ? pair : [null, null];
+function setSwapHistory(ids) {
+  swapHistory = [...new Set(ids.filter(Boolean))].slice(0, SWAP_HISTORY_MAX);
+  store.writeJson(SWAP_KEY, swapHistory);
 }
 
-function setSwapPair(last, previous) {
-  lastSessionId = last;
-  previousSessionId = previous;
-  store.writeJson(SWAP_KEY, [last, previous]);
+function pushSwapHistory(id) {
+  if (swapHistory[0] !== id) setSwapHistory([id, ...swapHistory]);
+}
+
+function forgetSwapHistory(id) {
+  if (swapHistory.includes(id)) setSwapHistory(swapHistory.filter((x) => x !== id));
 }
 
 async function swapToPreviousSession() {
-  const target = currentSessionId === lastSessionId ? previousSessionId : lastSessionId;
-  if (!target || target === currentSessionId) return;
+  const target = swapHistory.find((id) => id !== currentSessionId);
+  if (!target) return;
   if (terminalPaneFocused() || isShowCardFocused()) termState.focusNext = true;
   await revealSession(target);
 }
@@ -15365,6 +15439,7 @@ const TERMINAL_PROBE_KEYS = [
   ['Backquote', '`', '~'],
   ['Equal', '=', '+'],
   ['Minus', '-', '_'],
+  ['Period', '.', '>'],
   ['NumpadAdd', '+', '+'],
   ['NumpadSubtract', '-', '-'],
   ['Numpad0', '0', '0'],
@@ -15733,8 +15808,7 @@ function terminalOpenMode(sessionId) {
 // replays the same screen, and the placeholder gives way to the real card.
 function adoptPickedSession(oldId, id) {
   const focused = terminalPaneFocused();
-  const adopt = (x) => (x === oldId ? id : x);
-  setSwapPair(adopt(lastSessionId), adopt(previousSessionId));
+  setSwapHistory(swapHistory.map((x) => (x === oldId ? id : x)));
   setTerminalMode(id, true);
   forgetPlaceholder(oldId);
   if (currentSessionId !== oldId || viewMode !== 'session') return renderSessions();
@@ -16953,7 +17027,10 @@ 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: '', busy: false, resume: false };
+const ns = { projects: [], picked: [], matches: [], idx: -1, folder: '', busy: false, resume: false, images: [] };
+// Must match ATTACHMENT_TYPES and the upload limit in server.js.
+const NS_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+const NS_IMAGE_MAX_BYTES = 10 * 1024 * 1024;
 const NEW_SESSION_STAY_KEY = 'new-session-stay';
 const NEW_SESSION_EDIT_KEY = 'new-session-edit';
 
@@ -17055,8 +17132,7 @@ function forgetPlaceholder(id) {
   // Before the socket's close handler runs, or it would reconnect and start the session again.
   if (termState.sessionId === id) detachTerminal();
   sessions = sessions.filter((s) => s.id !== id);
-  const forget = (x) => (x === id ? null : x);
-  setSwapPair(forget(lastSessionId), forget(previousSessionId));
+  forgetSwapHistory(id);
   return true;
 }
 
@@ -17157,6 +17233,7 @@ function openNewSession(folder, resume = false) {
   document.getElementById('ns-wt').checked = false;
   document.getElementById('ns-model').value = '';
   document.getElementById('ns-effort').value = '';
+  clearNewSessionImages();
   document.getElementById('ns-stay').checked = store.getItem(NEW_SESSION_STAY_KEY) === 'true';
   document.getElementById('ns-edit').checked = store.getItem(NEW_SESSION_EDIT_KEY) === 'true';
   setNewSessionError('');
@@ -17180,9 +17257,77 @@ function openNewSession(folder, resume = false) {
 function closeNewSession() {
   hideModalOverlay('new-session-modal');
   closeFolderList();
+  closeImagePreview();
+  clearNewSessionImages();
   promptVoice.rec?.abort();
 }
 
+function addNewSessionImages(files) {
+  for (const file of files) {
+    if (!NS_IMAGE_TYPES.includes(file.type)) {
+      setNewSessionError(`${file.name || 'File'}: use a PNG, JPEG, GIF or WebP image.`);
+      continue;
+    }
+    if (file.size > NS_IMAGE_MAX_BYTES) {
+      setNewSessionError(`${file.name || 'Image'}: larger than ${NS_IMAGE_MAX_BYTES / 1024 / 1024} MB.`);
+      continue;
+    }
+    ns.images.push({ file, url: URL.createObjectURL(file) });
+  }
+  renderNewSessionImages();
+}
+
+function removeNewSessionImage(i) {
+  const [img] = ns.images.splice(i, 1);
+  if (img) URL.revokeObjectURL(img.url);
+  renderNewSessionImages();
+}
+
+function clearNewSessionImages() {
+  for (const img of ns.images) URL.revokeObjectURL(img.url);
+  ns.images = [];
+  renderNewSessionImages();
+}
+
+function renderNewSessionImages() {
+  const strip = document.getElementById('ns-images');
+  strip.hidden = !ns.images.length;
+  strip.innerHTML = ns.images
+    .map(
+      (img, i) =>
+        `<button type="button" class="ns-thumb" data-preview="${i}" title="${escapeHtml(img.file.name || 'Pasted image')}"><img src="${escapeHtml(img.url)}" alt=""><span class="ns-thumb-remove" data-remove="${i}" title="Remove" aria-label="Remove image">×</span></button>`,
+    )
+    .join('');
+}
+
+function openImagePreview(i) {
+  const img = ns.images[i];
+  if (!img) return;
+  const box = document.getElementById('ns-lightbox');
+  box.querySelector('img').src = img.url;
+  box.hidden = false;
+}
+
+function closeImagePreview() {
+  const box = document.getElementById('ns-lightbox');
+  if (box.hidden) return false;
+  box.hidden = true;
+  box.querySelector('img').removeAttribute('src');
+  return true;
+}
+
+async function uploadNewSessionImage(sessionId, file) {
+  const r = await newSessionPost(`/api/terminal/attachments/${encodeURIComponent(sessionId)}`, file, 'Upload failed');
+  if (r.error) throw new Error(r.error);
+  return r.path;
+}
+
+async function withImagePaths(id, prompt) {
+  const paths = await Promise.all(ns.images.map((img) => uploadNewSessionImage(id, img.file)));
+  const list = `Attached images:\n${paths.map((p) => `- ${p}`).join('\n')}`;
+  return prompt ? `${prompt}\n\n${list}` : list;
+}
+
 function knownFolders() {
   return [...new Set([...ns.picked, ...ns.projects])];
 }
@@ -17342,10 +17487,17 @@ function fieldAfterFolder() {
   return ns.resume ? 'ns-start' : 'ns-name';
 }
 
-function startNewSession() {
+async function startNewSession() {
   const v = newSessionValues();
   if (!v.cwd || newSessionProblem(v) || ns.busy) return;
   const id = crypto.randomUUID();
+  if (!ns.resume && ns.images.length) {
+    setNewSessionBusy(true);
+    const prompt = await withImagePaths(id, v.prompt).catch((e) => e);
+    setNewSessionBusy(false);
+    if (prompt instanceof Error) return setNewSessionError(prompt.message);
+    v.prompt = prompt;
+  }
   newSpecs.set(id, { ...(ns.resume ? { cwd: v.cwd } : v), mode: ns.resume ? 'pick' : 'new', startedAt: Date.now() });
   setTerminalMode(id, true);
   if (v.stay) return startNewSessionInBackground(id, v);
@@ -17484,11 +17636,35 @@ function initNewSession() {
     mic.addEventListener('mousedown', (e) => e.preventDefault());
     mic.addEventListener('click', togglePromptVoice);
   }
+  const prompt = document.getElementById('ns-prompt');
+  const promptField = prompt.closest('.ns-prompt-field');
+  prompt.addEventListener('paste', (e) => {
+    const files = [...(e.clipboardData?.files || [])].filter((f) => f.type.startsWith('image/'));
+    if (!files.length) return;
+    e.preventDefault();
+    addNewSessionImages(files);
+  });
+  promptField.addEventListener('dragover', (e) => {
+    if (e.dataTransfer?.types.includes('Files')) e.preventDefault();
+  });
+  promptField.addEventListener('drop', (e) => {
+    if (!e.dataTransfer?.files.length) return;
+    e.preventDefault();
+    addNewSessionImages(e.dataTransfer.files);
+  });
+  document.getElementById('ns-images').addEventListener('click', (e) => {
+    const remove = e.target.closest('[data-remove]');
+    if (remove) return removeNewSessionImage(Number(remove.dataset.remove));
+    const thumb = e.target.closest('[data-preview]');
+    if (thumb) openImagePreview(Number(thumb.dataset.preview));
+  });
+  document.getElementById('ns-lightbox').addEventListener('click', closeImagePreview);
   // Bound on the dialog: the global handler returns early on INPUT and TEXTAREA targets.
   modal.addEventListener('keydown', (e) => {
     const inFolder = e.target === input;
     if (e.key === 'Escape') {
-      if (folderListOpen()) closeFolderList();
+      if (closeImagePreview()) prompt.focus();
+      else if (folderListOpen()) closeFolderList();
       else closeNewSession();
     } else if (inFolder && matchKey(e, 'ArrowDown')) {
       if (!folderListOpen()) renderFolderList();
@@ -17497,6 +17673,8 @@ function initNewSession() {
       moveFolderHighlight(-1);
     } else if (inFolder && e.key === 'Enter' && folderListOpen() && ns.idx >= 0 && ns.matches[ns.idx] !== ns.folder) {
       pickFolderOption(ns.idx);
+    } else if (e.target === prompt && e.key === 'Backspace' && !prompt.value && ns.images.length) {
+      removeNewSessionImage(ns.images.length - 1);
     } else if (e.key === 'Enter' && (e.target.tagName !== 'TEXTAREA' || e.ctrlKey || e.metaKey)) {
       if (e.target.tagName === 'BUTTON') return;
       startNewSession();

package/public/index.html

@@ -812,10 +812,11 @@
         <div class="ns-row ns-extra">
           <label class="ns-label" for="ns-prompt">Prompt</label>
           <div class="ns-field ns-prompt-field">
-            <textarea id="ns-prompt" class="form-input" rows="4" placeholder="Optional. Sent as the first message."></textarea>
+            <textarea id="ns-prompt" class="form-input" rows="4" placeholder="Optional. Sent as the first message. Paste or drop images to attach."></textarea>
             <button type="button" id="ns-mic" class="ns-mic" title="Dictate" aria-label="Dictate" aria-pressed="false" hidden>
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0M12 17v5"/></svg>
             </button>
+            <div id="ns-images" class="ns-images" hidden></div>
           </div>
         </div>
         <div class="ns-row ns-extra">
@@ -864,6 +865,7 @@
         <button type="button" class="btn btn-secondary" onclick="closeNewSession()">Cancel</button>
         <button type="button" id="ns-start" class="btn btn-primary" onclick="startNewSession()" disabled>Start</button>
       </div>
+      <div id="ns-lightbox" class="ns-lightbox" hidden><img alt=""></div>
     </div>
   </div>
 
@@ -885,12 +887,18 @@
 
   <div id="session-picker-modal" class="modal-overlay top-aligned" onclick="closeSessionPicker()">
     <div class="modal session-picker" onclick="event.stopPropagation()">
-      <input type="text" id="session-picker-input" class="form-input sp-input" placeholder="Jump to session..." autocomplete="off" data-bwignore data-1p-ignore data-lpignore="true" spellcheck="false">
+      <div class="sp-head">
+        <input type="text" id="session-picker-input" class="form-input sp-input" placeholder="Jump to session..." autocomplete="off" data-bwignore data-1p-ignore data-lpignore="true" spellcheck="false">
+        <div id="session-picker-scope" class="sp-scope" role="radiogroup" aria-label="Sessions" title="Tab switches scope">
+          <button type="button" role="radio" tabindex="-1" data-scope="board">Board</button>
+          <button type="button" role="radio" tabindex="-1" data-scope="all">All</button>
+        </div>
+      </div>
       <div class="sp-body">
         <div id="session-picker-list" class="sp-list"></div>
         <div id="session-picker-peek" class="sp-peek"></div>
       </div>
-      <div class="sp-hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> move &middot; <kbd>Enter</kbd> open &middot; <kbd>Ctrl</kbd><kbd>Space</kbd> peek &middot; <kbd>Esc</kbd> close</div>
+      <div class="sp-hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> move &middot; <kbd>Enter</kbd> open &middot; <kbd>Tab</kbd> board / all &middot; <kbd>Ctrl</kbd><kbd>Space</kbd> peek &middot; <kbd>Esc</kbd> close</div>
     </div>
   </div>
 

package/public/style.css

@@ -8746,6 +8746,54 @@ select.form-input option:checked {
   overflow: hidden;
 }
 
+.sp-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sp-head .sp-input {
+  flex: 1;
+}
+
+.sp-scope {
+  flex: none;
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+.sp-scope button {
+  padding: 4px 10px;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.sp-scope button:hover {
+  color: var(--text-secondary);
+}
+
+.sp-scope button[aria-checked='true'] {
+  background: var(--bg-deep);
+  color: var(--text-primary);
+}
+
+.sp-section {
+  margin-top: 8px;
+  padding: 2px 8px;
+  color: var(--text-muted);
+  font-size: 10.5px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
 .sp-input {
   padding: 10px 12px;
   background: var(--bg-deep);
@@ -8909,6 +8957,10 @@ select.form-input option:checked {
   margin-top: 8px;
 }
 
+.sp-section + .sp-row.outside {
+  margin-top: 0;
+}
+
 .sp-row.current .sp-name {
   color: var(--accent-text);
 }
@@ -9224,6 +9276,81 @@ select.form-input option:checked {
   }
 }
 
+.ns-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.ns-images[hidden] {
+  display: none;
+}
+
+.ns-thumb {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  padding: 0;
+  overflow: hidden;
+  background: var(--bg-hover);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  cursor: zoom-in;
+}
+
+.ns-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.ns-thumb-remove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  font-size: 13px;
+  line-height: 1;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.ns-thumb-remove:hover {
+  background: var(--danger);
+}
+
+.ns-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  background: rgba(0, 0, 0, 0.75);
+  cursor: zoom-out;
+}
+
+.ns-lightbox[hidden] {
+  display: none;
+}
+
+.ns-lightbox img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
 .ns-error {
   font-size: 12px;
   color: var(--danger);

package/server.js

@@ -115,6 +115,7 @@ const SESSIONS_DIR = path.join(CLAUDE_DIR, 'sessions');
 const CCK_DIR = path.join(CLAUDE_DIR, '.cck');
 const AGENT_ACTIVITY_DIR = path.join(CCK_DIR, 'agent-activity');
 const CONTEXT_STATUS_DIR = path.join(CCK_DIR, 'context-status');
+const ATTACHMENTS_DIR = path.join(CCK_DIR, 'attachments');
 const PINS_FILE = path.join(CCK_DIR, 'pins.json');
 const USER_GROUPS_FILE = path.join(CCK_DIR, 'groups.json');
 const DISPATCHED_FILE = path.join(CCK_DIR, 'dispatched.json');
@@ -3386,6 +3387,30 @@ app.post('/api/terminal/start', terminalRoute(async (req, res) => {
   res.status(201).json({ session: started.id, cwd: started.cwd });
 }));
 
+// The New session dialog's images. The prompt names the saved path, and claude reads the file.
+// The token check runs before the body parser, so a rejected upload is never buffered.
+const ATTACHMENT_TYPES = { 'image/png': 'png', 'image/jpeg': 'jpg', 'image/gif': 'gif', 'image/webp': 'webp' };
+app.post('/api/terminal/attachments/:session', (req, res, next) => {
+  const reason = terminal.unavailableReason();
+  if (reason) return res.status(403).json({ error: reason });
+  if (!terminal.authorized(req.get('x-terminal-token'))) return res.status(401).json({ error: 'invalid terminal token' });
+  if (!isUUID(req.params.session)) return res.status(400).json({ error: 'invalid session id' });
+  res.locals.ext = ATTACHMENT_TYPES[req.get('content-type')];
+  if (!res.locals.ext) return res.status(415).json({ error: 'use a PNG, JPEG, GIF or WebP image' });
+  next();
+}, express.raw({ type: () => true, limit: '10mb' }), async (req, res) => {
+  if (!req.body?.length) return res.status(400).json({ error: 'empty image' });
+  const dir = path.join(ATTACHMENTS_DIR, req.params.session);
+  const file = path.join(dir, `${Date.now()}-${crypto.randomBytes(3).toString('hex')}.${res.locals.ext}`);
+  try {
+    await fs.mkdir(dir, { recursive: true });
+    await fs.writeFile(file, req.body);
+    res.status(201).json({ path: file });
+  } catch (e) {
+    res.status(500).json({ error: e.message });
+  }
+});
+
 // The hub's eviction check reads this to keep a pool with live PTYs alive.
 app.get('/api/terminals', terminalRoute(async (_req, res) => {
   res.setHeader('Cache-Control', 'no-store');
@@ -4783,7 +4808,7 @@ async function cleanupAgentActivity() {
   } catch { /* agent-activity dir may not exist */ }
 }
 
-// Dispatch markers, pane layouts, reviews, context status and worktrees: see docs/retention.md.
+// Dispatch markers, pane layouts, reviews, attachments, context status and worktrees: see docs/retention.md.
 async function runRetention() {
   try {
     const scan = await scanTranscripts(PROJECTS_DIR);
@@ -4792,12 +4817,13 @@ async function runRetention() {
     const layouts = panes.prune(opts);
     if (layouts) queuePaneFileWatch();
     const reviews = await pruneSessionDirs(REVIEW_DIR, opts);
+    const attachments = await pruneSessionDirs(ATTACHMENTS_DIR, opts);
     const contexts = await pruneContextStatus(CONTEXT_STATUS_DIR, opts);
     const wts = worktrees.prune(scan?.dirs);
     const taskMaps = await pruneTaskMaps(TASK_MAPS_DIR, opts);
     const grouped = expireGroupMembers(scan?.ids);
-    if (markers || layouts || reviews || contexts || wts || taskMaps || grouped.members) {
-      console.log(`[retention] removed ${markers} dispatch markers, ${layouts} pane layouts, ${reviews} reviews, ${contexts} context status files, ${wts} worktrees, ${taskMaps} task-list mappings, ${grouped.members} group members, ${grouped.groups} groups`);
+    if (markers || layouts || reviews || attachments || contexts || wts || taskMaps || grouped.members) {
+      console.log(`[retention] removed ${markers} dispatch markers, ${layouts} pane layouts, ${reviews} reviews, ${attachments} attachments, ${contexts} context status files, ${wts} worktrees, ${taskMaps} task-list mappings, ${grouped.members} group members, ${grouped.groups} groups`);
     }
   } catch (e) {
     console.warn('[retention] failed:', e.message);