refactor(cli): extract login modal logic into custom hooks and utilities

- Created use-sheen-animation hook for logo animation logic
- Extracted login polling into use-login-polling hook
- Separated keyboard handlers into use-login-keyboard-handlers hook
- Moved login constants to dedicated constants.ts file
- Created login utils module for helper functions
- Added login-store for state management
- Improves code organization and reusability

Author: brandonkachen

cli/src/hooks/use-login-keyboard-handlers.ts

@@ -0,0 +1,60 @@
+import { useKeyboard } from '@opentui/react'
+import { useCallback } from 'react'
+
+interface UseLoginKeyboardHandlersParams {
+  loginUrl: string | null
+  hasOpenedBrowser: boolean
+  loading: boolean
+  onFetchLoginUrl: () => void
+  onCopyUrl: (url: string) => void
+}
+
+/**
+ * Custom hook that handles keyboard input for the login modal
+ * - Enter key: fetch login URL and open browser
+ * - 'c' key: copy URL to clipboard
+ */
+export function useLoginKeyboardHandlers({
+  loginUrl,
+  hasOpenedBrowser,
+  loading,
+  onFetchLoginUrl,
+  onCopyUrl,
+}: UseLoginKeyboardHandlersParams) {
+  useKeyboard(
+    useCallback(
+      (key: any) => {
+        const isEnter =
+          (key.name === 'return' || key.name === 'enter') &&
+          !key.ctrl &&
+          !key.meta &&
+          !key.shift
+
+        const isCKey = key.name === 'c' && !key.ctrl && !key.meta && !key.shift
+
+        if (isEnter && !hasOpenedBrowser && !loading) {
+          if (
+            'preventDefault' in key &&
+            typeof key.preventDefault === 'function'
+          ) {
+            key.preventDefault()
+          }
+
+          onFetchLoginUrl()
+        }
+
+        if (isCKey && loginUrl && hasOpenedBrowser) {
+          if (
+            'preventDefault' in key &&
+            typeof key.preventDefault === 'function'
+          ) {
+            key.preventDefault()
+          }
+
+          onCopyUrl(loginUrl)
+        }
+      },
+      [loginUrl, hasOpenedBrowser, loading, onCopyUrl, onFetchLoginUrl],
+    ),
+  )
+}

cli/src/hooks/use-login-polling.ts

@@ -0,0 +1,136 @@
+import { useEffect, useRef } from 'react'
+
+import { pollLoginStatus } from '../login/login-flow'
+import { WEBSITE_URL } from '../login/constants'
+import { logger } from '../utils/logger'
+
+import type { User } from '../utils/auth'
+
+interface UseLoginPollingParams {
+  loginUrl: string | null
+  fingerprintId: string
+  fingerprintHash: string | null
+  expiresAt: string | null
+  isWaitingForEnter: boolean
+  onSuccess: (user: User) => void
+  onTimeout: () => void
+  onError: (error: string) => void
+}
+
+/**
+ * Custom hook that handles polling for login status
+ * Extracts the 109-line polling effect from login-modal.tsx
+ */
+export function useLoginPolling({
+  loginUrl,
+  fingerprintId,
+  fingerprintHash,
+  expiresAt,
+  isWaitingForEnter,
+  onSuccess,
+  onTimeout,
+  onError,
+}: UseLoginPollingParams) {
+  // Store callbacks in refs to prevent effect re-runs
+  const onSuccessRef = useRef(onSuccess)
+  const onTimeoutRef = useRef(onTimeout)
+  const onErrorRef = useRef(onError)
+
+  useEffect(() => {
+    onSuccessRef.current = onSuccess
+  }, [onSuccess])
+
+  useEffect(() => {
+    onTimeoutRef.current = onTimeout
+  }, [onTimeout])
+
+  useEffect(() => {
+    onErrorRef.current = onError
+  }, [onError])
+
+  useEffect(() => {
+    if (!loginUrl || !fingerprintHash || !expiresAt || !isWaitingForEnter) {
+      logger.debug(
+        {
+          loginUrl: !!loginUrl,
+          fingerprintHash: !!fingerprintHash,
+          expiresAt: !!expiresAt,
+          isWaitingForEnter,
+        },
+        '🔍 Polling prerequisites not met, skipping setup',
+      )
+      return
+    }
+
+    let active = true
+
+    logger.info(
+      {
+        fingerprintId,
+        fingerprintHash,
+        expiresAt,
+        loginUrl,
+      },
+      '🚀 Starting login polling session',
+    )
+
+    const sleep = (ms: number) =>
+      new Promise<void>((resolve) => {
+        setTimeout(resolve, ms)
+      })
+
+    pollLoginStatus(
+      {
+        fetch,
+        sleep,
+        logger,
+      },
+      {
+        baseUrl: WEBSITE_URL,
+        fingerprintId,
+        fingerprintHash,
+        expiresAt,
+        shouldContinue: () => active,
+      },
+    )
+      .then((result) => {
+        if (!active) {
+          return
+        }
+
+        if (result.status === 'success') {
+          const user = result.user as User
+          logger.info(
+            {
+              attempts: result.attempts,
+              user: user.name,
+            },
+            '✅ Polling returned authenticated user',
+          )
+
+          onSuccessRef.current(user)
+        } else if (result.status === 'timeout') {
+          logger.warn('Login polling timed out after configured limit')
+          onTimeoutRef.current()
+        }
+      })
+      .catch((error) => {
+        if (!active) {
+          return
+        }
+        logger.error(
+          {
+            error: error instanceof Error ? error.message : String(error),
+          },
+          '💥 Unexpected error while polling login status',
+        )
+        onErrorRef.current(
+          error instanceof Error ? error.message : 'Failed to complete login',
+        )
+      })
+
+    return () => {
+      active = false
+    }
+  }, [loginUrl, fingerprintHash, expiresAt, isWaitingForEnter, fingerprintId])
+}

cli/src/hooks/use-sheen-animation.tsx

@@ -0,0 +1,84 @@
+import React, { useCallback, useEffect, useMemo } from 'react'
+
+import { getSheenColor } from '../login/utils'
+import {
+  SHADOW_CHARS,
+  SHEEN_WIDTH,
+  SHEEN_STEP,
+  SHEEN_INTERVAL_MS,
+} from '../login/constants'
+
+interface UseSheenAnimationParams {
+  logoColor: string
+  terminalWidth: number | undefined
+  sheenPosition: number
+  setSheenPosition: (value: number | ((prev: number) => number)) => void
+}
+
+/**
+ * Custom hook that handles the sheen animation effect on the logo
+ * Extracts sheen animation logic from login-modal.tsx
+ */
+export function useSheenAnimation({
+  logoColor,
+  terminalWidth,
+  sheenPosition,
+  setSheenPosition,
+}: UseSheenAnimationParams) {
+  // Run sheen animation once
+  useEffect(() => {
+    const maxPosition = Math.max(10, Math.min((terminalWidth || 80) - 4, 100))
+    const sheenWidth = SHEEN_WIDTH
+    const step = SHEEN_STEP // Advance 2 positions per frame for efficiency
+    const endPosition = maxPosition + sheenWidth
+
+    const interval = setInterval(() => {
+      setSheenPosition((prev) => {
+        const next = prev + step
+        // Stop animation when we've cleared all characters
+        return next >= endPosition ? endPosition : next
+      })
+    }, SHEEN_INTERVAL_MS)
+
+    // Calculate when animation should complete and clean up
+    const animationDuration = Math.ceil(
+      (endPosition / step) * SHEEN_INTERVAL_MS,
+    )
+    const stopTimeout = setTimeout(() => {
+      clearInterval(interval)
+    }, animationDuration)
+
+    return () => {
+      clearInterval(interval)
+      clearTimeout(stopTimeout)
+    }
+  }, [terminalWidth, setSheenPosition])
+
+  // Apply sheen effect to a character based on its position
+  const applySheenToChar = useCallback(
+    (char: string, charIndex: number, _lineIndex: number) => {
+      if (char === ' ' || char === '\n') {
+        return <span key={charIndex}>{char}</span>
+      }
+
+      const color = getSheenColor(
+        char,
+        charIndex,
+        sheenPosition,
+        logoColor,
+        SHADOW_CHARS,
+      )
+
+      return (
+        <span key={charIndex} fg={color}>
+          {char}
+        </span>
+      )
+    },
+    [sheenPosition, logoColor],
+  )
+
+  return {
+    applySheenToChar,
+  }
+}

cli/src/login/constants.ts

@@ -0,0 +1,46 @@
+// Get the website URL from environment or use default
+export const WEBSITE_URL =
+  process.env.NEXT_PUBLIC_CODEBUFF_APP_URL || 'https://codebuff.com'
+
+// Codebuff ASCII Logo - compact version for 80-width terminals
+export const LOGO = `
+  ██████╗ ██████╗ ██████╗ ███████╗██████╗ ██╗   ██╗███████╗███████╗
+ ██╔════╝██╔═══██╗██╔══██╗██╔════╝██╔══██╗██║   ██║██╔════╝██╔════╝
+ ██║     ██║   ██║██║  ██║█████╗  ██████╔╝██║   ██║█████╗  █████╗
+ ██║     ██║   ██║██║  ██║██╔══╝  ██╔══██╗██║   ██║██╔══╝  ██╔══╝
+ ╚██████╗╚██████╔╝██████╔╝███████╗██████╔╝╚██████╔╝██║     ██║
+  ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝╚═════╝  ╚═════╝ ╚═╝     ╚═╝
+`
+
+// UI Color constants
+export const LINK_COLOR_DEFAULT = '#3b82f6'
+export const LINK_COLOR_CLICKED = '#1e40af'
+export const COPY_SUCCESS_COLOR = '#22c55e'
+export const COPY_ERROR_COLOR = '#ef4444'
+export const WARNING_COLOR = '#ef4444'
+
+// Shadow/border characters that receive the sheen animation effect
+export const SHADOW_CHARS = new Set([
+  '╚',
+  '═',
+  '╝',
+  '║',
+  '╔',
+  '╗',
+  '╠',
+  '╣',
+  '╦',
+  '╩',
+  '╬',
+])
+
+// Modal sizing constants
+export const DEFAULT_TERMINAL_HEIGHT = 24
+export const MODAL_VERTICAL_MARGIN = 2 // Space for top positioning (1) + bottom margin (1)
+export const MAX_MODAL_BASE_HEIGHT = 22 // Maximum height when no warning banner
+export const WARNING_BANNER_HEIGHT = 3 // Height of invalid credentials banner (padding + text + padding)
+
+// Sheen animation constants
+export const SHEEN_WIDTH = 5
+export const SHEEN_STEP = 2 // Advance 2 positions per frame for efficiency
+export const SHEEN_INTERVAL_MS = 150