feat: Rich hook forwarding, permission bridge, and toast notifications

Replace hardcoded PowerShell status hooks with stdin-forwarding hooks that send full Claude Code hook data (tool_input, tool_response, prompt, session_id, model, etc.) to /api/claude-hook endpoint. - PowerShell hooks read stdin JSON and POST to /api/claude-hook - Server derives status for backward-compat FAB animations - Server extracts assistant_response from transcript on Stop events - New /api/claude-permission endpoint with Promise-based allow/deny flow - HookNotifications.vue: toast system showing session, prompt, tool use, tool results, notifications, and final assistant response - WebSocket broadcast for claude-hook and claude-permission message types
2026-02-15 16:16:59 -06:00
parent 4aaeb8844f
commit 816a8d9abe
8 changed files with 897 additions and 30 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -82,7 +82,8 @@
      "mcp__agent-ui__z590_nucleoriofrio_com-load_canvas_snapshot",
      "mcp__agent-ui__z590_nucleoriofrio_com-list_canvas_snapshots",
      "mcp__agent-ui__z590_nucleoriofrio_com-list_canvases",
-      "mcp__agent-ui__z590_nucleoriofrio_com-list_vue_components"
+      "mcp__agent-ui__z590_nucleoriofrio_com-list_vue_components",
+      "Bash(jq:*)"
    ]
  },
  "enableAllProjectMcpServers": true,
@@ -95,39 +96,19 @@
        "hooks": [
          {
            "type": "command",
-            "command": "powershell -NoProfile -Command \"if($env:AGENT_NAME){exit};try { Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-status' -Method POST -Body '{\\\"status\\\":\\\"processing\\\"}' -ContentType 'application/json' -TimeoutSec 2 | Out-Null } catch {}\"",
+            "command": "powershell -NoProfile -Command \"try{$b=[Console]::In.ReadToEnd();Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-hook' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3|Out-Null}catch{}\"",
            "timeout": 5000
          }
        ]
      }
    ],
    "PreToolUse": [
-      {
-        "matcher": "Read|Glob|Grep",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "powershell -NoProfile -Command \"if($env:AGENT_NAME){exit};try { Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-status' -Method POST -Body '{\\\"status\\\":\\\"reading\\\",\\\"tool\\\":\\\"$CLAUDE_TOOL_NAME\\\"}' -ContentType 'application/json' -TimeoutSec 2 | Out-Null } catch {}\"",
-            "timeout": 5000
-          }
-        ]
-      },
-      {
-        "matcher": "Edit|Write",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "powershell -NoProfile -Command \"if($env:AGENT_NAME){exit};try { Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-status' -Method POST -Body '{\\\"status\\\":\\\"writing\\\",\\\"tool\\\":\\\"$CLAUDE_TOOL_NAME\\\"}' -ContentType 'application/json' -TimeoutSec 2 | Out-Null } catch {}\"",
-            "timeout": 5000
-          }
-        ]
-      },
      {
        "matcher": ".*",
        "hooks": [
          {
            "type": "command",
-            "command": "powershell -NoProfile -Command \"if($env:AGENT_NAME){exit};try { Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-status' -Method POST -Body '{\\\"status\\\":\\\"toolUse\\\",\\\"tool\\\":\\\"$CLAUDE_TOOL_NAME\\\"}' -ContentType 'application/json' -TimeoutSec 2 | Out-Null } catch {}\"",
+            "command": "powershell -NoProfile -Command \"try{$b=[Console]::In.ReadToEnd();Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-hook' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3|Out-Null}catch{}\"",
            "timeout": 5000
          }
        ]
@@ -139,7 +120,7 @@
        "hooks": [
          {
            "type": "command",
-            "command": "powershell -NoProfile -Command \"if($env:AGENT_NAME){exit};try { Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-status' -Method POST -Body '{\\\"status\\\":\\\"toolDone\\\",\\\"tool\\\":\\\"$CLAUDE_TOOL_NAME\\\"}' -ContentType 'application/json' -TimeoutSec 2 | Out-Null } catch {}\"",
+            "command": "powershell -NoProfile -Command \"try{$b=[Console]::In.ReadToEnd();Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-hook' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3|Out-Null}catch{}\"",
            "timeout": 5000
          }
        ]
@@ -150,7 +131,7 @@
        "hooks": [
          {
            "type": "command",
-            "command": "powershell -NoProfile -Command \"if($env:AGENT_NAME){exit};try { Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-status' -Method POST -Body '{\\\"status\\\":\\\"sessionStart\\\"}' -ContentType 'application/json' -TimeoutSec 2 | Out-Null } catch {}\"",
+            "command": "powershell -NoProfile -Command \"try{$b=[Console]::In.ReadToEnd();Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-hook' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3|Out-Null}catch{}\"",
            "timeout": 5000
          }
        ]
@@ -162,7 +143,7 @@
        "hooks": [
          {
            "type": "command",
-            "command": "powershell -NoProfile -Command \"if($env:AGENT_NAME){exit};try { Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-status' -Method POST -Body '{\\\"status\\\":\\\"permissionRequest\\\",\\\"tool\\\":\\\"$CLAUDE_TOOL_NAME\\\"}' -ContentType 'application/json' -TimeoutSec 2 | Out-Null } catch {}\"",
+            "command": "powershell -NoProfile -Command \"try{$b=[Console]::In.ReadToEnd();Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-hook' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3|Out-Null}catch{}\"",
            "timeout": 5000
          }
        ]
@@ -174,7 +155,7 @@
        "hooks": [
          {
            "type": "command",
-            "command": "powershell -NoProfile -Command \"if($env:AGENT_NAME){exit};try { Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-status' -Method POST -Body '{\\\"status\\\":\\\"notification\\\"}' -ContentType 'application/json' -TimeoutSec 2 | Out-Null } catch {}\"",
+            "command": "powershell -NoProfile -Command \"try{$b=[Console]::In.ReadToEnd();Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-hook' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3|Out-Null}catch{}\"",
            "timeout": 5000
          }
        ]
@@ -185,8 +166,8 @@
        "hooks": [
          {
            "type": "command",
-            "command": "powershell -NoProfile -Command \"if($env:AGENT_NAME){exit};try { Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-status' -Method POST -Body '{\\\"status\\\":\\\"idle\\\"}' -ContentType 'application/json' -TimeoutSec 2 | Out-Null } catch {}\"",
-            "timeout": 5000
+            "command": "powershell -NoProfile -Command \"try{$b=[Console]::In.ReadToEnd();Invoke-RestMethod -Uri 'http://localhost:4101/api/claude-hook' -Method POST -Body $b -ContentType 'application/json' -TimeoutSec 3|Out-Null}catch{}\"",
+            "timeout": 10000
          }
        ]
      }
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -7,6 +7,7 @@ import FloatingTerminal from './components/FloatingTerminal.vue'
 import FloatingResponse from './components/FloatingResponse.vue'
 import FloatingVoice from './components/FloatingVoice.vue'
 import AgentBar from './components/AgentBar.vue'
+import HookNotifications from './components/HookNotifications.vue'
 import PwaInstallBanner from './components/PwaInstallBanner.vue'
 import { initWebMCP, getWebMCP } from './services/webmcp'
 import { initTorch, destroyTorch } from './services/torch'
@@ -16,6 +17,7 @@ import { setTerminalControls } from './services/tools/handlers/terminalHandlers'
 import { setResponseControls } from './services/tools/handlers/responseHandlers'
 import { useCanvasStore } from './stores/canvas'
 import { useProjectCanvasStore } from './stores/projectCanvas'
+import { useClaudeHooksStore } from './stores/claude-hooks'

 const route = useRoute()
 const router = useRouter()
@@ -68,6 +70,7 @@ const responseRef = ref<InstanceType<typeof FloatingResponse> | null>(null)
 const voiceRef = ref<InstanceType<typeof FloatingVoice> | null>(null)
 const canvasStore = useCanvasStore()
 const projectCanvasStore = useProjectCanvasStore()
+const hooksStore = useClaudeHooksStore()

 // Voice FAB push-to-talk state
 const voicePTTActive = ref(false)
@@ -231,6 +234,16 @@ function connectStatusWs() {
            break
        }
      }
+
+        // Rich hook data → toast notifications
+        if (msg.type === 'claude-hook') {
+          hooksStore.processHook(msg)
+        }
+
+        // Permission request → persistent toast with allow/deny
+        if (msg.type === 'claude-permission') {
+          hooksStore.processPermission(msg)
+        }
    } catch { /* ignore non-JSON messages */ }
  }

@@ -528,6 +541,9 @@ watch(() => route.name, (newPage) => {
    <!-- Floating Response (Agent UI messages) -->
    <FloatingResponse ref="responseRef" />

+    <!-- Hook Notifications (toasts from Claude Code hooks) -->
+    <HookNotifications />
+
    <!-- Floating Voice Input -->
    <FloatingVoice ref="voiceRef" v-model="showVoice" />

--- a/frontend/src/components/HookNotifications.vue
+++ b/frontend/src/components/HookNotifications.vue
@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import { useClaudeHooksStore, type HookNotification } from '../stores/claude-hooks'
+
+const store = useClaudeHooksStore()
+
+function iconForEvent(n: HookNotification) {
+  switch (n.event) {
+    case 'SessionStart': return 'session'
+    case 'UserPromptSubmit': return 'prompt'
+    case 'PreToolUse': return 'tool'
+    case 'PostToolUse': return 'result'
+    case 'PermissionRequest': return 'permission'
+    case 'Notification': return 'bell'
+    case 'Stop': return 'check'
+    default: return 'info'
+  }
+}
+
+function typeClass(n: HookNotification) {
+  return `toast--${n.type}`
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <TransitionGroup name="toast" tag="div" class="hook-toasts">
+      <div
+        v-for="n in store.visible"
+        :key="n.id"
+        class="hook-toast"
+        :class="[typeClass(n), { 'hook-toast--permission': n.event === 'PermissionRequest' }]"
+      >
+        <!-- Icon -->
+        <div class="toast-icon">
+          <!-- Session -->
+          <svg v-if="iconForEvent(n) === 'session'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="3"/>
+            <ellipse cx="12" cy="12" rx="9" ry="4" stroke-dasharray="4 2" transform="rotate(-30 12 12)"/>
+            <ellipse cx="12" cy="12" rx="9" ry="4" stroke-dasharray="4 2" transform="rotate(30 12 12)"/>
+          </svg>
+          <!-- Prompt (user message) -->
+          <svg v-else-if="iconForEvent(n) === 'prompt'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+          </svg>
+          <!-- Tool -->
+          <svg v-else-if="iconForEvent(n) === 'tool'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="4 17 10 11 4 5"/>
+            <line x1="12" y1="19" x2="20" y2="19"/>
+          </svg>
+          <!-- Result (PostToolUse) -->
+          <svg v-else-if="iconForEvent(n) === 'result'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <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>
+          <!-- Permission -->
+          <svg v-else-if="iconForEvent(n) === 'permission'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+            <line x1="12" y1="9" x2="12" y2="13"/>
+            <line x1="12" y1="17" x2="12.01" y2="17"/>
+          </svg>
+          <!-- Bell -->
+          <svg v-else-if="iconForEvent(n) === 'bell'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
+            <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
+          </svg>
+          <!-- Check -->
+          <svg v-else-if="iconForEvent(n) === 'check'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="20 6 9 17 4 12"/>
+          </svg>
+          <!-- Info fallback -->
+          <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"/>
+            <line x1="12" y1="16" x2="12" y2="12"/>
+            <line x1="12" y1="8" x2="12.01" y2="8"/>
+          </svg>
+        </div>
+
+        <!-- Content -->
+        <div class="toast-body">
+          <span class="toast-title">{{ n.title }}</span>
+          <span v-if="n.detail" class="toast-detail">{{ n.detail }}</span>
+        </div>
+
+        <!-- Permission buttons -->
+        <div v-if="n.event === 'PermissionRequest' && n.requestId" class="toast-actions">
+          <button class="toast-btn toast-btn--allow" @click="store.respondPermission(n.id, n.requestId!, 'allow')">Allow</button>
+          <button class="toast-btn toast-btn--deny" @click="store.respondPermission(n.id, n.requestId!, 'deny')">Deny</button>
+        </div>
+
+        <!-- Dismiss -->
+        <button v-else class="toast-close" @click="store.remove(n.id)">&times;</button>
+      </div>
+    </TransitionGroup>
+  </Teleport>
+</template>
+
+<style scoped>
+.hook-toasts {
+  position: fixed;
+  top: 40px;
+  right: 16px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+  max-width: 380px;
+  width: 100%;
+}
+
+.hook-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: rgba(22, 22, 29, 0.85);
+  backdrop-filter: blur(20px) saturate(1.4);
+  -webkit-backdrop-filter: blur(20px) saturate(1.4);
+  border: 1px solid rgba(255,255,255,0.08);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+  pointer-events: auto;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--text-primary, #e4e4e7);
+  min-width: 260px;
+}
+
+/* Type colors - left accent */
+.hook-toast::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 6px;
+  bottom: 6px;
+  width: 3px;
+  border-radius: 2px;
+}
+.hook-toast { position: relative; }
+
+.toast--info::before { background: var(--accent, #6366f1); }
+.toast--success::before { background: #10b981; }
+.toast--warning::before { background: #f59e0b; }
+.toast--error::before { background: #ef4444; }
+
+/* Permission toast - emphasized */
+.hook-toast--permission {
+  border-color: rgba(239, 68, 68, 0.3);
+  background: rgba(30, 15, 15, 0.9);
+  animation: permission-glow 2s ease-in-out infinite;
+}
+
+@keyframes permission-glow {
+  0%, 100% { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.15); }
+  50% { box-shadow: 0 4px 24px rgba(239, 68, 68, 0.35); }
+}
+
+/* Icon */
+.toast-icon {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1px;
+}
+
+.toast--info .toast-icon { background: rgba(99,102,241,0.15); color: #818cf8; }
+.toast--success .toast-icon { background: rgba(16,185,129,0.15); color: #34d399; }
+.toast--warning .toast-icon { background: rgba(245,158,11,0.15); color: #fbbf24; }
+.toast--error .toast-icon { background: rgba(239,68,68,0.15); color: #f87171; }
+
+/* Body */
+.toast-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.toast-title {
+  font-weight: 600;
+  font-size: 12.5px;
+  letter-spacing: 0.01em;
+}
+
+.toast-detail {
+  color: var(--text-secondary, #a1a1aa);
+  font-size: 11.5px;
+  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 280px;
+}
+
+/* Dismiss */
+.toast-close {
+  background: none;
+  border: none;
+  color: var(--text-muted, #52525b);
+  cursor: pointer;
+  font-size: 16px;
+  padding: 0 2px;
+  line-height: 1;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.hook-toast:hover .toast-close { opacity: 1; }
+
+/* Permission action buttons */
+.toast-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.toast-btn {
+  padding: 4px 12px;
+  border-radius: 6px;
+  border: none;
+  font-size: 11.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  letter-spacing: 0.02em;
+}
+
+.toast-btn--allow {
+  background: rgba(16, 185, 129, 0.15);
+  color: #34d399;
+  border: 1px solid rgba(16, 185, 129, 0.25);
+}
+.toast-btn--allow:hover {
+  background: rgba(16, 185, 129, 0.3);
+}
+
+.toast-btn--deny {
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+  border: 1px solid rgba(239, 68, 68, 0.25);
+}
+.toast-btn--deny:hover {
+  background: rgba(239, 68, 68, 0.3);
+}
+
+/* Transitions */
+.toast-enter-active {
+  animation: toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.toast-leave-active {
+  animation: toast-out 0.2s ease-in forwards;
+}
+.toast-move {
+  transition: transform 0.25s ease;
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(40px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes toast-out {
+  to {
+    opacity: 0;
+    transform: translateX(30px) scale(0.95);
+  }
+}
+
+/* Mobile */
+@media (max-width: 600px) {
+  .hook-toasts {
+    right: 8px;
+    left: 8px;
+    max-width: none;
+    top: 36px;
+  }
+}
+</style>
--- a/frontend/src/stores/claude-hooks.ts
+++ b/frontend/src/stores/claude-hooks.ts
@@ -0,0 +1,206 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export interface HookNotification {
+  id: string
+  event: string
+  icon: string
+  title: string
+  detail: string
+  type: 'info' | 'success' | 'warning' | 'error'
+  timestamp: number
+  persistent?: boolean
+  // Permission-specific
+  requestId?: string
+  toolName?: string
+  toolInput?: unknown
+}
+
+export const useClaudeHooksStore = defineStore('claude-hooks', () => {
+  const notifications = ref<HookNotification[]>([])
+  const MAX_VISIBLE = 5
+
+  const visible = computed(() => notifications.value.slice(-MAX_VISIBLE))
+
+  function add(notif: HookNotification) {
+    notifications.value.push(notif)
+    if (!notif.persistent) {
+      const duration = notif.type === 'warning' ? 5000 : 3500
+      setTimeout(() => remove(notif.id), duration)
+    }
+    // Cap total stored
+    if (notifications.value.length > 30) {
+      notifications.value = notifications.value.slice(-20)
+    }
+  }
+
+  function remove(id: string) {
+    const idx = notifications.value.findIndex(n => n.id === id)
+    if (idx !== -1) notifications.value.splice(idx, 1)
+  }
+
+  function clear() {
+    notifications.value = []
+  }
+
+  // Process a raw claude-hook WS message into a notification (or ignore it)
+  function processHook(data: Record<string, any>) {
+    const event = data.hook_event_name
+    const toolName = data.tool_name || ''
+    const id = `hook_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`
+
+    switch (event) {
+      case 'SessionStart':
+        add({
+          id, event, type: 'info',
+          icon: '', title: 'Session started',
+          detail: data.model ? `Model: ${data.model}` : '',
+          timestamp: Date.now()
+        })
+        break
+
+      case 'UserPromptSubmit': {
+        const prompt = data.prompt || ''
+        add({
+          id, event, type: 'info',
+          icon: '', title: 'Prompt',
+          detail: prompt.length > 100 ? prompt.slice(0, 100) + '...' : prompt,
+          timestamp: Date.now()
+        })
+        break
+      }
+
+      case 'PreToolUse': {
+        // Only notify for interesting tools, not reads
+        if (/^(Read|Glob|Grep)$/.test(toolName)) return
+        const input = data.tool_input || {}
+        let detail = ''
+        if (toolName === 'Bash') {
+          const cmd = input.command || ''
+          detail = cmd.length > 80 ? cmd.slice(0, 80) + '...' : cmd
+        } else if (toolName === 'Edit' || toolName === 'Write') {
+          detail = input.file_path ? shortPath(input.file_path) : ''
+        } else if (toolName === 'Task') {
+          detail = input.description || input.prompt?.slice(0, 60) || ''
+        } else if (toolName === 'WebSearch') {
+          detail = input.query || ''
+        } else if (toolName === 'WebFetch') {
+          detail = input.url || ''
+        } else {
+          detail = toolName
+        }
+        add({
+          id, event, type: 'info',
+          icon: '', title: formatToolName(toolName),
+          detail, timestamp: Date.now()
+        })
+        break
+      }
+
+      case 'PostToolUse': {
+        // Skip noisy read tools
+        if (/^(Read|Glob|Grep)$/.test(toolName)) return
+        const response = data.tool_response
+        let detail = ''
+        if (typeof response === 'string') {
+          detail = response.length > 120 ? response.slice(0, 120) + '...' : response
+        } else if (response) {
+          const json = JSON.stringify(response)
+          detail = json.length > 120 ? json.slice(0, 120) + '...' : json
+        }
+        // Clean control chars and excessive whitespace
+        detail = detail.replace(/[\x00-\x1f]+/g, ' ').replace(/\s+/g, ' ').trim()
+        if (!detail) return
+        add({
+          id, event, type: 'success',
+          icon: '', title: `${toolName} result`,
+          detail, timestamp: Date.now()
+        })
+        break
+      }
+
+      case 'Notification':
+        add({
+          id, event, type: 'warning',
+          icon: '', title: 'Claude notification',
+          detail: data.message || '',
+          timestamp: Date.now()
+        })
+        break
+
+      case 'Stop': {
+        const response = data.assistant_response || ''
+        const detail = response.length > 200 ? response.slice(0, 200) + '...' : response
+        add({
+          id, event, type: 'success',
+          icon: '', title: response ? 'Claude response' : 'Session finished',
+          detail,
+          timestamp: Date.now(),
+          persistent: !!response // Keep visible if there's a response to read
+        })
+        break
+      }
+    }
+  }
+
+  // Process a claude-permission WS message
+  function processPermission(data: Record<string, any>) {
+    const id = `perm_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`
+    const toolName = data.tool_name || 'Unknown'
+    const input = data.tool_input || {}
+    let detail = ''
+    if (toolName === 'Bash') {
+      const cmd = input.command || ''
+      detail = cmd.length > 120 ? cmd.slice(0, 120) + '...' : cmd
+    } else if (toolName === 'Edit' || toolName === 'Write') {
+      detail = input.file_path ? shortPath(input.file_path) : ''
+    } else {
+      detail = JSON.stringify(input).slice(0, 100)
+    }
+
+    add({
+      id, event: 'PermissionRequest', type: 'error',
+      icon: '', title: `Permission: ${toolName}`,
+      detail,
+      timestamp: Date.now(),
+      persistent: true,
+      requestId: data.requestId,
+      toolName,
+      toolInput: input
+    })
+  }
+
+  async function respondPermission(notifId: string, requestId: string, decision: 'allow' | 'deny') {
+    try {
+      await fetch('/api/claude-permission-respond', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ requestId, decision })
+      })
+    } catch (e) {
+      console.error('[Hooks] Failed to respond permission:', e)
+    }
+    remove(notifId)
+  }
+
+  return { notifications, visible, add, remove, clear, processHook, processPermission, respondPermission }
+})
+
+function shortPath(p: string): string {
+  const parts = p.replace(/\\/g, '/').split('/')
+  if (parts.length <= 3) return parts.join('/')
+  return '.../' + parts.slice(-2).join('/')
+}
+
+function formatToolName(name: string): string {
+  switch (name) {
+    case 'Bash': return 'Running command'
+    case 'Edit': return 'Editing file'
+    case 'Write': return 'Writing file'
+    case 'Task': return 'Spawning agent'
+    case 'WebSearch': return 'Searching web'
+    case 'WebFetch': return 'Fetching URL'
+    case 'NotebookEdit': return 'Editing notebook'
+    default: return `Tool: ${name}`
+  }
+}
--- a/server/routes/claude-hook.ts
+++ b/server/routes/claude-hook.ts
@@ -0,0 +1,125 @@
+import { jsonResponse, errorResponse } from '../utils/cors'
+import { PORT_TERMINAL } from '../config'
+import { existsSync, readFileSync } from 'fs'
+
+type ClaudeStatus = 'idle' | 'processing' | 'toolUse' | 'toolDone' | 'reading' | 'writing' | 'sessionStart' | 'subagentStart' | 'subagentStop' | 'notification' | 'permissionRequest' | 'thinking'
+
+interface HookPayload {
+  hook_event_name?: string
+  session_id?: string
+  tool_name?: string
+  tool_input?: unknown
+  tool_response?: unknown
+  prompt?: string
+  cwd?: string
+  model?: string
+  source?: string
+  transcript_path?: string
+  message?: string
+  notification_type?: string
+  stop_hook_active?: boolean
+  tool_use_id?: string
+  [key: string]: unknown
+}
+
+function deriveStatus(payload: HookPayload): { status: ClaudeStatus, tool?: string } {
+  const event = payload.hook_event_name
+  const toolName = payload.tool_name
+
+  switch (event) {
+    case 'SessionStart':
+      return { status: 'sessionStart' }
+    case 'UserPromptSubmit':
+      return { status: 'processing' }
+    case 'PreToolUse':
+      if (toolName && /^(Read|Glob|Grep)$/.test(toolName)) {
+        return { status: 'reading', tool: toolName }
+      }
+      if (toolName && /^(Edit|Write)$/.test(toolName)) {
+        return { status: 'writing', tool: toolName }
+      }
+      return { status: 'toolUse', tool: toolName }
+    case 'PostToolUse':
+      return { status: 'toolDone', tool: toolName }
+    case 'PermissionRequest':
+      return { status: 'permissionRequest', tool: toolName }
+    case 'Notification':
+      return { status: 'notification' }
+    case 'Stop':
+      return { status: 'idle' }
+    default:
+      return { status: 'processing' }
+  }
+}
+
+export async function handleClaudeHook(req: Request): Promise<Response | null> {
+  if (req.method !== 'POST') return null
+
+  try {
+    const url = new URL(req.url)
+    const agent = url.searchParams.get('agent') || ''
+    const body = await req.json() as HookPayload
+
+    // On Stop events, extract last assistant response from transcript
+    if (body.hook_event_name === 'Stop' && body.transcript_path) {
+      try {
+        let tp = body.transcript_path as string
+        // Normalize path for Windows (handle both C:\ and /c/ formats)
+        tp = tp.replace(/\\/g, '/')
+        if (/^\/[a-zA-Z]\//.test(tp)) {
+          tp = tp[1].toUpperCase() + ':' + tp.slice(2)
+        }
+        if (existsSync(tp)) {
+          const lines = readFileSync(tp, 'utf8').trim().split('\n')
+          for (let i = lines.length - 1; i >= Math.max(0, lines.length - 30); i--) {
+            try {
+              const obj = JSON.parse(lines[i])
+              if (obj.type === 'assistant' && obj.message?.role === 'assistant') {
+                const content = obj.message.content
+                if (Array.isArray(content)) {
+                  const text = content.filter((c: any) => c.type === 'text').map((c: any) => c.text).join('\n')
+                  if (text) {
+                    body.assistant_response = text.slice(0, 500)
+                    break
+                  }
+                }
+              }
+            } catch { /* skip unparseable lines */ }
+          }
+        }
+      } catch (e) {
+        console.error('[claude-hook] Failed to read transcript:', e)
+      }
+    }
+
+    // Inject agent name into hook data for WS consumers
+    const hookData = { ...body, agent_name: agent || 'main' }
+
+    // 1. Broadcast full hook data via WebSocket (always, even for subagents)
+    try {
+      await fetch(`http://localhost:${PORT_TERMINAL}/claude-hook`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(hookData)
+      })
+    } catch (e) {
+      console.error('[claude-hook] Failed to forward hook to terminal server:', e)
+    }
+
+    // 2. Derive status and broadcast for backward compat (App.vue/AgentBar.vue)
+    const { status, tool } = deriveStatus(body)
+    try {
+      await fetch(`http://localhost:${PORT_TERMINAL}/claude-status`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status, tool, agent: agent || 'main' })
+      })
+    } catch (e) {
+      console.error('[claude-hook] Failed to forward status to terminal server:', e)
+    }
+
+    return jsonResponse({ success: true, event: body.hook_event_name, agent: agent || 'main' })
+  } catch (e) {
+    return errorResponse('Invalid JSON body', 400)
+  }
+}
--- a/server/routes/claude-permission.ts
+++ b/server/routes/claude-permission.ts
@@ -0,0 +1,111 @@
+import { jsonResponse, errorResponse } from '../utils/cors'
+import { PORT_TERMINAL } from '../config'
+
+interface PermissionPayload {
+  hook_event_name?: string
+  session_id?: string
+  tool_name?: string
+  tool_input?: unknown
+  cwd?: string
+  [key: string]: unknown
+}
+
+interface PendingPermission {
+  resolve: (decision: string) => void
+  timer: ReturnType<typeof setTimeout>
+  payload: PermissionPayload
+}
+
+// Map of requestId -> pending permission promise resolver
+const pendingPermissions = new Map<string, PendingPermission>()
+
+const PERMISSION_TIMEOUT_MS = 60_000
+
+export async function handleClaudePermission(req: Request): Promise<Response | null> {
+  if (req.method !== 'POST') return null
+
+  try {
+    const body = await req.json() as PermissionPayload
+    const requestId = `perm_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`
+
+    // Broadcast permission request to UI via WebSocket
+    try {
+      await fetch(`http://localhost:${PORT_TERMINAL}/claude-permission`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ requestId, ...body })
+      })
+    } catch (e) {
+      console.error('[claude-permission] Failed to broadcast to terminal server:', e)
+    }
+
+    // Also broadcast claude-status for backward compat (animations)
+    try {
+      await fetch(`http://localhost:${PORT_TERMINAL}/claude-status`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: 'permissionRequest', tool: body.tool_name })
+      })
+    } catch (e) {
+      console.error('[claude-permission] Failed to forward status:', e)
+    }
+
+    // Wait for UI decision (or timeout)
+    const decision = await new Promise<string>((resolve) => {
+      const timer = setTimeout(() => {
+        pendingPermissions.delete(requestId)
+        resolve('ask')
+      }, PERMISSION_TIMEOUT_MS)
+
+      pendingPermissions.set(requestId, { resolve, timer, payload: body })
+    })
+
+    return jsonResponse({ decision, requestId })
+  } catch (e) {
+    return errorResponse('Invalid JSON body', 400)
+  }
+}
+
+export async function handleClaudePermissionRespond(req: Request): Promise<Response | null> {
+  if (req.method !== 'POST') return null
+
+  try {
+    const body = await req.json() as { requestId: string, decision: 'allow' | 'deny' }
+
+    if (!body.requestId || !body.decision) {
+      return errorResponse('Missing requestId or decision', 400)
+    }
+
+    if (!['allow', 'deny'].includes(body.decision)) {
+      return errorResponse('Decision must be "allow" or "deny"', 400)
+    }
+
+    const pending = pendingPermissions.get(body.requestId)
+    if (!pending) {
+      return errorResponse('Permission request not found or already expired', 404)
+    }
+
+    // Resolve the pending promise
+    clearTimeout(pending.timer)
+    pendingPermissions.delete(body.requestId)
+    pending.resolve(body.decision)
+
+    return jsonResponse({ success: true, requestId: body.requestId, decision: body.decision })
+  } catch (e) {
+    return errorResponse('Invalid JSON body', 400)
+  }
+}
+
+// List pending permissions (useful for UI to recover state)
+export async function handleClaudePermissionList(req: Request): Promise<Response | null> {
+  if (req.method !== 'GET') return null
+
+  const pending = Array.from(pendingPermissions.entries()).map(([id, p]) => ({
+    requestId: id,
+    tool_name: p.payload.tool_name,
+    tool_input: p.payload.tool_input,
+    session_id: p.payload.session_id
+  }))
+
+  return jsonResponse({ pending })
+}
--- a/server/routes/index.ts
+++ b/server/routes/index.ts
@@ -10,9 +10,16 @@ import { handleTables, handleStats, handleTableSchema, handleTableData, handleQu
 import { handleWhisperRoutes } from './whisper'
 import { handleRecordingsRoutes } from './recordings'
 import { handleClaudeStatus } from './claude-status'
+import { handleClaudeHook } from './claude-hook'
+import { handleClaudePermission, handleClaudePermissionRespond, handleClaudePermissionList } from './claude-permission'
 import { handleSnapshots, handleSnapshotById } from './snapshots'
 import { handleGitStatus, handleGitDiff, handleGitLog, handleGitLogCommit, handleGitCompare, handleGitBranches, handleGitCurrentBranch, handleGitTree, handleGitFile } from './git'
-import { handleAgents, handleAgentsFile } from './agents'
+import {
+  handleAgents, handleAgentsFile,
+  handleAgentsConfig, handleAgentsKnownTools, handleAgentsSkills,
+  handleAgentsPlugins, handleAgentsMcpJson,
+  handleAgentsConfigPermissions, handleAgentsConfigHooks, handleAgentsConfigMcp
+} from './agents'

 export async function handleRequest(req: Request): Promise<Response> {
  const url = new URL(req.url)
@@ -58,6 +65,28 @@ export async function handleRequest(req: Request): Promise<Response> {
    if (res) return res
  }

+  // Claude Code hook (rich stdin data forwarding)
+  if (path === '/api/claude-hook') {
+    const res = await handleClaudeHook(req)
+    if (res) return res
+  }
+
+  // Claude Code permission request/respond
+  if (path === '/api/claude-permission') {
+    if (req.method === 'GET') {
+      const res = await handleClaudePermissionList(req)
+      if (res) return res
+    } else {
+      const res = await handleClaudePermission(req)
+      if (res) return res
+    }
+  }
+
+  if (path === '/api/claude-permission-respond') {
+    const res = await handleClaudePermissionRespond(req)
+    if (res) return res
+  }
+
  // Components
  if (path === '/api/components') {
    const res = await handleComponents(req)
@@ -253,6 +282,46 @@ export async function handleRequest(req: Request): Promise<Response> {
    return handleAgents(req)
  }

+  if (path === '/api/agents/config' && req.method === 'GET') {
+    const res = await handleAgentsConfig(req, url)
+    if (res) return res
+  }
+
+  if (path === '/api/agents/known-tools' && req.method === 'GET') {
+    const res = await handleAgentsKnownTools(req)
+    if (res) return res
+  }
+
+  if (path === '/api/agents/skills' && req.method === 'GET') {
+    const res = await handleAgentsSkills(req, url)
+    if (res) return res
+  }
+
+  if (path === '/api/agents/plugins' && req.method === 'GET') {
+    const res = await handleAgentsPlugins(req)
+    if (res) return res
+  }
+
+  if (path === '/api/agents/mcp-json' && req.method === 'GET') {
+    const res = await handleAgentsMcpJson(req)
+    if (res) return res
+  }
+
+  if (path === '/api/agents/config/permissions' && req.method === 'POST') {
+    const res = await handleAgentsConfigPermissions(req)
+    if (res) return res
+  }
+
+  if (path === '/api/agents/config/hooks' && req.method === 'POST') {
+    const res = await handleAgentsConfigHooks(req)
+    if (res) return res
+  }
+
+  if (path === '/api/agents/config/mcp' && req.method === 'POST') {
+    const res = await handleAgentsConfigMcp(req)
+    if (res) return res
+  }
+
  if (path === '/api/agents/file') {
    const res = await handleAgentsFile(req, url)
    if (res) return res
--- a/server/services/terminal.ts
+++ b/server/services/terminal.ts
@@ -124,6 +124,28 @@ export function startTerminalServer() {
        }
      }

+      // Claude hook broadcast endpoint (rich data from stdin)
+      if (url.pathname === '/claude-hook' && req.method === 'POST') {
+        try {
+          const body = await req.json()
+          broadcastClaudeHook(body)
+          return Response.json({ success: true }, { headers: corsHeaders })
+        } catch {
+          return Response.json({ error: 'Invalid JSON' }, { status: 400, headers: corsHeaders })
+        }
+      }
+
+      // Claude permission request broadcast endpoint
+      if (url.pathname === '/claude-permission' && req.method === 'POST') {
+        try {
+          const body = await req.json()
+          broadcastPermissionRequest(body)
+          return Response.json({ success: true }, { headers: corsHeaders })
+        } catch {
+          return Response.json({ error: 'Invalid JSON' }, { status: 400, headers: corsHeaders })
+        }
+      }
+
      // Check if this is a WebSocket upgrade request
      const upgradeHeader = req.headers.get('upgrade')
      console.log(`[Terminal] Request: ${req.method} ${url.pathname}, Upgrade: ${upgradeHeader}`)
@@ -269,3 +291,49 @@ export function broadcastClaudeStatus(status: ClaudeStatus, tool?: string, agent

  console.log(`[Terminal] Claude status broadcast: ${status}${tool ? ` (${tool})` : ''} → ${clientCount} clients`)
 }
+
+// Broadcast full Claude hook data to ALL clients
+export function broadcastClaudeHook(data: Record<string, unknown>) {
+  const message = JSON.stringify({
+    type: 'claude-hook',
+    ...data,
+    timestamp: Date.now()
+  })
+
+  let clientCount = 0
+  for (const [, session] of sessions) {
+    for (const ws of session.clients) {
+      try {
+        ws.send(message)
+        clientCount++
+      } catch {
+        // Client disconnected, ignore
+      }
+    }
+  }
+
+  console.log(`[Terminal] Claude hook broadcast: ${data.hook_event_name || 'unknown'}${data.tool_name ? ` (${data.tool_name})` : ''} → ${clientCount} clients`)
+}
+
+// Broadcast permission request to ALL clients
+export function broadcastPermissionRequest(data: Record<string, unknown>) {
+  const message = JSON.stringify({
+    type: 'claude-permission',
+    ...data,
+    timestamp: Date.now()
+  })
+
+  let clientCount = 0
+  for (const [, session] of sessions) {
+    for (const ws of session.clients) {
+      try {
+        ws.send(message)
+        clientCount++
+      } catch {
+        // Client disconnected, ignore
+      }
+    }
+  }
+
+  console.log(`[Terminal] Permission request broadcast: ${data.tool_name || 'unknown'} (${data.requestId}) → ${clientCount} clients`)
+}