Replace logo with custom ASCII (#958)

packages/cli/src/ui/App.tsx

@@ -324,7 +324,7 @@ const App = ({ config, settings, startupWarnings = [] }: AppProps) => {
     refreshStatic();
   }, [clearItems, clearConsoleMessagesState, refreshStatic]);
 
-  const { rows: terminalHeight } = useTerminalSize();
+  const { rows: terminalHeight, columns: terminalWidth } = useTerminalSize(); // Get terminalWidth
   const mainControlsRef = useRef<DOMElement>(null);
   const pendingHistoryItemRef = useRef<DOMElement>(null);
 
@@ -407,7 +407,7 @@ const App = ({ config, settings, startupWarnings = [] }: AppProps) => {
           key={staticKey}
           items={[
             <Box flexDirection="column" key="header">
-              <Header title={process.env.GEMINI_CLI_TITLE} />
+              <Header terminalWidth={terminalWidth} />
               <Tips config={config} />
             </Box>,
             ...history.map((h) => (

packages/cli/src/ui/components/AsciiArt.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const shortAsciiLogo = `
+   █████████  ██████████ ██████   ██████ █████ ██████   █████ █████
+  ███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███
+ ███     ░░░  ░███  █ ░  ░███░█████░███  ░███  ░███░███ ░███  ░███
+░███          ░██████    ░███░░███ ░███  ░███  ░███░░███░███  ░███
+░███    █████ ░███░░█    ░███ ░░░  ░███  ░███  ░███ ░░██████  ░███
+░░███  ░░███  ░███ ░   █ ░███      ░███  ░███  ░███  ░░█████  ░███
+ ░░█████████  ██████████ █████     █████ █████ █████  ░░█████ █████
+  ░░░░░░░░░  ░░░░░░░░░░ ░░░░░     ░░░░░ ░░░░░ ░░░░░    ░░░░░ ░░░░░
+`;
+
+export const longAsciiLogo = `
+ ███            █████████  ██████████ ██████   ██████ █████ ██████   █████ █████
+░░░███         ███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███
+  ░░░███      ███     ░░░  ░███  █ ░  ░███░█████░███  ░███  ░███░███ ░███  ░███
+    ░░░███   ░███          ░██████    ░███░░███ ░███  ░███  ░███░░███░███  ░███
+     ███░    ░███    █████ ░███░░█    ░███ ░░░  ░███  ░███  ░███ ░░██████  ░███
+   ███░      ░░███  ░░███  ░███ ░   █ ░███      ░███  ░███  ░███  ░░█████  ░███
+ ███░         ░░█████████  ██████████ █████     █████ █████ █████  ░░█████ █████
+░░░            ░░░░░░░░░  ░░░░░░░░░░ ░░░░░     ░░░░░ ░░░░░ ░░░░░    ░░░░░ ░░░░░
+`;

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

@@ -8,30 +8,39 @@ import React from 'react';
 import { Box, Text } from 'ink';
 import Gradient from 'ink-gradient';
 import { Colors } from '../colors.js';
-
-const asciiArtLogo = `
- ██████╗ ███████╗███╗   ███╗██╗███╗   ██╗██╗
-██╔════╝ ██╔════╝████╗ ████║██║████╗  ██║██║
-██║  ███╗█████╗  ██╔████╔██║██║██╔██╗ ██║██║
-██║   ██║██╔══╝  ██║╚██╔╝██║██║██║╚██╗██║██║
-╚██████╔╝███████╗██║ ╚═╝ ██║██║██║ ╚████║██║
- ╚═════╝ ╚══════╝╚═╝     ╚═╝╚═╝╚═╝  ╚═══╝╚═╝
-`;
+import { shortAsciiLogo, longAsciiLogo } from './AsciiArt.js';
+import { getAsciiArtWidth } from '../utils/textUtils.js';
 
 interface HeaderProps {
-  title?: string;
+  customAsciiArt?: string; // For user-defined ASCII art
+  terminalWidth: number; // For responsive logo
 }
 
-export const Header: React.FC<HeaderProps> = ({ title = asciiArtLogo }) => (
+export const Header: React.FC<HeaderProps> = ({
+  customAsciiArt,
+  terminalWidth,
+}) => {
+  let displayTitle;
+  const widthOfLongLogo = getAsciiArtWidth(longAsciiLogo);
+
+  if (customAsciiArt) {
+    displayTitle = customAsciiArt;
+  } else {
+    displayTitle =
+      terminalWidth >= widthOfLongLogo ? longAsciiLogo : shortAsciiLogo;
+  }
+
+  return (
     <>
       <Box marginBottom={1} alignItems="flex-start">
         {Colors.GradientColors ? (
           <Gradient colors={Colors.GradientColors}>
-          <Text>{title}</Text>
+            <Text>{displayTitle}</Text>
           </Gradient>
         ) : (
-        <Text>{title}</Text>
+          <Text>{displayTitle}</Text>
         )}
       </Box>
     </>
   );
+};

packages/cli/src/ui/utils/textUtils.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Calculates the maximum width of a multi-line ASCII art string.
+ * @param asciiArt The ASCII art string.
+ * @returns The length of the longest line in the ASCII art.
+ */
+export const getAsciiArtWidth = (asciiArt: string): number => {
+  if (!asciiArt) {
+    return 0;
+  }
+  const lines = asciiArt.split('\n');
+  return Math.max(...lines.map((line) => line.length));
+};