@alumbwe/anvil 1.0.0

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

@@ -0,0 +1,165 @@
+/**
+ * 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

@@ -0,0 +1,180 @@
+/**
+ * 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

@@ -0,0 +1,131 @@
+/**
+ * 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

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