groove-dev 0.27.14 → 0.27.17

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

@@ -1,8 +1,124 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { Search, Plus, ChevronRight } from 'lucide-react';
+import { useState, useEffect, useRef } from 'react';
+import { Search, ChevronRight, LogIn, LogOut, User, ExternalLink, BookOpen, ChevronDown } from 'lucide-react';
 import { cn } from '../../lib/cn';
+import { useGrooveStore } from '../../stores/groove';
 import { isElectron, getPlatform } from '../../lib/electron';
 
+function ProfilePic({ user, size = 24 }) {
+  const [broken, setBroken] = useState(false);
+  const src = user?.avatar || user?.picture || user?.photoURL || user?.photo;
+
+  if (src && !broken) {
+    return (
+      <img
+        src={src}
+        alt=""
+        className="rounded-full"
+        style={{ width: size, height: size }}
+        referrerPolicy="no-referrer"
+        crossOrigin="anonymous"
+        onError={() => setBroken(true)}
+      />
+    );
+  }
+
+  return (
+    <div
+      className="rounded-full bg-accent/10 flex items-center justify-center"
+      style={{ width: size, height: size }}
+    >
+      <User size={Math.round(size * 0.5)} className="text-accent" />
+    </div>
+  );
+}
+
+function UserMenu() {
+  const authenticated = useGrooveStore((s) => s.marketplaceAuthenticated);
+  const user = useGrooveStore((s) => s.marketplaceUser);
+  const login = useGrooveStore((s) => s.marketplaceLogin);
+  const logout = useGrooveStore((s) => s.marketplaceLogout);
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e) {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  if (!authenticated) {
+    return (
+      <button
+        onClick={login}
+        className="flex items-center gap-1.5 h-7 px-3 rounded-md bg-surface-1 border border-border-subtle text-xs font-semibold font-sans text-text-2 hover:text-text-0 hover:border-border transition-colors cursor-pointer select-none flex-shrink-0"
+      >
+        <LogIn size={12} />
+        Sign in
+      </button>
+    );
+  }
+
+  return (
+    <div ref={ref} className="relative flex-shrink-0">
+      <button
+        onClick={() => setOpen(!open)}
+        className={cn(
+          'flex items-center gap-2 h-7 pl-1 pr-2 rounded-md transition-colors cursor-pointer select-none',
+          open ? 'bg-surface-1 border border-border' : 'hover:bg-surface-1 border border-transparent',
+        )}
+      >
+        <ProfilePic user={user} size={20} />
+        <span className="text-xs text-text-1 font-sans font-medium max-w-[100px] truncate">
+          {user?.displayName || user?.id || 'Account'}
+        </span>
+        <ChevronDown size={10} className={cn('text-text-4 transition-transform', open && 'rotate-180')} />
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-full mt-1 w-48 py-1 rounded-md bg-surface-1 border border-border shadow-lg z-50">
+          <div className="px-3 py-2 border-b border-border-subtle">
+            <p className="text-xs font-medium text-text-0 font-sans truncate">{user?.displayName || 'Account'}</p>
+            {user?.email && <p className="text-2xs text-text-4 font-sans truncate">{user.email}</p>}
+          </div>
+          <a
+            href="https://docs.groovedev.ai"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => setOpen(false)}
+            className="flex items-center gap-2 px-3 py-1.5 text-xs text-text-2 hover:text-text-0 hover:bg-surface-3 font-sans cursor-pointer transition-colors"
+          >
+            <BookOpen size={12} />
+            Docs
+            <ExternalLink size={9} className="ml-auto text-text-4" />
+          </a>
+          <a
+            href="https://groovedev.ai"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => setOpen(false)}
+            className="flex items-center gap-2 px-3 py-1.5 text-xs text-text-2 hover:text-text-0 hover:bg-surface-3 font-sans cursor-pointer transition-colors"
+          >
+            <ExternalLink size={12} />
+            groovedev.ai
+          </a>
+          <div className="my-1 h-px bg-border-subtle" />
+          <button
+            onClick={() => { setOpen(false); logout(); }}
+            className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-text-3 hover:text-danger hover:bg-surface-3 font-sans cursor-pointer transition-colors"
+          >
+            <LogOut size={12} />
+            Sign out
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
 const VIEW_LABELS = {
   agents: 'Agents',
   editor: 'Editor',
@@ -17,7 +133,6 @@ export function BreadcrumbBar({
   daemonHost,
   editorActiveFile,
   onOpenCommandPalette,
-  onSpawn,
 }) {
   const crumbs = ['Groove', VIEW_LABELS[activeView] || activeView];
   if (activeView === 'editor' && editorActiveFile) {
@@ -27,48 +142,45 @@ export function BreadcrumbBar({
   const electron = isElectron();
   const darwinDrag = electron && getPlatform() === 'darwin';
 
+  const [instanceName, setInstanceName] = useState(null);
+
+  useEffect(() => {
+    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);
+    }
+  }, []);
+
   return (
     <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',
+        'h-11 flex-shrink-0 flex items-center gap-3 px-4 bg-surface-3 border-b border-border relative',
+        darwinDrag && 'pl-24 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 — 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;
-      })()}
+      {/* Logo — web only (Electron shows it in the sidebar) */}
+      {!darwinDrag && <img src="/favicon.png" alt="Groove" className="h-7 w-7 rounded-full flex-shrink-0" />}
 
-      <div className="flex-1 min-w-4" />
+      {/* Project name badge — clickable to open folder */}
+      {instanceName && (
+        <button
+          onClick={() => window.groove?.openFolder?.()}
+          className="text-2xs font-mono font-semibold text-accent bg-accent/10 px-1.5 py-0.5 rounded flex-shrink-0 hover:bg-accent/20 transition-colors cursor-pointer"
+        >
+          {instanceName}
+        </button>
+      )}
 
-      {/* Command palette — pill style */}
-      <button
-        onClick={onOpenCommandPalette}
-        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-xs text-text-4 font-sans',
-          'hover:border-border hover:text-text-3 transition-colors cursor-pointer',
-        )}
-      >
-        <Search size={14} className="flex-shrink-0" />
-        <span className="flex-1 text-left">Search commands...</span>
-        <kbd className="text-2xs font-mono bg-surface-4 px-1.5 py-0.5 rounded-full text-text-4">Cmd+K</kbd>
-      </button>
+      {/* Host badge — show raw host when no instance */}
+      {!instanceName && 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>
+      )}
 
       <div className="flex-1 min-w-4" />
 
@@ -84,16 +196,22 @@ export function BreadcrumbBar({
         ))}
       </div>
 
-      {/* Spawn button */}
-      {connected && (
-        <button
-          onClick={onSpawn}
-          className="ml-1 flex items-center gap-1 h-7 px-3.5 rounded-full bg-accent/15 text-accent text-xs font-semibold font-sans hover:bg-accent/25 transition-colors cursor-pointer select-none flex-shrink-0"
-        >
-          <Plus size={14} />
-          Spawn
-        </button>
-      )}
+      <UserMenu />
+
+      {/* Command palette — absolutely centered to header */}
+      <button
+        onClick={onOpenCommandPalette}
+        className={cn(
+          'absolute left-1/2 -translate-x-1/2 flex items-center gap-2.5 h-8 px-4 rounded-md w-full max-w-md',
+          'bg-surface-1 border border-border-subtle',
+          'text-xs text-text-4 font-sans',
+          'hover:border-border hover:text-text-3 transition-colors cursor-pointer',
+        )}
+      >
+        <Search size={14} className="flex-shrink-0" />
+        <span className="flex-1 text-left">Search commands...</span>
+        <kbd className="text-2xs font-mono bg-surface-4 px-1.5 py-0.5 rounded text-text-4 ml-1">Cmd+K</kbd>
+      </button>
     </header>
   );
 }

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, Radio, ExternalLink,
+  Search, Radio, ExternalLink, FolderOpen, Globe,
 } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -15,6 +15,7 @@ const STATIC_COMMANDS = [
   { id: 'nav:dashboard',   label: 'Go to Dashboard',   icon: ChartSpline, category: 'Navigation', action: (s) => { s.setActiveView('dashboard'); } },
   { id: 'nav:marketplace', label: 'Go to Marketplace', icon: Puzzle,     category: 'Navigation', action: (s) => { s.setActiveView('marketplace'); } },
   { id: 'nav:teams',       label: 'Go to Teams',       icon: Users,      category: 'Navigation', action: (s) => { s.setActiveView('teams'); } },
+  { id: 'nav:federation', label: 'Go to Federation',  icon: Globe,      category: 'Navigation', action: (s) => { s.setActiveView('federation'); } },
   { id: 'action:spawn',    label: 'Spawn Agent',       icon: Plus,       category: 'Actions',    action: (s) => { s.openDetail({ type: 'spawn' }); } },
   { id: 'action:terminal', label: 'Toggle Terminal',   icon: Terminal,   category: 'Actions',    action: (s) => { s.setTerminalVisible(!s.terminalVisible); }, shortcut: 'Cmd+J' },
   { id: 'action:journalist', label: 'Toggle Journalist', icon: Newspaper, category: 'Actions',  action: (s) => {
@@ -51,7 +52,10 @@ export function CommandPalette() {
         : { 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];
+    const windowCommands = window.groove?.openFolder ? [
+      { id: 'action:openfolder', label: 'Open Folder', icon: FolderOpen, category: 'Window', shortcut: 'Cmd+O', action: () => window.groove.openFolder() },
+    ] : [];
+    return [...STATIC_COMMANDS, ...windowCommands, ...agentCommands, ...tunnelCommands];
   }, [agents, savedTunnels]);
 
   // Filter

package/node_modules/@groove-dev/gui/src/components/layout/terminal-panel.jsx

@@ -63,26 +63,27 @@ export function TerminalPanel({
       )}
 
       {/* Header bar */}
-      <div className="flex items-center h-9 bg-surface-1 border-b border-border-subtle flex-shrink-0 pl-3 pr-1.5">
+      <div className="flex items-center h-9 bg-surface-1 border-b border-border flex-shrink-0 px-3">
         {/* Tabs */}
-        <div className="flex items-center gap-0 flex-1 min-w-0 overflow-x-auto scrollbar-none">
+        <div className="flex items-center gap-0 flex-1 min-w-0 overflow-x-auto scrollbar-none h-full">
           {tabList.map((tab) => (
             <button
               key={tab.id}
               onClick={() => onSelectTab?.(tab.id)}
               className={cn(
-                'flex items-center gap-1.5 pl-2.5 pr-1 h-7 text-2xs font-sans cursor-pointer select-none transition-colors flex-shrink-0 rounded-t',
+                'inline-flex items-center gap-1.5 px-3 h-full text-xs font-medium font-sans cursor-pointer select-none transition-colors duration-100 flex-shrink-0',
+                'border-t',
                 tab.id === activeTab
-                  ? 'text-text-0 bg-surface-0'
-                  : 'text-text-3 hover:text-text-1 hover:bg-surface-0/50',
+                  ? 'text-text-0 border-accent'
+                  : 'text-text-2 border-transparent hover:text-text-0 hover:bg-surface-5/50',
               )}
             >
-              <Terminal size={10} />
-              <span className="truncate max-w-[80px]">{tab.label}</span>
+              <Terminal size={11} />
+              <span className="truncate max-w-[100px]">{tab.label}</span>
               {tabList.length > 1 && (
                 <button
                   onClick={(e) => { e.stopPropagation(); onCloseTab?.(tab.id); }}
-                  className="ml-0.5 p-0.5 rounded hover:bg-surface-5 text-text-4 hover:text-text-1 cursor-pointer"
+                  className="ml-1 p-0.5 rounded hover:bg-surface-5 text-text-4 hover:text-text-1 cursor-pointer"
                 >
                   <X size={9} />
                 </button>
@@ -91,7 +92,7 @@ export function TerminalPanel({
           ))}
           <button
             onClick={onAddTab}
-            className="flex items-center justify-center w-6 h-6 text-text-4 hover:text-text-1 hover:bg-surface-0/50 rounded cursor-pointer transition-colors flex-shrink-0 ml-0.5"
+            className="flex items-center justify-center w-6 h-6 text-text-3 hover:text-text-0 hover:bg-surface-5/50 rounded cursor-pointer transition-colors flex-shrink-0 ml-1"
             title="New terminal"
           >
             <Plus size={11} />

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

@@ -133,7 +133,15 @@ export function RepoImport() {
               <Button
                 variant="ghost"
                 size="sm"
-                onClick={() => window.open(url.startsWith('http') ? url : `https://${url}`, '_blank')}
+                onClick={() => {
+                  try {
+                    const fullUrl = url.startsWith('http') ? url : `https://${url}`;
+                    const parsed = new URL(fullUrl);
+                    if (parsed.protocol === 'https:' || parsed.protocol === 'http:') {
+                      window.open(fullUrl, '_blank');
+                    }
+                  } catch {}
+                }}
                 className="h-8 text-xs gap-1.5"
               >
                 <ExternalLink size={12} />

package/node_modules/@groove-dev/gui/src/components/onboarding/provider-card.jsx

@@ -0,0 +1,134 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+import { motion } from 'framer-motion';
+import { cn } from '../../lib/cn';
+import { Badge } from '../ui/badge';
+import { CheckCircle2, Download, Loader2, AlertCircle, Check, RotateCcw } from 'lucide-react';
+
+export function ProviderCard({
+  id,
+  name,
+  subtitle,
+  models,
+  authType,
+  recommended,
+  installed,
+  installing,
+  failed,
+  selected,
+  onInstall,
+  gradientFrom,
+  letter,
+  statusChecking,
+}) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.25 }}
+      className={cn(
+        'relative flex flex-col rounded-md border p-6 transition-all duration-200',
+        'bg-surface-2 hover:bg-surface-3 hover:shadow-lg hover:shadow-black/20',
+        selected
+          ? 'border-accent ring-1 ring-accent/30 shadow-md shadow-accent/10'
+          : 'border-border-subtle',
+        installing && 'pointer-events-none opacity-70',
+      )}
+    >
+      {/* Selected checkmark */}
+      {selected && (
+        <div className="absolute top-3 left-3 w-5 h-5 rounded-full bg-accent flex items-center justify-center">
+          <Check className="w-3 h-3 text-surface-0" strokeWidth={3} />
+        </div>
+      )}
+
+      {/* Header row */}
+      <div className="flex items-start gap-4 mb-5">
+        <div
+          className={cn(
+            'w-14 h-14 rounded-md flex items-center justify-center text-lg font-bold font-mono shrink-0',
+            gradientFrom,
+          )}
+        >
+          {letter}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <h3 className="text-sm font-semibold text-text-0">{name}</h3>
+            {recommended && (
+              <Badge variant="purple" className="text-2xs">Recommended</Badge>
+            )}
+          </div>
+          <p className="text-xs text-text-2 mt-0.5">{subtitle}</p>
+        </div>
+      </div>
+
+      {/* Model tags */}
+      <div className="flex flex-wrap gap-1.5 mb-4">
+        {models.map((m) => (
+          <span key={m} className="text-xs text-text-2 bg-surface-4 px-2 py-0.5 rounded font-mono">
+            {m}
+          </span>
+        ))}
+      </div>
+
+      <p className="text-2xs text-text-3 mb-4">{authType}</p>
+
+      {/* Status / Action area */}
+      <div className="mt-auto pt-4 border-t border-border-subtle">
+        {installing ? (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Loader2 className="w-4 h-4 text-accent animate-spin" />
+              <span className="text-xs text-accent font-medium">Installing...</span>
+            </div>
+            <div className="h-1 bg-surface-4 rounded-full overflow-hidden">
+              <motion.div
+                className="h-full bg-accent rounded-full"
+                initial={{ width: '0%' }}
+                animate={{ width: '90%' }}
+                transition={{ duration: 15, ease: 'easeOut' }}
+              />
+            </div>
+          </div>
+        ) : installed ? (
+          <div className="flex items-center gap-2">
+            <CheckCircle2 className="w-4 h-4 text-success" />
+            <span className="text-xs text-success font-medium">Ready</span>
+          </div>
+        ) : failed ? (
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <AlertCircle className="w-4 h-4 text-danger" />
+              <span className="text-xs text-danger font-medium">Failed</span>
+            </div>
+            <button
+              type="button"
+              className="h-8 px-5 rounded-full text-xs font-medium bg-danger/15 text-danger hover:bg-danger/25 transition-colors duration-100 cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-danger flex items-center gap-1.5"
+              onClick={(e) => { e.stopPropagation(); onInstall?.(id); }}
+            >
+              <RotateCcw className="w-3 h-3" />
+              Retry
+            </button>
+          </div>
+        ) : statusChecking ? (
+          <div className="flex items-center gap-2">
+            <Loader2 className="w-3.5 h-3.5 text-text-4 animate-spin" />
+            <span className="text-xs text-text-4">Checking...</span>
+          </div>
+        ) : (
+          <div className="flex items-center justify-end">
+            <button
+              type="button"
+              className="h-8 px-5 rounded-full text-xs font-medium bg-accent text-surface-0 hover:bg-accent/80 transition-colors duration-100 cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent flex items-center gap-1.5"
+              onClick={(e) => { e.stopPropagation(); onInstall?.(id); }}
+            >
+              <Download className="w-3.5 h-3.5" />
+              Install
+            </button>
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}