groove-dev 0.17.8 → 0.18.2

package/packages/gui/src/views/IntegrationsStore.jsx

@@ -84,6 +84,7 @@ function CredentialModal({ integration, onClose }) {
   const [googleClientId, setGoogleClientId] = useState('');
   const [googleClientSecret, setGoogleClientSecret] = useState('');
   const [showGoogleSetup, setShowGoogleSetup] = useState(false);
+  const [errorMsg, setErrorMsg] = useState('');
 
   useEffect(() => {
     if (integration?.authType === 'oauth-google' || integration?.authType === 'google-autoauth' || integration?._googleSetupNeeded) {
@@ -106,6 +107,7 @@ function CredentialModal({ integration, onClose }) {
   async function handleSave(key) {
     if (!values[key]) return;
     setSaving(true);
+    setErrorMsg('');
     try {
       const res = await fetch(`/api/integrations/${integration.id}/credentials`, {
         method: 'POST',
@@ -115,44 +117,61 @@ function CredentialModal({ integration, onClose }) {
       if (res.ok) {
         setSaved((prev) => ({ ...prev, [key]: true }));
         setValues((prev) => ({ ...prev, [key]: '' }));
+      } else {
+        const data = await res.json();
+        setErrorMsg(data.error || `Failed to save ${key}`);
       }
-    } catch { /* ignore */ }
+    } catch {
+      setErrorMsg('Could not reach the server');
+    }
     setSaving(false);
   }
 
   async function handleGoogleSetup() {
     if (!googleClientId || !googleClientSecret) return;
     setSaving(true);
+    setErrorMsg('');
     try {
-      await fetch('/api/integrations/google-oauth/setup', {
+      const res = await fetch('/api/integrations/google-oauth/setup', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ clientId: googleClientId, clientSecret: googleClientSecret }),
       });
-      setOauthStatus('ready');
-      setShowGoogleSetup(false);
-    } catch { /* ignore */ }
+      if (res.ok) {
+        setOauthStatus('ready');
+        setShowGoogleSetup(false);
+      } else {
+        const data = await res.json();
+        setErrorMsg(data.error || 'Failed to save credentials');
+      }
+    } catch {
+      setErrorMsg('Could not reach the server');
+    }
     setSaving(false);
   }
 
   async function handleAutoAuthConnect() {
     setOauthStatus('connecting');
+    setErrorMsg('');
     try {
       const res = await fetch(`/api/integrations/${integration.id}/authenticate`, { method: 'POST' });
       const data = await res.json();
-      if (!data.ok) {
+      if (data.ok) {
+        // MCP server spawned — it will open a browser for OAuth consent
+        setTimeout(() => onClose(), 3000);
+      } else {
+        setErrorMsg(data.error || 'Authentication failed');
         setOauthStatus('ready');
       }
-      // The MCP server will open a browser — poll isn't needed since
-      // the server handles auth internally. Just close after a moment.
-      setTimeout(() => onClose(), 2000);
     } catch {
+      setErrorMsg('Could not reach the server');
       setOauthStatus('ready');
     }
   }
 
   async function handleOAuthConnect() {
     setOauthStatus('connecting');
+    setErrorMsg('');
     try {
       const res = await fetch(`/api/integrations/${integration.id}/oauth/start`, { method: 'POST' });
       const data = await res.json();
@@ -172,8 +191,12 @@ function CredentialModal({ integration, onClose }) {
         }, 2000);
         // Stop polling after 5 minutes
         setTimeout(() => clearInterval(poll), 300000);
+      } else {
+        setErrorMsg(data.error || 'Failed to start OAuth flow');
+        setOauthStatus('ready');
       }
     } catch {
+      setErrorMsg('Could not reach the server');
       setOauthStatus('ready');
     }
   }
@@ -236,32 +259,59 @@ function CredentialModal({ integration, onClose }) {
             </a>
           )}
 
+          {/* Error message */}
+          {errorMsg && (
+            <div style={{
+              padding: '10px 14px', marginBottom: 14, borderRadius: 6,
+              background: 'rgba(224, 108, 117, 0.08)', border: '1px solid var(--red)',
+              fontSize: 11, color: 'var(--red)', lineHeight: 1.5,
+            }}>
+              {errorMsg}
+            </div>
+          )}
+
           {/* OAuth flow for Google integrations (both oauth-google and google-autoauth) */}
           {(isOAuth || isGoogleAutoAuth) && (
             <div style={{ marginBottom: 16 }}>
-              {/* Always show the primary Connect button */}
-              <button
-                onClick={oauthStatus === 'ready'
-                  ? (isGoogleAutoAuth ? handleAutoAuthConnect : handleOAuthConnect)
-                  : () => setShowGoogleSetup(true)}
-                disabled={oauthStatus === 'checking' || oauthStatus === 'connecting'}
-                style={{
-                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
-                  width: '100%', padding: '12px 16px', marginBottom: 12,
-                  background: oauthStatus === 'connecting' ? 'var(--bg-active)' : '#4285f4',
-                  color: '#fff', border: 'none', borderRadius: 6,
-                  fontSize: 13, fontWeight: 600, cursor: 'pointer',
-                  fontFamily: 'var(--font)',
-                  opacity: oauthStatus === 'checking' ? 0.5 : 1,
-                }}
-              >
-                {oauthStatus === 'checking' ? 'Checking...'
-                  : oauthStatus === 'connecting' ? 'Waiting for authorization...'
-                  : `Connect with Google`}
-              </button>
+              {/* Show Connect button only when OAuth is configured */}
+              {oauthStatus === 'ready' && (
+                <button
+                  onClick={isGoogleAutoAuth ? handleAutoAuthConnect : handleOAuthConnect}
+                  disabled={oauthStatus === 'connecting'}
+                  style={{
+                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+                    width: '100%', padding: '12px 16px', marginBottom: 12,
+                    background: '#4285f4',
+                    color: '#fff', border: 'none', borderRadius: 6,
+                    fontSize: 13, fontWeight: 600, cursor: 'pointer',
+                    fontFamily: 'var(--font)',
+                  }}
+                >
+                  Connect with Google
+                </button>
+              )}
+              {oauthStatus === 'checking' && (
+                <div style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  padding: '12px 16px', marginBottom: 12,
+                  color: 'var(--text-muted)', fontSize: 12,
+                }}>
+                  Checking Google credentials...
+                </div>
+              )}
+              {oauthStatus === 'connecting' && (
+                <div style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  padding: '12px 16px', marginBottom: 12,
+                  background: 'var(--bg-active)', borderRadius: 6,
+                  color: 'var(--text-primary)', fontSize: 12, fontWeight: 600,
+                }}>
+                  Waiting for authorization — check your browser...
+                </div>
+              )}
 
-              {/* First-time setup: show inline when Connect is clicked and OAuth not configured */}
-              {showGoogleSetup && oauthStatus === 'not-configured' && (
+              {/* First-time setup: shown when OAuth not configured */}
+              {oauthStatus === 'not-configured' && (
                 <div style={{
                   padding: 14, borderRadius: 8,
                   background: 'var(--bg-surface)', border: '1px solid var(--border)',
@@ -707,26 +757,42 @@ export default function IntegrationsStore() {
   async function handleInstall(id) {
     setInstalling(id);
     try {
-      await fetch(`/api/integrations/${id}/install`, { method: 'POST' });
+      const res = await fetch(`/api/integrations/${id}/install`, { method: 'POST' });
+      const data = await res.json();
+      if (!res.ok) {
+        flash(data.error || 'Install failed', 'error');
+        setInstalling(null);
+        return;
+      }
       await fetchIntegrations();
       // After install, refresh selected item
       if (selectedItem?.id === id) {
         const updated = integrations.find((s) => s.id === id);
         if (updated) setSelectedItem({ ...updated, installed: true });
       }
-    } catch { /* ignore */ }
+    } catch (err) {
+      flash('Install failed — check daemon logs', 'error');
+    }
     setInstalling(null);
   }
 
   async function handleUninstall(id) {
     setInstalling(id);
     try {
-      await fetch(`/api/integrations/${id}`, { method: 'DELETE' });
+      const res = await fetch(`/api/integrations/${id}`, { method: 'DELETE' });
+      if (!res.ok) {
+        const data = await res.json();
+        flash(data.error || 'Uninstall failed', 'error');
+        setInstalling(null);
+        return;
+      }
       await fetchIntegrations();
       if (selectedItem?.id === id) {
         setSelectedItem((prev) => prev ? { ...prev, installed: false, configured: false } : null);
       }
-    } catch { /* ignore */ }
+    } catch {
+      flash('Uninstall failed', 'error');
+    }
     setInstalling(null);
   }
 
@@ -746,31 +812,38 @@ export default function IntegrationsStore() {
         const statusRes = await fetch('/api/integrations/google-oauth/status');
         const statusData = await statusRes.json();
         if (!statusData.configured) {
-          // Need Google OAuth setup first — open the credential modal
+          // Need Google OAuth setup first — open the credential modal with setup form
           setSelectedItem(null);
           setConfiguring({ ...item, _googleSetupNeeded: true });
           return;
         }
-      } catch { /* proceed anyway */ }
+      } catch {
+        // Can't check status — open setup form as fallback
+        setSelectedItem(null);
+        setConfiguring({ ...item, _googleSetupNeeded: true });
+        return;
+      }
     }
 
+    // OAuth is configured — trigger the authentication flow
     setSelectedItem(null);
+    setConfiguring({ ...item }); // Show credential modal in connecting state
     try {
       const res = await fetch(`/api/integrations/${item.id}/authenticate`, { method: 'POST' });
       const data = await res.json();
       if (data.ok) {
         flash('Sign-in window opened — check your browser');
       } else {
-        flash(data.error || 'Authentication failed');
+        flash(data.error || 'Authentication failed', 'error');
       }
     } catch {
-      flash('Authentication failed');
+      flash('Authentication failed — check daemon logs', 'error');
     }
   }
 
-  function flash(msg) {
-    setStatusMsg(msg);
-    setTimeout(() => setStatusMsg(''), 4000);
+  function flash(msg, type = 'info') {
+    setStatusMsg({ text: msg, type });
+    setTimeout(() => setStatusMsg(''), 6000);
   }
 
   function handleConfigureClose() {
@@ -821,8 +894,12 @@ export default function IntegrationsStore() {
 
       {/* Status message */}
       {statusMsg && (
-        <div style={{ padding: '4px 20px', fontSize: 10, color: 'var(--accent)', flexShrink: 0 }}>
-          {statusMsg}
+        <div style={{
+          padding: '8px 20px', fontSize: 12, fontWeight: 500, flexShrink: 0,
+          color: statusMsg.type === 'error' ? 'var(--red)' : 'var(--accent)',
+          background: statusMsg.type === 'error' ? 'rgba(224, 108, 117, 0.06)' : 'transparent',
+        }}>
+          {statusMsg.text || statusMsg}
         </div>
       )}
 

package/docs/FILE-EDITOR-PLAN.md

@@ -1,253 +0,0 @@
-# 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