Sticky headers where the top rounded border is sticky. (#12971)

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

@@ -42,6 +42,9 @@ export interface ToolMessageProps extends IndividualToolCallDisplay {
   renderOutputAsMarkdown?: boolean;
   activeShellPtyId?: number | null;
   embeddedShellFocused?: boolean;
+  isFirst: boolean;
+  borderColor: string;
+  borderDimColor: boolean;
   config?: Config;
 }
 
@@ -58,6 +61,9 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
   embeddedShellFocused,
   ptyId,
   config,
+  isFirst,
+  borderColor,
+  borderDimColor,
 }) => {
   const { renderMarkdown } = useUIState();
   const isAlternateBuffer = useAlternateBuffer();
@@ -116,7 +122,8 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
   if (availableHeight && !isAlternateBuffer) {
     renderOutputAsMarkdown = false;
   }
-  const childWidth = terminalWidth;
+  const combinedPaddingAndBorderWidth = 4;
+  const childWidth = terminalWidth - combinedPaddingAndBorderWidth;
 
   const truncatedResultDisplay = React.useMemo(() => {
     if (typeof resultDisplay === 'string') {
@@ -131,7 +138,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
     if (!truncatedResultDisplay) return null;
 
     return (
-      <Box width={terminalWidth} flexDirection="column" paddingLeft={1}>
+      <Box width={childWidth} flexDirection="column">
         <Box flexDirection="column">
           {typeof truncatedResultDisplay === 'string' &&
           renderOutputAsMarkdown ? (
@@ -189,15 +196,16 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
     renderMarkdown,
     isAlternateBuffer,
     availableHeight,
-    terminalWidth,
   ]);
 
   return (
-    // We have the StickyHeader intentionally exceedsthe allowed width for this
-    // component by 1 so tne horizontal line it renders can extend into the 1
-    // pixel of padding of the box drawn by the parent of the ToolMessage.
     <>
-      <StickyHeader width={terminalWidth + 1}>
+      <StickyHeader
+        width={terminalWidth}
+        isFirst={isFirst}
+        borderColor={borderColor}
+        borderDimColor={borderDimColor}
+      >
         <ToolStatusIndicator status={status} name={name} />
         <ToolInfo
           name={name}
@@ -214,15 +222,28 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
         )}
         {emphasis === 'high' && <TrailingIndicator />}
       </StickyHeader>
-      {renderedResult}
-      {isThisShellFocused && config && (
-        <Box paddingLeft={STATUS_INDICATOR_WIDTH} marginTop={1}>
-          <ShellInputPrompt
-            activeShellPtyId={activeShellPtyId ?? null}
-            focus={embeddedShellFocused}
-          />
-        </Box>
-      )}
+      <Box
+        width={terminalWidth}
+        borderStyle="round"
+        borderColor={borderColor}
+        borderDimColor={borderDimColor}
+        borderTop={false}
+        borderBottom={false}
+        borderLeft={true}
+        borderRight={true}
+        paddingX={1}
+        flexDirection="column"
+      >
+        {renderedResult}
+        {isThisShellFocused && config && (
+          <Box paddingLeft={STATUS_INDICATOR_WIDTH} marginTop={1}>
+            <ShellInputPrompt
+              activeShellPtyId={activeShellPtyId ?? null}
+              focus={embeddedShellFocused}
+            />
+          </Box>
+        )}
+      </Box>
     </>
   );
 };