fix(ui): removed background color for input (#25339)

packages/cli/src/ui/components/shared/HalfLinePaddedBox.test.tsx

@@ -3,12 +3,11 @@
  * Copyright 2025 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-
 import { renderWithProviders } from '../../../test-utils/render.js';
 import { HalfLinePaddedBox } from './HalfLinePaddedBox.js';
 import { Text, useIsScreenReaderEnabled } from 'ink';
 import { describe, it, expect, vi, afterEach } from 'vitest';
-import { isITerm2 } from '../../utils/terminalUtils.js';
+import { supportsTrueColor } from '@google/gemini-cli-core';
 
 vi.mock('ink', async () => {
   const actual = await vi.importActual('ink');
@@ -18,15 +17,24 @@ vi.mock('ink', async () => {
   };
 });
 
+vi.mock('@google/gemini-cli-core', async () => {
+  const actual = await vi.importActual('@google/gemini-cli-core');
+  return {
+    ...actual,
+    supportsTrueColor: vi.fn(() => true),
+  };
+});
+
 describe('<HalfLinePaddedBox />', () => {
   const mockUseIsScreenReaderEnabled = vi.mocked(useIsScreenReaderEnabled);
+  const mockSupportsTrueColor = vi.mocked(supportsTrueColor);
 
   afterEach(() => {
     vi.restoreAllMocks();
   });
 
-  it('renders standard background and blocks when not iTerm2', async () => {
-    vi.mocked(isITerm2).mockReturnValue(false);
+  it('renders standard background and blocks when true color is supported', async () => {
+    mockSupportsTrueColor.mockReturnValue(true);
 
     const { lastFrame, unmount } = await renderWithProviders(
       <HalfLinePaddedBox backgroundBaseColor="blue" backgroundOpacity={0.5}>
@@ -40,8 +48,8 @@ describe('<HalfLinePaddedBox />', () => {
     unmount();
   });
 
-  it('renders iTerm2-specific blocks when iTerm2 is detected', async () => {
-    vi.mocked(isITerm2).mockReturnValue(true);
+  it('renders alternative blocks when true color is not supported', async () => {
+    mockSupportsTrueColor.mockReturnValue(false);
 
     const { lastFrame, unmount } = await renderWithProviders(
       <HalfLinePaddedBox backgroundBaseColor="blue" backgroundOpacity={0.5}>

packages/cli/src/ui/components/shared/HalfLinePaddedBox.tsx

@@ -9,12 +9,8 @@ import { useMemo } from 'react';
 import { Box, Text, useIsScreenReaderEnabled } from 'ink';
 import { useUIState } from '../../contexts/UIStateContext.js';
 import { theme } from '../../semantic-colors.js';
-import {
-  interpolateColor,
-  resolveColor,
-  getSafeLowColorBackground,
-} from '../../themes/color-utils.js';
-import { isLowColorDepth, isITerm2 } from '../../utils/terminalUtils.js';
+import { interpolateColor, resolveColor } from '../../themes/color-utils.js';
+import { supportsTrueColor } from '@google/gemini-cli-core';
 
 export interface HalfLinePaddedBoxProps {
   /**
@@ -56,14 +52,7 @@ const HalfLinePaddedBoxInternal: React.FC<HalfLinePaddedBoxProps> = ({
   const { terminalWidth } = useUIState();
   const terminalBg = theme.background.primary || 'black';
 
-  const isLowColor = isLowColorDepth();
-
   const backgroundColor = useMemo(() => {
-    // Interpolated background colors often look bad in 256-color terminals
-    if (isLowColor) {
-      return getSafeLowColorBackground(terminalBg);
-    }
-
     const resolvedBase =
       resolveColor(backgroundBaseColor) || backgroundBaseColor;
     const resolvedTerminalBg = resolveColor(terminalBg) || terminalBg;
@@ -73,37 +62,18 @@ const HalfLinePaddedBoxInternal: React.FC<HalfLinePaddedBoxProps> = ({
       resolvedBase,
       backgroundOpacity,
     );
-  }, [backgroundBaseColor, backgroundOpacity, terminalBg, isLowColor]);
+  }, [backgroundBaseColor, backgroundOpacity, terminalBg]);
 
   if (!backgroundColor) {
     return <>{children}</>;
   }
 
-  const isITerm = isITerm2();
+  const noTrueColor = !supportsTrueColor();
 
-  if (isITerm) {
+  if (noTrueColor) {
     return (
-      <Box
-        width={terminalWidth}
-        flexDirection="column"
-        alignItems="stretch"
-        minHeight={1}
-        flexShrink={0}
-      >
-        <Box width={terminalWidth} flexDirection="row">
-          <Text color={backgroundColor}>{'▄'.repeat(terminalWidth)}</Text>
-        </Box>
-        <Box
-          width={terminalWidth}
-          flexDirection="column"
-          alignItems="stretch"
-          backgroundColor={backgroundColor}
-        >
-          {children}
-        </Box>
-        <Box width={terminalWidth} flexDirection="row">
-          <Text color={backgroundColor}>{'▀'.repeat(terminalWidth)}</Text>
-        </Box>
+      <Box width={terminalWidth} backgroundColor={backgroundColor} paddingY={1}>
+        {children}
       </Box>
     );
   }
@@ -115,18 +85,20 @@ const HalfLinePaddedBoxInternal: React.FC<HalfLinePaddedBoxProps> = ({
       alignItems="stretch"
       minHeight={1}
       flexShrink={0}
-      backgroundColor={backgroundColor}
     >
       <Box width={terminalWidth} flexDirection="row">
-        <Text backgroundColor={backgroundColor} color={terminalBg}>
-          {'▀'.repeat(terminalWidth)}
-        </Text>
+        <Text color={backgroundColor}>{'▄'.repeat(terminalWidth)}</Text>
+      </Box>
+      <Box
+        width={terminalWidth}
+        flexDirection="column"
+        alignItems="stretch"
+        backgroundColor={backgroundColor}
+      >
+        {children}
       </Box>
-      {children}
       <Box width={terminalWidth} flexDirection="row">
-        <Text color={terminalBg} backgroundColor={backgroundColor}>
-          {'▄'.repeat(terminalWidth)}
-        </Text>
+        <Text color={backgroundColor}>{'▀'.repeat(terminalWidth)}</Text>
       </Box>
     </Box>
   );

packages/cli/src/ui/components/shared/__snapshots__/HalfLinePaddedBox.test.tsx.snap

@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<HalfLinePaddedBox /> > renders iTerm2-specific blocks when iTerm2 is detected 1`] = `
-"▄▄▄▄▄▄▄▄▄▄
+exports[`<HalfLinePaddedBox /> > renders alternative blocks when true color is not supported 1`] = `
+"          
 Content   
-▀▀▀▀▀▀▀▀▀▀
+          
 "
 `;
 
@@ -17,9 +17,9 @@ exports[`<HalfLinePaddedBox /> > renders nothing when useBackgroundColor is fals
 "
 `;
 
-exports[`<HalfLinePaddedBox /> > renders standard background and blocks when not iTerm2 1`] = `
-"▀▀▀▀▀▀▀▀▀▀
+exports[`<HalfLinePaddedBox /> > renders standard background and blocks when true color is supported 1`] = `
+"▄▄▄▄▄▄▄▄▄▄
 Content   
-▄▄▄▄▄▄▄▄▄▄
+▀▀▀▀▀▀▀▀▀▀
 "
 `;