fix(ui): ensure model changes update the UI immediately

[abhipatel12]

Summary

This PR fixes a bug where changing the model via the /model slash command did not immediately update the UI (specifically the footer status bar).

Details

The Config object is a plain TypeScript class and its state changes are not automatically reactive in the React UI. Previously, the UI only updated when other actions triggered a re-render.

Changes included in this PR:

• Introduced a new CoreEvent.ModelChanged event in CoreEventEmitter.
• Updated Config.setModel() to emit this event whenever the model actually changes.
• Updated AppContainer to subscribe to this event and sync the currentModel React state, ensuring immediate UI updates.
• Added unit tests for the new event and integration tests for the AppContainer subscription.

How to Validate

1. Start the CLI: npm run start
2. Observe the current model displayed in the footer (bottom right).
3. Run the /model command and select a different model.
4. Verify that the footer immediately updates to reflect the newly selected model.

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

[gemini-code-assist]

Summary of Changes

Hello @abhipatel12, 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 interface bug where changes to the application's model, specifically when using the /model slash command, were not immediately reflected in the UI, such as the footer status bar. The core issue stemmed from the Config object's state not being inherently reactive within the React framework. To fix this, an event-driven approach was implemented: a new ModelChanged event is now emitted whenever the model is updated, and the main AppContainer component listens for this event to promptly synchronize and re-render the UI with the correct model information.

Highlights

• Event-Driven UI Updates: Introduced a new CoreEvent.ModelChanged event to enable immediate UI updates when the model changes.
• Config Reactivity: Modified Config.setModel() to emit the ModelChanged event, addressing the non-reactive nature of the Config object.
• UI Synchronization: AppContainer now subscribes to CoreEvent.ModelChanged to instantly update the currentModel React state, ensuring the UI reflects the latest model.
• Testing: Added comprehensive unit tests for the new event emission and the AppContainer's subscription to it.

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 addresses the UI reactivity bug by introducing a CoreEvent.ModelChanged event. The implementation is clean, adding the event in the core package and subscribing to it in the UI container. The added unit tests are valuable. However, the new integration test in AppContainer.test.tsx contains a redundant rerender call that could mask potential bugs and should be removed to improve the test's reliability.

[github-actions]

Size Change: +611 B (0%)

Total Size: 20.3 MB

ℹ️ View Unchanged

Filename	Size	Change
./bundle/gemini.js	20.3 MB	+611 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]

[abhipatel12]

/patch preview

[github-actions]

✅ Patch workflow(s) dispatched successfully!

📋 Details:

• Channels: preview
• Commit: 265f24e5d7d382c8b44674849935626343c9e267
• Workflows Created: 1

🔗 Track Progress:

• View patch workflows
• This workflow run

[github-actions]

🚀 Patch PR Created!

📋 Patch Details:

• Channel: preview → will publish to npm tag preview
• Commit: 265f24e5d7d382c8b44674849935626343c9e267
• Hotfix Branch: hotfix/v0.12.0-preview.9/0.12.0-preview.10/preview/cherry-pick-265f24e/pr-12412
• Hotfix PR: #12498
• ⚠️ Status: Cherry-pick conflicts detected - manual resolution required

📝 Next Steps:

1. ⚠️ Resolve conflicts in the hotfix PR first: #12498
2. Test your changes after resolving conflicts
3. Once merged, the patch release will automatically trigger
4. You'll receive updates here when the release completes

🔗 Track Progress:

• View hotfix PR #12498