groove-dev 0.27.8 → 0.27.12

package/packages/gui/src/components/marketplace/repo-nuke-dialog.jsx

@@ -0,0 +1,68 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Dialog, DialogContent } from '../ui/dialog';
+import { Button } from '../ui/button';
+
+export function RepoNukeDialog({ repo, open, onClose, onConfirm }) {
+  const [deleteFiles, setDeleteFiles] = useState(true);
+
+  if (!repo) return null;
+
+  const agents = repo.agents?.length || 0;
+  const processes = repo.processes?.length || 0;
+  const credentials = repo.credentialKeys?.length || 0;
+  const fileCount = repo.fileCount || 0;
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) onClose(); }}>
+      <DialogContent title={`Nuke ${repo.repoName || repo.name}?`} description="Confirm destructive removal of imported repo">
+        <div className="px-5 py-4 space-y-4">
+          <div className="flex items-start gap-2">
+            <AlertTriangle size={16} className="text-danger flex-shrink-0 mt-0.5" />
+            <p className="text-sm text-text-1 font-sans">This cannot be undone.</p>
+          </div>
+
+          <div className="space-y-1.5 text-xs text-text-2 font-sans">
+            {agents > 0 && <div className="flex items-center gap-2">
+              <span className="text-success">✓</span> Kill {agents} agent{agents !== 1 ? 's' : ''}
+            </div>}
+            {processes > 0 && <div className="flex items-center gap-2">
+              <span className="text-success">✓</span> Stop {processes} process{processes !== 1 ? 'es' : ''}
+            </div>}
+            {credentials > 0 && <div className="flex items-center gap-2">
+              <span className="text-success">✓</span> Remove {credentials} credential{credentials !== 1 ? 's' : ''}
+            </div>}
+            <div className="flex items-center gap-2">
+              <span className="text-success">✓</span> Delete team &quot;{repo.teamId || repo.repoName || repo.name}&quot;
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-success">✓</span> Clean all .groove state
+            </div>
+          </div>
+
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={deleteFiles}
+              onChange={(e) => setDeleteFiles(e.target.checked)}
+              className="accent-[var(--color-danger)]"
+            />
+            <span className="text-xs text-text-1 font-sans">
+              Delete repo files{fileCount > 0 ? ` (${fileCount} files)` : ''}
+            </span>
+          </label>
+
+          <div className="flex items-center gap-2 pt-1">
+            <Button variant="danger" size="sm" onClick={() => onConfirm(deleteFiles)}>
+              Nuke Everything
+            </Button>
+            <Button variant="ghost" size="sm" onClick={onClose}>
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/packages/gui/src/components/pro/pro-gate.jsx

@@ -0,0 +1,22 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useGrooveStore } from '../../stores/groove';
+import { UpgradeCard } from './upgrade-card';
+
+export function ProGate({ feature, description, children }) {
+  const authenticated = useGrooveStore((s) => s.marketplaceAuthenticated);
+  const user = useGrooveStore((s) => s.marketplaceUser);
+
+  if (__GROOVE_EDITION__ !== 'pro') {
+    return <UpgradeCard feature={feature} description={description} variant="community" />;
+  }
+
+  if (!authenticated) {
+    return <UpgradeCard feature={feature} description={description} variant="sign-in" />;
+  }
+
+  if (!user?.subscription?.active) {
+    return <UpgradeCard feature={feature} description={description} variant="subscribe" />;
+  }
+
+  return children;
+}

package/packages/gui/src/components/pro/upgrade-card.jsx

@@ -0,0 +1,48 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { Lock, Download, LogIn, Sparkles } from 'lucide-react';
+import { openExternal } from '../../lib/electron';
+import { useGrooveStore } from '../../stores/groove';
+
+const VARIANTS = {
+  community: {
+    heading: 'Get Groove Desktop',
+    cta: 'Download',
+    icon: Download,
+    action: () => openExternal('https://groovedev.ai/download'),
+  },
+  'sign-in': {
+    heading: 'Sign in to unlock',
+    cta: 'Sign in',
+    icon: LogIn,
+    action: () => useGrooveStore.getState().marketplaceLogin(),
+  },
+  subscribe: {
+    heading: 'Upgrade to Pro',
+    cta: 'Subscribe',
+    icon: Sparkles,
+    action: () => openExternal('https://groovedev.ai/pro'),
+  },
+};
+
+export function UpgradeCard({ feature, description, variant = 'community' }) {
+  const v = VARIANTS[variant] || VARIANTS.community;
+  const CtaIcon = v.icon;
+
+  return (
+    <div className="rounded-lg border border-border-subtle bg-surface-1/50 px-5 py-6 text-center">
+      <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-purple/10">
+        <Lock size={18} className="text-purple" />
+      </div>
+      <h3 className="text-sm font-semibold text-text-1 font-sans">{v.heading}</h3>
+      <p className="mt-1.5 text-2xs text-text-3 font-sans">{feature}</p>
+      <p className="mt-1 text-2xs text-text-4 font-sans max-w-xs mx-auto">{description}</p>
+      <button
+        onClick={v.action}
+        className="mt-4 inline-flex items-center gap-1.5 h-7 px-4 rounded-full bg-purple/15 text-purple text-xs font-semibold font-sans hover:bg-purple/25 transition-colors cursor-pointer"
+      >
+        <CtaIcon size={13} />
+        {v.cta}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,129 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { cn } from '../../lib/cn';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+  Server, Radio, ExternalLink, Loader2, X, Plus, Settings,
+} from 'lucide-react';
+import { StatusDot } from '../ui/status-dot';
+
+export function QuickConnect() {
+  const open = useGrooveStore((s) => s.quickConnectOpen);
+  const toggle = useGrooveStore((s) => s.toggleQuickConnect);
+  const savedTunnels = useGrooveStore((s) => s.savedTunnels);
+  const [connectingId, setConnectingId] = useState(null);
+
+  if (!open) return null;
+
+  async function handleConnect(id) {
+    setConnectingId(id);
+    try {
+      await useGrooveStore.getState().connectTunnel(id);
+      toggle();
+    } catch {}
+    setConnectingId(null);
+  }
+
+  function handleOpenRemote(server) {
+    const port = server.localPort;
+    const name = encodeURIComponent(server.name);
+    window.open(`http://localhost:${port}?instance=${name}`, '_blank');
+    toggle();
+  }
+
+  return (
+    <>
+      <div className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm" onClick={toggle} />
+
+      <AnimatePresence>
+        <motion.div
+          initial={{ opacity: 0, y: -20, scale: 0.96 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: -10, scale: 0.98 }}
+          transition={{ duration: 0.15 }}
+          className="fixed top-[20%] left-1/2 -translate-x-1/2 z-50 w-[400px] bg-surface-1 border border-border rounded-lg shadow-2xl overflow-hidden"
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-border-subtle">
+            <div className="flex items-center gap-2">
+              <Radio size={15} className="text-accent" />
+              <span className="text-sm font-semibold text-text-0 font-sans">Quick Connect</span>
+            </div>
+            <button onClick={toggle} className="p-1 text-text-4 hover:text-text-1 cursor-pointer transition-colors">
+              <X size={14} />
+            </button>
+          </div>
+
+          {/* Server list */}
+          <div className="overflow-y-auto max-h-[320px] py-1">
+            {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 one in Settings to get started.</p>
+                <button
+                  onClick={() => {
+                    toggle();
+                    useGrooveStore.getState().setActiveView('settings');
+                  }}
+                  className="mt-3 inline-flex items-center gap-1.5 text-xs text-accent hover:text-accent/80 font-sans cursor-pointer transition-colors"
+                >
+                  <Settings size={12} /> Go to Settings
+                </button>
+              </div>
+            ) : (
+              savedTunnels.map((server) => (
+                <button
+                  key={server.id}
+                  onClick={() => server.active ? handleOpenRemote(server) : handleConnect(server.id)}
+                  disabled={connectingId === server.id}
+                  className={cn(
+                    'w-full flex items-center gap-3 px-4 py-2.5 text-left cursor-pointer transition-colors',
+                    'hover:bg-surface-5',
+                    connectingId === server.id && 'opacity-60 pointer-events-none',
+                  )}
+                >
+                  <Server size={15} className={server.active ? 'text-success' : 'text-text-4'} />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium text-text-0 font-sans truncate">{server.name}</span>
+                      {server.active && <StatusDot status="running" size="sm" />}
+                    </div>
+                    <span className="text-2xs text-text-4 font-mono">{server.user}@{server.host}</span>
+                  </div>
+                  <div className="flex-shrink-0">
+                    {connectingId === server.id ? (
+                      <Loader2 size={14} className="text-text-3 animate-spin" />
+                    ) : server.active ? (
+                      <span className="flex items-center gap-1 text-2xs text-success font-sans">
+                        <ExternalLink size={11} /> Open
+                      </span>
+                    ) : (
+                      <span className="text-2xs text-text-3 font-sans">Connect</span>
+                    )}
+                  </div>
+                </button>
+              ))
+            )}
+          </div>
+
+          {/* Footer */}
+          {savedTunnels.length > 0 && (
+            <div className="px-4 py-2 border-t border-border-subtle">
+              <button
+                onClick={() => {
+                  toggle();
+                  useGrooveStore.getState().setActiveView('settings');
+                }}
+                className="flex items-center gap-1.5 text-2xs text-text-4 hover:text-text-2 font-sans cursor-pointer transition-colors"
+              >
+                <Plus size={10} /> Manage servers in Settings
+              </button>
+            </div>
+          )}
+        </motion.div>
+      </AnimatePresence>
+    </>
+  );
+}

package/packages/gui/src/components/settings/remote-server-card.jsx

@@ -0,0 +1,243 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useEffect } from 'react';
+import { Badge } from '../ui/badge';
+import { StatusDot } from '../ui/status-dot';
+import { Button } from '../ui/button';
+import { useGrooveStore } from '../../stores/groove';
+import { fmtUptime } from '../../lib/format';
+import { cn } from '../../lib/cn';
+import {
+  Plug, PlugZap, Pencil, Trash2, Loader2, Check, X, AlertTriangle,
+  ExternalLink, Download, Play,
+} from 'lucide-react';
+
+export function RemoteServerCard({ server, onEdit, onDelete, onConnect, onDisconnect, onTest }) {
+  const [testResult, setTestResult] = useState(null);
+  const [testLoading, setTestLoading] = useState(false);
+  const [connecting, setConnecting] = useState(false);
+  const [connectStep, setConnectStep] = useState(null);
+
+  // Listen for tunnel.status WebSocket events for progress updates
+  useEffect(() => {
+    function handleWs(e) {
+      try {
+        const msg = JSON.parse(e.data);
+        if (msg.type === 'tunnel.status' && msg.data?.id === server.id) {
+          setConnectStep(msg.data.step);
+        }
+      } catch {}
+    }
+    const ws = useGrooveStore.getState().ws;
+    if (ws) ws.addEventListener('message', handleWs);
+    return () => { if (ws) ws.removeEventListener('message', handleWs); };
+  }, [server.id]);
+
+  async function handleTest() {
+    setTestLoading(true);
+    setTestResult(null);
+    try {
+      const result = await onTest();
+      setTestResult(result);
+    } catch (err) {
+      setTestResult({ error: err.message || 'Test failed' });
+    }
+    setTestLoading(false);
+  }
+
+  async function handleConnect() {
+    setConnecting(true);
+    setConnectStep(null);
+    setTestResult(null);
+    try {
+      await onConnect();
+      setConnectStep(null);
+    } catch (err) {
+      const tr = err?.testResult || err?.body?.testResult;
+      if (tr) {
+        setTestResult(tr);
+      } else {
+        setTestResult({ error: err?.body?.error || err?.message || 'Connection failed' });
+      }
+      setConnectStep(null);
+    }
+    setConnecting(false);
+  }
+
+  async function handleDisconnect() {
+    setConnecting(true);
+    try {
+      await onDisconnect();
+    } catch {}
+    setConnecting(false);
+  }
+
+  function handleOpenRemote() {
+    const port = server.localPort;
+    const name = encodeURIComponent(server.name);
+    window.open(`http://localhost:${port}?instance=${name}`, '_blank');
+  }
+
+  const connectLabel = connectStep === 'installing'
+    ? 'Installing Groove...'
+    : connectStep === 'starting'
+      ? 'Starting daemon...'
+      : connecting
+        ? 'Connecting...'
+        : 'Connect';
+
+  const uptimeSeconds = server.active && server.startedAt
+    ? Math.floor((Date.now() - new Date(server.startedAt).getTime()) / 1000)
+    : 0;
+
+  return (
+    <div className={cn(
+      'rounded-lg border bg-surface-2 p-4',
+      server.active ? 'border-success/40' : 'border-border-subtle',
+    )}>
+      {/* Top row: name + status */}
+      <div className="flex items-center justify-between mb-1.5">
+        <span className="text-[13px] font-semibold text-text-0 font-sans">{server.name}</span>
+        {server.active ? (
+          <Badge variant="success" className="text-2xs gap-1">
+            <StatusDot status="running" size="sm" /> Connected
+          </Badge>
+        ) : (
+          <Badge variant="default" className="text-2xs">Disconnected</Badge>
+        )}
+      </div>
+
+      {/* Connection string */}
+      <div className="text-xs text-text-3 font-mono mb-1">
+        {server.user}@{server.host}:{server.port || 22}
+      </div>
+
+      {/* SSH key path */}
+      {server.sshKeyPath && (
+        <div className="text-2xs text-text-4 font-mono truncate mb-2">
+          Key: {server.sshKeyPath}
+        </div>
+      )}
+
+      {/* Active connection stats */}
+      {server.active && (
+        <div className="flex items-center gap-3 text-2xs text-text-3 font-sans mb-2">
+          {uptimeSeconds > 0 && <span>Uptime: {fmtUptime(uptimeSeconds)}</span>}
+          {server.latencyMs != null && <span>Latency: {server.latencyMs}ms</span>}
+          {server.localPort && <span>Port: {server.localPort}</span>}
+        </div>
+      )}
+
+      {/* Connected instance explanation */}
+      {server.active && (
+        <div className="text-2xs text-text-4 bg-surface-1 rounded px-2.5 py-1.5 mb-3">
+          Separate Groove instance on your remote server. Local teams are not affected.
+        </div>
+      )}
+
+      {/* Action buttons */}
+      <div className="flex items-center gap-2">
+        {server.active ? (
+          <>
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={handleOpenRemote}
+              className="h-7 text-2xs gap-1"
+            >
+              <ExternalLink size={11} />
+              Open Remote GUI
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleDisconnect}
+              disabled={connecting}
+              className="h-7 text-2xs text-danger hover:text-danger gap-1"
+            >
+              <Plug size={11} />
+              {connecting ? 'Disconnecting...' : 'Disconnect'}
+            </Button>
+          </>
+        ) : (
+          <>
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={handleConnect}
+              disabled={connecting}
+              className="h-7 text-2xs gap-1"
+            >
+              {connecting ? <Loader2 size={11} className="animate-spin" /> : <PlugZap size={11} />}
+              {connectLabel}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleTest}
+              disabled={testLoading || connecting}
+              className="h-7 text-2xs text-text-3 gap-1"
+            >
+              {testLoading ? <Loader2 size={11} className="animate-spin" /> : <PlugZap size={11} />}
+              Test
+            </Button>
+          </>
+        )}
+        <div className="flex-1" />
+        {!server.active && (
+          <>
+            <button
+              onClick={() => onEdit(server)}
+              className="p-1.5 text-text-4 hover:text-text-1 cursor-pointer transition-colors"
+              title="Edit"
+            >
+              <Pencil size={12} />
+            </button>
+            <button
+              onClick={() => onDelete(server.id)}
+              className="p-1.5 text-text-4 hover:text-danger cursor-pointer transition-colors"
+              title="Delete"
+            >
+              <Trash2 size={12} />
+            </button>
+          </>
+        )}
+      </div>
+
+      {/* Inline test result */}
+      {testResult && !connecting && (
+        <div className={cn(
+          'mt-2 px-3 py-2 rounded-md text-2xs font-sans flex items-start gap-2',
+          testResult.error
+            ? 'bg-danger/8 border border-danger/20 text-danger'
+            : testResult.reachable
+              ? 'bg-success/8 border border-success/20 text-success'
+              : 'bg-warning/8 border border-warning/20 text-warning',
+        )}>
+          {testResult.error ? (
+            <><X size={11} className="mt-0.5 flex-shrink-0" /> {testResult.error}</>
+          ) : testResult.reachable ? (
+            <>
+              <Check size={11} className="mt-0.5 flex-shrink-0" />
+              <span>
+                {testResult.daemonRunning
+                  ? 'Connected. Groove running.'
+                  : testResult.grooveInstalled
+                    ? 'Connected. Groove installed but stopped.'
+                    : 'Connected. Groove not installed.'}
+                {!testResult.daemonRunning && ' Click Connect to set up automatically.'}
+              </span>
+            </>
+          ) : (
+            <><AlertTriangle size={11} className="mt-0.5 flex-shrink-0" /> Host unreachable</>
+          )}
+          <button
+            onClick={() => setTestResult(null)}
+            className="ml-auto text-text-4 hover:text-text-1 cursor-pointer flex-shrink-0"
+          >
+            <X size={10} />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}