npm - groove-dev - Versions diffs - 0.27.131 → 0.27.134 - Mend

groove-dev 0.27.131 → 0.27.134

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/node_modules/@groove-dev/gui/dist/index.html CHANGED Viewed

@@ -6,12 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Groove GUI</title>
-    <script type="module" crossorigin src="/assets/index-BiB9oY9U.js"></script>
+    <script type="module" crossorigin src="/assets/index-Dozp69tK.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-26L3JoZv.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-DoBZjiHE.js">
-    <link rel="modulepreload" crossorigin href="/assets/codemirror-CFF1Lrnz.js">
+    <link rel="modulepreload" crossorigin href="/assets/codemirror-DRQdprYi.js">
     <link rel="modulepreload" crossorigin href="/assets/xterm--7_ns2zW.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-CeyDFVub.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-BgQL4bNl.css">
   </head>
   <body>
     <div id="root"></div>

package/node_modules/@groove-dev/gui/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@groove-dev/gui",
-  "version": "0.27.131",
+  "version": "0.27.134",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

package/node_modules/@groove-dev/gui/src/app.css CHANGED Viewed

@@ -34,12 +34,12 @@
   /* Semantic */
   --color-accent: #33afbc;
-  --color-success: #4ae168;
-  --color-warning: #e5c07b;
-  --color-danger: #e06c75;
-  --color-info: #61afef;
-  --color-purple: #c678dd;
-  --color-orange: #d19a66;
+  --color-success: #73c991;
+  --color-warning: #cda869;
+  --color-danger: #d4736e;
+  --color-info: #7ab0df;
+  --color-purple: #b07fd5;
+  --color-orange: #c4956a;
   /* Fonts */
   --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

package/node_modules/@groove-dev/gui/src/components/agents/agent-chat.jsx CHANGED Viewed

@@ -109,9 +109,20 @@ export function AgentChat({ agent }) {
   const scrollRef = useRef(null);
   const inputRef = useRef(null);
   const fileInputRef = useRef(null);
+  const isAtBottomRef = useRef(true);
   useEffect(() => {
-    if (scrollRef.current) {
+    const el = scrollRef.current;
+    if (!el) return;
+    function handleScroll() {
+      isAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 60;
+    }
+    el.addEventListener('scroll', handleScroll);
+    return () => el.removeEventListener('scroll', handleScroll);
+  }, []);
+  useEffect(() => {
+    if (isAtBottomRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
   }, [chatHistory.length, activityLog.length]);

package/node_modules/@groove-dev/gui/src/components/agents/agent-feed.jsx CHANGED Viewed

@@ -320,13 +320,12 @@ function ActivityGroup({ entries, isLive }) {
   }
   const current = entries[Math.min(cycleIdx, entries.length - 1)];
-  const display = current.text?.length > 60 ? current.text.slice(0, 60) + '...' : current.text;
   return (
-    <div className="inline-flex items-center gap-2 px-3 py-2 max-w-[280px] rounded-md bg-surface-3/50 border border-border-subtle/30">
+    <div className="flex items-center gap-2 px-3 py-2 w-full rounded-md bg-surface-3/50 border border-border-subtle/30">
       <Loader2 size={11} className="text-accent animate-spin flex-shrink-0" />
-      <span className="text-[11px] text-text-2 font-mono truncate transition-opacity duration-300">
-        {display}
+      <span className="text-[11px] text-text-2 font-mono truncate min-w-0 flex-1 transition-opacity duration-300">
+        {current.text}
       </span>
       {entries.length > 1 && (
         <span className="text-[10px] text-text-4 font-mono flex-shrink-0">{entries.length}</span>
@@ -485,6 +484,17 @@ export function AgentFeed({ agent }) {
   const scrollRef = useRef(null);
   const inputRef = useRef(null);
   const fileInputRef = useRef(null);
+  const isAtBottomRef = useRef(true);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    function handleScroll() {
+      isAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 60;
+    }
+    el.addEventListener('scroll', handleScroll);
+    return () => el.removeEventListener('scroll', handleScroll);
+  }, []);
   const onDragStart = useCallback((e) => {
     e.preventDefault();
@@ -542,7 +552,7 @@ export function AgentFeed({ agent }) {
   }, [chatHistory, activityLog]);
   useEffect(() => {
-    if (scrollRef.current) {
+    if (isAtBottomRef.current && scrollRef.current) {
       requestAnimationFrame(() => {
         if (scrollRef.current) {
           scrollRef.current.scrollTop = scrollRef.current.scrollHeight;

package/node_modules/@groove-dev/gui/src/components/agents/agent-file-tree.jsx CHANGED Viewed

@@ -7,11 +7,11 @@ import { ChevronRight, ChevronDown, File, Folder, FolderOpen, FileEdit, Eye, Fil
 import { ScrollArea } from '../ui/scroll-area';
 const FILE_COLORS = {
-  js: 'text-warning', jsx: 'text-warning', ts: 'text-info', tsx: 'text-info',
-  css: 'text-info', html: 'text-orange', json: 'text-warning',
-  md: 'text-text-2', py: 'text-success', rs: 'text-orange',
-  go: 'text-accent', sh: 'text-success', yaml: 'text-danger', yml: 'text-danger',
-  sql: 'text-purple', xml: 'text-orange', svg: 'text-warning',
+  js: 'text-text-2', jsx: 'text-text-2', ts: 'text-text-2', tsx: 'text-text-2',
+  css: 'text-text-3', html: 'text-text-3', json: 'text-text-3',
+  md: 'text-text-3', py: 'text-text-2', rs: 'text-text-3',
+  go: 'text-text-2', sh: 'text-text-3', yaml: 'text-text-3', yml: 'text-text-3',
+  sql: 'text-text-3', xml: 'text-text-3', svg: 'text-text-3',
 };
 function getFileColor(name) {
@@ -135,7 +135,7 @@ function TreeEntry({ entry, depth, onOpen, expandedDirs, onToggleDir, onContextM
         onDoubleClick={handleCtxMenu}
         onContextMenu={handleCtxMenu}
         className={cn(
-          'w-full flex items-center gap-1.5 py-1 text-xs font-sans cursor-pointer',
+          'w-full flex items-center gap-1.5 py-[3px] text-[13px] font-sans cursor-pointer',
           'hover:bg-surface-4/50 transition-colors text-left',
           isDragging && 'opacity-50',
           isDragOver && 'bg-accent/15 ring-1 ring-accent/50 rounded',

package/node_modules/@groove-dev/gui/src/components/agents/workspace-mode.jsx CHANGED Viewed

@@ -226,17 +226,19 @@ export function WorkspaceMode() {
           />
         </div>
+        {/* Sidebar expand rail */}
+        {sidebarCollapsed && (
+          <button
+            onClick={() => setSidebarCollapsed(false)}
+            className="flex-shrink-0 w-6 flex items-center justify-center border-r border-border bg-surface-2 text-text-4 hover:text-text-0 hover:bg-surface-3 transition-colors cursor-pointer"
+            title="Show sidebar"
+          >
+            <PanelLeftOpen size={14} />
+          </button>
+        )}
         {/* Editor Area */}
         <div className="flex-1 flex flex-col min-w-0 bg-surface-1">
-          {sidebarCollapsed && (
-            <button
-              onClick={() => setSidebarCollapsed(false)}
-              className="absolute top-2 left-14 z-10 w-7 h-7 flex items-center justify-center rounded-md text-text-3 hover:text-text-0 hover:bg-surface-3 transition-colors cursor-pointer"
-              title="Show sidebar"
-            >
-              <PanelLeftOpen size={15} />
-            </button>
-          )}
           {workspaceReviewMode ? (
             <CodeReview agentId={agent.id} />
           ) : (

package/node_modules/@groove-dev/gui/src/components/editor/code-editor.jsx CHANGED Viewed

@@ -3,10 +3,10 @@ import { useRef, useEffect } from 'react';
 import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter } from '@codemirror/view';
 import { EditorState, Compartment } from '@codemirror/state';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
-import { bracketMatching, syntaxHighlighting } from '@codemirror/language';
+import { bracketMatching, syntaxHighlighting, HighlightStyle } from '@codemirror/language';
 import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
 import { autocompletion } from '@codemirror/autocomplete';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+import { tags as t } from '@lezer/highlight';
 import { javascript } from '@codemirror/lang-javascript';
 import { css } from '@codemirror/lang-css';
 import { html } from '@codemirror/lang-html';
@@ -24,6 +24,29 @@ const LANGS = {
   python: () => python(),
 };
+const grooveHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: '#b07fd5' },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: '#d4d8e0' },
+  { tag: [t.function(t.variableName), t.labelName], color: '#7ab0df' },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#c4956a' },
+  { tag: [t.definition(t.name), t.separator], color: '#bcc2cd' },
+  { tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#cda869' },
+  { tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.special(t.string)], color: '#73c991' },
+  { tag: [t.meta, t.comment], color: '#6e7681', fontStyle: 'italic' },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  { tag: t.link, color: '#7ab0df', textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: '400', color: '#bcc2cd' },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#c4956a' },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: '#73c991' },
+  { tag: t.invalid, color: '#d4736e' },
+  { tag: t.propertyName, color: '#7ab0df' },
+  { tag: [t.tagName], color: '#d4736e' },
+  { tag: t.attributeName, color: '#cda869' },
+  { tag: t.attributeValue, color: '#73c991' },
+]);
 // Custom theme overrides to match our design tokens
 const grooveTheme = EditorView.theme({
   '&': { backgroundColor: '#13161b', color: '#d4d8e0', fontFamily: 'var(--font-mono)', fontSize: '12px', height: '100%', lineHeight: '1.6' },
@@ -98,7 +121,7 @@ export function CodeEditor({ content, language, onChange, onSave, onCursorChange
         autocompletion(),
         keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap]),
         saveKeymap,
-        syntaxHighlighting(oneDarkHighlightStyle),
+        syntaxHighlighting(grooveHighlightStyle),
         grooveTheme,
         langCompartment.current.of(langExt()),
         EditorView.updateListener.of((update) => {

package/node_modules/@groove-dev/gui/src/components/editor/file-tree.jsx CHANGED Viewed

@@ -11,11 +11,11 @@ import {
 import { ScrollArea } from '../ui/scroll-area';
 const FILE_COLORS = {
-  js: 'text-warning', jsx: 'text-warning', ts: 'text-info', tsx: 'text-info',
-  css: 'text-info', html: 'text-orange', json: 'text-warning',
-  md: 'text-text-2', py: 'text-success', rs: 'text-orange',
-  go: 'text-accent', sh: 'text-success', yaml: 'text-danger', yml: 'text-danger',
-  sql: 'text-purple', xml: 'text-orange', svg: 'text-warning',
+  js: 'text-text-2', jsx: 'text-text-2', ts: 'text-text-2', tsx: 'text-text-2',
+  css: 'text-text-3', html: 'text-text-3', json: 'text-text-3',
+  md: 'text-text-3', py: 'text-text-2', rs: 'text-text-3',
+  go: 'text-text-2', sh: 'text-text-3', yaml: 'text-text-3', yml: 'text-text-3',
+  sql: 'text-text-3', xml: 'text-text-3', svg: 'text-text-3',
 };
 function getFileColor(name) {
@@ -130,7 +130,7 @@ function TreeNode({ entry, depth = 0, activePath, onFileClick, onDirToggle, expa
       onDoubleClick={handleContextMenu}
       onContextMenu={handleContextMenu}
       className={cn(
-        'w-full flex items-center gap-1.5 py-1 text-xs font-sans cursor-pointer',
+        'w-full flex items-center gap-1.5 py-[3px] text-[13px] font-sans cursor-pointer',
         'hover:bg-surface-5 transition-colors text-left select-none',
         isActive && 'bg-accent/10 text-text-0',
         !isActive && 'text-text-1',

package/node_modules/@groove-dev/gui/src/components/editor/terminal.jsx CHANGED Viewed

@@ -20,8 +20,9 @@ const THEME = {
 };
 let tabCounter = 0;
+let spawnSeq = 0;
-function TerminalInstance({ tabId, visible }) {
+function TerminalInstance({ tabId, visible, registerKill }) {
   const containerRef = useRef(null);
   const termRef = useRef(null);
   const fitRef = useRef(null);
@@ -29,6 +30,15 @@ function TerminalInstance({ tabId, visible }) {
   const handlerRef = useRef(null);
   const mountedRef = useRef(false);
+  useEffect(() => {
+    registerKill?.(tabId, () => {
+      const ws = useGrooveStore.getState().ws;
+      if (ws?.readyState === WebSocket.OPEN && termIdRef.current) {
+        ws.send(JSON.stringify({ type: 'terminal:kill', id: termIdRef.current }));
+      }
+    });
+  }, [tabId, registerKill]);
   useEffect(() => {
     if (!containerRef.current || mountedRef.current) return;
     mountedRef.current = true;
@@ -67,13 +77,14 @@ function TerminalInstance({ tabId, visible }) {
         return;
       }
-      ws.send(JSON.stringify({ type: 'terminal:spawn', cols: term.cols, rows: term.rows }));
+      const requestId = `spawn-${++spawnSeq}`;
+      ws.send(JSON.stringify({ type: 'terminal:spawn', cols: term.cols, rows: term.rows, requestId }));
       function onMessage(event) {
         let msg;
         try { msg = JSON.parse(event.data); } catch { return; }
-        if (msg.type === 'terminal:spawned' && !termIdRef.current) {
+        if (msg.type === 'terminal:spawned' && msg.requestId === requestId && !termIdRef.current) {
           termIdRef.current = msg.id;
         } else if (msg.type === 'terminal:output' && msg.id === termIdRef.current) {
           term.write(msg.data);
@@ -114,10 +125,6 @@ function TerminalInstance({ tabId, visible }) {
     return () => {
       observer.disconnect();
-      const ws = useGrooveStore.getState().ws;
-      if (ws?.readyState === WebSocket.OPEN && termIdRef.current) {
-        ws.send(JSON.stringify({ type: 'terminal:kill', id: termIdRef.current }));
-      }
       if (handlerRef.current) {
         handlerRef.current.ws.removeEventListener('message', handlerRef.current.handler);
       }
@@ -155,6 +162,9 @@ export function TerminalManager() {
   const [tabs, setTabs] = useState([{ id: 'term-0', label: 'Terminal' }]);
   const [activeTab, setActiveTab] = useState('term-0');
+  const killFns = useRef({});
+  const registerKill = useCallback((tabId, fn) => { killFns.current[tabId] = fn; }, []);
   const addTab = useCallback(() => {
     tabCounter++;
@@ -168,6 +178,8 @@ export function TerminalManager() {
   }, []);
   const closeTab = useCallback((id) => {
+    killFns.current[id]?.();
+    delete killFns.current[id];
     setTabs((prev) => {
       const next = prev.filter((t) => t.id !== id);
       if (next.length === 0) {
@@ -199,7 +211,7 @@ export function TerminalManager() {
       onMinimize={() => setFullHeight(false)}
     >
       {tabs.map((tab) => (
-        <TerminalInstance key={tab.id} tabId={tab.id} visible={tab.id === activeTab} />
+        <TerminalInstance key={tab.id} tabId={tab.id} visible={tab.id === activeTab} registerKill={registerKill} />
       ))}
     </TerminalPanel>
   );

package/node_modules/@groove-dev/gui/src/components/lab/chat-playground.jsx CHANGED Viewed

@@ -48,12 +48,21 @@ function UserMessage({ msg }) {
 }
 function AssistantMessage({ msg, streaming }) {
-  const isStreaming = streaming && !msg.content && !msg.error;
+  const isStreaming = streaming && !msg.content && !msg.reasoning && !msg.error;
+  const isReasoning = streaming && msg.reasoning && !msg.content;
   return (
     <div>
       <div className="text-2xs text-text-3 font-sans mb-0.5 font-medium flex items-center gap-1">
         <Bot size={10} /> Assistant
       </div>
+      {msg.reasoning && (
+        <div className="border-l-2 border-text-4/30 pl-3 py-0.5 mb-1">
+          <div className="text-2xs font-sans text-text-3 italic whitespace-pre-wrap break-words leading-relaxed">
+            {msg.reasoning}
+            {isReasoning && <span className="inline-block w-1 h-3 bg-text-4/50 ml-0.5 animate-pulse" />}
+          </div>
+        </div>
+      )}
       <div className={cn(
         'border-l-2 pl-3 py-0.5',
         msg.error ? 'border-danger/40' : 'border-accent/40',

package/node_modules/@groove-dev/gui/src/components/lab/lab-assistant.jsx CHANGED Viewed

@@ -21,7 +21,7 @@ function AssistantMessage({ msg }) {
           'text-xs font-sans whitespace-pre-wrap break-words leading-relaxed',
           msg.error ? 'text-danger' : 'text-text-1',
         )}>
-          {msg.content}
+          {msg.text}
         </div>
       </div>
     </div>
@@ -33,7 +33,7 @@ function UserMessage({ msg }) {
     <div className="flex justify-end">
       <div className="max-w-[85%]">
         <div className="px-3 py-2 rounded-xl rounded-br-sm bg-accent/10 border border-accent/15">
-          <p className="text-xs text-text-0 font-sans whitespace-pre-wrap break-words leading-relaxed">{msg.content}</p>
+          <p className="text-xs text-text-0 font-sans whitespace-pre-wrap break-words leading-relaxed">{msg.text}</p>
         </div>
       </div>
     </div>
@@ -65,7 +65,7 @@ export function LabAssistant() {
       const el = scrollRef.current.querySelector('[data-radix-scroll-area-viewport]');
       if (el) el.scrollTop = el.scrollHeight;
     }
-  }, [messages.length, messages[messages.length - 1]?.content]);
+  }, [messages.length, messages[messages.length - 1]?.text]);
   const handleSend = useCallback(() => {
     const text = input.trim();
@@ -120,7 +120,7 @@ export function LabAssistant() {
             </div>
           ) : (
             messages.map((msg, i) =>
-              msg.role === 'user' ? (
+              msg.from === 'user' ? (
                 <UserMessage key={i} msg={msg} />
               ) : (
                 <AssistantMessage key={i} msg={msg} />

package/node_modules/@groove-dev/gui/src/components/lab/system-prompt-editor.jsx CHANGED Viewed

@@ -6,8 +6,8 @@ import { cn } from '../../lib/cn';
 import { EditorView, keymap, lineNumbers } from '@codemirror/view';
 import { EditorState } from '@codemirror/state';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
-import { syntaxHighlighting } from '@codemirror/language';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+import { syntaxHighlighting, HighlightStyle } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
 import { markdown } from '@codemirror/lang-markdown';
 const editorTheme = EditorView.theme({
@@ -20,6 +20,20 @@ const editorTheme = EditorView.theme({
   '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: 'rgba(51, 175, 188, 0.15)' },
 });
+const promptHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: '#b07fd5' },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: '#d4d8e0' },
+  { tag: [t.function(t.variableName), t.labelName], color: '#7ab0df' },
+  { tag: [t.meta, t.comment], color: '#6e7681', fontStyle: 'italic' },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, color: '#7ab0df', textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: '400', color: '#bcc2cd' },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: '#73c991' },
+  { tag: [t.atom, t.bool], color: '#c4956a' },
+  { tag: t.invalid, color: '#d4736e' },
+]);
 export function SystemPromptEditor() {
   const systemPrompt = useGrooveStore((s) => s.labSystemPrompt);
   const setSystemPrompt = useGrooveStore((s) => s.setLabSystemPrompt);
@@ -48,7 +62,7 @@ export function SystemPromptEditor() {
       extensions: [
         lineNumbers(),
         history(),
-        syntaxHighlighting(oneDarkHighlightStyle),
+        syntaxHighlighting(promptHighlightStyle),
         markdown(),
         keymap.of([...defaultKeymap, ...historyKeymap]),
         editorTheme,

package/node_modules/@groove-dev/gui/src/components/layout/terminal-panel.jsx CHANGED Viewed

@@ -48,14 +48,12 @@ export function TerminalPanel({
     document.addEventListener('mouseup', onMouseUp);
   }, [height, onHeightChange, fullHeight]);
-  if (!visible) return null;
   const tabList = tabs || [{ id: 'default', label: 'Terminal' }];
   return (
     <div
-      className="flex flex-col border-t border-border bg-surface-0 relative"
-      style={fullHeight ? { flex: 1, minHeight: 0 } : { height, flexShrink: 0 }}
+      className={cn('flex flex-col border-t border-border bg-surface-0 relative', !visible && 'hidden')}
+      style={visible ? (fullHeight ? { flex: 1, minHeight: 0 } : { height, flexShrink: 0 }) : { height: 0 }}
     >
       {/* Resize handle */}
       {!fullHeight && (

package/node_modules/@groove-dev/gui/src/components/preview/preview-toolbar.jsx CHANGED Viewed

@@ -15,6 +15,7 @@ export function PreviewToolbar({ onRefresh }) {
   const setPreviewDevice = useGrooveStore((s) => s.setPreviewDevice);
   const toggleScreenshotMode = useGrooveStore((s) => s.toggleScreenshotMode);
   const closePreview = useGrooveStore((s) => s.closePreview);
+  const stopPreview = useGrooveStore((s) => s.stopPreview);
   const [confirming, setConfirming] = useState(false);
   const timerRef = useRef(null);
@@ -27,7 +28,7 @@ export function PreviewToolbar({ onRefresh }) {
     if (confirming) {
       if (timerRef.current) clearTimeout(timerRef.current);
       setConfirming(false);
-      closePreview();
+      stopPreview();
     } else {
       setConfirming(true);
       timerRef.current = setTimeout(() => setConfirming(false), 2000);
@@ -87,19 +88,20 @@ export function PreviewToolbar({ onRefresh }) {
         <Camera size={14} />
       </button>
-      {/* Close preview — two-click confirmation */}
+      {/* Hide preview (first click) / Stop server (second click) */}
       <button
-        onClick={handleClose}
+        onClick={confirming ? handleClose : closePreview}
+        onContextMenu={(e) => { e.preventDefault(); setConfirming(true); timerRef.current = setTimeout(() => setConfirming(false), 3000); }}
         className={cn(
           'h-7 flex items-center justify-center rounded-md transition-all cursor-pointer',
           confirming
             ? 'px-2 gap-1.5 bg-danger/15 text-danger border border-danger/25'
-            : 'w-7 text-text-3 hover:text-danger hover:bg-danger/10',
+            : 'w-7 text-text-3 hover:text-text-1 hover:bg-surface-4',
         )}
-        title="Close Preview"
+        title={confirming ? 'Click to stop server' : 'Hide preview'}
       >
         {confirming ? (
-          <span className="text-2xs font-semibold font-sans whitespace-nowrap">Close?</span>
+          <span className="text-2xs font-semibold font-sans whitespace-nowrap">Stop server?</span>
         ) : (
           <X size={14} />
         )}