feat: redesign header to be compact with ASCII icon

packages/cli/src/test-utils/render.tsx

@@ -528,12 +528,13 @@ export const mockSettings = new LoadedSettings(
 // A minimal mock UIState to satisfy the context provider.
 // Tests that need specific UIState values should provide their own.
 const baseMockUiState = {
+  history: [],
   renderMarkdown: true,
   streamingState: StreamingState.Idle,
   terminalWidth: 100,
   terminalHeight: 40,
   currentModel: 'gemini-pro',
-  terminalBackgroundColor: 'black',
+  terminalBackgroundColor: 'black' as const,
   cleanUiDetailsVisible: false,
   allowPlanMode: true,
   activePtyId: undefined,
@@ -552,6 +553,9 @@ const baseMockUiState = {
     warningText: '',
   },
   bannerVisible: false,
+  nightly: false,
+  updateInfo: null,
+  pendingHistoryItems: [],
 };
 
 export const mockAppState: AppState = {

packages/cli/src/ui/__snapshots__/App.test.tsx.snap

@@ -2,20 +2,20 @@
 
 exports[`App > Snapshots > renders default layout correctly 1`] = `
 "
- ███         █████████ 
-░░░███      ███░░░░░███
-  ░░░███   ███     ░░░ 
-    ░░░███░███         
-     ███░ ░███    █████
-   ███░   ░░███  ░░███ 
- ███░      ░░█████████ 
-░░░         ░░░░░░░░░  
+  ▝▜▄     Gemini CLI v1.2.3
+    ▝▜▄
+   ▗▟▀ 
+  ▝▀    
+
 
 Tips for getting started:
-1. Ask questions, edit files, or run commands.
-2. Be specific for the best results.
-3. Create GEMINI.md files to customize your interactions with Gemini.
-4. /help for more information.
+1. Create GEMINI.md files to customize your interactions
+2. /help for more information
+3. Ask coding questions, edit code or run commands
+4. Be specific for the best results
+
+
+
 
 
 
@@ -47,34 +47,31 @@ exports[`App > Snapshots > renders screen reader layout correctly 1`] = `
 "Notifications
 Footer
 
- ███         █████████ 
-░░░███      ███░░░░░███
-  ░░░███   ███     ░░░ 
-    ░░░███░███         
-     ███░ ░███    █████
-   ███░   ░░███  ░░███ 
- ███░      ░░█████████ 
-░░░         ░░░░░░░░░  
+  ▝▜▄     Gemini CLI v1.2.3
+    ▝▜▄
+   ▗▟▀ 
+  ▝▀    
+
 
 Tips for getting started:
-1. Ask questions, edit files, or run commands.
-2. Be specific for the best results.
-3. Create GEMINI.md files to customize your interactions with Gemini.
-4. /help for more information.
+1. Create GEMINI.md files to customize your interactions
+2. /help for more information
+3. Ask coding questions, edit code or run commands
+4. Be specific for the best results
 Composer
 "
 `;
 
 exports[`App > Snapshots > renders with dialogs visible 1`] = `
 "
- ███         █████████ 
-░░░███      ███░░░░░███
-  ░░░███   ███     ░░░ 
-    ░░░███░███         
-     ███░ ░███    █████
-   ███░   ░░███  ░░███ 
- ███░      ░░█████████ 
-░░░         ░░░░░░░░░  
+  ▝▜▄     Gemini CLI v1.2.3
+    ▝▜▄
+   ▗▟▀ 
+  ▝▀    
+
+
+
+
 
 
 
@@ -110,20 +107,17 @@ DialogManager
 
 exports[`App > should render ToolConfirmationQueue along with Composer when tool is confirming and experiment is on 1`] = `
 "
- ███         █████████ 
-░░░███      ███░░░░░███
-  ░░░███   ███     ░░░ 
-    ░░░███░███         
-     ███░ ░███    █████
-   ███░   ░░███  ░░███ 
- ███░      ░░█████████ 
-░░░         ░░░░░░░░░  
+  ▝▜▄     Gemini CLI v1.2.3
+    ▝▜▄
+   ▗▟▀ 
+  ▝▀    
+
 
 Tips for getting started:
-1. Ask questions, edit files, or run commands.
-2. Be specific for the best results.
-3. Create GEMINI.md files to customize your interactions with Gemini.
-4. /help for more information.
+1. Create GEMINI.md files to customize your interactions
+2. /help for more information
+3. Ask coding questions, edit code or run commands
+4. Be specific for the best results
 HistoryItemDisplay
 ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
 │ Action Required                                                                                  │
@@ -146,6 +140,9 @@ HistoryItemDisplay
 
 
 
+
+
+
 Notifications
 Composer
 "

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

@@ -213,13 +213,20 @@ describe('<AppHeader />', () => {
 
   it('should NOT render Tips when tipsShown is 10 or more', async () => {
     const mockConfig = makeFakeConfig();
+    const uiState = {
+      bannerData: {
+        defaultText: '',
+        warningText: '',
+      },
+    };
 
     persistentStateMock.setData({ tipsShown: 10 });
 
     const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
       <AppHeader version="1.0.0" />,
       {
         config: mockConfig,
+        uiState,
       },
     );
     await waitUntilReady();

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

@@ -1,58 +1,113 @@
 /**
  * @license
- * Copyright 2025 Google LLC
+ * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Box } from 'ink';
-import { Header } from './Header.js';
-import { Tips } from './Tips.js';
+import { Box, Text } from 'ink';
 import { UserIdentity } from './UserIdentity.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 { Banner } from './Banner.js';
 import { useBanner } from '../hooks/useBanner.js';
 import { useTips } from '../hooks/useTips.js';
+import { theme } from '../semantic-colors.js';
+import { ThemedGradient } from './ThemedGradient.js';
+import { CliSpinner } from './CliSpinner.js';
 
 interface AppHeaderProps {
   version: string;
   showDetails?: boolean;
 }
 
+const ICON = `▝▜▄  
+  ▝▜▄
+ ▗▟▀ 
+▝▀    `;
+
 export const AppHeader = ({ version, showDetails = true }: AppHeaderProps) => {
   const settings = useSettings();
   const config = useConfig();
-  const { nightly, terminalWidth, bannerData, bannerVisible } = useUIState();
+  const { terminalWidth, bannerData, bannerVisible, updateInfo } = useUIState();
 
   const { bannerText } = useBanner(bannerData);
   const { showTips } = useTips();
 
+  const showHeader = !(
+    settings.merged.ui.hideBanner || config.getScreenReader()
+  );
+
   if (!showDetails) {
     return (
       <Box flexDirection="column">
-        <Header version={version} nightly={false} />
+        {showHeader && (
+          <Box
+            flexDirection="row"
+            marginTop={1}
+            marginBottom={1}
+            paddingLeft={2}
+          >
+            <Box flexShrink={0}>
+              <ThemedGradient>{ICON}</ThemedGradient>
+            </Box>
+            <Box marginLeft={2} flexDirection="column">
+              <Box>
+                <Text bold color={theme.text.primary}>
+                  Gemini CLI
+                </Text>
+                <Text color={theme.text.secondary}> v{version}</Text>
+              </Box>
+            </Box>
+          </Box>
+        )}
       </Box>
     );
   }
 
   return (
     <Box flexDirection="column">
-      {!(settings.merged.ui.hideBanner || config.getScreenReader()) && (
-        <>
-          <Header version={version} nightly={nightly} />
-          {bannerVisible && bannerText && (
-            <Banner
-              width={terminalWidth}
-              bannerText={bannerText}
-              isWarning={bannerData.warningText !== ''}
-            />
-          )}
-        </>
+      {showHeader && (
+        <Box flexDirection="row" marginTop={1} marginBottom={1} paddingLeft={2}>
+          <Box flexShrink={0}>
+            <ThemedGradient>{ICON}</ThemedGradient>
+          </Box>
+          <Box marginLeft={2} flexDirection="column">
+            {/* Line 1: Gemini CLI vVersion [Updating] */}
+            <Box>
+              <Text bold color={theme.text.primary}>
+                Gemini CLI
+              </Text>
+              <Text color={theme.text.secondary}> v{version}</Text>
+              {updateInfo && (
+                <Box marginLeft={2}>
+                  <Text color={theme.text.secondary}>
+                    <CliSpinner /> Updating
+                  </Text>
+                </Box>
+              )}
+            </Box>
+
+            {/* Line 2: Blank */}
+            <Box height={1} />
+
+            {/* Lines 3 & 4: User Identity info (Email /auth and Plan /upgrade) */}
+            {settings.merged.ui.showUserIdentity !== false && (
+              <UserIdentity config={config} />
+            )}
+          </Box>
+        </Box>
       )}
-      {settings.merged.ui.showUserIdentity !== false && (
-        <UserIdentity config={config} />
+
+      {bannerVisible && bannerText && (
+        <Banner
+          width={terminalWidth}
+          bannerText={bannerText}
+          isWarning={bannerData.warningText !== ''}
+        />
       )}
+
       {!(settings.merged.ui.hideTips || config.getScreenReader()) &&
         showTips && <Tips config={config} />}
     </Box>

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2025 Google LLC
+ * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 
@@ -11,22 +11,18 @@ import type { Config } from '@google/gemini-cli-core';
 
 describe('Tips', () => {
   it.each([
-    [0, '3. Create GEMINI.md files'],
-    [5, '3. /help for more information'],
-  ])(
-    'renders correct tips when file count is %i',
-    async (count, expectedText) => {
-      const config = {
-        getGeminiMdFileCount: vi.fn().mockReturnValue(count),
-      } as unknown as Config;
+    { fileCount: 0, description: 'renders all tips including GEMINI.md tip' },
+    { fileCount: 5, description: 'renders fewer tips when GEMINI.md exists' },
+  ])('$description', async ({ fileCount }) => {
+    const config = {
+      getGeminiMdFileCount: vi.fn().mockReturnValue(fileCount),
+    } as unknown as Config;
 
-      const { lastFrame, waitUntilReady, unmount } = render(
-        <Tips config={config} />,
-      );
-      await waitUntilReady();
-      const output = lastFrame();
-      expect(output).toContain(expectedText);
-      unmount();
-    },
-  );
+    const { lastFrame, waitUntilReady, unmount } = render(
+      <Tips config={config} />,
+    );
+    await waitUntilReady();
+    expect(lastFrame()).toMatchSnapshot();
+    unmount();
+  });
 });

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2025 Google LLC
+ * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 
@@ -15,30 +15,26 @@ interface TipsProps {
 
 export const Tips: React.FC<TipsProps> = ({ config }) => {
   const geminiMdFileCount = config.getGeminiMdFileCount();
+
   return (
-    <Box flexDirection="column">
+    <Box flexDirection="column" marginTop={1}>
       <Text color={theme.text.primary}>Tips for getting started:</Text>
-      <Text color={theme.text.primary}>
-        1. Ask questions, edit files, or run commands.
-      </Text>
-      <Text color={theme.text.primary}>
-        2. Be specific for the best results.
-      </Text>
       {geminiMdFileCount === 0 && (
         <Text color={theme.text.primary}>
-          3. Create{' '}
-          <Text bold color={theme.text.accent}>
-            GEMINI.md
-          </Text>{' '}
-          files to customize your interactions with Gemini.
+          1. Create <Text bold>GEMINI.md</Text> files to customize your
+          interactions
         </Text>
       )}
       <Text color={theme.text.primary}>
-        {geminiMdFileCount === 0 ? '4.' : '3.'}{' '}
-        <Text bold color={theme.text.accent}>
-          /help
-        </Text>{' '}
-        for more information.
+        {geminiMdFileCount === 0 ? '2.' : '1.'}{' '}
+        <Text color={theme.text.secondary}>/help</Text> for more information
+      </Text>
+      <Text color={theme.text.primary}>
+        {geminiMdFileCount === 0 ? '3.' : '2.'} Ask coding questions, edit code
+        or run commands
+      </Text>
+      <Text color={theme.text.primary}>
+        {geminiMdFileCount === 0 ? '4.' : '3.'} Be specific for the best results
       </Text>
     </Box>
   );