From 3f763c2cd2e3a269dcc25016a1a71bad604448fb Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Thu, 21 May 2026 22:42:34 -0700
Subject: [PATCH] fix(terminal): match composer padding, remove header + drag
 handle, add p-2 interior
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Outer padding now px-4 pb-2 pt-1 matching the composer's inset
- Removed 'Terminal' header bar and drag handle for cleaner look
- Added p-2 padding inside the terminal content area
- Resize still works via invisible top-edge hit zone (6px)
- Removed unused onClose prop (toggle via ⌘+J only)
---
 .../src/features/channels/ui/ChannelPane.tsx  | 13 ++---
 .../src/features/terminal/TerminalPanel.tsx   | 54 ++++---------------
 2 files changed, 15 insertions(+), 52 deletions(-)

diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index a3954b6c9d..8192941efe 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -180,7 +180,7 @@ export const ChannelPane = React.memo(function ChannelPane({
   const timelineScrollRef = React.useRef<HTMLDivElement>(null);
   const composerWrapperRef = React.useRef<HTMLDivElement>(null);
   useComposerHeightPadding(timelineScrollRef, composerWrapperRef);
-  const { isOpen: isTerminalOpen, close: closeTerminal } = useTerminal();
+  const { isOpen: isTerminalOpen } = useTerminal();
 
   React.useEffect(() => {
     if (typeof window === "undefined") {
@@ -439,13 +439,10 @@ export const ChannelPane = React.memo(function ChannelPane({
                 </div>
               </div>
               {activeChannel && isTerminalOpen ? (
-                <div className="p-4 pt-2">
-                  <TerminalPanel
-                    channelId={activeChannel.id}
-                    isOpen={isTerminalOpen}
-                    onClose={closeTerminal}
-                  />
-                </div>
+                <TerminalPanel
+                  channelId={activeChannel.id}
+                  isOpen={isTerminalOpen}
+                />
               ) : null}
             </div>
           </div>
diff --git a/desktop/src/features/terminal/TerminalPanel.tsx b/desktop/src/features/terminal/TerminalPanel.tsx
index 06d588420d..cb22715b3f 100644
--- a/desktop/src/features/terminal/TerminalPanel.tsx
+++ b/desktop/src/features/terminal/TerminalPanel.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import { X, Minus, GripHorizontal } from "lucide-react";
 
 import { TerminalInstance } from "./TerminalInstance";
 
@@ -31,14 +30,9 @@ function getInitialTerminalHeight(): number {
 type TerminalPanelProps = {
   channelId: string;
   isOpen: boolean;
-  onClose: () => void;
 };
 
-export function TerminalPanel({
-  channelId,
-  isOpen,
-  onClose,
-}: TerminalPanelProps) {
+export function TerminalPanel({ channelId, isOpen }: TerminalPanelProps) {
   const [heightPx, setHeightPx] = React.useState(getInitialTerminalHeight);
 
   // Persist height to session storage.
@@ -53,8 +47,13 @@ export function TerminalPanel({
     }
   }, [heightPx]);
 
+  // Resize via pointer drag on the top edge.
   const handleResizeStart = React.useCallback(
-    (event: React.PointerEvent<HTMLButtonElement>) => {
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      // Only trigger on the top 6px of the container.
+      const rect = event.currentTarget.getBoundingClientRect();
+      if (event.clientY - rect.top > 6) return;
+
       event.preventDefault();
       const startY = event.clientY;
       const startHeight = heightPx;
@@ -65,7 +64,6 @@ export function TerminalPanel({
       document.body.style.userSelect = "none";
 
       const handlePointerMove = (moveEvent: PointerEvent) => {
-        // Dragging up = negative deltaY = taller panel.
         const deltaY = startY - moveEvent.clientY;
         setHeightPx(clampTerminalHeight(startHeight + deltaY));
       };
@@ -85,46 +83,14 @@ export function TerminalPanel({
   if (!isOpen) return null;
 
   return (
-    <div className="px-3 pb-3 pt-1 sm:px-4">
+    <div className="px-4 pb-2 pt-1">
       <div
         className="pointer-events-auto relative flex flex-col overflow-hidden rounded-2xl border border-border/50 shadow-[0_4px_24px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.35)]"
         style={{ height: `${heightPx}px` }}
+        onPointerDown={handleResizeStart}
       >
-        {/* Resize handle */}
-        <button
-          type="button"
-          className="group absolute inset-x-0 -top-1 z-20 flex h-3 cursor-row-resize items-center justify-center"
-          onPointerDown={handleResizeStart}
-          aria-label="Resize terminal"
-        >
-          <GripHorizontal className="h-3 w-3 text-muted-foreground/40 transition-colors group-hover:text-muted-foreground" />
-        </button>
-
-        {/* Header bar */}
-        <div className="flex h-8 shrink-0 items-center justify-between border-b border-white/5 bg-[#1a1b26] px-3">
-          <span className="text-xs font-medium text-[#7aa2f7]">Terminal</span>
-          <div className="flex items-center gap-1">
-            <button
-              type="button"
-              className="rounded p-0.5 text-[#565f89] hover:text-[#c0caf5] transition-colors"
-              onClick={onClose}
-              aria-label="Minimize terminal"
-            >
-              <Minus className="h-3.5 w-3.5" />
-            </button>
-            <button
-              type="button"
-              className="rounded p-0.5 text-[#565f89] hover:text-[#c0caf5] transition-colors"
-              onClick={onClose}
-              aria-label="Close terminal"
-            >
-              <X className="h-3.5 w-3.5" />
-            </button>
-          </div>
-        </div>
-
         {/* Terminal content */}
-        <div className="min-h-0 flex-1 bg-[#1a1b26]">
+        <div className="min-h-0 flex-1 bg-[#1a1b26] p-2">
           <TerminalInstance channelId={channelId} isVisible={isOpen} />
         </div>
       </div>