feat: Show snowfall animation for holiday theme (#15494)

Co-authored-by: Jack Wotherspoon <jackwoth@google.com>

packages/cli/src/ui/components/AppHeader.test.tsx

@@ -32,6 +32,7 @@ describe('<AppHeader />', () => {
   it('should render the banner with default text', () => {
     const mockConfig = makeFakeConfig();
     const uiState = {
+      history: [],
       bannerData: {
         defaultText: 'This is the default banner',
         warningText: '',
@@ -52,6 +53,7 @@ describe('<AppHeader />', () => {
   it('should render the banner with warning text', () => {
     const mockConfig = makeFakeConfig();
     const uiState = {
+      history: [],
       bannerData: {
         defaultText: 'This is the default banner',
         warningText: 'There are capacity issues',
@@ -72,6 +74,7 @@ describe('<AppHeader />', () => {
   it('should not render the banner when no flags are set', () => {
     const mockConfig = makeFakeConfig();
     const uiState = {
+      history: [],
       bannerData: {
         defaultText: '',
         warningText: '',
@@ -91,6 +94,7 @@ describe('<AppHeader />', () => {
   it('should render the banner when previewFeatures is disabled', () => {
     const mockConfig = makeFakeConfig({ previewFeatures: false });
     const uiState = {
+      history: [],
       bannerData: {
         defaultText: 'This is the default banner',
         warningText: '',
@@ -111,6 +115,7 @@ describe('<AppHeader />', () => {
   it('should not render the banner when previewFeatures is enabled', () => {
     const mockConfig = makeFakeConfig({ previewFeatures: true });
     const uiState = {
+      history: [],
       bannerData: {
         defaultText: 'This is the default banner',
         warningText: '',
@@ -131,6 +136,7 @@ describe('<AppHeader />', () => {
     persistentStateMock.get.mockReturnValue(5);
     const mockConfig = makeFakeConfig();
     const uiState = {
+      history: [],
       bannerData: {
         defaultText: 'This is the default banner',
         warningText: '',
@@ -151,6 +157,7 @@ describe('<AppHeader />', () => {
     persistentStateMock.get.mockReturnValue({});
     const mockConfig = makeFakeConfig();
     const uiState = {
+      history: [],
       bannerData: {
         defaultText: 'This is the default banner',
         warningText: '',
@@ -177,6 +184,7 @@ describe('<AppHeader />', () => {
   it('should render banner text with unescaped newlines', () => {
     const mockConfig = makeFakeConfig();
     const uiState = {
+      history: [],
       bannerData: {
         defaultText: 'First line\\nSecond line',
         warningText: '',

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

@@ -15,6 +15,9 @@ import { Text } from 'ink';
 import type React from 'react';
 
 vi.mock('../hooks/useTerminalSize.js');
+vi.mock('../hooks/useSnowfall.js', () => ({
+  useSnowfall: vi.fn((art) => art),
+}));
 vi.mock('../utils/terminalSetup.js', () => ({
   getTerminalProgram: vi.fn(),
 }));
@@ -159,7 +162,6 @@ describe('<Header />', () => {
     render(<Header version="1.0.0" nightly={false} />);
     expect(Gradient.default).not.toHaveBeenCalled();
     const textCalls = (Text as Mock).mock.calls;
-    console.log(JSON.stringify(textCalls, null, 2));
     expect(textCalls.length).toBe(1);
     expect(textCalls[0][0]).toHaveProperty('color', singleColor);
   });

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

@@ -18,6 +18,7 @@ import {
 import { getAsciiArtWidth } from '../utils/textUtils.js';
 import { useTerminalSize } from '../hooks/useTerminalSize.js';
 import { getTerminalProgram } from '../utils/terminalSetup.js';
+import { useSnowfall } from '../hooks/useSnowfall.js';
 
 interface HeaderProps {
   customAsciiArt?: string; // For user-defined ASCII art
@@ -47,6 +48,7 @@ export const Header: React.FC<HeaderProps> = ({
   }
 
   const artWidth = getAsciiArtWidth(displayTitle);
+  const title = useSnowfall(displayTitle);
 
   return (
     <Box
@@ -55,7 +57,7 @@ export const Header: React.FC<HeaderProps> = ({
       flexShrink={0}
       flexDirection="column"
     >
-      <ThemedGradient>{displayTitle}</ThemedGradient>
+      <ThemedGradient>{title}</ThemedGradient>
       {nightly && (
         <Box width="100%" flexDirection="row" justifyContent="flex-end">
           <ThemedGradient>v{version}</ThemedGradient>