feat(cli): Allow custom title in CLI header (#706)

4 files changed, 57 insertions, 4 deletions

diff --git a/packages/cli/src/config/settings.ts b/packages/cli/src/config/settings.ts
index 6c14a6dc..af2e4a2f 100644
--- a/packages/cli/src/config/settings.ts
+++ b/packages/cli/src/config/settings.ts
@@ -31,6 +31,7 @@ export interface Settings {
   mcpServers?: Record<string, MCPServerConfig>;
   showMemoryUsage?: boolean;
   contextFileName?: string;
+  title?: string;
   // Add other settings here.
 }
 
diff --git a/packages/cli/src/ui/App.tsx b/packages/cli/src/ui/App.tsx
index 7e0e19dd..9ebefaa9 100644
--- a/packages/cli/src/ui/App.tsx
+++ b/packages/cli/src/ui/App.tsx
@@ -322,7 +322,7 @@ export const App = ({
           key={staticKey}
           items={[
             <Box flexDirection="column" key="header">
-              <Header />
+              <Header title={settings.merged.title} />
               <Tips config={config} />
             </Box>,
             ...history.map((h) => (
diff --git a/packages/cli/src/ui/components/Header.test.tsx b/packages/cli/src/ui/components/Header.test.tsx
new file mode 100644
index 00000000..0c03e514
--- /dev/null
+++ b/packages/cli/src/ui/components/Header.test.tsx
@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import { Header } from './Header.js';
+import { vi } from 'vitest';
+
+// Mock ink-gradient and ink-big-text as they might have complex rendering
+vi.mock('ink-gradient', () => ({
+  default: vi.fn(({ children }) => children), // Pass through children
+}));
+
+import { Text } from 'ink'; // Import the actual Text component from Ink
+
+vi.mock('ink-big-text', () => ({
+  default: vi.fn(({ text }) => <Text>{text}</Text>), // Use Ink's Text component
+}));
+
+describe('<Header />', () => {
+  it('should render with the default title "GEMINI" when no title prop is provided', () => {
+    const { lastFrame } = render(<Header />);
+    const output = lastFrame();
+    // Check if the output contains the default text "GEMINI"
+    // The actual output will be simple text due to mocking
+    expect(output).toContain('GEMINI');
+  });
+
+  it('should render with a custom title when the title prop is provided', () => {
+    const customTitle = 'My Custom CLI';
+    const { lastFrame } = render(<Header title={customTitle} />);
+    const output = lastFrame();
+    // Check if the output contains the custom title
+    expect(output).toContain(customTitle);
+  });
+
+  it('should render with an empty title if an empty string is provided', () => {
+    const customTitle = '';
+    const { lastFrame } = render(<Header title={customTitle} />);
+    const output = lastFrame();
+    // Depending on how BigText handles empty strings,
+    // it might render nothing or a specific representation.
+    // For this test, we'll assume it renders the empty string.
+    expect(output).toContain(''); // or check for a specific structure if BigText behaves differently
+  });
+});
diff --git a/packages/cli/src/ui/components/Header.tsx b/packages/cli/src/ui/components/Header.tsx
index e95efc59..2b971395 100644
--- a/packages/cli/src/ui/components/Header.tsx
+++ b/packages/cli/src/ui/components/Header.tsx
@@ -10,15 +10,19 @@ import Gradient from 'ink-gradient';
 import BigText from 'ink-big-text';
 import { Colors } from '../colors.js';
 
-export const Header: React.FC = () => (
+interface HeaderProps {
+  title?: string;
+}
+
+export const Header: React.FC<HeaderProps> = ({ title = 'GEMINI' }) => (
   <>
     <Box alignItems="flex-start">
       {Colors.GradientColors ? (
         <Gradient colors={Colors.GradientColors}>
-          <BigText text="GEMINI" letterSpacing={0} space={false} />
+          <BigText text={title} letterSpacing={0} space={false} />
         </Gradient>
       ) : (
-        <BigText text="GEMINI" letterSpacing={0} space={false} />
+        <BigText text={title} letterSpacing={0} space={false} />
       )}
     </Box>
   </>