groove-dev 0.27.14 → 0.27.17

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

@@ -0,0 +1,30 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { ChevronRight } from 'lucide-react';
+
+export function Breadcrumbs({ path }) {
+  if (!path) return null;
+
+  const segments = path.split('/').filter(Boolean);
+
+  return (
+    <div className="flex items-center h-7 px-3 bg-surface-2 border-b border-border-subtle text-2xs font-sans text-text-3 overflow-hidden flex-shrink-0 select-none">
+      {segments.map((segment, i) => {
+        const isLast = i === segments.length - 1;
+        return (
+          <span key={i} className="flex items-center min-w-0">
+            {i > 0 && <ChevronRight size={10} className="mx-0.5 flex-shrink-0 text-text-4" />}
+            <span
+              className={
+                isLast
+                  ? 'text-text-1 font-medium truncate'
+                  : 'hover:text-text-1 cursor-pointer truncate transition-colors'
+              }
+            >
+              {segment}
+            </span>
+          </span>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -34,16 +34,41 @@ const grooveTheme = EditorView.theme({
   '.cm-activeLineGutter': { backgroundColor: '#2c313a' },
   '.cm-activeLine': { backgroundColor: 'rgba(44, 49, 58, 0.5)' },
   '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: 'rgba(51, 175, 188, 0.15)' },
+  // Search panel styling
+  '.cm-panels': { backgroundColor: '#24282f', borderBottom: '1px solid #3e4451' },
+  '.cm-panels.cm-panels-top': { borderBottom: '1px solid #3e4451' },
+  '.cm-panels.cm-panels-bottom': { borderTop: '1px solid #3e4451' },
+  '.cm-search': { padding: '6px 8px', gap: '4px', fontFamily: 'var(--font-sans)', fontSize: '12px', display: 'flex', flexWrap: 'wrap', alignItems: 'center' },
+  '.cm-search label': { display: 'flex', alignItems: 'center', gap: '4px', color: '#8b929e', fontSize: '11px' },
+  '.cm-search input, .cm-search .cm-textfield': {
+    backgroundColor: '#1a1e25', border: '1px solid #2c313a', borderRadius: '4px', color: '#e6e6e6',
+    padding: '2px 6px', fontSize: '12px', fontFamily: 'var(--font-mono)', outline: 'none',
+  },
+  '.cm-search input:focus, .cm-search .cm-textfield:focus': { borderColor: '#33afbc' },
+  '.cm-search .cm-button, .cm-button': {
+    backgroundColor: '#2c313a', border: '1px solid #3e4451', borderRadius: '4px', color: '#bcc2cd',
+    padding: '2px 8px', fontSize: '11px', fontFamily: 'var(--font-sans)', cursor: 'pointer',
+    backgroundImage: 'none',
+  },
+  '.cm-search .cm-button:hover, .cm-button:hover': { backgroundColor: '#333842', color: '#e6e6e6' },
+  '.cm-search .cm-button:active': { backgroundColor: '#3a3f4b' },
+  '.cm-search br': { display: 'none' },
+  '.cm-panel.cm-search [name=close]': { color: '#6e7681', cursor: 'pointer', padding: '0 4px' },
+  '.cm-panel.cm-search [name=close]:hover': { color: '#e6e6e6' },
+  '.cm-searchMatch': { backgroundColor: 'rgba(51, 175, 188, 0.2)', outline: '1px solid rgba(51, 175, 188, 0.4)' },
+  '.cm-searchMatch-selected': { backgroundColor: 'rgba(51, 175, 188, 0.35)' },
 }, { dark: true });
 
-export function CodeEditor({ content, language, onChange, onSave }) {
+export function CodeEditor({ content, language, onChange, onSave, onCursorChange, viewRef: externalViewRef }) {
   const containerRef = useRef(null);
   const viewRef = useRef(null);
   const langCompartment = useRef(new Compartment());
   const onChangeRef = useRef(onChange);
   const onSaveRef = useRef(onSave);
+  const onCursorChangeRef = useRef(onCursorChange);
   onChangeRef.current = onChange;
   onSaveRef.current = onSave;
+  onCursorChangeRef.current = onCursorChange;
 
   useEffect(() => {
     if (!containerRef.current) return;
@@ -74,14 +99,20 @@ export function CodeEditor({ content, language, onChange, onSave }) {
           if (update.docChanged) {
             onChangeRef.current?.(update.state.doc.toString());
           }
+          if (update.selectionSet || update.docChanged) {
+            const pos = update.state.selection.main.head;
+            const line = update.state.doc.lineAt(pos);
+            onCursorChangeRef.current?.({ line: line.number, col: pos - line.from + 1 });
+          }
         }),
       ],
     });
 
     const view = new EditorView({ state, parent: containerRef.current });
     viewRef.current = view;
+    if (externalViewRef) externalViewRef.current = view;
 
-    return () => { view.destroy(); viewRef.current = null; };
+    return () => { view.destroy(); viewRef.current = null; if (externalViewRef) externalViewRef.current = null; };
   }, []); // mount once
 
   // Update content when file changes externally

package/packages/gui/src/components/editor/editor-status-bar.jsx

@@ -0,0 +1,26 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+const LANG_LABELS = {
+  javascript: 'JavaScript',
+  typescript: 'TypeScript',
+  css: 'CSS',
+  html: 'HTML',
+  json: 'JSON',
+  markdown: 'Markdown',
+  python: 'Python',
+};
+
+export function EditorStatusBar({ cursorPos, language }) {
+  return (
+    <div className="flex items-center justify-between h-6 px-3 bg-surface-1 border-t border-border-subtle text-2xs font-sans text-text-3 flex-shrink-0 select-none">
+      <div className="flex items-center gap-3">
+        <span>Ln {cursorPos.line}, Col {cursorPos.col}</span>
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="cursor-default">{LANG_LABELS[language] || language || 'Plain Text'}</span>
+        <span>Spaces: 2</span>
+        <span>UTF-8</span>
+      </div>
+    </div>
+  );
+}

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,17 @@ 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">
       {/* 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-3">
+        {darwinTrafficLights && (
+          <div className="w-full h-[44px] flex-shrink-0 flex items-end justify-center pb-1.5">
+            <img src="/favicon.png" alt="Groove" className="h-7 w-7 rounded-full" />
+          </div>
+        )}
         {NAV_ITEMS.map((item) => (
           <Tooltip key={item.id} content={item.label} side="right">
             <button
@@ -43,7 +53,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">