@alumbwe/anvil 1.0.0 → 1.0.2

package/src/hooks/use-chat-state.ts

@@ -1,165 +0,0 @@
-/**
- * Extracted chat state management hook.
- * Encapsulates view-facing Zustand subscriptions and derived state.
- */
-
-import { useMemo } from 'react'
-import { useShallow } from 'zustand/react/shallow'
-
-import { useChatStore } from '../state/chat-store'
-
-import type { InputValue, PendingBashMessage } from '../types/store'
-import type { ChatMessage } from '../types/chat'
-import type { AgentMode } from '../utils/constants'
-
-/**
- * Return type for useChatState hook.
- */
-export interface UseChatStateReturn {
-  // Input state
-  inputValue: string
-  cursorPosition: number
-  lastEditDueToNav: boolean
-  setInputValue: (
-    value: InputValue | ((prev: InputValue) => InputValue),
-  ) => void
-  inputFocused: boolean
-  setInputFocused: (focused: boolean) => void
-
-  // Suggestion menu state
-  slashSelectedIndex: number
-  setSlashSelectedIndex: (value: number | ((prev: number) => number)) => void
-  agentSelectedIndex: number
-  setAgentSelectedIndex: (value: number | ((prev: number) => number)) => void
-
-  // Streaming/agent state (stabilized)
-  streamingAgents: Set<string>
-  focusedAgentId: string | null
-  setFocusedAgentId: (
-    value: string | null | ((prev: string | null) => string | null),
-  ) => void
-
-  // Messages
-  messages: ChatMessage[]
-  setMessages: (
-    value: ChatMessage[] | ((prev: ChatMessage[]) => ChatMessage[]),
-  ) => void
-
-  // Mode
-  agentMode: AgentMode
-  setAgentMode: (mode: AgentMode) => void
-  toggleAgentMode: () => void
-
-  // Retry state
-  isRetrying: boolean
-  isCapacityWait: boolean
-
-  // Pending bash messages
-  pendingBashMessages: PendingBashMessage[]
-}
-
-/**
- * Custom hook that encapsulates chat state management.
- * Extracts view state selectors and derived values from the main Chat component.
- *
- * @returns Chat state values and setters
- */
-export function useChatState(): UseChatStateReturn {
-  // Main store selector - uses useShallow to prevent unnecessary re-renders
-  const {
-    inputValue,
-    cursorPosition,
-    lastEditDueToNav,
-    setInputValue,
-    inputFocused,
-    setInputFocused,
-    slashSelectedIndex,
-    setSlashSelectedIndex,
-    agentSelectedIndex,
-    setAgentSelectedIndex,
-    streamingAgents: rawStreamingAgents,
-    focusedAgentId,
-    setFocusedAgentId,
-    messages,
-    setMessages,
-    agentMode,
-    setAgentMode,
-    toggleAgentMode,
-    isRetrying,
-    isCapacityWait,
-  } = useChatStore(
-    useShallow((store) => ({
-      inputValue: store.inputValue,
-      cursorPosition: store.cursorPosition,
-      lastEditDueToNav: store.lastEditDueToNav,
-      setInputValue: store.setInputValue,
-      inputFocused: store.inputFocused,
-      setInputFocused: store.setInputFocused,
-      slashSelectedIndex: store.slashSelectedIndex,
-      setSlashSelectedIndex: store.setSlashSelectedIndex,
-      agentSelectedIndex: store.agentSelectedIndex,
-      setAgentSelectedIndex: store.setAgentSelectedIndex,
-      streamingAgents: store.streamingAgents,
-      focusedAgentId: store.focusedAgentId,
-      setFocusedAgentId: store.setFocusedAgentId,
-      messages: store.messages,
-      setMessages: store.setMessages,
-      agentMode: store.agentMode,
-      setAgentMode: store.setAgentMode,
-      toggleAgentMode: store.toggleAgentMode,
-      isRetrying: store.isRetrying,
-      isCapacityWait: store.isCapacityWait,
-    })),
-  )
-
-  // Additional selector for pending bash messages (separate for performance)
-  const pendingBashMessages = useChatStore((state) => state.pendingBashMessages)
-
-  // Stabilize streamingAgents reference - only create new Set when content changes
-  const streamingAgentsKey = useMemo(
-    () => Array.from(rawStreamingAgents).sort().join(','),
-    [rawStreamingAgents],
-  )
-  const streamingAgents = useMemo(
-    () => rawStreamingAgents,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [streamingAgentsKey],
-  )
-
-  return {
-    // Input state
-    inputValue,
-    cursorPosition,
-    lastEditDueToNav,
-    setInputValue,
-    inputFocused,
-    setInputFocused,
-
-    // Suggestion menu state
-    slashSelectedIndex,
-    setSlashSelectedIndex,
-    agentSelectedIndex,
-    setAgentSelectedIndex,
-
-    // Streaming/agent state (stabilized)
-    streamingAgents,
-    focusedAgentId,
-    setFocusedAgentId,
-
-    // Messages
-    messages,
-    setMessages,
-
-    // Mode
-    agentMode,
-    setAgentMode,
-    toggleAgentMode,
-
-    // Retry state
-    isRetrying,
-    isCapacityWait,
-
-    // Pending bash messages
-    pendingBashMessages,
-  }
-}

package/src/hooks/use-chat-streaming.ts

@@ -1,180 +0,0 @@
-/**
- * Chat view adapter for connection status, queue presentation, and exit handling.
- */
-
-import { RECONNECTION_MESSAGE_DURATION_MS } from '@anvil/sdk'
-import { useQueryClient } from '@tanstack/react-query'
-import { useCallback, useEffect, useState, useTransition } from 'react'
-
-import { authQueryKeys } from './use-auth-query'
-import { useConnectionStatus } from './use-connection-status'
-import { useExitHandler } from './use-exit-handler'
-import { useQueueControls } from './use-queue-controls'
-import { useQueueUi } from './use-queue-ui'
-import { useTimeout } from './use-timeout'
-import { useChatRuntime } from '../contexts/chat-runtime-context'
-
-import type { QueuedMessage, StreamStatus } from './use-message-queue'
-import type { PendingAttachment } from '../types/store'
-import type { MutableRefObject } from 'react'
-
-export interface UseChatStreamingOptions {
-  inputValue: string
-  setInputValue: (value: {
-    text: string
-    cursorPosition: number
-    lastEditDueToNav: boolean
-  }) => void
-  terminalWidth: number
-  separatorWidth: number
-}
-
-export interface UseChatStreamingReturn {
-  // Connection state
-  isConnected: boolean
-  showReconnectionMessage: boolean
-
-  // Timer
-  timerStartTime: number | null
-
-  // Stream status
-  streamStatus: StreamStatus
-  isWaitingForResponse: boolean
-  isStreaming: boolean
-
-  // Queue management
-  queuedMessages: QueuedMessage[]
-  queuePaused: boolean
-  streamMessageIdRef: MutableRefObject<string | null>
-  addToQueue: (message: string, attachments?: PendingAttachment[]) => void
-  setCanProcessQueue: (value: boolean | ((prev: boolean) => boolean)) => void
-  clearQueue: () => QueuedMessage[]
-
-  // Queue UI
-  queuedCount: number
-  shouldShowQueuePreview: boolean
-  inputBoxTitle: string | undefined
-  inputPlaceholder: string
-
-  // Exit handling
-  handleCtrlC: () => true
-  ensureQueueActiveBeforeSubmit: () => boolean
-  nextCtrlCWillExit: boolean
-}
-
-export function useChatStreaming({
-  inputValue,
-  setInputValue,
-  terminalWidth,
-  separatorWidth,
-}: UseChatStreamingOptions): UseChatStreamingReturn {
-  const queryClient = useQueryClient()
-  const [, startUiTransition] = useTransition()
-  const runtime = useChatRuntime()
-
-  // Reconnection state
-  const [showReconnectionMessage, setShowReconnectionMessage] = useState(false)
-  const reconnectionTimeout = useTimeout()
-
-  // Reconnection handler
-  const handleReconnection = useCallback(
-    (isInitialConnection: boolean) => {
-      queryClient.invalidateQueries({ queryKey: authQueryKeys.all })
-
-      startUiTransition(() => {
-        if (!isInitialConnection) {
-          setShowReconnectionMessage(true)
-          reconnectionTimeout.setTimeout(
-            'reconnection-message',
-            () => {
-              startUiTransition(() => {
-                setShowReconnectionMessage(false)
-              })
-            },
-            RECONNECTION_MESSAGE_DURATION_MS,
-          )
-        }
-      })
-    },
-    [queryClient, reconnectionTimeout, startUiTransition],
-  )
-
-  // Connection status
-  const isConnected = useConnectionStatus(handleReconnection)
-
-  const {
-    timerStartTime,
-    queuedMessages,
-    streamStatus,
-    isWaitingForResponse,
-    isStreaming,
-    queuePaused,
-    streamMessageIdRef,
-    addToQueue,
-    setCanProcessQueue,
-    resumeQueue,
-    clearQueue,
-  } = runtime
-
-  // Queue UI
-  const {
-    queuedCount,
-    shouldShowQueuePreview,
-    inputBoxTitle,
-    inputPlaceholder,
-  } = useQueueUi({
-    queuePaused,
-    queuedMessages,
-    separatorWidth,
-    terminalWidth,
-  })
-
-  // Exit handling
-  const { handleCtrlC: baseHandleCtrlC, nextCtrlCWillExit } = useExitHandler({
-    inputValue,
-    setInputValue,
-  })
-
-  // Queue controls
-  const { handleCtrlC, ensureQueueActiveBeforeSubmit } = useQueueControls({
-    queuePaused,
-    queuedCount,
-    clearQueue,
-    resumeQueue,
-    inputHasText: Boolean(inputValue),
-    baseHandleCtrlC,
-  })
-
-  return {
-    // Connection state
-    isConnected,
-    showReconnectionMessage,
-
-    // Timer
-    timerStartTime,
-
-    // Stream status
-    streamStatus,
-    isWaitingForResponse,
-    isStreaming,
-
-    // Queue management
-    queuedMessages,
-    queuePaused,
-    streamMessageIdRef,
-    addToQueue,
-    setCanProcessQueue,
-    clearQueue,
-
-    // Queue UI
-    queuedCount,
-    shouldShowQueuePreview,
-    inputBoxTitle,
-    inputPlaceholder,
-
-    // Exit handling
-    handleCtrlC,
-    ensureQueueActiveBeforeSubmit,
-    nextCtrlCWillExit,
-  }
-}

package/src/hooks/use-chat-ui.ts

@@ -1,131 +0,0 @@
-/**
- * Chat UI hook - scroll behavior, terminal dimensions, and theme.
- */
-
-import { useEffect, useMemo, useRef, useState } from 'react'
-
-import { useChatScrollbox } from './use-scroll-management'
-import { useTerminalDimensions } from './use-terminal-dimensions'
-import { useTerminalLayout } from './use-terminal-layout'
-import { useTheme } from './use-theme'
-import { createChatScrollAcceleration } from '../utils/chat-scroll-accel'
-import { createMarkdownPalette } from '../utils/theme-system'
-
-import type { ChatMessage } from '../types/chat'
-import type { ChatTheme } from '../types/theme-system'
-import type { MarkdownPalette } from '../utils/markdown-renderer'
-import type { ScrollBoxRenderable } from '@opentui/core'
-
-export interface UseChatUIOptions {
-  messages: ChatMessage[]
-  isUserCollapsing: () => boolean
-}
-
-export interface UseChatUIReturn {
-  // Scroll management
-  scrollRef: React.RefObject<ScrollBoxRenderable | null>
-  scrollToLatest: () => void
-  scrollUp: () => void
-  scrollDown: () => void
-  appliedScrollboxProps: Record<string, unknown>
-  isAtBottom: boolean
-  hasOverflow: boolean
-
-  // Terminal dimensions
-  terminalWidth: number
-  terminalHeight: number
-  separatorWidth: number
-  messageAvailableWidth: number
-  isCompactHeight: boolean
-  isNarrowWidth: boolean
-
-  // Theme
-  theme: ChatTheme
-  markdownPalette: MarkdownPalette
-}
-
-export function useChatUI({
-  messages,
-  isUserCollapsing,
-}: UseChatUIOptions): UseChatUIReturn {
-  const scrollRef = useRef<ScrollBoxRenderable | null>(null)
-  const [hasOverflow, setHasOverflow] = useState(false)
-  const hasOverflowRef = useRef(false)
-
-  // Terminal dimensions
-  const { separatorWidth, terminalWidth, terminalHeight } =
-    useTerminalDimensions()
-  const { height: heightLayout, width: widthLayout } = useTerminalLayout()
-  const isCompactHeight = heightLayout.is('xs')
-  const isNarrowWidth = widthLayout.is('xs')
-  const messageAvailableWidth = separatorWidth
-
-  // Theme
-  const theme = useTheme()
-  const markdownPalette = useMemo(() => createMarkdownPalette(theme), [theme])
-
-  // Scroll management
-  const { scrollToLatest, scrollUp, scrollDown, scrollboxProps, isAtBottom } =
-    useChatScrollbox(scrollRef, messages, isUserCollapsing)
-
-  // Check if content has overflowed and needs scrolling
-  useEffect(() => {
-    const scrollbox = scrollRef.current
-    if (!scrollbox) return
-
-    const checkOverflow = () => {
-      const contentHeight = scrollbox.scrollHeight
-      const viewportHeight = scrollbox.viewport.height
-      const isOverflowing = contentHeight > viewportHeight
-
-      if (hasOverflowRef.current !== isOverflowing) {
-        hasOverflowRef.current = isOverflowing
-        setHasOverflow(isOverflowing)
-      }
-    }
-
-    checkOverflow()
-    scrollbox.verticalScrollBar.on('change', checkOverflow)
-
-    return () => {
-      scrollbox.verticalScrollBar.off('change', checkOverflow)
-    }
-  }, [])
-
-  // Inertial scroll acceleration
-  const inertialScrollAcceleration = useMemo(
-    () => createChatScrollAcceleration(),
-    [],
-  )
-
-  const appliedScrollboxProps = useMemo(
-    () =>
-      inertialScrollAcceleration
-        ? { ...scrollboxProps, scrollAcceleration: inertialScrollAcceleration }
-        : scrollboxProps,
-    [scrollboxProps, inertialScrollAcceleration],
-  )
-
-  return {
-    // Scroll management
-    scrollRef,
-    scrollToLatest,
-    scrollUp,
-    scrollDown,
-    appliedScrollboxProps,
-    isAtBottom,
-    hasOverflow,
-
-    // Terminal dimensions
-    terminalWidth,
-    terminalHeight,
-    separatorWidth,
-    messageAvailableWidth,
-    isCompactHeight,
-    isNarrowWidth,
-
-    // Theme
-    theme,
-    markdownPalette,
-  }
-}

package/src/hooks/use-clipboard.ts

@@ -1,151 +0,0 @@
-import { useRenderer } from '@opentui/react'
-import { useEffect, useRef, useState } from 'react'
-
-import { CURSOR_CHAR } from '../components/multiline-input'
-import {
-  copyTextToClipboard,
-  registerClipboardRenderer,
-  subscribeClipboardMessages,
-  unregisterClipboardRenderer,
-} from '../utils/clipboard'
-
-function formatDefaultClipboardMessage(text: string): string | null {
-  const preview = text.replace(/\s+/g, ' ').trim()
-  if (!preview) {
-    return null
-  }
-  const truncated = preview.length > 40 ? `${preview.slice(0, 37)}…` : preview
-  return `Copied: "${truncated}"`
-}
-
-export const useClipboard = () => {
-  const renderer = useRenderer()
-  const [statusMessage, setStatusMessage] = useState<string | null>(null)
-  const [hasSelection, setHasSelection] = useState(false)
-  const pendingCopyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null,
-  )
-  const pendingSelectionRef = useRef<string | null>(null)
-  const lastCopiedRef = useRef<string | null>(null)
-  const activeCopyControllerRef = useRef<AbortController | null>(null)
-
-  useEffect(() => {
-    return subscribeClipboardMessages(setStatusMessage)
-  }, [])
-
-  // Register the renderer globally so all copyTextToClipboard callers
-  // can use the renderer's OSC 52 method when available.
-  useEffect(() => {
-    if (renderer) {
-      registerClipboardRenderer(renderer as unknown as Record<string, unknown>)
-      return () => {
-        unregisterClipboardRenderer()
-      }
-    }
-    return undefined
-  }, [renderer])
-
-  useEffect(() => {
-    const handleSelection = (selectionEvent: any) => {
-      const selectionObj = selectionEvent ?? (renderer as any)?.getSelection?.()
-      const rawText: string | null = selectionObj?.getSelectedText
-        ? selectionObj.getSelectedText()
-        : typeof selectionObj === 'string'
-          ? selectionObj
-          : null
-
-      // Filter out cursor character from selected text
-      const cleanedText =
-        rawText?.replace(new RegExp(CURSOR_CHAR, 'g'), '') ?? null
-
-      if (!cleanedText || cleanedText.trim().length === 0) {
-        pendingSelectionRef.current = null
-        activeCopyControllerRef.current?.abort()
-        activeCopyControllerRef.current = null
-        setHasSelection(false)
-        if (pendingCopyTimeoutRef.current) {
-          clearTimeout(pendingCopyTimeoutRef.current)
-          pendingCopyTimeoutRef.current = null
-        }
-        return
-      }
-
-      if (cleanedText === pendingSelectionRef.current) {
-        return
-      }
-
-      // A prior selection may still be waiting on a clipboard backend. Stop it
-      // immediately so it cannot finish after this newer selection and restore
-      // stale clipboard contents.
-      activeCopyControllerRef.current?.abort()
-      const controller = new AbortController()
-      activeCopyControllerRef.current = controller
-
-      // Track that there's an active selection for visual feedback
-      setHasSelection(true)
-
-      pendingSelectionRef.current = cleanedText
-
-      if (pendingCopyTimeoutRef.current) {
-        clearTimeout(pendingCopyTimeoutRef.current)
-      }
-
-      pendingCopyTimeoutRef.current = setTimeout(() => {
-        pendingCopyTimeoutRef.current = null
-        const pending = pendingSelectionRef.current
-        if (!pending || pending === lastCopiedRef.current) {
-          if (activeCopyControllerRef.current === controller) {
-            activeCopyControllerRef.current = null
-          }
-          return
-        }
-
-        const successMessage = formatDefaultClipboardMessage(pending)
-        void copyTextToClipboard(pending, {
-          successMessage,
-          durationMs: 3000,
-          signal: controller.signal,
-        })
-          .then(() => {
-            if (activeCopyControllerRef.current === controller) {
-              lastCopiedRef.current = pending
-              // Clear selection visual state after successful copy
-              setHasSelection(false)
-            }
-          })
-          .catch(() => {
-            // Errors are logged within copyTextToClipboard
-          })
-          .finally(() => {
-            if (activeCopyControllerRef.current === controller) {
-              activeCopyControllerRef.current = null
-            }
-          })
-      }, 250)
-    }
-
-    if (renderer?.on) {
-      renderer.on('selection', handleSelection)
-      return () => {
-        renderer.off?.('selection', handleSelection)
-      }
-    }
-    return undefined
-  }, [renderer])
-
-  useEffect(() => {
-    return () => {
-      if (pendingCopyTimeoutRef.current) {
-        clearTimeout(pendingCopyTimeoutRef.current)
-        pendingCopyTimeoutRef.current = null
-      }
-      activeCopyControllerRef.current?.abort()
-      activeCopyControllerRef.current = null
-    }
-  }, [])
-
-  return {
-    statusMessage,
-    hasSelection,
-  }
-}