Add visual cues for nightly version (#3701)

Co-authored-by: Jacob Richman <[email protected]>

2 files changed, 28 insertions, 4 deletions

diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx
index 48f37ee8..95904cd9 100644
--- a/packages/cli/src/ui/components/Footer.tsx
+++ b/packages/cli/src/ui/components/Footer.tsx
@@ -10,6 +10,7 @@ import { Colors } from '../colors.js';
 import { shortenPath, tildeifyPath, tokenLimit } from '@google/gemini-cli-core';
 import { ConsoleSummaryDisplay } from './ConsoleSummaryDisplay.js';
 import process from 'node:process';
+import Gradient from 'ink-gradient';
 import { MemoryUsageDisplay } from './MemoryUsageDisplay.js';
 
 interface FooterProps {
@@ -23,6 +24,7 @@ interface FooterProps {
   showErrorDetails: boolean;
   showMemoryUsage?: boolean;
   promptTokenCount: number;
+  nightly: boolean;
 }
 
 export const Footer: React.FC<FooterProps> = ({
@@ -36,6 +38,7 @@ export const Footer: React.FC<FooterProps> = ({
   showErrorDetails,
   showMemoryUsage,
   promptTokenCount,
+  nightly,
 }) => {
   const limit = tokenLimit(model);
   const percentage = promptTokenCount / limit;
@@ -43,10 +46,19 @@ export const Footer: React.FC<FooterProps> = ({
   return (
     <Box marginTop={1} justifyContent="space-between" width="100%">
       <Box>
-        <Text color={Colors.LightBlue}>
-          {shortenPath(tildeifyPath(targetDir), 70)}
-          {branchName && <Text color={Colors.Gray}> ({branchName}*)</Text>}
-        </Text>
+        {nightly ? (
+          <Gradient colors={Colors.GradientColors}>
+            <Text>
+              {shortenPath(tildeifyPath(targetDir), 70)}
+              {branchName && <Text> ({branchName}*)</Text>}
+            </Text>
+          </Gradient>
+        ) : (
+          <Text color={Colors.LightBlue}>
+            {shortenPath(tildeifyPath(targetDir), 70)}
+            {branchName && <Text color={Colors.Gray}> ({branchName}*)</Text>}
+          </Text>
+        )}
         {debugMode && (
           <Text color={Colors.AccentRed}>
             {' ' + (debugMessage || '--debug')}
diff --git a/packages/cli/src/ui/components/Header.tsx b/packages/cli/src/ui/components/Header.tsx
index 375faf07..b99382e0 100644
--- a/packages/cli/src/ui/components/Header.tsx
+++ b/packages/cli/src/ui/components/Header.tsx
@@ -14,11 +14,15 @@ import { getAsciiArtWidth } from '../utils/textUtils.js';
 interface HeaderProps {
   customAsciiArt?: string; // For user-defined ASCII art
   terminalWidth: number; // For responsive logo
+  version: string;
+  nightly: boolean;
 }
 
 export const Header: React.FC<HeaderProps> = ({
   customAsciiArt,
   terminalWidth,
+  version,
+  nightly,
 }) => {
   let displayTitle;
   const widthOfLongLogo = getAsciiArtWidth(longAsciiLogo);
@@ -38,6 +42,7 @@ export const Header: React.FC<HeaderProps> = ({
       alignItems="flex-start"
       width={artWidth}
       flexShrink={0}
+      flexDirection="column"
     >
       {Colors.GradientColors ? (
         <Gradient colors={Colors.GradientColors}>
@@ -46,6 +51,13 @@ export const Header: React.FC<HeaderProps> = ({
       ) : (
         <Text>{displayTitle}</Text>
       )}
+      {nightly && (
+        <Box width="100%" flexDirection="row" justifyContent="flex-end">
+          <Gradient colors={Colors.GradientColors}>
+            <Text>v{version}</Text>
+          </Gradient>
+        </Box>
+      )}
     </Box>
   );
 };