feat: Global hooks approval modal with plan/question/permission modes

- Add PermissionRequest and Stop approval hooks to local Claude config - Unify PermissionApproval into multi-mode card (permission, plan, question) - Support allowAlways, deny-with-reason, and AskUserQuestion answering - Add cross-process broadcast fallback (HTTP to sync server) - Fix approval scripts to default to .claude/debug/ for local agent
2026-02-19 00:25:08 -06:00
parent a703128964
commit 159a38e3c2
7 changed files with 445 additions and 93 deletions
--- a/frontend/src/components/HooksApprovalModal.vue
+++ b/frontend/src/components/HooksApprovalModal.vue
@@ -67,7 +67,7 @@ watch(totalPending, (val) => {
                  v-for="perm in group.permissions"
                  :key="perm.requestId"
                  :request="perm"
-                  @respond="respondPermission"
+                  @respond="(id, decision, reason) => respondPermission(id, decision, reason)"
                />
                <PlanApproval
                  v-for="plan in group.plans"
--- a/frontend/src/components/transcript-debug/PermissionApproval.vue
+++ b/frontend/src/components/transcript-debug/PermissionApproval.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref, computed } from 'vue'
 import type { HooksApprovalPermissionRequest } from '@/types/hooks-approval'

 const props = defineProps<{
@@ -6,16 +7,130 @@ const props = defineProps<{
 }>()

 const emit = defineEmits<{
-  respond: [requestId: string, decision: 'allow' | 'deny']
+  respond: [requestId: string, decision: string, reason?: string]
 }>()

-function formatInput(input: unknown): string {
-  if (!input) return ''
-  if (typeof input === 'string') return input
+// ── Mode detection ──
+type CardMode = 'permission' | 'plan' | 'question'
+
+const mode = computed<CardMode>(() => {
+  if (props.request.tool_name === 'ExitPlanMode') return 'plan'
+  if (props.request.tool_name === 'AskUserQuestion') return 'question'
+  return 'permission'
+})
+
+const input = computed(() => {
+  if (!props.request.tool_input) return null
+  return props.request.tool_input as Record<string, unknown>
+})
+
+// ── Plan mode ──
+const planText = computed(() => {
+  if (mode.value !== 'plan' || !input.value) return ''
+  return (input.value.plan as string) || ''
+})
+
+const showPlanEditor = ref(false)
+const planEditText = ref('')
+
+function handlePlanEdit() {
+  if (!showPlanEditor.value) {
+    showPlanEditor.value = true
+    return
+  }
+  emit('respond', props.request.requestId, 'deny', planEditText.value || 'Continue with modifications.')
+}
+
+// ── Question mode ──
+interface QuestionOption {
+  label: string
+  description?: string
+}
+
+interface QuestionItem {
+  question: string
+  header?: string
+  options?: QuestionOption[]
+  multiSelect?: boolean
+}
+
+const questions = computed<QuestionItem[]>(() => {
+  if (mode.value !== 'question' || !input.value) return []
+  const qs = input.value.questions
+  if (Array.isArray(qs)) return qs as QuestionItem[]
+  return []
+})
+
+// Track selected options per question (keyed by question text)
+const selectedAnswers = ref<Record<string, Set<string>>>({})
+const customAnswers = ref<Record<string, string>>({})
+const showCustom = ref<Record<string, boolean>>({})
+
+function toggleOption(questionText: string, label: string, multiSelect?: boolean) {
+  if (!selectedAnswers.value[questionText]) {
+    selectedAnswers.value[questionText] = new Set()
+  }
+  const set = selectedAnswers.value[questionText]
+  if (multiSelect) {
+    if (set.has(label)) set.delete(label)
+    else set.add(label)
+  } else {
+    if (set.has(label)) set.clear()
+    else { set.clear(); set.add(label) }
+  }
+  // Trigger reactivity
+  selectedAnswers.value = { ...selectedAnswers.value }
+}
+
+function toggleCustom(questionText: string) {
+  showCustom.value = { ...showCustom.value, [questionText]: !showCustom.value[questionText] }
+}
+
+function submitAnswers() {
+  // Build answers object: { "question text": "selected label" }
+  const answers: Record<string, string> = {}
+  for (const q of questions.value) {
+    const selected = selectedAnswers.value[q.question]
+    const custom = customAnswers.value[q.question]
+    if (custom?.trim()) {
+      answers[q.question] = custom.trim()
+    } else if (selected?.size) {
+      answers[q.question] = Array.from(selected).join(', ')
+    }
+  }
+  // Deny the tool (so Claude gets the answer as the deny message)
+  // The answer goes as a structured JSON string
+  const answerText = JSON.stringify({ answers })
+  emit('respond', props.request.requestId, 'deny', answerText)
+}
+
+function allowQuestion() {
+  // Let AskUserQuestion run normally (shows in terminal)
+  emit('respond', props.request.requestId, 'allow')
+}
+
+// ── Permission mode ──
+const showFreeResponse = ref(false)
+const freeText = ref('')
+
+function handleFreeResponse() {
+  if (!showFreeResponse.value) {
+    showFreeResponse.value = true
+    return
+  }
+  if (freeText.value.trim()) {
+    emit('respond', props.request.requestId, 'deny', freeText.value.trim())
+  }
+}
+
+// ── Common ──
+function formatInput(inp: unknown): string {
+  if (!inp) return ''
+  if (typeof inp === 'string') return inp
  try {
-    return JSON.stringify(input, null, 2)
+    return JSON.stringify(inp, null, 2)
  } catch {
-    return String(input)
+    return String(inp)
  }
 }

@@ -28,8 +143,123 @@ function elapsed(): string {
 </script>

 <template>
-  <div class="permission-card">
-    <div class="card-header">
+  <!-- ═══════ PLAN MODE (ExitPlanMode) ═══════ -->
+  <div v-if="mode === 'plan'" class="card plan-card">
+    <div class="card-header plan-header">
+      <span class="card-icon">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14 2 14 8 20 8"/>
+          <line x1="16" y1="13" x2="8" y2="13"/>
+          <line x1="16" y1="17" x2="8" y2="17"/>
+        </svg>
+      </span>
+      <span class="card-label">Plan Approval</span>
+      <span class="card-elapsed">{{ elapsed() }}</span>
+    </div>
+    <div class="card-body">
+      <div v-if="planText" class="plan-text">
+        <pre class="plan-pre">{{ planText }}</pre>
+      </div>
+      <div v-else class="plan-empty">Claude is waiting for plan approval</div>
+      <Transition name="expand">
+        <div v-if="showPlanEditor" class="edit-section">
+          <textarea v-model="planEditText" class="edit-textarea" placeholder="Add instructions or feedback..." rows="3"></textarea>
+        </div>
+      </Transition>
+    </div>
+    <div class="card-actions">
+      <button class="btn btn-approve" @click="emit('respond', request.requestId, 'allow')">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+        Approve
+      </button>
+      <button class="btn btn-edit" @click="handlePlanEdit">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+        </svg>
+        {{ showPlanEditor ? 'Send' : 'Edit & Continue' }}
+      </button>
+      <button class="btn btn-reject" @click="emit('respond', request.requestId, 'deny')">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+        Reject
+      </button>
+    </div>
+  </div>
+
+  <!-- ═══════ QUESTION MODE (AskUserQuestion) ═══════ -->
+  <div v-else-if="mode === 'question'" class="card question-card">
+    <div class="card-header question-header">
+      <span class="card-icon">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10"/>
+          <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+          <line x1="12" y1="17" x2="12.01" y2="17"/>
+        </svg>
+      </span>
+      <span class="card-label">Question</span>
+      <span class="card-elapsed">{{ elapsed() }}</span>
+    </div>
+    <div class="card-body">
+      <div v-for="(q, qi) in questions" :key="qi" class="question-block">
+        <div class="question-text">
+          <span v-if="q.header" class="question-tag">{{ q.header }}</span>
+          {{ q.question }}
+          <span v-if="q.multiSelect" class="multi-hint">(multiple)</span>
+        </div>
+        <div v-if="q.options?.length" class="options-grid">
+          <button
+            v-for="opt in q.options"
+            :key="opt.label"
+            :class="['option-btn', { selected: selectedAnswers[q.question]?.has(opt.label) }]"
+            @click="toggleOption(q.question, opt.label, q.multiSelect)"
+          >
+            <span class="option-label">{{ opt.label }}</span>
+            <span v-if="opt.description" class="option-desc">{{ opt.description }}</span>
+          </button>
+          <button :class="['option-btn other', { selected: showCustom[q.question] }]" @click="toggleCustom(q.question)">
+            <span class="option-label">Other</span>
+          </button>
+        </div>
+        <Transition name="expand">
+          <div v-if="showCustom[q.question] || !q.options?.length" class="custom-input">
+            <textarea
+              v-model="customAnswers[q.question]"
+              class="edit-textarea"
+              :placeholder="q.options?.length ? 'Custom answer...' : 'Type your answer...'"
+              rows="2"
+            ></textarea>
+          </div>
+        </Transition>
+      </div>
+    </div>
+    <div class="card-actions">
+      <button class="btn btn-approve" @click="submitAnswers">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+        </svg>
+        Answer
+      </button>
+      <button class="btn btn-allow-terminal" @click="allowQuestion">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>
+        </svg>
+        Ask in Terminal
+      </button>
+      <button class="btn btn-reject" @click="emit('respond', request.requestId, 'deny')">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+        Dismiss
+      </button>
+    </div>
+  </div>
+
+  <!-- ═══════ PERMISSION MODE (generic) ═══════ -->
+  <div v-else class="card permission-card">
+    <div class="card-header perm-header">
      <span class="card-icon">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
@@ -38,7 +268,6 @@ function elapsed(): string {
      <span class="card-label">Permission Request</span>
      <span class="card-elapsed">{{ elapsed() }}</span>
    </div>
-
    <div class="card-body">
      <div class="info-row" v-if="request.tool_name">
        <span class="info-label">Tool</span>
@@ -52,19 +281,34 @@ function elapsed(): string {
        <span class="info-label">Input</span>
        <pre class="input-pre">{{ formatInput(request.tool_input) }}</pre>
      </div>
+      <Transition name="expand">
+        <div v-if="showFreeResponse" class="edit-section">
+          <textarea v-model="freeText" class="edit-textarea" placeholder="Deny with a custom message..." rows="2"></textarea>
+        </div>
+      </Transition>
    </div>
-
    <div class="card-actions">
      <button class="btn btn-allow" @click="emit('respond', request.requestId, 'allow')">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-          <polyline points="20 6 9 17 4 12"/>
-        </svg>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        Allow
      </button>
+      <button class="btn btn-allow-always" @click="emit('respond', request.requestId, 'allowAlways')">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+          <polyline points="9 12 11 14 15 10"/>
+        </svg>
+        Always
+      </button>
+      <button class="btn btn-free" @click="handleFreeResponse">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+        </svg>
+        {{ showFreeResponse ? 'Send' : 'Message' }}
+      </button>
      <button class="btn btn-deny" @click="emit('respond', request.requestId, 'deny')">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-          <line x1="18" y1="6" x2="6" y2="18"/>
-          <line x1="6" y1="6" x2="18" y2="18"/>
+          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
        Deny
      </button>
@@ -73,9 +317,9 @@ function elapsed(): string {
 </template>

 <style scoped>
-.permission-card {
+/* ── Shared card base ── */
+.card {
  border: 1px solid var(--border-color);
-  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  background: var(--bg-secondary);
  overflow: hidden;
@@ -87,24 +331,17 @@ function elapsed(): string {
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
-  background: rgba(245, 158, 11, 0.06);
  border-bottom: 1px solid var(--border-color);
 }

-.card-icon {
-  color: #f59e0b;
-  display: flex;
-  align-items: center;
-}
-
 .card-label {
  font-size: 12px;
  font-weight: 600;
-  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
 }

+.card-icon { display: flex; align-items: center; }
 .card-elapsed {
  margin-left: auto;
  font-size: 11px;
@@ -119,25 +356,33 @@ function elapsed(): string {
  gap: 0.4rem;
 }

-.info-row {
+.card-actions {
  display: flex;
-  align-items: center;
  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-top: 1px solid var(--border-color);
+  flex-wrap: wrap;
 }

-.info-label {
-  font-size: 11px;
-  color: var(--text-muted);
-  font-weight: 500;
-  min-width: 40px;
-  flex-shrink: 0;
-}
+/* ── Permission (yellow) ── */
+.permission-card { border-left: 3px solid #f59e0b; }
+.perm-header { background: rgba(245, 158, 11, 0.06); }
+.perm-header .card-icon, .perm-header .card-label { color: #f59e0b; }

-.info-value {
-  font-size: 13px;
-  color: var(--text-primary);
-}
+/* ── Plan (purple) ── */
+.plan-card { border-left: 3px solid #8b5cf6; }
+.plan-header { background: rgba(139, 92, 246, 0.06); }
+.plan-header .card-icon, .plan-header .card-label { color: #8b5cf6; }

+/* ── Question (blue) ── */
+.question-card { border-left: 3px solid #0ea5e9; }
+.question-header { background: rgba(14, 165, 233, 0.06); }
+.question-header .card-icon, .question-header .card-label { color: #0ea5e9; }
+
+/* ── Info rows (permission) ── */
+.info-row { display: flex; align-items: center; gap: 0.5rem; }
+.info-label { font-size: 11px; color: var(--text-muted); font-weight: 500; min-width: 40px; flex-shrink: 0; }
+.info-value { font-size: 13px; color: var(--text-primary); }
 .tool-name {
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent, #6366f1);
@@ -147,12 +392,7 @@ function elapsed(): string {
  font-family: 'SF Mono', 'Fira Code', monospace;
 }

-.input-block {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
+.input-block { display: flex; flex-direction: column; gap: 0.25rem; }
 .input-pre {
  margin: 0;
  padding: 0.5rem;
@@ -168,13 +408,81 @@ function elapsed(): string {
  overflow-y: auto;
 }

-.card-actions {
-  display: flex;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  border-top: 1px solid var(--border-color);
+/* ── Plan body ── */
+.plan-text { max-height: 250px; overflow-y: auto; }
+.plan-pre {
+  margin: 0;
+  padding: 0.5rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  font-size: 12px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
 }
+.plan-empty { font-size: 13px; color: var(--text-muted); font-style: italic; padding: 0.5rem 0; }

+/* ── Question body ── */
+.question-block { display: flex; flex-direction: column; gap: 0.5rem; }
+.question-block + .question-block { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color); }
+.question-text { font-size: 13px; color: var(--text-primary); font-weight: 500; line-height: 1.4; }
+.question-tag {
+  display: inline-block;
+  background: rgba(14, 165, 233, 0.12);
+  color: #0ea5e9;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 0.1rem 0.35rem;
+  border-radius: 4px;
+  margin-right: 0.3rem;
+  vertical-align: middle;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+.multi-hint { font-size: 11px; color: var(--text-muted); font-weight: 400; }
+
+.options-grid { display: flex; flex-direction: column; gap: 0.35rem; }
+.option-btn {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  padding: 0.5rem 0.65rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.15s;
+}
+.option-btn:hover { border-color: #0ea5e9; background: rgba(14, 165, 233, 0.04); }
+.option-btn.selected { border-color: #0ea5e9; background: rgba(14, 165, 233, 0.1); }
+.option-btn.other { border-style: dashed; }
+.option-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+.option-desc { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
+
+.custom-input { margin-top: 0.25rem; }
+
+/* ── Shared edit/textarea ── */
+.edit-section { margin-top: 0.25rem; }
+.edit-textarea {
+  width: 100%;
+  padding: 0.5rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 12px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  resize: vertical;
+  outline: none;
+  box-sizing: border-box;
+}
+.edit-textarea:focus { border-color: var(--accent, #6366f1); }
+
+/* ── Buttons ── */
 .btn {
  display: inline-flex;
  align-items: center;
@@ -188,23 +496,34 @@ function elapsed(): string {
  transition: all 0.15s;
 }

-.btn-allow {
-  background: #22c55e;
-  color: white;
-}
+.btn-allow { background: #22c55e; color: white; }
+.btn-allow:hover { background: #16a34a; }

-.btn-allow:hover {
-  background: #16a34a;
-}
+.btn-allow-always { background: #0ea5e9; color: white; }
+.btn-allow-always:hover { background: #0284c7; }

-.btn-deny {
-  background: #ef4444;
-  color: white;
-}
+.btn-allow-terminal { background: #64748b; color: white; }
+.btn-allow-terminal:hover { background: #475569; }

-.btn-deny:hover {
-  background: #dc2626;
-}
+.btn-approve { background: #22c55e; color: white; }
+.btn-approve:hover { background: #16a34a; }
+
+.btn-edit { background: #8b5cf6; color: white; }
+.btn-edit:hover { background: #7c3aed; }
+
+.btn-free { background: #8b5cf6; color: white; }
+.btn-free:hover { background: #7c3aed; }
+
+.btn-deny { background: #ef4444; color: white; }
+.btn-deny:hover { background: #dc2626; }
+
+.btn-reject { background: #ef4444; color: white; }
+.btn-reject:hover { background: #dc2626; }
+
+/* ── Transitions ── */
+.expand-enter-active, .expand-leave-active { transition: all 0.2s ease; overflow: hidden; }
+.expand-enter-from, .expand-leave-to { opacity: 0; max-height: 0; }
+.expand-enter-to, .expand-leave-from { max-height: 200px; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
--- a/frontend/src/composables/useGlobalApproval.ts
+++ b/frontend/src/composables/useGlobalApproval.ts
@@ -155,13 +155,13 @@ async function fetchPending() {
  }
 }

-async function respondPermission(requestId: string, decision: 'allow' | 'deny') {
-  console.log(`[GlobalApproval] Responding permission ${requestId}: ${decision}`)
+async function respondPermission(requestId: string, decision: string, reason?: string) {
+  console.log(`[GlobalApproval] Responding permission ${requestId}: ${decision}${reason ? ' reason=' + reason : ''}`)
  try {
    await fetch('/api/hooks-approval/respond', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ requestId, decision })
+      body: JSON.stringify({ requestId, decision, reason })
    })
  } catch (e) {
    console.error('[GlobalApproval] Failed to respond permission:', e)