claude-code-kanban 7.19.0 → 7.21.0

package/public/app.js

@@ -1939,6 +1939,8 @@ const ICON_AGENT_ACTIVE =
 const ICON_TERMINAL =
   '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>';
 const TERMINAL_TITLE = 'Running in a terminal here';
+const ICON_FORK =
+  '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"/><path d="M12 12v3"/></svg>';
 const ICON_DISPATCHED =
   '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>';
 const ICON_CHAT =
@@ -2808,7 +2810,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 };
@@ -3982,16 +3984,15 @@ function renderSessions() {
     return out;
   };
 
-  const renderSessionCard = (session) => {
-    if (session.placeholder) return renderPlaceholderCard(session, childDepth.get(session.id));
+  const renderSessionCard = (session, hostProject = null) => {
+    if (session.placeholder) return renderPlaceholderCard(session, childDepth.get(session.id), hostProject);
     const total = session.taskCount;
     const pct = (n) => Math.round((n / total) * 100);
     const isActive = session.id === currentSessionId && viewMode === 'session';
     const isLive = isSessionLive(session);
     const sessionName = sessionDisplayName(session);
-    const projectHtml = renderProjectIdentity(session);
+    const projectHtml = renderProjectIdentity(session, hostProject);
 
-    const gitBranch = session.gitBranch ? escapeHtml(session.gitBranch) : null;
     const isTeam = session.isTeam;
     const memberCount = session.memberCount || 0;
 
@@ -4025,8 +4026,7 @@ function renderSessions() {
           <button onclick="openSession('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${sessionBarClass(session)} ${tempClass} ${idleClass} ${justFinishedClass}${childDepthClass(childDepth.get(session.id))}">
             <span class="session-pin-btn${pinClass}" onclick="event.stopPropagation();toggleSessionPin('${sid}')" title="${pinTitle} session">${pinState === 'sticky' ? SESSION_STAR_SVG : SESSION_PIN_SVG}</span>
             <div class="session-name">${escapeHtml(sessionName)}</div>
-            ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
-            ${gitBranch ? `<div class="session-branch">${gitBranch}</div>` : ''}
+            ${renderSessionIdentity(projectHtml, session.gitBranch)}
             ${metricsHtml ? `<div class="session-metrics">${metricsHtml}</div>` : ''}
             <div class="session-footer">
               <div class="session-time">${formatDate(session.modifiedAt)}</div>
@@ -4042,6 +4042,7 @@ function renderSessions() {
                 ${session.planSourceSessionId ? `<span class="plan-indicator" title="Implements plan — click to reveal plan session" onclick="event.stopPropagation(); revealPlanSession('${escAttrJs(session.planSourceSessionId)}')">${ICON_PLAN}</span>` : ''}
                 ${session.sharedTaskList ? `<span class="shared-tasklist-badge" title="Shared task list: ${escapeHtml(session.sharedTaskList)}">${linkSvg(12)}</span>` : ''}
                 ${session.dispatched ? `<span class="dispatched-badge"${session.dispatched.parent ? ` onclick="event.stopPropagation(); revealSession('${escAttrJs(session.dispatched.parent)}')"` : ''} title="${escapeHtml(dispatchedTitle(session.dispatched))}">${ICON_DISPATCHED}</span>` : ''}
+                ${session.forkedFromSessionId ? `<span class="fork-badge" onclick="event.stopPropagation(); revealSession('${escAttrJs(session.forkedFromSessionId)}')" title="Forked from ${escapeHtml(session.forkedFromSessionId)}, click to reveal">${ICON_FORK}</span>` : ''}
                 ${runningTerminals.has(session.id) ? `<span class="terminal-badge" onclick="event.stopPropagation(); showSessionTerminal('${escAttrJs(session.id)}')" title="${TERMINAL_TITLE}">${ICON_TERMINAL}</span>` : ''}
                 ${isWaitingSession(session) ? `<span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>` : ''}
                 ${session.hasRunningAgents && !isWaitingSession(session) ? `<span class="agent-badge agent-badge-active" title="Agents running">${ICON_AGENT_ACTIVE}</span>` : ''}
@@ -4072,7 +4073,7 @@ function renderSessions() {
         SECTION_OUTSIDE,
         `Outside current filters ${countHtml(outside.rows)}`,
         false,
-        collapsedProjectGroups.has(SECTION_OUTSIDE) ? '' : outside.rows.map(renderSessionCard).join(''),
+        collapsedProjectGroups.has(SECTION_OUTSIDE) ? '' : outside.rows.map((s) => renderSessionCard(s)).join(''),
       )
     : '';
 
@@ -4134,10 +4135,11 @@ function renderSessions() {
   const groupPinned = store.getItem(GROUP_PINNED_KEY) !== 'false';
   const pinWeight = (s) => (isPlacedSticky(s.id) ? 2 : isInPinnedGroup(s) ? 1 : 0);
   const pinSort = (a, b) => pinWeight(b) - pinWeight(a);
-  const renderGroupSessions = (list, pinKey) => {
-    if (!groupPinned || pinnedSessionIds.size === 0) return nestChildren(list).map(renderSessionCard).join('');
+  const renderGroupSessions = (list, pinKey, hostProject = null) => {
+    const card = (s) => renderSessionCard(s, hostProject);
+    if (!groupPinned || pinnedSessionIds.size === 0) return nestChildren(list).map(card).join('');
     const gPinned = nestChildren(list.filter(isInPinnedGroup));
-    if (gPinned.length === 0) return nestChildren(list).map(renderSessionCard).join('');
+    if (gPinned.length === 0) return nestChildren(list).map(card).join('');
     const gUnpinned = nestChildren(list.filter((s) => !isInPinnedGroup(s)));
     const pinCollapsed = collapsedProjectGroups.has(pinKey);
     return (
@@ -4157,10 +4159,10 @@ function renderSessions() {
       '<div class="pinned-sub-items' +
       (pinCollapsed ? ' collapsed' : '') +
       '">' +
-      gPinned.map(renderSessionCard).join('') +
+      gPinned.map(card).join('') +
       '</div>' +
       '</div>' +
-      gUnpinned.map(renderSessionCard).join('')
+      gUnpinned.map(card).join('')
     );
   };
 
@@ -4192,7 +4194,7 @@ function renderSessions() {
             </div>
             <div class="project-group-breadcrumb${nestedCls}" data-full-path="${escapedPath}" title="Click to copy path">${breadcrumbHtml}</div>
             <div class="project-group-sessions${isCollapsed ? ' collapsed' : ''}${nestedCls}" data-project-path="${escapedPath}">
-              ${renderGroupSessions(projectSessions, pinKey(projectPath))}
+              ${renderGroupSessions(projectSessions, pinKey(projectPath), projectPath)}
             </div>
           `;
   };
@@ -4255,7 +4257,7 @@ function renderSessions() {
     let body = '';
     if (flat) {
       body = nestChildren([...bucket].sort(byMemberOrder))
-        .map(renderSessionCard)
+        .map((s) => renderSessionCard(s))
         .join('');
     } else {
       const loose = [];
@@ -4361,7 +4363,7 @@ function renderSessions() {
             </div>
           `;
       } else {
-        projectsHtml += ungrouped.map(renderSessionCard).join('');
+        projectsHtml += ungrouped.map((s) => renderSessionCard(s)).join('');
       }
     }
 
@@ -4372,7 +4374,7 @@ function renderSessions() {
   } else {
     const sectioned = sessionGroups.length > 0;
     const restHtml =
-      sectioned && collapsedProjectGroups.has(SECTION_SESSIONS) ? '' : sgRest.map(renderSessionCard).join('');
+      sectioned && collapsedProjectGroups.has(SECTION_SESSIONS) ? '' : sgRest.map((s) => renderSessionCard(s)).join('');
     const tail = sectioned ? sectionHtml(SECTION_SESSIONS, 'Sessions', true, restHtml, sgRest.length === 0) : restHtml;
     sessionsList.innerHTML = html + sgSectionHtml(true) + tail + outsideHtml;
   }
@@ -4444,7 +4446,7 @@ function renderSession() {
   const completed = currentTasks.filter((t) => t.status === 'completed').length;
   const percent = currentTasks.length > 0 ? Math.round((completed / currentTasks.length) * 100) : 0;
 
-  progressPercent.textContent = `${percent}%`;
+  progressPercent.textContent = `${percent}% done`;
   progressBar.style.width = `${percent}%`;
   const hasInProgress = currentTasks.some((t) => t.status === 'in_progress');
   progressBar.classList.toggle('shimmer', hasInProgress && percent < 100);
@@ -4468,7 +4470,7 @@ function renderProjectView() {
   const completed = currentTasks.filter((t) => t.status === 'completed').length;
   const percent = currentTasks.length > 0 ? Math.round((completed / currentTasks.length) * 100) : 0;
 
-  progressPercent.textContent = `${percent}%`;
+  progressPercent.textContent = `${percent}% done`;
   progressBar.style.width = `${percent}%`;
   const hasInProgress = currentTasks.some((t) => t.status === 'in_progress');
   progressBar.classList.toggle('shimmer', hasInProgress && percent < 100);
@@ -9073,6 +9075,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)}`;
@@ -9446,7 +9449,7 @@ async function openPreviewByPath(filePath, base, onUnsupported, sessionId = prev
   try {
     const r = await api('/api/preview', { query: { path: filePath, base: base || null } });
     if (!r.ok) {
-      showToast('Preview file unavailable', 'error');
+      showToast('Preview file unavailable', 'error', { label: 'Copy path', onClick: () => copyText(filePath, 'path') });
       return;
     }
     const data = await r.json();
@@ -10250,6 +10253,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);
@@ -10368,6 +10373,8 @@ const CONTEXT_COLORS = {
   red: 'var(--danger)',
 };
 const COST_THRESHOLDS = { green: 0.5, yellow: 2, orange: 5 };
+// Status colors as small text measure 3.7–3.9:1 on light surfaces; bars and dots keep the pure color.
+const textTone = (color) => `color-mix(in srgb, ${color} 70%, var(--text-primary))`;
 const MODEL_THRESHOLDS = [
   { match: /sonnet/i, yellow: 120000, orange: 200000, red: 300000 },
   { match: /haiku/i, yellow: 100000, orange: 130000, red: 150000 },
@@ -10474,7 +10481,7 @@ function renderContextBar(session) {
             ${renderMarkers(ctx.markers)}
           </div>
           <div class="context-bar-labels">
-            <span style="color:${color}">${Math.round(ctx.pct)}% (${used})</span>
+            <span>ctx <span style="color:${textTone(color)}">${Math.round(ctx.pct)}% (${used})</span></span>
             <span>${Math.round(ctx.remaining)}% free</span>
           </div>
         </div>`;
@@ -10515,7 +10522,7 @@ function formatCacheLeft(expiresAt, expiredText) {
   if (left === 0) return { text: expiredText, color: 'var(--text-muted)' };
   const text = `${Math.floor(left / 60)}:${String(left % 60).padStart(2, '0')}`;
   const color = left < 120 ? CONTEXT_COLORS.red : left < 300 ? CONTEXT_COLORS.orange : CONTEXT_COLORS.green;
-  return { text, color };
+  return { text, color: textTone(color) };
 }
 
 let cacheTimerInterval = null;
@@ -10584,7 +10591,7 @@ function renderContextDetail(session, { tokens = true } = {}) {
             </div>
           </div>
           <div class="detail-context-summary">
-            <span style="color:${color}">${Math.round(ctx.pct)}% used</span>
+            <span style="color:${textTone(color)}">${Math.round(ctx.pct)}% used</span>
             <span${ctx.compacts ? ` title="Auto-compact window · model window ${escapeHtml(formatTokens(ctx.modelSize / 1000))}"` : ''}>${formatTokens(ctx.usedTokens / 1000)} / ${formatTokens(ctx.size / 1000)}</span>
           </div>`
     : '';
@@ -10596,11 +10603,11 @@ function renderContextDetail(session, { tokens = true } = {}) {
           <div class="detail-context-stats">
             ${usageRows}
             ${totalRows}
-            ${ctx ? `<div class="stat-item"><span class="stat-label">Cost</span><span class="stat-value" style="color:${getCostColor(cost.total_cost_usd)}">${formatCost(cost.total_cost_usd)}</span></div>` : ''}
+            ${ctx ? `<div class="stat-item"><span class="stat-label">Cost</span><span class="stat-value" style="color:${textTone(getCostColor(cost.total_cost_usd))}">${formatCost(cost.total_cost_usd)}</span></div>` : ''}
             ${reply ? renderCacheTimer(reply) : ''}
             ${cost.total_duration_ms != null ? `<div class="stat-item"><span class="stat-label">Duration</span><span class="stat-value">${formatDuration(cost.total_duration_ms)}</span></div>` : ''}
             ${cost.total_api_duration_ms != null ? `<div class="stat-item"><span class="stat-label">API time</span><span class="stat-value">${formatDuration(cost.total_api_duration_ms)}</span></div>` : ''}
-            ${cost.total_lines_added != null ? `<div class="stat-item"><span class="stat-label">Lines</span><span class="stat-value"><span style="color:${CONTEXT_COLORS.green}">+${(cost.total_lines_added || 0).toLocaleString()}</span> / <span style="color:${CONTEXT_COLORS.red}">-${(cost.total_lines_removed || 0).toLocaleString()}</span></span></div>` : ''}
+            ${cost.total_lines_added != null ? `<div class="stat-item"><span class="stat-label">Lines</span><span class="stat-value"><span style="color:${textTone(CONTEXT_COLORS.green)}">+${(cost.total_lines_added || 0).toLocaleString()}</span> / <span style="color:${textTone(CONTEXT_COLORS.red)}">-${(cost.total_lines_removed || 0).toLocaleString()}</span></span></div>` : ''}
           </div>
         </div>`;
 }
@@ -10873,8 +10880,8 @@ function showWaitingDetail() {
   // With actions on screen the form/buttons are the content — tuck the raw
   // JSON behind a toggle, but keep what the user is approving visible: for a
   // permission ask surface the command (or description) as a one-line summary
+  let summaryHtml = '';
   if ((actionsHtml || footerHtml) && inputHtml) {
-    let summaryHtml = '';
     if (currentWaiting.kind === 'plan' && typeof params?.plan === 'string' && params.plan) {
       // A plan ask IS the plan — render it in full so it can be reviewed and
       // approved right here (follow mode included) instead of a JSON dump. The
@@ -10897,7 +10904,8 @@ function showWaitingDetail() {
   autoSizeModal(modal, body);
   setMsgDetailFollow(msgDetailFollowLatest);
   const overlay = document.getElementById('msg-detail-modal');
-  const meta = [formatDate(currentWaiting.timestamp), 'waiting'];
+  // The permission card's header already shows how long the ask has waited.
+  const meta = summaryHtml ? [] : [formatDate(currentWaiting.timestamp), 'waiting'];
   document.getElementById('msg-detail-meta').textContent = meta.join(' · ');
   currentPinDetailId = null;
   updateMsgDetailPinState();
@@ -10927,17 +10935,34 @@ function pathBasename(p) {
 
 // `session.worktree` is resolved server-side from the `.git` pointer file, so it holds for a
 // worktree parked beside its repo as well as one under <repo>/.claude/worktrees/.
-function renderProjectIdentity(session) {
+// Under its own project group the card leaves the repo name out: the group header shows it.
+function renderProjectIdentity(session, hostProject) {
   if (!session.project) return null;
+  const underHost = !!hostProject && sessionProjectKey(session) === hostProject;
   const wt = session.worktree;
-  if (!wt) return escapeHtml(pathBasename(session.project));
+  if (!wt) {
+    return underHost ? null : `<span class="session-project">${escapeHtml(pathBasename(session.project))}</span>`;
+  }
   const repo = pathBasename(wt.repo);
   // Worktrees beside the repo are conventionally named `<repo>-<branch>`, and repeating the
   // repo inside a chip that already sits next to it wastes the whole width of the card.
   const name = wt.name.startsWith(repo) ? wt.name.slice(repo.length).replace(/^[-._]/, '') || wt.name : wt.name;
-  return `${escapeHtml(repo)}<span class="wt-chip" title="Worktree of ${escapeHtml(wt.repo)}">⑂ ${escapeHtml(name)}</span>`;
+  const chip = `<span class="wt-chip" title="Worktree of ${escapeHtml(wt.repo)}">⑂ ${escapeHtml(name)}</span>`;
+  return underHost ? chip : `<span class="session-project">${escapeHtml(repo)}</span>${chip}`;
 }
 
+function renderSessionIdentity(projectHtml, gitBranch) {
+  if (!projectHtml && !gitBranch) return '';
+  const branch = gitBranch
+    ? `<span class="session-branch" title="${escapeHtml(gitBranch)}">${escapeHtml(gitBranch)}</span>`
+    : '';
+  const sep = projectHtml && branch ? '<span class="agent-ident-sep">·</span>' : '';
+  return `<div class="session-secondary">${projectHtml || ''}${sep}${branch}</div>`;
+}
+
+const SHORT_DATE = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' });
+const SHORT_DATE_YEAR = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+
 function formatDate(dateStr) {
   const date = new Date(dateStr);
   const now = new Date();
@@ -10946,7 +10971,8 @@ function formatDate(dateStr) {
   if (diff < JUST_NOW_MS) return 'just now';
   if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
   if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
-  return date.toLocaleDateString();
+  if (diff < 7 * 86400000) return `${Math.floor(diff / 86400000)}d ago`;
+  return (date.getFullYear() === now.getFullYear() ? SHORT_DATE : SHORT_DATE_YEAR).format(date);
 }
 
 // Terminal output reaches the transcript raw. A CSI-only pattern left OSC
@@ -11272,8 +11298,9 @@ function loadMermaid() {
 }
 
 let mermaidQueue = Promise.resolve();
+let mermaidSeq = 0;
 
-// mermaid.run is async, and two runs that overlap draw diagrams over each other.
+// mermaid.render is async, and two renders that overlap draw diagrams over each other.
 function queueMermaid(work) {
   mermaidQueue = mermaidQueue.then(work).catch((err) => console.warn(err.message));
 }
@@ -11300,10 +11327,15 @@ function initMermaidBlocks(container) {
     return;
   }
   queueMermaid(async () => {
-    // One block per run, so a bad diagram shows its own error and the others still render.
+    // One block per render, so a bad diagram shows its own error and the others still render.
+    // render, not run: run measures labels in place, and under a modal's CSS zoom the measured
+    // widths are off, so node boxes clip their text.
     for (const b of stampPending()) {
       try {
-        await mermaid.run({ nodes: [b] });
+        const { svg, bindFunctions } = await mermaid.render(`mermaid-${++mermaidSeq}`, b.textContent.trim());
+        b.innerHTML = svg;
+        b.setAttribute('data-processed', 'true');
+        bindFunctions?.(b);
       } catch (err) {
         showMermaidError(b, err);
       }
@@ -12360,8 +12392,8 @@ function updateDismissBtnState() {
   const btn = document.getElementById('session-info-dismiss-btn');
   if (!btn || !_infoModalSessionId) return;
   const isDismissed = dismissedSessionIds.has(_infoModalSessionId);
-  btn.textContent = isDismissed ? 'Restore' : 'Dismiss';
-  btn.title = isDismissed ? 'Restore — show in active list again' : 'Dismiss — hide from active list';
+  btn.textContent = isDismissed ? 'Show session' : 'Hide session';
+  btn.title = isDismissed ? 'Show in the active list again' : 'Hide from the active list';
 }
 
 let _planSessionId = null;
@@ -15214,9 +15246,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;
@@ -16417,6 +16450,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
@@ -16629,6 +16833,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 });
@@ -16882,8 +17087,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>`;
@@ -16989,7 +17194,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;
@@ -17292,13 +17497,13 @@ function forgetPlaceholder(id) {
   return true;
 }
 
-function renderPlaceholderCard(session, depth) {
+function renderPlaceholderCard(session, depth, hostProject) {
   const isActive = session.id === currentSessionId && viewMode === 'session';
-  const projectHtml = renderProjectIdentity(session);
+  const projectHtml = renderProjectIdentity(session, hostProject);
   return `
           <button onclick="openSession('${escAttrJs(session.id)}')" data-session-id="${escapeHtml(session.id)}" class="session-item session-placeholder ${isActive ? 'active' : ''}${childDepthClass(depth)}" title="${escapeHtml(`${session.id} | ${session.project}`)}">
             <div class="session-name">${escapeHtml(session.name)}</div>
-            ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
+            ${renderSessionIdentity(projectHtml, null)}
             ${
               trustWaiting.has(session.id)
                 ? `<div class="session-waiting"><span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>trust this folder?</div>`
@@ -17929,6 +18134,7 @@ initSessionGroupsDnd();
 initSessionPicker();
 initProjectPicker();
 initShowCard();
+initAsk();
 for (const k of readStoredList(ACTIVITY_FILTER_KEY)) activityFilter.add(k);
 initSidebarResize();
 applyModalZoom();
@@ -18010,7 +18216,13 @@ function makeLimitCell(label, bucket) {
 function makeLimitSpan(rl) {
   const span = document.createElement('span');
   span.className = 'footer-limits';
-  span.append(makeLimitCell('5h', rl?.five_hour), document.createTextNode(' · '), makeLimitCell('7d', rl?.seven_day));
+  span.title = 'Plan usage: 5-hour and 7-day limits, used % (time until reset)';
+  span.append(
+    'Usage ',
+    makeLimitCell('5h', rl?.five_hour),
+    document.createTextNode(' · '),
+    makeLimitCell('7d', rl?.seven_day),
+  );
   return span;
 }
 function renderSidebarFooter(rateLimits) {

package/public/index.html

@@ -243,7 +243,7 @@
               <div class="progress-bar">
                 <div id="progress-bar" class="progress-fill" style="width: 0%"></div>
               </div>
-              <span id="progress-percent" class="progress-text">0%</span>
+              <span id="progress-percent" class="progress-text">0% done</span>
             </div>
             <button id="terminal-toggle" class="icon-btn" onclick="event.shiftKey ? openTerminalManager() : toggleTerminal()" title="Show / hide terminal (Ctrl+`) · Focus (Alt+`) · End (Alt+Shift+`) · Shift+click or Ctrl+Shift+` for all terminals" aria-label="Toggle terminal" style="display: none;">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -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>
@@ -575,7 +596,7 @@
       </div>
       <div id="team-modal-body" class="modal-body modal-zoomable"></div>
       <div class="modal-footer">
-        <button id="session-info-dismiss-btn" class="btn btn-secondary" onclick="toggleDismissSession(_infoModalSessionId); closeTeamModal()">Dismiss</button>
+        <button id="session-info-dismiss-btn" class="btn btn-secondary" onclick="toggleDismissSession(_infoModalSessionId); closeTeamModal()">Hide session</button>
         <button class="btn btn-secondary" onclick="showToolStatsModal(_infoModalSessionId)" title="Tool invocation statistics">Tool Stats</button>
         <button class="btn btn-secondary" onclick="closeTeamModal()">Close</button>
       </div>
@@ -706,7 +727,7 @@
       </div>
       <div id="agent-modal-body" class="modal-body modal-zoomable" style="overflow-y: auto; overflow-x: hidden; flex: 0 1 auto; min-height: 0;"></div>
       <div class="modal-footer">
-        <button id="agent-modal-dismiss-btn" class="btn agent-dismiss-btn" style="display:none" onclick="dismissAgent(currentAgentModalId);closeAgentModal()">Dismiss</button>
+        <button id="agent-modal-dismiss-btn" class="btn btn-secondary" style="display:none" onclick="dismissAgent(currentAgentModalId);closeAgentModal()" title="Mark this agent as stopped">Mark stopped</button>
         <button class="btn btn-secondary" onclick="closeAgentModal()">Close</button>
       </div>
     </div>