Polish sticky headers (#13024)

packages/cli/src/ui/components/messages/ToolGroupMessage.tsx

@@ -103,7 +103,6 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
       {toolCalls.map((tool, index) => {
         const isConfirming = toolAwaitingApproval?.callId === tool.callId;
         const isFirst = index === 0;
-        const isLast = index === toolCalls.length - 1;
         return (
           <Box
             key={tool.callId}
@@ -129,7 +128,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
               borderLeft={true}
               borderRight={true}
               borderTop={false}
-              borderBottom={isLast}
+              borderBottom={false}
               borderColor={borderColor}
               borderDimColor={borderDimColor}
               flexDirection="column"
@@ -161,6 +160,25 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
           </Box>
         );
       })}
+      {
+        /*
+              We have to keep the bottom border separate so it doesn't get
+              drawn over by the sticky header directly inside it.
+             */
+        toolCalls.length > 0 && (
+          <Box
+            height={0}
+            width={terminalWidth}
+            borderLeft={true}
+            borderRight={true}
+            borderTop={false}
+            borderBottom={true}
+            borderColor={borderColor}
+            borderDimColor={borderDimColor}
+            borderStyle="round"
+          />
+        )
+      }
     </Box>
   );
 };