groove-dev 0.27.140 → 0.27.141

package/node_modules/@groove-dev/gui/src/components/keeper/global-modals.jsx

@@ -4,18 +4,18 @@ import { useState, useEffect, useRef } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import { Dialog, DialogContent } from '../ui/dialog';
 import { Button } from '../ui/button';
-import { Save, HelpCircle, Sparkles, Link2, FileText } from 'lucide-react';
+import { Save } from 'lucide-react';
 
 const COMMANDS = [
-  { cmd: '[save]',     args: '#tag',                desc: 'Save the current message as a tagged memory' },
-  { cmd: '[append]',   args: '#tag',                desc: 'Add to an existing memory without overwriting' },
-  { cmd: '[update]',   args: '#tag',                desc: 'Open the editor to modify a memory in place' },
-  { cmd: '[delete]',   args: '#tag',                desc: 'Remove a memory permanently' },
-  { cmd: '[view]',     args: '#tag',                desc: 'Read a memory in the viewer' },
-  { cmd: '[read]',     args: '#tag1 #tag2 ...',     desc: 'Send memory content to the agent — agent reads it, chat stays clean' },
-  { cmd: '[doc]',      args: '#tag',                desc: 'AI synthesizes the full conversation into a document' },
-  { cmd: '[link]',     args: '#tag path/to/doc',    desc: 'Link a memory to a NORTHSTAR or external document' },
-  { cmd: '[instruct]', args: '',                    desc: 'Show this command reference' },
+  { cmd: 'save',     args: '#tag',                desc: 'Save the message and send it to the agent' },
+  { cmd: 'append',   args: '#tag',                desc: 'Add to an existing memory and send to agent' },
+  { cmd: 'update',   args: '#tag',                desc: 'Open the editor to modify a memory in place' },
+  { cmd: 'delete',   args: '#tag',                desc: 'Remove a memory permanently' },
+  { cmd: 'view',     args: '#tag',                desc: 'Read a memory in the viewer' },
+  { cmd: 'read',     args: '#tag1 #tag2 ...',     desc: 'Send memory content to the agent — chat stays clean' },
+  { cmd: 'doc',      args: '#tag',                desc: 'AI synthesizes the full conversation into a document' },
+  { cmd: 'link',     args: '#tag path/to/doc',    desc: 'Link a memory to a NORTHSTAR or external document' },
+  { cmd: '[instruct]', args: '',                  desc: 'Show this command reference' },
 ];
 
 function KeeperEditorModal() {

package/node_modules/@groove-dev/gui/src/components/layout/terminal-panel.jsx

@@ -1,7 +1,87 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useRef, useCallback, useState } from 'react';
-import { Maximize2, Minimize2, Plus, X, Terminal } from 'lucide-react';
+import { useRef, useCallback, useState, useEffect } from 'react';
+import { Maximize2, Minimize2, Plus, X, Terminal, Send, ChevronDown, Sparkles } from 'lucide-react';
 import { cn } from '../../lib/cn';
+import { useGrooveStore } from '../../stores/groove';
+import { Tooltip } from '../ui/tooltip';
+
+function AgentPicker({ onSelect, onClose }) {
+  const ref = useRef(null);
+  const agents = useGrooveStore((s) => s.agents);
+  const teams = useGrooveStore((s) => s.teams);
+
+  useEffect(() => {
+    function handleClick(e) {
+      if (ref.current && !ref.current.contains(e.target)) onClose();
+    }
+    function handleKey(e) {
+      if (e.key === 'Escape') onClose();
+    }
+    document.addEventListener('mousedown', handleClick);
+    document.addEventListener('keydown', handleKey);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+      document.removeEventListener('keydown', handleKey);
+    };
+  }, [onClose]);
+
+  const running = agents.filter((a) => a.status === 'running' || a.status === 'starting');
+  const stopped = agents.filter((a) => a.status !== 'running' && a.status !== 'starting');
+
+  function teamName(teamId) {
+    const team = teams.find((t) => t.id === teamId);
+    return team?.name || 'Default';
+  }
+
+  return (
+    <div
+      ref={ref}
+      className="absolute bottom-full right-0 mb-1 z-50 min-w-[220px] max-h-[300px] overflow-y-auto py-1 bg-surface-2 border border-border rounded-lg shadow-xl"
+    >
+      {running.length > 0 && (
+        <>
+          <div className="px-3 py-1 text-2xs text-text-4 font-sans font-medium uppercase tracking-wider">Active</div>
+          {running.map((agent) => (
+            <button
+              key={agent.id}
+              onClick={() => onSelect(agent.id)}
+              className="w-full flex items-center gap-2 px-3 py-1.5 text-xs font-sans text-text-1 hover:bg-surface-5 cursor-pointer transition-colors text-left"
+            >
+              <span className="w-1.5 h-1.5 rounded-full bg-success flex-shrink-0" />
+              <span className="truncate flex-1">{agent.name}</span>
+              <span className="text-2xs text-text-4">{teamName(agent.teamId)}</span>
+            </button>
+          ))}
+        </>
+      )}
+      {stopped.length > 0 && (
+        <>
+          <div className="px-3 py-1 text-2xs text-text-4 font-sans font-medium uppercase tracking-wider">
+            {running.length > 0 ? 'Other' : 'Agents'}
+          </div>
+          {stopped.slice(0, 10).map((agent) => (
+            <button
+              key={agent.id}
+              onClick={() => onSelect(agent.id)}
+              className="w-full flex items-center gap-2 px-3 py-1.5 text-xs font-sans text-text-2 hover:bg-surface-5 cursor-pointer transition-colors text-left"
+            >
+              <span className={cn('w-1.5 h-1.5 rounded-full flex-shrink-0',
+                agent.status === 'completed' ? 'bg-accent' : agent.status === 'crashed' ? 'bg-danger' : 'bg-text-4',
+              )} />
+              <span className="truncate flex-1">{agent.name}</span>
+              <span className="text-2xs text-text-4">{teamName(agent.teamId)}</span>
+            </button>
+          ))}
+        </>
+      )}
+      {agents.length === 0 && (
+        <div className="px-3 py-3 text-xs text-text-4 font-sans text-center">
+          No agents available
+        </div>
+      )}
+    </div>
+  );
+}
 
 export function TerminalPanel({
   children,
@@ -18,13 +98,22 @@ export function TerminalPanel({
   onMinimize,
   onClose,
   onRenameTab,
+  selectedText,
 }) {
   const dragging = useRef(false);
   const [renamingId, setRenamingId] = useState(null);
   const [renameValue, setRenameValue] = useState('');
+  const [showPicker, setShowPicker] = useState(false);
   const startY = useRef(0);
   const startH = useRef(0);
 
+  const activeAgent = useGrooveStore((s) => s.editorSelectedAgent);
+  const agents = useGrooveStore((s) => s.agents);
+  const attachSnippet = useGrooveStore((s) => s.attachSnippet);
+
+  const agent = agents.find((a) => a.id === activeAgent);
+  const hasSelection = selectedText && selectedText.trim().length > 0;
+
   const onMouseDown = useCallback((e) => {
     if (fullHeight) return;
     e.preventDefault();
@@ -49,6 +138,21 @@ export function TerminalPanel({
     document.addEventListener('mouseup', onMouseUp);
   }, [height, onHeightChange, fullHeight]);
 
+  function sendToAgent(agentId) {
+    if (!agentId || !selectedText?.trim()) return;
+    setShowPicker(false);
+    useGrooveStore.setState({ editorSelectedAgent: agentId });
+    attachSnippet({ type: 'terminal', code: selectedText.trim() });
+  }
+
+  function handleSendClick() {
+    if (activeAgent) {
+      sendToAgent(activeAgent);
+    } else {
+      setShowPicker(true);
+    }
+  }
+
   const tabList = tabs || [{ id: 'default', label: 'Terminal' }];
 
   return (
@@ -116,8 +220,53 @@ export function TerminalPanel({
           </button>
         </div>
 
-        {/* Window controls */}
+        {/* Send to Agent + Window controls */}
         <div className="flex items-center gap-0.5 flex-shrink-0 ml-2">
+          {/* Send to Agent */}
+          {hasSelection && (
+            <div className="relative flex items-center">
+              <Tooltip content={activeAgent ? `Send to ${agent?.name || 'agent'}` : 'Send to agent'} side="top">
+                <button
+                  onClick={handleSendClick}
+                  disabled={sending}
+                  className={cn(
+                    'flex items-center gap-1.5 px-2 py-1 rounded text-xs font-sans cursor-pointer transition-colors mr-1',
+                    'bg-accent/15 text-accent hover:bg-accent/25 disabled:opacity-50',
+                  )}
+                >
+                  {activeAgent ? (
+                    <>
+                      <Send size={11} />
+                      <span className="text-2xs max-w-[80px] truncate">{agent?.name || 'Agent'}</span>
+                    </>
+                  ) : (
+                    <>
+                      <Sparkles size={11} />
+                      <span className="text-2xs">Agent</span>
+                      <ChevronDown size={9} />
+                    </>
+                  )}
+                </button>
+              </Tooltip>
+              {!activeAgent && hasSelection && (
+                <Tooltip content="Pick agent" side="top">
+                  <button
+                    onClick={() => setShowPicker(!showPicker)}
+                    className="p-1 rounded text-text-3 hover:text-accent hover:bg-accent/10 cursor-pointer transition-colors mr-1"
+                  >
+                    <ChevronDown size={10} />
+                  </button>
+                </Tooltip>
+              )}
+              {showPicker && (
+                <AgentPicker
+                  onSelect={(id) => sendToAgent(id)}
+                  onClose={() => setShowPicker(false)}
+                />
+              )}
+            </div>
+          )}
+
           {fullHeight ? (
             <button
               onClick={onMinimize}

package/node_modules/@groove-dev/gui/src/components/marketplace/integration-wizard.jsx

@@ -4,31 +4,43 @@ import { Dialog, DialogContent } from '../ui/dialog';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Badge } from '../ui/badge';
+import { ScrollArea } from '../ui/scroll-area';
 import { api } from '../../lib/api';
 import { useToast } from '../../lib/hooks/use-toast';
+import { useGrooveStore } from '../../stores/groove';
 import { integrationOAuth } from '../../lib/electron';
 import {
   Check, CheckCircle, ExternalLink, Loader2, Eye, EyeOff,
-  Key, Shield, Trash2, ChevronRight, X, Copy, RefreshCw,
+  Key, Shield, Trash2, ChevronRight, Copy, RefreshCw,
+  Users, Rocket, Bot,
 } from 'lucide-react';
 
 import { INTEGRATION_LOGOS } from '../../lib/integration-logos';
 
+const ICON_PALETTES = [
+  'bg-accent/15 text-accent',
+  'bg-purple/15 text-purple',
+  'bg-success/15 text-success',
+  'bg-warning/15 text-warning',
+  'bg-danger/15 text-danger',
+  'bg-info/15 text-info',
+];
+
 function IntegrationIcon({ item, size = 48 }) {
   const logoUrl = INTEGRATION_LOGOS[item.id];
   if (logoUrl) {
     return (
       <div className="rounded-lg bg-surface-4 flex items-center justify-center flex-shrink-0 overflow-hidden" style={{ width: size, height: size }}>
-        <img src={logoUrl} alt={item.name} className="w-6 h-6" onError={(e) => { e.target.style.display = 'none'; }} />
+        <img src={logoUrl} alt={item.name} className="w-6 h-6" onError={(e) => { e.target.classList.add('hidden'); }} />
       </div>
     );
   }
   const initial = (item.name || '?')[0].toUpperCase();
-  const hue = item.name ? item.name.charCodeAt(0) * 37 % 360 : 200;
+  const palette = ICON_PALETTES[(item.name || '').charCodeAt(0) % ICON_PALETTES.length];
   return (
     <div
-      className="rounded-lg flex items-center justify-center flex-shrink-0 text-xl font-bold font-sans"
-      style={{ width: size, height: size, background: `hsl(${hue}, 40%, 18%)`, color: `hsl(${hue}, 60%, 65%)` }}
+      className={`rounded-lg flex items-center justify-center flex-shrink-0 text-xl font-bold font-sans ${palette}`}
+      style={{ width: size, height: size }}
     >
       {initial}
     </div>
@@ -219,6 +231,199 @@ function OverviewStep({ item, status, installing, onInstall, onUninstall, onNext
   );
 }
 
+// ── Step: Agent Setup ──────────────────────────────────
+function AgentSetupStep({ item, onClose }) {
+  const agents = useGrooveStore((s) => s.agents);
+  const teams = useGrooveStore((s) => s.teams);
+  const installViaExistingAgent = useGrooveStore((s) => s.installViaExistingAgent);
+  const spawnIntegrationTeam = useGrooveStore((s) => s.spawnIntegrationTeam);
+  const [mode, setMode] = useState(null); // null | 'existing' | 'spawn'
+  const [spawning, setSpawning] = useState(false);
+  const [selectedAgentId, setSelectedAgentId] = useState(null);
+
+  const runningAgents = agents.filter((a) => a.status === 'running' || a.status === 'idle');
+
+  const agentsByTeam = {};
+  for (const agent of runningAgents) {
+    const teamId = agent.teamId || '_none';
+    if (!agentsByTeam[teamId]) agentsByTeam[teamId] = [];
+    agentsByTeam[teamId].push(agent);
+  }
+
+  const teamMap = {};
+  for (const t of teams) teamMap[t.id] = t.name;
+
+  async function handleExistingAgent() {
+    if (!selectedAgentId) return;
+    await installViaExistingAgent(item, selectedAgentId);
+    onClose();
+  }
+
+  async function handleSpawnNew() {
+    setSpawning(true);
+    try {
+      await spawnIntegrationTeam(item);
+      onClose();
+    } catch {
+      setSpawning(false);
+    }
+  }
+
+  // Option picker when no mode selected
+  if (!mode) {
+    return (
+      <div className="px-5 py-5 space-y-5">
+        <div className="flex items-start gap-4">
+          <IntegrationIcon item={item} size={52} />
+          <div className="flex-1 min-w-0">
+            <h2 className="text-base font-bold text-text-0 font-sans">Install {item.name}</h2>
+            <p className="text-xs text-text-3 font-sans mt-0.5">
+              Choose how to set up this integration
+            </p>
+          </div>
+        </div>
+
+        <div className="h-px bg-border-subtle" />
+
+        <div className="space-y-2.5">
+          <button
+            onClick={() => runningAgents.length > 0 ? setMode('existing') : null}
+            disabled={runningAgents.length === 0}
+            className="w-full text-left px-4 py-3.5 rounded-lg border border-border-subtle bg-surface-2 hover:bg-surface-3 hover:border-accent/30 transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed group"
+          >
+            <div className="flex items-center gap-3">
+              <div className="w-9 h-9 rounded-lg bg-accent/10 flex items-center justify-center flex-shrink-0 group-hover:bg-accent/15 transition-colors">
+                <Users size={18} className="text-accent" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-sm font-semibold text-text-0 font-sans">Use Existing Agent</div>
+                <div className="text-2xs text-text-3 font-sans mt-0.5">
+                  {runningAgents.length > 0
+                    ? `Send setup instructions to one of ${runningAgents.length} running agent${runningAgents.length !== 1 ? 's' : ''}`
+                    : 'No agents running — spawn one first'}
+                </div>
+              </div>
+              {runningAgents.length > 0 && <ChevronRight size={14} className="text-text-4 group-hover:text-accent transition-colors" />}
+            </div>
+          </button>
+
+          <button
+            onClick={() => setMode('spawn')}
+            className="w-full text-left px-4 py-3.5 rounded-lg border border-border-subtle bg-surface-2 hover:bg-surface-3 hover:border-accent/30 transition-all cursor-pointer group"
+          >
+            <div className="flex items-center gap-3">
+              <div className="w-9 h-9 rounded-lg bg-purple/10 flex items-center justify-center flex-shrink-0 group-hover:bg-purple/15 transition-colors">
+                <Rocket size={18} className="text-purple" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-sm font-semibold text-text-0 font-sans">Spawn New Agent</div>
+                <div className="text-2xs text-text-3 font-sans mt-0.5">
+                  Create a dedicated team and planner for this integration
+                </div>
+              </div>
+              <ChevronRight size={14} className="text-text-4 group-hover:text-accent transition-colors" />
+            </div>
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Spawn new agent confirmation
+  if (mode === 'spawn') {
+    return (
+      <div className="px-5 py-5 space-y-5">
+        <div className="flex items-center gap-3">
+          <IntegrationIcon item={item} size={36} />
+          <div>
+            <h2 className="text-sm font-bold text-text-0 font-sans">Spawn Integration Agent</h2>
+            <p className="text-2xs text-text-3 font-sans">Creates a team and planner for {item.name}</p>
+          </div>
+        </div>
+
+        <div className="bg-surface-2 rounded-md px-4 py-3 space-y-2">
+          <span className="text-xs font-semibold text-text-1 font-sans">What happens next</span>
+          <ol className="space-y-1.5">
+            {[
+              `A new team "${item.name}" will be created`,
+              'A planner agent will spawn with full integration context',
+              'The agent will handle installation and configuration',
+            ].map((step, i) => (
+              <li key={i} className="flex gap-2 text-xs text-text-2 font-sans leading-relaxed">
+                <span className="text-accent font-mono flex-shrink-0 w-4 text-right">{i + 1}.</span>
+                <span>{step}</span>
+              </li>
+            ))}
+          </ol>
+        </div>
+
+        <div className="flex gap-2">
+          <Button variant="secondary" size="lg" onClick={() => setMode(null)} className="flex-1" disabled={spawning}>
+            Back
+          </Button>
+          <Button variant="primary" size="lg" onClick={handleSpawnNew} disabled={spawning} className="flex-1 gap-2">
+            {spawning ? <><Loader2 size={14} className="animate-spin" /> Spawning...</> : <><Rocket size={14} /> Spawn Agent</>}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // Pick existing agent
+  return (
+    <div className="px-5 py-5 space-y-4">
+      <div className="flex items-center gap-3">
+        <IntegrationIcon item={item} size={36} />
+        <div>
+          <h2 className="text-sm font-bold text-text-0 font-sans">Choose an Agent</h2>
+          <p className="text-2xs text-text-3 font-sans">Send {item.name} setup instructions to a running agent</p>
+        </div>
+      </div>
+
+      <ScrollArea className="max-h-64">
+        <div className="space-y-3">
+          {Object.entries(agentsByTeam).map(([teamId, teamAgents]) => (
+            <div key={teamId}>
+              <div className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-1.5 px-1">
+                {teamMap[teamId] || 'Unassigned'}
+              </div>
+              <div className="space-y-1">
+                {teamAgents.map((agent) => (
+                  <button
+                    key={agent.id}
+                    onClick={() => setSelectedAgentId(agent.id)}
+                    className={`w-full text-left px-3 py-2.5 rounded-md border transition-all cursor-pointer flex items-center gap-3 ${
+                      selectedAgentId === agent.id
+                        ? 'border-accent bg-accent/8'
+                        : 'border-border-subtle bg-surface-2 hover:bg-surface-3 hover:border-border'
+                    }`}
+                  >
+                    <Bot size={14} className={selectedAgentId === agent.id ? 'text-accent' : 'text-text-4'} />
+                    <div className="flex-1 min-w-0">
+                      <div className="text-xs font-semibold text-text-0 font-sans truncate">{agent.name || agent.id}</div>
+                      <div className="text-2xs text-text-3 font-sans">{agent.role}</div>
+                    </div>
+                    {selectedAgentId === agent.id && <Check size={14} className="text-accent flex-shrink-0" />}
+                  </button>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+
+      <div className="flex gap-2">
+        <Button variant="secondary" size="lg" onClick={() => { setMode(null); setSelectedAgentId(null); }} className="flex-1">
+          Back
+        </Button>
+        <Button variant="primary" size="lg" onClick={handleExistingAgent} disabled={!selectedAgentId} className="flex-1 gap-2">
+          <Bot size={14} /> Send Instructions
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 // ── Which APIs each Google integration needs ───────────
 const GOOGLE_API_NAMES = {
   gmail:             'Gmail API',
@@ -569,7 +774,7 @@ function DoneStep({ item, onClose }) {
 // ── Main Wizard ─────────────────────────────────────────
 export function IntegrationWizard({ integration, open, onClose }) {
   const toast = useToast();
-  const [step, setStep] = useState('overview'); // overview | configure | done
+  const [step, setStep] = useState('overview'); // overview | agent-setup | configure | done
   const [status, setStatus] = useState(null);
   const [installing, setInstalling] = useState(false);
   const [loadingStatus, setLoadingStatus] = useState(true);
@@ -595,17 +800,8 @@ export function IntegrationWizard({ integration, open, onClose }) {
     }
   }, [open, integration, fetchStatus]);
 
-  async function handleInstall() {
-    setInstalling(true);
-    try {
-      await api.post(`/integrations/${integration.id}/install`);
-      toast.success(`${integration.name} installed`);
-      await fetchStatus();
-      setStep('configure');
-    } catch (err) {
-      toast.error('Install failed', err.message);
-    }
-    setInstalling(false);
+  function handleInstall() {
+    setStep('agent-setup');
   }
 
   async function handleUninstall() {
@@ -628,10 +824,17 @@ export function IntegrationWizard({ integration, open, onClose }) {
 
   if (!integration) return null;
 
+  const stepTitle = {
+    overview: integration.name,
+    'agent-setup': 'Install',
+    configure: 'Configure',
+    done: 'Complete',
+  };
+
   return (
     <Dialog open={open} onOpenChange={(v) => { if (!v) onClose(); }}>
       <DialogContent
-        title={step === 'overview' ? integration.name : step === 'configure' ? 'Configure' : 'Complete'}
+        title={stepTitle[step] || integration.name}
         description={`Setup wizard for ${integration.name}`}
         className="max-w-md"
       >
@@ -648,6 +851,8 @@ export function IntegrationWizard({ integration, open, onClose }) {
             onUninstall={handleUninstall}
             onNext={handleConfigureNext}
           />
+        ) : step === 'agent-setup' ? (
+          <AgentSetupStep item={integration} onClose={onClose} />
         ) : step === 'configure' ? (
           <ConfigureStep
             item={integration}