feat: Introduce Nucleo as the main AI agent identity

- Add Nucleo atom logo with animated orbiting electrons
- Redesign FAB with glassmorphism effect and purple gradient
- Add connection indicator (green dot) when terminal is open
- Update FloatingTerminal header with Nucleo branding
- Add PermissionRequest hook support with red alert animation
- Document Nucleo in README with visual states table
- Create official Nucleo logo SVG in docs/

README.md

@@ -2,6 +2,50 @@
 
 Dynamic canvas interface for Claude Code interaction via MCP (Model Context Protocol).
 
+---
+
+## Nucleo
+
+<p align="center">
+  <img src="docs/nucleo-logo.svg" alt="Nucleo" width="120"/>
+</p>
+
+**Nucleo** is the main AI agent powering Agent UI. It serves as the bridge between Claude Code and your visual interface, providing real-time status feedback through an animated FAB (Floating Action Button).
+
+### Visual States
+
+Nucleo communicates its current state through distinct animations:
+
+| State | Color | Animation | Trigger |
+|-------|-------|-----------|---------|
+| **Idle** | Purple | Rotating atom | Default state |
+| **Processing** | Orange | Pulsing dots | User prompt submitted |
+| **Reading** | Cyan | Eye icon + scan | Reading files (Read/Glob/Grep) |
+| **Writing** | Green | Pencil icon + pulse | Writing files (Edit/Write) |
+| **Subagent** | Purple | Orbital ring | Task tool spawned |
+| **Permission** | Red | Alert + shake | Awaiting user permission |
+| **Session Start** | Green | Ripple waves | Session initialized |
+| **Notification** | Yellow | Bounce | System notification |
+
+### Integration
+
+Nucleo's status is synchronized via Claude Code hooks:
+
+```json
+{
+  "hooks": {
+    "UserPromptSubmit": [{ "hooks": [{ "command": "... status: processing ..." }] }],
+    "PreToolUse": [{ "hooks": [{ "command": "... status: toolUse ..." }] }],
+    "PostToolUse": [{ "hooks": [{ "command": "... status: toolDone ..." }] }],
+    "Stop": [{ "hooks": [{ "command": "... status: idle ..." }] }]
+  }
+}
+```
+
+The FAB receives these status updates via WebSocket and displays the corresponding animation, giving you real-time visibility into what Claude is doing.
+
+---
+
 ## Overview
 
 Agent UI provides a visual canvas where Claude Code can render dynamic Vue 3 components, HTML content, and interactive UIs in real-time. It bridges the gap between CLI-based AI assistance and rich visual interfaces.