groove-dev 0.27.140 → 0.27.142

package/packages/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}

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

@@ -213,6 +213,7 @@ export const useGrooveStore = create((set, get) => ({
 
   // ── Editor (Cursor-style) ────────────────────────────────
   editorSelectedAgent: null,
+  editorPendingSnippet: null,
   editorViewMode: 'code',
   editorAiPanelOpen: false,
   editorAiPanelWidth: Number(localStorage.getItem('groove:editorAiPanelWidth')) || 360,
@@ -665,6 +666,7 @@ export const useGrooveStore = create((set, get) => ({
         case 'lab:runtime:added':
         case 'lab:runtime:updated':
         case 'lab:runtime:removed':
+        case 'llama:server:stopped':
           get().fetchLabRuntimes();
           break;
 
@@ -1335,23 +1337,21 @@ export const useGrooveStore = create((set, get) => ({
         }
 
         case 'save': {
-          if (tags.length === 0) { addSystemMsg('Usage: [save] #tag your message here'); return true; }
+          if (tags.length === 0) { addSystemMsg('Usage: save #tag your message here'); return true; }
           const content = rest.replace(/#[\w/.-]+/g, '').trim();
-          if (!content) { addSystemMsg('Usage: [save] #tag your message here'); return true; }
-          get().addChatMessage(agentId, 'user', message, false);
+          if (!content) { addSystemMsg('Usage: save #tag your message here'); return true; }
           await get().saveKeeperItem(tags[0], content);
           addSystemMsg(`Saved to #${tags[0]}`);
-          return true;
+          return { passthrough: content };
         }
 
         case 'append': {
-          if (tags.length === 0) { addSystemMsg('Usage: [append] #tag content to add'); return true; }
+          if (tags.length === 0) { addSystemMsg('Usage: append #tag content to add'); return true; }
           const content = rest.replace(/#[\w/.-]+/g, '').trim();
-          if (!content) { addSystemMsg('Usage: [append] #tag content to add'); return true; }
-          get().addChatMessage(agentId, 'user', message, false);
+          if (!content) { addSystemMsg('Usage: append #tag content to add'); return true; }
           await get().appendKeeperItem(tags[0], content);
           addSystemMsg(`Appended to #${tags[0]}`);
-          return true;
+          return { passthrough: content };
         }
 
         case 'update': {
@@ -2031,7 +2031,6 @@ export const useGrooveStore = create((set, get) => ({
         ...(tlc?.reasoningEffort != null && { teamReasoningEffort: tlc.reasoningEffort }),
         ...(tlc?.temperature != null && { teamTemperature: tlc.temperature }),
         ...(tlc?.verbosity != null && { teamVerbosity: tlc.verbosity }),
-        ...(tlc?.mode && { mode: tlc.mode }),
       };
       const result = await api.post('/recommended-team/launch', body);
       const totalOk = (result.launched || 0) + (result.reused || 0);
@@ -2688,7 +2687,10 @@ export const useGrooveStore = create((set, get) => ({
     const keeperCmd = message.match(/\[(save|append|update|delete|view|doc|link|read|instruct)\]/i);
     if (keeperCmd) {
       const handled = await get()._handleKeeperCommand(id, message, keeperCmd[1].toLowerCase());
-      if (handled) return { status: 'keeper_handled' };
+      if (handled === true) return { status: 'keeper_handled' };
+      if (handled?.passthrough) {
+        message = handled.passthrough;
+      }
     }
 
     get().addChatMessage(id, 'user', message, false);
@@ -3226,10 +3228,27 @@ export const useGrooveStore = create((set, get) => ({
     set({ editorQuickSearchOpen: open });
   },
 
+  attachSnippet(snippet) {
+    set({ editorPendingSnippet: snippet });
+    if (!get().editorAiPanelOpen) {
+      set({ editorAiPanelOpen: true });
+    }
+  },
+
+  clearSnippet() {
+    set({ editorPendingSnippet: null });
+  },
+
   async sendCodeToAgent(agentId, instruction, filePath, lineStart, lineEnd, selectedCode) {
     if (!agentId) return;
-    const message = `Instruction: ${instruction}\nFile: ${filePath}\nLines ${lineStart}-${lineEnd}:\n\`\`\`\n${selectedCode}\n\`\`\``;
-    await get().instructAgent(agentId, message);
+    get().attachSnippet({
+      type: 'code',
+      instruction,
+      filePath,
+      lineStart,
+      lineEnd,
+      code: selectedCode,
+    });
   },
 
   async fetchGitStatus() {
@@ -3844,11 +3863,17 @@ export const useGrooveStore = create((set, get) => ({
           const payload = line.slice(6);
           if (payload === '[DONE]') continue;
           try {
-            const chunk = JSON.parse(payload);
-            if (chunk.type === 'reasoning' && chunk.content) {
+            const parsed = JSON.parse(payload);
+
+            // Support both raw OpenAI format (piped) and legacy wrapper format
+            const delta = parsed.choices?.[0]?.delta;
+            const reasoningText = delta?.reasoning_content || (parsed.type === 'reasoning' ? parsed.content : null);
+            const contentText = delta?.content || (parsed.type === 'token' ? parsed.content : null);
+
+            if (reasoningText) {
               if (!firstTokenTime) firstTokenTime = performance.now();
               tokenCount++;
-              fullReasoning += chunk.content;
+              fullReasoning += reasoningText;
               set((s) => {
                 const sessions = s.labSessions.map((sess) => {
                   if (sess.id !== sessionId) return sess;
@@ -3859,10 +3884,10 @@ export const useGrooveStore = create((set, get) => ({
                 return { labSessions: sessions };
               });
             }
-            if (chunk.type === 'token' && chunk.content) {
+            if (contentText) {
               if (!firstTokenTime) firstTokenTime = performance.now();
               tokenCount++;
-              fullContent += chunk.content;
+              fullContent += contentText;
               set((s) => {
                 const sessions = s.labSessions.map((sess) => {
                   if (sess.id !== sessionId) return sess;
@@ -3873,11 +3898,13 @@ export const useGrooveStore = create((set, get) => ({
                 return { labSessions: sessions };
               });
             }
-            if (chunk.type === 'done' && chunk.metrics) {
+
+            // Handle done event (legacy wrapper) or finish_reason (raw OpenAI)
+            if (parsed.type === 'done' && parsed.metrics) {
               const elapsed = performance.now() - startTime;
               const ttft = firstTokenTime ? firstTokenTime - startTime : null;
               const tps = tokenCount > 0 && elapsed > 0 ? (tokenCount / (elapsed / 1000)) : null;
-              const msgMetrics = { ttft, tokensPerSec: tps, tokens: tokenCount, generationTime: elapsed, ...chunk.metrics };
+              const msgMetrics = { ttft, tokensPerSec: tps, tokens: tokenCount, generationTime: elapsed, ...parsed.metrics };
 
               set((s) => {
                 const tpsHist = [...s.labMetrics.tokensPerSecHistory, tps].slice(-10);
@@ -3891,15 +3918,15 @@ export const useGrooveStore = create((set, get) => ({
                   labSessions: sessions,
                   labMetrics: {
                     ttft, tokensPerSec: tps, tokensPerSecHistory: tpsHist,
-                    memory: chunk.metrics.memoryUsage || s.labMetrics.memory,
-                    totalTokens: s.labMetrics.totalTokens + (chunk.metrics.totalTokens || tokenCount),
-                    generationTime: chunk.metrics.generationTime || elapsed,
+                    memory: parsed.metrics.memoryUsage || s.labMetrics.memory,
+                    totalTokens: s.labMetrics.totalTokens + (parsed.metrics.totalTokens || tokenCount),
+                    generationTime: parsed.metrics.generationTime || elapsed,
                   },
                 };
               });
             }
-            if (chunk.type === 'error') {
-              throw new Error(chunk.error || 'Inference error');
+            if (parsed.type === 'error') {
+              throw new Error(parsed.error || 'Inference error');
             }
           } catch (e) {
             if (e.message && e.message !== 'Inference error' && !e.message.startsWith('HTTP ')) continue;
@@ -3908,14 +3935,24 @@ export const useGrooveStore = create((set, get) => ({
         }
       }
 
-      // Final metrics if no done event came
-      if (!get().labSessions.find((s) => s.id === sessionId)?.messages.slice(-1)[0]?.metrics) {
-        const elapsed = performance.now() - startTime;
-        const ttft = firstTokenTime ? firstTokenTime - startTime : null;
-        const tps = tokenCount > 0 && elapsed > 0 ? (tokenCount / (elapsed / 1000)) : null;
+      // Compute final metrics from client-side timing
+      const elapsed = performance.now() - startTime;
+      const ttft = firstTokenTime ? firstTokenTime - startTime : null;
+      const tps = tokenCount > 0 && elapsed > 0 ? (tokenCount / (elapsed / 1000)) : null;
+      if (tokenCount > 0) {
         set((s) => {
           const tpsHist = [...s.labMetrics.tokensPerSecHistory, tps].slice(-10);
+          const sessions = s.labSessions.map((sess) => {
+            if (sess.id !== sessionId) return sess;
+            const msgs = [...sess.messages];
+            const last = msgs[msgs.length - 1];
+            if (!last?.metrics) {
+              msgs[msgs.length - 1] = { ...last, metrics: { ttft, tokensPerSec: tps, tokens: tokenCount, generationTime: elapsed } };
+            }
+            return { ...sess, messages: msgs };
+          });
           return {
+            labSessions: sessions,
             labMetrics: { ...s.labMetrics, ttft, tokensPerSec: tps, tokensPerSecHistory: tpsHist, totalTokens: s.labMetrics.totalTokens + tokenCount, generationTime: elapsed },
           };
         });
@@ -4040,4 +4077,45 @@ export const useGrooveStore = create((set, get) => ({
       return false;
     }
   },
+
+  // ── Integration Agent Install ────────────────────────────
+
+  async installViaExistingAgent(integration, agentId) {
+    const message = buildIntegrationPrompt(integration);
+    await get().instructAgent(agentId, message);
+    get().setActiveView('agents');
+    get().selectAgent(agentId);
+  },
+
+  async spawnIntegrationTeam(integration) {
+    const team = await get().createTeam(integration.name);
+    const prompt = buildIntegrationPrompt(integration);
+    const agent = await get().spawnAgent({ role: 'planner', prompt, teamId: team.id });
+    get().setActiveView('agents');
+    get().selectAgent(agent.id);
+    return agent;
+  },
 }));
+
+function buildIntegrationPrompt(integration) {
+  const lines = [
+    `Set up the "${integration.name}" integration for this project.`,
+    '',
+  ];
+  if (integration.description) lines.push(`**Description:** ${integration.description}`);
+  if (integration.npmPackage) lines.push(`**npm package:** ${integration.npmPackage}`);
+  if (integration.authType) lines.push(`**Auth type:** ${integration.authType}`);
+  if (integration.envKeys?.length) {
+    lines.push('', '**Environment keys required:**');
+    for (const k of integration.envKeys) {
+      lines.push(`- \`${k.key}\` — ${k.label}${k.required ? ' (required)' : ''}`);
+    }
+  }
+  if (integration.setupSteps?.length) {
+    lines.push('', '**Setup steps:**');
+    integration.setupSteps.forEach((step, i) => lines.push(`${i + 1}. ${step}`));
+  }
+  if (integration.setupUrl) lines.push(``, `**Setup URL:** ${integration.setupUrl}`);
+  if (integration.agentInstructions) lines.push('', `**Agent instructions:** ${integration.agentInstructions}`);
+  return lines.join('\n');
+}