groove-dev 0.27.113 → 0.27.115

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, Eye, Settings2, Search, GripVertical, Cloud, FileText, Database, Megaphone, Calculator, UserCheck, Headphones, BarChart3, Pen, Presentation, Globe, MessageCircle, Save, 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, Archive } 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';
@@ -88,11 +88,13 @@ export function TeamTabBar() {
   const renameTeam = useGrooveStore((s) => s.renameTeam);
   const cloneTeam = useGrooveStore((s) => s.cloneTeam);
   const reorderTeams = useGrooveStore((s) => s.reorderTeams);
+  const addToast = useGrooveStore((s) => s.addToast);
 
   const [creating, setCreating] = useState(false);
   const [newName, setNewName] = useState('');
   const [renamingId, setRenamingId] = useState(null);
   const [renameValue, setRenameValue] = useState('');
+  const [archiveConfirm, setArchiveConfirm] = useState(null);
   const submitting = useRef(false);
   const [dragId, setDragId] = useState(null);
   const [dragOverId, setDragOverId] = useState(null);
@@ -247,8 +249,15 @@ export function TeamTabBar() {
                 <Copy size={12} /> Clone
               </ContextMenuItem>
               <ContextMenuSeparator />
-              <ContextMenuItem danger onSelect={() => deleteTeam(team.id)}>
-                <Trash2 size={12} /> {team.isDefault ? 'Wipe' : 'Delete'}
+              <ContextMenuItem danger onSelect={() => {
+                const teamAgents = agents.filter((a) => a.teamId === team.id);
+                if (teamAgents.some((a) => a.status === 'running' || a.status === 'starting')) {
+                  addToast('error', 'Stop running agents first');
+                  return;
+                }
+                setArchiveConfirm(team);
+              }}>
+                <Trash2 size={12} /> {team.isDefault ? 'Wipe' : 'Archive'}
               </ContextMenuItem>
             </ContextMenuContent>
           </ContextMenu>
@@ -295,6 +304,25 @@ export function TeamTabBar() {
           <ChevronRight size={14} />
         </button>
       )}
+
+      <Dialog open={!!archiveConfirm} onOpenChange={(open) => !open && setArchiveConfirm(null)}>
+        <DialogContent title="Archive Team" description="Confirm team archival">
+          <div className="px-5 py-4 space-y-3">
+            <p className="text-sm text-text-1 font-sans">
+              This will archive <span className="font-semibold text-text-0">{archiveConfirm?.name}</span>.
+            </p>
+            <p className="text-xs text-text-2 font-sans">
+              All files will be preserved and can be restored later from the Archived Teams section.
+            </p>
+          </div>
+          <div className="px-5 py-4 border-t border-border-subtle flex justify-end gap-2">
+            <Button variant="ghost" size="sm" onClick={() => setArchiveConfirm(null)}>Cancel</Button>
+            <Button variant="danger" size="sm" onClick={() => { deleteTeam(archiveConfirm.id); setArchiveConfirm(null); }}>
+              <Archive size={12} /> Archive
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

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

@@ -8,8 +8,7 @@ import { MediaViewer, isMediaFile } from '../components/editor/media-viewer';
 import { EditorStatusBar } from '../components/editor/editor-status-bar';
 import { GotoLine } from '../components/editor/goto-line';
 import { Breadcrumbs } from '../components/editor/breadcrumbs';
-import { Code2, AlertTriangle, RefreshCw, X, Eye, FileCode, PanelLeftOpen } from 'lucide-react';
-import { Button } from '../components/ui/button';
+import { Code2, Eye, FileCode, PanelLeftOpen } from 'lucide-react';
 import { api } from '../lib/api';
 import { cn } from '../lib/cn';
 
@@ -25,11 +24,8 @@ const SIDEBAR_MAX = 400;
 export default function EditorView() {
   const activeFile = useGrooveStore((s) => s.editorActiveFile);
   const files = useGrooveStore((s) => s.editorFiles);
-  const changedFiles = useGrooveStore((s) => s.editorChangedFiles);
   const updateFileContent = useGrooveStore((s) => s.updateFileContent);
   const saveFile = useGrooveStore((s) => s.saveFile);
-  const reloadFile = useGrooveStore((s) => s.reloadFile);
-  const dismissFileChange = useGrooveStore((s) => s.dismissFileChange);
   const sidebarWidth = useGrooveStore((s) => s.editorSidebarWidth);
   const setSidebarWidth = useGrooveStore((s) => s.setEditorSidebarWidth);
 
@@ -104,7 +100,6 @@ export default function EditorView() {
   const file = activeFile ? files[activeFile] : null;
   const isMedia = activeFile && isMediaFile(activeFile);
   const isHtml = activeFile && isHtmlFile(activeFile);
-  const hasExternalChange = activeFile && changedFiles[activeFile];
 
   return (
     <div className="flex h-full">
@@ -151,20 +146,6 @@ export default function EditorView() {
             />
           )}
 
-          {/* External change banner */}
-          {hasExternalChange && (
-            <div className="absolute top-0 left-0 right-0 z-10 flex items-center gap-2 px-4 py-2 bg-warning/10 border-b border-warning/20">
-              <AlertTriangle size={14} className="text-warning" />
-              <span className="text-xs text-warning font-sans flex-1">File modified externally</span>
-              <Button variant="ghost" size="sm" onClick={() => reloadFile(activeFile)}>
-                <RefreshCw size={12} /> Reload
-              </Button>
-              <Button variant="ghost" size="sm" onClick={() => dismissFileChange(activeFile)}>
-                <X size={12} /> Dismiss
-              </Button>
-            </div>
-          )}
-
           {/* Editor / Media / Empty */}
           {!activeFile && (
             <div className="w-full h-full flex items-center justify-center text-text-4 font-sans">

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

@@ -5,6 +5,7 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from '../components/ui/tabs'
 import { Button } from '../components/ui/button';
 import { Badge } from '../components/ui/badge';
 import { StatusDot } from '../components/ui/status-dot';
+import { Dialog, DialogContent } from '../components/ui/dialog';
 import { api } from '../lib/api';
 import { useToast } from '../lib/hooks/use-toast';
 import { fmtNum, fmtDollar, timeAgo, fmtUptime } from '../lib/format';
@@ -12,6 +13,7 @@ import { cn } from '../lib/cn';
 import {
   Clock, CheckCircle, XCircle, AlertTriangle, ShieldCheck, ShieldX,
   Users, Folder, Cpu, Trash2, Play, Pause, LayoutDashboard, ListChecks, Calendar,
+  Archive, RotateCcw, ChevronRight,
 } from 'lucide-react';
 
 // ── Team Dashboard ────────────────────────────────────────────
@@ -21,8 +23,18 @@ function TeamsDashboard() {
   const activeTeamId = useGrooveStore((s) => s.activeTeamId);
   const deleteTeam = useGrooveStore((s) => s.deleteTeam);
   const addToast = useGrooveStore((s) => s.addToast);
+  const archivedTeams = useGrooveStore((s) => s.archivedTeams);
+  const fetchArchivedTeams = useGrooveStore((s) => s.fetchArchivedTeams);
+  const restoreTeam = useGrooveStore((s) => s.restoreTeam);
+  const purgeTeam = useGrooveStore((s) => s.purgeTeam);
 
-  if (teams.length === 0) {
+  const [archiveConfirm, setArchiveConfirm] = useState(null);
+  const [purgeConfirm, setPurgeConfirm] = useState(null);
+  const [archivedOpen, setArchivedOpen] = useState(false);
+
+  useEffect(() => { fetchArchivedTeams(); }, []);
+
+  if (teams.length === 0 && archivedTeams.length === 0) {
     return (
       <div className="flex-1 flex items-center justify-center">
         <div className="text-center space-y-2">
@@ -74,10 +86,10 @@ function TeamsDashboard() {
                       addToast('error', 'Stop running agents first');
                       return;
                     }
-                    deleteTeam(team.id);
+                    setArchiveConfirm(team);
                   }}
                   className="p-1.5 text-text-4 hover:text-danger rounded transition-colors cursor-pointer"
-                  title="Delete team"
+                  title="Archive team"
                 >
                   <Trash2 size={13} />
                 </button>
@@ -112,6 +124,97 @@ function TeamsDashboard() {
           );
         })}
       </div>
+
+      {/* Archived Teams */}
+      {archivedTeams.length > 0 && (
+        <div className="border-t border-border-subtle">
+          <button
+            onClick={() => setArchivedOpen(!archivedOpen)}
+            className="w-full flex items-center gap-2 px-5 py-3 text-left cursor-pointer hover:bg-surface-5/30 transition-colors"
+          >
+            <ChevronRight
+              size={12}
+              className={cn('text-text-4 transition-transform duration-200', archivedOpen && 'rotate-90')}
+            />
+            <Archive size={13} className="text-text-3" />
+            <span className="text-xs font-semibold text-text-2 font-sans uppercase tracking-wider flex-1">
+              Archived Teams
+            </span>
+            <span className="text-2xs font-mono text-text-4 bg-surface-4 px-1.5 py-0.5 rounded">
+              {archivedTeams.length}
+            </span>
+          </button>
+          {archivedOpen && (
+            <div className="px-4 pb-4 space-y-2">
+              {archivedTeams.map((at) => (
+                <div key={at.id} className="flex items-center gap-3 px-3 py-2.5 rounded-md bg-surface-0 border border-border-subtle">
+                  <Archive size={13} className="text-text-4 flex-shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <span className="text-xs font-semibold text-text-1 font-sans">{at.originalName || at.name}</span>
+                    {(at.deletedAt || at.archivedAt) && (
+                      <div className="text-2xs text-text-4 font-mono mt-0.5">Archived {timeAgo(at.deletedAt || at.archivedAt)}</div>
+                    )}
+                  </div>
+                  <button
+                    onClick={() => restoreTeam(at.id)}
+                    className="p-1.5 text-text-3 hover:text-accent rounded transition-colors cursor-pointer"
+                    title="Restore team"
+                  >
+                    <RotateCcw size={13} />
+                  </button>
+                  <button
+                    onClick={() => setPurgeConfirm(at)}
+                    className="p-1.5 text-text-4 hover:text-danger rounded transition-colors cursor-pointer"
+                    title="Permanently delete"
+                  >
+                    <Trash2 size={13} />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Archive confirmation dialog */}
+      <Dialog open={!!archiveConfirm} onOpenChange={(open) => !open && setArchiveConfirm(null)}>
+        <DialogContent title="Archive Team" description="Confirm team archival">
+          <div className="px-5 py-4 space-y-3">
+            <p className="text-sm text-text-1 font-sans">
+              This will archive <span className="font-semibold text-text-0">{archiveConfirm?.name}</span>.
+            </p>
+            <p className="text-xs text-text-2 font-sans">
+              All files will be preserved and can be restored later from the Archived Teams section.
+            </p>
+          </div>
+          <div className="px-5 py-4 border-t border-border-subtle flex justify-end gap-2">
+            <Button variant="ghost" size="sm" onClick={() => setArchiveConfirm(null)}>Cancel</Button>
+            <Button variant="danger" size="sm" onClick={() => { deleteTeam(archiveConfirm.id); setArchiveConfirm(null); }}>
+              <Archive size={12} /> Archive
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Purge confirmation dialog */}
+      <Dialog open={!!purgeConfirm} onOpenChange={(open) => !open && setPurgeConfirm(null)}>
+        <DialogContent title="Permanently Delete" description="Confirm permanent deletion">
+          <div className="px-5 py-4 space-y-3">
+            <p className="text-sm text-text-1 font-sans">
+              Permanently delete <span className="font-semibold text-text-0">{purgeConfirm?.originalName || purgeConfirm?.name}</span>?
+            </p>
+            <p className="text-xs text-danger font-sans">
+              This cannot be undone. All team files will be permanently removed.
+            </p>
+          </div>
+          <div className="px-5 py-4 border-t border-border-subtle flex justify-end gap-2">
+            <Button variant="ghost" size="sm" onClick={() => setPurgeConfirm(null)}>Cancel</Button>
+            <Button variant="danger" size="sm" onClick={() => { purgeTeam(purgeConfirm.id); setPurgeConfirm(null); }}>
+              <Trash2 size={12} /> Delete Forever
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }