feat: Add rich Claude status animations to FAB

- Add multiple hook-driven animations for FAB (processing, reading, writing, subagent, sessionStart, notification)
- Create claude-status.ts route to handle status updates from Claude Code hooks
- Broadcast status via WebSocket to all connected clients
- Processing (UserPromptSubmit→Stop): orange pulsing dots
- Reading (Read/Glob/Grep): cyan eye icon with scan animation
- Writing (Edit/Write): green pencil icon with pulse
- Subagent: purple orbital ring animation
- SessionStart: green wake-up ripple effect (3s)
- Notification: yellow bounce animation (2s)
- Tool flash: quick white flash on any tool use

server/routes/claude-status.ts

@@ -0,0 +1,51 @@
+import { jsonResponse, errorResponse } from '../utils/cors'
+import { PORT_TERMINAL } from '../config'
+
+type ClaudeStatus =
+  | 'idle'
+  | 'processing'      // UserPromptSubmit - Claude is processing user input
+  | 'toolUse'         // PreToolUse - Using a tool (generic)
+  | 'toolDone'        // PostToolUse - Tool finished
+  | 'reading'         // PreToolUse(Read/Glob/Grep) - Reading files
+  | 'writing'         // PreToolUse(Edit/Write) - Writing files
+  | 'sessionStart'    // SessionStart - Session just started
+  | 'subagentStart'   // SubagentStart - Spawning subagent
+  | 'subagentStop'    // SubagentStop - Subagent finished
+  | 'notification'    // Notification - Claude sent notification
+  | 'thinking'        // Legacy support
+
+interface ClaudeStatusPayload {
+  status: ClaudeStatus
+  tool?: string
+}
+
+export async function handleClaudeStatus(req: Request): Promise<Response | null> {
+  if (req.method !== 'POST') return null
+
+  try {
+    const body = await req.json() as ClaudeStatusPayload
+
+    const validStatuses: ClaudeStatus[] = [
+      'idle', 'processing', 'toolUse', 'toolDone', 'reading', 'writing',
+      'sessionStart', 'subagentStart', 'subagentStop', 'notification', 'thinking'
+    ]
+    if (!body.status || !validStatuses.includes(body.status)) {
+      return errorResponse(`Invalid status. Must be one of: ${validStatuses.join(', ')}`, 400)
+    }
+
+    // Forward to terminal server for WebSocket broadcast
+    try {
+      await fetch(`http://localhost:${PORT_TERMINAL}/claude-status`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+      })
+    } catch (e) {
+      console.error('[claude-status] Failed to forward to terminal server:', e)
+    }
+
+    return jsonResponse({ success: true, status: body.status })
+  } catch (e) {
+    return errorResponse('Invalid JSON body', 400)
+  }
+}

server/routes/index.ts

@@ -9,6 +9,7 @@ import { handleGiteaRepo, handleGiteaTree, handleGiteaFile } from './gitea'
 import { handleTables, handleStats, handleTableSchema, handleTableData, handleQuery } from './database'
 import { handleWhisperRoutes } from './whisper'
 import { handleRecordingsRoutes } from './recordings'
+import { handleClaudeStatus } from './claude-status'
 
 export async function handleRequest(req: Request): Promise<Response> {
   const url = new URL(req.url)
@@ -42,6 +43,12 @@ export async function handleRequest(req: Request): Promise<Response> {
     if (res) return res
   }
 
+  // Claude Code status (thinking/idle)
+  if (path === '/api/claude-status') {
+    const res = await handleClaudeStatus(req)
+    if (res) return res
+  }
+
   // Components
   if (path === '/api/components') {
     const res = await handleComponents(req)