npm - groove-dev - Versions diffs - 0.27.169 → 0.27.172 - Mend

groove-dev 0.27.169 → 0.27.172

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/packages/gui/dist/index.html CHANGED Viewed

@@ -6,12 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Groove GUI</title>
-    <script type="module" crossorigin src="/assets/index-BcWo4sq-.js"></script>
+    <script type="module" crossorigin src="/assets/index-BsCp-oqa.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-26L3JoZv.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-DoBZjiHE.js">
     <link rel="modulepreload" crossorigin href="/assets/codemirror-BYKpdS2W.js">
     <link rel="modulepreload" crossorigin href="/assets/xterm--7_ns2zW.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-BvXojcnr.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-BrMU-6gi.css">
   </head>
   <body>
     <div id="root"></div>

package/packages/gui/package.json CHANGED Viewed

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

package/packages/gui/src/components/agents/folder-browser.jsx CHANGED Viewed

@@ -6,7 +6,7 @@ import { api } from '../../lib/api';
 import { cn } from '../../lib/cn';
 import {
   FolderOpen, FolderClosed, ChevronRight, Home, HardDrive,
-  ArrowUp, Check, Loader2,
+  ArrowUp, Check, Loader2, FileKey,
 } from 'lucide-react';
 function BreadcrumbPath({ path, onNavigate }) {
@@ -43,29 +43,39 @@ function BreadcrumbPath({ path, onNavigate }) {
   );
 }
-export function FolderBrowser({ open, onOpenChange, currentPath, onSelect, homePath, mandatory = false, title }) {
+export function FolderBrowser({ open, onOpenChange, currentPath, onSelect, homePath, mandatory = false, title, mode = 'directory' }) {
   const home = homePath || '/home';
   const [path, setPath] = useState(currentPath || home);
   const [entries, setEntries] = useState([]);
+  const [files, setFiles] = useState([]);
+  const [selectedFile, setSelectedFile] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const isFileMode = mode === 'file';
   useEffect(() => {
     if (open) {
-      navigateTo(currentPath || home);
+      setSelectedFile(null);
+      const startPath = currentPath || home;
+      navigateTo(isFileMode && startPath.includes('/') ? startPath.split('/').slice(0, -1).join('/') || '/' : startPath);
     }
   }, [open]);
   async function navigateTo(target) {
     setLoading(true);
     setError(null);
+    setSelectedFile(null);
     try {
-      const data = await api.get(`/browse-system?path=${encodeURIComponent(target)}`);
+      const params = `path=${encodeURIComponent(target)}${isFileMode ? '&files=true&hidden=true' : ''}`;
+      const data = await api.get(`/browse-system?${params}`);
       setPath(data.current || target);
       setEntries(data.dirs || []);
+      setFiles(isFileMode ? (data.files || []) : []);
     } catch (err) {
       setError(err.message);
       setEntries([]);
+      setFiles([]);
     }
     setLoading(false);
   }
@@ -80,7 +90,7 @@ export function FolderBrowser({ open, onOpenChange, currentPath, onSelect, homeP
   }
   function handleSelect() {
-    onSelect(path);
+    onSelect(isFileMode && selectedFile ? selectedFile : path);
     if (!mandatory) onOpenChange(false);
   }
@@ -137,9 +147,9 @@ export function FolderBrowser({ open, onOpenChange, currentPath, onSelect, homeP
                   <p className="text-xs text-danger font-sans">{error}</p>
                 </div>
               )}
-              {!loading && !error && entries.length === 0 && (
+              {!loading && !error && entries.length === 0 && files.length === 0 && (
                 <div className="px-4 py-6 text-center">
-                  <p className="text-xs text-text-3 font-sans">No subdirectories</p>
+                  <p className="text-xs text-text-3 font-sans">{isFileMode ? 'No files found' : 'No subdirectories'}</p>
                 </div>
               )}
               {!loading && !error && entries.map((entry) => (
@@ -161,13 +171,31 @@ export function FolderBrowser({ open, onOpenChange, currentPath, onSelect, homeP
                   )}
                 </button>
               ))}
+              {!loading && !error && files.map((file) => (
+                <button
+                  key={file.path}
+                  onClick={() => setSelectedFile(file.path)}
+                  className={cn(
+                    'w-full flex items-center gap-2.5 px-3.5 py-2 text-left cursor-pointer',
+                    'transition-colors border-b border-border-subtle last:border-0',
+                    selectedFile === file.path ? 'bg-accent/10' : 'hover:bg-surface-4',
+                  )}
+                >
+                  <FileKey size={15} className={cn('flex-shrink-0', selectedFile === file.path ? 'text-accent' : 'text-text-3')} />
+                  <span className={cn('text-sm font-sans truncate flex-1', selectedFile === file.path ? 'text-accent font-medium' : 'text-text-0')}>{file.name}</span>
+                </button>
+              ))}
             </div>
           </div>
           {/* Current selection */}
           <div className="flex items-center gap-3 bg-surface-4/50 rounded-lg px-3.5 py-2.5 border border-border-subtle">
-            <FolderOpen size={16} className="text-accent flex-shrink-0" />
-            <span className="text-xs font-mono text-text-1 truncate flex-1">{path}</span>
+            {isFileMode && selectedFile ? (
+              <FileKey size={16} className="text-accent flex-shrink-0" />
+            ) : (
+              <FolderOpen size={16} className="text-accent flex-shrink-0" />
+            )}
+            <span className="text-xs font-mono text-text-1 truncate flex-1">{isFileMode && selectedFile ? selectedFile : path}</span>
           </div>
           {/* Actions */}
@@ -175,8 +203,8 @@ export function FolderBrowser({ open, onOpenChange, currentPath, onSelect, homeP
             {!mandatory && (
               <Button variant="ghost" size="md" onClick={() => onOpenChange(false)}>Cancel</Button>
             )}
-            <Button variant="primary" size="md" onClick={handleSelect} className="gap-1.5">
-              <Check size={14} /> Select Folder
+            <Button variant="primary" size="md" onClick={handleSelect} disabled={isFileMode && !selectedFile} className="gap-1.5">
+              <Check size={14} /> {isFileMode ? 'Select File' : 'Select Folder'}
             </Button>
           </div>
         </div>

package/packages/gui/src/components/agents/recommended-team-card.jsx ADDED Viewed

@@ -0,0 +1,300 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useEffect } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { Button } from '../ui/button';
+import { Select, SelectTrigger, SelectContent, SelectItem } from '../ui/select';
+import { TuningSlider } from '../ui/slider';
+import {
+  Rocket, X, ChevronDown, Settings2, Zap, Shield, Server, Monitor, Code2, TestTube, Cpu, Activity, Gauge,
+} from 'lucide-react';
+const ROLE_ICONS = { backend: Server, frontend: Monitor, fullstack: Code2, testing: TestTube, security: Shield };
+const PROVIDER_TEMP_SUPPORT = new Set(['codex', 'grok', 'local']);
+const NAME_RE = /^[a-zA-Z0-9_-]{1,64}$/;
+function sanitizeName(raw) {
+  return raw.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9_-]/g, '').slice(0, 64);
+}
+export function RecommendedTeamCard() {
+  const recommendedTeam = useGrooveStore((s) => s.recommendedTeam);
+  const launchRecommendedTeam = useGrooveStore((s) => s.launchRecommendedTeam);
+  const teamLaunchConfig = useGrooveStore((s) => s.teamLaunchConfig);
+  const fetchProviders = useGrooveStore((s) => s.fetchProviders);
+  const [launching, setLaunching] = useState(false);
+  const [editedAgents, setEditedAgents] = useState(null);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [providers, setProviders] = useState([]);
+  const [tsProvider, setTsProvider] = useState(teamLaunchConfig?.provider || '');
+  const [tsModel, setTsModel] = useState(teamLaunchConfig?.model || '');
+  const [tsReasoning, setTsReasoning] = useState(teamLaunchConfig?.reasoningEffort ?? 50);
+  const [tsTemp, setTsTemp] = useState(teamLaunchConfig?.temperature ?? 0.5);
+  const [expandedAgent, setExpandedAgent] = useState(null);
+  useEffect(() => {
+    fetchProviders().then((list) => {
+      if (Array.isArray(list)) setProviders(list.filter((p) => p.installed));
+    }).catch(() => {});
+  }, []);
+  if (!recommendedTeam?.agents?.length) return null;
+  const agents = recommendedTeam.agents;
+  const phase1 = agents.filter((a) => !a.phase || a.phase === 1);
+  const phase2 = agents.filter((a) => a.phase === 2);
+  const agentEdits = editedAgents ?? phase1.map((a) => ({ ...a, name: a.name || '' }));
+  const selectedProvider = providers.find((p) => p.id === tsProvider);
+  const tsModels = (selectedProvider?.models || []).filter((m) => m.type !== 'image' && !m.disabled);
+  const showTemp = PROVIDER_TEMP_SUPPORT.has(tsProvider);
+  function handleNameChange(i, raw) {
+    const next = agentEdits.map((a, idx) => idx === i ? { ...a, name: sanitizeName(raw) } : a);
+    setEditedAgents(next);
+  }
+  function handleAgentField(i, updates) {
+    if (typeof updates === 'string') {
+      const [field, value] = [updates, arguments[2]];
+      setEditedAgents((prev) => (prev ?? agentEdits).map((a, idx) => idx === i ? { ...a, [field]: value } : a));
+    } else {
+      setEditedAgents((prev) => (prev ?? agentEdits).map((a, idx) => idx === i ? { ...a, ...updates } : a));
+    }
+  }
+  function handleTsProviderChange(id) {
+    setTsProvider(id);
+    const p = providers.find((x) => x.id === id);
+    const pModels = (p?.models || []).filter((m) => m.type !== 'image' && !m.disabled);
+    setTsModel(pModels[0]?.id || '');
+  }
+  async function handleLaunch() {
+    setLaunching(true);
+    useGrooveStore.setState({
+      teamLaunchConfig: {
+        ...(tsProvider && { provider: tsProvider, model: tsModel }),
+        reasoningEffort: tsReasoning,
+        ...(showTemp && { temperature: tsTemp }),
+      },
+    });
+    try {
+      const modified = [...agentEdits, ...phase2];
+      await launchRecommendedTeam(modified);
+    } catch { /* toast handles */ }
+    setLaunching(false);
+  }
+  function handleDismiss() {
+    useGrooveStore.setState({ recommendedTeam: null });
+  }
+  return (
+    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-50 w-full max-w-lg">
+      <div className="mx-4 rounded-lg border border-accent/30 bg-surface-2/95 backdrop-blur-md shadow-xl shadow-accent/5 overflow-hidden">
+        <div className="px-4 py-3 border-b border-border-subtle flex items-center gap-2">
+          <Rocket size={16} className="text-accent" />
+          <span className="text-sm font-semibold text-text-0 font-sans flex-1">Planner Recommends a Team</span>
+          <button onClick={handleDismiss} className="text-text-4 hover:text-text-1 cursor-pointer"><X size={14} /></button>
+        </div>
+        {/* Collapsible Team Settings */}
+        <div className="border-b border-border-subtle">
+          <button
+            onClick={() => setSettingsOpen(!settingsOpen)}
+            className="w-full flex items-center gap-2 px-4 py-2 text-left cursor-pointer hover:bg-surface-3/50 transition-colors"
+          >
+            <ChevronDown size={12} className={cn('text-text-4 transition-transform duration-200', !settingsOpen && '-rotate-90')} />
+            <Settings2 size={12} className="text-text-3" />
+            <span className="text-2xs font-semibold text-text-2 font-sans uppercase tracking-wider">Team Settings</span>
+            {tsProvider && (
+              <span className="ml-auto text-2xs text-accent font-mono">{tsProvider}{tsModel ? ` / ${tsModel}` : ''}</span>
+            )}
+          </button>
+          {settingsOpen && (
+            <div className="px-4 pb-3 space-y-3">
+              <div className="flex gap-3">
+                <div className="flex-1 space-y-1">
+                  <label className="text-2xs text-text-3 font-sans">Provider</label>
+                  <Select value={tsProvider} onValueChange={handleTsProviderChange}>
+                    <SelectTrigger placeholder="Default" className="bg-surface-4 h-7 text-xs" />
+                    <SelectContent>
+                      {providers.map((p) => (
+                        <SelectItem key={p.id} value={p.id}>{p.displayName || p.name || p.id}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex-1 space-y-1">
+                  <label className="text-2xs text-text-3 font-sans">Model</label>
+                  <Select value={tsModel} onValueChange={setTsModel}>
+                    <SelectTrigger placeholder="Auto" className="bg-surface-4 h-7 text-xs" />
+                    <SelectContent>
+                      <SelectItem value="auto">Auto</SelectItem>
+                      {tsModels.map((m) => (
+                        <SelectItem key={m.id} value={m.id}>{m.name || m.id}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <TuningSlider
+                label="Reasoning"
+                value={tsReasoning}
+                onChange={setTsReasoning}
+                min={0} max={100} step={1}
+              />
+              {showTemp && (
+                <TuningSlider
+                  label="Temperature"
+                  value={tsTemp}
+                  onChange={setTsTemp}
+                  min={0} max={1} step={0.01}
+                  formatValue={(v) => v.toFixed(2)}
+                />
+              )}
+            </div>
+          )}
+        </div>
+        <div className="px-4 py-3 space-y-1.5">
+          {agentEdits.map((a, i) => {
+            const Icon = ROLE_ICONS[a.role] || Code2;
+            const nameValid = !a.name || NAME_RE.test(a.name);
+            const isExpanded = expandedAgent === i;
+            const agentProvider = providers.find((p) => p.id === (a.provider || tsProvider));
+            const agentModels = (agentProvider?.models || []).filter((m) => m.type !== 'image' && !m.disabled);
+            return (
+              <div key={i} className="rounded-md bg-surface-4 border border-border-subtle overflow-hidden">
+                <div
+                  className="flex items-center gap-2 px-2.5 py-1.5 cursor-pointer hover:bg-surface-5/50 transition-colors"
+                  onClick={() => setExpandedAgent(isExpanded ? null : i)}
+                >
+                  <Icon size={12} className="text-text-2 shrink-0" />
+                  <input
+                    type="text"
+                    value={a.name}
+                    onChange={(e) => handleNameChange(i, e.target.value)}
+                    onClick={(e) => e.stopPropagation()}
+                    placeholder={a.role}
+                    className={cn(
+                      'flex-1 min-w-0 bg-transparent text-xs font-mono text-text-0 outline-none placeholder:text-text-4',
+                      !nameValid && 'text-red-400',
+                    )}
+                    maxLength={64}
+                    spellCheck={false}
+                  />
+                  {a.provider && a.provider !== tsProvider && (
+                    <span className="text-2xs text-accent font-mono shrink-0">{a.provider}</span>
+                  )}
+                  {a.scope?.length > 0 && (
+                    <span className="text-2xs text-text-4 font-mono shrink-0 truncate max-w-[120px]">
+                      {a.scope[0]}{a.scope.length > 1 ? ` +${a.scope.length - 1}` : ''}
+                    </span>
+                  )}
+                  <ChevronDown size={10} className={cn('text-text-4 shrink-0 transition-transform duration-200', !isExpanded && '-rotate-90')} />
+                </div>
+                {isExpanded && (
+                  <div className="px-2.5 pb-2.5 pt-1 space-y-2.5 border-t border-border-subtle">
+                    <div className="flex gap-2">
+                      <div className="flex-1 space-y-1">
+                        <label className="flex items-center gap-1 text-2xs text-text-3 font-sans"><Cpu size={10} />Provider</label>
+                        <Select value={a.provider || ''} onValueChange={(id) => {
+                          const p = providers.find((x) => x.id === id);
+                          const pModels = (p?.models || []).filter((m) => m.type !== 'image' && !m.disabled);
+                          handleAgentField(i, { provider: id, model: pModels[0]?.id || '' });
+                        }}>
+                          <SelectTrigger placeholder="Team default" className="bg-surface-3 h-7 text-xs" />
+                          <SelectContent>
+                            <SelectItem value="">Team default</SelectItem>
+                            {providers.map((p) => (
+                              <SelectItem key={p.id} value={p.id}>{p.displayName || p.name || p.id}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="flex-1 space-y-1">
+                        <label className="text-2xs text-text-3 font-sans">Model</label>
+                        <Select value={a.model || ''} onValueChange={(v) => handleAgentField(i, 'model', v)}>
+                          <SelectTrigger placeholder="Auto" className="bg-surface-3 h-7 text-xs" />
+                          <SelectContent>
+                            <SelectItem value="">Auto</SelectItem>
+                            {agentModels.map((m) => (
+                              <SelectItem key={m.id} value={m.id}>{m.name || m.id}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <label className="flex items-center gap-1 text-2xs text-text-3 font-sans"><Activity size={10} />Model Routing</label>
+                      <div className="flex bg-surface-3 rounded-md p-0.5 border border-border-subtle">
+                        {[{ value: 'fixed', label: 'Fixed' }, { value: 'auto', label: 'Auto' }, { value: 'auto-floor', label: 'Auto + Floor' }].map((opt) => (
+                          <button
+                            key={opt.value}
+                            onClick={() => handleAgentField(i, 'routingMode', opt.value)}
+                            className={cn(
+                              'flex-1 px-2 py-1 text-2xs font-semibold font-sans rounded transition-all cursor-pointer',
+                              (a.routingMode || 'auto') === opt.value
+                                ? 'bg-accent/15 text-accent shadow-sm'
+                                : 'text-text-3 hover:text-text-1',
+                            )}
+                          >
+                            {opt.label}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <label className="flex items-center gap-1 text-2xs text-text-3 font-sans"><Gauge size={10} />Effort Level</label>
+                      <div className="flex bg-surface-3 rounded-md p-0.5 border border-border-subtle">
+                        {[{ value: 'min', label: 'Min' }, { value: 'low', label: 'Low' }, { value: 'default', label: 'Default' }, { value: 'high', label: 'High' }, { value: 'max', label: 'Max' }].map((opt) => (
+                          <button
+                            key={opt.value}
+                            onClick={() => handleAgentField(i, 'effort', opt.value)}
+                            className={cn(
+                              'flex-1 px-1.5 py-1 text-2xs font-semibold font-sans rounded transition-all cursor-pointer',
+                              (a.effort || 'default') === opt.value
+                                ? 'bg-accent/15 text-accent shadow-sm'
+                                : 'text-text-3 hover:text-text-1',
+                            )}
+                          >
+                            {opt.label}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+          {recommendedTeam.projectDir && (
+            <div className="flex items-center gap-1.5 text-2xs text-text-2 font-mono pt-0.5">
+              <span className="text-text-4">Project:</span>
+              <span className="text-accent">{recommendedTeam.projectDir}/</span>
+            </div>
+          )}
+          {phase2.length > 0 && (
+            <div className="flex items-center gap-1.5 text-2xs text-text-3 font-sans">
+              <Shield size={10} />
+              <span>{phase2.length} QC agent{phase2.length > 1 ? 's' : ''} will auto-spawn after builders complete</span>
+            </div>
+          )}
+        </div>
+        <div className="px-4 py-3 border-t border-border-subtle">
+          <Button variant="primary" size="md" onClick={handleLaunch} disabled={launching} className="w-full gap-2">
+            <Zap size={14} />
+            {launching ? 'Launching...' : `Launch ${phase1.length} Agent${phase1.length > 1 ? 's' : ''}`}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/packages/gui/src/components/fleet/fleet-content.jsx CHANGED Viewed

@@ -1,10 +1,21 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useRef, useCallback, useState } from 'react';
+import { useRef, useCallback, useState, useEffect } from 'react';
 import { LayoutList } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { FleetPane } from './fleet-pane';
+import { RecommendedTeamCard } from '../agents/recommended-team-card';
 export function FleetContent() {
+  const allAgents = useGrooveStore((s) => s.agents);
+  const checkRecommendedTeam = useGrooveStore((s) => s.checkRecommendedTeam);
+  const recommendedTeam = useGrooveStore((s) => s.recommendedTeam);
+  useEffect(() => {
+    const hasPlanner = allAgents.some((a) => a.role === 'planner' && (a.status === 'running' || a.status === 'starting'));
+    if (!hasPlanner) return;
+    const interval = setInterval(() => checkRecommendedTeam(), 5000);
+    return () => clearInterval(interval);
+  }, [allAgents, checkRecommendedTeam]);
   const rawSelected = useGrooveStore((s) => s.fleetSelectedAgents);
   const lastSelectedRef = useRef(rawSelected);
   if (rawSelected[0] || rawSelected[1]) lastSelectedRef.current = rawSelected;
@@ -67,7 +78,7 @@ export function FleetContent() {
   if (!selected[0] && !selected[1]) {
     return (
       <div
-        className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3"
+        className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 relative"
         onDragOver={(e) => handleDragOver(e, 'left')}
         onDragLeave={handleDragLeave}
         onDrop={(e) => handleDrop(e, 0)}
@@ -75,13 +86,15 @@ export function FleetContent() {
         <LayoutList size={32} strokeWidth={1} className="text-text-4" />
         <p className="text-sm font-sans">Select an agent or drag one here</p>
         <p className="text-xs font-sans text-text-4">Cmd+Click or drag to open side-by-side</p>
+        <RecommendedTeamCard />
       </div>
     );
   }
   if (!splitMode || !selected[1]) {
     return (
-      <div className="flex-1 flex min-w-0 min-h-0">
+      <div className="flex-1 flex min-w-0 min-h-0 relative">
+        <RecommendedTeamCard />
         <div className="flex-1 min-w-0 min-h-0">
           <FleetPane agentId={selected[0]} paneIndex={0} />
         </div>
@@ -107,7 +120,8 @@ export function FleetContent() {
   }
   return (
-    <div className="flex-1 flex min-w-0 min-h-0">
+    <div className="flex-1 flex min-w-0 min-h-0 relative">
+      <RecommendedTeamCard />
       <div
         ref={leftRef}
         className={`min-w-0 min-h-0 ${dropTarget === 'left' ? 'ring-2 ring-inset ring-accent/30' : ''}`}