claude-code-kanban 7.18.0 → 7.20.0

package/public/app.js

@@ -2808,7 +2808,7 @@ function isAnyModalOpen() {
 
 // An open modal owns the zoom keys even when it has nothing to scale.
 function isZoomableOnScreen() {
-  return isAnyModalOpen() ? isZoomableModalOpen() : isPaneDocOnScreen() || isShowCardFocused();
+  return isAnyModalOpen() ? isZoomableModalOpen() : isAskOnScreen() || isPaneDocOnScreen() || isShowCardFocused();
 }
 
 const ZOOM_KEYS = { '+': 0.1, '=': 0.1, NumpadAdd: 0.1, '-': -0.1, _: -0.1, NumpadSubtract: -0.1, 0: 0, Numpad0: 0 };
@@ -3433,24 +3433,34 @@ function agentIdentHtml(a) {
 
 // The count names every running agent; the rows stop at ZEN_AGENTS_MAX, and the Agents Log
 // below the board lists the rest.
-function zenAgentsHtml(agents) {
-  const active = agents.filter((a) => a.status === 'active');
+function zenAgentsHtml(active) {
   if (!active.length) return '';
-  const now = Date.now();
   const rows = active.slice(0, ZEN_AGENTS_MAX).map((a) => {
     const task = truncateAtWord(agentTaskText(a), 200);
     return `<button type="button" class="zen-agent" title="${escapeHtml(task)}" onclick="showAgentModal('${escAttrJs(a.agentId)}')">
       <span class="agent-dot active"></span>
       <span class="zen-agent-text"><span class="zen-agent-task">${escapeHtml(task)}</span><span class="agent-ident-row">${agentIdentHtml(a)}</span></span>
-      <span class="zen-agent-time">${formatDuration(agentElapsed(a, now))}</span>
+      <span class="zen-agent-time"></span>
     </button>`;
   });
   return `<div class="panel-section-header"><span>Agents</span><span class="panel-section-count">${active.length}</span></div>${rows.join('')}`;
 }
 
+// The 1 s duration tick calls this. Rewriting the rows each time would drop the focus of a row,
+// so the rows are rewritten only when they change and the times are set in place.
 function renderZenAgents(agents) {
   const el = zenMode && sessionsList.querySelector('.zen-agents');
-  if (el) el.innerHTML = zenAgentsHtml(agents);
+  if (!el) return;
+  const active = agents.filter((a) => a.status === 'active');
+  const html = zenAgentsHtml(active);
+  if (html !== el.dataset.shape) {
+    el.dataset.shape = html;
+    el.innerHTML = html;
+  }
+  const now = Date.now();
+  el.querySelectorAll('.zen-agent-time').forEach((t, i) => {
+    t.textContent = formatDuration(agentElapsed(active[i], now));
+  });
 }
 
 // Filter shutdown ghosts: for same-type agents, keep if they overlapped (parallel)
@@ -4111,11 +4121,13 @@ function renderSessions() {
         ${renderZenBookmarksHtml(zenSession.id)}
       </div>
       ${zenSession.hasWorkflow ? renderWorkflowLiveHtml(zenSession.id) : ''}
-      <div class="zen-agents">${zenAgentsHtml(visibleAgents())}</div>`;
+      <div class="zen-agents"></div>`;
+    renderZenAgents(visibleAgents());
     bindLinkedDocsHandlers(sessionsList.querySelector('.linked-docs-section'), zenSession.id);
     artifactsSection.load(zenSession.id);
     scratchFilesSection.load(zenSession.id);
     if (zenSession.hasWorkflow) pollWorkflowLive(zenSession.id);
+    restoreSessionCursor();
     return;
   }
 
@@ -4364,7 +4376,10 @@ function renderSessions() {
     const tail = sectioned ? sectionHtml(SECTION_SESSIONS, 'Sessions', true, restHtml, sgRest.length === 0) : restHtml;
     sessionsList.innerHTML = html + sgSectionHtml(true) + tail + outsideHtml;
   }
+  restoreSessionCursor();
+}
 
+function restoreSessionCursor() {
   const navItems = getNavigableItems();
   const allSessions = getSessionItems();
   const activeIdx = allSessions.findIndex((el) => el.classList.contains('active'));
@@ -7949,6 +7964,21 @@ document.addEventListener('keydown', (e) => {
     toggleZenMode();
     return;
   }
+  if (e.key === '$' && plainShift) {
+    e.preventDefault();
+    openCost(contextSessionId());
+    return;
+  }
+  if (matchKey(e, 'KeyM')) {
+    e.preventDefault();
+    openMarketplace(contextSessionId());
+    return;
+  }
+  if (ClaudeHub.comboOf(e) === 'ctrl+m') {
+    e.preventDefault();
+    openMemory(contextSessionId());
+    return;
+  }
   if (e.key === '.' || e.key === '>') {
     const sid = sessionsList.querySelector('.kb-selected')?.dataset.sessionId || currentSessionId;
     if (sid) {
@@ -8089,23 +8119,6 @@ document.addEventListener('keydown', (e) => {
     else toggleScratchpad();
     return;
   }
-  if (e.key === '$' && !e.ctrlKey && !e.altKey && !e.metaKey) {
-    e.preventDefault();
-    openCost(contextSid);
-    return;
-  }
-  if (matchKey(e, 'KeyM')) {
-    e.preventDefault();
-    const mSession = contextSid ? sessions.find((s) => s.id === contextSid) : null;
-    openMarketplace(mSession?.project);
-    return;
-  }
-  if (ClaudeHub.comboOf(e) === 'ctrl+m') {
-    e.preventDefault();
-    const mSession = contextSid ? sessions.find((s) => s.id === contextSid) : null;
-    openMemory(mSession?.project);
-    return;
-  }
   if (ClaudeHub.comboOf(e) === 'ctrl+d') {
     e.preventDefault();
     dismissContextSession();
@@ -8709,7 +8722,9 @@ const ZOOM_CLAIMS = ['ctrlKey', 'metaKey'].flatMap((mod) =>
 // first keeps it, and text fields keep every key.
 const PANE_CLAIMS = [
   ...['\\', '[', ']', 'ContextMenu', 'Escape'].map((key) => ({ key, code: '' })),
-  ...['|', '{', '}', 'F10'].map((key) => ({ shiftKey: true, key, code: '' })),
+  ...['|', '{', '}', 'F10', '$'].map((key) => ({ shiftKey: true, key, code: '' })),
+  { key: 'Unidentified', code: 'KeyM' },
+  { ctrlKey: true, key: 'm', code: '' },
   ...['BracketLeft', 'BracketRight', 'KeyW'].map((code) => ({ altKey: true, key: 'Unidentified', code })),
   ...['KeyL', 'KeyM', 'KeyP', 'KeyS', 'KeyZ'].map((code) => ({ shiftKey: true, key: 'Unidentified', code })),
   ...'123456789'.split('').map((n) => ({ ctrlKey: true, altKey: true, key: 'Unidentified', code: `Digit${n}` })),
@@ -9058,6 +9073,7 @@ function reviewOptsOfFrame(frame) {
 
 async function sendPreviewAction(frame, msg) {
   if (!navigator.userActivation?.isActive) return;
+  if (frame === askState.frame) return answerAsk({ action: msg.action, label: msg.label, fields: msg.data });
   const opts = reviewOptsOfFrame(frame);
   if (!opts?.sessionId) return;
   const key = `${msg.action}\n${JSON.stringify(msg.data)}`;
@@ -9197,7 +9213,7 @@ function createPreviewFrame(className, srcdoc, sandbox = 'allow-scripts allow-po
   frame.setAttribute('referrerpolicy', 'no-referrer');
   frame.srcdoc = srcdoc;
   bridgedFrames.add(frame);
-  frame.addEventListener('load', () => sendBridgeClaimsAll([frame], keyClaims()));
+  frame.addEventListener('load', () => sendBridgeClaimsAll([frame], bridgeClaims(keyClaims())));
   return frame;
 }
 
@@ -10235,6 +10251,8 @@ function setupEventSource() {
 
       if (data.type === 'show:cleared') onShowCleared(data);
       if (data.type === 'show:removed') onShowRemoved(data);
+      if (data.type === 'ask:opened') onAskOpened(data);
+      if (data.type === 'ask:closed') onAskClosed(data);
 
       if (data.type === 'agent-update') {
         if (!data.unreadOnly) pendingAgentSessionIds.add(data.sessionId);
@@ -10275,7 +10293,7 @@ function setupEventSource() {
       // Alone, the page would open a tab without a user gesture, which the browser blocks; the
       // CLI prints the link instead.
       if (data.type === 'session:cost' && hub.inHub) {
-        openCost(data.id, data.agent);
+        openCost(data.id, { agent: data.agent, pane: false });
       }
 
       if (data.type === 'session:pin') {
@@ -13148,31 +13166,33 @@ function openFolderInEditor(folder, file) {
   postAndToast('/api/open-folder', body, 'folder');
 }
 
-function openCost(sessionId, agentId) {
-  if (sessionId && agentId && hub.can('agent.cost'))
-    return hub.invoke('agent.cost', { session: sessionId, agent: agentId });
-  hub.invoke('session.cost', sessionId ? { session: sessionId } : {});
+// Opens the app in a pane of `sid` and brings the pane into view. With no session, or `pane: false`
+// (a Shift-click), the hub switches to the app's tab instead.
+async function openAppAction(action, params, sid, { pane = true, label }) {
+  if (!sid || !pane) return hub.invoke(action, params);
+  const { url } = await hub.invoke(action, params, { open: 'pane' });
+  if (!url) return;
+  const onScreen = await postPane(sid, { target: url, title: label });
+  if (onScreen !== null) revealPane(sid, onScreen);
 }
 
-function openMarketplace(projectPath) {
-  hub.invoke('project.plugins', projectPath ? { project: projectPath } : {});
+function openCost(sid, { agent, pane } = {}) {
+  const opts = { pane, label: 'Cost' };
+  if (sid && agent && hub.can('agent.cost')) return openAppAction('agent.cost', { session: sid, agent }, sid, opts);
+  return openAppAction('session.cost', sid ? { session: sid } : {}, sid, opts);
 }
 
-function openMemory(projectPath) {
-  hub.invoke('project.memory', projectPath ? { project: projectPath } : {});
+function openProjectApp(action, label, sid, { pane } = {}) {
+  const project = sessions.find((s) => s.id === sid)?.project;
+  return openAppAction(action, project ? { project } : {}, sid, { pane, label });
 }
+const openMarketplace = (sid, opts) => openProjectApp('project.plugins', 'Marketplace', sid, opts);
+const openMemory = (sid, opts) => openProjectApp('project.memory', 'Memory', sid, opts);
 
-function openForInfoModalProject(open) {
-  const s = sessions.find((x) => x.id === _infoModalSessionId);
-  if (s?.project) open(s.project);
-}
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function openMarketplaceForInfoModal() {
-  openForInfoModalProject(openMarketplace);
-}
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function openMemoryForInfoModal() {
-  openForInfoModalProject(openMemory);
+function openAppForInfoModal(open, e) {
+  closeTeamModal();
+  open(_infoModalSessionId, { pane: !e.shiftKey });
 }
 
 //#endregion
@@ -13883,6 +13903,11 @@ async function loadPaneView(sid, pane, view, scroll) {
     frame.setAttribute('referrerpolicy', 'no-referrer');
     frame.title = pane.title;
     frame.src = pane.target;
+    frame.addEventListener('load', () => {
+      view.classList.remove('keys-bridged');
+      frame.hostKeysSig = null;
+      pushTerminalClaims();
+    });
     view.appendChild(frame);
     view.insertAdjacentHTML('beforeend', paneUrlBarHtml());
     // Framed at once; a refusal found by the probe swaps the frame for the card.
@@ -15192,9 +15217,10 @@ function inPageField(e) {
 function terminalShortcut(e, probe = false) {
   const ctrlAlt = hubModDown(e);
   const ctrlShift = e.ctrlKey && e.shiftKey && !e.altKey && !e.metaKey;
-  // Ctrl+_ is Claude Code's undo, so the zoom keys leave it to the terminal.
+  // Ctrl+_ is Claude Code's undo, so the zoom keys leave it to the terminal. An open ask card,
+  // which sits in the terminal pane, takes them for its own text zoom.
   const zoom = e.key === '_' ? undefined : zoomDelta(e);
-  if (zoom !== undefined && termFrame.inited && (probe || terminalPaneFocused())) {
+  if (zoom !== undefined && termFrame.inited && (probe || (terminalPaneFocused() && !isAskOnScreen()))) {
     return () => adjustTerminalFontSize(Math.sign(zoom));
   }
   if (ctrlAlt && e.code === 'KeyS') return swapToPreviousSession;
@@ -15574,23 +15600,49 @@ function bridgeClaims(claims) {
   return { ...claims, keys: [...claims.keys, ...ZOOM_CLAIMS, ...PANE_CLAIMS, ...review] };
 }
 
-function sendBridgeClaimsAll(frames, claims) {
-  const base = bridgeClaims(claims);
+function sendBridgeClaimsAll(frames, base) {
   const rest = frames.filter((f) => f !== showState.frame);
   sendBridgeClaims(rest, base);
   if (rest.length < frames.length)
     sendBridgeClaims([showState.frame], { ...base, keys: [...base.keys, ...SHOW_CLAIMS] });
 }
 
+// A hub app in a URL pane runs the SDK, which hands back these keys (hub protocol §5.2). Only keys with
+// Ctrl, Alt or Meta: the page keeps Escape, brackets and its own letter keys.
+function sendHostKeys(frames, bridged) {
+  const keys = bridged.keys.filter((k) => k.ctrlKey || k.altKey || k.metaKey);
+  const sig = JSON.stringify(keys);
+  for (const f of frames) {
+    const origin = URL.parse(f.src)?.origin;
+    if (!origin || origin === 'null' || f.hostKeysSig === sig) continue;
+    f.hostKeysSig = sig;
+    f.contentWindow?.postMessage({ type: 'hub:hostKeys', keys }, origin);
+  }
+}
+
+const urlPaneFrames = () => [...paneViews.querySelectorAll('.pane-url-frame')];
+
+window.addEventListener('message', (e) => {
+  const type = e.data?.type;
+  if (type !== 'hub:hostKey' && type !== 'hub:hostReady') return;
+  const frame = urlPaneFrames().find((f) => f.contentWindow === e.source);
+  if (!frame || URL.parse(frame.src)?.origin !== e.origin) return;
+  if (type === 'hub:hostReady') frame.parentElement.classList.add('keys-bridged');
+  else replayKey(e.data, frame);
+});
+
 function pushTerminalClaims() {
   if (terminalClaimsQueued) return;
   terminalClaimsQueued = true;
   queueMicrotask(() => {
     terminalClaimsQueued = false;
     const bridged = bridgedFrameEls();
-    if (!termFrame.inited && !kanbotState.inited && !bridged.length) return;
+    const urlFrames = urlPaneFrames();
+    if (!termFrame.inited && !kanbotState.inited && !bridged.length && !urlFrames.length) return;
     const claims = keyClaims();
-    sendBridgeClaimsAll(bridged, claims);
+    const base = bridgeClaims(claims);
+    sendBridgeClaimsAll(bridged, base);
+    sendHostKeys(urlFrames, base);
     const sig = JSON.stringify(claims);
     sendFrameClaims(kanbotState, claims, sig, postToKanbotFrame);
     sendFrameClaims(termFrame, claims, sig, terminalFrameSend);
@@ -16369,6 +16421,177 @@ window.addEventListener('message', (e) => {
 
 //#endregion
 
+//#region ASK
+// The question the session in the embedded terminal asks with the ask tool; the tool call waits for
+// the answer. Hiding keeps the frame, so a half-filled card comes back as it was. Only an answer, a
+// skip or the agent's interrupt ends the question.
+const ASK_MSG = 'cck-ask:';
+const askState = { terminalId: null, ask: null, frame: null, frameH: 0, hidden: false, busy: false, seq: 0 };
+
+// Runs inside the card as source text, ahead of the card's own scripts. The JSON round trip makes
+// the answer cloneable, and a value that is not JSON throws in the card.
+function askBridge() {
+  window.cck = {
+    send: (data) => parent.postMessage({ type: 'cck-ask:send', data: JSON.parse(JSON.stringify(data ?? null)) }, '*'),
+  };
+}
+
+const ASK_BRIDGE_TAG = `<script>(${askBridge})();</script>`;
+
+function askEl() {
+  return document.getElementById('ask-modal');
+}
+
+function isAskOnScreen() {
+  return !!askState.ask && !askEl().hidden;
+}
+
+function syncAsk(tid) {
+  if (tid === askState.terminalId) return;
+  askState.terminalId = tid;
+  setAsk(null);
+  if (tid) loadAsk(tid);
+}
+
+async function loadAsk(tid) {
+  const seq = ++askState.seq;
+  const data = await getJson(apiPath`/api/terminals/${tid}/ask`, null, { cache: 'no-store' });
+  if (seq !== askState.seq || tid !== askState.terminalId) return;
+  const a = data?.ask ?? null;
+  if (a?.id !== askState.ask?.id) setAsk(a);
+}
+
+function setAsk(a) {
+  const modal = askEl();
+  const body = modal.querySelector('.ask-body');
+  Object.assign(askState, { ask: a, frame: null, frameH: 0, hidden: false, busy: false });
+  body.replaceChildren();
+  if (a) {
+    modal.querySelector('.ask-title').textContent = a.title;
+    modal.querySelector('.ask-box').dataset.size = a.size;
+    if (a.content == null) {
+      body.innerHTML = '<p class="ask-missing">The card file is gone. Skip, so the agent stops waiting.</p>';
+    } else {
+      const frame = createPreviewFrame('ask-frame', showSrcdoc(a.content, 0, ASK_BRIDGE_TAG), SHOW_SANDBOX);
+      frame.addEventListener('load', () => {
+        if (askState.frame === frame && !askState.hidden) frame.focus();
+      });
+      askState.frame = frame;
+      body.append(frame);
+    }
+  }
+  renderAsk();
+}
+
+function renderAsk() {
+  const a = askState.ask;
+  askEl().hidden = !a || askState.hidden;
+  const chip = document.getElementById('ask-reopen');
+  chip.hidden = !a || !askState.hidden;
+  if (a) {
+    chip.querySelector('.ask-reopen-n').textContent = a.title;
+    chip.title = `Open the question: ${a.title}`;
+  }
+  layoutAsk();
+}
+
+// A full card fills the modal; a smaller one takes its content's height, up to the terminal's.
+function layoutAsk() {
+  const frame = askState.frame;
+  const box = askEl().querySelector('.ask-box');
+  if (!frame || askEl().hidden || box.dataset.size === 'full') return;
+  const host = document.getElementById('terminal-host');
+  const chrome = box.querySelector('.ask-head').offsetHeight + box.querySelector('.ask-foot').offsetHeight + 2;
+  frame.style.height = `${Math.max(SHOW_MIN_H, Math.min(askState.frameH || SHOW_MIN_H, host.clientHeight - 32 - chrome))}px`;
+}
+
+function hideAsk() {
+  askState.hidden = true;
+  renderAsk();
+  focusTerminalPane();
+}
+
+function reopenAsk() {
+  askState.hidden = false;
+  renderAsk();
+  askState.frame?.focus();
+}
+
+async function endAsk(body) {
+  const a = askState.ask;
+  const tid = askState.terminalId;
+  if (!a || !tid || askState.busy) return;
+  askState.busy = true;
+  try {
+    const res = await terminalFetch(apiPath`/api/terminals/${tid}/ask/${a.id}`, 'POST', body);
+    if (res.status === 404) showToast('The question is no longer open');
+    else if (!res.ok) {
+      const out = await res.json().catch(() => ({}));
+      return showToast(out.error || `Send failed (HTTP ${res.status})`, 'error');
+    }
+    if (askState.ask?.id !== a.id) return;
+    setAsk(null);
+    focusTerminalPane();
+  } catch {
+    showToast('Failed to send the answer', 'error');
+  } finally {
+    if (askState.ask?.id === a.id) askState.busy = false;
+  }
+}
+
+function answerAsk(data) {
+  return endAsk({ status: 'answered', data });
+}
+
+function onAskOpened(d) {
+  if (typeof d.terminalId !== 'string') return;
+  if (d.terminalId === askState.terminalId) return loadAsk(d.terminalId);
+  if (askState.terminalId || !wantsTerminal()) return;
+  if (!terminalIds.has(currentSessionId)) showState.lookup = null;
+  syncShowCard();
+}
+
+function onAskClosed(d) {
+  if (d.terminalId !== askState.terminalId || askState.ask?.id !== d.id) return;
+  if (d.status === 'cancelled') showToast('The agent stopped waiting for the answer');
+  setAsk(null);
+}
+
+// A script can send without a click, so a send needs transient user activation, as a card action does.
+window.addEventListener('message', (e) => {
+  const frame = askState.frame;
+  if (!frame || e.source !== frame.contentWindow || typeof e.data?.type !== 'string') return;
+  if (e.data.type === `${ASK_MSG}send`) {
+    if (navigator.userActivation?.isActive) answerAsk(e.data.data);
+  } else if (e.data.type === `${SHOW_MSG}height`) {
+    askState.frameH = Number(e.data.h) || askState.frameH;
+    layoutAsk();
+  }
+});
+
+function initAsk() {
+  const modal = askEl();
+  modal.addEventListener('click', (e) => {
+    const cmd = e.target === modal ? 'hide' : e.target.closest('[data-ask]')?.dataset.ask;
+    if (cmd === 'hide') hideAsk();
+    else if (cmd === 'skip') endAsk({ status: 'dismissed' });
+  });
+  document.getElementById('ask-reopen').addEventListener('click', reopenAsk);
+  // Capture, ahead of the board's own Escape. The card's frame hands Escape back as a key on the frame.
+  window.addEventListener(
+    'keydown',
+    (e) => {
+      if (e.key !== 'Escape' || modal.hidden || !modal.contains(e.target)) return;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      hideAsk();
+    },
+    true,
+  );
+  window.addEventListener('resize', layoutAsk);
+}
+//#endregion
+
 //#region SHOW
 // The card the session in the embedded terminal posts to with the show tool. It belongs to the
 // terminal, not the session: /clear and the --resume picker change the session id, the terminal id
@@ -16581,6 +16804,7 @@ function syncShowCard() {
     loadTerminals().catch(() => {});
   }
   const tid = pty ? (terminalIds.get(pty) ?? null) : null;
+  syncAsk(tid);
   if (tid === showState.terminalId) return;
   const view = (tid && showViews[tid]) || { collapsed: true };
   Object.assign(showState, { terminalId: tid, sessionId: null, idx: 0 });
@@ -16834,8 +17058,8 @@ function withHeadFirst(content, head) {
 const FRAME_SCROLLBAR_CSS = ':where(html){scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.45) transparent}';
 
 // A whole document gets the tokens and base styles first in its head, so its own styles win.
-function showSrcdoc(content, restoreY) {
-  const head = `<meta http-equiv="Content-Security-Policy" content="${SHOW_CSP}"><style>:root{${showTokenCss()}}${SHOW_FRAME_BASE}${FRAME_SCROLLBAR_CSS}</style>`;
+function showSrcdoc(content, restoreY, extraHead = '') {
+  const head = `<meta http-equiv="Content-Security-Policy" content="${SHOW_CSP}"><style>:root{${showTokenCss()}}${SHOW_FRAME_BASE}${FRAME_SCROLLBAR_CSS}</style>${extraHead}`;
   const bridge = `<script>(${showBridge})(${Math.max(0, Math.round(restoreY) || 0)}, ${modalZoom});</script>${REVIEW_BRIDGE_TAG}`;
   if (!/^\s*(<!doctype|<html)/i.test(content)) {
     return `<!doctype html><html><head><meta charset="utf-8">${head}</head><body>${content}${bridge}</body></html>`;
@@ -16941,7 +17165,7 @@ new MutationObserver(() => {
 
 // Builds the message only when a frame is there, because showTokens forces a style recalc.
 function postToShowFrames(makeMsg) {
-  const frames = [showState.frame, ...document.querySelectorAll('.show-pane-frame, .themed-frame')].filter(
+  const frames = [showState.frame, ...document.querySelectorAll('.show-pane-frame, .themed-frame, .ask-frame')].filter(
     (f) => f?.contentWindow,
   );
   if (!frames.length) return;
@@ -16999,10 +17223,15 @@ async function openShowInPane() {
 }
 
 // `onScreen` is postPane's result: null failed, true is already in view unless the terminal covers it.
+function revealPane(sid, onScreen) {
+  if (onScreen && !wantsTerminal()) syncPanes();
+  else if (sid === currentSessionId && wantsTerminal()) toggleTerminal();
+  else openSession(sid);
+}
+
 function toastPaneAdded(sid, onScreen, label) {
   if (onScreen === null || (onScreen && !wantsTerminal())) return;
-  const open = () => (sid === currentSessionId && wantsTerminal() ? toggleTerminal() : openSession(sid));
-  showToast(`${label} added as a pane`, 'success', { label: 'Open', onClick: open });
+  showToast(`${label} added as a pane`, 'success', { label: 'Open', onClick: () => revealPane(sid, false) });
 }
 
 function showCommand(cmd) {
@@ -17876,6 +18105,7 @@ initSessionGroupsDnd();
 initSessionPicker();
 initProjectPicker();
 initShowCard();
+initAsk();
 for (const k of readStoredList(ACTIVITY_FILTER_KEY)) activityFilter.add(k);
 initSidebarResize();
 applyModalZoom();

package/public/index.html

@@ -362,6 +362,10 @@
         <div id="terminal-pane" class="terminal-pane">
           <div class="terminal-bar">
             <span id="terminal-status" class="terminal-status"></span>
+            <button id="ask-reopen" class="show-reopen ask-reopen" type="button" hidden>
+              <span class="ask-dot" aria-hidden="true">?</span>
+              <span class="ask-reopen-n"></span>
+            </button>
             <button id="show-reopen" class="show-reopen" type="button" title="Show the overlay" hidden>
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M13 4v7h8"/></svg>
               <span class="show-reopen-n">show</span>
@@ -375,6 +379,23 @@
           </div>
           <div id="terminal-host" class="terminal-host">
             <section id="show-card" class="show-card" aria-label="Show overlay"></section>
+            <div id="ask-modal" class="ask-modal" hidden>
+              <section class="ask-box" role="dialog" aria-modal="true" aria-labelledby="ask-title">
+                <header class="ask-head">
+                  <span class="ask-dot" aria-hidden="true">?</span>
+                  <span id="ask-title" class="ask-title"></span>
+                  <span class="ask-hint">Esc hides</span>
+                  <button type="button" class="ask-x" data-ask="hide" title="Hide. The question stays open." aria-label="Hide">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+                  </button>
+                </header>
+                <div class="ask-body"></div>
+                <footer class="ask-foot">
+                  <span>The agent waits for your answer.</span>
+                  <button type="button" data-ask="skip">Skip</button>
+                </footer>
+              </section>
+            </div>
           </div>
           <textarea id="terminal-key-proxy" class="terminal-key-proxy" tabindex="-1" aria-hidden="true"></textarea>
         </div>
@@ -557,13 +578,13 @@
           <button id="session-info-sticky-btn" class="icon-btn" style="display:none" title="Sticky pin — always show in the list" onclick="toggleSessionSticky(_infoModalSessionId); updateStickyBtnState()">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>
           </button>
-          <button id="session-info-cost-btn" class="icon-btn" style="display:none" title="Open in Cost" onclick="openCost(_infoModalSessionId)">
+          <button id="session-info-cost-btn" class="icon-btn" style="display:none" title="Open in Cost (Shift: Cost tab)" onclick="openAppForInfoModal(openCost, event)">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 18V6"/></svg>
           </button>
-          <button id="session-info-marketplace-btn" class="icon-btn" style="display:none" title="Open in Marketplace" onclick="openMarketplaceForInfoModal()">
+          <button id="session-info-marketplace-btn" class="icon-btn" style="display:none" title="Open in Marketplace (Shift: Marketplace tab)" onclick="openAppForInfoModal(openMarketplace, event)">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
           </button>
-          <button id="session-info-memory-btn" class="icon-btn" style="display:none" title="Open in Memory" onclick="openMemoryForInfoModal()">
+          <button id="session-info-memory-btn" class="icon-btn" style="display:none" title="Open in Memory (Shift: Memory tab)" onclick="openAppForInfoModal(openMemory, event)">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
           </button>
           <button class="modal-close" aria-label="Close dialog" onclick="closeTeamModal()">