groove-dev 0.27.8 → 0.27.12

package/node_modules/@groove-dev/gui/src/components/layout/app-shell.jsx

@@ -2,6 +2,8 @@
 import { useMemo } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import { useKeyboard } from '../../lib/hooks/use-keyboard';
+import { isElectron } from '../../lib/electron';
+import { cn } from '../../lib/cn';
 import { TooltipProvider } from '../ui/tooltip';
 import { ToastContainer } from '../ui/toast';
 import { ActivityBar } from './activity-bar';
@@ -9,6 +11,8 @@ import { BreadcrumbBar } from './breadcrumb-bar';
 import { StatusBar } from './status-bar';
 import { DetailPanel } from './detail-panel';
 import { CommandPalette } from './command-palette';
+import { ApprovalModal } from '../ui/approval-modal';
+import { QuickConnect } from '../settings/quick-connect';
 import { TeamTabBar } from '../../views/agents';
 
 export function AppShell({ children, detailContent, terminalContent }) {
@@ -55,7 +59,7 @@ export function AppShell({ children, detailContent, terminalContent }) {
 
   return (
     <TooltipProvider>
-      <div className="w-full h-full flex flex-col bg-surface-2 text-text-1 font-sans">
+      <div className={cn('w-full h-full flex flex-col bg-surface-2 text-text-1 font-sans', isElectron() && 'electron-app')}>
         <BreadcrumbBar
           activeView={activeView}
           connected={connected}
@@ -113,6 +117,8 @@ export function AppShell({ children, detailContent, terminalContent }) {
         />
 
         <CommandPalette />
+        <QuickConnect />
+        <ApprovalModal />
         <ToastContainer />
       </div>
     </TooltipProvider>

package/node_modules/@groove-dev/gui/src/components/layout/breadcrumb-bar.jsx

@@ -1,6 +1,7 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { Search, Plus, ChevronRight } from 'lucide-react';
 import { cn } from '../../lib/cn';
+import { isElectron, getPlatform } from '../../lib/electron';
 
 const VIEW_LABELS = {
   agents: 'Agents',
@@ -23,17 +24,34 @@ export function BreadcrumbBar({
     crumbs.push(editorActiveFile.split('/').pop());
   }
 
+  const electron = isElectron();
+  const darwinDrag = electron && getPlatform() === 'darwin';
+
   return (
-    <header className="h-11 flex-shrink-0 flex items-center gap-3 px-4 bg-surface-3 border-b border-border">
+    <header
+      className={cn(
+        'h-11 flex-shrink-0 flex items-center gap-3 px-4 bg-surface-3 border-b border-border',
+        darwinDrag && 'pl-20 electron-drag electron-no-drag-children',
+      )}
+    >
       {/* Logo */}
       <img src="/favicon.png" alt="Groove" className="h-7 w-7 rounded-full flex-shrink-0" />
 
-      {/* Host badge */}
-      {daemonHost && (
-        <span className="text-2xs font-mono font-semibold text-text-3 bg-surface-5 px-1.5 py-0.5 rounded flex-shrink-0">
-          {daemonHost}
-        </span>
-      )}
+      {/* Host badge — show instance name from ?instance= or raw host */}
+      {(() => {
+        const instance = new URLSearchParams(window.location.search).get('instance');
+        if (instance) return (
+          <span className="text-2xs font-mono font-semibold text-accent bg-accent/10 px-1.5 py-0.5 rounded flex-shrink-0">
+            {instance}
+          </span>
+        );
+        if (daemonHost) return (
+          <span className="text-2xs font-mono font-semibold text-text-3 bg-surface-5 px-1.5 py-0.5 rounded flex-shrink-0">
+            {daemonHost}
+          </span>
+        );
+        return null;
+      })()}
 
       <div className="flex-1 min-w-4" />
 
@@ -43,7 +61,7 @@ export function BreadcrumbBar({
         className={cn(
           'flex items-center gap-2.5 h-8 px-4 rounded-full w-full max-w-md',
           'bg-surface-1 border border-border-subtle',
-          'text-sm text-text-4 font-sans',
+          'text-xs text-text-4 font-sans',
           'hover:border-border hover:text-text-3 transition-colors cursor-pointer',
         )}
       >

package/node_modules/@groove-dev/gui/src/components/layout/command-palette.jsx

@@ -4,7 +4,7 @@ import { useGrooveStore } from '../../stores/groove';
 import {
   Network, Code2, ChartSpline, Puzzle, Users, Plus,
   RotateCw, Skull, MessageSquare, Terminal, Newspaper,
-  Search,
+  Search, Radio, ExternalLink,
 } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -26,6 +26,7 @@ export function CommandPalette() {
   const open = useGrooveStore((s) => s.commandPaletteOpen);
   const toggle = useGrooveStore((s) => s.toggleCommandPalette);
   const agents = useGrooveStore((s) => s.agents);
+  const savedTunnels = useGrooveStore((s) => s.savedTunnels);
   const store = useGrooveStore;
 
   const [query, setQuery] = useState('');
@@ -41,8 +42,17 @@ export function CommandPalette() {
         { id: `kill:${a.id}`, label: `Kill ${a.name}`, icon: Skull, category: 'Agents', action: (s) => { s.killAgent(a.id); } },
       ] : []),
     ]);
-    return [...STATIC_COMMANDS, ...agentCommands];
-  }, [agents]);
+    const tunnelCommands = [
+      { id: 'action:quickconnect', label: 'Quick Connect', icon: Radio, category: 'Remote', action: (s) => { s.toggleQuickConnect(); } },
+      ...savedTunnels.map((t) => t.active
+        ? { id: `tunnel:open:${t.id}`, label: `Open ${t.name}`, icon: ExternalLink, category: 'Remote', action: () => {
+            window.open(`http://localhost:${t.localPort}?instance=${encodeURIComponent(t.name)}`, '_blank');
+          }}
+        : { id: `tunnel:connect:${t.id}`, label: `Connect to ${t.name}`, icon: Radio, category: 'Remote', action: (s) => { s.connectTunnel(t.id); } }
+      ),
+    ];
+    return [...STATIC_COMMANDS, ...agentCommands, ...tunnelCommands];
+  }, [agents, savedTunnels]);
 
   // Filter
   const filtered = useMemo(() => {
@@ -104,7 +114,7 @@ export function CommandPalette() {
               value={query}
               onChange={(e) => { setQuery(e.target.value); setSelectedIndex(0); }}
               placeholder="Type a command..."
-              className="flex-1 bg-transparent text-sm text-text-0 font-sans placeholder:text-text-4 focus:outline-none"
+              className="flex-1 bg-transparent text-xs text-text-0 font-sans placeholder:text-text-4 focus:outline-none"
             />
           </div>
 

package/node_modules/@groove-dev/gui/src/components/layout/status-bar.jsx

@@ -1,8 +1,10 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { Terminal, BookOpen } from 'lucide-react';
+import { Terminal, BookOpen, Radio, Plug } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { StatusDot } from '../ui/status-dot';
 import { fmtUptime } from '../../lib/format';
+import { useGrooveStore } from '../../stores/groove';
+import { isElectron, openExternal } from '../../lib/electron';
 
 export function StatusBar({
   connected,
@@ -12,6 +14,10 @@ export function StatusBar({
   terminalVisible,
   onToggleTerminal,
 }) {
+  const savedTunnels = useGrooveStore((s) => s.savedTunnels);
+  const activeTunnel = savedTunnels.find((t) => t.active);
+  const electron = isElectron();
+
   return (
     <footer className="h-6 flex-shrink-0 flex items-center px-3 bg-surface-3 border-t border-border text-2xs font-sans select-none">
       {/* Left: connection + stats */}
@@ -19,7 +25,7 @@ export function StatusBar({
         <div className="flex items-center gap-1.5">
           <StatusDot status={connected ? 'running' : 'crashed'} size="sm" />
           <span className={connected ? 'text-text-2' : 'text-danger'}>
-            {connected ? 'Connected' : 'Offline'}
+            {connected ? (electron ? 'Desktop' : 'Connected') : 'Offline'}
           </span>
         </div>
         {connected && uptime > 0 && (
@@ -28,20 +34,49 @@ export function StatusBar({
         {connected && agentCount > 0 && (
           <span className="text-text-4">{runningCount}/{agentCount} agents</span>
         )}
+        {activeTunnel ? (
+          <button
+            onClick={() => {
+              const port = activeTunnel.localPort;
+              const name = encodeURIComponent(activeTunnel.name);
+              openExternal(`http://localhost:${port}?instance=${name}`);
+            }}
+            className="flex items-center gap-1.5 text-text-3 hover:text-text-1 cursor-pointer transition-colors"
+            title="Open remote GUI"
+          >
+            <Radio size={10} className="text-success" />
+            <span>{activeTunnel.name}</span>
+            <span className="w-1.5 h-1.5 rounded-full bg-success" />
+            {activeTunnel.latencyMs != null && (
+              <span className="text-text-4">{activeTunnel.latencyMs}ms</span>
+            )}
+          </button>
+        ) : savedTunnels.length > 0 && (
+          <button
+            onClick={() => useGrooveStore.getState().toggleQuickConnect()}
+            className="flex items-center gap-1.5 text-text-4 hover:text-text-1 cursor-pointer transition-colors"
+            title="Quick Connect to remote server"
+          >
+            <Plug size={10} />
+            <span>Connect</span>
+          </button>
+        )}
       </div>
 
       <div className="flex-1" />
 
       {/* Right: docs + terminal toggle */}
-      <a
-        href="https://docs.groovedev.ai"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="flex items-center gap-1.5 px-2 h-full text-text-3 hover:text-text-1 hover:bg-surface-5 transition-colors no-underline"
-      >
-        <BookOpen size={12} />
-        <span>Docs</span>
-      </a>
+      {!electron && (
+        <a
+          href="https://docs.groovedev.ai"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 px-2 h-full text-text-3 hover:text-text-1 hover:bg-surface-5 transition-colors no-underline"
+        >
+          <BookOpen size={12} />
+          <span>Docs</span>
+        </a>
+      )}
       <button
         onClick={onToggleTerminal}
         className={cn(

package/node_modules/@groove-dev/gui/src/components/marketplace/repo-card.jsx

@@ -0,0 +1,64 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { FolderOpen, Trash2, Bomb } from 'lucide-react';
+import { Badge } from '../ui/badge';
+import { cn } from '../../lib/cn';
+import { timeAgo } from '../../lib/format';
+
+export function RepoCard({ repo, onRemove, onNuke, onOpen }) {
+  return (
+    <div className="rounded-lg border border-border-subtle bg-surface-2 p-3 flex items-center gap-3">
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-semibold text-text-0 font-sans truncate">{repo.repoName || repo.name}</span>
+          <span className="text-2xs text-text-3 font-sans">{repo.repoOwner || repo.owner}</span>
+        </div>
+        <div className="flex items-center gap-2 mt-0.5">
+          {repo.language && <Badge variant="outline" className="text-2xs">{repo.language}</Badge>}
+          <span className="text-2xs text-text-4 font-mono truncate max-w-[180px]">{repo.clonedTo || repo.path}</span>
+        </div>
+        <span className="text-2xs text-text-4 font-sans mt-0.5 block">
+          {repo.clonedAt ? `Imported ${timeAgo(repo.clonedAt)}` : repo.status || ''}
+        </span>
+      </div>
+
+      <div className="flex items-center gap-1 flex-shrink-0">
+        {onOpen && (
+          <button
+            onClick={() => onOpen(repo)}
+            className={cn(
+              'flex items-center gap-1 px-2 py-1 rounded text-2xs font-sans cursor-pointer',
+              'text-accent bg-accent/10 hover:bg-accent/20 border-0 transition-colors',
+            )}
+          >
+            <FolderOpen size={11} />
+            Open
+          </button>
+        )}
+        {onRemove && (
+          <button
+            onClick={() => onRemove(repo)}
+            className={cn(
+              'flex items-center gap-1 px-2 py-1 rounded text-2xs font-sans cursor-pointer',
+              'text-text-3 hover:text-text-1 hover:bg-surface-4 bg-transparent border-0 transition-colors',
+            )}
+          >
+            <Trash2 size={11} />
+            Remove
+          </button>
+        )}
+        {onNuke && (
+          <button
+            onClick={() => onNuke(repo)}
+            className={cn(
+              'flex items-center gap-1 px-2 py-1 rounded text-2xs font-sans cursor-pointer',
+              'text-danger bg-danger/10 hover:bg-danger/20 border-0 transition-colors',
+            )}
+          >
+            <Bomb size={11} />
+            Nuke
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/marketplace/repo-import.jsx

@@ -0,0 +1,363 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useCallback } from 'react';
+import {
+  Search, GitBranch, Star, ExternalLink, Loader2, Check,
+  FolderOpen, HardDrive, Package, PenLine, Users, ArrowLeft, Download,
+} from 'lucide-react';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import { cn } from '../../lib/cn';
+import { fmtNum } from '../../lib/format';
+import { useGrooveStore } from '../../stores/groove';
+import { useToast } from '../../lib/hooks/use-toast';
+
+const GITHUB_RE = /github\.com\/([^/]+)\/([^/\s#?]+)/;
+
+export function RepoImport() {
+  const [step, setStep] = useState('input');
+  const [url, setUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [preview, setPreview] = useState(null);
+  const [pathOption, setPathOption] = useState('standalone');
+  const [customPath, setCustomPath] = useState('');
+  const [createTeam, setCreateTeam] = useState(true);
+  const [teamName, setTeamName] = useState('');
+
+  const previewRepo = useGrooveStore((s) => s.previewRepo);
+  const importRepo = useGrooveStore((s) => s.importRepo);
+  const importInProgress = useGrooveStore((s) => s.importInProgress);
+  const toast = useToast();
+
+  const doPreview = useCallback(async (repoUrl) => {
+    const match = repoUrl.match(GITHUB_RE);
+    if (!match) return;
+    setLoading(true);
+    try {
+      const data = await previewRepo(repoUrl);
+      setPreview(data);
+      setTeamName(data.name || match[2]);
+      setStep('preview');
+    } catch (err) {
+      toast.error('Preview failed', err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [previewRepo, toast]);
+
+  const handleUrlChange = useCallback((e) => {
+    const val = e.target.value;
+    setUrl(val);
+    if (GITHUB_RE.test(val) && step === 'input') {
+      doPreview(val);
+    }
+  }, [step, doPreview]);
+
+  const handleImport = useCallback(async () => {
+    if (!preview) return;
+    let targetPath;
+    if (pathOption === 'standalone') targetPath = `~/Projects/${preview.name}`;
+    else if (pathOption === 'subdirectory') targetPath = `./packages/${preview.name}`;
+    else targetPath = customPath;
+    try {
+      await importRepo(url, targetPath, createTeam, teamName);
+      toast.success(`Importing ${preview.name}`, 'Setup agent will handle the rest');
+      setStep('input');
+      setUrl('');
+      setPreview(null);
+    } catch (err) {
+      toast.error('Import failed', err.message);
+    }
+  }, [preview, pathOption, customPath, url, createTeam, teamName, importRepo, toast]);
+
+  // ── Step 1: URL Input ──────────────────────────────────
+  if (step === 'input') {
+    return (
+      <div className="relative">
+        <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-4 pointer-events-none" />
+        <input
+          type="text"
+          value={url}
+          onChange={handleUrlChange}
+          placeholder="Paste a GitHub URL..."
+          className={cn(
+            'w-full h-9 rounded-lg pl-9 pr-20 text-sm font-sans',
+            'bg-surface-1 border border-border text-text-0',
+            'placeholder:text-text-4',
+            'focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent',
+            'transition-colors duration-100',
+          )}
+        />
+        <Button
+          variant="primary"
+          size="sm"
+          className="absolute right-1.5 top-1/2 -translate-y-1/2"
+          onClick={() => doPreview(url)}
+          disabled={!GITHUB_RE.test(url) || loading}
+        >
+          {loading ? <Loader2 size={12} className="animate-spin" /> : 'Preview'}
+        </Button>
+      </div>
+    );
+  }
+
+  // ── Step 2: Preview ────────────────────────────────────
+  if (step === 'preview' && preview) {
+    return (
+      <div className="space-y-4">
+        <div className="rounded-lg border border-border-subtle bg-surface-2 p-5">
+          <div className="flex items-start gap-4">
+            <div className="w-12 h-12 rounded-xl bg-accent/8 flex items-center justify-center flex-shrink-0">
+              <GitBranch size={22} className="text-accent" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2.5 mb-1">
+                <span className="text-lg font-bold text-text-0 font-sans">{preview.name}</span>
+                <span className="text-xs text-text-4 font-sans">{preview.owner}</span>
+              </div>
+              <div className="flex items-center gap-3 text-2xs text-text-3 font-sans">
+                {preview.language && <Badge variant="outline" className="text-2xs">{preview.language}</Badge>}
+                {preview.stars != null && (
+                  <span className="flex items-center gap-1">
+                    <Star size={10} className="text-warning" fill="currentColor" />
+                    {fmtNum(preview.stars)}
+                  </span>
+                )}
+                {preview.license && <span>{preview.license}</span>}
+              </div>
+            </div>
+            <div className="flex items-center gap-2 flex-shrink-0">
+              <Button variant="primary" size="sm" onClick={() => setStep('configure')} className="h-8 text-xs gap-1.5 px-4">
+                <FolderOpen size={13} />
+                Clone & Setup
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => window.open(url.startsWith('http') ? url : `https://${url}`, '_blank')}
+                className="h-8 text-xs gap-1.5"
+              >
+                <ExternalLink size={12} />
+                GitHub
+              </Button>
+              <button
+                onClick={() => { setStep('input'); setPreview(null); }}
+                className="text-2xs text-text-4 font-sans hover:text-text-2 cursor-pointer bg-transparent border-0 ml-1"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {preview.description && (
+          <div className="rounded-lg border border-border-subtle bg-surface-1 px-5 py-4">
+            <h4 className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-2">About</h4>
+            <p className="text-sm text-text-1 font-sans leading-relaxed">{preview.description}</p>
+          </div>
+        )}
+
+        {preview.readmePreview && (
+          <div className="rounded-lg border border-border-subtle bg-surface-1 px-5 py-4">
+            <h4 className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-3">README</h4>
+            <div className="text-sm text-text-2 font-sans leading-relaxed whitespace-pre-wrap">{preview.readmePreview}</div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // ── Step 3: Configure ──────────────────────────────────
+  if (step === 'configure' && preview) {
+    const pathOptions = [
+      {
+        id: 'standalone',
+        icon: HardDrive,
+        title: 'Standalone project',
+        description: 'Clone to its own directory, separate from this workspace',
+        path: `~/Projects/${preview.name}`,
+      },
+      {
+        id: 'subdirectory',
+        icon: Package,
+        title: 'Workspace package',
+        description: 'Add as a package inside this project\'s monorepo',
+        path: `./packages/${preview.name}`,
+      },
+      {
+        id: 'custom',
+        icon: PenLine,
+        title: 'Custom location',
+        description: 'Choose your own path',
+        path: null,
+      },
+    ];
+
+    return (
+      <div className="rounded-xl border border-border-subtle bg-surface-2 overflow-hidden">
+        {/* Header */}
+        <div className="px-5 py-4 border-b border-border-subtle bg-surface-3/50">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-lg bg-accent/10 flex items-center justify-center flex-shrink-0">
+              <Download size={16} className="text-accent" />
+            </div>
+            <div>
+              <h3 className="text-sm font-semibold text-text-0 font-sans">
+                Clone {preview.name}
+              </h3>
+              <p className="text-2xs text-text-4 font-sans mt-0.5">
+                {preview.owner}/{preview.name} — configure where to install
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="px-5 py-4 space-y-5">
+          {/* Location picker */}
+          <div>
+            <label className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-2.5 block">
+              Install location
+            </label>
+            <div className="space-y-2">
+              {pathOptions.map((opt) => {
+                const Icon = opt.icon;
+                const selected = pathOption === opt.id;
+                return (
+                  <button
+                    key={opt.id}
+                    onClick={() => setPathOption(opt.id)}
+                    className={cn(
+                      'w-full text-left rounded-lg border p-3.5 transition-all duration-150 cursor-pointer',
+                      selected
+                        ? 'border-accent bg-accent/5 ring-1 ring-accent/30'
+                        : 'border-border-subtle bg-surface-1 hover:border-border hover:bg-surface-1/80',
+                    )}
+                  >
+                    <div className="flex items-start gap-3">
+                      <div className={cn(
+                        'w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0 mt-0.5',
+                        selected ? 'bg-accent/15 text-accent' : 'bg-surface-3 text-text-4',
+                      )}>
+                        <Icon size={15} />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className={cn(
+                            'text-xs font-semibold font-sans',
+                            selected ? 'text-text-0' : 'text-text-2',
+                          )}>
+                            {opt.title}
+                          </span>
+                          {selected && (
+                            <div className="w-4 h-4 rounded-full bg-accent flex items-center justify-center">
+                              <Check size={10} className="text-white" />
+                            </div>
+                          )}
+                        </div>
+                        <p className="text-2xs text-text-4 font-sans mt-0.5 leading-relaxed">
+                          {opt.description}
+                        </p>
+                        {opt.path && selected && (
+                          <code className="text-2xs text-accent/80 font-mono mt-1.5 block truncate">
+                            {opt.path}
+                          </code>
+                        )}
+                      </div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Custom path input */}
+            {pathOption === 'custom' && (
+              <div className="mt-2.5 ml-11">
+                <input
+                  value={customPath}
+                  onChange={(e) => setCustomPath(e.target.value)}
+                  placeholder="/path/to/clone"
+                  autoFocus
+                  className={cn(
+                    'w-full h-9 px-3 text-xs font-mono rounded-md',
+                    'bg-surface-0 border border-border text-text-0',
+                    'placeholder:text-text-4',
+                    'focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent',
+                    'transition-colors',
+                  )}
+                />
+              </div>
+            )}
+          </div>
+
+          {/* Team toggle */}
+          <div className="border-t border-border-subtle pt-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2.5">
+                <div className="w-8 h-8 rounded-md bg-surface-3 flex items-center justify-center">
+                  <Users size={14} className="text-text-4" />
+                </div>
+                <div>
+                  <span className="text-xs font-semibold text-text-2 font-sans block">Create a team</span>
+                  <span className="text-2xs text-text-4 font-sans">Organize agents working on this repo into their own team</span>
+                </div>
+              </div>
+              <button
+                onClick={() => setCreateTeam(!createTeam)}
+                className={cn(
+                  'w-9 h-5 rounded-full p-0.5 transition-colors cursor-pointer flex-shrink-0',
+                  createTeam ? 'bg-accent' : 'bg-surface-5',
+                )}
+              >
+                <div className={cn(
+                  'w-4 h-4 rounded-full bg-white shadow-sm transition-transform',
+                  createTeam ? 'translate-x-4' : 'translate-x-0',
+                )} />
+              </button>
+            </div>
+            {createTeam && (
+              <div className="mt-2.5 ml-11">
+                <input
+                  value={teamName}
+                  onChange={(e) => setTeamName(e.target.value)}
+                  placeholder="Team name"
+                  className={cn(
+                    'w-full h-9 px-3 text-xs font-sans rounded-md',
+                    'bg-surface-0 border border-border text-text-0',
+                    'placeholder:text-text-4',
+                    'focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent',
+                    'transition-colors',
+                  )}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="px-5 py-3.5 border-t border-border-subtle bg-surface-3/30 flex items-center justify-between">
+          <button
+            onClick={() => setStep('preview')}
+            className="flex items-center gap-1.5 text-2xs text-text-4 font-sans hover:text-text-2 cursor-pointer bg-transparent border-0 transition-colors"
+          >
+            <ArrowLeft size={11} />
+            Back
+          </button>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={handleImport}
+            disabled={importInProgress || (pathOption === 'custom' && !customPath.trim())}
+            className="h-8 text-xs gap-1.5 px-5"
+          >
+            {importInProgress ? (
+              <><Loader2 size={12} className="animate-spin" /> Importing...</>
+            ) : (
+              <><Download size={12} /> Clone & Setup</>
+            )}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}