fix(plan): persist the approval mode in UI even when agent is thinking

[Adib234]

Summary

This PR ensures that a critical UI element the Approval Mode indicator remains visible while the model is responding (streaming). Previously, Approval Mode Indicator was hidden.

Details

Related Issues

Fixes #18758

How to Validate

Screen.Recording.2026-02-12.at.4.13.10.PM.mov

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-cli]

Hi @Adib234, 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-code-assist]

Summary of Changes

Hello @Adib234, 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 resolves a user experience issue where the Approval Mode indicator would become hidden while the system was streaming a response. By refactoring the rendering logic of key UI components, the Approval Mode indicator is now persistently displayed, ensuring continuous visibility of the current operational mode and improving overall clarity for the user.

Highlights

• UI Persistence: The Approval Mode indicator now remains visible in the UI even when the agent is actively thinking or streaming a response, addressing a previous issue where it would disappear.
• Component Relocation: The LoadingIndicator component's position within the Composer UI has been adjusted for better layout management.
• Test Coverage: A new test case was added to validate the simultaneous rendering of both the LoadingIndicator and ApprovalModeIndicator during streaming in full UI mode.

Changelog

• packages/cli/src/ui/components/Composer.test.tsx
  • Added a new test case to ensure LoadingIndicator and ApprovalModeIndicator are both visible when the UI is streaming and in full UI mode.
• packages/cli/src/ui/components/Composer.tsx
  • Relocated the LoadingIndicator component within the Composer to a new position.
  • Adjusted the conditional rendering logic for ApprovalModeIndicator to ensure it is always displayed when active, even when the LoadingIndicator is present.
  • Modified the rendering of ShellModeIndicator and RawMarkdownIndicator to be conditional on !showLoadingIndicator within a Fragment.

Activity

• The pull request is currently marked as Work In Progress (WIP), indicating ongoing development.
• No other specific review comments or activities have been recorded 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 aims to ensure the ApprovalModeIndicator remains visible in the UI while the agent is processing a request. The changes correctly adjust the conditional rendering logic in the Composer component to achieve this. A new test case has been added to validate this fix. The changes also include a minor refactoring of the LoadingIndicator's position. Overall, the implementation is sound and effectively addresses the stated issue.

[github-actions]

Size Change: +162 B (0%)

Total Size: 24.4 MB

ℹ️ View Unchanged

Filename	Size	Change
./bundle/gemini.js	24.4 MB	+162 B (0%)
./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

_{compressed-size-action}

[jacob314]

Thanks for this PR! The title and description look great and it addresses the issue well. I noticed a couple of UI layout and consistency points during review:

1. Layout Shift with ShortcutsHint: At the top of the composer area (around line 185), the LoadingIndicator used to be nested in a <Box flexGrow={1}>. Since this box shared a parent with justifyContent="space-between", removing it means the parent now only has one child (the ShortcutsHint container). This will cause the ShortcutsHint to unexpectedly jump to the left side of the screen when the loading indicator is active. You might want to keep an empty <Box flexGrow={1} /> or adjust the styles on the ShortcutsHint container so it stays right-aligned.

2. Inconsistent Indicator Hiding: While the ApprovalModeIndicator is now preserved when the agent is thinking, the ShellModeIndicator and RawMarkdownIndicator are still wrapped inside !showLoadingIndicator. Thus, these indicators will continue to disappear when the agent is thinking. Was this intentional? It might be confusing if some mode indicators disappear while others remain visible.

Let me know what you think about these points!

[jacob314]

This is regressing the UI moving the ? for shortcuts UX to the LHS from the RHS
Please fix and ensure we have snapshot tests for Composer to avoid future regressions of that.

please fix that as well as reviewing the two plausible pieces of feedback from review-frontend.

[Adib234]

Screen.Recording.2026-02-13.at.2.44.06.PM.mov

Layout Shift with ShortcutsHint: At the top of the composer area (around line 185), the LoadingIndicator used to be nested in a . Since this box shared a parent with justifyContent="space-between", removing it means the parent now only has one child (the ShortcutsHint container). This will cause the ShortcutsHint to unexpectedly jump to the left side of the screen when the loading indicator is active. You might want to keep an empty or adjust the styles on the ShortcutsHint container so it stays right-aligned.

Addressed this by restoring the nested <Box flexGrow={1}/>, previous regression of ? moving to LHS has been fixed

Inconsistent Indicator Hiding: While the ApprovalModeIndicator is now preserved when the agent is thinking, the ShellModeIndicator and RawMarkdownIndicator are still wrapped inside !showLoadingIndicator. Thus, these indicators will continue to disappear when the agent is thinking. Was this intentional? It might be confusing if some mode indicators disappear while others remain visible.

Feedback from UX in the bug bash was this should be the only indicator that's preserved while the agent is thinking, I excluded the other indicators because this wasn't mentioned in the issue

[jacob314]

why did this change to flex-start from center?

[Adib234]

I thought this would help with if the screen size was narrow

[jacob314]

LGTM! The changes correctly fulfill the requirement to persist the ApprovalModeIndicator during streaming while maintaining the expected layout behavior. By restoring the nested <Box flexGrow={1}> for the LoadingIndicator, you've neatly resolved the previously observed layout shift with the ShortcutsHint. Permitting the ShortcutsHint to remain visible while the agent loads provides a more stable layout and prevents visual flickering, which is a nice improvement. The new test coverage and snapshot updates look solid.