fix(ui): display model name instead of id in statusline and startup banner

packages/cli/src/ui/components/AppHeader.test.tsx

@@ -47,6 +47,7 @@ const createSettings = (options?: {
 const createMockConfig = (overrides = {}) => ({
   getContentGeneratorConfig: vi.fn(() => ({ authType: undefined })),
   getModel: vi.fn(() => 'gemini-pro'),
+  getModelDisplayName: vi.fn(() => 'Gemini Pro'),
   getTargetDir: vi.fn(() => '/projects/qwen-code'),
   getMcpServers: vi.fn(() => ({})),
   getBlockedMcpServers: vi.fn(() => []),
@@ -106,7 +107,7 @@ describe('<AppHeader />', () => {
   it('shows the header with all info when banner is visible', () => {
     const { lastFrame } = renderWithProviders(createMockUIState());
     expect(lastFrame()).toContain('>_ Qwen Code');
-    expect(lastFrame()).toContain('gemini-pro');
+    expect(lastFrame()).toContain('Gemini Pro');
     expect(lastFrame()).toContain('/projects/qwen-code');
   });
 

packages/cli/src/ui/components/AppHeader.tsx

@@ -15,7 +15,6 @@ import { Header, AuthDisplayType } from './Header.js';
 import { Tips } from './Tips.js';
 import { useSettings } from '../contexts/SettingsContext.js';
 import { useConfig } from '../contexts/ConfigContext.js';
-import { useUIState } from '../contexts/UIStateContext.js';
 import { resolveCustomBanner } from '../utils/customBanner.js';
 
 interface AppHeaderProps {
@@ -50,11 +49,9 @@ function getAuthDisplayType(
 export const AppHeader = ({ version }: AppHeaderProps) => {
   const settings = useSettings();
   const config = useConfig();
-  const uiState = useUIState();
-
   const contentGeneratorConfig = config.getContentGeneratorConfig();
   const authType = contentGeneratorConfig?.authType;
-  const model = uiState.currentModel;
+  const model = config.getModelDisplayName();
   const targetDir = config.getTargetDir();
   const showBanner =
     !config.getScreenReader() && !settings.merged.ui?.hideBanner;

packages/cli/src/ui/components/ModelDialog.tsx

@@ -290,6 +290,15 @@ export function ModelDialog({
                 [{t2}]
               </Text>
               <Text>{` ${model.label}`}</Text>
+              {model.id !== model.label && (
+                <Text color={theme.text.secondary} italic>
+                  {' '}
+                  ({model.id})
+                </Text>
+              )}
+                {' '}
+                ({model.id})
+              </Text>
               {isRuntime && (
                 <Text color={theme.status.warning}> (Runtime)</Text>
               )}

packages/cli/src/ui/components/StatusLineDialog.test.tsx

@@ -48,6 +48,7 @@ function createSettings(): LoadedSettings {
 const config = {
   getCliVersion: () => '1.2.3',
   getModel: () => 'qwen3-code-plus',
+  getModelDisplayName: () => 'Qwen3 Code Plus',
   getTargetDir: () => '/repo/project',
   getContentGeneratorConfig: () => ({
     contextWindowSize: 1000,
@@ -106,7 +107,7 @@ describe('StatusLineDialog', () => {
       frame.indexOf('current-dir'),
     );
     expect(lastFrame()).toContain('Preview');
-    expect(lastFrame()).toContain('qwen3-code-plus high');
+    expect(lastFrame()).toContain('Qwen3 Code Plus high');
   });
 
   it('persists selected presets on enter', async () => {
@@ -187,7 +188,7 @@ describe('StatusLineDialog', () => {
     await press(' ');
 
     expect(lastFrame()).toContain(
-      'qwen3-code-plus high | feature/pr-4087-statusline | Context 75% left',
+      'Qwen3 Code Plus high | feature/pr-4087-statusline | Context 75% left',
     );
 
     await press('\r');

packages/cli/src/ui/components/StatusLineDialog.tsx

@@ -100,7 +100,7 @@ function getPreviewData(config: Config, uiState: UIState) {
   return buildStatusLinePresetData({
     sessionId: stats.sessionId,
     version: config.getCliVersion(),
-    modelDisplayName: uiState.currentModel || config.getModel(),
+    modelDisplayName: config.getModelDisplayName(),
     reasoning: contentGeneratorConfig?.reasoning,
     currentDir: config.getTargetDir(),
     branch: uiState.branchName,

packages/cli/src/ui/hooks/useStatusLine.test.ts

@@ -68,6 +68,7 @@ const getMockContentGeneratorConfig = (): MockContentGeneratorConfig => ({
 const mockConfig = {
   getTargetDir: vi.fn(() => '/test/dir'),
   getModel: vi.fn(() => 'test-model'),
+  getModelDisplayName: vi.fn(() => 'Test Model'),
   getCliVersion: vi.fn(() => '1.0.0'),
   getContentGeneratorConfig: vi.fn(getMockContentGeneratorConfig),
 };
@@ -282,7 +283,7 @@ describe('useStatusLine', () => {
       const { result } = renderHook(() => useStatusLine());
 
       expect(result.current.useThemeColors).toBe(true);
-      expect(result.current.lines).toEqual(['test-model']);
+      expect(result.current.lines).toEqual(['Test Model']);
     });
 
     it('looks up the current branch pull request number with gh', async () => {
@@ -315,7 +316,7 @@ describe('useStatusLine', () => {
       const { result } = renderHook(() => useStatusLine());
 
       expect(child_process.exec).not.toHaveBeenCalled();
-      expect(result.current.lines).toEqual(['test-model']);
+      expect(result.current.lines).toEqual(['Test Model']);
     });
 
     it('renders model-with-reasoning and model-only together', () => {
@@ -330,7 +331,7 @@ describe('useStatusLine', () => {
       const { result } = renderHook(() => useStatusLine());
 
       expect(child_process.exec).not.toHaveBeenCalled();
-      expect(result.current.lines).toEqual(['test-model high | test-model']);
+      expect(result.current.lines).toEqual(['Test Model high | Test Model']);
     });
 
     it('refreshes when status line settings are saved in the same process', async () => {
@@ -342,7 +343,7 @@ describe('useStatusLine', () => {
       const { result, rerender } = renderHook(() => useStatusLine());
 
       expect(child_process.exec).not.toHaveBeenCalled();
-      expect(result.current.lines).toEqual(['test-model']);
+      expect(result.current.lines).toEqual(['Test Model']);
 
       setStatusLineConfig({
         type: 'preset',
@@ -365,7 +366,7 @@ describe('useStatusLine', () => {
         vi.advanceTimersByTime(300);
       });
 
-      expect(result.current.lines).toEqual(['test-model | #4118']);
+      expect(result.current.lines).toEqual(['Test Model | #4118']);
     });
 
     it('reloads status line settings from disk when streaming becomes idle', async () => {
@@ -375,7 +376,7 @@ describe('useStatusLine', () => {
       });
       const { result, rerender } = renderHook(() => useStatusLine());
 
-      expect(result.current.lines).toEqual(['test-model']);
+      expect(result.current.lines).toEqual(['Test Model']);
 
       mockSettings.reloadScopeFromDisk.mockImplementationOnce(() => {
         setStatusLineConfig({
@@ -397,7 +398,7 @@ describe('useStatusLine', () => {
       });
 
       expect(mockSettings.reloadScopeFromDisk).toHaveBeenCalledOnce();
-      expect(result.current.lines).toEqual(['test-model high']);
+      expect(result.current.lines).toEqual(['Test Model high']);
     });
 
     it('uses command settings when a stale preset override no longer matches the settings type', () => {
@@ -582,7 +583,7 @@ describe('useStatusLine', () => {
       const input = JSON.parse(stdinWrittenData);
       expect(input.session_id).toBe('test-session');
       expect(input.version).toBe('1.0.0');
-      expect(input.model.display_name).toBe('test-model');
+      expect(input.model.display_name).toBe('Test Model');
       expect(input.workspace.current_dir).toBe('/test/dir');
     });
 
@@ -687,7 +688,7 @@ describe('useStatusLine', () => {
       renderHook(() => useStatusLine());
 
       const input = JSON.parse(stdinWrittenData);
-      expect(input.model.display_name).toBe('test-model');
+      expect(input.model.display_name).toBe('Test Model');
     });
   });
 

packages/cli/src/ui/hooks/useStatusLine.ts

@@ -393,7 +393,7 @@ export function useStatusLine(): {
       const data = buildStatusLinePresetData({
         sessionId: stats.sessionId,
         version: cfg.getCliVersion(),
-        modelDisplayName: ui.currentModel || cfg.getModel(),
+        modelDisplayName: cfg.getModelDisplayName(),
         reasoning: contentGeneratorConfig?.reasoning,
         currentDir,
         branch: ui.branchName,
@@ -444,7 +444,7 @@ export function useStatusLine(): {
       session_id: stats.sessionId,
       version: cfg.getCliVersion() || 'unknown',
       model: {
-        display_name: ui.currentModel || cfg.getModel() || 'unknown',
+        display_name: cfg.getModelDisplayName(),
       },
       context_window: {
         context_window_size: contextWindowSize,

packages/core/src/config/config.ts

@@ -2199,6 +2199,16 @@ export class Config {
     );
   }
 
+  /**
+   * Get the human-readable display name for the currently selected model.
+   * Resolves the model id to its name from the model registry.
+   * Falls back to the raw model id when the model is not found.
+   */
+  getModelDisplayName(): string {
+    const modelId = this.getModel();
+    return modelId ? this.modelsConfig.getModelDisplayName(modelId) : 'unknown';
+  }
+
   onModelChange(listener: (model: string) => void): () => void {
     this.modelChangeListeners.add(listener);
     return () => {

packages/core/src/models/modelsConfig.ts

@@ -312,6 +312,18 @@ export class ModelsConfig {
     return this.modelRegistry.getModel(authType, modelId);
   }
 
+  /**
+   * Get the display name for a model by its id.
+   * Looks up the model in the registry using the current authType and returns
+   * its resolved name. Falls back to the raw model id when the model is not
+   * found in the registry (e.g. runtime models or unknown models).
+   */
+  getModelDisplayName(modelId: string): string {
+    if (!this.currentAuthType) return modelId;
+    const resolved = this.modelRegistry.getModel(this.currentAuthType, modelId);
+    return resolved?.name ?? modelId;
+  }
+
   /**
    * Set model programmatically (e.g., VLM auto-switch, fallback).
    * Supports both registry models and raw model IDs.