groove-dev 0.17.8 → 0.18.2

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

@@ -17,10 +17,10 @@ export const useGrooveStore = create((set, get) => ({
   // UI state — unified panel model
   activeTab: 'agents',       // 'agents' | 'stats' | 'teams' | 'approvals' | 'editor'
   detailPanel: null,          // null | { type: 'agent', agentId } | { type: 'spawn' } | { type: 'journalist' }
-  activityLog: {},
+  activityLog: (() => { try { return JSON.parse(localStorage.getItem('groove:activityLog') || '{}'); } catch { return {}; } })(),
   statusMessage: null,        // inline status text (replaces toast notifications)
   commandHistory: [],          // last 50 commands for command bar
-  chatHistory: {},              // { [agentId]: [{ from, text, timestamp, isQuery }] }
+  chatHistory: (() => { try { return JSON.parse(localStorage.getItem('groove:chatHistory') || '{}'); } catch { return {}; } })(),
   tokenTimeline: {},            // { [agentId]: [{ t: timestamp, v: tokensUsed }] }
   dashTelemetry: {},            // { [agentId]: [{ t, v, name }] } — persists across tab switches
 
@@ -88,6 +88,7 @@ export const useGrooveStore = create((set, get) => ({
             type: data.type,
           }];
           set({ activityLog: log });
+          try { localStorage.setItem('groove:activityLog', JSON.stringify(log)); } catch { /* full */ }
           break;
         }
 
@@ -98,6 +99,22 @@ export const useGrooveStore = create((set, get) => ({
             : msg.status === 'killed' ? `${name} killed`
             : `${name} crashed (exit ${msg.code})`;
           get().showStatus(text);
+
+          // Check if all agents are done and no fullstack/QC exists — nudge user
+          setTimeout(() => {
+            const agents = get().agents;
+            const alive = agents.filter((a) => a.status === 'running' || a.status === 'starting');
+            const done = agents.filter((a) => a.status === 'completed' || a.status === 'crashed');
+            const hasQC = agents.some((a) => a.role === 'fullstack' && (a.status === 'running' || a.status === 'starting'));
+            if (alive.length === 0 && done.length >= 2 && !hasQC) {
+              get().showStatus('All agents finished — no QC agent. Consider spawning a fullstack to audit and integrate.');
+            }
+          }, 2000);
+          break;
+        }
+
+        case 'phase2:spawned': {
+          get().showStatus(`QC agent ${msg.name} auto-spawned — auditing phase 1 work`);
           break;
         }
 
@@ -212,6 +229,7 @@ export const useGrooveStore = create((set, get) => ({
       history[agentId] = [...history[agentId].slice(-100), {
         from, text, timestamp: Date.now(), isQuery,
       }];
+      try { localStorage.setItem('groove:chatHistory', JSON.stringify(history)); } catch { /* full */ }
       return { chatHistory: history };
     });
   },
@@ -239,9 +257,20 @@ export const useGrooveStore = create((set, get) => ({
       set((s) => {
         const history = { ...s.chatHistory };
         history[newAgent.id] = [...oldChat];
+        try { localStorage.setItem('groove:chatHistory', JSON.stringify(history)); } catch {}
         return { chatHistory: history };
       });
     }
+    // Carry activity log (agent responses)
+    const oldLog = get().activityLog[id] || [];
+    if (oldLog.length > 0) {
+      set((s) => {
+        const log = { ...s.activityLog };
+        log[newAgent.id] = [...oldLog];
+        try { localStorage.setItem('groove:activityLog', JSON.stringify(log)); } catch {}
+        return { activityLog: log };
+      });
+    }
     // Also carry token timeline for continuity in stats
     const oldTimeline = get().tokenTimeline[id] || [];
     if (oldTimeline.length > 0) {

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

@@ -1,13 +1,27 @@
 // GROOVE GUI — Agent Tree View (React Flow)
 // FSL-1.1-Apache-2.0 — see LICENSE
 
-import React, { useMemo, useCallback, useEffect, useRef } from 'react';
-import { ReactFlow, Background, useReactFlow, ReactFlowProvider } from '@xyflow/react';
+import React, { useMemo, useCallback, useEffect, useRef, useState } from 'react';
+import { ReactFlow, Background, useReactFlow, ReactFlowProvider, applyNodeChanges } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { useGrooveStore } from '../stores/groove';
 import AgentNode from '../components/AgentNode';
 
-const nodeTypes = { agent: AgentNode };
+import { Handle, Position } from '@xyflow/react';
+
+function GrooveRootNode({ data }) {
+  return (
+    <div style={data.style}>
+      {data.label}
+      <Handle id="s-top" type="source" position={Position.Top} style={{ opacity: 0, width: 1, height: 1 }} />
+      <Handle id="s-bottom" type="source" position={Position.Bottom} style={{ opacity: 0, width: 1, height: 1 }} />
+      <Handle id="s-left" type="source" position={Position.Left} style={{ opacity: 0, width: 1, height: 1 }} />
+      <Handle id="s-right" type="source" position={Position.Right} style={{ opacity: 0, width: 1, height: 1 }} />
+    </div>
+  );
+}
+
+const nodeTypes = { agent: AgentNode, grooveRoot: GrooveRootNode };
 
 const MAX_PER_ROW = 4;
 const NODE_X_SPACING = 250;
@@ -22,92 +36,143 @@ function AgentTreeInner() {
 
   const selectedAgentId = detailPanel?.type === 'agent' ? detailPanel.agentId : null;
   const prevCountRef = useRef(0);
+  // Position map keyed by agent NAME — persisted to localStorage
+  const positionMapRef = useRef(() => {
+    try { return JSON.parse(localStorage.getItem('groove:nodePositions') || '{}'); } catch { return {}; }
+  });
+  // Lazy init the ref
+  if (typeof positionMapRef.current === 'function') positionMapRef.current = positionMapRef.current();
+  const nextSlotRef = useRef(Object.keys(positionMapRef.current).length);
+  const [flowNodes, setFlowNodes] = useState([]);
+
+  // Compute target nodes + edges from agent state
+  const { targetNodes } = useMemo(() => {
+    const allAgentNodes = agents.map((agent) => {
+      const posKey = agent.name || agent.id;
+      if (!positionMapRef.current[posKey]) {
+        const slot = nextSlotRef.current;
+        positionMapRef.current[posKey] = {
+          x: (slot % MAX_PER_ROW) * NODE_X_SPACING,
+          y: 160 + Math.floor(slot / MAX_PER_ROW) * NODE_Y_SPACING,
+        };
+        nextSlotRef.current += 1;
+      }
+      return {
+        id: agent.id,
+        type: 'agent',
+        position: positionMapRef.current[posKey],
+        data: { ...agent, selected: agent.id === selectedAgentId },
+        draggable: true,
+      };
+    });
 
-  const { nodes, edges } = useMemo(() => {
-    const running = agents.filter((a) => a.status === 'running' || a.status === 'starting');
-    const done = agents.filter((a) => a.status !== 'running' && a.status !== 'starting');
-
-    const runningNodes = running.map((agent, i) => ({
-      id: agent.id,
-      type: 'agent',
-      position: {
-        x: (i % MAX_PER_ROW) * NODE_X_SPACING,
-        y: 80 + Math.floor(i / MAX_PER_ROW) * NODE_Y_SPACING,
-      },
-      data: { ...agent, selected: agent.id === selectedAgentId },
-      draggable: true,
-    }));
-
-    const runningRows = Math.ceil(running.length / MAX_PER_ROW) || 1;
-    const doneStartY = 80 + runningRows * NODE_Y_SPACING + 50;
-
-    const doneNodes = done.map((agent, i) => ({
-      id: agent.id,
-      type: 'agent',
-      position: {
-        x: (i % MAX_PER_ROW) * NODE_X_SPACING,
-        y: doneStartY + Math.floor(i / MAX_PER_ROW) * NODE_Y_SPACING,
-      },
-      data: { ...agent, selected: agent.id === selectedAgentId },
-      draggable: true,
-    }));
-
-    const allAgentNodes = [...runningNodes, ...doneNodes];
-
-    const maxPerRow = Math.min(Math.max(running.length, done.length, 1), MAX_PER_ROW);
+    const maxPerRow = Math.min(Math.max(agents.length, 1), MAX_PER_ROW);
     const totalWidth = maxPerRow * NODE_X_SPACING;
 
-    // GROOVE root node — clean, rounded, matching
     const grooveNode = {
       id: 'groove-root',
-      type: 'default',
+      type: 'grooveRoot',
       position: { x: (totalWidth - NODE_X_SPACING) / 2 + 25, y: 0 },
-      data: { label: 'GROOVE' },
+      data: {
+        label: 'GROOVE',
+        style: {
+          background: '#282c34',
+          color: '#e6e6e6',
+          border: '1px solid #3e4451',
+          borderRadius: 24,
+          fontWeight: 600,
+          fontSize: 11,
+          letterSpacing: 6,
+          padding: '10px 36px 9px',
+          fontFamily: "'JetBrains Mono', 'SF Mono', Consolas, monospace",
+          position: 'relative',
+        },
+      },
       selectable: false,
       draggable: false,
-      style: {
-        background: '#282c34',
-        color: '#e6e6e6',
-        border: '1px solid #3e4451',
-        borderRadius: 24,
-        fontWeight: 600,
-        fontSize: 11,
-        letterSpacing: 6,
-        padding: '10px 36px 9px',
-        fontFamily: "'JetBrains Mono', 'SF Mono', Consolas, monospace",
-      },
     };
 
-    // Bezier spline edges — the brand
-    const edges = allAgentNodes.map((node) => {
-      const agent = agents.find((a) => a.id === node.id);
-      const isRunning = agent?.status === 'running';
+    return { targetNodes: [grooveNode, ...allAgentNodes] };
+  }, [agents, selectedAgentId]);
+
+  // Compute edges from current flowNodes so they update on drag
+  const edges = useMemo(() => {
+    const root = flowNodes.find((n) => n.id === 'groove-root');
+    if (!root) return [];
+    const rootW = 140, rootH = 36;
+    const rootCx = root.position.x + rootW / 2;
+    const rootCy = root.position.y + rootH / 2;
+
+    return flowNodes.filter((n) => n.id !== 'groove-root').map((node) => {
+      const nw = 210, nh = 120;
+      const ncx = node.position.x + nw / 2;
+      const ncy = node.position.y + nh / 2;
+      const dx = ncx - rootCx;
+      const dy = ncy - rootCy;
+
+      let sourceHandle, targetHandle;
+      if (Math.abs(dy) > Math.abs(dx)) {
+        if (dy > 0) { sourceHandle = 's-bottom'; targetHandle = 'top'; }
+        else { sourceHandle = 's-top'; targetHandle = 'bottom'; }
+      } else {
+        if (dx > 0) { sourceHandle = 's-right'; targetHandle = 'left'; }
+        else { sourceHandle = 's-left'; targetHandle = 'right'; }
+      }
+
+      const isRunning = node.data?.status === 'running';
       return {
         id: `groove-${node.id}`,
-        source: 'groove-root',
-        target: node.id,
-        type: 'default', // Bezier curve (spline)
-        style: {
-          stroke: isRunning ? '#5c6370' : '#2c313a',
-          strokeWidth: 1,
-        },
+        source: 'groove-root', target: node.id,
+        sourceHandle, targetHandle, type: 'default',
+        style: { stroke: isRunning ? '#5c6370' : '#2c313a', strokeWidth: 1 },
         animated: isRunning,
       };
     });
+  }, [flowNodes]);
 
-    return { nodes: [grooveNode, ...allAgentNodes], edges };
-  }, [agents, selectedAgentId]);
+  // Sync target nodes into flow state — preserve user-dragged positions
+  useEffect(() => {
+    setFlowNodes((prev) => {
+      const prevMap = new Map(prev.map((n) => [n.id, n]));
+      return targetNodes.map((target) => {
+        const existing = prevMap.get(target.id);
+        if (existing) {
+          // Keep dragged position, only update data
+          return { ...existing, data: target.data };
+        }
+        return target;
+      });
+    });
+  }, [targetNodes]);
+
+  // Handle ALL node changes including drag — this is what makes drag work
+  const onNodesChange = useCallback((changes) => {
+    setFlowNodes((nds) => {
+      const updated = applyNodeChanges(changes, nds);
+      // Save final drag positions to the ref (keyed by name for stability)
+      for (const change of changes) {
+        if (change.type === 'position' && change.position && !change.dragging) {
+          const node = updated.find((n) => n.id === change.id);
+          const name = node?.data?.name || change.id;
+          positionMapRef.current[name] = change.position;
+          try { localStorage.setItem('groove:nodePositions', JSON.stringify(positionMapRef.current)); } catch {}
+        }
+      }
+      return updated;
+    });
+  }, []);
 
   useEffect(() => {
     const currentCount = agents.length;
-    if (currentCount !== prevCountRef.current) {
-      setTimeout(() => fitView({ padding: 0.3, maxZoom: 1.4, duration: 200 }), 50);
+    const prevCount = prevCountRef.current;
+    if (prevCount === 0 && currentCount === 1) {
+      setTimeout(() => fitView({ padding: 0.3, maxZoom: 0.85, duration: 200 }), 50);
     }
     prevCountRef.current = currentCount;
   }, [agents.length, fitView]);
 
   useEffect(() => {
-    setTimeout(() => fitView({ padding: 0.3, maxZoom: 1.4, duration: 0 }), 100);
+    setTimeout(() => fitView({ padding: 0.3, maxZoom: 0.85, duration: 0 }), 100);
   }, []);
 
   const onNodeClick = useCallback((event, node) => {
@@ -121,10 +186,11 @@ function AgentTreeInner() {
 
   return (
     <ReactFlow
-      nodes={nodes}
+      nodes={flowNodes}
       edges={edges}
       nodeTypes={nodeTypes}
       onNodeClick={onNodeClick}
+      onNodesChange={onNodesChange}
       onPaneClick={onPaneClick}
       proOptions={{ hideAttribution: true }}
       nodesConnectable={false}
@@ -132,7 +198,7 @@ function AgentTreeInner() {
       minZoom={0.3}
       maxZoom={2}
       fitView
-      fitViewOptions={{ padding: 0.3, maxZoom: 1.4 }}
+      fitViewOptions={{ padding: 0.3, maxZoom: 0.85 }}
     >
       <Background color="#3e4451" gap={20} size={1} />
     </ReactFlow>

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

@@ -1,7 +1,7 @@
 // GROOVE GUI — File Editor View
 // FSL-1.1-Apache-2.0 — see LICENSE
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useGrooveStore } from '../stores/groove';
 import FileTree from '../components/FileTree';
 import EditorTabs from '../components/EditorTabs';
@@ -18,9 +18,39 @@ export default function FileEditor() {
   const saveFile = useGrooveStore((s) => s.saveFile);
   const reloadFile = useGrooveStore((s) => s.reloadFile);
   const dismissFileChange = useGrooveStore((s) => s.dismissFileChange);
+  const fetchTreeDir = useGrooveStore((s) => s.fetchTreeDir);
 
   const [terminalOpen, setTerminalOpen] = useState(false);
   const [terminalHeight, setTerminalHeight] = useState(220);
+  const [rootDir, setRootDir] = useState('');
+  const [rootInput, setRootInput] = useState('');
+  const [editingRoot, setEditingRoot] = useState(false);
+
+  // Fetch current editor root on mount
+  useEffect(() => {
+    fetch('/api/files/root').then((r) => r.json()).then((d) => {
+      setRootDir(d.root || '');
+      setRootInput(d.root || '');
+    }).catch(() => {});
+  }, []);
+
+  async function handleRootChange() {
+    if (!rootInput.trim()) return;
+    try {
+      const res = await fetch('/api/files/root', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ root: rootInput.trim() }),
+      });
+      const data = await res.json();
+      if (data.ok) {
+        setRootDir(data.root);
+        setEditingRoot(false);
+        // Clear tree cache and reload
+        useGrooveStore.setState({ editorTreeCache: {}, editorOpenTabs: [], editorActiveFile: null, editorFiles: {} });
+        fetchTreeDir('');
+      }
+    } catch { /* ignore */ }
+  }
 
   const file = activeFile ? files[activeFile] : null;
   const isChanged = activeFile && changedFiles[activeFile];
@@ -54,6 +84,29 @@ export default function FileEditor() {
 
   return (
     <div style={styles.container}>
+      {/* Directory bar */}
+      <div style={styles.dirBar}>
+        <span style={styles.dirLabel}>DIR</span>
+        {editingRoot ? (
+          <div style={{ display: 'flex', flex: 1, gap: 4 }}>
+            <input
+              style={styles.dirInput}
+              value={rootInput}
+              onChange={(e) => setRootInput(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleRootChange(); if (e.key === 'Escape') { setEditingRoot(false); setRootInput(rootDir); } }}
+              placeholder="/absolute/path/to/project"
+              autoFocus
+            />
+            <button onClick={handleRootChange} style={styles.dirOkBtn}>Open</button>
+            <button onClick={() => { setEditingRoot(false); setRootInput(rootDir); }} style={styles.dirCancelBtn}>&times;</button>
+          </div>
+        ) : (
+          <button onClick={() => setEditingRoot(true)} style={styles.dirPath} title="Click to change directory">
+            {rootDir || '...'}
+          </button>
+        )}
+      </div>
+
       {/* Tab bar */}
       <EditorTabs />
 
@@ -130,6 +183,37 @@ const styles = {
     display: 'flex', flexDirection: 'column',
     height: '100%', width: '100%',
   },
+  dirBar: {
+    display: 'flex', alignItems: 'center', gap: 8,
+    padding: '4px 12px', flexShrink: 0,
+    borderBottom: '1px solid var(--border)',
+    background: 'var(--bg-chrome)',
+  },
+  dirLabel: {
+    fontSize: 9, fontWeight: 700, color: 'var(--text-dim)',
+    letterSpacing: 1, flexShrink: 0,
+  },
+  dirPath: {
+    background: 'none', border: 'none', color: 'var(--text-primary)',
+    fontSize: 11, fontFamily: 'var(--font)', cursor: 'pointer',
+    padding: '2px 6px', borderRadius: 3, textAlign: 'left',
+    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+    flex: 1,
+  },
+  dirInput: {
+    flex: 1, background: 'var(--bg-surface)', border: '1px solid var(--accent)',
+    borderRadius: 3, padding: '2px 8px', color: 'var(--text-primary)',
+    fontSize: 11, outline: 'none', fontFamily: 'var(--font)',
+  },
+  dirOkBtn: {
+    background: 'var(--accent)', color: 'var(--bg-base)', border: 'none',
+    borderRadius: 3, padding: '2px 10px', fontSize: 10, fontWeight: 600,
+    cursor: 'pointer', fontFamily: 'var(--font)',
+  },
+  dirCancelBtn: {
+    background: 'none', border: 'none', color: 'var(--text-dim)',
+    fontSize: 14, cursor: 'pointer', padding: '0 4px',
+  },
   contentRow: {
     flex: 1, display: 'flex', overflow: 'hidden',
   },