- Fullscreen 3D visualization with Three.js/React Three Fiber - Real-time WebSocket connection to NATS event stream - Agent nodes (Claudia, Mona, Vera, Stella, Viola) with activity tracking - Event type nodes (Messages, Tools, Knowledge, Lifecycle) - Glowing energy beams for agent communication - Activity beams showing agent → event type flows - Floating glassmorphism UI overlays - Event log panel with filtering - Responsive fullscreen layout Tech: React, Vite, Tailwind CSS, Three.js, NATS JetStream
26 lines
569 B
JSON
26 lines
569 B
JSON
{
|
|
"name": "claudia-monitor",
|
|
"version": "1.0.0",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "vite build",
|
|
"preview": "vite preview"
|
|
},
|
|
"dependencies": {
|
|
"react": "^18.2.0",
|
|
"react-dom": "^18.2.0",
|
|
"three": "^0.160.0",
|
|
"@react-three/fiber": "^8.15.0",
|
|
"@react-three/drei": "^9.92.0",
|
|
"recharts": "^2.10.0",
|
|
"date-fns": "^3.0.0"
|
|
},
|
|
"devDependencies": {
|
|
"@vitejs/plugin-react": "^4.2.0",
|
|
"vite": "^5.0.0",
|
|
"autoprefixer": "^10.4.0",
|
|
"postcss": "^8.4.0",
|
|
"tailwindcss": "^3.4.0"
|
|
}
|
|
}
|