From 39bb8e5feea7cf91c3b4cc921f75213882bd7a02 Mon Sep 17 00:00:00 2001
From: Vassiliy Yegorov <va@egorovanet.ru>
Date: Mon, 15 Jun 2026 16:47:43 +0700
Subject: [PATCH] feat(app): close (X) on panel header + Close button on
 stopped overlay
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wires the existing closeSurfaceCmd into the panel header (red-on-hover X next
to zoom) and adds a Close button to the stopped overlay, so a panel — including
an empty/stopped one — can be dismissed instead of resumed/restarted.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/src/LayoutEngine.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/src/LayoutEngine.tsx b/app/src/LayoutEngine.tsx
index fa0870e..2e7c227 100644
--- a/app/src/LayoutEngine.tsx
+++ b/app/src/LayoutEngine.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useRef, useState } from "react";
-import { Maximize2, Minimize2, RotateCw, GripVertical, Play } from "lucide-react";
+import { Maximize2, Minimize2, RotateCw, GripVertical, Play, X } from "lucide-react";
 import { Terminal } from "@xterm/xterm";
 import { TerminalView } from "./TerminalView";
 import { SearchBar } from "./SearchBar";
 import { StatusRing } from "./StatusRing";
 import { COLORS, FONT, STATE_COLOR } from "./theme";
 import type { LayoutNode, SurfaceState, SurfaceView } from "./layoutTypes";
-import { setRatios, restartSurface, setZoom, moveSurface, attachSurface, detachSurface } from "./socketBridge";
+import { setRatios, restartSurface, setZoom, moveSurface, attachSurface, detachSurface, closeSurfaceCmd } from "./socketBridge";
 
 interface Props {
   workspaceId: string;
@@ -193,6 +193,10 @@ function Leaf({ id, workspaceId, running, states, surfaces, focusedId, onFocus,
               style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 14px", background: COLORS.bgElevated, color: COLORS.textPrimary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 7, fontSize: 12 }}>
               <RotateCw size={13} /> Restart fresh
             </button>
+            <button onClick={() => void closeSurfaceCmd(id)}
+              style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 14px", background: "transparent", color: COLORS.textSecondary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 7, fontSize: 12 }}>
+              <X size={13} /> Close
+            </button>
             {zoomed === id && (
               <button onClick={() => void setZoom(workspaceId, null)}
                 style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 14px", background: "transparent", color: COLORS.textSecondary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 7, fontSize: 12 }}>
@@ -228,6 +232,10 @@ function Leaf({ id, workspaceId, running, states, surfaces, focusedId, onFocus,
               onMouseDown={(e) => { e.stopPropagation(); void setZoom(workspaceId, null); }} />
           : <Maximize2 size={13} color={COLORS.textMuted} style={{ cursor: "pointer" }} aria-label="Zoom"
               onMouseDown={(e) => { e.stopPropagation(); onFocus(id); void setZoom(workspaceId, id); }} />}
+        <X size={13} color={COLORS.textMuted} style={{ cursor: "pointer" }} aria-label="Close panel"
+          onMouseDown={(e) => { e.stopPropagation(); void closeSurfaceCmd(id); }}
+          onMouseEnter={(e) => { e.currentTarget.style.color = COLORS.stError; }}
+          onMouseLeave={(e) => { e.currentTarget.style.color = COLORS.textMuted; }} />
       </div>
       <div style={{ flex: 1, minHeight: 0 }}>
         <TerminalView key={id} surfaceId={id} font={font} palette={palette} />