groove-dev 0.27.15 → 0.27.18

package/packages/gui/src/components/editor/editor-tabs.jsx

@@ -1,7 +1,11 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
+import { useRef, useState, useEffect, useCallback } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
-import { X } from 'lucide-react';
+import { X, ChevronLeft, ChevronRight, Copy, XCircle } from 'lucide-react';
+import {
+  ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator,
+} from '../ui/context-menu';
 
 export function EditorTabs() {
   const openTabs = useGrooveStore((s) => s.editorOpenTabs);
@@ -10,42 +14,117 @@ export function EditorTabs() {
   const setActiveFile = useGrooveStore((s) => s.setActiveFile);
   const closeFile = useGrooveStore((s) => s.closeFile);
 
+  const scrollRef = useRef(null);
+  const [overflows, setOverflows] = useState(false);
+
+  const checkOverflow = useCallback(() => {
+    const el = scrollRef.current;
+    if (el) setOverflows(el.scrollWidth > el.clientWidth);
+  }, []);
+
+  useEffect(() => {
+    checkOverflow();
+    const el = scrollRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(checkOverflow);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [checkOverflow, openTabs.length]);
+
+  function scrollLeft() {
+    scrollRef.current?.scrollBy({ left: -120, behavior: 'smooth' });
+  }
+  function scrollRight() {
+    scrollRef.current?.scrollBy({ left: 120, behavior: 'smooth' });
+  }
+
+  function closeOthers(path) {
+    openTabs.filter((t) => t !== path).forEach((t) => closeFile(t));
+  }
+  function closeAll() {
+    [...openTabs].forEach((t) => closeFile(t));
+  }
+  function closeToRight(path) {
+    const idx = openTabs.indexOf(path);
+    openTabs.slice(idx + 1).forEach((t) => closeFile(t));
+  }
+  function copyPath(path) {
+    navigator.clipboard?.writeText(path);
+  }
+
   if (openTabs.length === 0) return null;
 
   return (
-    <div className="flex items-center h-8 bg-surface-3 border-b border-border overflow-x-auto flex-shrink-0">
-      {openTabs.map((path) => {
-        const isActive = path === activeFile;
-        const file = files[path];
-        const isDirty = file && file.content !== file.originalContent;
-        const name = path.split('/').pop();
-
-        return (
-          <div
-            key={path}
-            className={cn(
-              'flex items-center gap-1.5 h-full px-3 text-xs font-sans cursor-pointer select-none',
-              'border-r border-border-subtle',
-              'transition-colors duration-75',
-              isActive
-                ? 'bg-surface-2 text-text-0 border-b-2 border-b-accent'
-                : 'bg-surface-3 text-text-3 hover:text-text-1 hover:bg-surface-4',
-            )}
-            onClick={() => setActiveFile(path)}
-          >
-            <span className="truncate max-w-[120px]">{name}</span>
-            {isDirty && (
-              <span className="w-1.5 h-1.5 rounded-full bg-warning flex-shrink-0" />
-            )}
-            <button
-              onClick={(e) => { e.stopPropagation(); closeFile(path); }}
-              className="p-0.5 rounded hover:bg-surface-5 text-text-4 hover:text-text-1 transition-colors cursor-pointer ml-0.5"
-            >
-              <X size={12} />
-            </button>
-          </div>
-        );
-      })}
+    <div className="flex items-center h-8 bg-surface-3 border-b border-border flex-shrink-0">
+      {overflows && (
+        <button onClick={scrollLeft} className="flex-shrink-0 px-1 h-full text-text-4 hover:text-text-1 hover:bg-surface-4 transition-colors cursor-pointer">
+          <ChevronLeft size={14} />
+        </button>
+      )}
+
+      <div ref={scrollRef} className="flex items-center flex-1 min-w-0 overflow-x-auto scrollbar-none scroll-smooth" style={{ scrollSnapType: 'x mandatory' }}>
+        {openTabs.map((path) => {
+          const isActive = path === activeFile;
+          const file = files[path];
+          const isDirty = file && file.content !== file.originalContent;
+          const name = path.split('/').pop();
+
+          return (
+            <ContextMenu key={path}>
+              <ContextMenuTrigger asChild>
+                <div
+                  className={cn(
+                    'flex items-center gap-1.5 h-full px-3 text-xs font-sans cursor-pointer select-none',
+                    'border-r border-border-subtle',
+                    'transition-colors duration-75 flex-shrink-0',
+                    isActive
+                      ? 'bg-surface-2 text-text-0 border-b-2 border-b-accent'
+                      : 'bg-surface-3 text-text-3 hover:text-text-1 hover:bg-surface-4',
+                  )}
+                  style={{ scrollSnapAlign: 'start' }}
+                  onClick={() => setActiveFile(path)}
+                  onAuxClick={(e) => { if (e.button === 1) { e.preventDefault(); closeFile(path); } }}
+                >
+                  <span className="truncate max-w-[120px]">{name}</span>
+                  {isDirty && (
+                    <span className="w-1.5 h-1.5 rounded-full bg-warning flex-shrink-0" />
+                  )}
+                  <button
+                    onClick={(e) => { e.stopPropagation(); closeFile(path); }}
+                    className="p-0.5 rounded hover:bg-surface-5 text-text-4 hover:text-text-1 transition-colors cursor-pointer ml-0.5"
+                  >
+                    <X size={12} />
+                  </button>
+                </div>
+              </ContextMenuTrigger>
+              <ContextMenuContent>
+                <ContextMenuItem onSelect={() => closeFile(path)}>
+                  <X size={12} className="text-text-3" /> Close
+                </ContextMenuItem>
+                <ContextMenuItem onSelect={() => closeOthers(path)}>
+                  <XCircle size={12} className="text-text-3" /> Close Others
+                </ContextMenuItem>
+                <ContextMenuItem onSelect={() => closeAll()}>
+                  <XCircle size={12} className="text-text-3" /> Close All
+                </ContextMenuItem>
+                <ContextMenuItem onSelect={() => closeToRight(path)}>
+                  <ChevronRight size={12} className="text-text-3" /> Close to the Right
+                </ContextMenuItem>
+                <ContextMenuSeparator />
+                <ContextMenuItem onSelect={() => copyPath(path)}>
+                  <Copy size={12} className="text-text-3" /> Copy Path
+                </ContextMenuItem>
+              </ContextMenuContent>
+            </ContextMenu>
+          );
+        })}
+      </div>
+
+      {overflows && (
+        <button onClick={scrollRight} className="flex-shrink-0 px-1 h-full text-text-4 hover:text-text-1 hover:bg-surface-4 transition-colors cursor-pointer">
+          <ChevronRight size={14} />
+        </button>
+      )}
     </div>
   );
 }

package/packages/gui/src/components/editor/goto-line.jsx

@@ -0,0 +1,35 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useEffect, useRef } from 'react';
+
+export function GotoLine({ currentLine, onGoto, onClose }) {
+  const [value, setValue] = useState('');
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  function handleKeyDown(e) {
+    if (e.key === 'Enter') {
+      const line = parseInt(value, 10);
+      if (line > 0) onGoto(line);
+      onClose();
+    }
+    if (e.key === 'Escape') onClose();
+  }
+
+  return (
+    <div className="absolute top-2 left-1/2 -translate-x-1/2 z-20 flex items-center gap-2 bg-surface-2 border border-border rounded-lg shadow-xl p-2">
+      <label className="text-2xs font-sans text-text-3 whitespace-nowrap">Go to Line:</label>
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={onClose}
+        placeholder={String(currentLine)}
+        className="w-20 h-6 px-2 text-xs bg-surface-0 border border-border-subtle rounded text-text-0 font-mono focus:outline-none focus:border-accent"
+      />
+    </div>
+  );
+}

package/packages/gui/src/components/editor/terminal.jsx

@@ -23,6 +23,7 @@ let tabCounter = 0;
 function TerminalInstance({ tabId, visible }) {
   const containerRef = useRef(null);
   const termRef = useRef(null);
+  const fitRef = useRef(null);
   const termIdRef = useRef(null);
   const handlerRef = useRef(null);
   const mountedRef = useRef(false);
@@ -47,13 +48,18 @@ function TerminalInstance({ tabId, visible }) {
     term.loadAddon(new WebLinksAddon());
     term.open(containerRef.current);
     termRef.current = term;
+    fitRef.current = fitAddon;
 
-    requestAnimationFrame(() => fitAddon.fit());
+    requestAnimationFrame(() => {
+      try { fitAddon.fit(); } catch {}
+    });
 
+    let spawnAttempts = 0;
     function trySpawn() {
+      spawnAttempts++;
       const ws = useGrooveStore.getState().ws;
       if (!ws || ws.readyState !== WebSocket.OPEN) {
-        setTimeout(trySpawn, 500);
+        if (spawnAttempts < 20) setTimeout(trySpawn, 500);
         return;
       }
 
@@ -108,15 +114,15 @@ function TerminalInstance({ tabId, visible }) {
         handlerRef.current.ws.removeEventListener('message', handlerRef.current.handler);
       }
       term.dispose();
+      fitRef.current = null;
       mountedRef.current = false;
     };
   }, []);
 
-  // Refit when visibility changes
   useEffect(() => {
-    if (visible && termRef.current) {
+    if (visible && fitRef.current) {
       requestAnimationFrame(() => {
-        try { termRef.current._addonManager?._addons?.[0]?.instance?.fit?.(); } catch {}
+        try { fitRef.current.fit(); } catch {}
       });
     }
   }, [visible]);
@@ -124,7 +130,7 @@ function TerminalInstance({ tabId, visible }) {
   return (
     <div
       ref={containerRef}
-      className="w-full h-full"
+      className="w-full h-full overflow-hidden"
       style={{ display: visible ? 'block' : 'none' }}
     />
   );

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

@@ -1,15 +1,18 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { Network, Code2, ChartSpline, Puzzle, Users, Box, Newspaper, Settings } from 'lucide-react';
+import { Network, Code2, ChartSpline, Puzzle, Gamepad2, Users, Box, Globe, Newspaper, Settings } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { Tooltip } from '../ui/tooltip';
+import { isElectron, getPlatform } from '../../lib/electron';
 
 const NAV_ITEMS = [
   { id: 'agents',      icon: Network,   label: 'Agents' },
   { id: 'editor',      icon: Code2,     label: 'Editor' },
   { id: 'dashboard',   icon: ChartSpline, label: 'Dashboard' },
   { id: 'marketplace', icon: Puzzle,     label: 'Marketplace' },
+  { id: 'toys',        icon: Gamepad2,  label: 'Toys' },
   { id: 'models',      icon: Box,       label: 'Models' },
   { id: 'teams',       icon: Users,     label: 'Teams' },
+  { id: 'federation', icon: Globe,     label: 'Federation' },
 ];
 
 const UTIL_ITEMS = [
@@ -18,10 +21,19 @@ const UTIL_ITEMS = [
 ];
 
 export function ActivityBar({ activeView, detailPanel, onNavigate, onTogglePanel }) {
+  const darwinTrafficLights = isElectron() && getPlatform() === 'darwin';
+
   return (
     <nav className="w-12 flex-shrink-0 flex flex-col bg-surface-3 border-r border-border">
+      {/* Sidebar header — aligns with BreadcrumbBar */}
+      {darwinTrafficLights && (
+        <div className="h-11 flex-shrink-0 flex items-end justify-center pb-1.5 border-b border-border">
+          <img src="/favicon.png" alt="Groove" className="h-6 w-6 rounded-full" />
+        </div>
+      )}
+
       {/* Main nav */}
-      <div className="flex flex-col items-center gap-0.5 pt-2">
+      <div className="flex flex-col items-center gap-1.5 pt-2.5">
         {NAV_ITEMS.map((item) => (
           <Tooltip key={item.id} content={item.label} side="right">
             <button
@@ -43,7 +55,7 @@ export function ActivityBar({ activeView, detailPanel, onNavigate, onTogglePanel
       <div className="flex-1" />
 
       {/* Utility nav */}
-      <div className="flex flex-col items-center gap-0.5 pb-2">
+      <div className="flex flex-col items-center gap-1.5 pb-3">
         {UTIL_ITEMS.map((item) => {
           const isActive = item.panel
             ? detailPanel?.type === item.id

package/packages/gui/src/components/layout/app-shell.jsx

@@ -67,7 +67,6 @@ export function AppShell({ children, detailContent, terminalContent }) {
           daemonHost={daemonHost}
           editorActiveFile={editorActiveFile}
           onOpenCommandPalette={toggleCommandPalette}
-          onSpawn={() => openDetail({ type: 'spawn' })}
         />
 
         <div className="flex-1 flex min-h-0">

package/packages/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, true);
+    return () => document.removeEventListener('mousedown', handleClick, true);
+  }, [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/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, 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/packages/gui/src/components/layout/status-bar.jsx

@@ -1,5 +1,5 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { Terminal, BookOpen, Radio, Plug } from 'lucide-react';
+import { Terminal, BookOpen, Radio, Plug, Globe } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { StatusDot } from '../ui/status-dot';
 import { fmtUptime } from '../../lib/format';
@@ -28,6 +28,16 @@ export function StatusBar({
             {connected ? (electron ? 'Desktop' : 'Connected') : 'Offline'}
           </span>
         </div>
+        {electron && connected && (
+          <button
+            onClick={() => openExternal(window.location.href)}
+            className="flex items-center gap-1 text-text-4 hover:text-text-1 cursor-pointer transition-colors"
+            title="Open this workspace in your browser"
+          >
+            <Globe size={10} />
+            <span>Browser</span>
+          </button>
+        )}
         {connected && uptime > 0 && (
           <span className="text-text-4">Up {fmtUptime(uptime)}</span>
         )}

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