claude-code-kanban 7.15.0 → 7.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "7.15.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),
   });
 }
 
@@ -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();
@@ -7591,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) {
@@ -15131,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);
 }
@@ -15805,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();
@@ -17025,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';
 
@@ -17127,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;
 }
 
@@ -17229,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('');
@@ -17252,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])];
 }
@@ -17414,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);
@@ -17556,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();
@@ -17569,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>
 

package/public/style.css

@@ -9276,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);