claude-code-kanban 4.19.0 → 4.21.0

package/public/app.js

@@ -567,8 +567,6 @@ async function refreshProjectAgents() {
   renderAgentFooter();
 }
 
-//#endregion
-
 //#region MESSAGE_PANEL
 function toggleMessagePanel() {
   const panel = document.getElementById('message-panel');
@@ -1180,18 +1178,19 @@ function toggleToolGroup(id) {
   if (el) el.classList.toggle('show');
 }
 
-function getWaitingLabel(kind, tool) {
-  if (kind !== 'question') return `Awaiting permission: ${tool}`;
-  if (tool === 'ExitPlanMode') return 'Plan awaiting approval';
-  return 'Question pending';
-}
-
+// Legacy markers (written before the gate minted kind:"plan") carry no kind
+// for plans — the tool name is the durable signal there.
 function getWaitingPill(kind, tool) {
-  if (kind === 'question' && tool === 'ExitPlanMode') return 'Plan awaiting approval';
+  if (kind === 'plan' || tool === 'ExitPlanMode') return 'Plan awaiting approval';
   if (kind === 'question') return 'Question pending';
   return 'Awaiting permission';
 }
 
+function getWaitingLabel(kind, tool) {
+  const pill = getWaitingPill(kind, tool);
+  return pill === 'Awaiting permission' ? `${pill}: ${tool}` : pill;
+}
+
 function deriveWaitingDetail(tool, params) {
   if (!params) return '';
   const trunc = (s) => (s.length > 80 ? `${s.slice(0, 80)}...` : s);
@@ -1235,17 +1234,40 @@ function renderWaitingBody(tool, params) {
   return renderToolParamsHtml(params);
 }
 
+const PLAN_REJECT_MSG = 'Plan rejected from the kanban board.';
+
+// Answerable only when the marker carries a request id (written by
+// approval-gate.sh, which is polling for a decision) and the gate hasn't
+// lapsed past its wait window — older or lapsed markers are only answerable
+// in the terminal.
+function isWaitingAnswerable() {
+  return !!(currentWaiting?.id && !currentWaiting.lapsed);
+}
+
+function parseWaitingInput() {
+  try {
+    return JSON.parse(currentWaiting?.toolInput || '');
+  } catch (_) {
+    return null; /* toolInput may be truncated/non-JSON */
+  }
+}
+
+// One source for the decision-button pair on every surface — Approve/Reject
+// for plans, Allow/Deny for permissions; only the css class prefix differs.
+// Questions return '' (answered via the form in the detail modal).
+function waitingDecisionButtons(cls) {
+  if (!isWaitingAnswerable() || currentWaiting.kind === 'question') return '';
+  const plan = currentWaiting.kind === 'plan';
+  // Code-authored call argument, not data — hence the constant-style name the
+  // escaping check reads as safe.
+  const DENY_ARG = plan ? "{behavior:'deny',message:PLAN_REJECT_MSG}" : "{behavior:'deny'}";
+  return `<button class="${escapeHtml(cls)}-allow" onclick="event.stopPropagation();respondWaiting({behavior:'allow'})">${plan ? 'Approve' : 'Allow'}</button><button class="${escapeHtml(cls)}-deny" onclick="event.stopPropagation();respondWaiting(${DENY_ARG})">${plan ? 'Reject' : 'Deny'}</button>`;
+}
+
 function renderWaitingEntry() {
   if (!isWaitingFresh()) return '';
   const tool = currentWaiting.toolName || 'unknown';
-  let params = null;
-  if (currentWaiting.toolInput) {
-    try {
-      params = JSON.parse(currentWaiting.toolInput);
-    } catch (_) {
-      /* toolInput may be truncated/non-JSON */
-    }
-  }
+  const params = parseWaitingInput();
   const pillText = getWaitingPill(currentWaiting.kind, tool);
   const detail = deriveWaitingDetail(tool, params);
   const detailHtml = detail ? ` <span style="color:var(--text-secondary)">${escapeHtml(detail)}</span>` : '';
@@ -1253,7 +1275,73 @@ function renderWaitingEntry() {
   const bodyWrap = bodyHtml ? `<div class="msg-waiting-body">${bodyHtml}</div>` : '';
   const pill = `<span class="msg-waiting-pill">${escapeHtml(pillText)}</span>`;
   const discardBtn = `<button class="msg-waiting-discard" title="Discard permission prompt" onclick="event.stopPropagation();discardWaiting()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>`;
-  return `<div class="msg-item msg-waiting" onclick="msgDetailFollowLatest=false;showWaitingDetail()">${getToolIcon(tool)}<div class="msg-body"><div class="msg-text">${pill} <span style="font-weight:600">${escapeHtml(tool)}</span>${detailHtml}</div>${bodyWrap}<div class="msg-time">waiting…</div></div>${discardBtn}</div>`;
+  // Questions are answered in the detail modal; plans render there too.
+  const buttons = waitingDecisionButtons('msg-waiting');
+  const actions = buttons ? `<span class="msg-waiting-actions">${buttons}</span>` : '';
+  // Lapsed = gate stopped polling — the ask is only answerable in the terminal
+  const lapsed = !!currentWaiting.lapsed;
+  return `<div class="msg-item msg-waiting" onclick="msgDetailFollowLatest=false;showWaitingDetail()">${getToolIcon(tool)}<div class="msg-body"><div class="msg-text">${pill} <span style="font-weight:600">${escapeHtml(tool)}</span>${detailHtml}</div>${bodyWrap}<div class="msg-waiting-footer"><div class="msg-time">${lapsed ? 'answer in the terminal' : 'waiting…'}</div>${actions}</div></div>${discardBtn}</div>`;
+}
+
+// Shared approval controls for a fresh plan ask — the waiting-detail footer and
+// the saved-plan modal offer the same decision, so they render the same row.
+// Distinct input ids keep the two surfaces from shadowing each other's feedback.
+function planApprovalControlsHtml(inputId) {
+  return `<input id="${escapeHtml(inputId)}" class="waiting-option-input" type="text" placeholder="feedback for reject (optional)…"><button class="waiting-btn-allow" onclick="respondWaiting({behavior:'allow'})">Approve</button><button class="waiting-btn-deny" onclick="rejectWaitingPlan('${escAttrJs(inputId)}')">Reject</button>`;
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
+function rejectWaitingPlan(inputId) {
+  const feedback = document.getElementById(inputId)?.value?.trim();
+  respondWaiting({ behavior: 'deny', message: feedback || PLAN_REJECT_MSG });
+}
+
+// UI-driven approvals: POST the decision the blocking approval-gate.sh hook is
+// polling for. First writer wins (D5) — a 409/410 means the ask was answered in
+// the terminal or superseded, so just drop the card.
+async function respondWaiting(payload) {
+  if (!currentSessionId || !currentWaiting?.id) return;
+  try {
+    const res = await fetch(`/api/sessions/${encodeURIComponent(currentSessionId)}/waiting/respond`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id: currentWaiting.id, ...payload }),
+    });
+    if (res.ok || res.status === 409 || res.status === 410) {
+      clearWaitingUi();
+    } else {
+      // Surface a respond failure — a silent console error reads as a dead button
+      const text = await res.text();
+      console.error('[respondWaiting]', res.status, text);
+      let msg = text;
+      try {
+        msg = JSON.parse(text).error || text;
+      } catch (_) {
+        /* plain text */
+      }
+      showToast(msg, 'error');
+    }
+  } catch (e) {
+    console.error('[respondWaiting]', e);
+    showToast(String(e), 'error');
+  }
+}
+
+// Drop the answered/discarded ask from every surface it renders on
+function clearWaitingUi() {
+  currentWaiting = null;
+  waitingAnswerDraft = {};
+  waitingCustomDraft = {};
+  if (currentMsgDetailIdx === MSG_DETAIL_WAITING_IDX) {
+    // In follow mode stay in the modal and swap to the latest message —
+    // closing it would silently drop the user out of following.
+    if (msgDetailFollowLatest && currentMessages.length) showMsgDetail(currentMessages.length - 1);
+    else closeMsgDetailModal();
+  }
+  // The saved-plan modal stays open after a decision — only its approval row goes
+  document.getElementById('plan-approval-footer')?.remove();
+  renderMessages(currentMessages);
+  renderAgentFooter();
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
@@ -1263,12 +1351,7 @@ async function discardWaiting() {
     const res = await fetch(`/api/sessions/${encodeURIComponent(currentSessionId)}/waiting/discard`, {
       method: 'POST',
     });
-    if (res.ok) {
-      currentWaiting = null;
-      if (currentMsgDetailIdx === MSG_DETAIL_WAITING_IDX) closeMsgDetailModal();
-      renderMessages(currentMessages);
-      renderAgentFooter();
-    }
+    if (res.ok) clearWaitingUi();
   } catch (e) {
     console.error('[discardWaiting]', e);
   }
@@ -1425,6 +1508,7 @@ function toggleAgentPin(agentId) {
   }
   savePins(currentSessionId, currentPins);
   renderMessages(currentMessages);
+  renderSessions();
   renderAgentFooter();
 }
 
@@ -1476,6 +1560,7 @@ function togglePin(msgIndex) {
   }
   savePins(currentSessionId, currentPins);
   renderMessages(currentMessages);
+  renderSessions();
   updateMsgDetailPinState();
 }
 
@@ -1485,6 +1570,7 @@ function unpinById(pinIdx) {
   currentPins.splice(pinIdx, 1);
   savePins(currentSessionId, currentPins);
   renderMessages(currentMessages);
+  renderSessions();
   if (wasAgent) renderAgentFooter();
   updateMsgDetailPinState();
 }
@@ -1759,6 +1845,7 @@ function highlightSelectedMsg() {
 
 function showMsgDetail(idx) {
   currentMsgDetailIdx = idx;
+  document.getElementById('msg-detail-waiting-footer').innerHTML = '';
   msgHighlightDimmed = false;
   const m = currentMessages[idx];
   if (!m) return;
@@ -1900,8 +1987,22 @@ function _setModalWidth(modal, slot, on, maxWidth, width) {
   }
 }
 
+function _modalEl(modalId) {
+  return document.querySelector(`#${modalId} .modal`);
+}
+
+// The opt-in marker for fullscreen and drag-resize alike: the presence of a
+// `<modalId>-fullscreen-btn` button in the markup.
+function _forEachFullscreenModal(cb) {
+  for (const btn of document.querySelectorAll('[id$="-fullscreen-btn"]')) {
+    const modalId = btn.id.replace(/-fullscreen-btn$/, '');
+    const modal = _modalEl(modalId);
+    if (modal) cb(modalId, modal);
+  }
+}
+
 function _applyModalFullscreen(modalId, on) {
-  const modal = document.querySelector(`#${modalId} .modal`);
+  const modal = _modalEl(modalId);
   modal.classList.toggle('fullscreen', on);
   _setModalWidth(modal, 'Fs', on, '', '');
   updateFullscreenBtnIcon(`${modalId}-fullscreen-btn`, on);
@@ -1909,16 +2010,15 @@ function _applyModalFullscreen(modalId, on) {
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function toggleModalFullscreen(modalId) {
-  const on = !document.querySelector(`#${modalId} .modal`).classList.contains('fullscreen');
+  const on = !_modalEl(modalId).classList.contains('fullscreen');
   _applyModalFullscreen(modalId, on);
   localStorage.setItem(`modal-fullscreen-${modalId}`, String(on));
 }
 
 function loadModalFullscreen() {
-  for (const btn of document.querySelectorAll('[id$="-fullscreen-btn"]')) {
-    const modalId = btn.id.replace(/-fullscreen-btn$/, '');
+  _forEachFullscreenModal((modalId) => {
     if (localStorage.getItem(`modal-fullscreen-${modalId}`) === 'true') _applyModalFullscreen(modalId, true);
-  }
+  });
 }
 
 // Hides the overlay only — the fullscreen state stays on the dialog, it is a
@@ -1937,6 +2037,72 @@ function updateFullscreenBtnIcon(btnId, isFullscreen) {
     : '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>';
 }
 
+// Free-form modal resize: drag the bottom-right grip, double-click it to reset.
+// The size lives in CSS custom properties + `.user-sized` (see style.css) rather
+// than inline width/height, so it never collides with the inline-style stash
+// that fullscreen and "Show more" do via _setModalWidth. The viewport cap lives
+// only in the CSS min(); JS clamps just the minimums.
+const MODAL_MIN_W = 360;
+const MODAL_MIN_H = 240;
+
+function _setModalUserSize(modal, w, h) {
+  modal.style.setProperty('--user-modal-w', w);
+  modal.style.setProperty('--user-modal-h', h);
+}
+
+function initModalResize() {
+  _forEachFullscreenModal((modalId, modal) => {
+    const wKey = `modal-width-${modalId}`;
+    const hKey = `modal-height-${modalId}`;
+    const savedW = localStorage.getItem(wKey);
+    const savedH = localStorage.getItem(hKey);
+    if (savedW && savedH) {
+      _setModalUserSize(modal, savedW, savedH);
+      modal.classList.add('user-sized');
+    }
+
+    const handle = document.createElement('div');
+    handle.className = 'modal-resize-handle';
+    handle.title = 'Drag to resize · double-click to reset';
+    modal.appendChild(handle);
+
+    let startW, startH, w, h;
+    _initDragResize(handle, {
+      onStart() {
+        startW = modal.offsetWidth;
+        startH = modal.offsetHeight;
+        // autoSizeModal / "Show more" may have widened the dialog inline
+        // before the first drag; inline width beats the .user-sized CSS.
+        modal.style.width = '';
+        modal.style.maxWidth = '';
+        // Vars and class land together, so `.user-sized` never reads an
+        // undefined var.
+        _setModalUserSize(modal, `${startW}px`, `${startH}px`);
+        modal.classList.add('user-sized');
+      },
+      // The overlay centers the modal, so both edges move — double the delta
+      // to keep the grip under the cursor.
+      onMove(dx, dy) {
+        w = Math.max(MODAL_MIN_W, startW + dx * 2);
+        h = Math.max(MODAL_MIN_H, startH + dy * 2);
+        _setModalUserSize(modal, `${w}px`, `${h}px`);
+      },
+      onEnd() {
+        if (w && h) {
+          localStorage.setItem(wKey, `${w}px`);
+          localStorage.setItem(hKey, `${h}px`);
+        }
+      },
+    });
+
+    handle.addEventListener('dblclick', () => {
+      modal.classList.remove('user-sized');
+      localStorage.removeItem(wKey);
+      localStorage.removeItem(hKey);
+    });
+  });
+}
+
 const MODAL_ZOOM_KEY = 'modal-zoom';
 const MODAL_ZOOM_MIN = 0.7;
 const MODAL_ZOOM_MAX = 2.0;
@@ -2325,7 +2491,8 @@ function _applyExpandToggle(btn, fullEl) {
   const panel = btn.closest('.message-panel');
   if (panel) panel.classList.toggle('msg-expanded-wide', expand);
   const modal = btn.closest('.modal');
-  if (modal) _setModalWidth(modal, 'Expand', expand, '60vw', '60vw');
+  // A user-dragged size is an explicit choice — don't widen over it.
+  if (modal && !modal.classList.contains('user-sized')) _setModalWidth(modal, 'Expand', expand, '60vw', '60vw');
 }
 function _toggleExpand(btn) {
   const f = document.getElementById(btn.dataset.expandId);
@@ -2343,7 +2510,7 @@ function makeExpandToggle(_truncatedHtml, fullHtml, opts = {}) {
 }
 
 function autoSizeModal(modal, body) {
-  if (modal.classList.contains('fullscreen')) return;
+  if (modal.classList.contains('fullscreen') || modal.classList.contains('user-sized')) return;
   modal.style.maxWidth = '';
   modal.classList.remove('has-mermaid');
   const hasMermaid = body.querySelector('pre.mermaid') !== null;
@@ -2547,7 +2714,7 @@ function renderAgentFooter() {
   document.getElementById('agent-footer-toggle').innerHTML = collapsed ? '&#x25B4;' : '&#x25BE;';
 
   const permHtml = permFresh
-    ? `<div class="permission-badge">${currentWaiting.kind === 'question' ? '❓ Question pending' : `⏳ Awaiting: ${escapeHtml(currentWaiting.toolName || 'unknown')}`}</div>`
+    ? `<button type="button" class="permission-badge" onclick="showWaitingDetail()">${currentWaiting.kind === 'question' ? '❓ Question pending' : currentWaiting.kind === 'plan' ? '📋 Plan pending' : `⏳ Awaiting: ${escapeHtml(currentWaiting.toolName || 'unknown')}`}</button>`
     : '';
 
   content.innerHTML =
@@ -3285,6 +3452,59 @@ function renderTaskCard(task) {
 //#endregion
 
 //#region KANBAN
+// FLIP pass around renderKanban's innerHTML rebuild (#41): the rebuild lands cards at
+// their final spot instantly, so a status change reads as a full-board reload. Recording
+// where each card was and animating from there makes a move glide instead.
+const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+function cardFlipKey(el) {
+  return `${el.dataset.sessionId}|${el.dataset.taskId}`;
+}
+
+function captureCardRects() {
+  const rects = new Map();
+  for (const el of document.querySelectorAll('.column-tasks .task-card')) {
+    rects.set(cardFlipKey(el), el.getBoundingClientRect());
+  }
+  return rects;
+}
+
+function playCardFlip(before) {
+  // An empty board before the render means a view switch, not a move — nothing to glide.
+  if (reducedMotion.matches || before.size === 0) return;
+  for (const el of document.querySelectorAll('.column-tasks .task-card')) {
+    const prev = before.get(cardFlipKey(el));
+    if (!prev) {
+      el.animate(
+        [
+          { opacity: 0, transform: 'scale(0.97)' },
+          { opacity: 1, transform: 'none' },
+        ],
+        { duration: 150, easing: 'ease-out' },
+      );
+      continue;
+    }
+    const now = el.getBoundingClientRect();
+    const dx = prev.left - now.left;
+    const dy = prev.top - now.top;
+    if (dx || dy) {
+      el.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'none' }], {
+        duration: 220,
+        easing: 'cubic-bezier(0.2, 0.7, 0.3, 1)',
+      });
+    }
+  }
+}
+
+// Rewrite a column only when its markup actually changed: SSE ticks fire on any task-file
+// write (updatedAt bumps, agent refreshes), and an unconditional innerHTML rebuild makes
+// the whole board blink for updates with nothing visible in them (#41).
+function setColumnHtml(el, html) {
+  if (el._lastHtml === html) return;
+  el._lastHtml = html;
+  el.innerHTML = html;
+}
+
 function renderKanban() {
   let filtered = currentTasks.filter((t) => !isInternalTask(t));
   if (ownerFilter) {
@@ -3299,21 +3519,43 @@ function renderKanban() {
   completedCount.textContent = completed.length;
 
   const emptyIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>`;
+  const plusIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 5v14M5 12h14"/></svg>`;
+
+  const writes = [];
+  // Adding is a live text input inside the column, so a background refresh would blow it
+  // away mid-typing -- leave the column alone until the input is gone.
+  if (!addingTask) {
+    const addTile = canAddTask()
+      ? `<button type="button" class="column-add${pending.length ? '' : ' empty'}" onclick="startAddTask(this)">${plusIcon}<span>Add task</span></button>`
+      : '';
+    writes.push([
+      pendingTasks,
+      pending.length > 0
+        ? pending.map(renderTaskCard).join('') + addTile
+        : addTile || `<div class="column-empty">${emptyIcon}<div>No pending tasks</div></div>`,
+    ]);
+  }
 
-  pendingTasks.innerHTML =
-    pending.length > 0
-      ? pending.map(renderTaskCard).join('')
-      : `<div class="column-empty">${emptyIcon}<div>No pending tasks</div></div>`;
-
-  inProgressTasks.innerHTML =
+  writes.push([
+    inProgressTasks,
     inProgress.length > 0
       ? inProgress.map(renderTaskCard).join('')
-      : `<div class="column-empty">${emptyIcon}<div>No active tasks</div></div>`;
+      : `<div class="column-empty">${emptyIcon}<div>No active tasks</div></div>`,
+  ]);
 
-  completedTasks.innerHTML =
+  writes.push([
+    completedTasks,
     completed.length > 0
       ? completed.map(renderTaskCard).join('')
-      : `<div class="column-empty">${emptyIcon}<div>No completed tasks</div></div>`;
+      : `<div class="column-empty">${emptyIcon}<div>No completed tasks</div></div>`,
+  ]);
+
+  // Capture rects (a forced layout read per card) only when a column will
+  // actually be rewritten — most SSE ticks change nothing and skip the FLIP.
+  const willChange = writes.some(([el, html]) => el._lastHtml !== html);
+  const flipRects = willChange ? captureCardRects() : null;
+  for (const [el, html] of writes) setColumnHtml(el, html);
+  if (flipRects) playCardFlip(flipRects);
 
   if (selectedTaskId) {
     const card =
@@ -3334,6 +3576,81 @@ function renderKanban() {
 
 //#endregion
 
+//#region ADD_TASK
+let addingTask = false;
+
+// A task the user types is theirs to place, and the only session it can belong to is the
+// one on screen -- the project and all-sessions views span many task dirs, so there is no
+// single target to write into.
+function canAddTask() {
+  return viewMode === 'session' && !!currentSessionId;
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function startAddTask(tile) {
+  if (addingTask) return;
+  addingTask = true;
+
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.className = 'form-input column-add-input';
+  input.placeholder = 'Task subject, Enter to add';
+  // The input mutates the column outside setColumnHtml — drop the cache so the
+  // next render rebuilds instead of skipping on a stale match.
+  pendingTasks._lastHtml = null;
+  tile.replaceWith(input);
+  input.focus();
+
+  const reset = () => {
+    addingTask = false;
+    renderKanban();
+  };
+
+  const save = async () => {
+    // Enter and blur both submit, and Enter's own save disables the input -- which blurs
+    // it. Dropping both handlers first is what keeps that from posting the subject twice.
+    input.onkeydown = null;
+    input.onblur = null;
+
+    const subject = input.value.trim();
+    if (!subject) return reset();
+    input.disabled = true;
+    const sessionId = currentSessionId;
+    try {
+      const res = await fetch(`/api/tasks/${sessionId}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ subject }),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      // The response carries the finished task, and the watcher will resend it within the
+      // SSE debounce anyway -- so show it now rather than paying a session refetch for it.
+      const { task } = await res.json();
+      currentTasks.push({ ...task, sessionId });
+      addingTask = false;
+      renderKanban();
+    } catch (error) {
+      console.error('Failed to create task:', error);
+      showToast('Failed to create task', 'error');
+      reset();
+    }
+  };
+
+  input.onkeydown = (e) => {
+    e.stopPropagation();
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      save();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      input.onblur = null;
+      reset();
+    }
+  };
+  input.onblur = () => save();
+}
+//#endregion
+
 //#region DRAG_DROP
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function onCardDragStart(e) {
@@ -5659,25 +5976,179 @@ function isWaitingFresh() {
   return Date.now() - new Date(currentWaiting.timestamp).getTime() < WAITING_TTL_MS;
 }
 
+// Per-question selections for the AskUserQuestion form, keyed by question text
+// (the shape the tool's `answers` input expects). Picks hold arrays of option
+// labels (length <= 1 unless multiSelect); free text lives separately so a
+// multi-select can combine both, the way the TUI's "Other" row does. Reset
+// when the ask changes.
+let waitingAnswerDraft = {};
+let waitingCustomDraft = {};
+let waitingDraftId = null;
+let waitingQuestions = [];
+
+function waitingAnswerFor(q) {
+  const picks = waitingAnswerDraft[q.question] || [];
+  const custom = waitingCustomDraft[q.question] || '';
+  if (q.multiSelect) {
+    const all = custom ? picks.concat(custom) : picks;
+    return all.length ? all : null;
+  }
+  return picks[0] || custom || null;
+}
+
+// The action buttons live in the modal's fixed footer (#msg-detail-waiting-footer),
+// not the scrollable body — long content must not push them out of reach.
+function renderWaitingFooter(tool, params) {
+  if (currentWaiting?.kind === 'plan') {
+    return isWaitingAnswerable() ? planApprovalControlsHtml('plan-reject-feedback') : '';
+  }
+  if (currentWaiting?.kind !== 'question') return waitingDecisionButtons('waiting-btn');
+  if (!isWaitingAnswerable()) return '';
+  if (tool !== 'AskUserQuestion') return '';
+  const questions = Array.isArray(params?.questions) ? params.questions : [];
+  if (!questions.length) return '';
+  const picked = questions.filter((q) => waitingAnswerFor(q)).length;
+  const partial = picked > 0 && picked < questions.length ? ` (${picked}/${questions.length})` : '';
+  return `<button id="waiting-answer-btn" class="waiting-btn-allow" ${picked > 0 ? '' : 'disabled'} onclick="submitWaitingAnswers()">Answer${partial}</button>`;
+}
+
+function renderWaitingActions(tool, params) {
+  if (!isWaitingAnswerable() || currentWaiting.kind !== 'question' || tool !== 'AskUserQuestion') return '';
+  waitingQuestions = Array.isArray(params?.questions) ? params.questions : [];
+  if (!waitingQuestions.length) return '';
+  const qs = waitingQuestions
+    .map((q, idx) => {
+      const picks = waitingAnswerDraft[q.question] || [];
+      const opts = (q.options || [])
+        .map((o) => {
+          const label = typeof o === 'string' ? o : o?.label || '';
+          const desc = typeof o === 'object' ? o?.description || '' : '';
+          const descHtml = desc ? `<span class="waiting-option-desc">${renderMarkdown(desc)}</span>` : '';
+          // The option `preview` field is the TUI's side-by-side visualization
+          // pane (mockups, code snippets, diagrams) — rendered as markdown
+          const preview = typeof o === 'object' ? o?.preview || '' : '';
+          const previewHtml = preview ? `<span class="waiting-option-preview">${renderMarkdown(preview)}</span>` : '';
+          return `<button class="waiting-option${picks.includes(label) ? ' selected' : ''}" data-label="${escapeHtml(label)}" onclick="selectWaitingAnswer(${idx}, this.dataset.label)"><span class="waiting-option-label">${escapeHtml(label)}</span>${descHtml}${previewHtml}</button>`;
+        })
+        .join('');
+      const header = q.header ? `<span class="waiting-question-header">${escapeHtml(q.header)}</span>` : '';
+      const multi = q.multiSelect ? '<span class="waiting-question-multi">multi-select</span>' : '';
+      const input = `<input type="text" class="waiting-option-input" placeholder="Or type your own answer" value="${escapeHtml(waitingCustomDraft[q.question] || '')}" oninput="setWaitingCustomAnswer(${idx}, this)">`;
+      return `<div class="waiting-question">${header}${multi}<div class="waiting-question-text">${renderMarkdown(q.question || '')}</div><div class="waiting-options">${opts}</div>${input}</div>`;
+    })
+    .join('');
+  return `<div class="waiting-actions">${qs}</div>`;
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
+function selectWaitingAnswer(qi, label) {
+  const q = waitingQuestions[qi];
+  if (!q) return;
+  // Clicking a picked option unpicks it, in both modes
+  const picks = waitingAnswerDraft[q.question] || [];
+  if (q.multiSelect) {
+    waitingAnswerDraft[q.question] = picks.includes(label) ? picks.filter((l) => l !== label) : picks.concat(label);
+  } else if (picks.includes(label)) {
+    delete waitingAnswerDraft[q.question];
+  } else {
+    waitingAnswerDraft[q.question] = [label];
+    delete waitingCustomDraft[q.question];
+  }
+  showWaitingDetail();
+}
+
+// Free-text path — the TUI's "type your own answer". Updates the draft and the
+// Answer button in place: a full re-render here would drop the input's focus
+// on every keystroke.
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML oninput
+function setWaitingCustomAnswer(qi, el) {
+  const q = waitingQuestions[qi];
+  if (!q) return;
+  const v = el.value.trim();
+  if (v) waitingCustomDraft[q.question] = v;
+  else delete waitingCustomDraft[q.question];
+  if (v && !q.multiSelect) {
+    delete waitingAnswerDraft[q.question];
+    for (const b of el.closest('.waiting-question')?.querySelectorAll('.waiting-option.selected') || []) {
+      b.classList.remove('selected');
+    }
+  }
+  const btn = document.getElementById('waiting-answer-btn');
+  if (btn) {
+    const picked = waitingQuestions.filter((qq) => waitingAnswerFor(qq)).length;
+    btn.disabled = picked === 0;
+    btn.textContent =
+      picked > 0 && picked < waitingQuestions.length ? `Answer (${picked}/${waitingQuestions.length})` : 'Answer';
+  }
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
+function submitWaitingAnswers() {
+  // Partial submits are fine — send only the questions actually answered.
+  // multiSelect answers go as arrays of labels (the shape the TUI validates).
+  const answers = {};
+  for (const q of waitingQuestions) {
+    const a = waitingAnswerFor(q);
+    if (a) answers[q.question] = a;
+  }
+  if (!Object.keys(answers).length) return;
+  respondWaiting({ answers });
+}
+
 function showWaitingDetail() {
   if (!isWaitingFresh()) return;
   currentMsgDetailIdx = MSG_DETAIL_WAITING_IDX;
   msgHighlightDimmed = false;
   highlightSelectedMsg();
+  // Follow-mode poll ticks re-run this whole render — carry any typed reject
+  // feedback across the rebuild, but never onto a different ask.
+  const sameAsk = currentWaiting.id === waitingDraftId;
+  const feedbackDraft = sameAsk ? document.getElementById('plan-reject-feedback')?.value || '' : '';
+  if (!sameAsk) {
+    waitingDraftId = currentWaiting.id || null;
+    waitingAnswerDraft = {};
+    waitingCustomDraft = {};
+  }
   const tool = currentWaiting.toolName || 'unknown';
   const label = getWaitingLabel(currentWaiting.kind, tool);
   const body = document.getElementById('msg-detail-body');
   let inputHtml = '';
+  const params = parseWaitingInput();
   if (currentWaiting.toolInput) {
-    let pretty = currentWaiting.toolInput;
-    try {
-      pretty = JSON.stringify(JSON.parse(currentWaiting.toolInput), null, 2);
-    } catch (_) {
-      /* keep raw */
-    }
+    const pretty = params ? JSON.stringify(params, null, 2) : currentWaiting.toolInput;
     inputHtml = `<pre class="${TINTED_PRE_CLASS}">${escapeHtml(pretty)}</pre>`;
   }
-  body.innerHTML = inputHtml;
+  const actionsHtml = renderWaitingActions(tool, params);
+  const footerHtml = renderWaitingFooter(tool, params);
+  // 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
+  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
+      // raw tool input is dropped entirely to match the saved-plan modal.
+      inputHtml = `<div class="detail-desc rendered-md">${renderMarkdown(params.plan)}</div>`;
+    } else {
+      if (currentWaiting.kind !== 'question' && params) {
+        const gist =
+          typeof params.command === 'string'
+            ? params.command
+            : typeof params.description === 'string'
+              ? params.description
+              : '';
+        if (gist) summaryHtml = `<pre class="${TINTED_PRE_CLASS}">${escapeHtml(gist)}</pre>`;
+      }
+      inputHtml = `${summaryHtml}<details class="waiting-raw-input"><summary>Raw tool input</summary>${inputHtml}</details>`;
+    }
+  }
+  body.innerHTML = inputHtml + actionsHtml;
+  document.getElementById('msg-detail-waiting-footer').innerHTML = footerHtml;
+  if (feedbackDraft) {
+    const feedbackEl = document.getElementById('plan-reject-feedback');
+    if (feedbackEl) feedbackEl.value = feedbackDraft;
+  }
   document.getElementById('msg-detail-title').textContent = label;
   document.getElementById('msg-detail-agent-btn').style.display = 'none';
   const modal = document.getElementById('msg-detail-modal').querySelector('.modal');
@@ -6313,68 +6784,79 @@ function loadSidebarState() {
   }
 }
 
-function initSidebarResize() {
-  const sidebar = document.querySelector('.sidebar');
-  const handle = document.getElementById('sidebar-resize');
-  let startX, startWidth;
+// Shared drag-session lifecycle for every resize grip (sidebar, panels, modal):
+// the `.dragging` class, text-selection suppression, and document-level
+// listener add/remove live here once. Callers keep only their geometry.
+// onStart may return false to veto the drag.
+function _initDragResize(handle, { onStart, onMove, onEnd }) {
+  let startX, startY;
 
   handle.addEventListener('mousedown', (e) => {
-    if (sidebar.classList.contains('collapsed')) return;
+    if (onStart && onStart() === false) return;
     startX = e.clientX;
-    startWidth = sidebar.offsetWidth;
-    sidebar.classList.add('resizing');
+    startY = e.clientY;
     handle.classList.add('dragging');
     document.body.style.userSelect = 'none';
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
+    document.addEventListener('mousemove', move);
+    document.addEventListener('mouseup', up);
     e.preventDefault();
   });
 
-  function onMove(e) {
-    const w = Math.min(600, Math.max(200, startWidth + e.clientX - startX));
-    sidebar.style.setProperty('--sidebar-width', `${w}px`);
-    sidebar.style.width = `${w}px`;
+  function move(e) {
+    onMove(e.clientX - startX, e.clientY - startY);
   }
 
-  function onUp() {
-    sidebar.classList.remove('resizing');
+  function up() {
     handle.classList.remove('dragging');
     document.body.style.userSelect = '';
-    document.removeEventListener('mousemove', onMove);
-    document.removeEventListener('mouseup', onUp);
-    localStorage.setItem('sidebar-width', sidebar.style.getPropertyValue('--sidebar-width'));
+    document.removeEventListener('mousemove', move);
+    document.removeEventListener('mouseup', up);
+    onEnd();
   }
 }
 
+function initSidebarResize() {
+  const sidebar = document.querySelector('.sidebar');
+  const handle = document.getElementById('sidebar-resize');
+  let startWidth;
+
+  _initDragResize(handle, {
+    onStart() {
+      if (sidebar.classList.contains('collapsed')) return false;
+      startWidth = sidebar.offsetWidth;
+      sidebar.classList.add('resizing');
+    },
+    onMove(dx) {
+      const w = Math.min(600, Math.max(200, startWidth + dx));
+      sidebar.style.setProperty('--sidebar-width', `${w}px`);
+      sidebar.style.width = `${w}px`;
+    },
+    onEnd() {
+      sidebar.classList.remove('resizing');
+      localStorage.setItem('sidebar-width', sidebar.style.getPropertyValue('--sidebar-width'));
+    },
+  });
+}
+
 function initPanelResize(panelId, handleId, cssVar, storageKey) {
   const panel = document.getElementById(panelId);
   const handle = document.getElementById(handleId);
-  let startX, startWidth;
+  let startWidth;
 
-  handle.addEventListener('mousedown', (e) => {
-    startX = e.clientX;
-    startWidth = panel.offsetWidth;
-    panel.classList.add('resizing');
-    handle.classList.add('dragging');
-    document.body.style.userSelect = 'none';
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-    e.preventDefault();
+  _initDragResize(handle, {
+    onStart() {
+      startWidth = panel.offsetWidth;
+      panel.classList.add('resizing');
+    },
+    onMove(dx) {
+      const w = Math.max(200, startWidth - dx);
+      panel.style.setProperty(cssVar, `${w}px`);
+    },
+    onEnd() {
+      panel.classList.remove('resizing');
+      localStorage.setItem(storageKey, panel.style.getPropertyValue(cssVar));
+    },
   });
-
-  function onMove(e) {
-    const w = Math.max(200, startWidth - (e.clientX - startX));
-    panel.style.setProperty(cssVar, `${w}px`);
-  }
-
-  function onUp() {
-    panel.classList.remove('resizing');
-    handle.classList.remove('dragging');
-    document.body.style.userSelect = '';
-    document.removeEventListener('mousemove', onMove);
-    document.removeEventListener('mouseup', onUp);
-    localStorage.setItem(storageKey, panel.style.getPropertyValue(cssVar));
-  }
 }
 
 function loadPanelWidths() {
@@ -7043,6 +7525,15 @@ function openPlanModal() {
   if (!_pendingPlanContent) return;
   const body = document.getElementById('plan-modal-body');
   body.innerHTML = renderMarkdown(_pendingPlanContent);
+  // A saved plan opened while its approval ask is still pending (sidebar
+  // click, 'p') is the same review moment — offer Approve/Reject here too.
+  document.getElementById('plan-approval-footer')?.remove();
+  if (currentWaiting?.kind === 'plan' && isWaitingAnswerable() && _planSessionId === currentSessionId) {
+    const controls = document.createElement('div');
+    controls.id = 'plan-approval-footer';
+    controls.innerHTML = planApprovalControlsHtml('plan-modal-reject-feedback');
+    document.querySelector('#plan-modal .modal-footer').prepend(controls);
+  }
   document.getElementById('plan-modal').classList.add('visible');
   const keyHandler = (e) => {
     if (e.key === 'Escape') {
@@ -7328,6 +7819,7 @@ try {
 initSidebarResize();
 applyModalZoom();
 loadModalFullscreen();
+initModalResize();
 loadPanelWidths();
 initPanelResize('detail-panel', 'detail-panel-resize', '--detail-panel-width', 'detail-panel-width');
 initPanelResize('message-panel', 'message-panel-resize', '--message-panel-width', 'message-panel-width');