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

packages/cli/src/ui/AppContainer.test.tsx

@@ -1501,5 +1501,41 @@ describe('AppContainer State Management', () => {
       );
       unmount();
     });
+
+    it('updates currentModel when ModelChanged event is received', async () => {
+      // Arrange: Mock initial model
+      vi.spyOn(mockConfig, 'getModel').mockReturnValue('initial-model');
+
+      const { unmount } = render(
+        <AppContainer
+          config={mockConfig}
+          settings={mockSettings}
+          version="1.0.0"
+          initializationResult={mockInitResult}
+        />,
+      );
+
+      // Verify initial model
+      await act(async () => {
+        await vi.waitFor(() => {
+          expect(capturedUIState?.currentModel).toBe('initial-model');
+        });
+      });
+
+      // Get the registered handler for ModelChanged
+      const handler = mockCoreEvents.on.mock.calls.find(
+        (call: unknown[]) => call[0] === CoreEvent.ModelChanged,
+      )?.[1];
+      expect(handler).toBeDefined();
+
+      // Act: Simulate ModelChanged event
+      act(() => {
+        handler({ model: 'new-model' });
+      });
+
+      // Assert: Verify model is updated
+      expect(capturedUIState.currentModel).toBe('new-model');
+      unmount();
+    });
   });
 });

packages/cli/src/ui/AppContainer.tsx

@@ -48,6 +48,7 @@ import {
   debugLogger,
   coreEvents,
   CoreEvent,
+  type ModelChangedPayload,
 } from '@google/gemini-cli-core';
 import { validateAuthMethod } from '../config/auth.js';
 import { loadHierarchicalGeminiMemory } from '../config/config.js';
@@ -258,16 +259,22 @@ export const AppContainer = (props: AppContainerProps) => {
     [historyManager.addItem],
   );
 
-  // Subscribe to fallback mode changes from core
+  // Subscribe to fallback mode and model changes from core
   useEffect(() => {
     const handleFallbackModeChanged = () => {
       const effectiveModel = getEffectiveModel();
       setCurrentModel(effectiveModel);
     };
 
+    const handleModelChanged = (payload: ModelChangedPayload) => {
+      setCurrentModel(payload.model);
+    };
+
     coreEvents.on(CoreEvent.FallbackModeChanged, handleFallbackModeChanged);
+    coreEvents.on(CoreEvent.ModelChanged, handleModelChanged);
     return () => {
       coreEvents.off(CoreEvent.FallbackModeChanged, handleFallbackModeChanged);
+      coreEvents.off(CoreEvent.ModelChanged, handleModelChanged);
     };
   }, [getEffectiveModel]);