groove-dev 0.27.7 → 0.27.11

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>
+  );
+}

package/packages/gui/src/components/settings/server-dialog.jsx

@@ -0,0 +1,192 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useEffect } from 'react';
+import { Dialog, DialogContent } from '../ui/dialog';
+import { Button } from '../ui/button';
+import { FolderBrowser } from '../agents/folder-browser';
+import { cn } from '../../lib/cn';
+import { FolderSearch } from 'lucide-react';
+
+export function ServerDialog({ open, onOpenChange, server, onSave }) {
+  const [name, setName] = useState('');
+  const [host, setHost] = useState('');
+  const [user, setUser] = useState('');
+  const [sshPort, setSshPort] = useState(22);
+  const [sshKeyPath, setSshKeyPath] = useState('');
+  const [autoStart, setAutoStart] = useState(false);
+  const [autoConnect, setAutoConnect] = useState(false);
+  const [keyBrowserOpen, setKeyBrowserOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      if (server) {
+        setName(server.name || '');
+        setHost(server.host || '');
+        setUser(server.user || '');
+        setSshPort(server.port || 22);
+        setSshKeyPath(server.sshKeyPath || '');
+        setAutoStart(server.autoStart || false);
+        setAutoConnect(server.autoConnect || false);
+      } else {
+        setName('');
+        setHost('');
+        setUser('');
+        setSshPort(22);
+        setSshKeyPath('');
+        setAutoStart(false);
+        setAutoConnect(false);
+      }
+    }
+  }, [open, server]);
+
+  async function handleSave() {
+    if (!name.trim() || !host.trim() || !user.trim()) return;
+    setSaving(true);
+    try {
+      const data = {
+        name: name.trim(),
+        host: host.trim(),
+        user: user.trim(),
+        port: sshPort,
+        sshKeyPath: sshKeyPath.trim(),
+        autoStart,
+        autoConnect,
+      };
+      if (server?.id) data.id = server.id;
+      await onSave(data);
+      onOpenChange(false);
+    } catch {}
+    setSaving(false);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        title={server ? `Edit ${server.name}` : 'Add Remote Server'}
+        description="Configure SSH connection to a remote server"
+        className="max-w-[460px]"
+      >
+        <div className="px-5 py-4 space-y-4">
+          {/* Name */}
+          <div>
+            <label className="text-2xs font-semibold text-text-2 font-sans mb-1.5 block">Name</label>
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="api-vps"
+              className="w-full h-9 px-3 text-xs bg-surface-0 border border-border rounded-md text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+              autoFocus
+            />
+          </div>
+
+          {/* Host */}
+          <div>
+            <label className="text-2xs font-semibold text-text-2 font-sans mb-1.5 block">Host</label>
+            <input
+              value={host}
+              onChange={(e) => setHost(e.target.value)}
+              placeholder="165.22.180.45 or hostname"
+              className="w-full h-9 px-3 text-xs bg-surface-0 border border-border rounded-md text-text-0 font-mono placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+            />
+          </div>
+
+          {/* User + SSH Port */}
+          <div className="flex gap-3">
+            <div className="flex-1">
+              <label className="text-2xs font-semibold text-text-2 font-sans mb-1.5 block">User</label>
+              <input
+                value={user}
+                onChange={(e) => setUser(e.target.value)}
+                placeholder="root"
+                className="w-full h-9 px-3 text-xs bg-surface-0 border border-border rounded-md text-text-0 font-mono placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+              />
+            </div>
+            <div className="w-24">
+              <label className="text-2xs font-semibold text-text-2 font-sans mb-1.5 block">SSH Port</label>
+              <input
+                value={sshPort}
+                onChange={(e) => setSshPort(Number(e.target.value) || 22)}
+                type="number"
+                className="w-full h-9 px-3 text-xs bg-surface-0 border border-border rounded-md text-text-0 font-mono placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+              />
+            </div>
+          </div>
+
+          {/* SSH Key */}
+          <div>
+            <label className="text-2xs font-semibold text-text-2 font-sans mb-1.5 block">SSH Key</label>
+            <div className="flex items-center gap-1.5">
+              <input
+                value={sshKeyPath}
+                onChange={(e) => setSshKeyPath(e.target.value)}
+                placeholder="~/.ssh/id_ed25519"
+                className="flex-1 h-9 px-3 text-xs bg-surface-0 border border-border rounded-md text-text-0 font-mono placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+              />
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => setKeyBrowserOpen(true)}
+                className="h-9 px-2.5 flex-shrink-0"
+              >
+                <FolderSearch size={13} />
+              </Button>
+            </div>
+          </div>
+
+          {/* Toggles */}
+          <div className="space-y-3 pt-1">
+            <label className="flex items-center justify-between cursor-pointer">
+              <span className="text-xs text-text-2 font-sans">Auto-start daemon on connect</span>
+              <ToggleSwitch value={autoStart} onChange={setAutoStart} />
+            </label>
+            <label className="flex items-center justify-between cursor-pointer">
+              <span className="text-xs text-text-2 font-sans">Auto-connect on Groove launch</span>
+              <ToggleSwitch value={autoConnect} onChange={setAutoConnect} />
+            </label>
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2 pt-2">
+            <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)} className="h-8 text-xs px-4 text-text-3">
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={handleSave}
+              disabled={!name.trim() || !host.trim() || !user.trim() || saving}
+              className="h-8 text-xs px-4"
+            >
+              {saving ? 'Saving...' : 'Save'}
+            </Button>
+          </div>
+        </div>
+
+        {/* File browser for SSH key */}
+        <FolderBrowser
+          open={keyBrowserOpen}
+          onOpenChange={setKeyBrowserOpen}
+          currentPath={sshKeyPath || '~/.ssh'}
+          onSelect={(path) => setSshKeyPath(path)}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function ToggleSwitch({ value, onChange }) {
+  return (
+    <button
+      onClick={() => onChange(!value)}
+      className={cn(
+        'w-9 h-5 rounded-full p-0.5 transition-colors cursor-pointer',
+        value ? 'bg-accent' : 'bg-surface-5',
+      )}
+    >
+      <div className={cn(
+        'w-4 h-4 rounded-full bg-white shadow-sm transition-transform',
+        value ? 'translate-x-4' : 'translate-x-0',
+      )} />
+    </button>
+  );
+}

package/packages/gui/src/components/ui/approval-modal.jsx

@@ -0,0 +1,63 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { AnimatePresence, motion } from 'framer-motion';
+import { ShieldCheck, ShieldX, AlertTriangle } from 'lucide-react';
+import { Button } from '../ui/button';
+import { useGrooveStore } from '../../stores/groove';
+
+export function ApprovalModal() {
+  const pendingApprovals = useGrooveStore((s) => s.pendingApprovals);
+  const approveRequest = useGrooveStore((s) => s.approveRequest);
+  const rejectRequest = useGrooveStore((s) => s.rejectRequest);
+
+  if (!pendingApprovals?.length) return null;
+
+  return (
+    <div className="fixed bottom-10 left-1/2 -translate-x-1/2 z-50 w-full max-w-md flex flex-col gap-2 px-4">
+      <AnimatePresence>
+        {pendingApprovals.map((approval) => (
+          <motion.div
+            key={approval.id}
+            initial={{ y: 20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: 20, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="rounded-lg border border-accent/30 bg-surface-2/95 backdrop-blur-md shadow-xl shadow-accent/5 overflow-hidden"
+          >
+            <div className="px-4 py-3 flex items-start gap-3">
+              <AlertTriangle size={16} className="text-warning shrink-0 mt-0.5" />
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-semibold text-text-0 font-sans truncate">
+                  {approval.agentName || 'Agent'} needs approval
+                </p>
+                {approval.action?.description && (
+                  <p className="text-2xs text-text-3 font-sans mt-0.5 line-clamp-2">
+                    {approval.action.description}
+                  </p>
+                )}
+              </div>
+            </div>
+            <div className="px-4 py-2.5 border-t border-border-subtle flex items-center justify-end gap-2">
+              <Button
+                size="sm"
+                variant="ghost"
+                className="text-danger hover:bg-danger/10"
+                onClick={() => rejectRequest(approval.id)}
+              >
+                <ShieldX size={14} className="mr-1" />
+                Reject
+              </Button>
+              <Button
+                size="sm"
+                variant="accent"
+                onClick={() => approveRequest(approval.id)}
+              >
+                <ShieldCheck size={14} className="mr-1" />
+                Approve
+              </Button>
+            </div>
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}

package/packages/gui/src/components/ui/toast.jsx

@@ -78,7 +78,7 @@ export function ToastContainer() {
   const toasts = useGrooveStore((s) => s.toasts);
 
   return (
-    <div className="fixed bottom-4 right-4 z-[100] flex flex-col-reverse gap-2">
+    <div className="fixed bottom-10 left-[60px] z-[100] flex flex-col-reverse gap-2">
       <AnimatePresence mode="popLayout">
         {toasts.slice(-3).map((toast) => (
           <ToastItem key={toast.id} toast={toast} />

package/packages/gui/src/lib/edition.js

@@ -0,0 +1,4 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+export const isPro = __GROOVE_EDITION__ === 'pro';
+export const edition = __GROOVE_EDITION__;

package/packages/gui/src/lib/electron.js

@@ -0,0 +1,17 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+export function isElectron() {
+  return !!(window.groove || navigator.userAgent.includes('Electron'));
+}
+
+export function getPlatform() {
+  return window.groove?.platform || 'browser';
+}
+
+export function openExternal(url) {
+  if (window.groove) {
+    window.groove.openExternal(url);
+  } else {
+    window.open(url, '_blank');
+  }
+}

package/packages/gui/src/lib/status.js

@@ -42,6 +42,7 @@ export const ROLE_COLORS = {
   analyst:    { bg: 'rgba(198, 120, 221, 0.12)', text: '#c678dd', border: '#c678dd' },
   creative:   { bg: 'rgba(229, 192, 123, 0.12)', text: '#e5c07b', border: '#e5c07b' },
   slides:     { bg: 'rgba(209, 154, 102, 0.12)', text: '#d19a66', border: '#d19a66' },
+  chat:       { bg: 'rgba(198, 120, 221, 0.12)', text: '#c678dd', border: '#c678dd' },
 };
 
 export function roleColor(role) {