groove-dev 0.27.14 → 0.27.17

package/node_modules/@groove-dev/gui/src/views/agents.jsx

@@ -10,7 +10,7 @@ import { RootNode } from '../components/agents/root-node';
 import { cn } from '../lib/cn';
 import { Button } from '../components/ui/button';
 import { Badge } from '../components/ui/badge';
-import { Plus, Users, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil } from 'lucide-react';
+import { Plus, Users, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, ChevronLeft, ChevronRight, FolderOpen } from 'lucide-react';
 
 const NODE_TYPES = { agentNode: AgentNode, rootNode: RootNode };
 const NODE_W = 220;
@@ -20,12 +20,28 @@ const NODE_Y_GAP = 130;
 const MAX_PER_ROW = 4;
 const ROOT_ID = '__groove_root__';
 
-function loadPositions() {
-  try { return JSON.parse(localStorage.getItem('groove:nodePositions') || '{}'); } catch { return {}; }
+function loadPositions(teamId) {
+  if (!teamId) return {};
+  try { return JSON.parse(localStorage.getItem(`groove:nodePositions:${teamId}`) || '{}'); } catch { return {}; }
 }
 
-function savePositions(positions) {
-  try { localStorage.setItem('groove:nodePositions', JSON.stringify(positions)); } catch {}
+// Drop high-volume caches (chatHistory, activityLog) to free quota.
+// Used as a fallback when setItem fails on savePositions.
+function freeLocalStorage() {
+  let freed = false;
+  for (const key of ['groove:chatHistory', 'groove:activityLog']) {
+    if (localStorage.getItem(key) !== null) { localStorage.removeItem(key); freed = true; }
+  }
+  return freed;
+}
+
+function savePositions(teamId, positions) {
+  if (!teamId) return;
+  const key = `groove:nodePositions:${teamId}`;
+  const s = JSON.stringify(positions);
+  try { localStorage.setItem(key, s); return; } catch { /* quota */ }
+  if (!freeLocalStorage()) return;
+  try { localStorage.setItem(key, s); } catch { /* still over — give up silently */ }
 }
 
 function loadTeamViewports() {
@@ -72,6 +88,29 @@ export function TeamTabBar() {
   const submitting = useRef(false);
   const [dragId, setDragId] = useState(null);
   const [dragOverId, setDragOverId] = useState(null);
+  const scrollRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const checkScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 0);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, []);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    checkScroll();
+    el.addEventListener('scroll', checkScroll);
+    const ro = new ResizeObserver(checkScroll);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener('scroll', checkScroll);
+      ro.disconnect();
+    };
+  }, [checkScroll, teams.length]);
 
   function handleCreate() {
     const name = newName.trim();
@@ -79,7 +118,10 @@ export function TeamTabBar() {
     submitting.current = true;
     setNewName('');
     setCreating(false);
-    createTeam(name).finally(() => { submitting.current = false; });
+    createTeam(name).finally(() => {
+      submitting.current = false;
+      setTimeout(() => { if (scrollRef.current) scrollRef.current.scrollTo({ left: scrollRef.current.scrollWidth, behavior: 'smooth' }); }, 100);
+    });
   }
 
   function startRename(team) {
@@ -95,7 +137,20 @@ export function TeamTabBar() {
   }
 
   return (
-    <div className="flex items-end px-0 pt-0 pb-0 bg-surface-1 border-b border-border gap-0 flex-shrink-0">
+    <div className="flex items-end px-0 pt-0 pb-0 bg-surface-1 border-b border-border gap-0 flex-shrink-0 overflow-hidden">
+      {canScrollLeft && (
+        <button
+          onClick={() => scrollRef.current?.scrollBy({ left: -300, behavior: 'smooth' })}
+          className="w-6 h-9 flex items-center justify-center bg-accent/15 text-accent hover:bg-accent/25 transition-colors flex-shrink-0 cursor-pointer"
+        >
+          <ChevronLeft size={14} />
+        </button>
+      )}
+      <div
+        ref={scrollRef}
+        className="flex items-end flex-1 min-w-0 overflow-x-auto gap-0"
+        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none', WebkitOverflowScrolling: 'touch' }}
+      >
       {teams.map((team) => {
         const count = agents.filter((a) => a.teamId === team.id).length;
         const isActive = team.id === activeTeamId;
@@ -122,7 +177,7 @@ export function TeamTabBar() {
             onClick={() => !isRenaming && switchTeam(team.id)}
             onDoubleClick={() => startRename(team)}
             className={cn(
-              'group relative flex items-center gap-2 px-4 h-9 text-xs font-sans cursor-pointer select-none transition-colors',
+              'group relative flex items-center gap-2 px-4 h-9 text-xs font-sans cursor-pointer select-none transition-colors flex-shrink-0',
               isActive
                 ? 'text-text-0 font-semibold border-x border-x-border bg-[#242830]'
                 : 'text-text-3 hover:text-text-1 hover:bg-surface-3/50',
@@ -202,9 +257,8 @@ export function TeamTabBar() {
         );
       })}
 
-      {/* Create new team */}
       {creating ? (
-        <div className="flex items-center gap-1.5 px-3 h-9 bg-surface-3/50">
+        <div className="flex items-center gap-1.5 px-3 h-9 flex-shrink-0">
           <input
             value={newName}
             onChange={(e) => setNewName(e.target.value)}
@@ -227,10 +281,20 @@ export function TeamTabBar() {
       ) : (
         <button
           onClick={() => setCreating(true)}
-          className="flex items-center justify-center w-9 h-9 text-text-4 hover:text-text-1 hover:bg-surface-3/50 cursor-pointer transition-colors"
+          className="flex items-center justify-center w-6 h-6 my-auto mx-2 rounded-full bg-accent/15 text-accent hover:bg-accent/25 cursor-pointer transition-colors flex-shrink-0"
           title="New team"
         >
-          <Plus size={14} />
+          <Plus size={12} />
+        </button>
+      )}
+
+      </div>
+      {canScrollRight && (
+        <button
+          onClick={() => scrollRef.current?.scrollBy({ left: 300, behavior: 'smooth' })}
+          className="w-6 h-9 flex items-center justify-center bg-accent/15 text-accent hover:bg-accent/25 transition-colors flex-shrink-0 cursor-pointer"
+        >
+          <ChevronRight size={14} />
         </button>
       )}
     </div>
@@ -246,10 +310,23 @@ function AgentTreeInner() {
   const selectAgent = useGrooveStore((s) => s.selectAgent);
   const closeDetail = useGrooveStore((s) => s.closeDetail);
 
-  const agents = useMemo(
-    () => allAgents.filter((a) => a.teamId === activeTeamId),
-    [allAgents, activeTeamId],
-  );
+  const prevAgentsRef = useRef([]);
+  const agents = useMemo(() => {
+    const next = allAgents
+      .filter((a) => a.teamId === activeTeamId)
+      .sort((a, b) => (a.name || a.id).localeCompare(b.name || b.id));
+    const prev = prevAgentsRef.current;
+    if (prev.length === next.length && prev.every((p, i) => p.id === next[i].id && p.status === next[i].status && p.name === next[i].name && p.model === next[i].model && p.tokensUsed === next[i].tokensUsed && p.contextUsage === next[i].contextUsage)) return prev;
+    prevAgentsRef.current = next;
+    return next;
+  }, [allAgents, activeTeamId]);
+
+  const positionsRef = useRef(loadPositions(activeTeamId));
+  const positionsTeamRef = useRef(activeTeamId);
+  if (positionsTeamRef.current !== activeTeamId) {
+    positionsTeamRef.current = activeTeamId;
+    positionsRef.current = loadPositions(activeTeamId);
+  }
 
   const { fitView, setViewport } = useReactFlow();
   const [prevCount, setPrevCount] = useState(0);
@@ -257,7 +334,7 @@ function AgentTreeInner() {
 
   // Build nodes — positions are stable, data updates flow to node components
   const targetNodes = useMemo(() => {
-    const saved = loadPositions();
+    const saved = positionsRef.current;
     const runningCount = agents.filter((a) => a.status === 'running').length;
 
     const nodes = [
@@ -271,17 +348,14 @@ function AgentTreeInner() {
       },
     ];
 
-    // Track occupied positions so new nodes don't overlap existing ones
     const occupied = new Set();
     const posKey = (x, y) => `${Math.round(x / 100)},${Math.round(y / 100)}`;
 
-    // Mark root node position as occupied
     const rootPos = saved[ROOT_ID] || { x: 0, y: 0 };
     occupied.add(posKey(rootPos.x, rootPos.y));
 
-    // First pass: place agents with saved positions
     const pending = [];
-    agents.forEach((agent, i) => {
+    agents.forEach((agent) => {
       const key = agent.name || agent.id;
       if (saved[key]) {
         const pos = saved[key];
@@ -292,37 +366,51 @@ function AgentTreeInner() {
           draggable: true, selectable: true,
         });
       } else {
-        pending.push({ agent, index: i });
+        pending.push(agent);
       }
     });
 
-    // Second pass: place new agents in non-overlapping positions
-    for (const { agent, index } of pending) {
-      const row = Math.floor(index / MAX_PER_ROW);
-      const col = index % MAX_PER_ROW;
-      const totalInRow = Math.min(agents.length - row * MAX_PER_ROW, MAX_PER_ROW);
+    pending.forEach((agent, idx) => {
+      const row = Math.floor(idx / MAX_PER_ROW);
+      const col = idx % MAX_PER_ROW;
+      const totalInRow = Math.min(pending.length - row * MAX_PER_ROW, MAX_PER_ROW);
       const offsetX = -((totalInRow - 1) * NODE_X_GAP) / 2;
       let pos = { x: offsetX + col * NODE_X_GAP, y: NODE_Y_GAP + row * NODE_Y_GAP };
 
-      // If position is occupied, shift down until we find empty space
       while (occupied.has(posKey(pos.x, pos.y))) {
         pos = { x: pos.x, y: pos.y + NODE_Y_GAP };
       }
       occupied.add(posKey(pos.x, pos.y));
 
+      const key = agent.name || agent.id;
       nodes.push({
         id: agent.id, type: 'agentNode', position: pos,
         data: { agent, timeline: tokenTimeline[agent.id] || [] },
         draggable: true, selectable: true,
       });
-    }
+    });
 
     return nodes;
-  }, [agents, tokenTimeline]);
+  }, [agents, tokenTimeline, activeTeamId]);
+
+  // Auto-save positions for newly placed nodes to positionsRef + localStorage
+  useEffect(() => {
+    const newPositions = {};
+    targetNodes.forEach((n) => {
+      const key = n.id === ROOT_ID ? ROOT_ID : (n.data?.agent?.name || n.id);
+      if (!positionsRef.current[key]) {
+        newPositions[key] = n.position;
+      }
+    });
+    if (Object.keys(newPositions).length > 0) {
+      Object.assign(positionsRef.current, newPositions);
+      savePositions(activeTeamId, positionsRef.current);
+    }
+  }, [targetNodes, activeTeamId]);
 
   // Build edges — compute closest handle based on saved node positions
   const targetEdges = useMemo(() => {
-    const saved = loadPositions();
+    const saved = loadPositions(activeTeamId);
     const rootPos = saved[ROOT_ID] || { x: 0, y: 0 };
 
     return agents.map((agent, i) => {
@@ -354,7 +442,7 @@ function AgentTreeInner() {
         animated: agent.status === 'running',
       };
     });
-  }, [agents]);
+  }, [agents, activeTeamId]);
 
   const [nodes, setNodes, onNodesChange] = useNodesState(targetNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(targetEdges);
@@ -364,15 +452,12 @@ function AgentTreeInner() {
   useEffect(() => {
     setNodes((current) => {
       const currentMap = new Map(current.map((n) => [n.id, n]));
-      const newIds = new Set(targetNodes.map((n) => n.id));
 
       return targetNodes.map((tn) => {
         const existing = currentMap.get(tn.id);
         if (existing) {
-          // Preserve existing position, update data only
           return { ...existing, data: tn.data };
         }
-        // New node — use calculated position
         return tn;
       });
     });
@@ -474,13 +559,12 @@ function AgentTreeInner() {
   }, [nodes, setEdges]);
 
   const onNodeDragStop = useCallback((_e, node) => {
-    const agent = agents.find((a) => a.id === node.id);
-    // Save by agent name (stable across resumes/rotations) instead of ID (changes each session)
-    const key = node.id === ROOT_ID ? ROOT_ID : (agent?.name || node.id);
-    const saved = loadPositions();
+    const key = node.id === ROOT_ID ? ROOT_ID : (node.data?.agent?.name || node.id);
+    positionsRef.current[key] = node.position;
+    const saved = loadPositions(activeTeamId);
     saved[key] = node.position;
-    savePositions(saved);
-  }, [agents]);
+    savePositions(activeTeamId, saved);
+  }, [activeTeamId]);
 
   return (
     <ReactFlow
@@ -556,6 +640,19 @@ function EmptyState({ onPlanner, onSpawn }) {
           </button>
         </div>
 
+        {window.groove?.openFolder && (
+          <div className="max-w-sm mx-auto">
+            <p className="text-xs text-text-3 mb-2">Or open a different project</p>
+            <button
+              onClick={() => window.groove.openFolder()}
+              className="w-full h-10 rounded-lg border border-border-subtle bg-surface-2 hover:bg-surface-3 text-sm text-text-1 font-medium flex items-center justify-center gap-2 cursor-pointer transition-colors"
+            >
+              <FolderOpen size={16} className="text-accent" />
+              Open Folder
+            </button>
+          </div>
+        )}
+
         <p className="text-xs text-text-4 font-sans">
           <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>
@@ -745,12 +842,21 @@ export default function AgentsView() {
         ) : teamAgents.length === 0 ? (
           <EmptyState onPlanner={launchPlanner} onSpawn={() => openDetail({ type: 'spawn' })} />
         ) : (
-          <ReactFlowProvider>
+          <ReactFlowProvider key={activeTeamId}>
             <AgentTreeInner />
           </ReactFlowProvider>
         )}
       </div>
       <RecommendedTeamCard />
+      {!isLoading && teamAgents.length > 0 && (
+        <button
+          onClick={() => openDetail({ type: 'spawn' })}
+          className="absolute bottom-4 left-4 z-40 flex items-center gap-1.5 h-8 px-4 rounded-md bg-accent/15 text-accent text-xs font-semibold font-sans hover:bg-accent/25 transition-colors cursor-pointer select-none shadow-lg shadow-black/10"
+        >
+          <Plus size={14} />
+          Spawn
+        </button>
+      )}
     </div>
   );
 }

package/node_modules/@groove-dev/gui/src/views/editor.jsx

@@ -1,10 +1,13 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { useGrooveStore } from '../stores/groove';
 import { FileTree } from '../components/editor/file-tree';
 import { EditorTabs } from '../components/editor/editor-tabs';
 import { CodeEditor } from '../components/editor/code-editor';
 import { MediaViewer, isMediaFile } from '../components/editor/media-viewer';
+import { EditorStatusBar } from '../components/editor/editor-status-bar';
+import { GotoLine } from '../components/editor/goto-line';
+import { Breadcrumbs } from '../components/editor/breadcrumbs';
 import { Code2, AlertTriangle, RefreshCw, X, Eye, FileCode } from 'lucide-react';
 import { Button } from '../components/ui/button';
 import { api } from '../lib/api';
@@ -15,6 +18,10 @@ function isHtmlFile(path) {
   return ext === 'html' || ext === 'htm';
 }
 
+const SIDEBAR_DEFAULT = 240;
+const SIDEBAR_MIN = 160;
+const SIDEBAR_MAX = 400;
+
 export default function EditorView() {
   const activeFile = useGrooveStore((s) => s.editorActiveFile);
   const files = useGrooveStore((s) => s.editorFiles);
@@ -23,10 +30,19 @@ export default function EditorView() {
   const saveFile = useGrooveStore((s) => s.saveFile);
   const reloadFile = useGrooveStore((s) => s.reloadFile);
   const dismissFileChange = useGrooveStore((s) => s.dismissFileChange);
+  const sidebarWidth = useGrooveStore((s) => s.editorSidebarWidth);
+  const setSidebarWidth = useGrooveStore((s) => s.setEditorSidebarWidth);
 
   const [rootDir, setRootDir] = useState('');
   const [previewMode, setPreviewMode] = useState(false);
   const [previewKey, setPreviewKey] = useState(0);
+  const [cursorPos, setCursorPos] = useState({ line: 1, col: 1 });
+  const [showGotoLine, setShowGotoLine] = useState(false);
+
+  const editorViewRef = useRef(null);
+  const dragging = useRef(false);
+  const startX = useRef(0);
+  const startW = useRef(0);
 
   // Fetch root dir
   useEffect(() => {
@@ -36,6 +52,53 @@ export default function EditorView() {
   // Reset preview mode when switching files
   useEffect(() => { setPreviewMode(false); }, [activeFile]);
 
+  // Keyboard shortcuts
+  useEffect(() => {
+    function handleKeyDown(e) {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'g') {
+        e.preventDefault();
+        setShowGotoLine(true);
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  // Sidebar resize handlers
+  const onSidebarMouseDown = useCallback((e) => {
+    e.preventDefault();
+    dragging.current = true;
+    startX.current = e.clientX;
+    startW.current = sidebarWidth;
+
+    function onMouseMove(e) {
+      if (!dragging.current) return;
+      const delta = e.clientX - startX.current;
+      const newW = Math.min(Math.max(startW.current + delta, SIDEBAR_MIN), SIDEBAR_MAX);
+      setSidebarWidth(newW);
+    }
+
+    function onMouseUp() {
+      dragging.current = false;
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    }
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  }, [sidebarWidth, setSidebarWidth]);
+
+  function handleGoto(line) {
+    const view = editorViewRef.current;
+    if (!view) return;
+    const docLine = view.state.doc.line(Math.min(line, view.state.doc.lines));
+    view.dispatch({
+      selection: { anchor: docLine.from },
+      scrollIntoView: true,
+    });
+    view.focus();
+  }
+
   const file = activeFile ? files[activeFile] : null;
   const isMedia = activeFile && isMediaFile(activeFile);
   const isHtml = activeFile && isHtmlFile(activeFile);
@@ -44,8 +107,14 @@ export default function EditorView() {
   return (
     <div className="flex h-full">
       {/* File tree sidebar */}
-      <div className="w-60 flex-shrink-0 border-r border-border">
+      <div className="flex-shrink-0 border-r border-border relative" style={{ width: sidebarWidth }}>
         <FileTree rootDir={rootDir} />
+        {/* Drag handle */}
+        <div
+          className="absolute top-0 right-0 bottom-0 w-1 cursor-col-resize hover:bg-accent/30 transition-colors z-10"
+          onMouseDown={onSidebarMouseDown}
+          onDoubleClick={() => setSidebarWidth(SIDEBAR_DEFAULT)}
+        />
       </div>
 
       {/* Editor area */}
@@ -53,8 +122,20 @@ export default function EditorView() {
         {/* Tab bar */}
         <EditorTabs />
 
+        {/* Breadcrumbs */}
+        {activeFile && !isMedia && <Breadcrumbs path={activeFile} />}
+
         {/* Content */}
         <div className="flex-1 relative min-h-0">
+          {/* Go to line dialog */}
+          {showGotoLine && (
+            <GotoLine
+              currentLine={cursorPos.line}
+              onGoto={handleGoto}
+              onClose={() => setShowGotoLine(false)}
+            />
+          )}
+
           {/* External change banner */}
           {hasExternalChange && (
             <div className="absolute top-0 left-0 right-0 z-10 flex items-center gap-2 px-4 py-2 bg-warning/10 border-b border-warning/20">
@@ -120,6 +201,8 @@ export default function EditorView() {
                     language={file.language}
                     onChange={(content) => updateFileContent(activeFile, content)}
                     onSave={() => saveFile(activeFile)}
+                    onCursorChange={setCursorPos}
+                    viewRef={editorViewRef}
                   />
                 )
               )}
@@ -132,9 +215,16 @@ export default function EditorView() {
               language={file.language}
               onChange={(content) => updateFileContent(activeFile, content)}
               onSave={() => saveFile(activeFile)}
+              onCursorChange={setCursorPos}
+              viewRef={editorViewRef}
             />
           )}
         </div>
+
+        {/* Status bar */}
+        {activeFile && !isMedia && (
+          <EditorStatusBar cursorPos={cursorPos} language={file?.language} />
+        )}
       </div>
     </div>
   );

package/node_modules/@groove-dev/gui/src/views/federation.jsx

@@ -0,0 +1,37 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useEffect } from 'react';
+import { useGrooveStore } from '../stores/groove';
+import { FederationPanel } from '../components/settings/federation-panel';
+import { ProGate } from '../components/pro/pro-gate';
+import { ScrollArea } from '../components/ui/scroll-area';
+import { Globe } from 'lucide-react';
+
+export default function FederationView() {
+  const fetchFederationStatus = useGrooveStore((s) => s.fetchFederationStatus);
+
+  useEffect(() => {
+    fetchFederationStatus();
+  }, []);
+
+  return (
+    <div className="flex flex-col h-full bg-surface-0">
+      <div className="flex items-center gap-3 px-6 py-4 border-b border-border">
+        <div className="w-8 h-8 rounded-md bg-accent/10 flex items-center justify-center">
+          <Globe size={16} className="text-accent" />
+        </div>
+        <div>
+          <h1 className="text-sm font-semibold text-text-0 font-sans">Federation</h1>
+          <p className="text-2xs text-text-3 font-sans">Connect to remote Groove daemons</p>
+        </div>
+      </div>
+
+      <ScrollArea className="flex-1">
+        <div className="max-w-2xl mx-auto px-6 py-5">
+          <ProGate feature="Federation" featureKey="federation" description="Daemon-to-daemon federation over Tailscale mesh for multi-machine agent coordination">
+            <FederationPanel />
+          </ProGate>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}

package/node_modules/@groove-dev/gui/src/views/marketplace.jsx

@@ -22,8 +22,8 @@ import { RepoImport } from '../components/marketplace/repo-import';
 import { RepoCard } from '../components/marketplace/repo-card';
 import { RepoNukeDialog } from '../components/marketplace/repo-nuke-dialog';
 import {
-  ChevronLeft, ChevronDown, Sparkles, Plug, LogIn, LogOut,
-  User, Upload, Package, Download, ShoppingBag, RefreshCw, Trash2,
+  ChevronLeft, ChevronDown, Sparkles, Plug, LogIn,
+  Upload, Package, Download, ShoppingBag, RefreshCw, Trash2,
   GitBranch,
 } from 'lucide-react';
 
@@ -588,45 +588,6 @@ function MyLibrary() {
   );
 }
 
-// ── Auth Area (header right) ─────────────────────────────
-function AuthArea() {
-  const authenticated = useGrooveStore((s) => s.marketplaceAuthenticated);
-  const user = useGrooveStore((s) => s.marketplaceUser);
-  const login = useGrooveStore((s) => s.marketplaceLogin);
-  const logout = useGrooveStore((s) => s.marketplaceLogout);
-
-  if (authenticated) {
-    return (
-      <div className="flex items-center gap-1">
-        <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded bg-surface-3 border border-border-subtle">
-          <div className="w-4 h-4 rounded-full bg-accent/20 flex items-center justify-center">
-            <User size={9} className="text-accent" />
-          </div>
-          <span className="text-xs text-text-0 font-sans font-medium max-w-[120px] truncate">
-            {user?.displayName || user?.id || 'Account'}
-          </span>
-        </div>
-        <button
-          onClick={logout}
-          className="flex items-center gap-1 px-2 py-1.5 rounded text-xs text-text-3 hover:text-text-0 hover:bg-surface-3 font-sans cursor-pointer transition-colors"
-        >
-          <LogOut size={11} />
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <button
-      onClick={login}
-      className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold font-sans text-text-0 bg-accent/15 border border-accent/25 rounded hover:bg-accent/25 cursor-pointer transition-colors"
-    >
-      <LogIn size={12} />
-      Sign in
-    </button>
-  );
-}
-
 // ── GitHub Browse ───────────────────────────────────────
 function GitHubBrowse() {
   const importedRepos = useGrooveStore((s) => s.importedRepos);
@@ -735,7 +696,6 @@ export default function MarketplaceView() {
             })}
           </div>
           <div className="flex-1" />
-          <AuthArea />
         </div>
       </div>