groove-dev 0.15.1 → 0.16.1

package/packages/gui/src/stores/groove.js

@@ -15,7 +15,7 @@ export const useGrooveStore = create((set, get) => ({
   tunneled: false,    // true when accessed via SSH tunnel (port mismatch)
 
   // UI state — unified panel model
-  activeTab: 'agents',       // 'agents' | 'stats' | 'teams' | 'approvals'
+  activeTab: 'agents',       // 'agents' | 'stats' | 'teams' | 'approvals' | 'editor'
   detailPanel: null,          // null | { type: 'agent', agentId } | { type: 'spawn' } | { type: 'journalist' }
   activityLog: {},
   statusMessage: null,        // inline status text (replaces toast notifications)
@@ -24,6 +24,14 @@ export const useGrooveStore = create((set, get) => ({
   tokenTimeline: {},            // { [agentId]: [{ t: timestamp, v: tokensUsed }] }
   dashTelemetry: {},            // { [agentId]: [{ t, v, name }] } — persists across tab switches
 
+  // Editor state
+  editorFiles: {},           // { [path]: { content, originalContent, language, loadedAt } }
+  editorActiveFile: null,    // currently visible file path
+  editorOpenTabs: [],        // ordered array of open file paths
+  editorTreeCache: {},       // { [dirPath]: entries[] }
+  editorChangedFiles: {},    // { [path]: timestamp } — externally modified files
+  editorRecentSaves: {},     // { [path]: timestamp } — suppress self-triggered change events
+
   // Connection
   connect() {
     if (get().ws) return;
@@ -124,6 +132,15 @@ export const useGrooveStore = create((set, get) => ({
           get().showStatus(`rotation failed: ${msg.error}`);
           break;
 
+        case 'file:changed': {
+          const savedAt = get().editorRecentSaves[msg.path];
+          if (savedAt && Date.now() - savedAt < 2000) break; // ignore self-triggered
+          set((s) => ({
+            editorChangedFiles: { ...s.editorChangedFiles, [msg.path]: msg.timestamp },
+          }));
+          break;
+        }
+
         case 'journalist:cycle':
           break; // Journalist feed polls separately
       }
@@ -256,6 +273,275 @@ export const useGrooveStore = create((set, get) => ({
     return data;
   },
 
+  // Editor actions
+  async openFile(path) {
+    // Already loaded — just switch tab
+    if (get().editorFiles[path] || get().editorOpenTabs.includes(path)) {
+      set((s) => ({
+        editorActiveFile: path,
+        editorOpenTabs: s.editorOpenTabs.includes(path) ? s.editorOpenTabs : [...s.editorOpenTabs, path],
+      }));
+      return;
+    }
+
+    // Media files — open as tab directly (served via /api/files/raw)
+    const ext = path.split('.').pop()?.toLowerCase();
+    const MEDIA_EXTS = ['png','jpg','jpeg','gif','svg','webp','ico','bmp','avif','mp4','webm','mov','avi','mkv','ogv'];
+    if (MEDIA_EXTS.includes(ext)) {
+      set((s) => ({
+        editorActiveFile: path,
+        editorOpenTabs: [...s.editorOpenTabs, path],
+      }));
+      return;
+    }
+
+    try {
+      const res = await fetch(`${API_BASE}/api/files/read?path=${encodeURIComponent(path)}`);
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        get().showStatus(err.error || 'Failed to read file');
+        return;
+      }
+      const data = await res.json();
+      if (data.binary) {
+        get().showStatus('Binary file — cannot open');
+        return;
+      }
+      set((s) => ({
+        editorFiles: {
+          ...s.editorFiles,
+          [path]: { content: data.content, originalContent: data.content, language: data.language, loadedAt: Date.now() },
+        },
+        editorActiveFile: path,
+        editorOpenTabs: s.editorOpenTabs.includes(path) ? s.editorOpenTabs : [...s.editorOpenTabs, path],
+      }));
+      // Tell daemon to watch this file
+      const ws = get().ws;
+      if (ws?.readyState === 1) {
+        ws.send(JSON.stringify({ type: 'editor:watch', path }));
+      }
+    } catch {
+      get().showStatus('Failed to open file');
+    }
+  },
+
+  closeFile(path) {
+    set((s) => {
+      const tabs = s.editorOpenTabs.filter((t) => t !== path);
+      const files = { ...s.editorFiles };
+      delete files[path];
+      const changed = { ...s.editorChangedFiles };
+      delete changed[path];
+      let active = s.editorActiveFile;
+      if (active === path) {
+        const idx = s.editorOpenTabs.indexOf(path);
+        active = tabs[Math.min(idx, tabs.length - 1)] || null;
+      }
+      return { editorOpenTabs: tabs, editorFiles: files, editorChangedFiles: changed, editorActiveFile: active };
+    });
+    // Stop watching
+    const ws = get().ws;
+    if (ws?.readyState === 1) {
+      ws.send(JSON.stringify({ type: 'editor:unwatch', path }));
+    }
+  },
+
+  setActiveFile(path) {
+    set({ editorActiveFile: path });
+  },
+
+  updateFileContent(path, content) {
+    set((s) => ({
+      editorFiles: {
+        ...s.editorFiles,
+        [path]: { ...s.editorFiles[path], content },
+      },
+    }));
+  },
+
+  async saveFile(path) {
+    const file = get().editorFiles[path];
+    if (!file) return;
+    try {
+      const res = await fetch(`${API_BASE}/api/files/write`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path, content: file.content }),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        get().showStatus(err.error || 'Save failed');
+        return;
+      }
+      set((s) => ({
+        editorFiles: {
+          ...s.editorFiles,
+          [path]: { ...s.editorFiles[path], originalContent: file.content },
+        },
+        editorChangedFiles: (() => {
+          const c = { ...s.editorChangedFiles };
+          delete c[path];
+          return c;
+        })(),
+        editorRecentSaves: { ...s.editorRecentSaves, [path]: Date.now() },
+      }));
+      get().showStatus('Saved');
+    } catch {
+      get().showStatus('Save failed');
+    }
+  },
+
+  async reloadFile(path) {
+    try {
+      const res = await fetch(`${API_BASE}/api/files/read?path=${encodeURIComponent(path)}`);
+      if (!res.ok) return;
+      const data = await res.json();
+      if (data.binary) return;
+      set((s) => ({
+        editorFiles: {
+          ...s.editorFiles,
+          [path]: { content: data.content, originalContent: data.content, language: data.language, loadedAt: Date.now() },
+        },
+        editorChangedFiles: (() => {
+          const c = { ...s.editorChangedFiles };
+          delete c[path];
+          return c;
+        })(),
+      }));
+    } catch { /* ignore */ }
+  },
+
+  dismissFileChange(path) {
+    set((s) => {
+      const c = { ...s.editorChangedFiles };
+      delete c[path];
+      return { editorChangedFiles: c };
+    });
+  },
+
+  async fetchTreeDir(dirPath) {
+    try {
+      const res = await fetch(`${API_BASE}/api/files/tree?path=${encodeURIComponent(dirPath)}`);
+      if (!res.ok) return;
+      const data = await res.json();
+      set((s) => ({
+        editorTreeCache: { ...s.editorTreeCache, [dirPath]: data.entries },
+      }));
+    } catch { /* ignore */ }
+  },
+
+  async createFile(relPath) {
+    try {
+      const res = await fetch(`${API_BASE}/api/files/create`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: relPath }),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        get().showStatus(err.error || 'Create failed');
+        return false;
+      }
+      // Refresh parent directory in tree
+      const parentDir = relPath.includes('/') ? relPath.split('/').slice(0, -1).join('/') : '';
+      await get().fetchTreeDir(parentDir);
+      get().showStatus('File created');
+      return true;
+    } catch {
+      get().showStatus('Create failed');
+      return false;
+    }
+  },
+
+  async createDir(relPath) {
+    try {
+      const res = await fetch(`${API_BASE}/api/files/mkdir`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: relPath }),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        get().showStatus(err.error || 'Create failed');
+        return false;
+      }
+      const parentDir = relPath.includes('/') ? relPath.split('/').slice(0, -1).join('/') : '';
+      await get().fetchTreeDir(parentDir);
+      get().showStatus('Folder created');
+      return true;
+    } catch {
+      get().showStatus('Create failed');
+      return false;
+    }
+  },
+
+  async deleteFile(relPath) {
+    try {
+      const res = await fetch(`${API_BASE}/api/files/delete?path=${encodeURIComponent(relPath)}`, {
+        method: 'DELETE',
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        get().showStatus(err.error || 'Delete failed');
+        return false;
+      }
+      // Close tab if open
+      if (get().editorOpenTabs.includes(relPath)) {
+        get().closeFile(relPath);
+      }
+      // Refresh parent
+      const parentDir = relPath.includes('/') ? relPath.split('/').slice(0, -1).join('/') : '';
+      await get().fetchTreeDir(parentDir);
+      // Also clear cached children if it was a dir
+      set((s) => {
+        const cache = { ...s.editorTreeCache };
+        delete cache[relPath];
+        return { editorTreeCache: cache };
+      });
+      get().showStatus('Deleted');
+      return true;
+    } catch {
+      get().showStatus('Delete failed');
+      return false;
+    }
+  },
+
+  async renameFile(oldPath, newPath) {
+    try {
+      const res = await fetch(`${API_BASE}/api/files/rename`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ oldPath, newPath }),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        get().showStatus(err.error || 'Rename failed');
+        return false;
+      }
+      // Update open tabs if renamed file was open
+      set((s) => {
+        const tabs = s.editorOpenTabs.map((t) => t === oldPath ? newPath : t);
+        const files = { ...s.editorFiles };
+        if (files[oldPath]) {
+          files[newPath] = files[oldPath];
+          delete files[oldPath];
+        }
+        const active = s.editorActiveFile === oldPath ? newPath : s.editorActiveFile;
+        return { editorOpenTabs: tabs, editorFiles: files, editorActiveFile: active };
+      });
+      // Refresh both parent dirs
+      const oldParent = oldPath.includes('/') ? oldPath.split('/').slice(0, -1).join('/') : '';
+      const newParent = newPath.includes('/') ? newPath.split('/').slice(0, -1).join('/') : '';
+      await get().fetchTreeDir(oldParent);
+      if (newParent !== oldParent) await get().fetchTreeDir(newParent);
+      get().showStatus('Renamed');
+      return true;
+    } catch {
+      get().showStatus('Rename failed');
+      return false;
+    }
+  },
+
   addCommand(text) {
     set((s) => ({
       commandHistory: [...s.commandHistory.slice(-49), text],

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

@@ -0,0 +1,149 @@
+// GROOVE GUI — File Editor View
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+import React, { useCallback } from 'react';
+import { useGrooveStore } from '../stores/groove';
+import FileTree from '../components/FileTree';
+import EditorTabs from '../components/EditorTabs';
+import CodeEditor from '../components/CodeEditor';
+import MediaViewer, { isMediaFile } from '../components/MediaViewer';
+
+export default function FileEditor() {
+  const activeFile = useGrooveStore((s) => s.editorActiveFile);
+  const files = useGrooveStore((s) => s.editorFiles);
+  const changedFiles = useGrooveStore((s) => s.editorChangedFiles);
+  const openTabs = useGrooveStore((s) => s.editorOpenTabs);
+  const updateFileContent = useGrooveStore((s) => s.updateFileContent);
+  const saveFile = useGrooveStore((s) => s.saveFile);
+  const reloadFile = useGrooveStore((s) => s.reloadFile);
+  const dismissFileChange = useGrooveStore((s) => s.dismissFileChange);
+
+  const file = activeFile ? files[activeFile] : null;
+  const isChanged = activeFile && changedFiles[activeFile];
+  const isMedia = activeFile && isMediaFile(activeFile);
+  // Media files go straight to viewer — they won't be in editorFiles
+  const isMediaTab = activeFile && openTabs.includes(activeFile) && isMedia;
+
+  const onContentChange = useCallback((content) => {
+    if (activeFile) updateFileContent(activeFile, content);
+  }, [activeFile, updateFileContent]);
+
+  const onSave = useCallback(() => {
+    if (activeFile) saveFile(activeFile);
+  }, [activeFile, saveFile]);
+
+  return (
+    <div style={styles.container}>
+      {/* Tab bar */}
+      <EditorTabs />
+
+      {/* Main content row */}
+      <div style={styles.contentRow}>
+        {/* File tree sidebar */}
+        <div style={styles.sidebar}>
+          <FileTree />
+        </div>
+
+        {/* Editor area */}
+        <div style={styles.editorArea}>
+          {/* External change banner */}
+          {isChanged && !isMedia && (
+            <div style={styles.changeBanner}>
+              <span style={styles.bannerText}>File modified externally</span>
+              <button
+                onClick={() => reloadFile(activeFile)}
+                style={styles.bannerBtn}
+              >
+                Reload
+              </button>
+              <button
+                onClick={() => dismissFileChange(activeFile)}
+                style={styles.bannerDismiss}
+              >
+                Dismiss
+              </button>
+            </div>
+          )}
+
+          {/* Media viewer */}
+          {isMediaTab ? (
+            <MediaViewer path={activeFile} />
+          ) : file ? (
+            <CodeEditor
+              key={activeFile}
+              content={file.content}
+              language={file.language}
+              onContentChange={onContentChange}
+              onSave={onSave}
+            />
+          ) : (
+            <div style={styles.emptyState}>
+              <div style={styles.emptyIcon}>{'\u2190'}</div>
+              <div style={styles.emptyText}>Select a file from the tree</div>
+              <div style={styles.emptyHint}>Cmd+S to save  |  right-click for options</div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    display: 'flex', flexDirection: 'column',
+    height: '100%', width: '100%',
+  },
+  contentRow: {
+    flex: 1, display: 'flex', overflow: 'hidden',
+  },
+  sidebar: {
+    width: 240, flexShrink: 0,
+    borderRight: '1px solid var(--border)',
+    overflow: 'hidden',
+  },
+  editorArea: {
+    flex: 1, display: 'flex', flexDirection: 'column',
+    position: 'relative', overflow: 'hidden',
+    background: 'var(--bg-base)',
+  },
+  changeBanner: {
+    position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10,
+    display: 'flex', alignItems: 'center', gap: 8,
+    padding: '6px 12px',
+    background: 'rgba(229, 192, 123, 0.15)',
+    borderBottom: '1px solid var(--amber)',
+  },
+  bannerText: {
+    fontSize: 11, color: 'var(--amber)', fontWeight: 500,
+    fontFamily: 'var(--font)', flex: 1,
+  },
+  bannerBtn: {
+    padding: '3px 10px',
+    background: 'var(--amber)', border: 'none',
+    borderRadius: 2, color: 'var(--bg-base)',
+    fontSize: 10, fontWeight: 700,
+    fontFamily: 'var(--font)', cursor: 'pointer',
+  },
+  bannerDismiss: {
+    padding: '3px 10px',
+    background: 'transparent', border: '1px solid var(--amber)',
+    borderRadius: 2, color: 'var(--amber)',
+    fontSize: 10, fontWeight: 500,
+    fontFamily: 'var(--font)', cursor: 'pointer',
+  },
+  emptyState: {
+    flex: 1, display: 'flex', flexDirection: 'column',
+    alignItems: 'center', justifyContent: 'center',
+    gap: 8,
+  },
+  emptyIcon: {
+    fontSize: 28, color: 'var(--text-muted)', opacity: 0.5,
+  },
+  emptyText: {
+    fontSize: 13, color: 'var(--text-dim)', fontWeight: 500,
+  },
+  emptyHint: {
+    fontSize: 10, color: 'var(--text-muted)',
+  },
+};