From f8f42d83eeec9f39e9bb92f5e64f653d2a978faf Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Thu, 21 May 2026 22:29:13 -0700
Subject: [PATCH] fix(terminal): move into composer flow with padding on all
 sides
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Terminal now renders inside the composer's pointer-events-auto wrapper,
sitting below the typing indicator. Wrapped with p-4 pt-2 for consistent
inset padding matching the composer's visual alignment. No more z-index
fight — it's in the natural flow.
---
 .../src/features/channels/ui/ChannelPane.tsx  | 16 ++--
 .../src/features/terminal/TerminalPanel.tsx   | 74 ++++++++++---------
 2 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index 580f25fa12..a3954b6c9d 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -438,16 +438,18 @@ export const ChannelPane = React.memo(function ChannelPane({
                   ) : null}
                 </div>
               </div>
+              {activeChannel && isTerminalOpen ? (
+                <div className="p-4 pt-2">
+                  <TerminalPanel
+                    channelId={activeChannel.id}
+                    isOpen={isTerminalOpen}
+                    onClose={closeTerminal}
+                  />
+                </div>
+              ) : null}
             </div>
           </div>
         )}
-        {activeChannel && isTerminalOpen ? (
-          <TerminalPanel
-            channelId={activeChannel.id}
-            isOpen={isTerminalOpen}
-            onClose={closeTerminal}
-          />
-        ) : null}
       </div>
 
       {threadHeadMessage ? (
diff --git a/desktop/src/features/terminal/TerminalPanel.tsx b/desktop/src/features/terminal/TerminalPanel.tsx
index 781f8cefd8..06d588420d 100644
--- a/desktop/src/features/terminal/TerminalPanel.tsx
+++ b/desktop/src/features/terminal/TerminalPanel.tsx
@@ -85,46 +85,48 @@ export function TerminalPanel({
   if (!isOpen) return null;
 
   return (
-    <div
-      className="relative flex flex-col border-t border-border/60"
-      style={{ height: `${heightPx}px` }}
-    >
-      {/* 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"
+    <div className="px-3 pb-3 pt-1 sm:px-4">
+      <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` }}
       >
-        <GripHorizontal className="h-3 w-3 text-muted-foreground/40 transition-colors group-hover:text-muted-foreground" />
-      </button>
+        {/* 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>
+        {/* 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>
-      </div>
 
-      {/* Terminal content */}
-      <div className="min-h-0 flex-1 bg-[#1a1b26]">
-        <TerminalInstance channelId={channelId} isVisible={isOpen} />
+        {/* Terminal content */}
+        <div className="min-h-0 flex-1 bg-[#1a1b26]">
+          <TerminalInstance channelId={channelId} isVisible={isOpen} />
+        </div>
       </div>
     </div>
   );