refactor(cli): extract multiline input hooks (Commits 2.5a + 2.5b)

Extracts keyboard handling logic from multiline-input.tsx into dedicated hooks:
- useKeyboardNavigation: Arrow keys, word/line/document navigation
- useKeyboardShortcuts: Enter handling, deletion shortcuts

Extracts pure factory functions for testability:
- createKeyboardNavigationHandler
- createEnterKeysHandler
- createDeletionKeysHandler

New utility files:
- text-navigation.ts: findLineStart, findLineEnd, findPreviousWordBoundary, findNextWordBoundary
- keyboard-event-utils.ts: isAltModifier, preventKeyDefault

Comprehensive test coverage:
- Unit tests for all 4 text-navigation functions (90 tests including Unicode)
- Tests import actual production factory functions (not reimplementations)
- Fixed bug: cursorDown now clamps to value.length instead of returning Infinity
- Performance fix: hooks use useMemo instead of useCallback for handler memoization

Author: brandonkachen

cli/src/components/multiline-input.tsx

@@ -0,0 +1,251 @@
+import { useCallback, useMemo } from 'react'
+
+import {
+  findLineEnd,
+  findLineStart,
+  findNextWordBoundary,
+  findPreviousWordBoundary,
+} from '../utils/text-navigation'
+import { isAltModifier, preventKeyDefault } from '../utils/keyboard-event-utils'
+import { calculateNewCursorPosition } from '../utils/word-wrap-utils'
+
+import type { InputValue } from '../state/chat-store'
+import type { KeyEvent, TextBufferView } from '@opentui/core'
+import type { MutableRefObject } from 'react'
+
+/**
+ * Dependencies for the keyboard navigation handler.
+ * Exported for testability - tests can use this type with createKeyboardNavigationHandler.
+ */
+export type NavigationHandlerDeps = {
+  stateRef: MutableRefObject<{ value: string; cursorPosition: number }>
+  onChange: (value: InputValue) => void
+  moveCursor: (nextPosition: number) => void
+  shouldHighlight: boolean
+  lineInfo: TextBufferView['lineInfo'] | null
+  getOrSetStickyColumn: (lineStarts: number[], cursorIsChar: boolean) => number
+}
+
+/**
+ * @deprecated Use NavigationHandlerDeps instead
+ */
+export type KeyboardNavigationOptions = NavigationHandlerDeps
+
+/**
+ * Pure factory function that creates a keyboard navigation handler.
+ * Extracted for testability - tests can import and use this directly.
+ *
+ * Handles:
+ * - Arrow keys (up/down/left/right)
+ * - Home/End and Cmd+Left/Right, Ctrl+A/E
+ * - Word navigation via Alt+Left/Right and Alt+B/F
+ * - Document navigation via Cmd+Up/Down and Ctrl+Home/End
+ */
+export function createKeyboardNavigationHandler({
+  stateRef,
+  onChange,
+  moveCursor,
+  shouldHighlight,
+  lineInfo,
+  getOrSetStickyColumn,
+}: NavigationHandlerDeps) {
+  return (key: KeyEvent): boolean => {
+    // Read fresh state from ref to avoid stale closures
+    const { value, cursorPosition } = stateRef.current
+
+    const lowerKeyName = (key.name ?? '').toLowerCase()
+    const isAltLikeModifier = isAltModifier(key)
+
+    // Lazy getters for boundary calculations - only computed when needed
+    const getLogicalLineStart = () => findLineStart(value, cursorPosition)
+    const getLogicalLineEnd = () => findLineEnd(value, cursorPosition)
+    const getWordStart = () => findPreviousWordBoundary(value, cursorPosition)
+    const getWordEnd = () => findNextWordBoundary(value, cursorPosition)
+
+    const lineStarts = lineInfo?.lineStarts ?? []
+    const getVisualLineIndex = () =>
+      lineStarts.findLastIndex((start) => start <= cursorPosition)
+    const getVisualLineStart = () => {
+      const idx = getVisualLineIndex()
+      return idx >= 0 ? lineStarts[idx] : getLogicalLineStart()
+    }
+    const getVisualLineEnd = () => {
+      const idx = getVisualLineIndex()
+      return lineStarts[idx + 1] !== undefined
+        ? lineStarts[idx + 1] - 1
+        : getLogicalLineEnd()
+    }
+
+    // Alt+Left/B: Word left
+    if (isAltLikeModifier && (key.name === 'left' || lowerKeyName === 'b')) {
+      preventKeyDefault(key)
+      onChange({
+        text: value,
+        cursorPosition: getWordStart(),
+        lastEditDueToNav: false,
+      })
+      return true
+    }
+
+    // Alt+Right/F: Word right
+    if (isAltLikeModifier && (key.name === 'right' || lowerKeyName === 'f')) {
+      preventKeyDefault(key)
+      onChange({
+        text: value,
+        cursorPosition: getWordEnd(),
+        lastEditDueToNav: false,
+      })
+      return true
+    }
+
+    // Cmd+Left, Ctrl+A, or Home: Line start
+    if (
+      (key.meta && key.name === 'left' && !isAltLikeModifier) ||
+      (key.ctrl && lowerKeyName === 'a' && !key.meta && !key.option) ||
+      (key.name === 'home' && !key.ctrl && !key.meta)
+    ) {
+      preventKeyDefault(key)
+      onChange({
+        text: value,
+        cursorPosition: getVisualLineStart(),
+        lastEditDueToNav: false,
+      })
+      return true
+    }
+
+    // Cmd+Right, Ctrl+E, or End: Line end
+    if (
+      (key.meta && key.name === 'right' && !isAltLikeModifier) ||
+      (key.ctrl && lowerKeyName === 'e' && !key.meta && !key.option) ||
+      (key.name === 'end' && !key.ctrl && !key.meta)
+    ) {
+      preventKeyDefault(key)
+      onChange({
+        text: value,
+        cursorPosition: getVisualLineEnd(),
+        lastEditDueToNav: false,
+      })
+      return true
+    }
+
+    // Cmd+Up or Ctrl+Home: Document start
+    if (
+      (key.meta && key.name === 'up') ||
+      (key.ctrl && key.name === 'home')
+    ) {
+      preventKeyDefault(key)
+      onChange({ text: value, cursorPosition: 0, lastEditDueToNav: false })
+      return true
+    }
+
+    // Cmd+Down or Ctrl+End: Document end
+    if (
+      (key.meta && key.name === 'down') ||
+      (key.ctrl && key.name === 'end')
+    ) {
+      preventKeyDefault(key)
+      onChange({
+        text: value,
+        cursorPosition: value.length,
+        lastEditDueToNav: false,
+      })
+      return true
+    }
+
+    // Ctrl+B: Backward char (Emacs)
+    if (key.ctrl && lowerKeyName === 'b' && !key.meta && !key.option) {
+      preventKeyDefault(key)
+      onChange({
+        text: value,
+        cursorPosition: Math.max(0, cursorPosition - 1),
+        lastEditDueToNav: false,
+      })
+      return true
+    }
+
+    // Ctrl+F: Forward char (Emacs)
+    if (key.ctrl && lowerKeyName === 'f' && !key.meta && !key.option) {
+      preventKeyDefault(key)
+      onChange({
+        text: value,
+        cursorPosition: Math.min(value.length, cursorPosition + 1),
+        lastEditDueToNav: false,
+      })
+      return true
+    }
+
+    // Left arrow (no modifiers)
+    if (key.name === 'left' && !key.ctrl && !key.meta && !key.option) {
+      preventKeyDefault(key)
+      moveCursor(cursorPosition - 1)
+      return true
+    }
+
+    // Right arrow (no modifiers)
+    if (key.name === 'right' && !key.ctrl && !key.meta && !key.option) {
+      preventKeyDefault(key)
+      moveCursor(cursorPosition + 1)
+      return true
+    }
+
+    // Up arrow (no modifiers)
+    if (key.name === 'up' && !key.ctrl && !key.meta && !key.option) {
+      preventKeyDefault(key)
+      const desiredIndex = getOrSetStickyColumn(lineStarts, !shouldHighlight)
+      onChange({
+        text: value,
+        cursorPosition: calculateNewCursorPosition({
+          cursorPosition,
+          lineStarts,
+          cursorIsChar: !shouldHighlight,
+          direction: 'up',
+          desiredIndex,
+        }),
+        lastEditDueToNav: false,
+      })
+      return true
+    }
+
+    // Down arrow (no modifiers)
+    if (key.name === 'down' && !key.ctrl && !key.meta && !key.option) {
+      preventKeyDefault(key)
+      const desiredIndex = getOrSetStickyColumn(lineStarts, !shouldHighlight)
+      const newPos = calculateNewCursorPosition({
+        cursorPosition,
+        lineStarts,
+        cursorIsChar: !shouldHighlight,
+        direction: 'down',
+        desiredIndex,
+      })
+      onChange({
+        text: value,
+        // Clamp to value.length - calculateNewCursorPosition returns Infinity for last line
+        cursorPosition: Math.min(newPos, value.length),
+        lastEditDueToNav: false,
+      })
+      return true
+    }
+
+    return false
+  }
+}
+
+/**
+ * Hook that returns a handler for navigation-related keys in the multiline input.
+ * Wraps createKeyboardNavigationHandler in useMemo for React memoization.
+ */
+export function useKeyboardNavigation(
+  deps: NavigationHandlerDeps,
+): (key: KeyEvent) => boolean {
+  return useMemo(
+    () => createKeyboardNavigationHandler(deps),
+    [
+      deps.stateRef,
+      deps.onChange,
+      deps.moveCursor,
+      deps.shouldHighlight,
+      deps.lineInfo,
+      deps.getOrSetStickyColumn,
+    ],
+  )
+}