claude-code-kanban 4.20.0 → 4.21.0

package/README.md

@@ -49,6 +49,7 @@ Tasks, agents, and messages appear on the board automatically — Claude Code wr
 - **Follow & pin** — Follow the latest message live (`Shift+M`), pin the messages that matter
 - **Tool stats & impact** — Per-session tool usage breakdown and file impact
 - **Waiting-for-user indicators** — Amber highlight on sessions needing permission or input
+- **UI approvals (opt-in)** — Allow/deny permission asks and answer questions from the board — [docs](docs/ui-approvals.md)
 - **Agent teams** — Color-coded team members, owner filtering, member count badges
 - **17 color themes** — Dracula, Nord, Catppuccin, Gruvbox, Tokyo Night, and more — each in light and dark
 - **Storage manager** — Inspect disk usage and clean up stale sessions and tasks

package/lib/approvals.js

@@ -0,0 +1,82 @@
+// UI-driven approvals (_plans/cck-ui-approvals/): approval-gate.sh writes the
+// _waiting.json marker with a request id (D8) and polls for _decision-<id>.json.
+// buildDecision validates a board response against the live marker and shapes
+// the decision file; the route writes it. The hook deletes marker + decision on
+// consumption; orphans from a terminal deny (D13) are left for the sweep.
+
+// Ids are hook-minted (uuidgen or a time-pid-random compound) — anything outside
+// this alphabet is either corruption or a path-traversal attempt (3.5).
+function sanitizeRequestId(raw) {
+  return typeof raw === 'string' && /^[a-zA-Z0-9-]{1,64}$/.test(raw) ? raw : null;
+}
+
+// A decision whose shape doesn't match the ask's kind produces hook output
+// Claude Code rejects, surfacing as an opaque stall — reject at the API
+// boundary instead (D7). Returns { error, status } or { decision }.
+function buildDecision(marker, body) {
+  if (!marker || marker.status !== 'waiting') {
+    return { error: 'No pending ask', status: 410 };
+  }
+  const id = sanitizeRequestId(body && body.id);
+  if (!id) return { error: 'Invalid or missing request id', status: 400 };
+  if (marker.id !== id) return { error: 'Ask superseded by a newer one', status: 409 };
+
+  if (marker.kind === 'question') {
+    if (!body.answers || typeof body.answers !== 'object') {
+      return { error: 'A question ask needs answers', status: 422 };
+    }
+    // Partial answers are allowed — Claude reads the answered keys and treats
+    // the rest as skipped. Only a completely empty object is a no-op ask.
+    // multiSelect answers arrive as arrays of labels — Claude Code validates
+    // that shape natively.
+    const usable = (v) =>
+      (typeof v === 'string' && v) ||
+      (Array.isArray(v) && v.length > 0 && v.every((x) => typeof x === 'string' && x));
+    const given = Object.entries(body.answers).filter(([, v]) => usable(v));
+    if (!given.length) {
+      return { error: 'A question ask needs at least one answer', status: 422 };
+    }
+    return { decision: { answers: Object.fromEntries(given) } };
+  }
+
+  if (body.behavior !== 'allow' && body.behavior !== 'deny') {
+    return { error: 'A permission ask needs behavior "allow" or "deny"', status: 422 };
+  }
+  const decision = { behavior: body.behavior };
+  if (typeof body.message === 'string' && body.message) decision.message = body.message;
+  if (body.updatedInput && typeof body.updatedInput === 'object') decision.updatedInput = body.updatedInput;
+  if (Array.isArray(body.updatedPermissions)) decision.updatedPermissions = body.updatedPermissions;
+  return { decision };
+}
+
+function decisionFileName(id) {
+  return `_decision-${id}.json`;
+}
+
+// Keep in sync with decisionFileName — the cleanup sweep matches by shape
+function isDecisionFile(name) {
+  return name.startsWith('_decision-') && name.endsWith('.json');
+}
+
+// approval-gate.sh only polls for a decision for waitSeconds — after that the
+// ask belongs to the terminal. Default and clamp mirror the gate's own parse
+// (PERMISSION_TTL_MS hides the card at 30 min, so waiting longer than the UI
+// can show the ask is strictly worse — D11); keep them in sync with
+// approval-gate.sh.
+const WAIT_SECONDS_DEFAULT = 30;
+const WAIT_SECONDS_MAX = 1800;
+// Small grace over the gate's own deadline so a race never 410s a live hook
+const LAPSE_GRACE_MS = 5000;
+
+function waitSecondsFrom(cfg) {
+  const raw = cfg && cfg.waitSeconds;
+  if (Number.isInteger(raw) && raw >= 0) return Math.min(raw, WAIT_SECONDS_MAX);
+  return WAIT_SECONDS_DEFAULT;
+}
+
+function isLapsed(timestamp, waitMs, now = Date.now()) {
+  if (!timestamp) return true;
+  return now - new Date(timestamp).getTime() > waitMs + LAPSE_GRACE_MS;
+}
+
+module.exports = { sanitizeRequestId, buildDecision, decisionFileName, isDecisionFile, waitSecondsFrom, isLapsed };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "4.20.0",
+  "version": "4.21.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "bin": {
@@ -10,7 +10,7 @@
     "start": "node server.js",
     "dev": "node --watch server.js",
     "test": "node --test test/*.test.js",
-    "test:hooks": "bash tests/test-agent-spy.sh",
+    "test:hooks": "bash tests/test-agent-spy.sh && bash tests/test-approval-gate.sh",
     "validate:schemas": "node test/validate-live-schemas.js",
     "prepare": "husky"
   },

package/plugin/plugins/claude-code-kanban/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "2.7.1",
+  "version": "2.10.0",
   "description": "claude-code-kanban dashboard integration: agent activity tracking, context statusline, skills to drive the board from a session and to follow it",
   "experimental": {
     "monitors": "./monitors.json"

package/plugin/plugins/claude-code-kanban/hooks/hooks.json

@@ -54,30 +54,8 @@
         "hooks": [
           {
             "type": "command",
-            "command": "${CLAUDE_PLUGIN_ROOT}/scripts/agent-spy.sh",
-            "timeout": 5
-          }
-        ]
-      }
-    ],
-    "PreToolUse": [
-      {
-        "matcher": "AskUserQuestion",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "${CLAUDE_PLUGIN_ROOT}/scripts/agent-spy.sh",
-            "timeout": 5
-          }
-        ]
-      },
-      {
-        "matcher": "ExitPlanMode",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "${CLAUDE_PLUGIN_ROOT}/scripts/agent-spy.sh",
-            "timeout": 5
+            "command": "${CLAUDE_PLUGIN_ROOT}/scripts/approval-gate.sh",
+            "timeout": 86400
           }
         ]
       }

package/plugin/plugins/claude-code-kanban/scripts/agent-spy.sh

@@ -47,6 +47,15 @@ fi
 # EnterPlanMode has no waiting semantics — skip
 [ "$TOOL_NAME" = "EnterPlanMode" ] && exit 0
 
+# Legacy-config shim: shipped hooks.json routes PermissionRequest to
+# approval-gate.sh (which owns the id-bearing marker) and registers no
+# PreToolUse, so the suppression and writer below only run for configs that
+# still route those events here. Suppressing question/plan PermissionRequest
+# keeps such a config from overwriting the gate's marker with an id-less one.
+if [ "$EVENT" = "PermissionRequest" ] && { [ "$TOOL_NAME" = "AskUserQuestion" ] || [ "$TOOL_NAME" = "ExitPlanMode" ]; }; then
+  exit 0
+fi
+
 # Waiting-for-user events → write _waiting.json marker
 if [ "$EVENT" = "PermissionRequest" ] || { [ "$EVENT" = "PreToolUse" ] && { [ "$TOOL_NAME" = "AskUserQuestion" ] || [ "$TOOL_NAME" = "ExitPlanMode" ]; }; }; then
   DIR="$CCK_ACTIVITY/$SESSION_ID"
@@ -103,12 +112,17 @@ if [ "$EVENT" = "SubagentStart" ]; then
   fi
 
 elif [ "$EVENT" = "SubagentStop" ]; then
+  # Omit empty type: the server folds lines last-key-wins, so an empty type
+  # here would clobber the type recorded by the start line
   echo "$INPUT" | jq -c \
     --arg id "$AGENT_ID" --arg type "$AGENT_TYPE_RAW" --arg ts "$TS" \
-    '{agentId: $id, type: $type, event: "stop", status: "stopped",
-      lastMessage: (.last_assistant_message // ""), stoppedAt: $ts, updatedAt: $ts}' \
+    '{agentId: $id, event: "stop", status: "stopped",
+      lastMessage: (.last_assistant_message // ""), stoppedAt: $ts, updatedAt: $ts}
+     + (if $type == "" then {} else {type: $type} end)' \
     >> "$FILE"
 
 elif [ "$EVENT" = "TeammateIdle" ]; then
-  echo "{\"agentId\":\"$AGENT_ID\",\"type\":\"$AGENT_TYPE_RAW\",\"event\":\"idle\",\"status\":\"idle\",\"updatedAt\":\"$TS\"}" >> "$FILE"
+  TYPE_FIELD=""
+  [ -n "$AGENT_TYPE_RAW" ] && TYPE_FIELD="\"type\":\"$AGENT_TYPE_RAW\","
+  echo "{\"agentId\":\"$AGENT_ID\",${TYPE_FIELD}\"event\":\"idle\",\"status\":\"idle\",\"updatedAt\":\"$TS\"}" >> "$FILE"
 fi

package/plugin/plugins/claude-code-kanban/scripts/approval-gate.sh

@@ -0,0 +1,141 @@
+#!/bin/bash
+# Blocking approval gate: lets the cck board answer a permission ask or an
+# AskUserQuestion. Always writes the _waiting.json marker first (badge behavior
+# is unchanged when the feature is off), then — only when explicitly enabled and
+# the board's server is alive — waits for a decision file written by the server.
+#
+# Contract (_plans/cck-ui-approvals/decisions.md):
+#   marker    ~/.claude/.cck/agent-activity/<sid>/_waiting.json            (D8: + id, cwd, permissionSuggestions)
+#   decision  ~/.claude/.cck/agent-activity/<sid>/_decision-<id>.json      (server writes it, Phase 3)
+#   config    ~/.claude/.cck/approvals.json {enabled, mode, waitSeconds}   (D2: fail-open when absent)
+#   liveness  ~/.claude/.cck/server.json {port, pid}                       (D1: a dead board costs nothing)
+#
+# First writer wins (D5): a terminal answer deletes the marker via PostToolUse
+# and this gate exits silently; a decision arriving after the tool already ran
+# is discarded by Claude Code, so a losing write on either side is harmless.
+
+INPUT=$(cat)
+
+eval "$(echo "$INPUT" | jq -r '
+  @sh "SESSION_ID=\(.session_id // "")",
+  @sh "EVENT=\(.hook_event_name // "")",
+  @sh "TOOL_NAME=\(.tool_name // "")"
+')"
+
+[ -z "$SESSION_ID" ] && exit 0
+
+# AskUserQuestion and ExitPlanMode gate on PermissionRequest, not PreToolUse:
+# the TUI question and plan dialogs render ~10 s in while a PermissionRequest
+# hook blocks (first writer wins, like permissions), but stay frozen for the
+# whole wait during a PreToolUse hook — measured live (#42, #40). Suppress the
+# PreToolUse double-fire in case a stale hooks.json still registers it.
+if [ "$EVENT" = "PreToolUse" ]; then
+  exit 0
+fi
+
+KIND="permission"
+[ "$TOOL_NAME" = "AskUserQuestion" ] && KIND="question"
+[ "$TOOL_NAME" = "ExitPlanMode" ] && KIND="plan"
+
+CCK_DIR="$HOME/.claude/.cck"
+DIR="$CCK_DIR/agent-activity/$SESSION_ID"
+MARKER="$DIR/_waiting.json"
+mkdir -p "$DIR"
+
+# uuidgen is missing on some Git Bash installs; uniqueness only has to hold
+# across the asks of one session, so a timestamp compound is enough
+REQ_ID=$(uuidgen 2>/dev/null) || REQ_ID="$(date +%s%N)-$$-$RANDOM"
+
+TS=$(date -u +"%Y-%m-%dT%H:%M:%SZ")
+echo "$INPUT" | jq -c --arg kind "$KIND" --arg ts "$TS" --arg id "$REQ_ID" '{
+  status: "waiting",
+  kind: $kind,
+  id: $id,
+  toolName: (.tool_name // "unknown"),
+  toolInput: ((.tool_input | tostring) // ""),
+  cwd: (.cwd // ""),
+  permissionSuggestions: (.permission_suggestions // []),
+  timestamp: $ts
+}' > "$MARKER"
+
+# Every exit below leaves the marker in place for the badge; agent-spy.sh's
+# PostToolUse (or the server's TTL) retires it, exactly as before this feature.
+
+CONFIG="$CCK_DIR/approvals.json"
+[ -f "$CONFIG" ] || exit 0
+ENABLED=""
+eval "$(jq -r '
+  @sh "ENABLED=\(.enabled // false)",
+  @sh "MODE=\(.mode // "permission")",
+  @sh "WAIT_SECONDS=\(.waitSeconds // 30)"
+' < "$CONFIG" 2>/dev/null)"
+[ "$ENABLED" = "true" ] || exit 0
+
+if [ "$KIND" = "question" ] && [ "$MODE" != "permission+question" ]; then
+  exit 0
+fi
+
+case "$WAIT_SECONDS" in *[!0-9]* | "") WAIT_SECONDS=30 ;; esac
+# PERMISSION_TTL_MS hides the card at 30 min — waiting longer than the UI can
+# show the ask is strictly worse than giving up (D11)
+[ "$WAIT_SECONDS" -gt 1800 ] && WAIT_SECONDS=1800
+
+SERVER_INFO="$CCK_DIR/server.json"
+[ -f "$SERVER_INFO" ] || exit 0
+SERVER_PORT=$(jq -r '.port // empty' < "$SERVER_INFO" 2>/dev/null)
+[ -n "$SERVER_PORT" ] || exit 0
+# A TCP connect beats a pid probe: it proves the board is actually serving, and
+# it works in the stripped environment Claude Code spawns hooks into, where
+# kill -0 cannot see native Windows pids and ps may be missing from PATH
+(: < "/dev/tcp/127.0.0.1/$SERVER_PORT") 2>/dev/null || exit 0
+
+DECISION="$DIR/_decision-$REQ_ID.json"
+# EPOCHSECONDS (bash 5) keeps the poll loop free of `date` spawns
+DEADLINE=$((EPOCHSECONDS + WAIT_SECONDS))
+
+while :; do
+  if [ -f "$DECISION" ]; then
+    PAYLOAD=$(cat "$DECISION" 2>/dev/null)
+    rm -f "$DECISION" "$MARKER"
+    [ -n "$PAYLOAD" ] || exit 0
+    if [ "$KIND" = "plan" ] && [ "$(echo "$PAYLOAD" | jq -r '.behavior // "deny"' 2>/dev/null)" = "allow" ]; then
+      # A plan allow must echo tool_input as updatedInput — Claude Code
+      # >= 2.1.199 silently drops an ExitPlanMode allow without it and falls
+      # back to the built-in dialog (measured; plannotator does the same).
+      echo "$INPUT" | jq -c --argjson p "$PAYLOAD" \
+        '{hookSpecificOutput: {hookEventName: "PermissionRequest",
+          decision: ({behavior: "allow", updatedInput: (.tool_input // {})}
+          + (if $p.updatedPermissions then {updatedPermissions: $p.updatedPermissions} else {} end))}}' 2>/dev/null
+    elif [ "$KIND" != "question" ]; then
+      # Permission asks and plan denies share this shaping — the server sends
+      # only behavior+message for a plan deny. PermissionRequest decisions must
+      # ride hookSpecificOutput — a top-level {decision} is the approve/block
+      # string channel and an object there throws
+      echo "$PAYLOAD" | jq -c '{hookSpecificOutput: {hookEventName: "PermissionRequest",
+        decision: ({behavior: (.behavior // "deny")}
+        + (if .message then {message: .message} else {} end)
+        + (if .updatedInput then {updatedInput: .updatedInput} else {} end)
+        + (if .updatedPermissions then {updatedPermissions: .updatedPermissions} else {} end))}}' 2>/dev/null
+    else
+      # updatedInput replaces the whole input object, so echo every field and
+      # add the answers Claude never fills in itself (D6). Questions ride the
+      # PermissionRequest channel now (#42) — allow with the answers filled in.
+      ANSWERS=$(echo "$PAYLOAD" | jq -c '.answers // empty' 2>/dev/null)
+      [ -n "$ANSWERS" ] || exit 0
+      echo "$INPUT" | jq -c --argjson answers "$ANSWERS" \
+        '{hookSpecificOutput: {hookEventName: "PermissionRequest",
+          decision: {behavior: "allow", updatedInput: ((.tool_input // {}) + {answers: $answers})}}}' 2>/dev/null
+    fi
+    exit 0
+  fi
+
+  # Marker gone = answered in the terminal (PostToolUse fires ~23 ms after — D5);
+  # id changed = displaced by a newer ask (D8). Either way this gate is over.
+  # Builtin read + substring match instead of jq: a spawn costs ~280 ms on
+  # Windows (O2), and the marker is single-line jq -c output with a known id.
+  IFS= read -r CUR_MARKER < "$MARKER" 2>/dev/null || exit 0
+  case "$CUR_MARKER" in *"\"id\":\"$REQ_ID\""*) ;; *) exit 0 ;; esac
+
+  [ "$EPOCHSECONDS" -ge "$DEADLINE" ] && exit 0
+  sleep 0.5
+done

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);
   }
@@ -1762,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;
@@ -2630,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 =
@@ -3368,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) {
@@ -3384,27 +3521,41 @@ function renderKanban() {
   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>`
       : '';
-    pendingTasks.innerHTML =
+    writes.push([
+      pendingTasks,
       pending.length > 0
         ? pending.map(renderTaskCard).join('') + addTile
-        : addTile || `<div class="column-empty">${emptyIcon}<div>No pending tasks</div></div>`;
+        : addTile || `<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 =
@@ -3444,6 +3595,9 @@ function startAddTask(tile) {
   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();
 
@@ -5822,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');
@@ -7217,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') {

package/public/index.html

@@ -313,6 +313,7 @@
         <div id="msg-detail-body" class="rendered-md modal-zoomable"></div>
         <div id="msg-detail-meta" style="margin-top: 12px; font-size: 11px; color: var(--text-muted); flex-shrink: 0;"></div>
       </div>
+      <div id="msg-detail-waiting-footer"></div>
     </div>
   </div>
 

package/public/style.css

@@ -3041,6 +3041,249 @@ body::before {
     background: color-mix(in srgb, var(--warning, #f5a623) 16%, transparent);
   }
 }
+.msg-waiting-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 4px;
+}
+.msg-waiting-footer .msg-time {
+  margin-top: 0;
+}
+.msg-waiting-actions {
+  flex-shrink: 0;
+  display: flex;
+  gap: 6px;
+}
+.msg-waiting-actions button {
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 2px 8px;
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  background: none;
+}
+#msg-detail-waiting-footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding: 10px 20px;
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+}
+#msg-detail-waiting-footer:empty {
+  display: none;
+}
+#msg-detail-waiting-footer .waiting-option-input,
+#plan-approval-footer .waiting-option-input {
+  flex: 1;
+  margin: 0;
+}
+#plan-approval-footer {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex: 1;
+}
+.waiting-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+  margin-top: 14px;
+}
+.waiting-btn-allow,
+.waiting-btn-deny {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 6px 16px;
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 500;
+  background: none;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+/* One quiet color treatment for both button families — the card's compact
+   buttons need the descendant selector to out-rank `.msg-waiting-actions button` */
+.waiting-btn-allow,
+.msg-waiting-actions .msg-waiting-allow {
+  color: var(--success, #2ea043);
+  border-color: color-mix(in srgb, var(--success, #2ea043) 35%, transparent);
+}
+.waiting-btn-allow:hover:not(:disabled),
+.msg-waiting-actions .msg-waiting-allow:hover {
+  background: color-mix(in srgb, var(--success, #2ea043) 10%, transparent);
+}
+.waiting-btn-deny,
+.msg-waiting-actions .msg-waiting-deny {
+  color: var(--danger, #f85149);
+  border-color: color-mix(in srgb, var(--danger, #f85149) 35%, transparent);
+}
+.waiting-btn-deny:hover,
+.msg-waiting-actions .msg-waiting-deny:hover {
+  background: color-mix(in srgb, var(--danger, #f85149) 10%, transparent);
+}
+.waiting-btn-allow:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.waiting-raw-input {
+  margin-bottom: 12px;
+}
+.waiting-raw-input summary {
+  font-size: 11px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  user-select: none;
+}
+.waiting-question {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px 14px;
+  background: color-mix(in srgb, var(--bg-deep) 40%, transparent);
+}
+.waiting-question-header {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--accent);
+  margin-bottom: 4px;
+}
+.waiting-question-text {
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 1.5;
+  margin-bottom: 10px;
+}
+/* Question text and option descriptions render as markdown (like the TUI),
+   so fenced diagrams, tables, and mermaid keep their shape. */
+.waiting-question-text p,
+.waiting-option-desc p,
+.waiting-option-preview p {
+  margin: 0 0 6px;
+}
+.waiting-question-text p:last-child,
+.waiting-option-desc p:last-child,
+.waiting-option-preview p:last-child {
+  margin-bottom: 0;
+}
+.waiting-question-text pre,
+.waiting-option-desc pre {
+  font-weight: 400;
+  overflow-x: auto;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg-primary);
+}
+.waiting-question-text pre.mermaid,
+.waiting-option-desc pre.mermaid {
+  background: none;
+  border: none;
+  text-align: center;
+}
+.waiting-question-text table,
+.waiting-option-desc table {
+  border-collapse: collapse;
+  font-weight: 400;
+}
+.waiting-question-text th,
+.waiting-question-text td,
+.waiting-option-desc th,
+.waiting-option-desc td {
+  border: 1px solid var(--border);
+  padding: 3px 8px;
+}
+.waiting-options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.waiting-option {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+  text-align: left;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 8px 12px;
+  font-family: var(--mono);
+  font-size: 12px;
+  background: none;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+.waiting-option:hover {
+  border-color: var(--accent);
+}
+.waiting-option.selected {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+}
+.waiting-option-label {
+  font-weight: 600;
+}
+.waiting-option-desc {
+  display: block;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--text-secondary);
+}
+.waiting-option-preview {
+  display: block;
+  margin-top: 6px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg-primary);
+  font-size: 11px;
+  font-weight: 400;
+  overflow-x: auto;
+}
+.waiting-option-preview pre {
+  margin: 0;
+  overflow-x: auto;
+  background: none;
+}
+.waiting-question-multi {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 6px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  font-size: 10px;
+  color: var(--text-secondary);
+}
+.waiting-option-input {
+  width: 100%;
+  margin-top: 6px;
+  border: 1px dashed var(--border);
+  border-radius: 4px;
+  padding: 8px 12px;
+  font-family: var(--mono);
+  font-size: 12px;
+  background: none;
+  color: var(--text-primary);
+  transition: border-color 0.15s ease;
+}
+.waiting-option-input:hover,
+.waiting-option-input:focus {
+  border-color: var(--accent);
+  outline: none;
+}
+.waiting-option-input::placeholder {
+  color: var(--text-secondary);
+}
 .msg-item.msg-idle .msg-icon {
   width: 12px;
   height: 12px;
@@ -3610,11 +3853,17 @@ body::before {
   background: var(--warning-dim);
   border: 1px solid var(--warning);
   border-radius: 8px;
+  font-family: var(--mono);
   font-size: 12px;
   color: var(--warning);
   white-space: nowrap;
+  cursor: pointer;
   animation: permission-pulse 1.5s ease-in-out infinite;
 }
+.permission-badge:hover {
+  background: color-mix(in srgb, var(--warning) 22%, transparent);
+  animation-play-state: paused;
+}
 @keyframes permission-pulse {
   0%,
   100% {

package/server.js

@@ -33,6 +33,7 @@ const {
   buildLoopInfoFromState
 } = require('./lib/parsers');
 const { inlineHtmlAssets } = require('./lib/inline-assets');
+const { buildDecision, decisionFileName, isDecisionFile, waitSecondsFrom, isLapsed } = require('./lib/approvals');
 
 if (process.argv.includes("--install") || process.argv.includes("--uninstall")) {
   const { runInstall, runUninstall } = require("./install");
@@ -168,6 +169,25 @@ function persistAgent(dir, agent) {
   fs.appendFile(file, JSON.stringify({ ...agent, event: 'server-update' }) + '\n', 'utf8').catch(() => {});
 }
 
+// Lapse math lives in lib/approvals (kept in sync with the gate's own parse);
+// this only reads the config, cached so the polled session list doesn't re-read
+// it per hit (marker stays visible for the badge until TTL).
+const APPROVALS_CONFIG_FILE = path.join(CCK_DIR, 'approvals.json');
+let approvalsWaitCache = { ts: 0, ms: 30 * 1000 };
+function approvalsWaitMs() {
+  if (Date.now() - approvalsWaitCache.ts < 10 * 1000) return approvalsWaitCache.ms;
+  let cfg = null;
+  try {
+    cfg = JSON.parse(readFileSync(APPROVALS_CONFIG_FILE, 'utf8'));
+  } catch (e) { /* missing config — gate default */ }
+  approvalsWaitCache = { ts: Date.now(), ms: waitSecondsFrom(cfg) * 1000 };
+  return approvalsWaitCache.ms;
+}
+
+function isWaitingLapsed(data) {
+  return isLapsed(data.timestamp, approvalsWaitMs());
+}
+
 function checkWaitingForUser(agentDir, logMtime) {
   try {
     const data = JSON.parse(readFileSync(path.join(agentDir, '_waiting.json'), 'utf8'));
@@ -177,6 +197,7 @@ function checkWaitingForUser(agentDir, logMtime) {
       if (age >= PERMISSION_TTL_MS) return null;
       // After grace period, check if session resumed activity (user already responded)
       if (logMtime && age >= WAITING_RESOLVE_GRACE_MS && logMtime > waitTime + WAITING_RESOLVE_GRACE_MS) return null;
+      if (isWaitingLapsed(data)) return { ...data, lapsed: true };
       return data;
     }
   } catch (e) { /* skip — missing or invalid */ }
@@ -2049,6 +2070,31 @@ app.post('/api/sessions/:sessionId/waiting/discard', (req, res) => {
   }
 });
 
+// UI-driven approvals: answers the ask approval-gate.sh is blocking on by
+// writing _decision-<id>.json next to the marker. The hook consumes and deletes
+// both files; a write for a hook that already gave up is accepted anyway (D13)
+// and left for cleanupAgentActivity's sweep.
+app.post('/api/sessions/:sessionId/waiting/respond', (req, res) => {
+  const sessionId = resolveSessionId(req.params.sessionId);
+  const dir = path.join(AGENT_ACTIVITY_DIR, sessionId);
+  let marker = null;
+  try { marker = JSON.parse(readFileSync(path.join(dir, '_waiting.json'), 'utf8')); }
+  catch (e) { /* missing or invalid → buildDecision reports 410 */ }
+  // The gate stopped polling after waitSeconds — an orphaned decision file would
+  // sit unconsumed while the card pretends the click worked.
+  if (marker && isWaitingLapsed(marker)) {
+    return res.status(410).json({ error: 'Ask lapsed — answer it in the terminal' });
+  }
+  const result = buildDecision(marker, req.body || {});
+  if (result.error) return res.status(result.status).json({ error: result.error });
+  try {
+    writeJsonAtomic(path.join(dir, decisionFileName(marker.id)), result.decision);
+    res.json({ ok: true });
+  } catch (e) {
+    res.status(500).json({ error: 'Failed to write decision' });
+  }
+});
+
 app.post('/api/sessions/:sessionId/agents/:agentId/stop', (req, res) => {
   const sessionId = resolveSessionId(req.params.sessionId);
   const agentId = sanitizeAgentId(req.params.agentId);
@@ -3246,6 +3292,18 @@ async function cleanupAgentActivity() {
         const age = now - stat.mtimeMs;
         if ((contents.length === 0 && age > AGENT_STALE_MS) || age > CLEANUP_MAX_AGE_MS) {
           await fs.rm(dirPath, { recursive: true, force: true });
+          continue;
+        }
+        // Orphaned decision files: a terminal deny fires no hook event (D13), so a
+        // board answer for an already-gone gate is never consumed. The gate waits at
+        // most PERMISSION_TTL_MS, so anything older is unclaimable.
+        for (const f of contents) {
+          if (!isDecisionFile(f)) continue;
+          const fp = path.join(dirPath, f);
+          try {
+            const fst = await fs.stat(fp);
+            if (now - fst.mtimeMs > PERMISSION_TTL_MS) await fs.rm(fp, { force: true });
+          } catch (e) { /* ignore per-file errors */ }
         }
       } catch (e) { /* ignore per-folder errors */ }
     }