fix: InputPrompt wrapped lines maintain highlighting, increase responsiveness in narrow cases (#7656)

Co-authored-by: Jacob Richman <jacob314@gmail.com>
Co-authored-by: Arya Gummadi <aryagummadi@google.com>

packages/cli/src/ui/components/Composer.tsx

@@ -5,12 +5,13 @@
  */
 
 import { Box, Text } from 'ink';
+import { useMemo } from 'react';
 import { LoadingIndicator } from './LoadingIndicator.js';
 import { ContextSummaryDisplay } from './ContextSummaryDisplay.js';
 import { AutoAcceptIndicator } from './AutoAcceptIndicator.js';
 import { ShellModeIndicator } from './ShellModeIndicator.js';
 import { DetailedMessagesDisplay } from './DetailedMessagesDisplay.js';
-import { InputPrompt } from './InputPrompt.js';
+import { InputPrompt, calculatePromptWidths } from './InputPrompt.js';
 import { Footer, type FooterProps } from './Footer.js';
 import { ShowMoreLines } from './ShowMoreLines.js';
 import { OverflowProvider } from '../contexts/OverflowContext.js';
@@ -39,6 +40,12 @@ export const Composer = () => {
 
   const { contextFileNames, showAutoAcceptIndicator } = uiState;
 
+  // Use the container width of InputPrompt for width of DetailedMessagesDisplay
+  const { containerWidth } = useMemo(
+    () => calculatePromptWidths(uiState.terminalWidth),
+    [uiState.terminalWidth],
+  );
+
   // Build footer props from context values
   const footerProps: Omit<FooterProps, 'vimMode'> = {
     model: config.getModel(),
@@ -163,7 +170,7 @@ export const Composer = () => {
               maxHeight={
                 uiState.constrainHeight ? debugConsoleMaxHeight : undefined
               }
-              width={uiState.inputWidth}
+              width={containerWidth}
             />
             <ShowMoreLines constrainHeight={uiState.constrainHeight} />
           </Box>