groove-dev 0.8.0

package/packages/gui/dist/assets/index-CPzm9ZE9.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap";:root{--bg-base: #24282f;--bg-chrome: #282c34;--bg-surface: #2c313a;--bg-hover: #333842;--bg-active: #3a3f4b;--text-primary: #abb2bf;--text-bright: #e6e6e6;--text-dim: #5c6370;--text-muted: #3e4451;--border: #4b5263;--accent: #33afbc;--green: #4ae168;--amber: #e5c07b;--red: #e06c75;--purple: #c678dd;--blue: #61afef;--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:#33afbc40}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes neuralFlow{0%{transform:translate(-50%)}to{transform:translate(0)}}.react-flow__edge-path{stroke-width:1!important}.react-flow__edge.animated path{stroke-dasharray:6 4!important;stroke-width:1!important}.react-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgba(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.react-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgba(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #777;--xy-background-pattern-lines-color-default: #777;--xy-background-pattern-cross-color-default: #777;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.react-flow__background{background-color:var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__arrowhead polyline{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default))}.react-flow__arrowhead polyline.arrowclosed{fill:var(--xy-edge-stroke, var(--xy-edge-stroke-default))}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}svg.react-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__pane.selection .react-flow__panel{pointer-events:none}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.top.center,.react-flow__panel.bottom.center{left:50%;transform:translate(-15px) translate(-50%)}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.left.center,.react-flow__panel.right.center{top:50%;transform:translateY(-15px) translateY(-50%)}.react-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:0;top:0}.react-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.react-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.react-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.react-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.react-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.react-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__controls.horizontal .react-flow__controls-button{border-bottom:none;border-right:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) )}.react-flow__controls.horizontal .react-flow__controls-button:last-child{border-right:none}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:5px;height:5px;border:1px solid #fff;border-radius:1px;background-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));translate:-50% -50%}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color, var(--xy-edge-label-color-default))}

package/packages/gui/dist/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GROOVE</title>
+    <script type="module" crossorigin src="/assets/index-BO95Rm1F.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CPzm9ZE9.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/packages/gui/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GROOVE</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/packages/gui/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@groove-dev/gui",
+  "version": "0.8.0",
+  "description": "GROOVE GUI — visual agent control plane",
+  "license": "FSL-1.1-Apache-2.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.0",
+    "@xyflow/react": "^12.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.0",
+    "vite": "^6.0.0"
+  }
+}

package/packages/gui/src/App.jsx

@@ -0,0 +1,215 @@
+// GROOVE GUI — App Root
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+import React, { useEffect } from 'react';
+import { useGrooveStore } from './stores/groove';
+import AgentTree from './views/AgentTree';
+import AgentPanel from './components/AgentPanel';
+import EmptyState from './components/EmptyState';
+import SpawnPanel from './components/SpawnPanel';
+import JournalistFeed from './views/JournalistFeed';
+import TeamSelector from './components/TeamSelector';
+import CommandCenter from './views/CommandCenter';
+import ApprovalQueue from './components/ApprovalQueue';
+
+const TABS = [
+  { id: 'agents', label: 'Agents' },
+  { id: 'stats', label: 'Stats' },
+  { id: 'teams', label: 'Teams' },
+  { id: 'approvals', label: 'Approvals' },
+];
+
+export default function App() {
+  const agents = useGrooveStore((s) => s.agents);
+  const connected = useGrooveStore((s) => s.connected);
+  const activeTab = useGrooveStore((s) => s.activeTab);
+  const detailPanel = useGrooveStore((s) => s.detailPanel);
+  const statusMessage = useGrooveStore((s) => s.statusMessage);
+  const connect = useGrooveStore((s) => s.connect);
+  const setActiveTab = useGrooveStore((s) => s.setActiveTab);
+  const openDetail = useGrooveStore((s) => s.openDetail);
+  const closeDetail = useGrooveStore((s) => s.closeDetail);
+
+  useEffect(() => { connect(); }, [connect]);
+
+  const runningCount = agents.filter((a) => a.status === 'running').length;
+  const hasAgents = agents.length > 0;
+
+  return (
+    <div style={styles.root}>
+      {/* Header */}
+      <header style={styles.header}>
+        <div style={styles.headerLeft}>
+          <img src="/groove-logo-short.png" alt="GROOVE" style={{ height: 18, marginTop: 3, opacity: 0.85 }} />
+        </div>
+
+
+        <div style={styles.headerCenter}>
+          {connected && TABS.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              style={{
+                ...styles.tabBtn,
+                color: activeTab === tab.id ? 'var(--text-bright)' : 'var(--text-primary)',
+                borderBottom: activeTab === tab.id ? '2px solid var(--accent)' : '2px solid transparent',
+                background: activeTab === tab.id ? 'var(--bg-active)' : 'transparent',
+              }}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        <div style={styles.headerRight}>
+          {statusMessage && (
+            <span style={styles.statusText}>{statusMessage}</span>
+          )}
+          <span style={styles.agentCount}>
+            {runningCount > 0
+              ? `${runningCount} running`
+              : agents.length > 0
+                ? `${agents.length} agent${agents.length !== 1 ? 's' : ''}`
+                : ''}
+          </span>
+          {connected && (
+            <>
+              <button
+                onClick={() => detailPanel?.type === 'journalist' ? closeDetail() : openDetail({ type: 'journalist' })}
+                style={{
+                  ...styles.tabBtn,
+                  color: detailPanel?.type === 'journalist' ? 'var(--text-bright)' : 'var(--text-primary)',
+                  borderBottom: detailPanel?.type === 'journalist' ? '2px solid var(--purple)' : '2px solid transparent',
+                }}
+              >
+                Journalist
+              </button>
+              <button
+                onClick={() => openDetail({ type: 'spawn' })}
+                style={styles.spawnBtn}
+              >
+                + Spawn
+              </button>
+            </>
+          )}
+        </div>
+      </header>
+
+      {/* Status pill — bottom left */}
+      <div style={{
+        position: 'fixed', bottom: 10, left: 12, zIndex: 50,
+        display: 'flex', alignItems: 'center', gap: 5,
+      }}>
+        <div style={{
+          width: 5, height: 5, borderRadius: '50%',
+          background: connected ? 'var(--green)' : 'var(--red)',
+          animation: 'pulse 2s infinite',
+        }} />
+        <span style={{
+          fontSize: 9, fontWeight: 600, letterSpacing: 0.8,
+          color: connected ? 'var(--green)' : 'var(--red)',
+          textTransform: 'uppercase',
+          fontFamily: 'var(--font)',
+          animation: 'pulse 3s infinite',
+        }}>
+          {connected ? 'connected' : 'offline'}
+        </span>
+      </div>
+
+      {/* Main row */}
+      <div style={styles.mainRow}>
+        <main style={styles.content}>
+          {activeTab === 'agents' && (
+            !hasAgents ? <EmptyState /> : <AgentTree />
+          )}
+          {activeTab === 'stats' && <CommandCenter />}
+          {activeTab === 'teams' && <TeamSelector />}
+          {activeTab === 'approvals' && <ApprovalQueue />}
+        </main>
+
+        {/* Detail panel — in document flow */}
+        {detailPanel && (
+          <aside style={{
+            ...styles.detailPanel,
+            width: detailPanel.type === 'agent' ? '45%' : 320,
+          }}>
+            <button onClick={closeDetail} style={styles.closeBtn}>x</button>
+            {detailPanel.type === 'agent' && <AgentPanel />}
+            {detailPanel.type === 'spawn' && <SpawnPanel />}
+            {detailPanel.type === 'journalist' && <JournalistFeed />}
+          </aside>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  root: {
+    width: '100%', height: '100%',
+    display: 'flex', flexDirection: 'column',
+    background: 'var(--bg-base)', color: 'var(--text-primary)',
+  },
+  header: {
+    height: 40,
+    padding: '0 16px',
+    borderBottom: '1px solid var(--border)',
+    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+    background: 'var(--bg-chrome)',
+    flexShrink: 0,
+    position: 'relative',
+  },
+  headerLeft: {
+    display: 'flex', alignItems: 'center', gap: 8,
+  },
+  logo: {
+    fontSize: 13, fontWeight: 600, letterSpacing: 1.5,
+    color: 'var(--text-bright)',
+  },
+  headerCenter: {
+    display: 'flex', alignItems: 'center', gap: 0,
+  },
+  headerRight: {
+    display: 'flex', alignItems: 'center', gap: 10,
+  },
+  tabBtn: {
+    padding: '10px 14px',
+    background: 'transparent',
+    border: 'none',
+    borderBottom: '2px solid transparent',
+    fontSize: 12, fontWeight: 500,
+    fontFamily: 'var(--font)',
+    cursor: 'pointer',
+    transition: 'color 0.1s',
+  },
+  spawnBtn: {
+    padding: '4px 12px',
+    background: 'transparent',
+    border: '1px solid var(--accent)',
+    borderRadius: 2,
+    color: 'var(--accent)', fontSize: 12, fontWeight: 600,
+    fontFamily: 'var(--font)',
+    cursor: 'pointer',
+  },
+  agentCount: { fontSize: 11, color: 'var(--text-dim)' },
+  statusText: { fontSize: 11, color: 'var(--text-dim)', fontStyle: 'italic' },
+  mainRow: {
+    flex: 1, display: 'flex', overflow: 'hidden',
+  },
+  content: {
+    flex: 1, overflow: 'hidden', position: 'relative',
+  },
+  detailPanel: {
+    width: 320, flexShrink: 0,
+    background: 'var(--bg-chrome)',
+    borderLeft: '1px solid var(--border)',
+    padding: 16, overflowY: 'auto',
+    position: 'relative',
+  },
+  closeBtn: {
+    position: 'absolute', top: 8, right: 10,
+    background: 'none', border: 'none', color: 'var(--text-dim)',
+    fontSize: 14, cursor: 'pointer', fontFamily: 'var(--font)',
+    padding: '2px 6px',
+  },
+};

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

@@ -0,0 +1,347 @@
+// GROOVE GUI — Agent Actions Tab
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+import React, { useState, useEffect } from 'react';
+import { useGrooveStore } from '../stores/groove';
+
+export default function AgentActions({ agent }) {
+  const killAgent = useGrooveStore((s) => s.killAgent);
+  const rotateAgent = useGrooveStore((s) => s.rotateAgent);
+  const spawnAgent = useGrooveStore((s) => s.spawnAgent);
+  const instructAgent = useGrooveStore((s) => s.instructAgent);
+  const showStatus = useGrooveStore((s) => s.showStatus);
+  const closeDetail = useGrooveStore((s) => s.closeDetail);
+
+  const [confirmKill, setConfirmKill] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [editPrompt, setEditPrompt] = useState('');
+  const [editingPrompt, setEditingPrompt] = useState(false);
+  const [selectedModel, setSelectedModel] = useState(agent.model || '');
+  const [providerList, setProviderList] = useState([]);
+
+  const isAlive = agent.status === 'running' || agent.status === 'starting';
+
+  useEffect(() => {
+    fetch('/api/providers').then(r => r.json()).then(setProviderList).catch(() => {});
+  }, []);
+
+  const currentProvider = providerList.find((p) => p.id === agent.provider);
+  const models = currentProvider?.models || [];
+
+  async function handleRotate() {
+    try {
+      await rotateAgent(agent.id);
+    } catch (err) {
+      showStatus(`rotate failed: ${err.message}`);
+    }
+  }
+
+  async function handleKill() {
+    if (!confirmKill) {
+      setConfirmKill(true);
+      setTimeout(() => setConfirmKill(false), 3000);
+      return;
+    }
+    try {
+      await killAgent(agent.id);
+      showStatus(`${agent.name} killed`);
+    } catch (err) {
+      showStatus(`kill failed: ${err.message}`);
+    }
+    setConfirmKill(false);
+  }
+
+  async function handleDelete() {
+    if (!confirmDelete) {
+      setConfirmDelete(true);
+      setTimeout(() => setConfirmDelete(false), 3000);
+      return;
+    }
+    try {
+      await killAgent(agent.id, true);
+      closeDetail();
+      showStatus(`${agent.name} deleted`);
+    } catch (err) {
+      showStatus(`delete failed: ${err.message}`);
+    }
+    setConfirmDelete(false);
+  }
+
+  async function handleClone() {
+    try {
+      const newAgent = await spawnAgent({
+        role: agent.role,
+        scope: agent.scope,
+        prompt: agent.prompt,
+        provider: agent.provider,
+        model: agent.model,
+      });
+      showStatus(`cloned as ${newAgent.name}`);
+    } catch (err) {
+      showStatus(`clone failed: ${err.message}`);
+    }
+  }
+
+  async function handleModelChange(newModel) {
+    setSelectedModel(newModel);
+    try {
+      // Model change requires rotation to take effect
+      await fetch(`/api/agents/${agent.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ model: newModel || null }),
+      });
+      showStatus(`model set to ${newModel || 'default'} (takes effect on next rotation)`);
+    } catch (err) {
+      showStatus(`model change failed: ${err.message}`);
+    }
+  }
+
+  async function handlePromptSave() {
+    if (!editPrompt.trim()) return;
+    try {
+      // Send as an instruction — rotates agent with new prompt
+      await instructAgent(agent.id, editPrompt.trim());
+      setEditingPrompt(false);
+      setEditPrompt('');
+    } catch (err) {
+      showStatus(`prompt update failed: ${err.message}`);
+    }
+  }
+
+  async function handleRestart() {
+    try {
+      // Purge old dead entry first so name can be reused
+      await killAgent(agent.id, true);
+      const newAgent = await spawnAgent({
+        role: agent.role,
+        scope: agent.scope,
+        prompt: agent.prompt,
+        provider: agent.provider,
+        model: agent.model,
+      });
+      showStatus(`restarted as ${newAgent.name}`);
+    } catch (err) {
+      showStatus(`restart failed: ${err.message}`);
+    }
+  }
+
+  return (
+    <div style={styles.container}>
+      {/* Lifecycle controls */}
+      <div style={styles.sectionLabel}>LIFECYCLE</div>
+
+      <div style={styles.btnGrid}>
+        {isAlive && (
+          <>
+            <ActionButton
+              icon="~"
+              label="Rotate"
+              desc="Fresh context + handoff brief"
+              onClick={handleRotate}
+              color="var(--accent)"
+            />
+            <ActionButton
+              icon="||"
+              label={confirmKill ? 'Confirm Kill' : 'Stop'}
+              desc="Stop the agent process"
+              onClick={handleKill}
+              color={confirmKill ? 'var(--red)' : 'var(--amber)'}
+            />
+          </>
+        )}
+        {!isAlive && (
+          <ActionButton
+            icon=">"
+            label="Restart"
+            desc="Spawn fresh with same config"
+            onClick={handleRestart}
+            color="var(--green)"
+          />
+        )}
+        <ActionButton
+          icon="+"
+          label="Clone"
+          desc="Spawn duplicate agent"
+          onClick={handleClone}
+          color="var(--accent)"
+        />
+        <ActionButton
+          icon="x"
+          label={confirmDelete ? 'Confirm Delete' : 'Delete'}
+          desc="Kill and remove permanently"
+          onClick={handleDelete}
+          color={confirmDelete ? 'var(--red)' : 'var(--text-dim)'}
+        />
+      </div>
+
+      {/* Model selector */}
+      <div style={{ ...styles.sectionLabel, marginTop: 20 }}>MODEL</div>
+      <select
+        style={styles.select}
+        value={selectedModel}
+        onChange={(e) => handleModelChange(e.target.value)}
+      >
+        <option value="">Default</option>
+        {models.map((m) => (
+          <option key={m.id} value={m.id}>
+            {m.name} ({m.tier})
+          </option>
+        ))}
+      </select>
+      <div style={styles.fieldHint}>Changes take effect on next rotation</div>
+
+      {/* Prompt modification */}
+      <div style={{ ...styles.sectionLabel, marginTop: 20 }}>PROMPT</div>
+      {agent.prompt && !editingPrompt && (
+        <div style={styles.currentPrompt}>
+          <div style={styles.promptText}>{agent.prompt}</div>
+          {isAlive && (
+            <button
+              onClick={() => { setEditingPrompt(true); setEditPrompt(''); }}
+              style={styles.editBtn}
+            >
+              Send New Instruction
+            </button>
+          )}
+        </div>
+      )}
+      {!agent.prompt && !editingPrompt && (
+        <div style={styles.noPrompt}>No prompt set</div>
+      )}
+      {editingPrompt && (
+        <div>
+          <textarea
+            style={styles.textarea}
+            value={editPrompt}
+            onChange={(e) => setEditPrompt(e.target.value)}
+            placeholder="New instruction for this agent..."
+            rows={4}
+            autoFocus
+          />
+          <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
+            <button onClick={handlePromptSave} style={styles.saveBtn} disabled={!editPrompt.trim()}>
+              Send (rotates agent)
+            </button>
+            <button onClick={() => setEditingPrompt(false)} style={styles.cancelBtn}>
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Current config */}
+      <div style={{ ...styles.sectionLabel, marginTop: 20 }}>CONFIGURATION</div>
+      <ConfigRow label="ID" value={agent.id} />
+      <ConfigRow label="Role" value={agent.role} />
+      <ConfigRow label="Provider" value={agent.provider} />
+      <ConfigRow label="Model" value={agent.model || 'default'} />
+      <ConfigRow label="Scope" value={(agent.scope || []).join(', ') || 'unrestricted'} />
+      <ConfigRow label="Status" value={agent.status} />
+    </div>
+  );
+}
+
+function ActionButton({ icon, label, desc, onClick, color }) {
+  return (
+    <button onClick={onClick} style={{ ...styles.actionBtn, borderColor: color }}>
+      <span style={{ ...styles.actionIcon, color }}>{icon}</span>
+      <div>
+        <div style={styles.actionTitle}>{label}</div>
+        <div style={styles.actionDesc}>{desc}</div>
+      </div>
+    </button>
+  );
+}
+
+function ConfigRow({ label, value }) {
+  return (
+    <div style={styles.configRow}>
+      <span style={{ color: 'var(--text-dim)', fontSize: 11, minWidth: 60 }}>{label}</span>
+      <span style={{
+        color: 'var(--text-primary)', fontSize: 11,
+        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+      }}>
+        {value}
+      </span>
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    flex: 1, overflowY: 'auto', padding: '10px 0',
+  },
+  sectionLabel: {
+    fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase',
+    letterSpacing: 1.5, marginBottom: 8, fontWeight: 600,
+  },
+  btnGrid: {
+    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4,
+  },
+  actionBtn: {
+    display: 'flex', alignItems: 'center', gap: 8,
+    padding: '8px 10px',
+    background: 'var(--bg-surface)', border: '1px solid var(--border)',
+    borderRadius: 2,
+    cursor: 'pointer', textAlign: 'left',
+    fontFamily: 'var(--font)',
+  },
+  actionIcon: {
+    fontSize: 14, fontWeight: 700,
+    width: 18, textAlign: 'center', flexShrink: 0,
+  },
+  actionTitle: {
+    fontSize: 11, color: 'var(--text-primary)', fontWeight: 600,
+  },
+  actionDesc: {
+    fontSize: 9, color: 'var(--text-dim)', marginTop: 1,
+  },
+  select: {
+    width: '100%', 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',
+  },
+  fieldHint: {
+    fontSize: 10, color: 'var(--text-muted)', marginTop: 4,
+  },
+  currentPrompt: {},
+  promptText: {
+    background: 'var(--bg-base)', border: '1px solid var(--border)', borderRadius: 2,
+    padding: 8, fontSize: 12, color: 'var(--text-primary)', lineHeight: 1.5,
+    whiteSpace: 'pre-wrap', maxHeight: 100, overflowY: 'auto',
+  },
+  noPrompt: {
+    fontSize: 12, color: 'var(--text-dim)', fontStyle: 'italic',
+  },
+  editBtn: {
+    marginTop: 6, padding: '4px 10px',
+    background: 'transparent', border: '1px solid var(--accent)',
+    borderRadius: 2,
+    color: 'var(--accent)', fontSize: 11, fontWeight: 600,
+    fontFamily: 'var(--font)', cursor: 'pointer',
+  },
+  textarea: {
+    width: '100%', 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', resize: 'vertical',
+  },
+  saveBtn: {
+    flex: 1, padding: '6px',
+    background: 'transparent', border: '1px solid var(--accent)',
+    borderRadius: 2, color: 'var(--accent)', fontSize: 11, fontWeight: 600,
+    fontFamily: 'var(--font)', cursor: 'pointer',
+  },
+  cancelBtn: {
+    padding: '6px 12px',
+    background: 'transparent', border: '1px solid var(--border)',
+    borderRadius: 2, color: 'var(--text-dim)', fontSize: 11,
+    fontFamily: 'var(--font)', cursor: 'pointer',
+  },
+  configRow: {
+    display: 'flex', gap: 8, padding: '3px 0',
+    borderBottom: '1px solid var(--bg-surface)',
+  },
+};