Skip to content

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:31415

The 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:

IconViewDescription
NodesAgentsAgent tree with React Flow graph
CodeEditorCodeMirror 6 file editor with terminal
ChartDashboardKPI sparklines, token charts, fleet panel
StoreMarketplaceSkills and integrations
BoxModelsLocal model browser, HuggingFace search, download, manage
UsersTeamsTeam management, approvals, schedules
GearSettingsProviders, gateways, configuration
TerminalTerminalToggle the bottom terminal panel

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 auto for 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 --effort flag
  • 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.

FSL-1.1-Apache-2.0