groove-dev 0.27.92 → 0.27.94

package/packages/gui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groove-dev/gui",
-  "version": "0.27.92",
+  "version": "0.27.94",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

package/packages/gui/src/components/agents/agent-panel.jsx

@@ -80,11 +80,13 @@ function InlineName({ agent }) {
 export function AgentPanel() {
   const detailPanel = useGrooveStore((s) => s.detailPanel);
   const agents = useGrooveStore((s) => s.agents);
+  const activeTeamId = useGrooveStore((s) => s.activeTeamId);
   const [activeTab, setActiveTab] = useState('command');
 
   if (detailPanel?.type !== 'agent') return null;
   const agent = agents.find((a) => a.id === detailPanel.agentId);
   if (!agent) return null;
+  if (activeTeamId && agent.teamId && agent.teamId !== activeTeamId) return null;
 
   const isAlive = agent.status === 'running' || agent.status === 'starting';
   const ctxPct = Math.round((agent.contextUsage || 0) * 100);

package/packages/gui/src/components/editor/code-editor.jsx

@@ -3,10 +3,10 @@ import { useRef, useEffect } from 'react';
 import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter } from '@codemirror/view';
 import { EditorState, Compartment } from '@codemirror/state';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
-import { bracketMatching } from '@codemirror/language';
+import { bracketMatching, syntaxHighlighting } from '@codemirror/language';
 import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
 import { autocompletion } from '@codemirror/autocomplete';
-import { oneDark } from '@codemirror/theme-one-dark';
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import { javascript } from '@codemirror/lang-javascript';
 import { css } from '@codemirror/lang-css';
 import { html } from '@codemirror/lang-html';
@@ -98,7 +98,7 @@ export function CodeEditor({ content, language, onChange, onSave, onCursorChange
         autocompletion(),
         keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap]),
         saveKeymap,
-        oneDark,
+        syntaxHighlighting(oneDarkHighlightStyle),
         grooveTheme,
         langCompartment.current.of(langExt()),
         EditorView.updateListener.of((update) => {

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

@@ -70,7 +70,6 @@ export const useGrooveStore = create((set, get) => ({
   teamBuilderRoles: [],
   teamBuilderSettings: { provider: null, model: null, reasoningEffort: 50, temperature: 0.5 },
   teamBuilderTask: '',
-  teamBuilderLaunchMode: 'plan',
   teamTemplates: { builtIn: [], custom: [] },
 
   // ── Navigation ────────────────────────────────────────────
@@ -1201,6 +1200,8 @@ export const useGrooveStore = create((set, get) => ({
   },
   selectAgent(id) {
     const tid = get().activeTeamId;
+    const match = get().agents.find((a) => a.id === id);
+    if (tid && match && match.teamId && match.teamId !== tid) return;
     const panel = { type: 'agent', agentId: id };
     set((s) => ({ detailPanel: panel, teamDetailPanels: { ...s.teamDetailPanels, [tid]: panel } }));
   },
@@ -1619,7 +1620,6 @@ export const useGrooveStore = create((set, get) => ({
       teamBuilderRoles: [],
       teamBuilderSettings: { provider: null, model: null, reasoningEffort: 50, temperature: 0.5 },
       teamBuilderTask: '',
-      teamBuilderLaunchMode: 'plan',
     });
   },
   addTeamBuilderRole(role) {
@@ -1651,12 +1651,18 @@ export const useGrooveStore = create((set, get) => ({
     set((s) => ({ teamBuilderSettings: { ...s.teamBuilderSettings, ...settings } }));
   },
   setTeamBuilderTask(task) { set({ teamBuilderTask: task }); },
-  setTeamBuilderLaunchMode(mode) { set({ teamBuilderLaunchMode: mode }); },
 
   async fetchTeamTemplates() {
     try {
       const data = await api.get('/team-templates');
-      set({ teamTemplates: data });
+      const builtIn = [];
+      const custom = [];
+      for (const [key, tmpl] of Object.entries(data || {})) {
+        const entry = { ...tmpl, name: key };
+        if (tmpl.builtIn) builtIn.push(entry);
+        else custom.push(entry);
+      }
+      set({ teamTemplates: { builtIn, custom } });
     } catch { /* endpoint may not exist yet */ }
   },
 
@@ -1686,21 +1692,19 @@ export const useGrooveStore = create((set, get) => ({
   },
 
   async launchTeamBuilder() {
-    const { teamBuilderRoles, teamBuilderSettings, teamBuilderTask, teamBuilderLaunchMode, activeTeamId } = get();
+    const { teamBuilderRoles, teamBuilderSettings, teamBuilderTask, activeTeamId } = get();
     if (teamBuilderRoles.length === 0) return;
+    get().closeTeamBuilder();
     try {
-      get().addToast('info', 'Launching team...');
       const body = {
         task: teamBuilderTask,
         roles: teamBuilderRoles,
         settings: teamBuilderSettings,
-        launchMode: teamBuilderLaunchMode,
+        launchMode: 'plan-first',
         teamId: activeTeamId,
       };
       const result = await api.post('/team-builder/launch', body);
-      const count = result.launched || result.agents?.length || 0;
-      get().addToast('success', `Launched ${count} agent${count !== 1 ? 's' : ''}`);
-      get().closeTeamBuilder();
+      get().addToast('success', 'Planner spawned — team will build automatically');
       return result;
     } catch (err) {
       get().addToast('error', 'Team launch failed', err.message);
@@ -2497,13 +2501,16 @@ export const useGrooveStore = create((set, get) => ({
   setWorkspaceMode(on) {
     set({ workspaceMode: on });
     localStorage.setItem('groove:workspaceMode', String(on));
-    if (on && !get().workspaceAgentId) {
-      const teamAgents = get().agents.filter((a) => a.teamId === get().activeTeamId);
-      const selected = get().detailPanel?.type === 'agent' ? get().detailPanel.agentId : null;
-      const running = teamAgents.find((a) => a.status === 'running');
-      set({ workspaceAgentId: selected || running?.id || teamAgents[0]?.id || null });
-    }
     if (on) {
+      const teamAgents = get().agents.filter((a) => a.teamId === get().activeTeamId);
+      const current = get().workspaceAgentId;
+      const belongsToTeam = current && teamAgents.some((a) => a.id === current);
+      if (!belongsToTeam) {
+        const selected = get().detailPanel?.type === 'agent' ? get().detailPanel.agentId : null;
+        const selectedInTeam = selected && teamAgents.some((a) => a.id === selected);
+        const running = teamAgents.find((a) => a.status === 'running');
+        set({ workspaceAgentId: (selectedInTeam ? selected : null) || running?.id || teamAgents[0]?.id || null });
+      }
       const agentId = get().workspaceAgentId;
       if (agentId) get().selectAgent(agentId);
     }

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

@@ -10,7 +10,7 @@ import { RootNode } from '../components/agents/root-node';
 import { cn } from '../lib/cn';
 import { Button } from '../components/ui/button';
 import { Badge } from '../components/ui/badge';
-import { Plus, Users, UserPlus, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronDown, ChevronLeft, ChevronRight, FolderOpen, Radio, Eye, Settings2, Search, GripVertical, Cloud, FileText, Database, Megaphone, Calculator, UserCheck, Headphones, BarChart3, Pen, Presentation, Globe, MessageCircle, Save, Play, Clock, ListChecks, Layers } from 'lucide-react';
+import { Plus, Users, UserPlus, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronDown, ChevronLeft, ChevronRight, FolderOpen, Eye, Settings2, Search, GripVertical, Cloud, FileText, Database, Megaphone, Calculator, UserCheck, Headphones, BarChart3, Pen, Presentation, Globe, MessageCircle, Save, Layers } from 'lucide-react';
 import { PreviewWorkspace } from '../components/preview/preview-workspace';
 import { WorkspaceMode } from '../components/agents/workspace-mode';
 import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from '../components/ui/context-menu';
@@ -750,7 +750,6 @@ function TeamBuilder() {
   const roles = useGrooveStore((s) => s.teamBuilderRoles);
   const settings = useGrooveStore((s) => s.teamBuilderSettings);
   const task = useGrooveStore((s) => s.teamBuilderTask);
-  const launchMode = useGrooveStore((s) => s.teamBuilderLaunchMode);
   const templates = useGrooveStore((s) => s.teamTemplates);
   const closeTeamBuilder = useGrooveStore((s) => s.closeTeamBuilder);
   const addRole = useGrooveStore((s) => s.addTeamBuilderRole);
@@ -759,7 +758,6 @@ function TeamBuilder() {
   const applyTemplate = useGrooveStore((s) => s.applyTemplate);
   const setSettings = useGrooveStore((s) => s.setTeamBuilderSettings);
   const setTask = useGrooveStore((s) => s.setTeamBuilderTask);
-  const setLaunchMode = useGrooveStore((s) => s.setTeamBuilderLaunchMode);
   const launchTeamBuilder = useGrooveStore((s) => s.launchTeamBuilder);
   const saveTeamTemplate = useGrooveStore((s) => s.saveTeamTemplate);
   const fetchTeamTemplates = useGrooveStore((s) => s.fetchTeamTemplates);
@@ -789,8 +787,6 @@ function TeamBuilder() {
 
   const selectedProvider = providers.find((p) => p.id === settings.provider);
   const settingsModels = (selectedProvider?.models || []).filter((m) => m.type !== 'image' && !m.disabled);
-  const showTemp = PROVIDER_TEMP_SUPPORT.has(settings.provider);
-
   function handleSettingsProviderChange(id) {
     setSettings({ provider: id });
     const p = providers.find((x) => x.id === id);
@@ -829,8 +825,8 @@ function TeamBuilder() {
         {/* Top Bar */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-border-subtle">
           <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-lg bg-purple/15 flex items-center justify-center">
-              <Users size={16} className="text-purple" />
+            <div className="w-8 h-8 rounded-lg bg-info/15 flex items-center justify-center">
+              <Users size={16} className="text-info" />
             </div>
             <h2 className="text-lg font-bold text-text-0 font-sans">Team Builder</h2>
           </div>
@@ -974,15 +970,15 @@ function TeamBuilder() {
                           <div className="flex gap-2">
                             <div className="flex-1 space-y-1">
                               <label className="text-2xs text-text-3 font-sans">Provider</label>
-                              <Select value={r.provider || ''} onValueChange={(v) => {
-                                updateRole(i, { provider: v || null });
-                                const p = providers.find((x) => x.id === v);
+                              <Select value={r.provider || '__default__'} onValueChange={(v) => {
+                                const pv = v === '__default__' ? null : v;
+                                const p = providers.find((x) => x.id === pv);
                                 const pModels = (p?.models || []).filter((m) => m.type !== 'image' && !m.disabled);
-                                updateRole(i, { provider: v || null, model: pModels[0]?.id || null });
+                                updateRole(i, { provider: pv, model: pModels[0]?.id || null });
                               }}>
                                 <SelectTrigger placeholder="Team Default" className="bg-surface-3 h-7 text-xs" />
                                 <SelectContent>
-                                  <SelectItem value="">Team Default</SelectItem>
+                                  <SelectItem value="__default__">Team Default</SelectItem>
                                   {providers.map((p) => (
                                     <SelectItem key={p.id} value={p.id}>{p.displayName || p.name || p.id}</SelectItem>
                                   ))}
@@ -991,10 +987,10 @@ function TeamBuilder() {
                             </div>
                             <div className="flex-1 space-y-1">
                               <label className="text-2xs text-text-3 font-sans">Model</label>
-                              <Select value={r.model || ''} onValueChange={(v) => updateRole(i, { model: v || null })}>
+                              <Select value={r.model || '__default__'} onValueChange={(v) => updateRole(i, { model: v === '__default__' ? null : v })}>
                                 <SelectTrigger placeholder="Default" className="bg-surface-3 h-7 text-xs" />
                                 <SelectContent>
-                                  <SelectItem value="">Default</SelectItem>
+                                  <SelectItem value="__default__">Default</SelectItem>
                                   {roleModels.map((m) => (
                                     <SelectItem key={m.id} value={m.id}>{m.name || m.id}</SelectItem>
                                   ))}
@@ -1017,16 +1013,6 @@ function TeamBuilder() {
                               formatValue={(v) => v.toFixed(2)}
                             />
                           )}
-                          <div className="space-y-1">
-                            <label className="text-2xs text-text-3 font-sans">Custom Prompt</label>
-                            <textarea
-                              value={r.prompt || ''}
-                              onChange={(e) => updateRole(i, { prompt: e.target.value })}
-                              placeholder="Optional instructions for this agent..."
-                              rows={2}
-                              className="w-full px-2.5 py-1.5 text-xs bg-surface-3 border border-border-subtle rounded-md text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent resize-none"
-                            />
-                          </div>
                         </div>
                       )}
                     </div>
@@ -1040,38 +1026,9 @@ function TeamBuilder() {
         {/* Bottom Bar */}
         <div className="border-t border-border-subtle px-6 py-4">
           <div className="flex gap-4">
-            {/* Task + Launch Mode */}
-            <div className="flex-1 space-y-3">
-              <textarea
-                value={task}
-                onChange={(e) => setTask(e.target.value)}
-                placeholder="Describe what this team should work on..."
-                rows={2}
-                className="w-full px-3 py-2 text-sm bg-surface-3 border border-border-subtle rounded-lg text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent resize-none"
-              />
-              <div className="flex items-center gap-2">
-                <span className="text-2xs text-text-3 font-sans mr-1">Launch Mode:</span>
-                {[
-                  { id: 'direct', label: 'Direct', icon: Play, tip: 'Agents start working immediately' },
-                  { id: 'plan', label: 'Plan First', icon: ListChecks, tip: 'Planner designs prompts, then team launches' },
-                  { id: 'await', label: 'Await', icon: Clock, tip: 'Agents spawn idle, await instructions' },
-                ].map((m) => (
-                  <Tooltip key={m.id} content={m.tip}>
-                    <button
-                      onClick={() => setLaunchMode(m.id)}
-                      className={cn(
-                        'flex items-center gap-1.5 px-2.5 py-1 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer',
-                        launchMode === m.id
-                          ? 'bg-accent/15 text-accent border border-accent/30'
-                          : 'bg-surface-3 text-text-3 border border-border-subtle hover:text-text-1 hover:border-border',
-                      )}
-                    >
-                      <m.icon size={11} />
-                      {m.label}
-                    </button>
-                  </Tooltip>
-                ))}
-              </div>
+            {/* Task */}
+            <div className="flex-1 space-y-2">
+              <p className="text-xs text-text-3 font-sans italic">Planner will design agent prompts automatically</p>
             </div>
 
             {/* Team Settings + Launch */}
@@ -1079,10 +1036,10 @@ function TeamBuilder() {
               <div className="flex gap-2">
                 <div className="flex-1 space-y-0.5">
                   <label className="text-2xs text-text-3 font-sans">Provider</label>
-                  <Select value={settings.provider || ''} onValueChange={handleSettingsProviderChange}>
+                  <Select value={settings.provider || '__default__'} onValueChange={(v) => handleSettingsProviderChange(v === '__default__' ? '' : v)}>
                     <SelectTrigger placeholder="Default" className="bg-surface-3 h-7 text-xs" />
                     <SelectContent>
-                      <SelectItem value="">Default</SelectItem>
+                      <SelectItem value="__default__">Default</SelectItem>
                       {providers.map((p) => (
                         <SelectItem key={p.id} value={p.id}>{p.displayName || p.name || p.id}</SelectItem>
                       ))}
@@ -1091,10 +1048,10 @@ function TeamBuilder() {
                 </div>
                 <div className="flex-1 space-y-0.5">
                   <label className="text-2xs text-text-3 font-sans">Model</label>
-                  <Select value={settings.model || ''} onValueChange={(v) => setSettings({ model: v })}>
+                  <Select value={settings.model || '__default__'} onValueChange={(v) => setSettings({ model: v === '__default__' ? '' : v })}>
                     <SelectTrigger placeholder="Auto" className="bg-surface-3 h-7 text-xs" />
                     <SelectContent>
-                      <SelectItem value="">Auto</SelectItem>
+                      <SelectItem value="__default__">Auto</SelectItem>
                       {settingsModels.map((m) => (
                         <SelectItem key={m.id} value={m.id}>{m.name || m.id}</SelectItem>
                       ))}
@@ -1102,21 +1059,6 @@ function TeamBuilder() {
                   </Select>
                 </div>
               </div>
-              <TuningSlider
-                label="Reasoning"
-                value={settings.reasoningEffort}
-                onChange={(v) => setSettings({ reasoningEffort: v })}
-                min={0} max={100} step={1}
-              />
-              {showTemp && (
-                <TuningSlider
-                  label="Temperature"
-                  value={settings.temperature}
-                  onChange={(v) => setSettings({ temperature: v })}
-                  min={0} max={1} step={0.01}
-                  formatValue={(v) => v.toFixed(2)}
-                />
-              )}
               <Button
                 variant="primary"
                 size="md"
@@ -1194,44 +1136,33 @@ function EmptyState({ onPlanner, onSpawn, onTeamBuilder }) {
             </div>
           </button>
 
-          <button
-            onClick={onTeamBuilder}
-            className="w-full flex items-center gap-3 p-4 rounded-lg border border-purple/25 bg-gradient-to-r from-purple/6 to-purple/2 hover:from-purple/12 hover:to-purple/5 hover:border-purple/35 transition-all cursor-pointer group text-left"
-          >
-            <div className="w-10 h-10 rounded-lg bg-purple/15 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
-              <UserPlus size={20} className="text-purple" />
-            </div>
-            <div className="min-w-0">
-              <div className="text-sm font-semibold text-text-0 font-sans">Build a Team</div>
-              <div className="text-xs text-text-3 font-sans mt-0.5">Pick your roles, configure settings, and launch</div>
-            </div>
-          </button>
-
-          <button
-            onClick={onSpawn}
-            className="w-full flex items-center gap-3 p-4 rounded-lg border border-border bg-surface-1 hover:bg-surface-2 hover:border-border transition-all cursor-pointer group text-left"
-          >
-            <div className="w-10 h-10 rounded-lg bg-surface-4 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
-              <Plus size={20} className="text-text-1" />
-            </div>
-            <div className="min-w-0">
-              <div className="text-sm font-semibold text-text-0 font-sans">Spawn Agent</div>
-              <div className="text-xs text-text-3 font-sans mt-0.5">Choose a role and configure</div>
-            </div>
-          </button>
+          <div className="grid grid-cols-2 gap-3">
+            <button
+              onClick={onTeamBuilder}
+              className="flex items-center gap-3 p-4 rounded-lg border border-info/25 bg-gradient-to-r from-info/6 to-info/2 hover:from-info/12 hover:to-info/5 hover:border-info/35 transition-all cursor-pointer group text-left"
+            >
+              <div className="w-10 h-10 rounded-lg bg-info/15 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
+                <UserPlus size={20} className="text-info" />
+              </div>
+              <div className="min-w-0">
+                <div className="text-sm font-semibold text-text-0 font-sans">Build a Team</div>
+                <div className="text-xs text-text-3 font-sans mt-0.5">Pick roles and configure</div>
+              </div>
+            </button>
 
-          <button
-            onClick={() => useGrooveStore.getState().toggleQuickConnect()}
-            className="w-full flex items-center gap-3 p-4 rounded-lg border border-border bg-surface-1 hover:bg-surface-2 hover:border-border transition-all cursor-pointer group text-left"
-          >
-            <div className="w-10 h-10 rounded-lg bg-surface-4 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
-              <Radio size={20} className="text-text-1" />
-            </div>
-            <div className="min-w-0">
-              <div className="text-sm font-semibold text-text-0 font-sans">Connect to Remote Server</div>
-              <div className="text-xs text-text-3 font-sans mt-0.5">SSH tunnel to a remote machine</div>
-            </div>
-          </button>
+            <button
+              onClick={onSpawn}
+              className="flex items-center gap-3 p-4 rounded-lg border border-border bg-surface-1 hover:bg-surface-2 hover:border-border transition-all cursor-pointer group text-left"
+            >
+              <div className="w-10 h-10 rounded-lg bg-surface-4 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
+                <Plus size={20} className="text-text-1" />
+              </div>
+              <div className="min-w-0">
+                <div className="text-sm font-semibold text-text-0 font-sans">Spawn Agent</div>
+                <div className="text-xs text-text-3 font-sans mt-0.5">Choose a role and configure</div>
+              </div>
+            </button>
+          </div>
         </div>
 
         {window.groove?.openFolder && (
@@ -1569,7 +1500,7 @@ export default function AgentsView() {
           className={cn(
             'absolute bottom-4 z-40 flex items-center gap-1.5 h-8 px-4 rounded-md text-xs font-semibold font-sans transition-colors cursor-pointer select-none shadow-lg shadow-black/10',
             previewState.url && previewState.teamId === activeTeamId ? 'right-32' : 'right-4',
-            'bg-purple/15 text-purple hover:bg-purple/25',
+            'bg-accent/15 text-accent hover:bg-accent/25',
           )}
         >
           <Code2 size={14} /> Workspace