groove-dev 0.27.74 → 0.27.77

package/packages/gui/src/components/layout/welcome-splash.jsx

@@ -1,121 +1,248 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import { HEX, hexAlpha } from '../../lib/theme-hex';
 import { cn } from '../../lib/cn';
-import { Zap, FolderOpen, Radio } from 'lucide-react';
+import {
+  FolderOpen, Radio, X, Plus, ExternalLink, Loader2, Unplug,
+} from 'lucide-react';
 import { FolderBrowser } from '../agents/folder-browser';
 import { QuickConnect } from '../settings/quick-connect';
+import { StatusDot } from '../ui/status-dot';
 import { ToastContainer } from '../ui/toast';
 
 export function WelcomeSplash() {
   const recentProjects = useGrooveStore((s) => s.recentProjects);
   const setProjectDir = useGrooveStore((s) => s.setProjectDir);
+  const removeRecentProject = useGrooveStore((s) => s.removeRecentProject);
   const remoteHomedir = useGrooveStore((s) => s.remoteHomedir);
+  const savedTunnels = useGrooveStore((s) => s.savedTunnels);
+  const fetchTunnels = useGrooveStore((s) => s.fetchTunnels);
+  const deleteTunnel = useGrooveStore((s) => s.deleteTunnel);
+  const connectTunnel = useGrooveStore((s) => s.connectTunnel);
+  const disconnectTunnel = useGrooveStore((s) => s.disconnectTunnel);
+  const toggleQuickConnect = useGrooveStore((s) => s.toggleQuickConnect);
+  const addToast = useGrooveStore((s) => s.addToast);
+
   const [browsing, setBrowsing] = useState(false);
+  const [connectingId, setConnectingId] = useState(null);
+
+  useEffect(() => { fetchTunnels(); }, [fetchTunnels]);
+
+  const visibleProjects = (recentProjects || []).slice(0, 8);
+  const hasRecent = visibleProjects.length > 0;
+  const hasTunnels = savedTunnels.length > 0;
+  const hasRightContent = hasRecent || hasTunnels;
 
-  const visibleProjects = (recentProjects || []).slice(0, 6);
+  async function handleTunnelClick(server) {
+    if (server.active) {
+      if (window.groove?.remote?.openWindow) {
+        window.groove.remote.openWindow(server.localPort, server.name);
+      } else {
+        window.open(`http://localhost:${server.localPort}?instance=${encodeURIComponent(server.name)}`, '_blank');
+      }
+      return;
+    }
+    setConnectingId(server.id);
+    try {
+      await connectTunnel(server.id);
+    } catch (err) {
+      addToast('error', 'Connection failed', err?.message || 'Unknown error');
+    }
+    setConnectingId(null);
+  }
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto"
+      className="fixed inset-0 z-50 flex items-center justify-center"
       style={{ background: `radial-gradient(ellipse at 50% 40%, ${hexAlpha(HEX.accent, 0.06)} 0%, transparent 70%) ${HEX.surface0}` }}
     >
-      <div className="max-w-2xl w-full px-8 py-16 flex flex-col items-center text-center">
-        {/* Hero icon */}
-        <div
-          className="w-24 h-24 rounded-full flex items-center justify-center mb-6"
-          style={{
-            background: hexAlpha(HEX.accent, 0.08),
-            border: `1px solid ${hexAlpha(HEX.accent, 0.15)}`,
-            boxShadow: `0 0 40px ${hexAlpha(HEX.accent, 0.1)}`,
-          }}
-        >
-          <img src="/favicon.png" className="w-12 h-12 rounded-full" alt="Groove" />
-        </div>
-
-        {/* Headline */}
-        <h1 className="text-3xl font-bold text-text-0 font-sans tracking-tight">Welcome to Groove</h1>
-        <p className="text-sm text-text-2 font-sans mt-2">Your AI coding team, ready in minutes</p>
-
-        {/* Primary action */}
-        <div className="w-full mt-10">
-          <button
-            onClick={() => useGrooveStore.setState({ showProjectPicker: false })}
-            className="w-full flex items-center gap-4 p-5 rounded-lg border border-accent/25 bg-gradient-to-r from-accent/8 to-accent/3 hover:from-accent/14 hover:to-accent/6 hover:border-accent/40 transition-all cursor-pointer group text-left"
-          >
-            <div className="w-12 h-12 rounded-lg bg-accent/20 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
-              <Zap size={24} className="text-accent" />
-            </div>
-            <div className="flex-1 min-w-0">
-              <div className="text-base font-semibold text-text-0 font-sans">Start with a Planner</div>
-              <div className="text-sm text-text-2 font-sans mt-0.5">Describe what you want to build and let AI plan the perfect team</div>
+      <div className={cn(
+        'w-full max-w-4xl px-8 flex gap-12',
+        hasRightContent ? 'items-start' : 'items-center justify-center',
+        'max-md:flex-col max-md:items-center max-md:gap-8 max-md:overflow-y-auto max-md:max-h-[100vh] max-md:py-12',
+      )}>
+        {/* ── Left Panel ─────────────────────────────────────── */}
+        <div className={cn(
+          'flex flex-col',
+          hasRightContent ? 'w-[55%] max-md:w-full' : 'w-full max-w-lg',
+          hasRightContent ? 'pt-[10vh]' : 'items-center text-center',
+        )}>
+          {/* Hero */}
+          <div className={cn('flex items-center gap-4 mb-6', !hasRightContent && 'flex-col')}>
+            <div
+              className="w-16 h-16 rounded-full flex items-center justify-center flex-shrink-0"
+              style={{
+                background: hexAlpha(HEX.accent, 0.08),
+                border: `1px solid ${hexAlpha(HEX.accent, 0.15)}`,
+                boxShadow: `0 0 40px ${hexAlpha(HEX.accent, 0.1)}`,
+              }}
+            >
+              <img src="/favicon.png" className="w-9 h-9 rounded-full" alt="Groove" />
             </div>
-            <div className="text-accent text-xs font-semibold font-sans flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity">
-              Recommended
+            <div>
+              <h1 className="text-2xl font-bold text-text-0 font-sans tracking-tight">Welcome to Groove</h1>
+              <p className="text-sm text-text-2 font-sans mt-0.5">Your AI coding team, ready in minutes</p>
             </div>
-          </button>
-        </div>
+          </div>
 
-        {/* Secondary actions */}
-        <div className="w-full grid grid-cols-2 gap-3 mt-3">
-          <button
-            onClick={() => setBrowsing(true)}
-            className="w-full flex items-center gap-3 p-4 rounded-lg border border-border bg-surface-1 hover:bg-surface-2 hover:border-border transition-all cursor-pointer group text-left"
-          >
-            <div className="w-10 h-10 rounded-lg bg-surface-4 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
-              <FolderOpen size={20} className="text-text-1" />
-            </div>
-            <div className="min-w-0">
-              <div className="text-sm font-semibold text-text-0 font-sans">Open Project</div>
-              <div className="text-xs text-text-3 font-sans mt-0.5">Browse the filesystem</div>
-            </div>
-          </button>
+          {/* Action cards */}
+          <div className="flex flex-col gap-3 mt-4 w-full">
+            <button
+              onClick={() => setBrowsing(true)}
+              className="w-full flex items-center gap-4 p-5 rounded-lg border border-accent/25 bg-gradient-to-r from-accent/8 to-accent/3 hover:from-accent/14 hover:to-accent/6 hover:border-accent/40 transition-all cursor-pointer group text-left"
+            >
+              <div className="w-11 h-11 rounded-lg bg-accent/20 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
+                <FolderOpen size={22} className="text-accent" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-base font-semibold text-text-0 font-sans">Open Project</div>
+                <div className="text-sm text-text-2 font-sans mt-0.5">Browse the filesystem to pick a project</div>
+              </div>
+            </button>
 
-          <button
-            onClick={() => useGrooveStore.getState().toggleQuickConnect()}
-            className="w-full flex items-center gap-3 p-4 rounded-lg border border-border bg-surface-1 hover:bg-surface-2 hover:border-border transition-all cursor-pointer group text-left"
-          >
-            <div className="w-10 h-10 rounded-lg bg-surface-4 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
-              <Radio size={20} className="text-text-1" />
-            </div>
-            <div className="min-w-0">
-              <div className="text-sm font-semibold text-text-0 font-sans">Connect to Remote</div>
-              <div className="text-xs text-text-3 font-sans mt-0.5">SSH tunnel to a server</div>
-            </div>
-          </button>
+            <button
+              onClick={toggleQuickConnect}
+              className="w-full flex items-center gap-4 p-5 rounded-lg border border-border bg-surface-1 hover:bg-surface-2 hover:border-border transition-all cursor-pointer group text-left"
+            >
+              <div className="w-11 h-11 rounded-lg bg-surface-4 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
+                <Radio size={22} className="text-text-1" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-base font-semibold text-text-0 font-sans">Connect to Remote</div>
+                <div className="text-sm text-text-2 font-sans mt-0.5">SSH tunnel to a server</div>
+              </div>
+            </button>
+          </div>
+
+          {/* Keyboard shortcuts */}
+          <p className="text-xs text-text-4 font-sans mt-8">
+            <kbd className="font-mono bg-surface-4 px-1.5 py-0.5 rounded text-text-3">Cmd+K</kbd>
+            <span className="mx-1.5">command palette</span>
+            <span className="text-text-4 mx-1">&middot;</span>
+            <kbd className="font-mono bg-surface-4 px-1.5 py-0.5 rounded text-text-3">Cmd+N</kbd>
+            <span className="mx-1.5">spawn</span>
+            <span className="text-text-4 mx-1">&middot;</span>
+            <kbd className="font-mono bg-surface-4 px-1.5 py-0.5 rounded text-text-3">Cmd+J</kbd>
+            <span className="mx-1.5">terminal</span>
+          </p>
         </div>
 
-        {/* Recent projects */}
-        {visibleProjects.length > 0 && (
-          <div className="w-full mt-8">
-            <div className="text-2xs font-mono text-text-3 uppercase tracking-widest mb-2 text-left">Recent</div>
-            <div className={cn('grid gap-2', visibleProjects.length === 1 ? 'grid-cols-1' : visibleProjects.length === 2 ? 'grid-cols-2' : 'grid-cols-3')}>
-              {visibleProjects.map((project) => (
+        {/* ── Right Panel ────────────────────────────────────── */}
+        {hasRightContent && (
+          <div className="w-[45%] max-md:w-full pt-[10vh] max-md:pt-0 min-w-0 max-h-[80vh] overflow-y-auto">
+            {/* Recent Projects */}
+            {hasRecent && (
+              <div>
+                <div className="text-2xs font-mono text-text-3 uppercase tracking-widest mb-2">Recent</div>
+                <div className="flex flex-col">
+                  {visibleProjects.map((project) => (
+                    <div
+                      key={project.path}
+                      className="group flex items-center gap-2 px-2 py-1.5 rounded-sm hover:bg-surface-1 transition-colors"
+                    >
+                      <button
+                        onClick={() => setProjectDir(project.path)}
+                        className="flex-1 min-w-0 text-left cursor-pointer"
+                      >
+                        <div className="text-sm font-medium text-text-1 hover:text-accent truncate transition-colors">
+                          {project.name}
+                        </div>
+                        <div className="text-2xs font-mono text-text-4 truncate">{project.path}</div>
+                      </button>
+                      <button
+                        onClick={(e) => { e.stopPropagation(); removeRecentProject(project.path); }}
+                        className="opacity-0 group-hover:opacity-100 p-0.5 text-text-4 hover:text-danger cursor-pointer transition-all flex-shrink-0"
+                        title="Remove from recent"
+                      >
+                        <X size={14} />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Divider */}
+            {hasRecent && hasTunnels && (
+              <div className="border-t border-border-subtle my-4" />
+            )}
+
+            {/* SSH Connections */}
+            {hasTunnels && (
+              <div>
+                <div className="text-2xs font-mono text-text-3 uppercase tracking-widest mb-2">SSH Connections</div>
+                <div className="flex flex-col">
+                  {savedTunnels.map((server) => (
+                    <div
+                      key={server.id}
+                      className={cn(
+                        'group flex items-center gap-2 px-2 py-1.5 rounded-sm hover:bg-surface-1 transition-colors',
+                        connectingId === server.id && 'opacity-60 pointer-events-none',
+                      )}
+                    >
+                      <button
+                        onClick={() => handleTunnelClick(server)}
+                        disabled={connectingId === server.id}
+                        className="flex-1 min-w-0 text-left cursor-pointer"
+                      >
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-sm font-medium text-text-1 hover:text-accent truncate transition-colors">
+                            {server.name}
+                          </span>
+                          {server.active && <StatusDot status="running" size="sm" />}
+                        </div>
+                        <div className="text-2xs font-mono text-text-4 truncate">{server.user}@{server.host}</div>
+                      </button>
+                      <div className="flex items-center gap-1 flex-shrink-0">
+                        {connectingId === server.id ? (
+                          <Loader2 size={14} className="text-text-3 animate-spin" />
+                        ) : server.active ? (
+                          <>
+                            <button
+                              onClick={() => handleTunnelClick(server)}
+                              className="opacity-0 group-hover:opacity-100 flex items-center gap-0.5 text-2xs text-success hover:text-success/80 cursor-pointer transition-all"
+                            >
+                              <ExternalLink size={11} /> Open
+                            </button>
+                            <button
+                              onClick={async () => {
+                                await disconnectTunnel(server.id);
+                                addToast('info', 'Disconnected', server.name);
+                              }}
+                              className="opacity-0 group-hover:opacity-100 p-0.5 text-text-4 hover:text-danger cursor-pointer transition-all"
+                              title="Disconnect"
+                            >
+                              <Unplug size={12} />
+                            </button>
+                          </>
+                        ) : null}
+                        <button
+                          onClick={(e) => { e.stopPropagation(); deleteTunnel(server.id); }}
+                          className="opacity-0 group-hover:opacity-100 p-0.5 text-text-4 hover:text-danger cursor-pointer transition-all flex-shrink-0"
+                          title="Remove connection"
+                        >
+                          <X size={14} />
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
                 <button
-                  key={project.path}
-                  onClick={() => setProjectDir(project.path)}
-                  className="bg-surface-1 rounded-sm border border-border-subtle px-4 py-3 cursor-pointer hover:bg-surface-2 transition-colors text-left"
+                  onClick={toggleQuickConnect}
+                  className="flex items-center gap-1 text-xs text-accent hover:underline font-sans cursor-pointer mt-2 px-2"
                 >
-                  <div className="text-sm font-medium text-text-0 truncate">{project.name}</div>
-                  <div className="text-2xs font-mono text-text-4 truncate mt-1">{project.path}</div>
+                  <Plus size={12} /> Add Connection
                 </button>
-              ))}
-            </div>
+              </div>
+            )}
+
+            {/* Empty state */}
+            {!hasRecent && !hasTunnels && (
+              <p className="text-sm text-text-4 italic px-2">No recent activity</p>
+            )}
           </div>
         )}
-
-        {/* Keyboard shortcuts */}
-        <p className="text-xs text-text-4 font-sans mt-8">
-          <kbd className="font-mono bg-surface-4 px-1.5 py-0.5 rounded text-text-3">Cmd+K</kbd>
-          <span className="mx-1.5">command palette</span>
-          <span className="text-text-4 mx-1">&middot;</span>
-          <kbd className="font-mono bg-surface-4 px-1.5 py-0.5 rounded text-text-3">Cmd+N</kbd>
-          <span className="mx-1.5">spawn</span>
-          <span className="text-text-4 mx-1">&middot;</span>
-          <kbd className="font-mono bg-surface-4 px-1.5 py-0.5 rounded text-text-3">Cmd+J</kbd>
-          <span className="mx-1.5">terminal</span>
-        </p>
       </div>
 
       <FolderBrowser

package/packages/gui/src/components/preview/preview-toolbar.jsx

@@ -0,0 +1,109 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useRef, useEffect } from 'react';
+import { RefreshCw, Monitor, Tablet, Smartphone, Camera, X } from 'lucide-react';
+import { cn } from '../../lib/cn';
+import { useGrooveStore } from '../../stores/groove';
+
+const DEVICE_SIZES = [
+  { id: 'desktop', icon: Monitor, label: 'Desktop', width: '100%' },
+  { id: 'tablet', icon: Tablet, label: 'Tablet (768px)', width: '768px' },
+  { id: 'mobile', icon: Smartphone, label: 'Mobile (375px)', width: '375px' },
+];
+
+export function PreviewToolbar({ onRefresh }) {
+  const previewState = useGrooveStore((s) => s.previewState);
+  const setPreviewDevice = useGrooveStore((s) => s.setPreviewDevice);
+  const toggleScreenshotMode = useGrooveStore((s) => s.toggleScreenshotMode);
+  const closePreview = useGrooveStore((s) => s.closePreview);
+
+  const [confirming, setConfirming] = useState(false);
+  const timerRef = useRef(null);
+
+  useEffect(() => {
+    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+  }, []);
+
+  function handleClose() {
+    if (confirming) {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      setConfirming(false);
+      closePreview();
+    } else {
+      setConfirming(true);
+      timerRef.current = setTimeout(() => setConfirming(false), 2000);
+    }
+  }
+
+  const proxyUrl = previewState.teamId
+    ? `${window.location.origin}/api/preview/${previewState.teamId}/proxy/`
+    : previewState.url;
+
+  return (
+    <div className="h-10 flex items-center gap-2 px-3 bg-surface-3 border-b border-border flex-shrink-0">
+      {/* URL display */}
+      <div className="flex-1 min-w-0 h-7 flex items-center px-3 rounded-md bg-surface-1 border border-border-subtle">
+        <span className="text-2xs font-mono text-text-3 truncate">{proxyUrl || 'No URL'}</span>
+      </div>
+
+      {/* Refresh */}
+      <button
+        onClick={onRefresh}
+        className="w-7 h-7 flex items-center justify-center rounded-md text-text-3 hover:text-accent hover:bg-accent/10 transition-colors cursor-pointer"
+        title="Refresh"
+      >
+        <RefreshCw size={14} />
+      </button>
+
+      {/* Device size toggles */}
+      <div className="flex items-center gap-0.5 px-1 py-0.5 rounded-md bg-surface-1 border border-border-subtle">
+        {DEVICE_SIZES.map((device) => (
+          <button
+            key={device.id}
+            onClick={() => setPreviewDevice(device.id)}
+            className={cn(
+              'w-7 h-6 flex items-center justify-center rounded transition-colors cursor-pointer',
+              previewState.deviceSize === device.id
+                ? 'text-accent bg-accent/10'
+                : 'text-text-3 hover:text-text-1',
+            )}
+            title={device.label}
+          >
+            <device.icon size={13} />
+          </button>
+        ))}
+      </div>
+
+      {/* Screenshot */}
+      <button
+        onClick={toggleScreenshotMode}
+        className={cn(
+          'w-7 h-7 flex items-center justify-center rounded-md transition-colors cursor-pointer',
+          previewState.screenshotMode
+            ? 'text-accent bg-accent/10'
+            : 'text-text-3 hover:text-accent hover:bg-accent/10',
+        )}
+        title="Screenshot"
+      >
+        <Camera size={14} />
+      </button>
+
+      {/* Close preview — two-click confirmation */}
+      <button
+        onClick={handleClose}
+        className={cn(
+          'h-7 flex items-center justify-center rounded-md transition-all cursor-pointer',
+          confirming
+            ? 'px-2 gap-1.5 bg-danger/15 text-danger border border-danger/25'
+            : 'w-7 text-text-3 hover:text-danger hover:bg-danger/10',
+        )}
+        title="Close Preview"
+      >
+        {confirming ? (
+          <span className="text-2xs font-semibold font-sans whitespace-nowrap">Close?</span>
+        ) : (
+          <X size={14} />
+        )}
+      </button>
+    </div>
+  );
+}