From f8a31f29aaeb31b2dfab4c18d750307308245a55 Mon Sep 17 00:00:00 2001
From: Miguel Solorio <miguelsolorio@google.com>
Date: Fri, 13 Jun 2025 00:59:45 -0700
Subject: [PATCH] Replace logo with custom ASCII (#958)

---
 packages/cli/src/ui/App.tsx                |  4 +-
 packages/cli/src/ui/components/AsciiArt.ts | 27 +++++++++++
 packages/cli/src/ui/components/Header.tsx  | 55 +++++++++++++---------
 packages/cli/src/ui/utils/textUtils.ts     | 18 +++++++
 4 files changed, 79 insertions(+), 25 deletions(-)
 create mode 100644 packages/cli/src/ui/components/AsciiArt.ts
 create mode 100644 packages/cli/src/ui/utils/textUtils.ts

diff --git a/packages/cli/src/ui/App.tsx b/packages/cli/src/ui/App.tsx
index 98a27716..2d37c42a 100644
--- a/packages/cli/src/ui/App.tsx
+++ b/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) => (
diff --git a/packages/cli/src/ui/components/AsciiArt.ts b/packages/cli/src/ui/components/AsciiArt.ts
new file mode 100644
index 00000000..e15704dd
--- /dev/null
+++ b/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 = `
+ ███            █████████  ██████████ ██████   ██████ █████ ██████   █████ █████
+░░░███         ███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███
+  ░░░███      ███     ░░░  ░███  █ ░  ░███░█████░███  ░███  ░███░███ ░███  ░███
+    ░░░███   ░███          ░██████    ░███░░███ ░███  ░███  ░███░░███░███  ░███
+     ███░    ░███    █████ ░███░░█    ░███ ░░░  ░███  ░███  ░███ ░░██████  ░███
+   ███░      ░░███  ░░███  ░███ ░   █ ░███      ░███  ░███  ░███  ░░█████  ░███
+ ███░         ░░█████████  ██████████ █████     █████ █████ █████  ░░█████ █████
+░░░            ░░░░░░░░░  ░░░░░░░░░░ ░░░░░     ░░░░░ ░░░░░ ░░░░░    ░░░░░ ░░░░░
+`;
diff --git a/packages/cli/src/ui/components/Header.tsx b/packages/cli/src/ui/components/Header.tsx
index 207673ff..4a632142 100644
--- a/packages/cli/src/ui/components/Header.tsx
+++ b/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 }) => (
-  <>
-    <Box marginBottom={1} alignItems="flex-start">
-      {Colors.GradientColors ? (
-        <Gradient colors={Colors.GradientColors}>
-          <Text>{title}</Text>
-        </Gradient>
-      ) : (
-        <Text>{title}</Text>
-      )}
-    </Box>
-  </>
-);
+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>{displayTitle}</Text>
+          </Gradient>
+        ) : (
+          <Text>{displayTitle}</Text>
+        )}
+      </Box>
+    </>
+  );
+};
diff --git a/packages/cli/src/ui/utils/textUtils.ts b/packages/cli/src/ui/utils/textUtils.ts
new file mode 100644
index 00000000..12852865
--- /dev/null
+++ b/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));
+};