Conversation
Summary of ChangesHello, 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
Using Gemini Code AssistThe 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
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 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
|
There was a problem hiding this comment.
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'; |
There was a problem hiding this comment.
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.
| import { isAppleTerminal } from '@google/gemini-cli-core'; | |
| import { isAppleTerminal, supportsTrueColor } from '@google/gemini-cli-core'; |
| vi.mock('@google/gemini-cli-core', async () => { | ||
| const actual = await vi.importActual('@google/gemini-cli-core'); | ||
| return { | ||
| ...actual, | ||
| isAppleTerminal: vi.fn(() => false), | ||
| }; | ||
| }); |
There was a problem hiding this comment.
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.
| 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), | |
| }; | |
| }); |
|
Size Change: -181 B (0%) Total Size: 34.1 MB
ℹ️ View Unchanged
|
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
Terminal Capability Detection
supportsTrueColor()into the UI layer to detect if the terminal supports 24-bit color.UI Rendering Refactor (
HalfLinePaddedBox.tsx)The PR completely flips the rendering strategy to prioritize True Color support:
across the CLI package.
.snapand.snap.svgfiles forInputPrompt,MainContent,UserMessage, andToolConfirmation.compatibility.test.tsto verify Apple Terminal detection logic.HalfLinePaddedBox.test.tsxto test capability-based branches (True ColorvsLow 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
iTerm with tmux
Default Linux with tmux
Default Mac with SSH(same as Default Mac)
Default Linux
Pre-Merge Checklist