Skip to content

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

Open
devr0306 wants to merge 7 commits intomainfrom
input-color
Open

fix(ui): removed background color for input#25339
devr0306 wants to merge 7 commits intomainfrom
input-color

Conversation

@devr0306
Copy link
Copy Markdown
Contributor

@devr0306 devr0306 commented Apr 13, 2026

Summary

Adding background color for inputs was messing up the UI on tmux. Removed it to improve the UI for all terminals that use true color.

Details

  1. Terminal Capability Detection

    • Core Utility: Integrated supportsTrueColor() into the UI layer to detect if the terminal supports 24-bit color.
  2. UI Rendering Refactor (HalfLinePaddedBox.tsx)
    The PR completely flips the rendering strategy to prioritize True Color support:

  • True Color Supported (New Standard):
    • Switched the border characters: Top border now uses ▄ (foreground colored) and bottom border uses ▀.
    • Applies the background color directly to the content Box.
    • This is now the default path for most modern terminals (iTerm2, VS Code, Kitty, etc.).
  • True Color Not Supported (Compatibility Mode):
    • This path is now used for tmux and Apple Terminal.
    • Removes the background color from the content box to prevent rendering artifacts and "broken lines."
    • Uses the background-colored block method (Top ▀, Bottom ▄) to simulate padding without painting a solid background over the children.
  1. Global Snapshot Updates
  • Because the "standard" rendering path (used by the test runner) changed its character set and background application, the PR updates dozens of snapshots
    across the CLI package.
  • This includes .snap and .snap.svg files for InputPrompt, MainContent, UserMessage, and ToolConfirmation.
  1. Test Coverage
  • Core Tests: Added new test cases in compatibility.test.ts to verify Apple Terminal detection logic.
  • UI Tests: Refactored HalfLinePaddedBox.test.tsx to test capability-based branches (True Color vs Low Color) instead of terminal-specific strings.

Related Issues

Fixes #18315

How to Validate

Start the CLI in any terminal. The input box should look normal in it(proper color, no broken lines, etc). Screenshots from various terminals:

Alacritty with tmux

alacritty-tmux

iTerm with tmux

iterm-tmux

Default Linux with tmux

linux-default-tmux

Default Mac with SSH(same as Default Mac)

default-mac-ssh

Default Linux

linux-default

Pre-Merge Checklist

  • Updated relevant documentation and README (if needed)
  • Added/updated tests (if needed)
  • Noted breaking changes (if any)
  • Validated on required platforms/methods:
    • MacOS
      • npm run
      • npx
      • Docker
      • Podman
      • Seatbelt
    • Windows
      • npm run
      • npx
      • Docker
    • Linux
      • npm run
      • npx
      • Docker

@devr0306 devr0306 requested a review from a team as a code owner April 13, 2026 21:10
@gemini-code-assist
Copy link
Copy Markdown
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses UI rendering artifacts caused by background colors in input components when used within tmux. By removing these background colors and refining how terminal capabilities are detected, the UI now renders correctly across a wider range of terminal emulators, including Apple Terminal. The changes also include updated snapshots and tests to reflect these UI adjustments.

Highlights

  • UI Improvement: Removed the background color for input elements to resolve rendering issues when running in tmux.
  • Compatibility Enhancement: Updated isAppleTerminal detection to check additional environment variables (LC_TERMINAL, LC_TERM_PROGRAM) for better reliability.
  • Refactoring: Replaced isITerm2 checks with supportsTrueColor in HalfLinePaddedBox to better handle terminal capabilities.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request refactors the HalfLinePaddedBox component to use supportsTrueColor instead of isITerm2 for determining its rendering path, while also swapping the block characters used for top and bottom padding. Additionally, the isAppleTerminal utility was updated to check for LC_TERMINAL and LC_TERM_PROGRAM environment variables. Review feedback points out a critical mismatch in the HalfLinePaddedBox tests, where isAppleTerminal is still being mocked despite the component now relying on supportsTrueColor, leading to incorrect test execution paths.

Note: Security Review did not run due to the size of the PR.

import { Text, useIsScreenReaderEnabled } from 'ink';
import { describe, it, expect, vi, afterEach } from 'vitest';
import { isITerm2 } from '../../utils/terminalUtils.js';
import { isAppleTerminal } from '@google/gemini-cli-core';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The HalfLinePaddedBox component now uses supportsTrueColor to determine its rendering path, but the tests are still importing and focusing on isAppleTerminal. You should import supportsTrueColor here so it can be mocked and used in the test cases.

Suggested change
import { isAppleTerminal } from '@google/gemini-cli-core';
import { isAppleTerminal, supportsTrueColor } from '@google/gemini-cli-core';

Comment on lines +21 to +27
vi.mock('@google/gemini-cli-core', async () => {
const actual = await vi.importActual('@google/gemini-cli-core');
return {
...actual,
isAppleTerminal: vi.fn(() => false),
};
});
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The tests are mocking isAppleTerminal, but the component logic depends on supportsTrueColor. This mismatch causes the tests to always execute the true-color branch (the "Special" path) regardless of the isAppleTerminal mock value, as supportsTrueColor likely returns true in the test environment. This is why the snapshots show the padding characters were swapped even in the "not Apple Terminal" case. You should mock supportsTrueColor here and update the test cases to use it.

Suggested change
vi.mock('@google/gemini-cli-core', async () => {
const actual = await vi.importActual('@google/gemini-cli-core');
return {
...actual,
isAppleTerminal: vi.fn(() => false),
};
});
vi.mock('@google/gemini-cli-core', async () => {
const actual = await vi.importActual('@google/gemini-cli-core');
return {
...actual,
isAppleTerminal: vi.fn(() => false),
supportsTrueColor: vi.fn(() => true),
};
});

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 13, 2026

Size Change: -181 B (0%)

Total Size: 34.1 MB

Filename Size Change
./bundle/chunk-5QH5OA4A.js 0 B -3.54 MB (removed) 🏆
./bundle/chunk-IWJMJ65W.js 0 B -3.8 kB (removed) 🏆
./bundle/chunk-O2CPKRMA.js 0 B -14.9 MB (removed) 🏆
./bundle/core-767S4EZ2.js 0 B -46.5 kB (removed) 🏆
./bundle/devtoolsService-FAPNKVYS.js 0 B -28.4 kB (removed) 🏆
./bundle/gemini-RB6EBDCZ.js 0 B -553 kB (removed) 🏆
./bundle/interactiveCli-74VRSG7V.js 0 B -1.29 MB (removed) 🏆
./bundle/oauth2-provider-4YD5GUGR.js 0 B -9.16 kB (removed) 🏆
./bundle/chunk-K55H74WY.js 3.54 MB +3.54 MB (new file) 🆕
./bundle/chunk-VEAQ5F6Z.js 14.9 MB +14.9 MB (new file) 🆕
./bundle/chunk-XRAXOIBM.js 3.8 kB +3.8 kB (new file) 🆕
./bundle/core-ATFZPNSL.js 46.5 kB +46.5 kB (new file) 🆕
./bundle/devtoolsService-HFNPANA7.js 28.4 kB +28.4 kB (new file) 🆕
./bundle/gemini-WNSQVNR6.js 553 kB +553 kB (new file) 🆕
./bundle/interactiveCli-Z52LQM7Q.js 1.29 MB +1.29 MB (new file) 🆕
./bundle/oauth2-provider-ZRXJ6P72.js 9.16 kB +9.16 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size Change
./bundle/bundled/third_party/index.js 8 MB 0 B
./bundle/chunk-34MYV7JD.js 2.45 kB 0 B
./bundle/chunk-5AUYMPVF.js 858 B 0 B
./bundle/chunk-5PS3AYFU.js 1.18 kB 0 B
./bundle/chunk-664ZODQF.js 124 kB 0 B
./bundle/chunk-DAHVX5MI.js 206 kB 0 B
./bundle/chunk-IUUIT4SU.js 56.5 kB 0 B
./bundle/chunk-QM5IP3NK.js 1.97 MB 0 B
./bundle/chunk-RJTRUG2J.js 39.8 kB 0 B
./bundle/cleanup-TA2H66X6.js 0 B -932 B (removed) 🏆
./bundle/devtools-36NN55EP.js 696 kB 0 B
./bundle/dist-T73EYRDX.js 356 B 0 B
./bundle/events-XB7DADIJ.js 418 B 0 B
./bundle/gemini.js 4.97 kB 0 B
./bundle/getMachineId-bsd-TXG52NKR.js 1.55 kB 0 B
./bundle/getMachineId-darwin-7OE4DDZ6.js 1.55 kB 0 B
./bundle/getMachineId-linux-SHIFKOOX.js 1.34 kB 0 B
./bundle/getMachineId-unsupported-5U5DOEYY.js 1.06 kB 0 B
./bundle/getMachineId-win-6KLLGOI4.js 1.72 kB 0 B
./bundle/memoryDiscovery-MYQ3ZWKM.js 980 B 0 B
./bundle/multipart-parser-KPBZEGQU.js 11.7 kB 0 B
./bundle/node_modules/@google/gemini-cli-devtools/dist/client/main.js 222 kB 0 B
./bundle/node_modules/@google/gemini-cli-devtools/dist/src/_client-assets.js 229 kB 0 B
./bundle/node_modules/@google/gemini-cli-devtools/dist/src/index.js 13.4 kB 0 B
./bundle/node_modules/@google/gemini-cli-devtools/dist/src/types.js 132 B 0 B
./bundle/sandbox-macos-permissive-open.sb 890 B 0 B
./bundle/sandbox-macos-permissive-proxied.sb 1.31 kB 0 B
./bundle/sandbox-macos-restrictive-open.sb 3.36 kB 0 B
./bundle/sandbox-macos-restrictive-proxied.sb 3.56 kB 0 B
./bundle/sandbox-macos-strict-open.sb 4.82 kB 0 B
./bundle/sandbox-macos-strict-proxied.sb 5.02 kB 0 B
./bundle/src-QVCVGIUX.js 47 kB 0 B
./bundle/tree-sitter-7U6MW5PS.js 274 kB 0 B
./bundle/tree-sitter-bash-34ZGLXVX.js 1.84 MB 0 B
./bundle/cleanup-E7FGWW2J.js 932 B +932 B (new file) 🆕

compressed-size-action

@gemini-cli gemini-cli bot added the area/core Issues related to User Interface, OS Support, Core Functionality label Apr 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/core Issues related to User Interface, OS Support, Core Functionality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

useBackgroundColor on tmux on alacritty: Can't See Prompt Text

1 participant