File Editor

Groove includes a built-in file editor so you can browse, edit, and watch your project files without leaving the GUI. Open the Editor tab from the header.

Layout

+------------------------------------------+
| [EditorTabs: file1.js | file2.css | ...] |
+----------+-------------------------------+
| FileTree | CodeEditor (CodeMirror 6)     |
| (240px)  |                               |
|          |  [file changed banner]        |
+----------+-------------------------------+
| Terminal (toggle)                        |
+------------------------------------------+

The editor has four parts:

• File tree — left sidebar for browsing and managing files
• Tab bar — open files across the top, with dirty indicators
• Code editor — syntax-highlighted editing powered by CodeMirror 6
• Terminal — embedded shell at the bottom (toggle to show/hide)

File Tree

The left sidebar shows your project structure as an expandable tree. Directories are listed first (sorted), then files (sorted). Hidden files and common noise directories (node_modules, .git, .cache, dist) are filtered out.

• Click a file to open it in the editor
• Click a directory to expand/collapse it (children are lazy-loaded)
• Active file is highlighted with an accent left border
• Colored dots indicate file type — amber for JS, blue for TypeScript, purple for CSS, green for JSON, etc.
• Filter input at the top for quick searching

Toolbar

The toolbar at the top of the file tree has two icon buttons:

• New File — creates a file at the project root (type a name, press Enter)
• New Folder — creates a directory at the project root

Context Menu

Right-click any file or folder to get a context menu:

Action	On File	On Directory
New File	Creates in same directory	Creates inside directory
New Folder	Creates in same directory	Creates inside directory
Rename	Inline rename input	Inline rename input
Delete	Deletes the file	Deletes the directory (recursive)

Press Enter to confirm, Escape to cancel.

Code Editor

The editor uses CodeMirror 6 with the One Dark theme — matching groove's color palette. It supports:

• Syntax highlighting for 20+ languages (JS, TS, CSS, HTML, JSON, Python, Markdown, and more)
• Line numbers, bracket matching, fold gutters
• Search (Ctrl+F / Cmd+F), auto-indent, selection highlighting
• Cmd+S (or Ctrl+S) to save the file
• Language auto-detection from file extension

Dirty Indicator

When you edit a file, the tab shows an amber dot next to the filename. This means the file has unsaved changes. Save with Cmd+S to clear it.

External Change Detection

If an agent modifies a file you have open, an amber banner appears at the top:

File modified externally [Reload] [Dismiss]

• Reload — fetches the latest content from disk
• Dismiss — hides the banner (keeps your current edits)

This only triggers for external changes. Your own saves (Cmd+S) don't trigger the banner.

Media Viewer

Click an image or video file to view it directly in the editor area:

Images (PNG, JPG, GIF, SVG, WebP, AVIF):

• Rendered on a checkerboard background
• Scales to fit the viewport
• "Open in new tab" link for full-size viewing

Video (MP4, WebM, MOV):

• Plays with native browser controls
• Same "Open in new tab" link

Terminal

Click the Terminal bar at the bottom of the editor to open an embedded shell.

• Runs your default shell (zsh, bash, or sh) in the project directory
• Full PTY support — prompts, colors, line editing, tab completion, Ctrl+C all work
• Uses Python's pty module for real terminal emulation (requires Python 3)
• Drag the resize handle above the terminal to adjust height
• Click Terminal again to hide

TIP

The terminal uses xterm.js with the same One Dark color scheme as the rest of the GUI. Web links in terminal output are clickable.

File API

The editor is backed by 8 REST endpoints:

Method	Path	Description
GET	/api/files/tree	Directory listing (files + dirs)
GET	/api/files/read	Read file contents (text)
POST	/api/files/write	Save file
POST	/api/files/create	Create new file
POST	/api/files/mkdir	Create directory
DELETE	/api/files/delete	Delete file or directory
POST	/api/files/rename	Rename or move
GET	/api/files/raw	Serve raw file (images, video)

All endpoints validate paths (no traversal, no absolute paths, must be within the project directory). Text files are limited to 5MB, raw files to 50MB. Binary files are detected via null-byte check in the first 8KB. All write operations are audit-logged.

WebSocket Events

The editor uses WebSocket messages for real-time features:

Client → Daemon:

• editor:watch — start watching a file for changes
• editor:unwatch — stop watching
• terminal:spawn — open a shell session
• terminal:input — send keystrokes
• terminal:resize — resize the PTY
• terminal:kill — close the session

Daemon → Client:

• file:changed — a watched file was modified externally
• terminal:spawned — session ID assigned
• terminal:output — shell output
• terminal:exit — session ended