@alumbwe/anvil 1.0.0

package/src/hooks/use-grid-layout.ts

@@ -0,0 +1,73 @@
+import { useMemo } from 'react'
+
+import { computeSmartColumns, MIN_COLUMN_WIDTH } from '../utils/layout-helpers'
+
+/**
+ * Terminal column width thresholds for responsive grid layout.
+ * These are character counts (not pixels) representing terminal width breakpoints:
+ * - Below 100 cols: 1 column (narrow terminal)
+ * - 100-149 cols: up to 2 columns (medium terminal)
+ * - 150-199 cols: up to 3 columns (large terminal)  
+ * - 200+ cols: up to 4 columns (extra large terminal)
+ */
+export const WIDTH_MD_THRESHOLD = 100
+export const WIDTH_LG_THRESHOLD = 150
+export const WIDTH_XL_THRESHOLD = 200
+
+/** Ordered thresholds for determining max columns based on terminal width */
+const WIDTH_THRESHOLDS = [WIDTH_MD_THRESHOLD, WIDTH_LG_THRESHOLD, WIDTH_XL_THRESHOLD] as const
+
+export interface GridLayoutResult<T> {
+  columns: number
+  columnWidth: number
+  columnGroups: T[][]
+}
+
+/** Gap between columns in multi-column layout */
+const COLUMN_GAP = 1
+
+export function computeGridLayout<T>(
+  items: T[],
+  availableWidth: number,
+): GridLayoutResult<T> {
+  // Force single column for very narrow terminals where multi-column wouldn't fit
+  const minWidthForTwoColumns = MIN_COLUMN_WIDTH * 2 + COLUMN_GAP
+  if (availableWidth < minWidthForTwoColumns) {
+    return {
+      columns: 1,
+      columnWidth: Math.max(1, availableWidth),
+      columnGroups: [items],
+    }
+  }
+
+  // Determine max columns from width thresholds
+  const maxColumns = WIDTH_THRESHOLDS.filter(t => availableWidth >= t).length + 1
+
+  const columns = computeSmartColumns(items.length, maxColumns)
+
+  let columnWidth: number
+  if (columns === 1) {
+    columnWidth = availableWidth
+  } else {
+    const totalGap = columns - 1
+    const rawWidth = Math.floor((availableWidth - totalGap) / columns)
+    columnWidth = Math.max(MIN_COLUMN_WIDTH, rawWidth)
+  }
+
+  const columnGroups: T[][] = Array.from({ length: columns }, () => [])
+  items.forEach((item, idx) => {
+    columnGroups[idx % columns].push(item)
+  })
+
+  return { columns, columnWidth, columnGroups }
+}
+
+export function useGridLayout<T>(
+  items: T[],
+  availableWidth: number,
+): GridLayoutResult<T> {
+  return useMemo(
+    () => computeGridLayout(items, availableWidth),
+    [items, availableWidth],
+  )
+}

package/src/hooks/use-input-history.ts

@@ -0,0 +1,173 @@
+import { useRef, useCallback, useEffect } from 'react'
+
+import {
+  loadMessageHistory,
+  saveMessageHistory,
+} from '../utils/message-history'
+
+import type { InputValue } from '../types/store'
+import type { InputMode } from '../utils/input-modes'
+
+/**
+ * Determine the appropriate input mode and display text for a history item.
+ * Bash commands are stored with '!' prefix, so we detect that and return
+ * the appropriate mode and text to display.
+ */
+function parseHistoryItem(item: string): {
+  mode: InputMode
+  displayText: string
+} {
+  if (item.startsWith('!') && item.length > 1) {
+    // It's a bash command - strip the '!' prefix for display
+    return { mode: 'bash', displayText: item.slice(1) }
+  }
+  // Regular prompt
+  return { mode: 'default', displayText: item }
+}
+
+export const useInputHistory = (
+  inputValue: string,
+  setInputValue: (value: InputValue) => void,
+  options?: {
+    inputMode?: InputMode
+    setInputMode?: (mode: InputMode) => void
+  },
+) => {
+  const { inputMode, setInputMode } = options ?? {}
+  const messageHistoryRef = useRef<string[]>([])
+  const historyIndexRef = useRef<number>(-1)
+  const currentDraftRef = useRef<string>('')
+  const currentDraftModeRef = useRef<InputMode>('default')
+  const isInitializedRef = useRef<boolean>(false)
+  const isNavigatingRef = useRef<boolean>(false)
+
+  // Load history from disk on mount
+  useEffect(() => {
+    if (!isInitializedRef.current) {
+      isInitializedRef.current = true
+      const savedHistory = loadMessageHistory()
+      messageHistoryRef.current = savedHistory
+    }
+  }, [])
+
+  const resetHistoryNavigation = useCallback(() => {
+    historyIndexRef.current = -1
+    currentDraftRef.current = ''
+    currentDraftModeRef.current = 'default'
+  }, [])
+
+  useEffect(() => {
+    if (!isNavigatingRef.current) {
+      resetHistoryNavigation()
+    }
+  }, [inputMode, resetHistoryNavigation])
+
+  const saveToHistory = useCallback((message: string) => {
+    // Re-read from disk to pick up messages from other terminals
+    const diskHistory = loadMessageHistory()
+    const newHistory = [...diskHistory, message]
+    messageHistoryRef.current = newHistory
+    historyIndexRef.current = -1
+    currentDraftRef.current = ''
+    currentDraftModeRef.current = 'default'
+
+    // Persist to disk
+    saveMessageHistory(newHistory)
+  }, [])
+
+  const navigateUp = useCallback(() => {
+    const history = messageHistoryRef.current
+    if (history.length === 0) return
+
+    isNavigatingRef.current = true
+
+    if (historyIndexRef.current === -1) {
+      // Save current draft and mode before navigating
+      currentDraftRef.current =
+        inputMode === 'bash' ? '!' + inputValue : inputValue
+      currentDraftModeRef.current = inputMode ?? 'default'
+      historyIndexRef.current = history.length - 1
+    } else if (historyIndexRef.current > 0) {
+      historyIndexRef.current -= 1
+    }
+
+    const historyMessage = history[historyIndexRef.current]
+    if (historyMessage === undefined) {
+      isNavigatingRef.current = false
+      return
+    }
+
+    const { mode, displayText } = parseHistoryItem(historyMessage)
+
+    // Switch mode if needed
+    if (setInputMode && mode !== inputMode) {
+      setInputMode(mode)
+    }
+
+    setInputValue({
+      text: displayText,
+      cursorPosition: displayText.length,
+      lastEditDueToNav: true,
+    })
+
+    setTimeout(() => {
+      isNavigatingRef.current = false
+    }, 0)
+  }, [inputValue, inputMode, setInputValue, setInputMode])
+
+  const navigateDown = useCallback(() => {
+    const history = messageHistoryRef.current
+    if (history.length === 0) return
+    if (historyIndexRef.current === -1) return
+
+    isNavigatingRef.current = true
+
+    if (historyIndexRef.current < history.length - 1) {
+      historyIndexRef.current += 1
+      const historyMessage = history[historyIndexRef.current]
+      if (historyMessage === undefined) {
+        isNavigatingRef.current = false
+        return
+      }
+
+      const { mode, displayText } = parseHistoryItem(historyMessage)
+
+      // Switch mode if needed
+      if (setInputMode && mode !== inputMode) {
+        setInputMode(mode)
+      }
+
+      setInputValue({
+        text: displayText,
+        cursorPosition: displayText.length,
+        lastEditDueToNav: true,
+      })
+    } else {
+      // Return to draft
+      historyIndexRef.current = -1
+      const draft = currentDraftRef.current
+      const draftMode = currentDraftModeRef.current
+
+      // Restore the mode we were in when we started navigating
+      if (setInputMode && draftMode !== inputMode) {
+        setInputMode(draftMode)
+      }
+
+      // If draft was in bash mode, it was stored with '!' prefix, so strip it
+      const textToShow =
+        draftMode === 'bash' && draft.startsWith('!') ? draft.slice(1) : draft
+
+      setInputValue({
+        text: textToShow,
+        cursorPosition: textToShow.length,
+        lastEditDueToNav: true,
+      })
+    }
+
+    setTimeout(() => {
+      isNavigatingRef.current = false
+    }, 0)
+  }, [inputMode, setInputValue, setInputMode])
+
+  return { saveToHistory, navigateUp, navigateDown, resetHistoryNavigation }
+}

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

@@ -0,0 +1,75 @@
+import { useKeyboard } from '@opentui/react'
+import { useCallback } from 'react'
+
+import { exitCliCleanly } from '../utils/exit-cleanly'
+import { isPlainEnterKey } from '../utils/terminal-enter-detection'
+
+import type { KeyEvent } from '@opentui/core'
+
+interface UseLoginKeyboardHandlersParams {
+  loginUrl: string | null
+  hasOpenedBrowser: boolean
+  loading: boolean
+  onFetchLoginUrl: () => void
+  onCopyUrl: (url: string) => Promise<void> | 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
+ * - Ctrl+C: exit the application
+ */
+export function useLoginKeyboardHandlers({
+  loginUrl,
+  hasOpenedBrowser,
+  loading,
+  onFetchLoginUrl,
+  onCopyUrl,
+}: UseLoginKeyboardHandlersParams) {
+  useKeyboard(
+    useCallback(
+      (key: KeyEvent) => {
+        const isEnter = isPlainEnterKey(key)
+
+        const isCKey = key.name === 'c' && !key.ctrl && !key.meta && !key.shift
+        const isCtrlC = key.ctrl && key.name === 'c'
+
+        if (isCtrlC) {
+          if (
+            'preventDefault' in key &&
+            typeof key.preventDefault === 'function'
+          ) {
+            key.preventDefault()
+          }
+          void exitCliCleanly()
+        }
+
+        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()
+          }
+
+          // Fire-and-forget the async copy function with .catch() to prevent
+          // unhandled promise rejections if the implementation changes
+          void Promise.resolve(onCopyUrl(loginUrl)).catch(() => {})
+        }
+      },
+      [loginUrl, hasOpenedBrowser, loading, onCopyUrl, onFetchLoginUrl],
+    ),
+  )
+}

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

@@ -0,0 +1,114 @@
+import { useEffect, useRef } from 'react'
+
+import { LOGIN_WEBSITE_URL } from '../login/constants'
+import { pollLoginStatus } from '../login/login-flow'
+import { trackEvent } from '../utils/analytics'
+import { logger } from '../utils/logger'
+
+import type { User } from '../utils/auth'
+
+interface UseLoginPollingParams {
+  loginUrl: string | null
+  fingerprintId: string | null
+  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(() => {
+    // fingerprintHash only becomes non-null after the login-URL mutation
+    // succeeds, and that path always sets fingerprintId first — so gating
+    // on fingerprintHash implicitly gates on fingerprintId.
+    if (!loginUrl || !fingerprintId || !fingerprintHash || !expiresAt || !isWaitingForEnter) {
+      return
+    }
+
+    let active = true
+
+    const sleep = (ms: number) =>
+      new Promise<void>((resolve) => {
+        setTimeout(resolve, ms)
+      })
+
+    pollLoginStatus(
+      {
+        sleep,
+        logger,
+        trackEvent,
+      },
+      {
+        baseUrl: LOGIN_WEBSITE_URL,
+        fingerprintId: fingerprintId!,
+        fingerprintHash,
+        expiresAt,
+        shouldContinue: () => active,
+        via: 'modal',
+      },
+    )
+      .then((result) => {
+        if (!active) {
+          return
+        }
+
+        if (result.status === 'success') {
+          const user = result.user as 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])
+}

package/src/hooks/use-logo.tsx

@@ -0,0 +1,161 @@
+import React, { useMemo } from 'react'
+
+import { LOGO, LOGO_SMALL, SHADOW_CHARS } from '../login/constants'
+import { parseLogoLines } from '../login/utils'
+import { IS_FREEBUFF } from '../utils/constants'
+
+interface UseLogoOptions {
+  /**
+   * Available width for rendering the logo
+   */
+  availableWidth: number
+  /**
+   * Optional function to apply styling to each character (e.g., for sheen animation)
+   * If not provided, default coloring is applied (white blocks, accent shadows)
+   */
+  applySheenToChar?: (char: string, charIndex: number, lineIndex: number) => React.ReactNode
+  /**
+   * Color to apply to the text variant
+   */
+  textColor?: string
+  /**
+   * Accent color for shadow/border characters (defaults to acid green #9EFC62)
+   */
+  accentColor?: string
+  /**
+   * Block color for solid block characters (white for dark mode, black for light mode)
+   */
+  blockColor?: string
+  /**
+   * Optional vertical budget (in rows) for the logo. When fewer than the
+   * ASCII art's 6 lines are available, the hook downgrades to the single-line
+   * text variant so callers on short terminals don't have to special-case it.
+   */
+  maxHeight?: number
+}
+
+interface LogoResult {
+  /**
+   * The formatted logo as a React component ready to render in UI
+   */
+  component: React.ReactNode
+  /**
+   * The formatted logo string for plain text contexts (e.g., chat messages)
+   * Empty string for narrow widths, formatted ASCII art otherwise
+   */
+  textBlock: string
+}
+
+/**
+ * Hook to render a logo based on available width
+ * Returns a fully formatted React component and text block that "just work"
+ *
+ * Returns:
+ * - Full ASCII logo for width >= 70
+ * - Small ASCII logo for width >= 40
+ * - Text variant "ANVIL" or "Anvil CLI" for narrow widths
+ *
+ * The hook handles ALL formatting internally including:
+ * - Line parsing and width limiting
+ * - Optional character-level styling (sheen animation) for React component
+ * - Text wrapping and block formatting for plain text contexts
+ * - No consumer needs to know about parseLogoLines, split, join, etc.
+ */
+export const useLogo = ({
+  availableWidth,
+  applySheenToChar,
+  textColor,
+  accentColor = '#9EFC62',
+  blockColor = '#ffffff',
+  maxHeight,
+}: UseLogoOptions): LogoResult => {
+  // The ASCII art (full and small) is 6 lines tall. If the caller can't spare
+  // that many rows, collapse straight to the single-line text variant.
+  const ASCII_LOGO_LINES = 6
+  const rawLogoString = useMemo(() => {
+    if (maxHeight != null && maxHeight < ASCII_LOGO_LINES) {
+      return IS_FREEBUFF ? 'FREEBUFF' : 'ANVIL'
+    }
+    if (availableWidth >= 70) return LOGO
+    if (availableWidth >= 20) return LOGO_SMALL
+    return IS_FREEBUFF ? 'FREEBUFF' : 'ANVIL'
+  }, [availableWidth, maxHeight])
+
+  // Format text block for plain text contexts (chat messages, etc.)
+  const textBlock = useMemo(() => {
+    if (rawLogoString === 'ANVIL' || rawLogoString === 'FREEBUFF') {
+      return '' // Don't show ASCII art for text-only variant in plain text contexts
+    }
+    // Parse and format for plain text display
+    return parseLogoLines(rawLogoString)
+      .map((line) => line.slice(0, availableWidth))
+      .join('\n')
+  }, [rawLogoString, availableWidth])
+
+  // Format component for React contexts (login modal, etc.)
+  const component = useMemo(() => {
+    // Text-only variant for very narrow widths
+    if (rawLogoString === 'ANVIL' || rawLogoString === 'FREEBUFF') {
+      const brandName = IS_FREEBUFF ? 'Freebuff' : 'Anvil'
+      // When we collapsed to text purely to fit a short terminal (not because
+      // the terminal is narrow), keep it to the bare brand name — "Anvil CLI"
+      // reads as filler in that already-cramped space.
+      const forcedByHeight = maxHeight != null && maxHeight < ASCII_LOGO_LINES
+      const displayText =
+        availableWidth < 30 || forcedByHeight
+          ? brandName
+          : `${brandName} CLI`
+
+      return (
+        <text style={{ wrapMode: 'none' }}>
+          <b>
+            {textColor ? (
+              <span fg={textColor}>{displayText}</span>
+            ) : (
+              <>{displayText}</>
+            )}
+          </b>
+        </text>
+      )
+    }
+
+    // ASCII art variant
+    const logoLines = parseLogoLines(rawLogoString)
+    const displayLines = logoLines.map((line) => line.slice(0, availableWidth))
+
+    // Default coloring function: blockColor for blocks, accent color for shadows
+    const defaultColorChar = (char: string, charIndex: number) => {
+      if (char === ' ' || char === '\n') {
+        return <span key={charIndex}>{char}</span>
+      }
+      // Block characters use blockColor (white in dark mode, black in light mode)
+      if (char === '█') {
+        return <span key={charIndex} fg={blockColor}>{char}</span>
+      }
+      // Shadow/border characters get accent color
+      if (SHADOW_CHARS.has(char)) {
+        return <span key={charIndex} fg={accentColor}>{char}</span>
+      }
+      // Other characters use accent color
+      return <span key={charIndex} fg={accentColor}>{char}</span>
+    }
+
+    return (
+      <>
+        {displayLines.map((line, lineIndex) => (
+          <text key={`logo-line-${lineIndex}`} style={{ wrapMode: 'none' }}>
+            {line
+              .split('')
+              .map((char, charIndex) =>
+                applySheenToChar
+                  ? applySheenToChar(char, charIndex, lineIndex)
+                  : defaultColorChar(char, charIndex),
+              )}
+          </text>
+        ))}
+      </>
+    )
+  }, [rawLogoString, availableWidth, applySheenToChar, textColor, accentColor, blockColor, maxHeight])
+
+  return { component, textBlock }
+}