npm - groove-dev - Versions diffs - 0.27.18 → 0.27.20 - Mend

groove-dev 0.27.18 → 0.27.20

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 (15) 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-D3rvwTHD.js"></script>
+    <script type="module" crossorigin src="/assets/index-plyUnji6.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-C0HXlhrU.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-BQPfi37R.js">
     <link rel="modulepreload" crossorigin href="/assets/codemirror-BBL3i_JW.js">
     <link rel="modulepreload" crossorigin href="/assets/xterm--7_ns2zW.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-Bg6_D2xK.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-DEPOF5Bv.css">
   </head>
   <body>
     <div id="root"></div>

package/packages/gui/src/components/layout/activity-bar.jsx CHANGED Viewed

@@ -27,7 +27,7 @@ export function ActivityBar({ activeView, detailPanel, onNavigate, onTogglePanel
     <nav className="w-12 flex-shrink-0 flex flex-col bg-surface-3 border-r border-border">
       {/* Sidebar header — aligns with BreadcrumbBar */}
       {darwinTrafficLights && (
-        <div className="h-11 flex-shrink-0 flex items-end justify-center pb-1.5 border-b border-border">
+        <div className="flex-shrink-0 flex items-center justify-center border-b border-border py-px">
           <img src="/favicon.png" alt="Groove" className="h-6 w-6 rounded-full" />
         </div>
       )}
@@ -41,8 +41,8 @@ export function ActivityBar({ activeView, detailPanel, onNavigate, onTogglePanel
               className={cn(
                 'w-8 h-8 flex items-center justify-center rounded-md transition-colors cursor-pointer',
                 activeView === item.id
-                  ? 'text-text-0 bg-surface-5'
-                  : 'text-text-3 hover:text-text-1 hover:bg-surface-4',
+                  ? 'text-accent bg-accent/10'
+                  : 'text-text-3 hover:text-accent hover:bg-accent/10',
               )}
             >
               <item.icon size={16} strokeWidth={activeView === item.id ? 2 : 1.5} />
@@ -67,8 +67,8 @@ export function ActivityBar({ activeView, detailPanel, onNavigate, onTogglePanel
                 className={cn(
                   'w-8 h-8 flex items-center justify-center rounded-md transition-colors cursor-pointer',
                   isActive
-                    ? 'text-text-0 bg-surface-5'
-                    : 'text-text-3 hover:text-text-1 hover:bg-surface-4',
+                    ? 'text-accent bg-accent/10'
+                    : 'text-text-3 hover:text-accent hover:bg-accent/10',
                 )}
               >
                 <item.icon size={16} strokeWidth={isActive ? 2 : 1.5} />

package/packages/gui/src/components/layout/breadcrumb-bar.jsx CHANGED Viewed

@@ -67,14 +67,14 @@ function UserMenu() {
       <button
         onClick={() => setOpen(!open)}
         className={cn(
-          'flex items-center gap-2 h-7 pl-1 pr-2 rounded-md transition-colors cursor-pointer select-none',
+          'flex items-center gap-2 h-7 pl-2 pr-1 rounded-md transition-colors cursor-pointer select-none',
           open ? 'bg-surface-1 border border-border' : 'hover:bg-surface-1 border border-transparent',
         )}
       >
-        <ProfilePic user={user} size={20} />
         <span className="text-xs text-text-1 font-sans font-medium max-w-[100px] truncate">
           {user?.displayName || user?.id || 'Account'}
         </span>
+        <ProfilePic user={user} size={20} />
         <ChevronDown size={10} className={cn('text-text-4 transition-transform', open && 'rotate-180')} />
       </button>
@@ -171,7 +171,7 @@ export function BreadcrumbBar({
           onClick={() => window.groove?.openFolder?.()}
           className="text-2xs font-mono font-semibold text-accent bg-accent/10 px-1.5 py-0.5 rounded flex-shrink-0 hover:bg-accent/20 transition-colors cursor-pointer"
         >
-          {instanceName}
+          /{instanceName}
         </button>
       )}
@@ -202,7 +202,7 @@ export function BreadcrumbBar({
       <button
         onClick={onOpenCommandPalette}
         className={cn(
-          'absolute left-1/2 -translate-x-1/2 flex items-center gap-2.5 h-8 px-4 rounded-md w-full max-w-md',
+          'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-2.5 h-8 px-4 rounded-md w-full max-w-md',
           'bg-surface-1 border border-border-subtle',
           'text-xs text-text-4 font-sans',
           'hover:border-border hover:text-text-3 transition-colors cursor-pointer',

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

@@ -592,6 +592,31 @@ export const useGrooveStore = create((set, get) => ({
     try { localStorage.setItem('groove:teamOrder', JSON.stringify(teams.map((t) => t.id))); } catch {}
   },
+  async cloneTeam(id) {
+    const team = get().teams.find((t) => t.id === id);
+    if (!team) return;
+    const sourceAgents = get().agents.filter((a) => a.teamId === id);
+    try {
+      const newTeam = await api.post('/teams', { name: `${team.name} (copy)` });
+      set({ activeTeamId: newTeam.id });
+      localStorage.setItem('groove:activeTeamId', newTeam.id);
+      for (const agent of sourceAgents) {
+        await api.post('/agents', {
+          role: agent.role,
+          name: agent.name,
+          provider: agent.provider,
+          model: agent.model,
+          scope: agent.scope,
+          teamId: newTeam.id,
+        });
+      }
+      get().addToast('success', `Cloned "${team.name}" with ${sourceAgents.length} agent${sourceAgents.length !== 1 ? 's' : ''}`);
+      return newTeam;
+    } catch (err) {
+      get().addToast('error', 'Failed to clone team', err.message);
+    }
+  },
   async renameTeam(id, name) {
     try {
       const team = await api.patch(`/teams/${encodeURIComponent(id)}`, { name });

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

@@ -10,7 +10,8 @@ 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, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, ChevronLeft, ChevronRight, FolderOpen } from 'lucide-react';
+import { Plus, Users, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronLeft, ChevronRight, FolderOpen } from 'lucide-react';
+import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from '../components/ui/context-menu';
 const NODE_TYPES = { agentNode: AgentNode, rootNode: RootNode };
 const NODE_W = 220;
@@ -78,7 +79,7 @@ export function TeamTabBar() {
   const createTeam = useGrooveStore((s) => s.createTeam);
   const deleteTeam = useGrooveStore((s) => s.deleteTeam);
   const renameTeam = useGrooveStore((s) => s.renameTeam);
+  const cloneTeam = useGrooveStore((s) => s.cloneTeam);
   const reorderTeams = useGrooveStore((s) => s.reorderTeams);
   const [creating, setCreating] = useState(false);
@@ -158,102 +159,96 @@ export function TeamTabBar() {
         const running = agents.filter((a) => a.teamId === team.id && (a.status === 'running' || a.status === 'starting')).length;
         return (
-          <div
-            key={team.id}
-            draggable={!isRenaming}
-            onDragStart={(e) => { setDragId(team.id); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', ''); }}
-            onDragEnd={() => { setDragId(null); setDragOverId(null); }}
-            onDragOver={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; if (dragId && dragId !== team.id) setDragOverId(team.id); }}
-            onDragLeave={() => { if (dragOverId === team.id) setDragOverId(null); }}
-            onDrop={(e) => {
-              e.preventDefault();
-              if (!dragId || dragId === team.id) return;
-              const from = teams.findIndex((t) => t.id === dragId);
-              const to = teams.findIndex((t) => t.id === team.id);
-              if (from !== -1 && to !== -1) reorderTeams(from, to);
-              setDragId(null);
-              setDragOverId(null);
-            }}
-            onClick={() => !isRenaming && switchTeam(team.id)}
-            onDoubleClick={() => startRename(team)}
-            className={cn(
-              'group relative flex items-center gap-2 px-4 h-9 text-xs font-sans cursor-pointer select-none transition-colors flex-shrink-0',
-              isActive
-                ? 'text-text-0 font-semibold border-x border-x-border bg-[#242830]'
-                : 'text-text-3 hover:text-text-1 hover:bg-surface-3/50',
-              dragId === team.id && 'opacity-40',
-              dragOverId === team.id && dragId !== team.id && 'border-l-2 !border-l-accent',
-            )}
-          >
-            {/* Thin accent line at top */}
-            {isActive && <div className="absolute top-0 left-0 right-0 h-px bg-accent" style={{ height: '0.5px' }} />}
-            {(() => {
-              const status = teamStatus(agents, team.id);
-              const iconColor = status === 'working' ? 'text-green-400'
-                : status === 'completed' ? 'text-green-400'
-                : status === 'crashed' ? 'text-red-400'
-                : isActive ? 'text-accent' : 'text-text-4';
-              return (
-                <span className="relative flex-shrink-0">
-                  <Users size={13} className={cn(iconColor, status === 'working' && 'animate-pulse')} />
-                  {status === 'working' && (
-                    <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
-                  )}
-                </span>
-              );
-            })()}
-            {isRenaming ? (
-              <input
-                value={renameValue}
-                onChange={(e) => setRenameValue(e.target.value)}
-                onKeyDown={(e) => { if (e.key === 'Enter') handleRename(); if (e.key === 'Escape') setRenamingId(null); }}
-                onBlur={handleRename}
-                className="h-5 w-24 px-1.5 text-xs bg-surface-0 border border-accent rounded text-text-0 font-sans focus:outline-none"
-                autoFocus
-                onClick={(e) => e.stopPropagation()}
-              />
-            ) : (
-              <span className="truncate max-w-[120px]">{team.name}</span>
-            )}
-            {/* Agent count badge */}
-            {count > 0 && !isRenaming && (
-              <span className={cn(
-                'flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-2xs font-mono font-semibold',
-                running > 0 ? 'bg-accent/15 text-accent' : 'bg-surface-4 text-text-3',
-              )}>
-                {count}
-              </span>
-            )}
-            {/* Actions — rename + close */}
-            {!isRenaming && (
-              <div className="flex items-center gap-0.5 ml-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-                <button
-                  onClick={(e) => { e.stopPropagation(); startRename(team); }}
-                  className="p-0.5 rounded hover:bg-surface-5 text-text-4 hover:text-text-1 cursor-pointer"
-                  title="Rename team"
-                >
-                  <Pencil size={10} />
-                </button>
-                {!team.isDefault && (
-                  <button
-                    onClick={(e) => { e.stopPropagation(); deleteTeam(team.id); }}
-                    className="p-0.5 rounded hover:bg-surface-5 text-text-4 hover:text-danger cursor-pointer"
-                    title="Delete team"
-                  >
-                    <X size={10} />
-                  </button>
+          <ContextMenu key={team.id}>
+            <ContextMenuTrigger asChild>
+              <div
+                draggable={!isRenaming}
+                onDragStart={(e) => { setDragId(team.id); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', ''); }}
+                onDragEnd={() => { setDragId(null); setDragOverId(null); }}
+                onDragOver={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; if (dragId && dragId !== team.id) setDragOverId(team.id); }}
+                onDragLeave={() => { if (dragOverId === team.id) setDragOverId(null); }}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  if (!dragId || dragId === team.id) return;
+                  const from = teams.findIndex((t) => t.id === dragId);
+                  const to = teams.findIndex((t) => t.id === team.id);
+                  if (from !== -1 && to !== -1) reorderTeams(from, to);
+                  setDragId(null);
+                  setDragOverId(null);
+                }}
+                onClick={() => !isRenaming && switchTeam(team.id)}
+                onDoubleClick={() => startRename(team)}
+                className={cn(
+                  'relative flex items-center gap-2 px-3 h-9 text-xs font-sans cursor-pointer select-none transition-colors flex-shrink-0',
+                  isActive
+                    ? 'text-text-0 font-semibold border-x border-x-border bg-[#242830]'
+                    : 'text-text-3 hover:text-text-1 hover:bg-surface-3/50',
+                  dragId === team.id && 'opacity-40',
+                  dragOverId === team.id && dragId !== team.id && 'border-l-2 !border-l-accent',
+                )}
+              >
+                {isActive && <div className="absolute top-0 left-0 right-0 h-px bg-accent" style={{ height: '0.5px' }} />}
+                {(() => {
+                  const status = teamStatus(agents, team.id);
+                  const iconColor = status === 'working' ? 'text-green-400'
+                    : status === 'completed' ? 'text-green-400'
+                    : status === 'crashed' ? 'text-red-400'
+                    : isActive ? 'text-accent' : 'text-text-4';
+                  return (
+                    <span className="relative flex-shrink-0">
+                      <Users size={13} className={cn(iconColor, status === 'working' && 'animate-pulse')} />
+                      {status === 'working' && (
+                        <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
+                      )}
+                    </span>
+                  );
+                })()}
+                {isRenaming ? (
+                  <input
+                    value={renameValue}
+                    onChange={(e) => setRenameValue(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === 'Enter') handleRename(); if (e.key === 'Escape') setRenamingId(null); }}
+                    onBlur={handleRename}
+                    className="h-5 w-24 px-1.5 text-xs bg-surface-0 border border-accent rounded text-text-0 font-sans focus:outline-none"
+                    autoFocus
+                    onClick={(e) => e.stopPropagation()}
+                  />
+                ) : (
+                  <span className="truncate max-w-[120px]">{team.name}</span>
                 )}
-              </div>
-            )}
-            {/* Bottom edge hides the parent border for active tab */}
-            {isActive && (
-              <div className="absolute bottom-[-1px] left-0 right-0 h-px bg-[#242830]" />
-            )}
-          </div>
+                {count > 0 && !isRenaming && (
+                  <span className={cn(
+                    'flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-2xs font-mono font-semibold',
+                    running > 0 ? 'bg-accent/15 text-accent' : 'bg-surface-4 text-text-3',
+                  )}>
+                    {count}
+                  </span>
+                )}
+                {isActive && (
+                  <div className="absolute bottom-[-1px] left-0 right-0 h-px bg-[#242830]" />
+                )}
+              </div>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+              <ContextMenuItem onSelect={() => startRename(team)}>
+                <Pencil size={12} /> Rename
+              </ContextMenuItem>
+              <ContextMenuItem onSelect={() => cloneTeam(team.id)}>
+                <Copy size={12} /> Clone
+              </ContextMenuItem>
+              {!team.isDefault && (
+                <>
+                  <ContextMenuSeparator />
+                  <ContextMenuItem danger onSelect={() => deleteTeam(team.id)}>
+                    <Trash2 size={12} /> Delete
+                  </ContextMenuItem>
+                </>
+              )}
+            </ContextMenuContent>
+          </ContextMenu>
         );
       })}