Observatory
3D visualization of your entire agent network. Discover by exploring, not by reading.
Philosophy: Ambient Delight
Observatory follows a discovery-based design:
❌ NO instructions, tips, or tutorials
✅ YES to rewards, achievements, and celebration
Like an iPhone: Obvious from design. 3-year-olds figure it out. You will too.
What You’ll Discover
Visual System
- Spheres = Your services/agents
- Lines = Connections between them
- Colors = Status (you’ll learn by watching)
- Movement = System activity
Interactions
- Drag = Rotate view
- Scroll = Zoom
- Click = Discover what happens
- Explore = Find hidden features
Achievements
As you explore, you’ll unlock:
- ✨ First Contact (click your first node)
- 🎯 Explorer (click 5 nodes)
- 💻 Console Cowboy (use terminal)
- 🔍 Big Picture (view overview)
- 🎨 Customizer (change appearance)
- 📁 File Explorer (browse files)
Each achievement comes with celebration - sparkles, confetti, level-ups!
Features You’ll Find
The 3D Space
- Rotate, zoom, explore
- Each sphere is interactive
- Connections show relationships
- Everything updates in real-time
The Bottom Dock
Left side = System tools (you’ll figure them out)
Right side = External tools (IDE, Git, etc)
Hover to see what they do. Click to use them.
Customization
Find the settings. Change:
- Sphere colors
- Connector colors
- Sizes and styles
- Changes apply instantly
Menus
Top bar has dropdown menus. Useful actions inside.
Current Status
Location: neuais.com/hub.neuais.com/observatory.neuais.com/
Access:
cd neuais.com/hub.neuais.com/observatory.neuais.com
python3 -m http.server 3000
# Open: http://localhost:3000
Public: https://observatory.neuais.com (via Cloudflare Tunnel)
Features
Implemented ✅
- 3D node visualization (Three.js)
- Real-time data loading
- Interactive cards (drag, minimize, close)
- Achievement system with rewards
- XP and level progression
- First-run experience (scenario mode)
- Customizable appearance
- Dropdown menus
- Terminal card
- Overview card
- Metrics card
In Progress 🚧
- Real metrics integration (Prometheus)
- Live command execution
- Agent health monitoring
- File browser integration
Technical Details
Stack
- Three.js - 3D rendering
- Vanilla JS - No framework bloat
- CSS Glass - Modern glassmorphic UI
- Local Storage - Save preferences
Data Sources
observatory-data.js- Static test dataobservatory-data-live.js- Future: Real metrics
Architecture
Observatory
├── Core (3D scene)
├── Data (agent info)
├── Visual Config (customization)
├── Cards (information panels)
├── Dock (tool launcher)
├── Achievements (gamification)
└── First Run (initial experience)
Files
observatory.neuais.com/
├── index.html
├── css/
│ ├── observatory-*.css
│ ├── cards-improved.css
│ ├── achievements.css
│ ├── dropdown-menus.css
│ └── first-run.css
└── js/
├── observatory-core.js
├── observatory-data*.js
├── observatory-cards-improved.js
├── achievement-system.js
├── observatory-first-run.js
├── observatory-menu-dropdown.js
└── observatory-visual-config.js
Integration
With RIC
- Agents appear as nodes
- Status updates in real-time
- Click nodes to see agent details
With GitArena
- Dock button opens Git interface
- Manage repositories
With IDE
- Dock button opens development environment
- Edit code in browser
With Perfection
- Services deployed via Perfection appear automatically
- Status tracked and visualized
Design Principles
From the original vision:
“It kind of needs to be obvious, fun, clear, meaningful from the get go without a tip…. like an iphone. 3 year olds work literally everything n they love it.”
Implementation:
- Self-evident - Design tells you what to do
- Rewarding - Every action gets feedback
- Celebratory - Achievements, not instructions
- Discoverable - Features reveal themselves
- Delightful - Sparkles, confetti, sounds
Customization
Observatory is fully customizable:
Visual Preferences
- Node colors
- Node sizes
- Connector colors
- Connector opacity
- Connector styles
All saved to browser localStorage.
Theme
- Dark background (starfield)
- Glass panels
- White/grey text
- Minimal, professional
Achievements
Track your exploration:
| Achievement | Unlock Condition |
|---|---|
| First Contact | Click first node |
| Explorer | Click 5 nodes |
| Investigator | Click 10 nodes |
| Console Cowboy | Use terminal |
| Big Picture | View overview |
| Metrics Master | View metrics |
| Customizer | Change settings |
| File Explorer | Open file browser |
Each unlocks with celebration!
Development
Running Locally
cd observatory.neuais.com
python3 -m http.server 3000
Making Changes
- Edit files in place
- Refresh browser
- Check browser console for errors
Adding Features
- Create new card type in
card-templates.js - Add UI in
observatory-cards-improved.js - Wire up functionality
- Test!
Troubleshooting
No Nodes Visible
- Check data in
observatory-data.js - Refresh page
- Check browser console
Can’t Click Anything
- Close overlapping cards (click ×)
- Refresh page
- Check for JS errors
Customization Not Saving
- Check localStorage is enabled
- Clear browser cache
- Try different browser
Future
Planned Features
- Real-time metrics from Prometheus
- Command execution via terminal
- File browser integration
- Agent deployment from UI
- Health monitoring
- Log streaming
- Alert notifications
Integration Goals
- Full Perfection integration
- RIC agent management
- GitArena workflows
- IDE code editing
Explore. Discover. Enjoy. 🌌
The interface that teaches itself.