@alumbwe/anvil 1.0.0 → 1.0.2

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

@@ -1,73 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,161 +0,0 @@
-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 }
-}