groove-dev 0.27.143 → 0.27.145

package/packages/gui/src/components/lab/system-prompt-editor.jsx

@@ -25,7 +25,7 @@ export function SystemPromptEditor() {
   const systemPrompt = useGrooveStore((s) => s.labSystemPrompt);
   const setSystemPrompt = useGrooveStore((s) => s.setLabSystemPrompt);
   const themeKey = useGrooveStore((s) => s.editorTheme);
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(true);
   const containerRef = useRef(null);
   const viewRef = useRef(null);
   const themeCompartment = useRef(new Compartment());
@@ -87,20 +87,22 @@ export function SystemPromptEditor() {
   }, [systemPrompt]);
 
   return (
-    <div className="space-y-1.5">
+    <div className="space-y-3">
       <button
         onClick={() => setCollapsed(!collapsed)}
-        className="flex items-center gap-1.5 w-full cursor-pointer group"
+        className="flex items-center gap-1.5 w-full h-6 cursor-pointer group"
       >
         {collapsed ? (
-          <ChevronRight size={11} className="text-text-4 group-hover:text-text-2 transition-colors" />
+          <ChevronRight size={10} className="text-text-4 group-hover:text-text-2 transition-colors flex-shrink-0" />
         ) : (
-          <ChevronDown size={11} className="text-text-4 group-hover:text-text-2 transition-colors" />
+          <ChevronDown size={10} className="text-text-4 group-hover:text-text-2 transition-colors flex-shrink-0" />
         )}
-        <span className="text-2xs font-semibold font-sans text-text-3 uppercase tracking-wider group-hover:text-text-2 transition-colors">
+        <span className="text-[10px] font-semibold font-sans text-text-3 uppercase tracking-widest group-hover:text-text-2 transition-colors">
           System Prompt
         </span>
-        <span className="text-2xs font-mono text-text-4 ml-auto">{charCount > 0 ? `${charCount}` : ''}</span>
+        {charCount > 0 && (
+          <span className="text-[10px] font-mono text-text-4 ml-auto tabular-nums">{charCount}</span>
+        )}
       </button>
 
       <div className={cn(
@@ -109,7 +111,7 @@ export function SystemPromptEditor() {
       )}>
         <div
           ref={containerRef}
-          className="h-full border border-border-subtle rounded-sm overflow-hidden"
+          className="h-full rounded-md bg-surface-1/50 border border-border-subtle overflow-hidden"
         />
       </div>
     </div>

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

@@ -1,5 +1,5 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { Network, Code2, ChartSpline, Puzzle, Users, Box, FlaskConical, Newspaper, Settings, Globe, MessageCircle, Eye, BookOpen } from 'lucide-react';
+import { Network, Code2, ChartSpline, Puzzle, Users, Box, FlaskConical, Newspaper, Settings, Globe, MessageCircle, BookOpen } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { Tooltip } from '../ui/tooltip';
 import { useGrooveStore } from '../../stores/groove';
@@ -18,7 +18,6 @@ const BASE_NAV_ITEMS = [
 ];
 
 const NETWORK_NAV_ITEM = { id: 'network', icon: Globe, label: 'Network' };
-const PREVIEW_NAV_ITEM = { id: 'preview', icon: Eye, label: 'Preview' };
 
 const UTIL_ITEMS = [
   { id: 'journalist', icon: Newspaper, label: 'Journalist', panel: true },
@@ -28,8 +27,7 @@ const UTIL_ITEMS = [
 export function ActivityBar({ activeView, detailPanel, onNavigate, onTogglePanel }) {
   const darwinTrafficLights = isElectron() && getPlatform() === 'darwin';
   const networkUnlocked = useGrooveStore((s) => s.networkUnlocked);
-  const previewUrl = useGrooveStore((s) => s.previewState.url);
-  let NAV_ITEMS = previewUrl ? [...BASE_NAV_ITEMS, PREVIEW_NAV_ITEM] : BASE_NAV_ITEMS;
+  let NAV_ITEMS = BASE_NAV_ITEMS;
   if (networkUnlocked) NAV_ITEMS = [...NAV_ITEMS, NETWORK_NAV_ITEM];
 
   return (

package/packages/gui/src/components/layout/terminal-panel.jsx

@@ -107,7 +107,9 @@ export function TerminalPanel({
   const startY = useRef(0);
   const startH = useRef(0);
 
-  const activeAgent = useGrooveStore((s) => s.editorSelectedAgent);
+  const detailPanel = useGrooveStore((s) => s.detailPanel);
+  const workspaceAgentId = useGrooveStore((s) => s.workspaceAgentId);
+  const activeAgent = detailPanel?.type === 'agent' ? detailPanel.agentId : workspaceAgentId || null;
   const agents = useGrooveStore((s) => s.agents);
   const attachSnippet = useGrooveStore((s) => s.attachSnippet);
 
@@ -141,8 +143,8 @@ export function TerminalPanel({
   function sendToAgent(agentId) {
     if (!agentId || !selectedText?.trim()) return;
     setShowPicker(false);
-    useGrooveStore.setState({ editorSelectedAgent: agentId });
     attachSnippet({ type: 'terminal', code: selectedText.trim() });
+    useGrooveStore.getState().selectAgent(agentId);
   }
 
   function handleSendClick() {

package/packages/gui/src/components/layout/welcome-splash.jsx

@@ -1,17 +1,34 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
+//
+// ⚠️  AGENT CONTEXT LANDMINE — READ BEFORE MODIFYING THIS FILE
+//
+// This file's import chain pulls in heavy components (quick-connect → ssh-wizard
+// at 22KB, folder-browser at 7KB, groove.js store at 41KB). Reading those files
+// will blow your context window and cause compaction → stall → freeze.
+//
+// RULES FOR AI AGENTS:
+//   1. Do NOT read groove.js — the store selectors below are the full interface
+//   2. Do NOT read or modify quick-connect.jsx or ssh-wizard.jsx — they are
+//      standalone components rendered as-is. Restyle them in their own files.
+//   3. Do NOT read folder-browser.jsx — it's a dialog, just pass it props
+//   4. Do NOT spawn Explore sub-agents to "understand the codebase" — everything
+//      you need is in THIS file and app.css (for design tokens / CSS variables)
+//   5. Redesign THIS file only. Never rewrite imported components as a side-effect.
+//
 import { useState, useEffect } from 'react';
 import { useGrooveStore } from '../../stores/groove';
-import { HEX, hexAlpha } from '../../lib/theme-hex';
 import { cn } from '../../lib/cn';
 import {
   FolderOpen, Radio, X, Plus, ExternalLink, Loader2, Unplug,
+  ArrowRight, Clock, Server,
 } from 'lucide-react';
-import { FolderBrowser } from '../agents/folder-browser';
-import { QuickConnect } from '../settings/quick-connect';
+import { FolderBrowser } from '../agents/folder-browser'; // dialog — don't read source, just pass props
+import { QuickConnect } from '../settings/quick-connect'; // self-contained — don't read or rewrite
 import { StatusDot } from '../ui/status-dot';
 import { ToastContainer } from '../ui/toast';
 
 export function WelcomeSplash() {
+  // These are ALL the store selectors this component uses — no need to read groove.js
   const recentProjects = useGrooveStore((s) => s.recentProjects);
   const setProjectDir = useGrooveStore((s) => s.setProjectDir);
   const removeRecentProject = useGrooveStore((s) => s.removeRecentProject);
@@ -32,7 +49,7 @@ export function WelcomeSplash() {
   const visibleProjects = (recentProjects || []).slice(0, 8);
   const hasRecent = visibleProjects.length > 0;
   const hasTunnels = savedTunnels.length > 0;
-  const hasRightContent = hasRecent || hasTunnels;
+  const hasContent = hasRecent || hasTunnels;
 
   async function handleTunnelClick(server) {
     if (server.active) {
@@ -53,106 +70,96 @@ export function WelcomeSplash() {
   }
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center"
-      style={{ background: `radial-gradient(ellipse at 50% 40%, ${hexAlpha(HEX.accent, 0.06)} 0%, transparent 70%) ${HEX.surface0}` }}
-    >
-      <div className={cn(
-        'w-full max-w-4xl px-8 flex gap-12',
-        hasRightContent ? 'items-start' : 'items-center justify-center',
-        'max-md:flex-col max-md:items-center max-md:gap-8 max-md:overflow-y-auto max-md:max-h-[100vh] max-md:py-12',
-      )}>
-        {/* ── Left Panel ─────────────────────────────────────── */}
-        <div className={cn(
-          'flex flex-col',
-          hasRightContent ? 'w-[55%] max-md:w-full' : 'w-full max-w-lg',
-          hasRightContent ? 'pt-[10vh]' : 'items-center text-center',
-        )}>
-          {/* Hero */}
-          <div className={cn('flex items-center gap-4 mb-6', !hasRightContent && 'flex-col')}>
-            <div
-              className="w-16 h-16 rounded-full flex items-center justify-center flex-shrink-0"
-              style={{
-                background: hexAlpha(HEX.accent, 0.08),
-                border: `1px solid ${hexAlpha(HEX.accent, 0.15)}`,
-                boxShadow: `0 0 40px ${hexAlpha(HEX.accent, 0.1)}`,
-              }}
-            >
-              <img src="/favicon.png" className="w-9 h-9 rounded-full" alt="Groove" />
-            </div>
-            <div>
-              <h1 className="text-2xl font-bold text-text-0 font-sans tracking-tight">Welcome to Groove</h1>
-              <p className="text-sm text-text-2 font-sans mt-0.5">Your AI coding team, ready in minutes</p>
-            </div>
-          </div>
+    <div className="fixed inset-0 z-50 overflow-y-auto welcome-bg">
+      <div className="pointer-events-none fixed top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] rounded-full bg-accent/[0.03] blur-[120px]" />
 
-          {/* Action cards */}
-          <div className="flex flex-col gap-3 mt-4 w-full">
-            <button
-              onClick={() => setBrowsing(true)}
-              className="w-full flex items-center gap-4 p-5 rounded-lg border border-accent/25 bg-gradient-to-r from-accent/8 to-accent/3 hover:from-accent/14 hover:to-accent/6 hover:border-accent/40 transition-all cursor-pointer group text-left"
-            >
-              <div className="w-11 h-11 rounded-lg bg-accent/20 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
-                <FolderOpen size={22} className="text-accent" />
-              </div>
-              <div className="flex-1 min-w-0">
-                <div className="text-base font-semibold text-text-0 font-sans">Open Project</div>
-                <div className="text-sm text-text-2 font-sans mt-0.5">Browse the filesystem to pick a project</div>
-              </div>
-            </button>
+      <div className="relative min-h-screen flex flex-col items-center px-8 pt-[14vh] pb-12 max-sm:pt-[8vh] max-sm:px-5">
 
-            <button
-              onClick={toggleQuickConnect}
-              className="w-full flex items-center gap-4 p-5 rounded-lg border border-border bg-surface-1 hover:bg-surface-2 hover:border-border transition-all cursor-pointer group text-left"
-            >
-              <div className="w-11 h-11 rounded-lg bg-surface-4 flex items-center justify-center group-hover:scale-110 transition-transform flex-shrink-0">
-                <Radio size={22} className="text-text-1" />
-              </div>
-              <div className="flex-1 min-w-0">
-                <div className="text-base font-semibold text-text-0 font-sans">Connect to Remote</div>
-                <div className="text-sm text-text-2 font-sans mt-0.5">SSH tunnel to a server</div>
-              </div>
-            </button>
+        {/* ── Hero ──────────────────────────────────────────── */}
+        <div className="flex flex-col items-center text-center mb-14">
+          <div className="relative mb-8">
+            <div className="absolute -inset-10 rounded-full bg-accent/[0.06] blur-3xl animate-welcome-breathe" />
+            <div className="absolute -inset-4 rounded-full border border-accent/25 animate-welcome-ring" />
+            <div className="absolute -inset-4 rounded-full border border-accent/15 animate-welcome-ring-delayed" />
+            <div className="relative w-[88px] h-[88px] rounded-full bg-accent/[0.07] border border-accent/20 flex items-center justify-center welcome-logo-shadow">
+              <img src="/favicon.png" className="w-12 h-12 rounded-full" alt="Groove" />
+            </div>
           </div>
 
-          {/* Keyboard shortcuts */}
-          <p className="text-xs text-text-4 font-sans mt-8">
-            <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>
-            <span className="text-text-4 mx-1">&middot;</span>
-            <kbd className="font-mono bg-surface-4 px-1.5 py-0.5 rounded text-text-3">Cmd+N</kbd>
-            <span className="mx-1.5">spawn</span>
-            <span className="text-text-4 mx-1">&middot;</span>
-            <kbd className="font-mono bg-surface-4 px-1.5 py-0.5 rounded text-text-3">Cmd+J</kbd>
-            <span className="mx-1.5">terminal</span>
+          <h1 className="text-4xl font-bold text-text-0 tracking-tight mb-3 font-sans max-sm:text-3xl">
+            Welcome to Groove
+          </h1>
+          <p className="text-base text-text-2 font-sans max-w-md leading-relaxed max-sm:text-sm">
+            The most powerful agenticOS ever built.
+            <br className="max-sm:hidden" />
+            <span className="max-sm:hidden"> </span>Spawn fast. Stay aware. Never lose context.
           </p>
         </div>
 
-        {/* ── Right Panel ────────────────────────────────────── */}
-        {hasRightContent && (
-          <div className="w-[45%] max-md:w-full pt-[10vh] max-md:pt-0 min-w-0 max-h-[80vh] overflow-y-auto">
-            {/* Recent Projects */}
+        {/* ── Action Cards ──────────────────────────────────── */}
+        <div className="w-full max-w-2xl grid grid-cols-2 gap-4 mb-14 max-sm:grid-cols-1 max-sm:max-w-sm">
+          <button
+            onClick={() => setBrowsing(true)}
+            className="group relative overflow-hidden rounded-xl border border-accent/20 bg-gradient-to-br from-accent/[0.08] via-accent/[0.03] to-transparent p-6 text-left hover:border-accent/40 hover:from-accent/[0.14] hover:via-accent/[0.06] transition-all duration-300 cursor-pointer"
+          >
+            <div className="w-12 h-12 rounded-xl bg-accent/15 border border-accent/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
+              <FolderOpen size={24} className="text-accent" />
+            </div>
+            <div className="text-lg font-semibold text-text-0 font-sans mb-1">Open Project</div>
+            <div className="text-sm text-text-2 font-sans">Browse the filesystem to pick a project</div>
+            <div className="flex items-center gap-1 text-xs text-accent font-sans mt-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+              Browse files <ArrowRight size={12} />
+            </div>
+          </button>
+
+          <button
+            onClick={toggleQuickConnect}
+            className="group relative overflow-hidden rounded-xl border border-border bg-surface-1 p-6 text-left hover:border-accent/30 hover:bg-surface-2 transition-all duration-300 cursor-pointer"
+          >
+            <div className="w-12 h-12 rounded-xl bg-surface-4 border border-border-subtle flex items-center justify-center mb-4 group-hover:scale-110 group-hover:bg-accent/10 group-hover:border-accent/20 transition-all duration-300">
+              <Radio size={24} className="text-text-2 group-hover:text-accent transition-colors duration-300" />
+            </div>
+            <div className="text-lg font-semibold text-text-0 font-sans mb-1">Connect to Remote</div>
+            <div className="text-sm text-text-2 font-sans">SSH tunnel to a server running Groove</div>
+            <div className="flex items-center gap-1 text-xs text-accent font-sans mt-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+              Setup connection <ArrowRight size={12} />
+            </div>
+          </button>
+        </div>
+
+        {/* ── Content Grid ──────────────────────────────────── */}
+        {hasContent && (
+          <div className={cn(
+            'w-full max-w-4xl gap-6 mb-14 max-sm:flex max-sm:flex-col max-sm:gap-6',
+            hasRecent && hasTunnels ? 'grid grid-cols-2' : 'flex justify-center',
+          )}>
             {hasRecent && (
-              <div>
-                <div className="text-2xs font-mono text-text-3 uppercase tracking-widest mb-2">Recent</div>
-                <div className="flex flex-col">
+              <div className={cn(!hasTunnels && 'w-full max-w-lg')}>
+                <div className="flex items-center gap-2 mb-3">
+                  <Clock size={13} className="text-text-3" />
+                  <h2 className="text-2xs font-mono text-text-3 uppercase tracking-widest">Recent Projects</h2>
+                </div>
+                <div className="rounded-xl border border-border-subtle bg-surface-1/50 overflow-hidden divide-y divide-border-subtle">
                   {visibleProjects.map((project) => (
                     <div
                       key={project.path}
-                      className="group flex items-center gap-2 px-2 py-1.5 rounded-sm hover:bg-surface-1 transition-colors"
+                      className="group flex items-center gap-3 px-4 py-3 hover:bg-surface-2/50 transition-colors"
                     >
+                      <div className="w-8 h-8 rounded-lg bg-surface-3 flex items-center justify-center flex-shrink-0 group-hover:bg-accent/10 transition-colors">
+                        <FolderOpen size={14} className="text-text-3 group-hover:text-accent transition-colors" />
+                      </div>
                       <button
                         onClick={() => setProjectDir(project.path)}
                         className="flex-1 min-w-0 text-left cursor-pointer"
                       >
-                        <div className="text-sm font-medium text-text-1 hover:text-accent truncate transition-colors">
+                        <div className="text-sm font-medium text-text-1 group-hover:text-accent truncate transition-colors font-sans">
                           {project.name}
                         </div>
                         <div className="text-2xs font-mono text-text-4 truncate">{project.path}</div>
                       </button>
                       <button
                         onClick={(e) => { e.stopPropagation(); removeRecentProject(project.path); }}
-                        className="opacity-0 group-hover:opacity-100 p-0.5 text-text-4 hover:text-danger cursor-pointer transition-all flex-shrink-0"
+                        className="opacity-0 group-hover:opacity-100 p-1 text-text-4 hover:text-danger cursor-pointer transition-all flex-shrink-0"
                         title="Remove from recent"
                       >
                         <X size={14} />
@@ -163,45 +170,51 @@ export function WelcomeSplash() {
               </div>
             )}
 
-            {/* Divider */}
-            {hasRecent && hasTunnels && (
-              <div className="border-t border-border-subtle my-4" />
-            )}
-
-            {/* SSH Connections */}
             {hasTunnels && (
-              <div>
-                <div className="text-2xs font-mono text-text-3 uppercase tracking-widest mb-2">SSH Connections</div>
-                <div className="flex flex-col">
+              <div className={cn(!hasRecent && 'w-full max-w-lg')}>
+                <div className="flex items-center gap-2 mb-3">
+                  <Server size={13} className="text-text-3" />
+                  <h2 className="text-2xs font-mono text-text-3 uppercase tracking-widest">SSH Connections</h2>
+                </div>
+                <div className="rounded-xl border border-border-subtle bg-surface-1/50 overflow-hidden divide-y divide-border-subtle">
                   {savedTunnels.map((server) => (
                     <div
                       key={server.id}
                       className={cn(
-                        'group flex items-center gap-2 px-2 py-1.5 rounded-sm hover:bg-surface-1 transition-colors',
+                        'group flex items-center gap-3 px-4 py-3 hover:bg-surface-2/50 transition-colors',
                         connectingId === server.id && 'opacity-60 pointer-events-none',
                       )}
                     >
+                      <div className={cn(
+                        'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 transition-colors',
+                        server.active ? 'bg-success/10' : 'bg-surface-3 group-hover:bg-accent/10',
+                      )}>
+                        <Server size={14} className={cn(
+                          'transition-colors',
+                          server.active ? 'text-success' : 'text-text-3 group-hover:text-accent',
+                        )} />
+                      </div>
                       <button
                         onClick={() => handleTunnelClick(server)}
                         disabled={connectingId === server.id}
                         className="flex-1 min-w-0 text-left cursor-pointer"
                       >
                         <div className="flex items-center gap-1.5">
-                          <span className="text-sm font-medium text-text-1 hover:text-accent truncate transition-colors">
+                          <span className="text-sm font-medium text-text-1 group-hover:text-accent truncate transition-colors font-sans">
                             {server.name}
                           </span>
                           {server.active && <StatusDot status="running" size="sm" />}
                         </div>
                         <div className="text-2xs font-mono text-text-4 truncate">{server.user}@{server.host}</div>
                       </button>
-                      <div className="flex items-center gap-1 flex-shrink-0">
+                      <div className="flex items-center gap-1.5 flex-shrink-0">
                         {connectingId === server.id ? (
                           <Loader2 size={14} className="text-text-3 animate-spin" />
                         ) : server.active ? (
                           <>
                             <button
                               onClick={() => handleTunnelClick(server)}
-                              className="opacity-0 group-hover:opacity-100 flex items-center gap-0.5 text-2xs text-success hover:text-success/80 cursor-pointer transition-all"
+                              className="opacity-0 group-hover:opacity-100 flex items-center gap-0.5 text-2xs text-success hover:text-success/80 cursor-pointer transition-all font-sans"
                             >
                               <ExternalLink size={11} /> Open
                             </button>
@@ -210,7 +223,7 @@ export function WelcomeSplash() {
                                 await disconnectTunnel(server.id);
                                 addToast('info', 'Disconnected', server.name);
                               }}
-                              className="opacity-0 group-hover:opacity-100 p-0.5 text-text-4 hover:text-danger cursor-pointer transition-all"
+                              className="opacity-0 group-hover:opacity-100 p-1 text-text-4 hover:text-danger cursor-pointer transition-all"
                               title="Disconnect"
                             >
                               <Unplug size={12} />
@@ -219,7 +232,7 @@ export function WelcomeSplash() {
                         ) : null}
                         <button
                           onClick={(e) => { e.stopPropagation(); deleteTunnel(server.id); }}
-                          className="opacity-0 group-hover:opacity-100 p-0.5 text-text-4 hover:text-danger cursor-pointer transition-all flex-shrink-0"
+                          className="opacity-0 group-hover:opacity-100 p-1 text-text-4 hover:text-danger cursor-pointer transition-all flex-shrink-0"
                           title="Remove connection"
                         >
                           <X size={14} />
@@ -227,24 +240,40 @@ export function WelcomeSplash() {
                       </div>
                     </div>
                   ))}
+                  <button
+                    onClick={toggleQuickConnect}
+                    className="flex items-center gap-1.5 text-2xs text-accent hover:text-accent/80 font-sans font-medium cursor-pointer transition-colors w-full px-4 py-2.5 hover:bg-surface-2/30"
+                  >
+                    <Plus size={11} /> Add Connection
+                  </button>
                 </div>
-                <button
-                  onClick={toggleQuickConnect}
-                  className="flex items-center gap-1 text-xs text-accent hover:underline font-sans cursor-pointer mt-2 px-2"
-                >
-                  <Plus size={12} /> Add Connection
-                </button>
               </div>
             )}
-
-            {/* Empty state */}
-            {!hasRecent && !hasTunnels && (
-              <p className="text-sm text-text-4 italic px-2">No recent activity</p>
-            )}
           </div>
         )}
+
+        {/* ── Footer ──────────────────────────────────────── */}
+        <div className="mt-auto pt-8 flex flex-col items-center gap-4">
+          <div className="flex items-center gap-5 text-xs text-text-4 font-sans">
+            <span className="flex items-center gap-1.5">
+              <kbd className="font-mono bg-surface-4 px-1.5 py-0.5 rounded text-text-3 text-2xs">⌘K</kbd>
+              <span>palette</span>
+            </span>
+            <span className="text-border">·</span>
+            <span className="flex items-center gap-1.5">
+              <kbd className="font-mono bg-surface-4 px-1.5 py-0.5 rounded text-text-3 text-2xs">⌘N</kbd>
+              <span>spawn</span>
+            </span>
+            <span className="text-border">·</span>
+            <span className="flex items-center gap-1.5">
+              <kbd className="font-mono bg-surface-4 px-1.5 py-0.5 rounded text-text-3 text-2xs">⌘J</kbd>
+              <span>terminal</span>
+            </span>
+          </div>
+        </div>
       </div>
 
+      {/* These are self-contained components — do NOT read/rewrite their source files */}
       <FolderBrowser
         open={browsing}
         onOpenChange={setBrowsing}

package/packages/gui/src/components/network/network-health.jsx

@@ -43,8 +43,8 @@ export const NetworkHealth = memo(function NetworkHealth() {
                 <span className="absolute inset-0 rounded-sm" style={{ background: signalReachable ? HEX.success : HEX.danger }} />
                 {signalReachable && (
                   <span
-                    className="absolute inset-[-2px] rounded-sm"
-                    style={{ background: HEX.success, opacity: 0.15, animation: 'node-pulse-bar 2s ease-in-out infinite' }}
+                    className="absolute inset-[-2px] rounded-sm opacity-15 [animation:node-pulse-bar_2s_ease-in-out_infinite]"
+                    style={{ background: HEX.success }}
                   />
                 )}
               </span>

package/packages/gui/src/components/network/performance-dashboard.jsx

@@ -156,7 +156,7 @@ const TpsChart = memo(function TpsChart() {
           {latestTps > 0 ? `${latestTps.toFixed(1)} t/s` : '\u2014'}
         </span>
       </div>
-      <div ref={containerRef} className="relative flex-1 min-h-0" style={{ minHeight: 120 }}>
+      <div ref={containerRef} className="relative flex-1 min-h-[120px]">
         {chartData.length < 2 ? (
           <div className="absolute inset-0 flex items-center justify-center">
             <span className="text-xs font-mono text-text-3">Collecting performance data\u2026</span>
@@ -353,8 +353,8 @@ function GaugeBar({ value, max, peakValue, color, label, unit }) {
         />
         {peakPct != null && (
           <div
-            className="absolute top-0 h-full w-px"
-            style={{ left: `${peakPct}%`, background: HEX.danger, opacity: 0.7 }}
+            className="absolute top-0 h-full w-px opacity-70"
+            style={{ left: `${peakPct}%`, background: HEX.danger }}
             title={`Peak: ${Math.round(peakValue)} ${unit || ''}`}
           />
         )}
@@ -548,7 +548,7 @@ export const PerformanceDashboard = memo(function PerformanceDashboard({ active
       <div className="p-4 grid grid-cols-1 lg:grid-cols-2 gap-3">
         {/* Left column */}
         <div className="flex flex-col gap-3">
-          <div className="rounded-md border border-border-subtle bg-surface-0 overflow-hidden" style={{ minHeight: 200 }}>
+          <div className="rounded-md border border-border-subtle bg-surface-0 overflow-hidden min-h-[200px]">
             <TpsChart />
           </div>