fix(ui): removed background color for input

[devr0306]

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 mainly used for the Apple Terminal.
  • Removes the blocks on the border(Top ▀, Bottom ▄) and just renders an empty line with a background on the top and the bottom.

3. 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.

4. 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:

Default Linux with tmux

Default Linux

Default mac with tmux(same as without tmux)

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

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! 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. ↩

[gemini-code-assist]

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.}

[github-actions]

Size Change: -2.67 kB (-0.01%)

Total Size: 33.7 MB

Filename	Size	Change
./bundle/chunk-36XJ6ZF5.js	0 B	-2.72 MB (removed)	🏆
./bundle/chunk-4SHDWSBH.js	0 B	-49.2 kB (removed)	🏆
./bundle/chunk-4ZCUVT4U.js	0 B	-676 kB (removed)	🏆
./bundle/chunk-7XRWAMT5.js	0 B	-3.8 kB (removed)	🏆
./bundle/chunk-G5ETYVU7.js	0 B	-3.43 kB (removed)	🏆
./bundle/chunk-XLO3BNNY.js	0 B	-14.5 MB (removed)	🏆
./bundle/core-RGKSGLAV.js	0 B	-46.8 kB (removed)	🏆
./bundle/devtoolsService-W36EILYO.js	0 B	-28.4 kB (removed)	🏆
./bundle/gemini-BRZ747JN.js	0 B	-576 kB (removed)	🏆
./bundle/interactiveCli-5MT5RWVG.js	0 B	-1.3 MB (removed)	🏆
./bundle/liteRtServerManager-RTILVOZH.js	0 B	-2.08 kB (removed)	🏆
./bundle/oauth2-provider-ZXB2QJEV.js	0 B	-9.16 kB (removed)	🏆
./bundle/chunk-4TRBGB3C.js	3.43 kB	+3.43 kB (new file)	🆕
./bundle/chunk-4W7TLF6X.js	14.5 MB	+14.5 MB (new file)	🆕
./bundle/chunk-BRBHYSWT.js	2.72 MB	+2.72 MB (new file)	🆕
./bundle/chunk-R47JHJLC.js	3.8 kB	+3.8 kB (new file)	🆕
./bundle/chunk-RWXP2BRQ.js	49.2 kB	+49.2 kB (new file)	🆕
./bundle/chunk-ZMYH2N4O.js	676 kB	+676 kB (new file)	🆕
./bundle/core-CRPYO4YL.js	46.8 kB	+46.8 kB (new file)	🆕
./bundle/devtoolsService-IFD5PPR6.js	28.4 kB	+28.4 kB (new file)	🆕
./bundle/gemini-77QUGAY7.js	576 kB	+576 kB (new file)	🆕
./bundle/interactiveCli-DMVMNICB.js	1.3 MB	+1.3 MB (new file)	🆕
./bundle/liteRtServerManager-KKBMPYA5.js	2.08 kB	+2.08 kB (new file)	🆕
./bundle/oauth2-provider-3P7KZLV3.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-2RHFUIH4.js	1.97 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-RJTRUG2J.js	39.8 kB	0 B
./bundle/cleanup-HPATN3H5.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/examples/hooks/scripts/on-start.js	188 B	0 B
./bundle/examples/mcp-server/example.js	1.43 kB	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-HWEYBJE7.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/start-Y5PAFOMR.js	0 B	-622 B (removed)	🏆
./bundle/tree-sitter-7U6MW5PS.js	274 kB	0 B
./bundle/tree-sitter-bash-34ZGLXVX.js	1.84 MB	0 B
./bundle/cleanup-EJZHHO65.js	932 B	+932 B (new file)	🆕
./bundle/start-LNC752AM.js	622 B	+622 B (new file)	🆕

_{compressed-size-action}

[jacob314]

PR Review

Summary
This PR aims to fix UI rendering issues in tmux by updating HalfLinePaddedBox to use a compatibility rendering mode when true color is not supported, relying on supportsTrueColor() rather than terminal-specific checks.

Review Notes & Issues

1. Bug in Compatibility Mode Implementation:
   The PR description states:

   "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."

   However, in the if (noTrueColor) block in HalfLinePaddedBox.tsx, the parent container <Box> still has the backgroundColor={backgroundColor} prop. In Ink, applying backgroundColor to a parent <Box> applies that background color to all of its children. Therefore, a solid background is still being painted over the content, contrary to the PR's stated intent.

   Suggested Fix: Remove backgroundColor={backgroundColor} from the container <Box> in the noTrueColor fallback path so that only the Text components containing the block characters have the background color applied.

2. True Color Standard Path:
   Flipping the default rendering path to use the ▄/▀ method (previously reserved for iTerm2) when supportsTrueColor() is true is a good refactor and correctly uses capability detection rather than hardcoded terminal names.

3. InputPrompt Updates:
   The changes in InputPrompt.tsx that switch to using theme.background.input with 100% opacity instead of theme.text.secondary with partial opacity are solid and integrate well with the new capability checks.

4. Testing:
   The snapshot updates and test refactors in HalfLinePaddedBox.test.tsx accurately reflect the new logic.

Conclusion
The overall approach is sound and correctly leverages terminal capabilities. However, the noTrueColor fallback block needs to be updated to actually remove the background color from the container <Box> to resolve the tmux rendering artifacts as intended. Please update HalfLinePaddedBox.tsx accordingly.

[jacob314]

Approved after these comments are addressed

[jacob314]

looks good! thanks for all the iteration. The one remaining issue that can be fixed in a follow up is in no-color mode there is insufficient padding around user messages in the history.

Example: