Add visual cues for nightly version (#3701)

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

1 files changed, 12 insertions, 0 deletions

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>
   );
 };