ui: update & subdue footer colors and animate progress indicator

[keithguerin]

Summary

Update & subdue footer colors, animate progress indicator, and increase user background contrast.

Details

• Updated footer colors for path and model info to use theme.text.primary.
• Removed parentheses from context percentage display.
• Implemented smooth color interpolation for the Gemini progress indicator using tinygradient.
• Color sequence: Purple -> Blue -> Cyan -> Green -> Yellow -> Red.
• Slowed down animation cycle to 4000ms.
• Hidden the indicator and text when the agent is idle for a cleaner UX.
• Increased DEFAULT_BACKGROUND_OPACITY from 8% to 16% for better contrast on user messages and input.
• Fixed logic regression for 'esc to cancel' hint.

Related Issues

Fixes #18571

How to Validate

1. Run npm run start.
2. Observe the footer colors: path and model should be white/primary text.
3. Observe the thinking indicator at top-left: it should transition smoothly through brand colors, starting with purple.
4. Verify that when not thinking/responding, the indicator area is blank.
5. Check user input and message history: the background should be more distinct (16% opacity).

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

[gemini-cli]

Hi @keithguerin, thank you so much for your contribution to Gemini CLI! We really appreciate the time and effort you've put into this.

We're making some updates to our contribution process to improve how we track and review changes. Please take a moment to review our recent discussion post: Improving Our Contribution Process & Introducing New Guidelines.

Key Update: Starting January 26, 2026, the Gemini CLI project will require all pull requests to be associated with an existing issue. Any pull requests not linked to an issue by that date will be automatically closed.

Thank you for your understanding and for being a part of our community!

[gemini-cli]

Hi there! Thank you for your contribution to Gemini CLI.

To improve our contribution process and better track changes, we now require all pull requests to be associated with an existing issue, as announced in our recent discussion and as detailed in our CONTRIBUTING.md.

This pull request is being closed because it is not currently linked to an issue. Once you have updated the description of this PR to link an issue (e.g., by adding Fixes #123 or Related to #123), it will be automatically reopened.

How to link an issue:
Add a keyword followed by the issue number (e.g., Fixes #123) in the description of your pull request. For more details on supported keywords and how linking works, please refer to the GitHub Documentation on linking pull requests to issues.

Thank you for your understanding and for being a part of our community!

[gemini-code-assist]

Summary of Changes

Hello @keithguerin, 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 focuses on enhancing the user interface by introducing an animated progress indicator and refining the color scheme of the application's footer for a more subdued appearance. Additionally, it includes a significant refactoring of the loading state management, ensuring that UI elements related to loading and streaming are displayed more consistently and intuitively.

Highlights

• Animated Progress Indicator: The GeminiRespondingSpinner now features a dynamic color-cycling animation, transitioning through Google brand colors to provide a more engaging visual cue during active streaming.
• Subdued Footer Colors: The colors for the current working directory, branch name, and model information in the footer have been updated to be more subdued, using theme.text.primary instead of more prominent colors or gradients, for a cleaner aesthetic.
• Refactored Loading State Logic: The logic for determining and displaying loading states has been refactored, introducing an isActivelyStreaming variable to centralize checks and improve clarity across Composer.tsx and LoadingIndicator.tsx.
• Dynamic Loading Indicator Display: The LoadingIndicator now dynamically adjusts its text color and italicization based on the streaming state, and the spinner is only rendered when the system is actively streaming or waiting, not when idle.

Changelog

• packages/cli/src/ui/components/Composer.tsx
  • Refactored loading state logic by introducing isActivelyStreaming to centralize the check for StreamingState.Responding.
  • Updated rendering conditions for UI components to use the new isActivelyStreaming variable.
• packages/cli/src/ui/components/ContextUsageDisplay.tsx
  • Removed unnecessary parentheses from the context usage display for a cleaner look.
• packages/cli/src/ui/components/Footer.tsx
  • Removed ThemedGradient import and usage, along with the nightly property, simplifying footer styling.
  • Updated the current working directory and branch name display to use theme.text.primary for a more subdued look.
  • Adjusted the model information display to use theme.text.primary and reordered the '/model' prefix for better readability.
• packages/cli/src/ui/components/GeminiRespondingSpinner.tsx
  • Implemented a color-cycling animation for the GeminiSpinner using useState, useEffect, and tinygradient.
  • The spinner now transitions through Google brand colors over a 4-second duration.
  • Added necessary imports for animation logic (useState, useEffect, useMemo, Colors, tinygradient).
• packages/cli/src/ui/components/LoadingIndicator.tsx
  • Modified the LoadingIndicator to dynamically adjust text color and italicization based on the streaming state.
  • Ensured the GeminiRespondingSpinner and cancel/timer content are only displayed when the system is actively streaming or waiting, not when idle.
  • Refactored the initial rendering logic to allow the component to render even when idle, but without active indicators.
• packages/cli/src/ui/contexts/UIStateContext.tsx
  • Updated the currentLoadingPhrase type in UIState to string | undefined to reflect its optional nature.
• packages/cli/src/ui/hooks/usePhraseCycler.ts
  • Modified usePhraseCycler to set currentLoadingPhrase to undefined when the cycler is not active, aligning with the UIStateContext type change.

Activity

• No specific activity (comments, reviews, progress updates) has been recorded for this pull request yet.

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 updates the UI by subduing footer colors and adding a pleasant animation to the progress indicator, which improves the overall user experience. The code changes are generally clean and well-implemented. However, I've identified a potential logic regression in the condition for showing the 'esc to cancel' hint, which was likely introduced during refactoring. My review includes a suggestion to fix this.

[gemini-code-assist]

The refactoring of the condition for showEscToCancelHint seems to have introduced a logic change that might be a regression. Previously, the visibility of the hint was tied to showLoadingIndicator, which included the condition (!uiState.embeddedShellFocused || uiState.isBackgroundShellVisible). The new logic uses !uiState.embeddedShellFocused, which is more restrictive. This means the 'esc to cancel' hint will no longer appear when an embedded shell is focused, even if a background shell is visible, which might not be the intended behavior. To restore the original logic, the condition should also check for uiState.isBackgroundShellVisible.

Suggested change

	isActivelyStreaming &&
	!uiState.embeddedShellFocused &&
	!hasPendingActionRequired &&
	uiState.streamingState !== StreamingState.WaitingForConfirmation;
	isActivelyStreaming &&
	(!uiState.embeddedShellFocused || uiState.isBackgroundShellVisible) &&
	!hasPendingActionRequired &&
	uiState.streamingState !== StreamingState.WaitingForConfirmation;

References

1. The Esc-Esc shortcut should clear the input buffer, including when it contains only whitespace. UI hints for this action should be consistent with this behavior.
2. Maintain consistency with existing UI behavior across components. Defer non-standard UX pattern improvements to be addressed holistically rather than in a single component.

[gemini-cli]

Thank you for linking an issue! This pull request has been automatically reopened.

[github-actions]

Size Change: +883 B (0%)

Total Size: 23.9 MB

ℹ️ View Unchanged

Filename	Size	Change
./bundle/gemini.js	23.9 MB	+883 B (0%)
./bundle/sandbox-macos-permissive-closed.sb	1.03 kB	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-closed.sb	3.29 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

_{compressed-size-action}

[jacob314]