groove-dev 0.27.113 → 0.27.116

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

@@ -12,17 +12,30 @@ 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';
+import { TeamRemovalDialog, PurgeConfirmDialog } from '../components/teams/team-removal-dialog';
 
 // ── Team Dashboard ────────────────────────────────────────────
 function TeamsDashboard() {
   const teams = useGrooveStore((s) => s.teams);
   const agents = useGrooveStore((s) => s.agents);
   const activeTeamId = useGrooveStore((s) => s.activeTeamId);
-  const deleteTeam = useGrooveStore((s) => s.deleteTeam);
+  const archiveTeam = useGrooveStore((s) => s.archiveTeam);
+  const deleteTeamPermanently = useGrooveStore((s) => s.deleteTeamPermanently);
   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">
@@ -70,14 +83,14 @@ function TeamsDashboard() {
                 </div>
                 <button
                   onClick={() => {
-                    if (teamAgents.some((a) => a.status === 'running')) {
+                    if (teamAgents.some((a) => a.status === 'running' || a.status === 'starting')) {
                       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 +125,72 @@ 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>
+      )}
+
+      <TeamRemovalDialog
+        team={archiveConfirm}
+        open={!!archiveConfirm}
+        onOpenChange={(open) => !open && setArchiveConfirm(null)}
+        onArchive={archiveTeam}
+        onDeletePermanently={deleteTeamPermanently}
+      />
+
+      <PurgeConfirmDialog
+        team={purgeConfirm}
+        open={!!purgeConfirm}
+        onOpenChange={(open) => !open && setPurgeConfirm(null)}
+        onPurge={purgeTeam}
+      />
     </div>
   );
 }