ADA UI Overview
ada-ui is a Next.js 15 interface for orchestrating AI agents. Design metaphor: mission control / cockpit — dense, technical, real-time.
Stack
Next.js 15 (App Router) · React 19 · TanStack Query v5 · Zustand v5 · shadcn/ui · Tailwind CSS v4. Port :7777. Connects to ada-api:3001 via REST + WebSocket.
Navigation (by frequency)
| Section | Status | Description |
|---|---|---|
| Dashboard | Partial | 4 KPI cards (daemon, runs, cost, budget) · run timeline · Thompson priors table · activity heatmap |
| Workspaces | Planned | Conversation list · chat composer · run cards · streaming console (xterm-like) · phase accordion |
| Agents / Profiles | Live | Searchable agent list (tier, p(win), cost) · profile list + activate · detail drawer |
| Memory | Planned | 3D force-graph (WebGL) of Graphify nodes + wiki pane · node click to expand · Obsidian notes |
| Pipelines | Planned | DAG visualizer (phases, agents, tiers, dependencies, status, cost) |
| MCP | Planned | Connected servers list · catalogue · add/edit modal with masked secrets |
| Logs | Partial | Live tail + pause · filter by source/level/run · virtualized table · expand row for stacktrace |
| Settings | Partial | Providers · Budget · Obsidian · Webhook · Advanced tabs |
Design System
// Semantic status tokens (used throughout)
idle / queued → #64748B slate ○
running / live → #22C55E green ◉ (animated pulse)
success → #10B981 emerald ✓
warning / budget → #F59E0B amber △
failed / error → #EF4444 red ✕
paused → #A855F7 violet ‖
// Model tier colors
haiku (T1) → #38BDF8 sky (fast / light)
sonnet (T2) → #A78BFA violet (standard)
opus (T3) → #FB923C orange (heavy reasoning)Key UI Principles
Controlled density
Show much without saturation — hierarchy by size/spacing/contrast, never color alone
Real-time readable
Streaming tokens/phases/costs are instant with no CLS (Cumulative Layout Shift)
Status always visible
Semantic states (idle/running/success/failed/paused) consistent everywhere
Keyboard-first
⌘K palette, keyboard nav, shortcuts on frequent actions; AA contrast minimum