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

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" />
 

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>

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}`
+  }
+}