groove-dev 0.27.169 → 0.27.172

package/packages/gui/src/components/fleet/fleet-sidebar.jsx

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useRef, useCallback, useMemo, useState } from 'react';
-import { Search, X, ChevronRight, Plus, Trash2 } from 'lucide-react';
+import { Search, X, ChevronRight, Plus, Trash2, Pencil, Users, Check } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { FleetAgentRow } from './fleet-agent-row';
@@ -21,9 +21,16 @@ export function FleetSidebar({ width }) {
   const toggleCollapsed = useGrooveStore((s) => s.fleetToggleTeamCollapsed);
   const setSidebarWidth = useGrooveStore((s) => s.fleetSetSidebarWidth);
   const deleteTeam = useGrooveStore((s) => s.deleteTeam);
+  const createTeam = useGrooveStore((s) => s.createTeam);
+  const renameTeam = useGrooveStore((s) => s.renameTeam);
   const openDetail = useGrooveStore((s) => s.openDetail);
+  const addToast = useGrooveStore((s) => s.addToast);
 
   const [confirmDeleteTeam, setConfirmDeleteTeam] = useState(null);
+  const [renamingTeamId, setRenamingTeamId] = useState(null);
+  const [renameValue, setRenameValue] = useState('');
+  const [creatingTeam, setCreatingTeam] = useState(false);
+  const [newTeamName, setNewTeamName] = useState('');
 
   const dragging = useRef(false);
   const startX = useRef(0);
@@ -99,6 +106,31 @@ export function FleetSidebar({ width }) {
     openDetail({ type: 'spawn', presetTeamId: teamId });
   }
 
+  async function handleCreateTeam() {
+    const name = newTeamName.trim();
+    if (!name) return;
+    try {
+      await createTeam(name);
+      setNewTeamName('');
+      setCreatingTeam(false);
+    } catch { /* toast handles */ }
+  }
+
+  async function handleRename(teamId) {
+    const name = renameValue.trim();
+    if (!name) { setRenamingTeamId(null); return; }
+    try {
+      await renameTeam(teamId, name);
+    } catch { /* toast handles */ }
+    setRenamingTeamId(null);
+  }
+
+  function startRename(e, team) {
+    e.stopPropagation();
+    setRenamingTeamId(team.id);
+    setRenameValue(team.name);
+  }
+
   return (
     <div
       className="flex-shrink-0 flex flex-col bg-surface-1 border-r border-border relative h-full"
@@ -141,49 +173,73 @@ export function FleetSidebar({ width }) {
                 'w-full flex items-center gap-1 px-2 py-1.5 rounded-md hover:bg-surface-2 transition-colors group',
                 isConfirming && 'bg-danger/10 hover:bg-danger/20',
               )}>
-                <button
-                  onClick={() => toggleCollapsed(team.id)}
-                  className="flex items-center gap-1.5 flex-1 min-w-0 cursor-pointer"
-                >
-                  <ChevronRight
-                    size={14}
-                    className={cn(
-                      'text-text-4 transition-transform flex-shrink-0',
-                      !isCollapsed && 'rotate-90',
-                    )}
-                  />
-                  <span className={cn(
-                    'text-xs font-medium font-sans truncate text-left',
-                    isConfirming ? 'text-danger' : 'text-text-1',
-                  )}>
-                    {isConfirming ? 'Click again to delete' : team.name}
-                  </span>
-                </button>
-
-                {/* Hover actions + meta — stacked in same space */}
-                <div className="flex items-center gap-0.5 flex-shrink-0">
-                  <button
-                    onClick={(e) => handleSpawnToTeam(e, team.id)}
-                    className="opacity-0 group-hover:opacity-100 p-0.5 rounded text-text-4 hover:text-accent transition-opacity cursor-pointer"
-                    title="Spawn agent to team"
-                  >
-                    <Plus size={14} />
-                  </button>
-                  <button
-                    onClick={(e) => handleDeleteTeam(e, team.id)}
-                    className={cn(
-                      'opacity-0 group-hover:opacity-100 p-0.5 rounded transition-opacity cursor-pointer',
-                      isConfirming ? 'text-danger' : 'text-text-4 hover:text-danger',
-                    )}
-                    title="Delete team"
-                  >
-                    <Trash2 size={12} />
-                  </button>
-                  <span className="group-hover:opacity-0 text-2xs text-text-4 font-mono transition-opacity">
-                    {allTeamAgents.length}
-                  </span>
-                  <span className={cn('w-1.5 h-1.5 rounded-full flex-shrink-0', teamStatusDot(allTeamAgents))} />
-                </div>
+                {renamingTeamId === team.id ? (
+                  <div className="flex items-center gap-1.5 flex-1 min-w-0 pl-1">
+                    <input
+                      value={renameValue}
+                      onChange={(e) => setRenameValue(e.target.value)}
+                      onKeyDown={(e) => { if (e.key === 'Enter') handleRename(team.id); if (e.key === 'Escape') setRenamingTeamId(null); }}
+                      autoFocus
+                      className="flex-1 min-w-0 h-6 px-1.5 text-xs bg-surface-3 border border-accent/40 rounded text-text-0 font-sans focus:outline-none"
+                    />
+                    <button onClick={() => handleRename(team.id)} className="p-0.5 text-accent cursor-pointer"><Check size={12} /></button>
+                    <button onClick={() => setRenamingTeamId(null)} className="p-0.5 text-text-4 hover:text-text-1 cursor-pointer"><X size={12} /></button>
+                  </div>
+                ) : (
+                  <>
+                    <button
+                      onClick={() => toggleCollapsed(team.id)}
+                      onDoubleClick={(e) => startRename(e, team)}
+                      className="flex items-center gap-1.5 flex-1 min-w-0 cursor-pointer"
+                    >
+                      <ChevronRight
+                        size={14}
+                        className={cn(
+                          'text-text-4 transition-transform flex-shrink-0',
+                          !isCollapsed && 'rotate-90',
+                        )}
+                      />
+                      <span className={cn(
+                        'text-xs font-medium font-sans truncate text-left',
+                        isConfirming ? 'text-danger' : 'text-text-1',
+                      )}>
+                        {isConfirming ? 'Click again to delete' : team.name}
+                      </span>
+                    </button>
+
+                    {/* Hover actions + meta — stacked in same space */}
+                    <div className="flex items-center gap-0.5 flex-shrink-0">
+                      <button
+                        onClick={(e) => startRename(e, team)}
+                        className="opacity-0 group-hover:opacity-100 p-0.5 rounded text-text-4 hover:text-accent transition-opacity cursor-pointer"
+                        title="Rename team"
+                      >
+                        <Pencil size={11} />
+                      </button>
+                      <button
+                        onClick={(e) => handleSpawnToTeam(e, team.id)}
+                        className="opacity-0 group-hover:opacity-100 p-0.5 rounded text-text-4 hover:text-accent transition-opacity cursor-pointer"
+                        title="Spawn agent to team"
+                      >
+                        <Plus size={14} />
+                      </button>
+                      <button
+                        onClick={(e) => handleDeleteTeam(e, team.id)}
+                        className={cn(
+                          'opacity-0 group-hover:opacity-100 p-0.5 rounded transition-opacity cursor-pointer',
+                          isConfirming ? 'text-danger' : 'text-text-4 hover:text-danger',
+                        )}
+                        title="Delete team"
+                      >
+                        <Trash2 size={12} />
+                      </button>
+                      <span className="group-hover:opacity-0 text-2xs text-text-4 font-mono transition-opacity">
+                        {allTeamAgents.length}
+                      </span>
+                      <span className={cn('w-1.5 h-1.5 rounded-full flex-shrink-0', teamStatusDot(allTeamAgents))} />
+                    </div>
+                  </>
+                )}
               </div>
 
               {/* Agent rows */}
@@ -206,6 +262,31 @@ export function FleetSidebar({ width }) {
         )}
       </div>
 
+      {/* Create team */}
+      <div className="px-2.5 py-2 border-t border-border-subtle flex-shrink-0">
+        {creatingTeam ? (
+          <div className="flex items-center gap-1.5">
+            <input
+              value={newTeamName}
+              onChange={(e) => setNewTeamName(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleCreateTeam(); if (e.key === 'Escape') { setCreatingTeam(false); setNewTeamName(''); } }}
+              placeholder="Team name..."
+              autoFocus
+              className="flex-1 min-w-0 h-7 px-2 text-xs bg-surface-3 border border-accent/40 rounded text-text-0 font-sans placeholder:text-text-4 focus:outline-none"
+            />
+            <button onClick={handleCreateTeam} disabled={!newTeamName.trim()} className="p-1 text-accent cursor-pointer disabled:opacity-30"><Check size={13} /></button>
+            <button onClick={() => { setCreatingTeam(false); setNewTeamName(''); }} className="p-1 text-text-4 hover:text-text-1 cursor-pointer"><X size={13} /></button>
+          </div>
+        ) : (
+          <button
+            onClick={() => setCreatingTeam(true)}
+            className="flex items-center gap-1.5 text-xs text-text-3 hover:text-accent font-sans font-medium cursor-pointer transition-colors"
+          >
+            <Users size={12} /> New Team
+          </button>
+        )}
+      </div>
+
       {/* Resize handle */}
       <div
         className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-accent/30 transition-colors z-10"

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

@@ -140,13 +140,13 @@ export function BreadcrumbBar({
   const [instanceName, setInstanceName] = useState(null);
 
   useEffect(() => {
-    if (window.groove?.getInstanceInfo) {
+    const urlParam = new URLSearchParams(window.location.search).get('instance');
+    if (urlParam) {
+      setInstanceName(urlParam);
+    } else if (window.groove?.getInstanceInfo) {
       window.groove.getInstanceInfo().then(info => {
         if (info?.name) setInstanceName(info.name);
       });
-    } else {
-      const param = new URLSearchParams(window.location.search).get('instance');
-      if (param) setInstanceName(param);
     }
   }, []);
 

package/packages/gui/src/components/settings/quick-connect.jsx

@@ -17,12 +17,14 @@ export function QuickConnect() {
   const addToast = useGrooveStore((s) => s.addToast);
   const tunnelStep = useGrooveStore((s) => s.tunnelConnectStep);
   const [connectingId, setConnectingId] = useState(null);
+  const [openingServer, setOpeningServer] = useState(null);
   const [showWizard, setShowWizard] = useState(false);
   const wizardTunnelId = useRef(null);
 
   useEffect(() => {
     if (open) {
       setShowWizard(false);
+      setOpeningServer(null);
       useGrooveStore.getState().fetchTunnels();
     }
   }, [open]);
@@ -34,14 +36,15 @@ export function QuickConnect() {
     try {
       await useGrooveStore.getState().connectTunnel(id);
       const tunnel = savedTunnels.find((t) => t.id === id);
+      setConnectingId(null);
+      setOpeningServer({ name: tunnel?.name || 'Remote' });
       if (tunnel?.host) {
         addToast('info', `Add ${tunnel.host} to Federation Whitelist?`, '', {
           label: 'Add',
           onClick: () => useGrooveStore.getState().addToWhitelist(tunnel.host),
         });
       }
-      setConnectingId(null);
-      toggle();
+      setTimeout(() => { setOpeningServer(null); toggle(); }, 4000);
       return;
     } catch (err) {
       const detail = err?.message || 'Unknown error';
@@ -90,32 +93,55 @@ export function QuickConnect() {
           exit={{ opacity: 0, y: -10, scale: 0.98 }}
           transition={{ duration: 0.15 }}
           className={cn(
-            'fixed top-[15%] left-1/2 -translate-x-1/2 z-50 bg-surface-1 border border-border rounded-lg shadow-2xl overflow-hidden',
-            showWizard ? 'w-[520px]' : 'w-[400px]',
+            'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-[#24282f] border border-[#2c313a] rounded-lg shadow-2xl overflow-hidden',
+            showWizard ? 'w-[680px]' : 'w-[480px]',
           )}
         >
           {/* Header */}
-          <div className="flex items-center justify-between px-4 py-3 border-b border-border-subtle">
-            <div className="flex items-center gap-2">
+          <div className="flex items-center justify-between px-5 py-4 border-b border-[#2c313a]">
+            <div className="flex items-center gap-3">
               {showWizard && (
                 <button
                   onClick={() => setShowWizard(false)}
-                  className="p-1 -ml-1 text-text-4 hover:text-text-1 cursor-pointer transition-colors"
+                  className="p-1.5 -ml-1 text-[#6e7681] hover:text-[#e6e8ed] cursor-pointer transition-colors"
                 >
-                  <ArrowLeft size={14} />
+                  <ArrowLeft size={16} />
                 </button>
               )}
-              <Radio size={15} className="text-accent" />
-              <span className="text-sm font-semibold text-text-0 font-sans">
+              <Radio size={17} className="text-[#33afbc]" />
+              <span className="text-base font-semibold text-[#e6e8ed]" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif", letterSpacing: '-0.2px' }}>
                 {showWizard ? (wizardTunnelId.current ? 'Connection Setup' : 'Add Connection') : 'Quick Connect'}
               </span>
             </div>
-            <button onClick={handleClose} className="p-1 text-text-4 hover:text-text-1 cursor-pointer transition-colors">
-              <X size={14} />
+            <button onClick={handleClose} className="p-1.5 text-[#6e7681] hover:text-[#e6e8ed] cursor-pointer transition-colors">
+              <X size={16} />
             </button>
           </div>
 
-          {showWizard ? (
+          {openingServer ? (
+            <div className="px-6 py-12 text-center">
+              <div className="relative w-14 h-14 mx-auto mb-5">
+                <span className="absolute inset-0 rounded-full border-2 border-[#33afbc]/20 animate-ping" style={{ animationDuration: '2s' }} />
+                <span className="absolute inset-0 rounded-full border-2 border-transparent border-t-[#33afbc] animate-spin" style={{ animationDuration: '1s' }} />
+                <span className="absolute inset-[6px] rounded-full bg-[#33afbc]/8 flex items-center justify-center">
+                  <Server size={18} className="text-[#33afbc]" />
+                </span>
+              </div>
+              <p className="text-base font-semibold text-[#e6e8ed] mb-1.5" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif" }}>
+                Opening {openingServer.name}
+              </p>
+              <p className="text-sm text-[#6e7681]" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif" }}>
+                Loading remote dashboard...
+              </p>
+              <button
+                onClick={() => { setOpeningServer(null); toggle(); }}
+                className="mt-6 text-xs text-[#6e7681] hover:text-[#e6e8ed] cursor-pointer transition-colors"
+                style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif" }}
+              >
+                Dismiss
+              </button>
+            </div>
+          ) : showWizard ? (
             <SSHWizard
               server={wizardTunnelId.current ? savedTunnels.find((t) => t.id === wizardTunnelId.current) || null : null}
               onSave={async (data) => {
@@ -145,45 +171,49 @@ export function QuickConnect() {
           ) : (
             <>
               {/* Server list */}
-              <div className="overflow-y-auto max-h-[320px] py-1">
+              <div className="overflow-y-auto max-h-[400px] py-2">
                 {savedTunnels.length === 0 ? (
-                  <div className="px-4 py-8 text-center">
-                    <Server size={24} className="text-text-4 mx-auto mb-2" />
-                    <p className="text-sm text-text-3 font-sans">No saved servers</p>
-                    <p className="text-2xs text-text-4 font-sans mt-1">Add a connection to get started.</p>
-                    <Button
-                      variant="primary"
-                      size="sm"
+                  <div className="px-6 py-10 text-center">
+                    <Server size={32} className="text-[#6e7681] mx-auto mb-3" />
+                    <p className="text-base font-semibold text-[#e6e8ed]" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif" }}>No saved servers</p>
+                    <p className="text-xs text-[#6e7681] mt-1.5" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif" }}>Add a connection to get started.</p>
+                    <button
                       onClick={() => { wizardTunnelId.current = null; setShowWizard(true); }}
-                      className="h-8 text-xs gap-1.5 mt-3"
+                      className="inline-flex items-center gap-1.5 h-9 px-5 mt-4 rounded bg-[#33afbc] text-[#0a0c10] text-sm font-semibold cursor-pointer transition-opacity hover:opacity-90"
+                      style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif" }}
                     >
-                      <Plus size={12} /> Add Connection
-                    </Button>
+                      <Plus size={14} /> Add Connection
+                    </button>
                   </div>
                 ) : (
                   savedTunnels.map((server) => (
                     <div
                       key={server.id}
                       className={cn(
-                        'w-full flex items-center gap-3 px-4 py-2.5 transition-colors',
-                        'hover:bg-surface-5',
+                        'w-full flex items-center gap-4 px-5 py-3.5 transition-colors',
+                        'hover:bg-[#2c313a]',
                         connectingId === server.id && 'opacity-60 pointer-events-none',
                       )}
                     >
-                      <Server size={15} className={server.active ? 'text-success' : 'text-text-4'} />
+                      <div className={cn(
+                        'w-10 h-10 rounded flex items-center justify-center flex-shrink-0',
+                        server.active ? 'bg-[#33afbc]/10' : 'bg-[rgba(255,255,255,0.04)]',
+                      )}>
+                        <Server size={18} className={server.active ? 'text-[#33afbc]' : 'text-[#8b95a5]'} />
+                      </div>
                       <button
                         onClick={() => server.active ? handleOpenRemote(server) : handleConnect(server.id)}
                         disabled={connectingId === server.id}
                         className="flex-1 min-w-0 text-left cursor-pointer"
                       >
                         <div className="flex items-center gap-2">
-                          <span className="text-sm font-medium text-text-0 font-sans truncate">{server.name}</span>
+                          <span className="text-sm font-semibold text-[#e6e8ed] truncate" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif", letterSpacing: '-0.2px' }}>{server.name}</span>
                           {server.active && <StatusDot status="running" size="sm" />}
                           {server.remoteVersion && (
-                            <span className="text-2xs font-mono text-text-4 ml-1">v{server.remoteVersion}</span>
+                            <span className="text-xs text-[#6e7681] ml-1" style={{ fontFamily: "ui-monospace, 'SF Mono', Monaco, monospace" }}>v{server.remoteVersion}</span>
                           )}
                         </div>
-                        <span className="text-2xs text-text-4 font-mono">{server.user}@{server.host}</span>
+                        <span className="text-xs text-[#6e7681]" style={{ fontFamily: "ui-monospace, 'SF Mono', Monaco, monospace" }}>{server.user}@{server.host}</span>
                       </button>
                       <div className="flex items-center gap-1.5 flex-shrink-0">
                         {connectingId === server.id ? (
@@ -267,12 +297,13 @@ export function QuickConnect() {
               </div>
 
               {/* Footer with Add button */}
-              <div className="px-4 py-2.5 border-t border-border-subtle">
+              <div className="px-5 py-3.5 border-t border-[#2c313a]">
                 <button
                   onClick={() => { wizardTunnelId.current = null; setShowWizard(true); }}
-                  className="flex items-center gap-1.5 text-2xs text-accent hover:text-accent/80 font-sans font-medium cursor-pointer transition-colors"
+                  className="flex items-center gap-2 text-sm text-[#33afbc] hover:opacity-80 font-semibold cursor-pointer transition-opacity"
+                  style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif" }}
                 >
-                  <Plus size={10} /> Add new connection
+                  <Plus size={14} /> Add new connection
                 </button>
               </div>
             </>