The GUI
Groove ships a full GUI that works two ways: through the desktop app (recommended for most users) or in your browser at localhost:31415 when running the daemon via terminal.
http://localhost:31415The GUI connects to the daemon over WebSocket and stays in sync in real-time. Every agent spawn, rotation, approval, and status change appears instantly.
Layout
The GUI uses a VS Code-inspired layout with five main areas:
- Activity Bar — 48px left rail with navigation icons
- Main View — the active view (Agents, Editor, Dashboard, Marketplace, Teams, Settings)
- Detail Panel — resizable right sidebar for agent details, spawn wizard, journalist
- Terminal Panel — bottom panel with interactive terminal
- Status Bar — connection status, agent count, terminal toggle
Activity Bar
Five navigation icons at the top, two utility icons at the bottom:
| Icon | View | Description |
|---|---|---|
| Nodes | Agents | Agent tree with React Flow graph |
| Code | Editor | CodeMirror 6 file editor with terminal |
| Chart | Dashboard | KPI sparklines, token charts, fleet panel |
| Store | Marketplace | Skills and integrations |
| Box | Models | Local model browser, HuggingFace search, download, manage |
| Users | Teams | Team management, approvals, schedules |
| Gear | Settings | Providers, gateways, configuration |
| Terminal | Terminal | Toggle the bottom terminal panel |
Breadcrumb Bar
Top bar with the Groove logo, Cmd+K command palette trigger, breadcrumb path, and a pill-style Spawn Agent button on the right.
The Command Palette (Cmd+K) provides fuzzy search across all agents, views, and actions — type to filter, Enter to execute.
Agents View
The main view is a React Flow graph showing every agent as a node connected to the Groove root node.
- Slim 200px nodes with role badge, status dot, and live token count
- Animated Bezier edges flow while agents are running
- Minimap in the corner for navigating large teams
- Welcome state with illustration when no agents exist
- Right-click any node for a context menu (rotate, kill, clone)
- Drag nodes to rearrange — positions persist across refreshes
Spawn Wizard
Click the Spawn Agent pill button to open the spawn wizard in the detail panel:
- Role presets — Backend, Frontend, Fullstack, Planner, Testing, DevOps, Docs
- Provider selector — picks from installed providers (Claude Code, Codex, Gemini CLI, Ollama)
- Model selector — dynamically updates based on provider. Use
autofor intelligent routing. - Permission level — Auto (AI PM reviews risky ops) or Full Send (no reviews, max speed)
- Effort level — Low, Medium, High, Max — maps to Claude's
--effortflag - Working directory — override the global default per-agent
- Prompt editor — full-height text area or Plan with AI chat
- Skills & Integrations — attach installed skills and MCP integrations
- Schedule toggle — recurring schedule with cron presets
Start with a Planner
Spawn a planner first, describe your project, and it will recommend the full team. A Launch Team button appears when it finishes — one click to spawn all recommended agents with proper roles, scopes, and prompts.
Agent Panel
Selecting an agent opens the detail panel with tabs:
Chat — Send instructions to running agents or query them without interrupting.
- Instruct — sends a message and rotates the agent with your instruction
- Query — read-only question that doesn't disrupt the session
- Continue — resume a completed agent with full context
- Launch Team — appears when a planner completes
Chat renders markdown with bubble-style messages and mode pills.
Stats — Live telemetry with canvas-rendered charts:
- Token heartbeat chart
- Activity sparkline
- Burn rate (tokens per minute)
- Context gauge — visual context window usage
Actions — Agent controls:
- Rotate — immediate context rotation with handoff
- Kill — stop the agent
- Clone — spawn with same configuration
- Model swap — hot-swap the underlying model (supported providers only)
Editor View
VS Code-style file editor with three panels:
- File tree (left) — expandable directory tree with language-colored dots, context menu for create/rename/delete
- Editor (center) — CodeMirror 6 with syntax highlighting for 7+ languages, Cmd+S to save, bracket matching, search
- Tabs (top) — open multiple files with dirty indicators
- Media viewer — images and videos render inline
- Directory bar — type any absolute path to navigate anywhere
Dashboard View
Full analytics dashboard:
- KPI strip — sparkline charts for key metrics
- Token/cost chart — area chart with per-agent lines over time
- Fleet panel — all agents with status dots, role badges, token counts
- Savings breakdown — rotation, conflict prevention, cold-start savings
- Activity feed — real-time event stream
Marketplace View
Two tabs:
- Skills — NFT-style cards with category bar, search, star ratings, install/uninstall
- Integrations — MCP server integrations (Slack, Gmail, GitHub, Stripe, etc.) with one-click install and OAuth setup
Teams View
Three sub-tabs:
- Teams — create, rename, delete organizational groups. Assign agents to teams.
- Approvals — pending and resolved approval requests with PM reasoning
- Schedules — cron-based agent scheduling with history
Settings View
Three sections:
- Providers — card for each provider (Claude Code, Codex, Gemini CLI, Ollama) with status dot, API key management, model list, and Ollama setup wizard
- Gateways — Telegram, Discord, Slack gateway cards with token input, notification presets, permission levels, test button. Add new gateways with the "+" card.
- Configuration — Default Provider, Working Directory, Rotation Threshold, QC Threshold, Max Agents, Journalist Interval — all with segmented controls that auto-save
Works Everywhere
The GUI is a standard web app. It works in Chrome, Firefox, Safari, and Edge on any OS. Access remotely via SSH tunnel (groove connect) or Tailscale.
