fix(ui): decouple context percentage from model info visibility

[anthonychen000]

Fixes #14864

Summary

Decouples the ContextUsageDisplay, QuotaDisplay, and MemoryUsageDisplay from the model info visibility toggle in the UI footer.

Details

Currently, in packages/cli/src/ui/components/Footer.tsx, several stats displays are nested inside the {!hideModelInfo} conditional block. This causes the context percentage and quota stats to disappear when the model info is disabled, even if hideContextPercentage is explicitly set to false.

Changes:

• Refactored Footer.tsx to evaluate model info, context percentage, and quota visibility independently.
• Updated the justifyContent layout logic so the footer remains properly aligned when mixing and matching these visibility settings.
• Added specific unit tests to Footer.test.tsx to ensure context percentage and quota render correctly when the model info is hidden.

How to Validate

1. Update ~/.gemini/settings.json to include:

{
  "ui": {
    "footer": {
      "hideModelInfo": true,
      "hideContextPercentage": false
    }
  }
}

2. Build and run the CLI locally.
3. Look at the footer on bottom right. The model-name is hidden but context usage is present.
4. Run the targeted test suite to confirm(added new test to validate):

npm run test -- Footer.test.tsx

Pre-Merge Checklist

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

screenshot with updated ~/.gemini/settings.json:

  "ui": {
    "footer": {
      "hideContextPercentage": false,
      "hideModelInfo": true
    }
  }

[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 a bug where the context percentage and quota statistics in the CLI footer would incorrectly disappear when the model information was hidden. The changes refactor the footer's rendering logic to ensure these elements are displayed independently based on their own visibility settings, improving the user experience and configurability of the UI.

Highlights

• Decoupled UI elements: The ContextUsageDisplay, QuotaDisplay, and MemoryUsageDisplay components in the UI footer have been decoupled from the model information visibility toggle.
• Refactored Footer rendering: The Footer.tsx component was refactored to independently evaluate the visibility of model info, context percentage, and quota stats.
• Layout adjustment: The justifyContent layout logic was updated to ensure proper footer alignment when mixing and matching visibility settings.
• Added unit tests: New unit tests were added to Footer.test.tsx to verify that context percentage and quota render correctly even when model info is hidden.

Changelog

• packages/cli/src/ui/components/Footer.test.tsx
  • Added a test case to confirm the context percentage is shown when hideModelInfo is true and hideContextPercentage is false.
  • Added a test case to confirm quota stats are shown when hideModelInfo is true.
• packages/cli/src/ui/components/Footer.tsx
  • Modified the justifyContent style calculation to include hideContextPercentage in the condition for centering the footer content.
  • Updated the conditional rendering of the right-hand section of the footer to allow ContextUsageDisplay, QuotaDisplay, MemoryUsageDisplay, corgiMode, and showErrorSummary to be visible even if hideModelInfo is true.
  • Adjusted the spacing logic between model info, context percentage, and quota stats to ensure correct separation when multiple elements are displayed.

Activity

• Added new unit tests to validate the independent visibility of footer components.
• Validated the changes on MacOS using npm run.
• Provided detailed validation steps for local testing, including a settings.json configuration example.
• Included a screenshot demonstrating the fix.

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.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

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 effectively decouples the visibility of footer stats like context usage and quota from the model info display toggle. The logic changes in Footer.tsx correctly ensure that these stats can be shown independently, and the new unit tests in Footer.test.tsx provide good coverage for the fix.

I've identified one issue with the layout logic for justifyContent that is not fully robust and can lead to alignment problems in certain configurations, and have provided a suggestion to refactor this for better reliability.

[gemini-code-assist]

The logic for justifyContent is an improvement, but it's still not fully robust. It doesn't account for all elements that can be visible on the left and right sides of the footer, which can lead to incorrect centering. For example, if hideCWD, hideModelInfo, and hideContextPercentage are all true, but quotaStats is visible on the right, justifyContent will incorrectly be set to 'center'.

To make this more reliable, I suggest refactoring to define all visibility flags first, then use them to determine the layout. This makes the logic clearer and bug-free.

  const displayVimMode = vimEnabled ? vimMode : undefined;
  const showDebugProfiler = debugMode || isDevelopment;

  const showLeftSection = showDebugProfiler || !!displayVimMode || !hideCWD;
  const showRightSection =
    !hideModelInfo ||
    !hideContextPercentage ||
    !!quotaStats ||
    showMemoryUsage ||
    corgiMode ||
    showErrorSummary;

  const justifyContent =
    !showLeftSection && !showRightSection ? 'center' : 'space-between';

[anthonychen000]

I updated the logic to use the suggested showLeftSection and showRightSection flags. This ensures the layout correctly handles secondary elements like showMemoryUsage and quotaStats even when the primary model info is hidden.

I verified this locally with the following configuration:

"ui": {
    "showMemoryUsage": true,
    "footer": {
      "hideCWD": true,
      "hideModelInfo": true,
      "hideContextPercentage": true
    }
  }

Even when hiding all primary footer elements, the Memory Usage now correctly stays right-aligned while the Sandbox Status remains centered.

[jackwotherspoon]

I am working on a PR that makes the entire footer customizeable via /footer.

I think this de-coupling may not be needed as those settings will become legacy/deprecated one I merge my PR.

#19001

[anthonychen000]

I am working on a PR that makes the entire footer customizeable via /footer.

I think this de-coupling may not be needed as those settings will become legacy/deprecated one I merge my PR.

#19001

Thanks for taking a look Jack. I'll close this out.

I did add some unit tests for the context/quota visibility—feel free to cherry-pick those if they’re helpful for your implementation. Looking forward to the customizable footer!

[anthonychen000]

Closing this