Chat
Multi-agent streaming chat with file upload, agent selector, model picker, and tool timeline.
UI Overview
The Snippbot web UI is a React 18 single-page application served at http://localhost:18781. It provides full access to all daemon features through a dark-themed, glass-morphism interface.
Navigation
Section titled “Navigation”The UI uses an orbital navigation sidebar — a grouped list of icons on the left edge. Hover to expand labels. Items are organized into six color-coded groups.
Core (cyan)
Section titled “Core (cyan)”| Page | Route |
|---|---|
| Chat | /chat |
| Snippbots | /agents |
| Projects | /projects |
Knowledge (purple)
Section titled “Knowledge (purple)”| Page | Route |
|---|---|
| Memory | /memory |
| History | /history |
| Insights | /insights |
Discover (magenta)
Section titled “Discover (magenta)”| Page | Route |
|---|---|
| Marketplace | /marketplace |
| Assets | /community |
Automation (amber)
Section titled “Automation (amber)”| Page | Route |
|---|---|
| Workflows | /workflows |
| Schedule | /schedule |
| Skills | /skills |
| Hooks | /hooks |
Infrastructure (green)
Section titled “Infrastructure (green)”| Page | Route |
|---|---|
| Browser | /browser |
| Channels | /channels |
| Devices | /devices |
| Sandbox | /sandbox |
Admin (neutral)
Section titled “Admin (neutral)”| Page | Route |
|---|---|
| Monitor | /monitor |
| Settings | /settings |
Design system
Section titled “Design system”The UI uses the Aurora design system:
- Backgrounds:
void-*— deep navy to near-black (#0a0a1a) - Accents:
aurora-*— cyan (#06b6d4) and purple (#a855f7) - Cards: frosted glass with
backdrop-blurand subtle white border - Animations: Framer Motion for page transitions and micro-interactions
- Typography: Quicksand (display headings), Inter (sans), and JetBrains Mono (code)
Projects
Project list and detail — checklist plan viewer, phase breakdown, real-time task execution.
Agents
Agent creation and config — Awakening experience, workspace file editor.
Memory
Memory explorer — 3D nebula, timeline, search, knowledge graph, stats.
Scheduler
Job scheduler — list, workflows, calendar view, activity heatmap.
Workflows
Visual workflow builder — React Flow canvas, step palette, inspector.
Keyboard shortcuts
Section titled “Keyboard shortcuts”| Shortcut | Action |
|---|---|
Cmd+K | Open search (when search is available) |
Enter | Send chat message |
Esc | Close modal / dismiss |
