groove-dev 0.27.7 → 0.27.11

package/packages/gui/src/components/layout/activity-bar.jsx

@@ -27,13 +27,13 @@ export function ActivityBar({ activeView, detailPanel, onNavigate, onTogglePanel
             <button
               onClick={() => onNavigate(item.id)}
               className={cn(
-                'w-10 h-10 flex items-center justify-center rounded-md transition-colors cursor-pointer',
+                'w-8 h-8 flex items-center justify-center rounded-md transition-colors cursor-pointer',
                 activeView === item.id
                   ? 'text-text-0 bg-surface-5'
                   : 'text-text-3 hover:text-text-1 hover:bg-surface-4',
               )}
             >
-              <item.icon size={20} strokeWidth={activeView === item.id ? 2 : 1.5} />
+              <item.icon size={16} strokeWidth={activeView === item.id ? 2 : 1.5} />
             </button>
           </Tooltip>
         ))}
@@ -53,13 +53,13 @@ export function ActivityBar({ activeView, detailPanel, onNavigate, onTogglePanel
               <button
                 onClick={() => item.panel ? onTogglePanel(item.id) : onNavigate(item.id)}
                 className={cn(
-                  'w-10 h-10 flex items-center justify-center rounded-md transition-colors cursor-pointer',
+                  'w-8 h-8 flex items-center justify-center rounded-md transition-colors cursor-pointer',
                   isActive
                     ? 'text-text-0 bg-surface-5'
                     : 'text-text-3 hover:text-text-1 hover:bg-surface-4',
                 )}
               >
-                <item.icon size={20} strokeWidth={isActive ? 2 : 1.5} />
+                <item.icon size={16} strokeWidth={isActive ? 2 : 1.5} />
               </button>
             </Tooltip>
           );

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