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

- Create useKeyboardNavigation hook for arrow/word/line navigation
- Create useKeyboardShortcuts hook for enter/deletion handling
- Create useTextEditing hook for character input and cursor movement
- Create useTextSelection hook for selection management
- Create useMouseInput hook for click-to-cursor positioning
- Add text-navigation.ts and keyboard-event-utils.ts utilities
- Add opentui-internals.ts type definitions
- Add TAB_WIDTH constant
- Reduce multiline-input.tsx from ~1100 to ~320 lines (-71%)

Author: brandonkachen

cli/src/components/multiline-input.tsx

@@ -0,0 +1,241 @@
+import { useCallback } 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'
+
+export type KeyboardNavigationOptions = {
+  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
+}
+
+/**
+ * Hook that returns a handler for navigation-related keys in the multiline input.
+ * It preserves existing behavior for:
+ * - 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 useKeyboardNavigation({
+  stateRef,
+  onChange,
+  moveCursor,
+  shouldHighlight,
+  lineInfo,
+  getOrSetStickyColumn,
+}: KeyboardNavigationOptions) {
+  return useCallback(
+    (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,
+        )
+        onChange({
+          text: value,
+          cursorPosition: calculateNewCursorPosition({
+            cursorPosition,
+            lineStarts,
+            cursorIsChar: !shouldHighlight,
+            direction: 'down',
+            desiredIndex,
+          }),
+          lastEditDueToNav: false,
+        })
+        return true
+      }
+
+      return false
+    },
+    [
+      stateRef,
+      onChange,
+      moveCursor,
+      shouldHighlight,
+      lineInfo,
+      getOrSetStickyColumn,
+    ],
+  )
+}