fix(cli): stabilize copy mode to prevent flickering and cursor resets (#22584)

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

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

@@ -588,12 +588,15 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
           streamingState={uiState.streamingState}
           suggestionsPosition={suggestionsPosition}
           onSuggestionsVisibilityChange={setSuggestionsVisible}
+          copyModeEnabled={uiState.copyModeEnabled}
         />
       )}
 
       {showUiDetails &&
         !settings.merged.ui.hideFooter &&
-        !isScreenReaderEnabled && <Footer />}
+        !isScreenReaderEnabled && (
+          <Footer copyModeEnabled={uiState.copyModeEnabled} />
+        )}
     </Box>
   );
 };

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

@@ -12,16 +12,14 @@ import { theme } from '../semantic-colors.js';
 export const CopyModeWarning: React.FC = () => {
   const { copyModeEnabled } = useUIState();
 
-  if (!copyModeEnabled) {
-    return null;
-  }
-
   return (
-    <Box>
-      <Text color={theme.status.warning}>
-        In Copy Mode. Use Page Up/Down to scroll. Press Ctrl+S or any other key
-        to exit.
-      </Text>
+    <Box height={1}>
+      {copyModeEnabled && (
+        <Text color={theme.status.warning}>
+          In Copy Mode. Use Page Up/Down to scroll. Press Ctrl+S or any other
+          key to exit.
+        </Text>
+      )}
     </Box>
   );
 };

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

@@ -175,12 +175,18 @@ interface FooterColumn {
   isHighPriority: boolean;
 }
 
-export const Footer: React.FC = () => {
+export const Footer: React.FC<{ copyModeEnabled?: boolean }> = ({
+  copyModeEnabled = false,
+}) => {
   const uiState = useUIState();
   const config = useConfig();
   const settings = useSettings();
   const { vimEnabled, vimMode } = useVimMode();
 
+  if (copyModeEnabled) {
+    return <Box height={1} />;
+  }
+
   const {
     model,
     targetDir,
@@ -353,7 +359,17 @@ export const Footer: React.FC = () => {
         break;
       }
       case 'memory-usage': {
-        addCol(id, header, () => <MemoryUsageDisplay color={itemColor} />, 10);
+        addCol(
+          id,
+          header,
+          () => (
+            <MemoryUsageDisplay
+              color={itemColor}
+              isActive={!uiState.copyModeEnabled}
+            />
+          ),
+          10,
+        );
         break;
       }
       case 'session-id': {

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

@@ -119,6 +119,7 @@ export interface InputPromptProps {
   popAllMessages?: () => string | undefined;
   suggestionsPosition?: 'above' | 'below';
   setBannerVisible: (visible: boolean) => void;
+  copyModeEnabled?: boolean;
 }
 
 // The input content, input container, and input suggestions list may have different widths
@@ -212,6 +213,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
   popAllMessages,
   suggestionsPosition = 'below',
   setBannerVisible,
+  copyModeEnabled = false,
 }) => {
   const isHelpDismissKey = useIsHelpDismissKey();
   const keyMatchers = useKeyMatchers();
@@ -331,7 +333,8 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
     isShellSuggestionsVisible,
   } = completion;
 
-  const showCursor = focus && isShellFocused && !isEmbeddedShellFocused;
+  const showCursor =
+    focus && isShellFocused && !isEmbeddedShellFocused && !copyModeEnabled;
 
   // Notify parent component about escape prompt state changes
   useEffect(() => {

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

@@ -11,13 +11,18 @@ import { theme } from '../semantic-colors.js';
 import process from 'node:process';
 import { formatBytes } from '../utils/formatters.js';
 
-export const MemoryUsageDisplay: React.FC<{ color?: string }> = ({
-  color = theme.text.primary,
-}) => {
+export const MemoryUsageDisplay: React.FC<{
+  color?: string;
+  isActive?: boolean;
+}> = ({ color = theme.text.primary, isActive = true }) => {
   const [memoryUsage, setMemoryUsage] = useState<string>('');
   const [memoryUsageColor, setMemoryUsageColor] = useState<string>(color);
 
   useEffect(() => {
+    if (!isActive) {
+      return;
+    }
+
     const updateMemory = () => {
       const usage = process.memoryUsage().rss;
       setMemoryUsage(formatBytes(usage));
@@ -25,10 +30,11 @@ export const MemoryUsageDisplay: React.FC<{ color?: string }> = ({
         usage >= 2 * 1024 * 1024 * 1024 ? theme.status.error : color,
       );
     };
+
     const intervalId = setInterval(updateMemory, 2000);
     updateMemory(); // Initial update
     return () => clearInterval(intervalId);
-  }, [color]);
+  }, [color, isActive]);
 
   return (
     <Box>