claude-code-kanban 7.15.0 → 7.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "7.15.0",
+  "version": "7.17.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "type": "commonjs",
@@ -39,6 +39,7 @@
     "@xterm/addon-fit": "0.11.0",
     "@xterm/addon-serialize": "0.14.0",
     "@xterm/addon-unicode11": "0.9.0",
+    "@xterm/addon-web-links": "0.12.0",
     "@xterm/addon-webgl": "0.19.0",
     "@xterm/headless": "6.0.0",
     "@xterm/xterm": "6.0.0",

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();
@@ -7501,7 +7503,13 @@ function _findOrphanedKeys(known) {
   const orphaned = [];
   for (const id of pinnedSessionIds) if (!known.has(id)) orphaned.push(`__pinned__${id}`);
   for (const id of stickySessionIds) if (!known.has(id)) orphaned.push(`__sticky__${id}`);
-  const sessionKeyPrefixes = [PINNED_MESSAGES_PREFIX, PAD_EMOJI_PREFIX, PREVIEW_STORAGE_PREFIX, PAD_LINKED_PREFIX];
+  const sessionKeyPrefixes = [
+    PINNED_MESSAGES_PREFIX,
+    PAD_EMOJI_PREFIX,
+    PREVIEW_STORAGE_PREFIX,
+    PAD_LINKED_PREFIX,
+    DROPPED_ARTIFACTS_PREFIX,
+  ];
   for (const key of store.keys()) {
     const pad = _parsePadKey(key);
     if (pad?.kind === 'group') {
@@ -7591,9 +7599,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) {
@@ -9172,7 +9179,7 @@ function bindPreviewRelativeLinks(bodyEl, baseOf = () => currentPreviewPath) {
     if (isUrlRef(href)) return;
     const cleanHref = href.replace(/#.*$/, '');
     e.preventDefault();
-    openPreviewByPath(cleanHref, isAbsolutePath(href) ? undefined : baseOf(a), openFileInEditor);
+    openPreviewByPath(cleanHref, baseOf(a), openFileInEditor);
   });
   bodyEl.dataset.relLinkBound = '1';
 }
@@ -9674,8 +9681,34 @@ function artifactLabel(a) {
   return a.path ? pathBasename(a.path).replace(/\.html?$/i, '') : 'Artifact';
 }
 
+// The list comes from the transcript on every read, so a dropped artifact is kept out by URL.
+const DROPPED_ARTIFACTS_PREFIX = 'artifacts-dropped-';
+
+function droppedArtifacts(sessionId) {
+  return new Set(readStoredList(DROPPED_ARTIFACTS_PREFIX + sessionId));
+}
+
+function setArtifactDropped(sessionId, url, dropped) {
+  const urls = droppedArtifacts(sessionId);
+  if (dropped) urls.add(url);
+  else urls.delete(url);
+  if (urls.size) store.writeJson(DROPPED_ARTIFACTS_PREFIX + sessionId, [...urls]);
+  else store.removeItem(DROPPED_ARTIFACTS_PREFIX + sessionId);
+  artifactsSection.repaint(sessionId);
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function dropArtifact(sessionId, url) {
+  setArtifactDropped(sessionId, url, true);
+  showToast('Artifact dropped from the list', 'info', {
+    label: 'Undo',
+    onClick: () => setArtifactDropped(sessionId, url, false),
+  });
+}
+
 function artifactsInnerHtml(sessionId) {
-  const list = artifactsSection.get(sessionId);
+  const dropped = droppedArtifacts(sessionId);
+  const list = artifactsSection.get(sessionId).filter((a) => !dropped.has(a.url));
   if (!list.length) return '';
   const items = list
     .map(
@@ -9683,6 +9716,7 @@ function artifactsInnerHtml(sessionId) {
         <a class="artifact-link" href="${escapeHtml(a.url)}" target="_blank" rel="noopener" title="${escapeHtml(a.url)}">${escapeHtml(artifactLabel(a))}</a>
         <span class="row-actions artifact-actions">
           <button type="button" onclick="copyWithFeedback('${escAttrJs(a.url)}', this)" title="Copy link" aria-label="Copy artifact link">${ICON_COPY}</button>
+          <button type="button" class="artifact-remove" onclick="dropArtifact('${escAttrJs(sessionId)}','${escAttrJs(a.url)}')" title="Drop from the list" aria-label="Drop ${escapeHtml(artifactLabel(a))} from the list">&times;</button>
         </span>
       </li>`,
     )
@@ -11054,9 +11088,14 @@ function toRelativeIfUnder(filePath, baseDir) {
   return fp.slice(bd.length + 1);
 }
 
+// DOMPurify's default list plus `file:` and drive paths (`C:/x` reads as a scheme), so a link to a
+// local file survives and opens in the preview.
+const MARKDOWN_URI =
+  /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix|file):|[a-z]:[\\/]|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+
 function renderMarkdown(text) {
   if (typeof DOMPurify !== 'undefined' && typeof marked !== 'undefined') {
-    return DOMPurify.sanitize(marked.parse(text));
+    return DOMPurify.sanitize(marked.parse(text), { ALLOWED_URI_REGEXP: MARKDOWN_URI });
   }
   return `<pre style="white-space:pre-wrap;margin:0;">${escapeHtml(text)}</pre>`;
 }
@@ -15131,20 +15170,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);
 }
@@ -15374,6 +15415,12 @@ function terminalInitOptions(themeOptions) {
   };
 }
 
+function openTerminalLink(href) {
+  if (typeof href === 'string' && isLocalHref(href)) return openLocalHref(href);
+  const url = linkUrl(href);
+  if (url) hub.openExternal(url);
+}
+
 function onTerminalFrameMessage(t, m) {
   const socket = termState.socket;
   const current = socket && m.socketId === socket.id;
@@ -15393,6 +15440,7 @@ function onTerminalFrameMessage(t, m) {
       reconnectTerminal();
     }
   } else if (t === 'key') replayKey(m, document.getElementById('terminal-key-proxy'));
+  else if (t === 'link') openTerminalLink(m.href);
   // Chrome does not always fire focusin on the iframe element when its content takes focus.
   else if (t === 'focused') terminalHadFocus = terminalPaneFocused();
   else if (t === 'opening') {
@@ -15805,8 +15853,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 +17072,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 +17177,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 +17278,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 +17302,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 +17532,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 +17681,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 +17718,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();
@@ -17986,13 +18137,6 @@ function publishSession() {
   );
 }
 
-// The help modal stops click propagation, so the document handler below never sees this link.
-// The service worker can pair a cached page that lacks the link with this script.
-document.getElementById('help-docs')?.addEventListener('click', (e) => {
-  e.preventDefault();
-  hub.openExternal(e.currentTarget.href);
-});
-
 function webUrl(href) {
   let url;
   try {
@@ -18003,17 +18147,38 @@ function webUrl(href) {
   return url.protocol === 'http:' || url.protocol === 'https:' ? url : null;
 }
 
-document.addEventListener('click', (e) => {
-  const a = e.target.closest?.('a[href]');
-  if (!a) return;
-  const href = a.getAttribute('href');
-  if (!href) return;
-  const url = webUrl(href);
-  if (!url || url.origin === window.location.origin) return;
-  e.preventDefault();
-  e.stopPropagation();
-  hub.openExternal(url.href);
-});
+function isLocalHref(href) {
+  return /^file:/i.test(href) || (isAbsolutePath(href) && !href.startsWith('//'));
+}
+
+function openLocalHref(href) {
+  openPreviewByPath(href.replace(/#.*$/, ''), undefined, openFileInEditor);
+}
+
+// Capture, because the modals stop a click's propagation, and stopped here so a link in a message
+// preview does not also open the row. Under the hub the SDK has already opened a web link
+// outside (defaultPrevented), and leaves a link to a hub app alone.
+document.addEventListener(
+  'click',
+  (e) => {
+    if (e.button !== 0) return;
+    const href = e.target.closest?.('a[href]')?.getAttribute('href');
+    if (!href) return;
+    const url = webUrl(href);
+    const external = url && url.origin !== window.location.origin;
+    if (e.defaultPrevented) {
+      if (external) e.stopPropagation();
+      return;
+    }
+    const local = isLocalHref(href);
+    if (!local && (!external || hub.inHub)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (local) openLocalHref(href);
+    else hub.openExternal(url.href);
+  },
+  true,
+);
 
 (function initHubTheme() {
   const getTheme = () => (document.body.classList.contains('light') ? 'light' : 'dark');

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

@@ -7030,13 +7030,15 @@ body.show-resizing iframe {
 }
 
 /* The × is a glyph, not an svg, so .row-actions button svg does not size it. */
-.linked-doc-remove {
+.linked-doc-remove,
+.artifact-remove {
   font-family: var(--mono);
   font-size: 15px;
   line-height: 1;
 }
 
-.linked-doc-actions .linked-doc-remove:hover {
+.linked-doc-actions .linked-doc-remove:hover,
+.artifact-actions .artifact-remove:hover {
   background: var(--bg-elevated);
   border-color: var(--border);
   color: var(--text-primary);
@@ -8134,6 +8136,13 @@ body.light .msg-assistant .msg-text {
   padding: 8px 16px;
   white-space: nowrap;
 }
+
+/* The modal focuses a button itself, and after a mouse click Chrome does not match
+   :focus-visible for that, so Enter would act on a button with no ring. */
+.confirm-buttons .btn:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
 /* #endregion */
 
 /* Reference card, not reading material: it stays out of the modal zoom, uses the app's
@@ -9276,6 +9285,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/public/terminal-frame.js

@@ -48,6 +48,39 @@
     return lines.join('\n');
   }
 
+  const PATH_ROOT = String.raw`(?:[A-Za-z]:[\\/]|\/(?=[\w.@+-]+\/)|\\\\(?=[\w.$-]+\\))`;
+  // A quoted path may hold spaces; a bare one ends at the first.
+  const PATH_RE = new RegExp(
+    [
+      String.raw`"(${PATH_ROOT}[^"<>|*?]*[^\s"<>|*?])"`,
+      String.raw`'(${PATH_ROOT}[^'<>|*?]*[^\s'<>|*?])'`,
+      String.raw`(?<![\w/\\:.~-])${PATH_ROOT}[^\s"'<>|*?${'`'}]*[^\s"'<>|*?${'`'}.,;:!)\]}]`,
+    ].join('|'),
+    'g',
+  );
+
+  function pathsIn(text) {
+    return Array.from(text.matchAll(PATH_RE), (m) => {
+      const quoted = m[1] ?? m[2];
+      const found = quoted ?? m[0];
+      return { index: m.index + (quoted ? 1 : 0), text: found, path: found.replace(/(?::\d+){1,2}$/, '') };
+    });
+  }
+
+  // Cell x of each character, because a wide character spans two cells and translateToString counts it once.
+  function lineCells(line, cols, reuse) {
+    let text = '';
+    const xs = [];
+    for (let x = 0; x < cols; x++) {
+      const cell = line.getCell(x, reuse);
+      if (!cell || cell.getWidth() === 0) continue;
+      const chars = cell.getChars() || ' ';
+      for (let i = 0; i < chars.length; i++) xs.push(x);
+      text += chars;
+    }
+    return { text, xs };
+  }
+
   function oscColor(hex) {
     const m = /^#([0-9a-f]{6})$/i.exec(hex || '');
     if (!m) return null;
@@ -147,6 +180,8 @@
         scrollback: o.scrollback,
         cursorBlink: true,
         allowProposedApi: true,
+        // xterm's default asks with confirm() and opens a window, which the installed hub window blocks.
+        linkHandler: { activate: (_e, uri) => up('link', { href: uri }), allowNonHttpProtocols: true },
         ...o.themeOptions,
       });
       state.term = term;
@@ -154,6 +189,22 @@
       term.loadAddon(state.fit);
       term.loadAddon(new win.Unicode11Addon.Unicode11Addon());
       term.unicode.activeVersion = '11';
+      // Link providers scan a line only when the pointer moves onto it, never on output.
+      term.loadAddon(new win.WebLinksAddon.WebLinksAddon((_e, uri) => up('link', { href: uri })));
+      const cellReuse = term.buffer.active.getNullCell();
+      term.registerLinkProvider({
+        provideLinks(y, done) {
+          const line = term.buffer.active.getLine(y - 1);
+          if (!line || !/[\\/]/.test(line.translateToString(true))) return done(undefined);
+          const { text, xs } = lineCells(line, term.cols, cellReuse);
+          const links = pathsIn(text).map((p) => ({
+            text: p.text,
+            range: { start: { x: xs[p.index] + 1, y }, end: { x: xs[p.index + p.text.length - 1] + 1, y } },
+            activate: () => up('link', { href: p.path }),
+          }));
+          done(links.length ? links : undefined);
+        },
+      });
       term.open(host);
       try {
         const gl = new win.WebglAddon.WebglAddon();
@@ -346,7 +397,7 @@
   }
 
   if (typeof module === 'object' && module.exports) {
-    module.exports = { createTerminalFrame, claimSig, isClaimed, handsBack, parentOriginOf, tailOf };
+    module.exports = { createTerminalFrame, claimSig, isClaimed, handsBack, parentOriginOf, tailOf, pathsIn };
   } else {
     createTerminalFrame(root);
   }

package/public/terminal.html

@@ -22,6 +22,7 @@
   <script src="/vendor/xterm/addon-fit.js"></script>
   <script src="/vendor/xterm/addon-webgl.js"></script>
   <script src="/vendor/xterm/addon-unicode11.js"></script>
+  <script src="/vendor/xterm/addon-web-links.js"></script>
   <script src="/terminal-frame.js"></script>
 </body>
 </html>

package/public/vendor/claude-hub-sdk.js

@@ -1,4 +1,4 @@
-// claude-hub-sdk 1.5.0 (sha256 1505d3d5f8ba). Copied by npm run sdk:sync in claude-code-hub. Do not edit.
+// claude-hub-sdk 1.6.0 (sha256 71a58022516d). Copied by npm run sdk:sync in claude-code-hub. Do not edit.
 // Claude Code Hub SDK: the one rule that names a key press, shared by the hub page, client.js and
 // stub.js. The hub serves it to its page as /sdk/keys.js; mount() and sdk:sync put it in front of
 // client.js and stub.js, so an app still loads one file.

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');
@@ -3443,6 +3468,7 @@ const XTERM_FILES = {
   'addon-fit.js': '@xterm/addon-fit/lib/addon-fit.js',
   'addon-webgl.js': '@xterm/addon-webgl/lib/addon-webgl.js',
   'addon-unicode11.js': '@xterm/addon-unicode11/lib/addon-unicode11.js',
+  'addon-web-links.js': '@xterm/addon-web-links/lib/addon-web-links.js',
 };
 app.get('/vendor/xterm/:file', (req, res) => {
   const rel = Object.hasOwn(XTERM_FILES, req.params.file) ? XTERM_FILES[req.params.file] : null;
@@ -4783,7 +4809,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 +4818,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);