claude-code-kanban 7.8.0 → 7.9.0

package/cli.js

@@ -637,11 +637,14 @@ async function runPreviewCli(args) {
   if (url) return previewUrlCli(url, args);
   // No $CLAUDE_CODE_SESSION_ID fallback: a session here switches the board's focus, and the
   // agent must not move the board unless asked.
-  const sessionId = getArgValue(args, 'session') || process.env.PREVIEW_SESSION || null;
+  const sessionArg = getArgValue(args, 'session') || process.env.PREVIEW_SESSION || null;
+  const resolved = sessionArg && await resolveSessionByIdOrPrefix(sessionArg);
+  if (sessionArg && !resolved) return 1;
+  const sessionId = resolved?.id || null;
   const abs = cliPath(filePathArg);
   try {
     if (!await cliPostJson('/api/preview', { path: abs, sessionId }, 'Preview')) return 1;
-    console.log(`Preview opened: ${abs}${sessionId ? ` (session ${sessionId})` : ''}`);
+    console.log(`Preview opened: ${abs}${sessionId ? ` (session ${sessionId.slice(0, 8)})` : ''}`);
     return 0;
   } catch (e) { reportCliError(e); return 1; }
 }

package/lib/live-sessions.js

@@ -36,4 +36,19 @@ function isSessionLive(sessions, sessionId, exceptPid = null) {
   });
 }
 
-module.exports = { readLiveSessions, isPidAlive, isSessionLive };
+// /clear and /resume keep claude's process and registry file and swap its sessionId, so the id
+// that pid held before is finished even though its transcript was written moments ago. `replaced`
+// maps that id to when the swap was seen; an id that shows up live again leaves it.
+function noteReplacedSessions(prev, next, replaced, now, ttlMs) {
+  for (const [id, at] of replaced) if (now - at > ttlMs) replaced.delete(id);
+  if (prev) {
+    const byPid = new Map(next.filter((s) => s.pid).map((s) => [s.pid, s.sessionId]));
+    for (const s of prev) {
+      const id = s.pid && byPid.get(s.pid);
+      if (id && id !== s.sessionId) replaced.set(s.sessionId, now);
+    }
+  }
+  for (const s of next) replaced.delete(s.sessionId);
+}
+
+module.exports = { readLiveSessions, isPidAlive, isSessionLive, noteReplacedSessions };

package/lib/retention.js

@@ -78,6 +78,15 @@ function createDispatchedStore({ load, save, now = Date.now }) {
     persist();
   }
 
+  function move(from, to) {
+    const e = entries.get(from);
+    if (!e || entries.has(to)) return false;
+    entries.delete(from);
+    entries.set(to, e);
+    persist();
+    return true;
+  }
+
   // Returns how many entries went; writes only when one did.
   function prune({ known, maxAgeMs }) {
     const removed = pruneMap(entries, (e) => e.at, { known, maxAgeMs, now: now() });
@@ -95,7 +104,7 @@ function createDispatchedStore({ load, save, now = Date.now }) {
     return out;
   }
 
-  return { record, prune, running, get: (id) => entries.get(id) || null, entries: () => entries.entries() };
+  return { record, move, prune, running, get: (id) => entries.get(id) || null, entries: () => entries.entries() };
 }
 
 // Names only, no stat or parse: the sweep needs which transcripts exist, not what they hold.

package/lib/terminal-client.js

@@ -33,6 +33,7 @@ function hostError(message) {
  * @param {(data: {sessions: string[]}) => void} [o.save]
  * @param {() => void} [o.onChange]
  * @param {(id: string) => void} [o.onExit]
+ * @param {(from: string, to: string) => void} [o.onRekey]
  */
 function createTerminalClient(o) {
   const { config, net } = o;
@@ -83,6 +84,7 @@ function createTerminalClient(o) {
       settle(hostReason);
       o.onChange?.();
     } else if (msg.t === 'exit') o.onExit?.(msg.id);
+    else if (msg.t === 'rekey') o.onRekey?.(msg.from, msg.to);
     else if (msg.t === 'save') o.save?.(msg.data);
     else if (msg.t === 'reply') {
       const pending = calls.get(msg.id);

package/lib/terminal-host.js

@@ -61,6 +61,7 @@ function init(msg) {
     save: (data) => send({ t: 'save', data }),
     onChange: pushState,
     onExit: (id) => send({ t: 'exit', id }),
+    onRekey: (from, to) => send({ t: 'rekey', from, to }),
   });
   pushState();
 }

package/lib/terminal.js

@@ -351,6 +351,7 @@ function clientConfigFor(config, available) {
  * @param {(cmd: string) => string|null} o.which
  * @param {string} [o.token]
  * @param {() => void} [o.onChange]  a terminal started, ended or moved to another session id
+ * @param {(from: string, to: string) => void} [o.onRekey]  a terminal moved to another session id
  * @param {() => {sessions?: string[], taskLists?: Object<string, string>}|null} [o.load]  the saved list, read when config.restore is on
  * @param {(data: {sessions: string[], taskLists?: Object<string, string>}) => void} [o.save]  the session ids to resume on the next start, and the shared task list of each that has one
  * @param {object} [o.pty]  stands in for @lydell/node-pty in tests
@@ -596,7 +597,12 @@ function createTerminalService(o) {
       const pid = inputPid(s, live);
       // An edit terminal starts claude whenever the user presses Enter, after syncBoost stopped looking.
       if (pid && pid !== had) syncBoost(s);
-      if (!pid || (live.some((l) => l.pid === pid) && pidAlive(pid))) continue;
+      if (!pid) continue;
+      const entry = live.find((l) => l.pid === pid);
+      if (entry && pidAlive(pid)) {
+        if (entry.sessionId !== s.id && s.mode !== 'pick' && !s.resumeOf) followSession(s, entry.sessionId);
+        continue;
+      }
       s.claudeExitedAt = Date.now();
       s.claudePid = null;
       moved = true;
@@ -696,7 +702,7 @@ function createTerminalService(o) {
   // is found by folder and start time, and the pick shows as an id with a transcript behind it.
   function watchPick(s) {
     s.pickTimer = setInterval(async () => {
-      if (s.pickChecking) return;
+      if (s.resolving) return;
       const live = o.liveSessions();
       const entry = s.claudePid && live.find((l) => l.pid === s.claudePid);
       if (!entry) {
@@ -708,10 +714,7 @@ function createTerminalService(o) {
       }
       const picked = entry.sessionId;
       if (picked === s.id) return;
-      s.pickChecking = true;
-      const known = await o.resolveCwd(picked);
-      s.pickChecking = false;
-      if (known === null || s.exited || s.mode !== 'pick') return;
+      if (!(await hasTranscript(s, picked)) || s.mode !== 'pick') return;
       clearInterval(s.pickTimer);
       // Two claude processes on one session write the same transcript. When cck already runs it,
       // the pick is ended and its viewers move to that terminal; the sockets leave first so no
@@ -723,16 +726,37 @@ function createTerminalService(o) {
         for (const ws of sockets) send(ws, { t: 'rekey', id: picked, duplicate: true });
         return;
       }
-      const elsewhere = o.isLiveElsewhere(picked, s.claudePid);
-      sessions.delete(s.id);
-      s.id = picked;
-      s.mode = 'resume';
-      sessions.set(picked, s);
-      changed();
-      for (const ws of s.sockets) send(ws, { t: 'rekey', id: picked, elsewhere });
+      rekey(s, picked);
     }, PICK_POLL_MS);
   }
 
+  // /clear and /resume swap the session id under the same claude process. The terminal follows
+  // once the new id has a transcript, so the new session's card holds it and the old one can end.
+  async function followSession(s, id) {
+    if (s.resolving || sessions.has(id)) return;
+    if (!(await hasTranscript(s, id)) || s.ended || sessions.has(id)) return;
+    rekey(s, id);
+  }
+
+  async function hasTranscript(s, id) {
+    s.resolving = true;
+    const known = await o.resolveCwd(id);
+    s.resolving = false;
+    return known !== null && !s.exited;
+  }
+
+  function rekey(s, id) {
+    const elsewhere = o.isLiveElsewhere(id, s.claudePid);
+    const from = s.id;
+    sessions.delete(from);
+    s.id = id;
+    s.mode = 'resume';
+    sessions.set(id, s);
+    o.onRekey?.(from, id);
+    changed();
+    for (const ws of s.sockets) send(ws, { t: 'rekey', id, elsewhere });
+  }
+
   function attach(ws, s, attached) {
     ws.unacked = 0;
     s.sockets.add(ws);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "7.8.0",
+  "version": "7.9.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

@@ -8068,6 +8068,9 @@ document.addEventListener('keydown', (e) => {
 // the frame keeps its own ranges and marks them by id. A page whose CSP forbids inline
 // scripts gets no comments.
 const reviewDrafts = new Map();
+// Text typed but not added, kept across a teardown the user did not ask for (the content
+// refreshed, a modal opened on top) until its review is unmounted.
+const reviewUnsent = new Map();
 const reviewHighlight = typeof Highlight === 'function' && CSS.highlights ? new Highlight() : null;
 const reviewHotHighlight = reviewHighlight ? new Highlight() : null;
 const reviewPendingHighlight = reviewHighlight ? new Highlight() : null;
@@ -8124,9 +8127,13 @@ function dropReviewEntry(panelEl) {
 
 function showTopReview() {
   const opts = reviewStack.at(-1) || reviewBase;
-  if (activeReview && activeReview.opts === opts) return;
-  stopReview();
-  if (opts) startReview(opts);
+  if (!activeReview || activeReview.opts !== opts) {
+    stopReview();
+    if (opts) startReview(opts);
+  }
+  if (!reviewUnsent.size) return;
+  const mounted = new Set([...reviewStack, reviewBase].filter(Boolean).map((o) => reviewKey(o.sessionId, o.source)));
+  for (const key of reviewUnsent.keys()) if (!mounted.has(key)) reviewUnsent.delete(key);
 }
 
 function startReview(opts) {
@@ -8160,11 +8167,17 @@ function startReview(opts) {
   document.addEventListener('scroll', closeReviewOffer, { capture: true, signal });
   panelEl.addEventListener('click', onReviewPanelClick, { signal });
   panelEl.addEventListener('mouseover', onReviewPanelHover, { signal });
+  panelEl.addEventListener('dblclick', onReviewPanelDblClick, { signal });
+  panelEl.addEventListener('keydown', onReviewPanelKey, { signal });
+  panelEl.addEventListener('input', onReviewPanelInput, { signal });
   panelEl.addEventListener('mouseleave', () => setReviewHot(null), { signal });
+  if (!frame) anchorReviewItems(contentEl);
   renderReviewPanel();
+  restoreUnsentReview();
 }
 
 function stopReview() {
+  if (activeReview) keepUnsentReview();
   closeReviewPop();
   if (!activeReview) return;
   const { ctl, panelEl, hostEl } = activeReview;
@@ -8250,6 +8263,100 @@ function reviewSelection() {
   return { quote, range: range.cloneRange(), rect: range.getBoundingClientRect() };
 }
 
+// A re-render replaces the nodes a range points at, so a comment keeps its text and the
+// 32 chars around it, and is found again after a refresh. Port of scratchpad's cmtFindAnchor.
+function reviewAnchorOf(root, range) {
+  const before = reviewTextBefore(root, range.startContainer, range.startOffset);
+  const after = root.ownerDocument.createRange();
+  after.selectNodeContents(root);
+  after.setStart(range.endContainer, range.endOffset);
+  return {
+    exact: range.toString(),
+    pos: before.length,
+    prefix: before.slice(-32),
+    suffix: after.toString().slice(0, 32),
+  };
+}
+
+// The best match scores the most prefix and suffix chars that match outward from the quote;
+// a tie goes to the one nearest the old offset. -1 when the quote is gone.
+function reviewQuoteAt(text, { exact, pos, prefix, suffix }) {
+  let best = -1;
+  let bestScore = -1;
+  if (!exact) return best;
+  for (let at = text.indexOf(exact); at !== -1; at = text.indexOf(exact, at + 1)) {
+    let score = 0;
+    for (let k = 1; k <= prefix.length && text[at - k] === prefix[prefix.length - k]; k++) score++;
+    for (let k = 0; k < suffix.length && text[at + exact.length + k] === suffix[k]; k++) score++;
+    if (score > bestScore || (score === bestScore && Math.abs(at - pos) < Math.abs(best - pos))) {
+      best = at;
+      bestScore = score;
+    }
+  }
+  return best;
+}
+
+function reviewTextIndex(root) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  const nodes = [];
+  let text = '';
+  for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+    nodes.push({ n, start: text.length });
+    text += n.nodeValue;
+  }
+  return { nodes, text };
+}
+
+function reviewFindAnchor({ nodes, text }, anchor) {
+  const at = reviewQuoteAt(text, anchor);
+  if (at < 0) return null;
+  const end = at + anchor.exact.length;
+  const first = nodes.findLast((x) => x.start <= at);
+  const last = nodes.find((x) => end <= x.start + x.n.nodeValue.length);
+  const range = document.createRange();
+  range.setStart(first.n, at - first.start);
+  range.setEnd(last.n, end - last.start);
+  return { range, at };
+}
+
+function anchorReviewItems(root) {
+  const items = reviewItems().filter((c) => c.anchor);
+  if (!items.length) return;
+  const index = reviewTextIndex(root);
+  for (const c of items) {
+    const found = reviewFindAnchor(index, c.anchor);
+    c.range = found?.range || null;
+    if (!found) continue;
+    c.pos = c.anchor.pos = found.at;
+    reviewHighlight?.add(c.range);
+  }
+}
+
+function keepUnsentReview() {
+  const { key, picked, editing } = activeReview;
+  const text = reviewPopMode === 'editor' ? reviewPopEl().querySelector('textarea').value : '';
+  if (text.trim()) reviewUnsent.set(key, { picked, text });
+  else if (editing) reviewUnsent.set(key, { editing });
+}
+
+function restoreUnsentReview() {
+  const u = reviewUnsent.get(activeReview.key);
+  if (!u) return;
+  reviewUnsent.delete(activeReview.key);
+  if (u.editing) {
+    if (reviewItems().includes(u.editing.c)) startReviewEdit(u.editing.c, u.editing.draft);
+    return;
+  }
+  const { anchor } = u.picked;
+  const range = anchor && reviewFindAnchor(reviewTextIndex(activeReview.contentEl), anchor)?.range;
+  if (range) return openReviewEditor({ ...u.picked, range, rect: range.getBoundingClientRect() }, u.text);
+  const why = anchor ? 'The text you commented on changed' : 'The page reloaded';
+  showToast(`${why}, so the comment was not added`, 'info', {
+    label: 'Copy',
+    onClick: () => copyText(u.text, 'the comment'),
+  });
+}
+
 function onReviewFrameMessage(e) {
   const frameWin = activeReview?.frame?.contentWindow;
   const type =
@@ -8585,31 +8692,45 @@ function isReviewSendKey(e) {
   return !e.target.closest?.(TEXT_FIELD_SELECTOR);
 }
 
-function openReviewEditor(picked) {
+function openReviewEditor(picked, text = '') {
   const el = reviewPopEl();
   reviewPopMode = 'editor';
   el.className = 'visible editor';
-  if (picked.range) reviewPendingHighlight?.add(picked.range);
-  else if (picked.inFrame) postToReviewFrame('pend');
+  if (picked.range) {
+    picked.anchor = reviewAnchorOf(activeReview.contentEl, picked.range);
+    reviewPendingHighlight?.add(picked.range);
+  } else if (picked.inFrame) postToReviewFrame('pend');
+  activeReview.picked = picked;
   el.innerHTML = `<textarea rows="3" placeholder="Comment (Ctrl+Enter to add)"></textarea>
     <div class="review-pop-actions"><button type="button" data-act="cancel">Cancel</button><button type="button" data-act="add" class="primary">Add</button></div>`;
   const ta = el.querySelector('textarea');
-  const add = () => {
-    const comment = ta.value.trim();
-    if (!comment) return ta.focus();
-    addReviewComment(picked, comment);
-  };
-  ta.addEventListener('keydown', (e) => {
-    e.stopPropagation();
-    if (e.key === 'Escape') closeReviewPop();
-    else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) add();
-  });
+  ta.value = text;
+  const add = (comment) => addReviewComment(picked, comment);
+  ta.addEventListener('keydown', (e) => onReviewEditorKey(e, add, closeReviewPop));
   el.querySelector('[data-act="cancel"]').addEventListener('click', closeReviewPop);
-  el.querySelector('[data-act="add"]').addEventListener('click', add);
+  el.querySelector('[data-act="add"]').addEventListener('click', () => {
+    const comment = reviewEditorText(ta);
+    if (comment) add(comment);
+  });
   placeReviewPop(el, picked.rect);
   ta.focus();
 }
 
+function reviewEditorText(ta) {
+  const text = ta.value.trim();
+  if (!text) ta.focus();
+  return text;
+}
+
+function onReviewEditorKey(e, save, cancel) {
+  e.stopPropagation();
+  if (e.key === 'Escape') cancel();
+  else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+    const text = reviewEditorText(e.target);
+    if (text) save(text);
+  }
+}
+
 function addReviewComment(picked, comment) {
   if (!activeReview) return;
   const { key, contentEl } = activeReview;
@@ -8630,8 +8751,8 @@ function addReviewComment(picked, comment) {
       heading: reviewHeadingBefore(contentEl, range.startContainer),
       ...activeReview.context?.(range),
     };
-    const pos = reviewTextBefore(contentEl, range.startContainer, range.startOffset).length;
-    item = { quote: picked.quote, comment, context, pos, range, frameId: 0 };
+    const { anchor } = picked;
+    item = { quote: picked.quote, comment, context, pos: anchor.pos, anchor, range, frameId: 0 };
     reviewHighlight?.add(range);
     window.getSelection()?.removeAllRanges();
   }
@@ -8661,6 +8782,7 @@ function removeReviewComment(c) {
   items.splice(i, 1);
   unmarkReviewItem(c);
   if (activeReview.hot === c) setReviewHot(null);
+  if (activeReview.editing?.c === c) activeReview.editing = null;
   if (!items.length) reviewDrafts.delete(activeReview.key);
   renderReviewPanel();
 }
@@ -8668,6 +8790,7 @@ function removeReviewComment(c) {
 function clearReviewDrafts(key = activeReview?.key) {
   for (const c of reviewDrafts.get(key) || []) unmarkReviewItem(c);
   reviewDrafts.delete(key);
+  if (activeReview) activeReview.editing = null;
   setReviewHot(null);
   renderReviewPanel();
 }
@@ -8676,16 +8799,52 @@ function onReviewPanelClick(e) {
   const act = e.target.closest('[data-act]')?.dataset.act;
   if (act === 'send') return sendReview();
   if (act === 'discard') return clearReviewDrafts();
-  const card = e.target.closest('.review-card');
-  const c = card && reviewItems()[Number(card.dataset.i)];
-  if (!c) return;
+  const c = reviewCardItem(e.target);
+  if (!c || e.target.closest('.review-card-edit')) return;
   if (e.target.closest('.review-remove')) removeReviewComment(c);
+  else if (e.target.closest('.review-edit')) startReviewEdit(c);
   else revealReviewItem(c);
 }
 
+function reviewCardItem(el) {
+  const card = el.closest('.review-card');
+  return (card && reviewItems()[Number(card.dataset.i)]) || null;
+}
+
+function onReviewPanelDblClick(e) {
+  const c = reviewCardItem(e.target);
+  if (c && e.target.closest('.review-card-comment')) startReviewEdit(c);
+}
+
+// `draft` keeps the typed text when the panel renders again during the edit.
+function startReviewEdit(c, draft = c.comment) {
+  activeReview.editing = { c, draft };
+  renderReviewPanel();
+  const ta = activeReview.panelEl.querySelector('.review-card-edit');
+  ta.focus();
+  ta.setSelectionRange(ta.value.length, ta.value.length);
+}
+
+function endReviewEdit() {
+  activeReview.editing = null;
+  renderReviewPanel();
+}
+
+function saveReviewEdit(comment) {
+  activeReview.editing.c.comment = comment;
+  endReviewEdit();
+}
+
+function onReviewPanelKey(e) {
+  if (e.target.matches('.review-card-edit')) onReviewEditorKey(e, saveReviewEdit, endReviewEdit);
+}
+
+function onReviewPanelInput(e) {
+  if (e.target.matches('.review-card-edit')) activeReview.editing.draft = e.target.value;
+}
+
 function onReviewPanelHover(e) {
-  const card = e.target.closest('.review-card');
-  setReviewHot((card && reviewItems()[Number(card.dataset.i)]) || null);
+  setReviewHot(reviewCardItem(e.target));
 }
 
 let reviewSendClaimed = false;
@@ -8712,10 +8871,15 @@ function renderReviewPanel() {
     </div>
     <ol class="review-panel-list">${items
       .map((c, i) => {
+        const body =
+          c === activeReview.editing?.c
+            ? `<textarea class="review-card-edit" rows="3" aria-label="Edit comment" placeholder="Ctrl+Enter to save, Esc to cancel">${escapeHtml(activeReview.editing.draft)}</textarea>`
+            : `<div class="review-card-comment" title="Double-click to edit">${escapeHtml(c.comment)}</div>`;
         return `<li class="review-card${c === activeReview.hot ? ' hot' : ''}" data-i="${i}" title="Show in the document">
+        <button type="button" class="review-edit" title="Edit" aria-label="Edit">${DETAIL_EDIT_SVG}</button>
         <button type="button" class="review-remove" title="Remove" aria-label="Remove">×</button>
-        <div class="review-card-quote">${escapeHtml(c.quote.slice(0, 300))}</div>
-        <div class="review-card-comment">${escapeHtml(c.comment)}</div></li>`;
+        <div class="review-card-quote">${c.anchor && !c.range ? '<span class="review-orphan" title="The file changed and this text is no longer in it">not found</span>' : ''}${escapeHtml(c.quote.slice(0, 300))}</div>
+        ${body}</li>`;
       })
       .join('')}</ol>`;
 }
@@ -8798,6 +8962,8 @@ async function sendPreviewAction(frame, msg) {
 //#region MARKDOWN_PREVIEW
 const PREVIEW_STORAGE_PREFIX = 'preview-paths-';
 let currentPreviewPath = null;
+// The session a CLI preview was sent for, which need not be the one on screen.
+let previewSessionId = null;
 let previewFromTerminal = false;
 
 function readStoredList(key) {
@@ -9019,8 +9185,9 @@ function localImageUrl(src, base) {
   return `/api/preview/image?${new URLSearchParams({ path: p, base })}`;
 }
 
-function openPreviewModal(filePath, content, kind) {
+function openPreviewModal(filePath, content, kind, sessionId) {
   currentPreviewPath = filePath;
+  previewSessionId = sessionId;
   const fileName = filePath.split(/[\\/]/).pop();
   document.getElementById('preview-modal-title').textContent = fileName;
   const bodyEl = document.getElementById('preview-modal-body');
@@ -9038,7 +9205,13 @@ function openPreviewModal(filePath, content, kind) {
   const panelEl = document.getElementById('preview-review-panel');
   const opts = fileReviewOpts(filePath, kind, bodyEl, isHtml ? bodyEl.querySelector('iframe') : null);
   if (!opts) return unmountReview(panelEl);
-  mountReview({ ...opts, panelEl, hostEl: document.querySelector('#preview-modal .modal'), onSent: closePreviewModal });
+  mountReview({
+    ...opts,
+    sessionId,
+    panelEl,
+    hostEl: document.querySelector('#preview-modal .modal'),
+    onSent: closePreviewModal,
+  });
 }
 
 // Null for an image, which takes no comments.
@@ -9058,35 +9231,35 @@ function sourceLineOf(bodyEl, range) {
   return reviewTextBefore(code, range.startContainer, range.startOffset).split('\n').length;
 }
 
-function isPreviewLinkedToCurrentSession() {
-  if (!currentPreviewPath || !currentSessionId) return false;
+function isPreviewLinkedToSession() {
+  if (!currentPreviewPath || !previewSessionId) return false;
   const key = canonicalPath(currentPreviewPath);
-  return getSessionPreviewPaths(currentSessionId).some((p) => canonicalPath(p) === key);
+  return getSessionPreviewPaths(previewSessionId).some((p) => canonicalPath(p) === key);
 }
 
 function updatePreviewLinkBtn() {
   const paneBtn = document.getElementById('preview-pane-btn');
-  if (paneBtn) paneBtn.style.display = paneSessionId() ? '' : 'none';
+  if (paneBtn) paneBtn.style.display = previewSessionId ? '' : 'none';
   const btn = document.getElementById('preview-link-btn');
   if (!btn) return;
-  if (!currentSessionId) {
+  if (!previewSessionId) {
     btn.style.display = 'none';
     return;
   }
   btn.style.display = '';
-  const linked = isPreviewLinkedToCurrentSession();
-  btn.title = linked ? 'Unlink from current session' : 'Link to current session';
+  const linked = isPreviewLinkedToSession();
+  btn.title = linked ? 'Unlink from the session' : 'Link to the session';
   btn.style.color = linked ? 'var(--accent)' : '';
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function togglePreviewSessionLink() {
-  if (!currentPreviewPath || !currentSessionId) {
+  if (!currentPreviewPath || !previewSessionId) {
     showToast('Select a session first');
     return;
   }
-  const unlink = isPreviewLinkedToCurrentSession();
-  setSessionDocLink(currentSessionId, currentPreviewPath, unlink);
+  const unlink = isPreviewLinkedToSession();
+  setSessionDocLink(previewSessionId, currentPreviewPath, unlink);
   showToast(unlink ? 'Unlinked from session' : 'Linked to session');
 }
 
@@ -9113,6 +9286,7 @@ function closePreviewModal() {
   // Empty the body so an iframe preview is destroyed and its scripts/timers stop.
   document.getElementById('preview-modal-body').innerHTML = '';
   currentPreviewPath = null;
+  previewSessionId = null;
   if (previewFromTerminal) focusTerminalPane();
   previewFromTerminal = false;
 }
@@ -9130,7 +9304,8 @@ function openPreviewInEditor() {
 // The server is the only place that knows what it can render, so a null `kind` is its
 // answer to "not previewable" rather than a failure: callers that have a fallback
 // destination pass `onUnsupported` instead of keeping a copy of the extension list here.
-async function openPreviewByPath(filePath, base, onUnsupported) {
+// A link followed inside an open preview keeps the preview's session.
+async function openPreviewByPath(filePath, base, onUnsupported, sessionId = previewSessionId || currentSessionId) {
   if (!filePath) return;
   try {
     const r = await api('/api/preview', { query: { path: filePath, base: base || null } });
@@ -9148,7 +9323,7 @@ async function openPreviewByPath(filePath, base, onUnsupported) {
       else showToast('Nothing to preview in this file');
       return;
     }
-    openPreviewModal(data.path, data.content, data.kind);
+    openPreviewModal(data.path, data.content, data.kind, sessionId);
   } catch {
     showToast('Failed to load preview', 'error');
   }
@@ -9187,7 +9362,7 @@ async function handlePreviewOpenEvent(data) {
     }
   }
   // The broadcast carries the path only — each tab fetches the document itself.
-  openPreviewByPath(filePath);
+  openPreviewByPath(filePath, undefined, undefined, currentSessionId);
 }
 
 // Linked docs live in localStorage, so the CLI can only reach them through a tab:
@@ -13515,7 +13690,9 @@ let paneUpdatedToastTimer = 0;
 async function autoReloadPaneView(sid, pane, view) {
   if (!(await reloadPaneView(sid, pane, view))) return;
   clearTimeout(paneUpdatedToastTimer);
-  paneUpdatedToastTimer = setTimeout(() => showToast('Pane updated', 'info'), 1000);
+  paneUpdatedToastTimer = setTimeout(() => {
+    if (!document.getElementById('toast').classList.contains('has-action')) showToast('Pane updated', 'info');
+  }, 1000);
 }
 
 // Builds the new view hidden over the old one and swaps them once it has loaded and scrolled,
@@ -14025,15 +14202,13 @@ function markSourceLine(bodyEl, line) {
   band.scrollIntoView({ block: 'center', inline: 'nearest' });
 }
 
-function openFileInPane(filePath, closeModal) {
-  if (!filePath || !paneSessionId()) return;
-  closeModal();
-  addPane(filePath);
-}
-
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function openPreviewInPane() {
-  openFileInPane(currentPreviewPath, closePreviewModal);
+  if (!currentPreviewPath || !previewSessionId) return;
+  const sid = previewSessionId;
+  const target = currentPreviewPath;
+  closePreviewModal();
+  addPaneToSession(sid, target, pathBasename(target));
 }
 
 // The plan modal also opens other sessions' plans; the pane goes to the plan's session, wherever it is.
@@ -14044,15 +14219,19 @@ function syncPlanPaneBtn() {
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
-async function openPlanInPane() {
+function openPlanInPane() {
   if (!planPaneAllowed()) return;
   const sid = _planSessionId;
   const target = _pendingPlanPath;
   closePlanModal();
+  addPaneToSession(sid, target, 'Plan');
+}
+
+async function addPaneToSession(sid, target, label) {
   if (sid === paneSessionId()) return addPane(target);
   if ((await postPane(sid, { target, base: getSessionBaseDir(sid) || undefined })) !== false) return;
   const s = sessions.find((x) => x.id === sid);
-  showToast(`Plan added to ${s ? sessionDisplayName(s) : 'its session'}`, 'success', {
+  showToast(`${label} added to ${s ? sessionDisplayName(s) : 'its session'}`, 'success', {
     label: 'Open',
     onClick: () => openSession(sid),
   });

package/public/index.html

@@ -477,7 +477,7 @@
           <button id="preview-pane-btn" class="icon-btn" aria-label="Open in a pane" title="Open in a pane" onclick="openPreviewInPane()">
             <svg fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><use href="#icon-pane"/></svg>
           </button>
-          <button id="preview-link-btn" class="icon-btn" aria-label="Link to current session" title="Link to current session" onclick="togglePreviewSessionLink()">
+          <button id="preview-link-btn" class="icon-btn" aria-label="Link to the session" title="Link to the session" onclick="togglePreviewSessionLink()">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
           </button>
           <button class="icon-btn" aria-label="Open in editor" title="Open in editor" onclick="openPreviewInEditor()">

package/public/style.css

@@ -8446,7 +8446,8 @@ select.form-input option:checked {
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
 }
 
-#review-pop textarea {
+#review-pop textarea,
+.review-card-edit {
   width: 100%;
   box-sizing: border-box;
   margin: 0 0 6px;
@@ -8575,7 +8576,8 @@ select.form-input option:checked {
 }
 
 .review-panel button.review-discard,
-.review-panel button.review-remove {
+.review-panel button.review-remove,
+.review-panel button.review-edit {
   padding: 3px 4px;
   color: var(--text-muted);
   background: none;
@@ -8590,7 +8592,7 @@ select.form-input option:checked {
 
 .review-card {
   position: relative;
-  padding: 8px 24px 10px 0;
+  padding: 8px 44px 10px 0;
   cursor: pointer;
 }
 
@@ -8617,12 +8619,35 @@ select.form-input option:checked {
   word-break: break-word;
 }
 
-.review-panel button.review-remove {
+.review-panel button.review-remove,
+.review-panel button.review-edit {
   position: absolute;
   top: 4px;
   right: 4px;
   padding: 0 6px;
 }
+
+.review-panel button.review-edit {
+  right: 24px;
+}
+
+.review-edit svg {
+  width: 11px;
+  height: 11px;
+}
+
+.review-card-edit {
+  border-color: var(--accent);
+}
+
+.review-orphan {
+  margin-right: 6px;
+  padding: 0 4px;
+  font-size: 10px;
+  color: var(--warning);
+  border: 1px solid var(--warning-dim);
+  border-radius: 3px;
+}
 /* #endregion */
 
 /* #region SESSION_PICKER */

package/server.js

@@ -50,7 +50,7 @@ const { readTerminalConfig } = require('./lib/terminal');
 const { createTerminalClient } = require('./lib/terminal-client');
 const { kanbotOn, kanbotModel, createKanbot } = require('./lib/kanbot');
 const { createShowStore, mountShowRoutes, showBodyParser, SHOW_PATH } = require('./lib/show');
-const { readLiveSessions, isPidAlive } = require('./lib/live-sessions');
+const { readLiveSessions, isPidAlive, noteReplacedSessions } = require('./lib/live-sessions');
 const { createProcStats } = require('./lib/proc-stats');
 const { createUserGroupStore } = require('./lib/user-groups');
 const { createSessionPinStore } = require('./lib/session-pins');
@@ -546,12 +546,15 @@ const SELF_TEAM_BOOT_WINDOW_MS = 60 * 1000;
 let liveSessionsCache = null;
 let lastLiveSessionsScan = 0;
 const LIVE_SESSIONS_TTL = 5000;
+const replacedSessions = new Map();
 
 function loadLiveSessions() {
   const now = Date.now();
   if (liveSessionsCache && now - lastLiveSessionsScan < LIVE_SESSIONS_TTL) return liveSessionsCache;
+  const prev = liveSessionsCache;
   liveSessionsCache = readLiveSessions(SESSIONS_DIR);
   lastLiveSessionsScan = now;
+  noteReplacedSessions(prev, liveSessionsCache, replacedSessions, now, SESSION_STALE_MS);
   return liveSessionsCache;
 }
 
@@ -572,13 +575,14 @@ function getPeerName(sessionId) {
 }
 
 function hasRecentLogActivity(sessionId, logAge) {
-  return logAge <= SESSION_STALE_MS && !isRegistryIdle(sessionId);
+  return logAge <= SESSION_STALE_MS && !isRegistryIdle(sessionId) && !replacedSessions.has(sessionId);
 }
 
 // Visibility-only recency: hasRecentLogActivity widened by the post-turn grace
 // window (ungated by registry-idle). Drives whether a session appears in the
 // active list — never the "active" status badges, which stay on hasRecentLog.
 function hasVisibleLogActivity(sessionId, logAge) {
+  if (replacedSessions.has(sessionId)) return false;
   return logAge <= SESSION_GRACE_MS || hasRecentLogActivity(sessionId, logAge);
 }
 
@@ -3348,6 +3352,9 @@ const terminal = createTerminalClient({
   onExit: (id) => {
     if (dispatched.get(id)) broadcast({ type: 'dispatch-update' });
   },
+  onRekey: (from, to) => {
+    if (dispatched.move(from, to)) broadcast({ type: 'dispatch-update' });
+  },
 });
 
 // A call to the terminal host fails with 503 while the host restarts.