groove-dev 0.15.1 → 0.16.0

package/docs/FILE-EDITOR-PLAN.md

@@ -0,0 +1,253 @@
+# File Editor — Implementation Plan
+
+## Context
+
+Power users want to watch and verify what agents are doing in real-time. A VS Code-style file editor embedded in the GROOVE GUI lets users browse project files, see agent changes as they happen, and make quick edits — all without leaving the dashboard.
+
+## Architecture
+
+```
++------------------------------------------+
+| [EditorTabs: file1.js | file2.css | ...] |
++----------+-------------------------------+
+| FileTree | CodeEditor (CodeMirror 6)     |
+| (240px)  | (flex: 1)                     |
+|          |                               |
+|          |  [file changed banner]        |
+|          |                               |
++----------+-------------------------------+
+```
+
+**Editor library: CodeMirror 6** — modular (~200KB vs Monaco's ~3MB), has a native One Dark theme matching GROOVE's palette, supports programmatic content updates for live agent changes. No new daemon dependencies — file watching uses Node.js built-in `fs.watch`.
+
+## Files to Create
+
+| File | Purpose |
+|------|---------|
+| `packages/gui/src/views/FileEditor.jsx` | Main view — composes tree + tabs + editor |
+| `packages/gui/src/components/FileTree.jsx` | Expandable directory tree sidebar |
+| `packages/gui/src/components/EditorTabs.jsx` | Horizontal tab bar for open files |
+| `packages/gui/src/components/CodeEditor.jsx` | CodeMirror 6 wrapper |
+| `packages/daemon/src/filewatcher.js` | Per-file fs.watch + debounced WebSocket broadcast |
+
+## Files to Modify
+
+| File | Changes |
+|------|---------|
+| `packages/daemon/src/api.js` | Add `/api/files/tree`, `/api/files/read`, `/api/files/write` endpoints |
+| `packages/daemon/src/index.js` | Wire `FileWatcher`, handle `editor:watch`/`editor:unwatch` WS messages |
+| `packages/gui/src/stores/groove.js` | Add editor state + actions + `file:changed` WS handler |
+| `packages/gui/src/App.jsx` | Add "Editor" tab, import + render `<FileEditor />` |
+| `packages/gui/package.json` | Add CodeMirror 6 dependencies |
+
+## Build Order
+
+### Step 1: Backend — File API endpoints
+
+**File: `packages/daemon/src/api.js`**
+
+Add after the existing `// --- Directory Browser ---` section. Reuse the same path validation pattern from `/api/browse`.
+
+**`GET /api/files/tree?path=<relPath>`**
+Returns files AND directories for a given path. Response:
+```json
+{
+  "current": "src/components",
+  "parent": "src",
+  "entries": [
+    { "name": "subdir", "type": "dir", "path": "src/components/subdir", "hasChildren": true },
+    { "name": "App.jsx", "type": "file", "path": "src/components/App.jsx", "size": 4521, "language": "javascript" }
+  ]
+}
+```
+- Dirs first (sorted), then files (sorted)
+- Filter: no `.git`, `node_modules`, dotfiles
+- Language detected from extension via a simple map
+
+**`GET /api/files/read?path=<relPath>`**
+Returns file contents. Response:
+```json
+{ "path": "src/App.jsx", "content": "...", "size": 4521, "language": "javascript" }
+```
+- Reject files > 5MB
+- Detect binary (null bytes in first 8KB) → return `{ binary: true }`
+
+**`POST /api/files/write`**
+Saves file contents. Body: `{ path, content }`. Response: `{ ok: true, size: N }`
+- Same path validation
+- Audit log: `daemon.audit.log('file.write', { path })`
+
+**Language detection helper:**
+```javascript
+const LANG_MAP = {
+  js: 'javascript', jsx: 'javascript', mjs: 'javascript',
+  ts: 'typescript', tsx: 'typescript',
+  css: 'css', scss: 'css', html: 'html', json: 'json',
+  md: 'markdown', py: 'python', rs: 'rust', go: 'go',
+  sh: 'shell', yaml: 'yaml', yml: 'yaml', toml: 'toml',
+  sql: 'sql', xml: 'xml', java: 'java',
+};
+function detectLanguage(filename) {
+  const ext = filename.split('.').pop()?.toLowerCase();
+  return LANG_MAP[ext] || 'text';
+}
+```
+
+### Step 2: Backend — File Watcher
+
+**New file: `packages/daemon/src/filewatcher.js`**
+
+Lightweight class that watches individual files (only files the user has open in the editor):
+- `watch(relPath)` — start watching with `fs.watch`, debounce 300ms, broadcast `{ type: 'file:changed', path, timestamp }` via `daemon.broadcast()`
+- `unwatch(relPath)` — stop watching, clean up
+- `unwatchAll()` — cleanup on daemon shutdown
+
+**Wire in `packages/daemon/src/index.js`:**
+- Instantiate `this.fileWatcher = new FileWatcher(this)` in daemon constructor
+- In the WebSocket `connection` handler, add a `message` listener:
+  - `editor:watch` → `this.fileWatcher.watch(msg.path)`
+  - `editor:unwatch` → `this.fileWatcher.unwatch(msg.path)`
+- Call `this.fileWatcher.unwatchAll()` on daemon shutdown
+
+### Step 3: Dependencies — Install CodeMirror 6
+
+Add to `packages/gui/package.json`:
+```
+@codemirror/view, @codemirror/state, @codemirror/language,
+@codemirror/commands, @codemirror/search, @codemirror/autocomplete,
+@codemirror/lang-javascript, @codemirror/lang-css, @codemirror/lang-html,
+@codemirror/lang-json, @codemirror/lang-markdown, @codemirror/lang-python,
+@codemirror/theme-one-dark
+```
+
+Run `npm install` from project root.
+
+### Step 4: Zustand Store — Editor State
+
+**File: `packages/gui/src/stores/groove.js`**
+
+Add to initial state:
+```javascript
+editorFiles: {},         // { [path]: { content, originalContent, language, loadedAt } }
+editorActiveFile: null,  // currently visible file path
+editorOpenTabs: [],      // ordered array of open file paths
+editorTreeCache: {},     // { [dirPath]: entries[] } — cached tree data
+editorChangedFiles: {},  // { [path]: timestamp } — externally modified files
+```
+
+Add actions:
+- `openFile(path)` — fetch from `/api/files/read`, add to `editorFiles` + `editorOpenTabs`, set `editorActiveFile`, send `editor:watch` via WS
+- `closeFile(path)` — remove from tabs/files, send `editor:unwatch`, switch to next tab
+- `setActiveFile(path)` — switch active tab
+- `updateFileContent(path, content)` — on every editor keystroke (dirty = content !== originalContent)
+- `saveFile(path)` — POST to `/api/files/write`, reset originalContent
+- `reloadFile(path)` — re-fetch from server, clear changed notification
+- `dismissFileChange(path)` — clear from `editorChangedFiles`
+- `fetchTreeDir(path)` — fetch `/api/files/tree?path=...`, cache in `editorTreeCache`
+
+Add WS handler case:
+```javascript
+case 'file:changed':
+  set((s) => ({ editorChangedFiles: { ...s.editorChangedFiles, [msg.path]: msg.timestamp } }));
+  break;
+```
+
+### Step 5: FileTree Component
+
+**New file: `packages/gui/src/components/FileTree.jsx`**
+
+- Recursive expandable tree, lazy-loads children on directory expand
+- Click file → `openFile(path)`
+- Click directory → toggle expand, fetch children if not cached
+- Visual: 16px indent per level, `>` / `v` arrows for dirs
+- Active file highlighted with accent left border
+- File colors by extension (`.js` amber, `.css` blue, `.json` green, `.md` purple, etc.)
+- Search input at top for client-side filtering
+- Style: `var(--bg-chrome)` background, `var(--border)` separators, matching DirPicker patterns
+
+### Step 6: EditorTabs Component
+
+**New file: `packages/gui/src/components/EditorTabs.jsx`**
+
+- Horizontal scrollable row of open file tabs
+- Each tab: filename (tooltip = full path), close `x` button
+- Active tab: `border-bottom: 2px solid var(--accent)`, bright text
+- Dirty indicator: small amber dot next to filename when content !== originalContent
+- `overflow-x: auto` for many open files
+- Style: `var(--bg-chrome)` background, 32px height, matching header tab patterns from App.jsx
+
+### Step 7: CodeEditor Component (CodeMirror 6)
+
+**New file: `packages/gui/src/components/CodeEditor.jsx`**
+
+React wrapper around CodeMirror 6. Key details:
+
+- `useRef` for container div + EditorView instance
+- `useEffect` on mount: create EditorView with extensions (line numbers, bracket matching, search, auto-indent, one-dark theme, language support)
+- When `content` prop changes externally (file reload / different file selected): dispatch full content replacement via `view.dispatch()`
+- `onChange` callback on every transaction → `updateFileContent(path, newContent)` in store
+- Language switching: reconfigure compartment when language prop changes
+- Custom theme override: set editor bg to `var(--bg-base)` (#24282f) since One Dark default is `--bg-chrome` (#282c34)
+- Ctrl/Cmd+S handler → `saveFile(path)`
+- Cleanup on unmount: `view.destroy()`
+
+### Step 8: FileEditor View (Composition)
+
+**New file: `packages/gui/src/views/FileEditor.jsx`**
+
+Composes all pieces:
+```
+Container (flex column, height 100%)
+├── EditorTabs (flexShrink: 0)
+└── Content Row (flex row, flex: 1, overflow: hidden)
+    ├── FileTree (width: 240px, flexShrink: 0, border-right)
+    └── Editor Area (flex: 1, position: relative)
+        ├── External Change Banner (absolute top, z-index 10, amber)
+        │   "File modified externally" [Reload] [Dismiss]
+        └── CodeEditor (flex: 1)
+```
+
+Empty state when no file open: centered "Select a file from the tree" text.
+
+### Step 9: App.jsx Integration
+
+**File: `packages/gui/src/App.jsx`**
+
+1. Add to TABS: `{ id: 'editor', label: 'Editor' }` — position it second (after Agents)
+2. Import `FileEditor` from `'./views/FileEditor'`
+3. Add render: `{activeTab === 'editor' && <FileEditor />}`
+
+The detail panel (agent chat, journalist) continues to work alongside the editor.
+
+## Security
+
+All file endpoints reuse the path validation from `/api/browse`:
+- No absolute paths (`startsWith('/')`)
+- No traversal (`includes('..')`)
+- No null bytes (`includes('\0')`)
+- Must resolve within `daemon.projectDir`
+- 5MB size limit on read/write
+- Binary detection (null bytes in first 8KB)
+- Audit logging on writes
+
+## Verification
+
+1. `npm run build:gui` — should build clean with CodeMirror included
+2. `node --test packages/daemon/test/` — all 137 tests pass
+3. Start daemon (`groove start`), open GUI, click Editor tab
+4. File tree should show project structure
+5. Click a file → opens in CodeMirror with syntax highlighting
+6. Edit content → tab shows dirty dot
+7. Cmd+S → saves, dirty dot clears
+8. Spawn an agent that modifies an open file → amber banner appears "File modified externally"
+9. Click Reload → file content updates
+10. Open multiple files → tabs work, switching preserves state
+
+## Future Extensions (not in this build)
+
+- Diff view for external changes (`@codemirror/merge`)
+- Git status colors in file tree (modified/untracked)
+- File create/delete/rename via right-click context menu
+- Cmd+P fuzzy file finder
+- Search across files (grep-like panel)
+- Breadcrumb path bar above editor

package/node_modules/@codemirror/autocomplete/.github/workflows/dispatch.yml

@@ -0,0 +1,16 @@
+name: Trigger CI
+on: push
+
+jobs:
+  build:
+    name: Dispatch to main repo
+    runs-on: ubuntu-latest
+    steps:
+      - name: Emit repository_dispatch
+        uses: mvasigh/dispatch-action@main
+        with:
+          # You should create a personal access token and store it in your repository
+          token: ${{ secrets.DISPATCH_AUTH }}
+          repo: dev
+          owner: codemirror
+          event_type: push