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
This commit is contained in:
2026-02-14 02:42:30 -06:00
parent d5a426f17d
commit d9e2548fb8
4 changed files with 479 additions and 12 deletions

View File

@@ -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)
}
}