integrate with holiday theme. do not show snowfall in short width. stop the animation after user enters a text

Author: sehoon38

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

@@ -19,7 +19,6 @@ import { getAsciiArtWidth } from '../utils/textUtils.js';
 import { useTerminalSize } from '../hooks/useTerminalSize.js';
 import { getTerminalProgram } from '../utils/terminalSetup.js';
 import { useSnowfall } from '../hooks/useSnowfall.js';
-import { useUIState } from '../contexts/UIStateContext.js';
 
 interface HeaderProps {
   customAsciiArt?: string; // For user-defined ASCII art
@@ -49,10 +48,7 @@ export const Header: React.FC<HeaderProps> = ({
   }
 
   const artWidth = getAsciiArtWidth(displayTitle);
-  const { history } = useUIState();
-  const hasStartedChat = history.some((item) => item.type === 'user');
-
-  const snowTitle = useSnowfall(displayTitle, { enabled: !hasStartedChat });
+  const title = useSnowfall(displayTitle);
 
   return (
     <Box
@@ -61,7 +57,7 @@ export const Header: React.FC<HeaderProps> = ({
       flexShrink={0}
       flexDirection="column"
     >
-      <ThemedGradient>{snowTitle}</ThemedGradient>
+      <ThemedGradient>{title}</ThemedGradient>
       {nightly && (
         <Box width="100%" flexDirection="row" justifyContent="flex-end">
           <ThemedGradient>v{version}</ThemedGradient>

packages/cli/src/ui/hooks/useSnowfall.ts

@@ -9,6 +9,9 @@ import { getAsciiArtWidth } from '../utils/textUtils.js';
 import { debugState } from '../debug.js';
 import { themeManager } from '../themes/theme-manager.js';
 import { Holiday } from '../themes/holiday.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { useTerminalSize } from './useTerminalSize.js';
+import { shortAsciiLogo } from '../components/AsciiArt.js';
 
 interface Snowflake {
   x: number;
@@ -58,23 +61,26 @@ const addHolidayTrees = (art: string): string => {
   return `\n\n${art}\n${centeredTripleTrees}\n\n`;
 };
 
-export const useSnowfall = (
-  art: string,
-  options: { enabled?: boolean } = {},
-): string => {
+export const useSnowfall = (displayTitle: string): string => {
   const currentTheme = themeManager.getActiveTheme();
+  const { columns: terminalWidth } = useTerminalSize();
+  const { history } = useUIState();
+
+  const hasStartedChat = history.some((item) => item.type === 'user');
+  const widthOfShortLogo = getAsciiArtWidth(shortAsciiLogo);
 
   const enabled =
     isHolidaySeason &&
     currentTheme.name === Holiday.name &&
-    (options.enabled ?? true);
+    terminalWidth >= widthOfShortLogo &&
+    !hasStartedChat;
 
   const displayArt = useMemo(() => {
     if (enabled) {
-      return addHolidayTrees(art);
+      return addHolidayTrees(displayTitle);
     }
-    return art;
-  }, [art, enabled]);
+    return displayTitle;
+  }, [displayTitle, enabled]);
 
   const [snowflakes, setSnowflakes] = useState<Snowflake[]>([]);
   // We don't need 'frame' state if we just use functional updates for snowflakes,