groove-dev 0.8.0

package/packages/gui/src/components/TeamSelector.jsx

@@ -0,0 +1,162 @@
+// GROOVE GUI — Teams View (full-area, rendered in main content)
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+import React, { useState, useEffect } from 'react';
+import { useGrooveStore } from '../stores/groove';
+
+export default function TeamSelector() {
+  const [teams, setTeams] = useState([]);
+  const [activeTeam, setActiveTeam] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [saveName, setSaveName] = useState('');
+  const showStatus = useGrooveStore((s) => s.showStatus);
+
+  useEffect(() => {
+    fetchTeams();
+    const interval = setInterval(fetchTeams, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  async function fetchTeams() {
+    try {
+      const res = await fetch('/api/teams');
+      const data = await res.json();
+      setTeams(data.teams);
+      setActiveTeam(data.activeTeam);
+    } catch { /* ignore */ }
+  }
+
+  async function handleLoad(name) {
+    try {
+      await fetch(`/api/teams/${encodeURIComponent(name)}/load`, { method: 'POST' });
+      showStatus(`loaded team "${name}"`);
+      fetchTeams();
+    } catch {
+      showStatus('failed to load team');
+    }
+  }
+
+  async function handleSave() {
+    if (!saveName.trim()) return;
+    try {
+      await fetch('/api/teams', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: saveName.trim() }),
+      });
+      showStatus(`saved team "${saveName}"`);
+      setSaveName('');
+      setSaving(false);
+      fetchTeams();
+    } catch {
+      showStatus('failed to save team');
+    }
+  }
+
+  async function handleDelete(name) {
+    await fetch(`/api/teams/${encodeURIComponent(name)}`, { method: 'DELETE' });
+    showStatus(`deleted "${name}"`);
+    fetchTeams();
+  }
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.title}>SAVED TEAMS</div>
+
+      {teams.length === 0 ? (
+        <div style={styles.empty}>No saved teams</div>
+      ) : (
+        teams.map((t) => (
+          <div
+            key={t.name}
+            style={{
+              ...styles.item,
+              background: t.name === activeTeam ? 'var(--bg-hover)' : 'transparent',
+            }}
+          >
+            <div style={{ flex: 1 }}>
+              <div style={styles.teamName}>{'>'} {t.name}</div>
+              <div style={styles.teamMeta}>{t.agents} agents</div>
+            </div>
+            <div style={{ display: 'flex', gap: 8 }}>
+              <button onClick={() => handleLoad(t.name)} style={styles.loadBtn}>Load</button>
+              <button onClick={() => handleDelete(t.name)} style={styles.deleteBtn}>x</button>
+            </div>
+          </div>
+        ))
+      )}
+
+      <div style={styles.divider} />
+
+      {saving ? (
+        <div style={styles.saveRow}>
+          <input
+            style={styles.saveInput}
+            placeholder="Team name..."
+            value={saveName}
+            onChange={(e) => setSaveName(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleSave()}
+            autoFocus
+          />
+          <button onClick={handleSave} style={styles.saveBtn}>Save</button>
+          <button onClick={() => setSaving(false)} style={styles.cancelBtn}>x</button>
+        </div>
+      ) : (
+        <button onClick={() => setSaving(true)} style={styles.saveTeamBtn}>
+          Save Current as Team
+        </button>
+      )}
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    padding: 24, maxWidth: 600, margin: '0 auto',
+  },
+  title: {
+    fontSize: 11, fontWeight: 600, color: 'var(--text-dim)',
+    textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 16,
+  },
+  item: {
+    padding: '10px 12px',
+    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+    borderBottom: '1px solid var(--border)',
+  },
+  teamName: { fontSize: 12, color: 'var(--text-bright)', fontWeight: 600 },
+  teamMeta: { fontSize: 11, color: 'var(--text-dim)', marginTop: 2 },
+  loadBtn: {
+    background: 'transparent', border: 'none',
+    color: 'var(--accent)', fontSize: 11, cursor: 'pointer',
+    fontFamily: 'var(--font)', fontWeight: 600,
+  },
+  deleteBtn: {
+    background: 'none', border: 'none', color: 'var(--text-dim)',
+    fontSize: 12, cursor: 'pointer', fontFamily: 'var(--font)',
+  },
+  empty: { padding: 20, color: 'var(--text-dim)', fontSize: 12, textAlign: 'center' },
+  divider: { borderTop: '1px solid var(--border)', margin: '12px 0' },
+  saveTeamBtn: {
+    background: 'transparent', border: '1px solid var(--accent)',
+    borderRadius: 2, padding: '6px 14px',
+    color: 'var(--accent)', fontSize: 12, cursor: 'pointer',
+    fontFamily: 'var(--font)', fontWeight: 600,
+  },
+  saveRow: {
+    display: 'flex', gap: 6, alignItems: 'center',
+  },
+  saveInput: {
+    flex: 1, background: 'var(--bg-surface)', border: '1px solid var(--border)',
+    borderRadius: 2, padding: '6px 8px', color: 'var(--text-primary)', fontSize: 12,
+    fontFamily: 'var(--font)', outline: 'none',
+  },
+  saveBtn: {
+    padding: '6px 12px', background: 'transparent', border: '1px solid var(--accent)',
+    borderRadius: 2, color: 'var(--accent)', fontSize: 12, cursor: 'pointer',
+    fontFamily: 'var(--font)',
+  },
+  cancelBtn: {
+    background: 'none', border: 'none', color: 'var(--text-dim)',
+    fontSize: 12, cursor: 'pointer', fontFamily: 'var(--font)',
+  },
+};

package/packages/gui/src/main.jsx

@@ -0,0 +1,9 @@
+// GROOVE GUI — Entry Point
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import './theme.css';
+import App from './App';
+
+createRoot(document.getElementById('root')).render(<App />);

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

@@ -0,0 +1,247 @@
+// GROOVE GUI — Zustand Store + WebSocket
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+import { create } from 'zustand';
+
+const WS_URL = `ws://${window.location.hostname}:${window.location.port || 31415}`;
+const API_BASE = '';
+
+export const useGrooveStore = create((set, get) => ({
+  // Connection state
+  agents: [],
+  connected: false,
+  ws: null,
+
+  // UI state — unified panel model
+  activeTab: 'agents',       // 'agents' | 'stats' | 'teams' | 'approvals'
+  detailPanel: null,          // null | { type: 'agent', agentId } | { type: 'spawn' } | { type: 'journalist' }
+  activityLog: {},
+  statusMessage: null,        // inline status text (replaces toast notifications)
+  commandHistory: [],          // last 50 commands for command bar
+  chatHistory: {},              // { [agentId]: [{ from, text, timestamp, isQuery }] }
+  tokenTimeline: {},            // { [agentId]: [{ t: timestamp, v: tokensUsed }] }
+  dashTelemetry: {},            // { [agentId]: [{ t, v, name }] } — persists across tab switches
+
+  // Connection
+  connect() {
+    if (get().ws) return;
+
+    const ws = new WebSocket(WS_URL);
+
+    ws.onopen = () => set({ connected: true, ws });
+
+    ws.onmessage = (event) => {
+      const msg = JSON.parse(event.data);
+
+      switch (msg.type) {
+        case 'state': {
+          // Track token timeline for live charts
+          const timeline = { ...get().tokenTimeline };
+          const now = Date.now();
+          for (const agent of msg.data) {
+            if (!timeline[agent.id]) timeline[agent.id] = [];
+            const arr = timeline[agent.id];
+            const last = arr[arr.length - 1];
+            // Only record if tokens changed or every 5s for heartbeat
+            if (!last || agent.tokensUsed !== last.v || now - last.t > 5000) {
+              arr.push({ t: now, v: agent.tokensUsed || 0 });
+              // Keep last 200 points
+              if (arr.length > 200) timeline[agent.id] = arr.slice(-200);
+            }
+          }
+          set({ agents: msg.data, tokenTimeline: timeline });
+          break;
+        }
+
+        case 'agent:output': {
+          const { agentId, data } = msg;
+          const log = { ...get().activityLog };
+          if (!log[agentId]) log[agentId] = [];
+          log[agentId] = [...log[agentId].slice(-200), {
+            timestamp: Date.now(),
+            text: typeof data.data === 'string' ? data.data : JSON.stringify(data.data),
+            type: data.type,
+          }];
+          set({ activityLog: log });
+          break;
+        }
+
+        case 'agent:exit': {
+          const agent = get().agents.find((a) => a.id === msg.agentId);
+          const name = agent?.name || msg.agentId;
+          const text = msg.status === 'completed' ? `${name} completed`
+            : msg.status === 'killed' ? `${name} killed`
+            : `${name} crashed (exit ${msg.code})`;
+          get().showStatus(text);
+          break;
+        }
+
+        case 'rotation:start':
+          get().showStatus(`rotating ${msg.agentName}...`);
+          break;
+
+        case 'rotation:complete': {
+          get().showStatus(`rotated ${msg.agentName} (saved ${msg.tokensSaved} tokens)`);
+          const panel = get().detailPanel;
+          if (panel?.type === 'agent' && panel.agentId === msg.oldAgentId && msg.newAgentId) {
+            // Copy chat history and timeline BEFORE switching to new agent
+            // (this fires before the HTTP response in instructAgent, preventing empty chat)
+            set((s) => {
+              const chatHistory = { ...s.chatHistory };
+              const tokenTimeline = { ...s.tokenTimeline };
+              const oldChat = chatHistory[msg.oldAgentId] || [];
+              const oldTimeline = tokenTimeline[msg.oldAgentId] || [];
+              if (oldChat.length > 0) chatHistory[msg.newAgentId] = [...oldChat];
+              if (oldTimeline.length > 0) tokenTimeline[msg.newAgentId] = [...oldTimeline];
+              return {
+                chatHistory,
+                tokenTimeline,
+                detailPanel: { type: 'agent', agentId: msg.newAgentId },
+              };
+            });
+          }
+          break;
+        }
+
+        case 'rotation:failed':
+          get().showStatus(`rotation failed: ${msg.error}`);
+          break;
+
+        case 'journalist:cycle':
+          break; // Journalist feed polls separately
+      }
+    };
+
+    ws.onclose = () => {
+      set({ connected: false, ws: null });
+      setTimeout(() => get().connect(), 2000);
+    };
+
+    ws.onerror = () => ws.close();
+  },
+
+  // Agent actions
+  async spawnAgent(config) {
+    const res = await fetch(`${API_BASE}/api/agents`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(config),
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.error || 'Spawn failed');
+    }
+    const agent = await res.json();
+    get().showStatus(`spawned ${agent.name}`);
+    return agent;
+  },
+
+  async killAgent(id, purge = false) {
+    await fetch(`${API_BASE}/api/agents/${id}?purge=${purge}`, { method: 'DELETE' });
+  },
+
+  async rotateAgent(id) {
+    const res = await fetch(`${API_BASE}/api/agents/${id}/rotate`, { method: 'POST' });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.error || 'Rotation failed');
+    }
+    return res.json();
+  },
+
+  async fetchProviders() {
+    const res = await fetch(`${API_BASE}/api/providers`);
+    return res.json();
+  },
+
+  // UI actions — unified panel control
+  setActiveTab(tab) { set({ activeTab: tab }); },
+
+  openDetail(descriptor) { set({ detailPanel: descriptor }); },
+  closeDetail() { set({ detailPanel: null }); },
+
+  selectAgent(id) { set({ detailPanel: { type: 'agent', agentId: id } }); },
+  clearSelection() { set({ detailPanel: null }); },
+
+  showStatus(text) {
+    set({ statusMessage: text });
+    setTimeout(() => {
+      if (get().statusMessage === text) set({ statusMessage: null });
+    }, 4000);
+  },
+
+  // Agent interaction
+  addChatMessage(agentId, from, text, isQuery = false) {
+    set((s) => {
+      const history = { ...s.chatHistory };
+      if (!history[agentId]) history[agentId] = [];
+      history[agentId] = [...history[agentId].slice(-100), {
+        from, text, timestamp: Date.now(), isQuery,
+      }];
+      return { chatHistory: history };
+    });
+  },
+
+  async instructAgent(id, message) {
+    const agent = get().agents.find((a) => a.id === id);
+    const isAlive = agent && (agent.status === 'running' || agent.status === 'starting');
+
+    get().addChatMessage(id, 'user', message, false);
+    get().addChatMessage(id, 'system', isAlive ? 'sending instruction...' : 'continuing conversation...');
+    const res = await fetch(`${API_BASE}/api/agents/${id}/instruct`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message }),
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      get().addChatMessage(id, 'system', `failed: ${err.error || 'unknown error'}`);
+      throw new Error(err.error || 'Instruction failed');
+    }
+    const newAgent = await res.json();
+    // Carry chat history from old agent to new (same conversation, new ID)
+    const oldChat = get().chatHistory[id] || [];
+    if (oldChat.length > 0) {
+      set((s) => {
+        const history = { ...s.chatHistory };
+        history[newAgent.id] = [...oldChat];
+        return { chatHistory: history };
+      });
+    }
+    // Also carry token timeline for continuity in stats
+    const oldTimeline = get().tokenTimeline[id] || [];
+    if (oldTimeline.length > 0) {
+      set((s) => {
+        const timeline = { ...s.tokenTimeline };
+        timeline[newAgent.id] = [...oldTimeline];
+        return { tokenTimeline: timeline };
+      });
+    }
+    get().selectAgent(newAgent.id);
+    get().addChatMessage(newAgent.id, 'system', 'agent resumed with context');
+    return newAgent;
+  },
+
+  async queryAgent(id, message) {
+    get().addChatMessage(id, 'user', message, true);
+    const res = await fetch(`${API_BASE}/api/agents/${id}/query`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message }),
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      get().addChatMessage(id, 'system', `query failed: ${err.error || 'unknown error'}`);
+      throw new Error(err.error || 'Query failed');
+    }
+    const data = await res.json();
+    get().addChatMessage(id, 'agent', data.response);
+    return data;
+  },
+
+  addCommand(text) {
+    set((s) => ({
+      commandHistory: [...s.commandHistory.slice(-49), text],
+    }));
+  },
+}));

package/packages/gui/src/theme.css

@@ -0,0 +1,67 @@
+/* GROOVE GUI Theme — One Dark Pro
+   FSL-1.1-Apache-2.0 — see LICENSE */
+
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');
+
+:root {
+  /* Backgrounds */
+  --bg-base: #24282f;
+  --bg-chrome: #282c34;
+  --bg-surface: #2c313a;
+  --bg-hover: #333842;
+  --bg-active: #3a3f4b;
+
+  /* Text */
+  --text-primary: #abb2bf;
+  --text-bright: #e6e6e6;
+  --text-dim: #5c6370;
+  --text-muted: #3e4451;
+  --border: #4b5263;
+
+  /* Status */
+  --accent: #33afbc;
+  --green: #4ae168;
+  --amber: #e5c07b;
+  --red: #e06c75;
+  --purple: #c678dd;
+  --blue: #61afef;
+
+  /* Typography */
+  --font: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: var(--font);
+  background: var(--bg-base);
+  color: var(--text-primary);
+  font-size: 12px;
+  -webkit-font-smoothing: antialiased;
+}
+
+#root { width: 100vw; height: 100vh; }
+
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 2px; }
+::selection { background: rgba(51, 175, 188, 0.25); }
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes neuralFlow {
+  0% { transform: translateX(-50%); }
+  100% { transform: translateX(0%); }
+}
+
+/* Thin animated edges for React Flow */
+.react-flow__edge-path {
+  stroke-width: 1 !important;
+}
+.react-flow__edge.animated path {
+  stroke-dasharray: 6 4 !important;
+  stroke-width: 1 !important;
+}

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

@@ -0,0 +1,148 @@
+// 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 '@xyflow/react/dist/style.css';
+import { useGrooveStore } from '../stores/groove';
+import AgentNode from '../components/AgentNode';
+
+const nodeTypes = { agent: AgentNode };
+
+const MAX_PER_ROW = 4;
+const NODE_X_SPACING = 220;
+const NODE_Y_SPACING = 140;
+
+function AgentTreeInner() {
+  const agents = useGrooveStore((s) => s.agents);
+  const detailPanel = useGrooveStore((s) => s.detailPanel);
+  const selectAgent = useGrooveStore((s) => s.selectAgent);
+  const clearSelection = useGrooveStore((s) => s.clearSelection);
+  const { fitView } = useReactFlow();
+
+  const selectedAgentId = detailPanel?.type === 'agent' ? detailPanel.agentId : null;
+  const prevCountRef = useRef(0);
+
+  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 totalWidth = maxPerRow * NODE_X_SPACING;
+
+    // GROOVE root node — clean, rounded, matching
+    const grooveNode = {
+      id: 'groove-root',
+      type: 'default',
+      position: { x: (totalWidth - NODE_X_SPACING) / 2 + 25, y: 0 },
+      data: { label: 'GROOVE' },
+      selectable: false,
+      draggable: false,
+      style: {
+        background: '#282c34',
+        color: '#33afbc',
+        border: '1px solid #33afbc',
+        borderRadius: 8,
+        fontWeight: 800,
+        fontSize: 10,
+        letterSpacing: 4,
+        padding: '8px 20px 7px',
+        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 {
+        id: `groove-${node.id}`,
+        source: 'groove-root',
+        target: node.id,
+        type: 'default', // Bezier curve (spline)
+        style: {
+          stroke: isRunning ? '#5c6370' : '#2c313a',
+          strokeWidth: 1,
+        },
+        animated: isRunning,
+      };
+    });
+
+    return { nodes: [grooveNode, ...allAgentNodes], edges };
+  }, [agents, selectedAgentId]);
+
+  useEffect(() => {
+    const currentCount = agents.length;
+    if (currentCount !== prevCountRef.current) {
+      setTimeout(() => fitView({ padding: 0.3, maxZoom: 1.4, duration: 200 }), 50);
+    }
+    prevCountRef.current = currentCount;
+  }, [agents.length, fitView]);
+
+  useEffect(() => {
+    setTimeout(() => fitView({ padding: 0.3, maxZoom: 1.4, duration: 0 }), 100);
+  }, []);
+
+  const onNodeClick = useCallback((event, node) => {
+    if (node.id === 'groove-root') return;
+    selectAgent(node.id);
+  }, [selectAgent]);
+
+  const onPaneClick = useCallback(() => {
+    clearSelection();
+  }, [clearSelection]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      nodeTypes={nodeTypes}
+      onNodeClick={onNodeClick}
+      onPaneClick={onPaneClick}
+      proOptions={{ hideAttribution: true }}
+      nodesConnectable={false}
+      elementsSelectable={true}
+      minZoom={0.3}
+      maxZoom={2}
+      fitView
+      fitViewOptions={{ padding: 0.3, maxZoom: 1.4 }}
+    >
+      <Background color="#3e4451" gap={20} size={1} />
+    </ReactFlow>
+  );
+}
+
+export default function AgentTree() {
+  return (
+    <ReactFlowProvider>
+      <AgentTreeInner />
+    </ReactFlowProvider>
+  );
+}