freebuff cli: add subtitle

Author: jahooma

cli/src/hooks/use-logo.tsx

@@ -1,8 +1,16 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 
 import { LOGO, LOGO_SMALL, SHADOW_CHARS } from '../login/constants'
 import { parseLogoLines } from '../login/utils'
 import { IS_FREEBUFF } from '../utils/constants'
+import { useTheme } from './use-theme'
+
+const SUBTITLE_SHIMMER_STEPS = 10
+const SUBTITLE_SHIMMER_INTERVAL_MS = 180
+const SUBTITLE_SHIMMER_COLORS = {
+  dark: { base: '#9EFC62', bright: '#CCFF99', peak: '#ffffff' },
+  light: { base: '#65A83E', bright: '#88D458', peak: '#ffffff' },
+} as const
 
 interface UseLogoOptions {
   /**
@@ -137,5 +145,54 @@ export const useLogo = ({
     )
   }, [rawLogoString, availableWidth, applySheenToChar, textColor, accentColor, blockColor])
 
-  return { component, textBlock }
+  // Freebuff subtitle: "The free coding agent" with shimmer wave on "free"
+  const theme = useTheme()
+  const [shimmerPos, setShimmerPos] = useState(0)
+
+  useEffect(() => {
+    if (!IS_FREEBUFF) return
+    const interval = setInterval(() => {
+      setShimmerPos(prev => (prev + 1) % SUBTITLE_SHIMMER_STEPS)
+    }, SUBTITLE_SHIMMER_INTERVAL_MS)
+    return () => clearInterval(interval)
+  }, [])
+
+  const componentWithSubtitle = useMemo(() => {
+    if (!IS_FREEBUFF) return component
+
+    const colors = SUBTITLE_SHIMMER_COLORS[theme.name] ?? SUBTITLE_SHIMMER_COLORS.dark
+
+    // Calculate logo width to center the subtitle
+    const subtitleText = 'The free coding agent'
+    const logoLines = rawLogoString === 'CODEBUFF' || rawLogoString === 'FREEBUFF'
+      ? [rawLogoString]
+      : parseLogoLines(rawLogoString).map((line) => line.slice(0, availableWidth))
+    const logoWidth = Math.max(...logoLines.map((l) => l.length))
+    const padding = Math.max(0, Math.floor((logoWidth - subtitleText.length) / 2))
+    const pad = ' '.repeat(padding)
+
+    const subtitle = (
+      <text style={{ wrapMode: 'none' }}>
+        <span>{pad}</span>
+        <span fg={theme.foreground}>The </span>
+        <b>
+          {'free'.split('').map((char, i) => {
+            const distance = Math.abs(shimmerPos - 1 - i)
+            const color = distance === 0 ? colors.peak : distance === 1 ? colors.bright : colors.base
+            return <span key={i} fg={color}>{char}</span>
+          })}
+        </b>
+        <span fg={theme.foreground}> coding agent</span>
+      </text>
+    )
+
+    return (
+      <>
+        {component}
+        {subtitle}
+      </>
+    )
+  }, [component, shimmerPos, theme.name, theme.foreground, rawLogoString, availableWidth])
+
+  return { component: componentWithSubtitle, textBlock }
 }