@alumbwe/anvil 1.0.0 → 1.0.2

package/src/components/multiline-input.tsx

@@ -1,1241 +0,0 @@
-import {
-  decodePasteBytes,
-  stripAnsiSequences,
-  TextAttributes,
-} from '@opentui/core'
-import { useAppContext, useKeyboard, useRenderer } from '@opentui/react'
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react'
-
-import { InputCursor } from './input-cursor'
-import { useTheme } from '../hooks/use-theme'
-import { useChatStore } from '../state/chat-store'
-import {
-  getKeypadPrintableSequence,
-  isKeypadEnter,
-} from '../utils/keypad-keys'
-import { clamp } from '../utils/math'
-import {
-  isLinefeedActingAsEnter,
-  markReturnKeySeenForKey,
-} from '../utils/terminal-enter-detection'
-import { supportsTruecolor } from '../utils/theme-system'
-import { calculateNewCursorPosition } from '../utils/word-wrap-utils'
-
-import type { InputValue } from '../types/store'
-import type {
-  KeyEvent,
-  MouseEvent,
-  PasteEvent,
-  ScrollBoxRenderable,
-  TextBufferView,
-  TextRenderable,
-} from '@opentui/core'
-
-function getPasteText(event: PasteEvent): string {
-  return stripAnsiSequences(decodePasteBytes(event.bytes))
-}
-
-// Helper functions for text manipulation
-function findLineStart(text: string, cursor: number): number {
-  let pos = Math.max(0, Math.min(cursor, text.length))
-  while (pos > 0 && text[pos - 1] !== '\n') {
-    pos--
-  }
-  return pos
-}
-
-function findLineEnd(text: string, cursor: number): number {
-  let pos = Math.max(0, Math.min(cursor, text.length))
-  while (pos < text.length && text[pos] !== '\n') {
-    pos++
-  }
-  return pos
-}
-
-function findPreviousWordBoundary(text: string, cursor: number): number {
-  let pos = Math.max(0, Math.min(cursor, text.length))
-
-  // Skip whitespace backwards
-  while (pos > 0 && /\s/.test(text[pos - 1])) {
-    pos--
-  }
-
-  // Skip word characters backwards
-  while (pos > 0 && !/\s/.test(text[pos - 1])) {
-    pos--
-  }
-
-  return pos
-}
-
-function findNextWordBoundary(text: string, cursor: number): number {
-  let pos = Math.max(0, Math.min(cursor, text.length))
-
-  // Skip non-whitespace forwards
-  while (pos < text.length && !/\s/.test(text[pos])) {
-    pos++
-  }
-
-  // Skip whitespace forwards
-  while (pos < text.length && /\s/.test(text[pos])) {
-    pos++
-  }
-
-  return pos
-}
-
-export const CURSOR_CHAR = '▍'
-const CONTROL_CHAR_REGEX = /[\u0000-\u0008\u000b-\u000c\u000e-\u001f\u007f]/
-const TAB_WIDTH = 4
-
-/**
- * Check if a key event represents printable character input (not a special key).
- * Uses a positive heuristic based on key.name length rather than a brittle deny-list.
- *
- * The key insight is that OpenTUI's parser assigns descriptive multi-character names
- * to special keys (like 'backspace', 'up', 'f1') while regular printable characters
- * either have no name (multi-byte input like Chinese) or a single-character name.
- */
-function isPrintableCharacterKey(key: KeyEvent): boolean {
-  const name = key.name
-
-  // No name = likely multi-byte input (Chinese, Japanese, Korean, etc.) - treat as printable
-  if (!name) return true
-
-  // Single character name = regular ASCII printable (a, b, 1, $, etc.)
-  if (name.length === 1) return true
-
-  // Special case: space key has name 'space' but is printable
-  if (name === 'space') return true
-
-  // Multi-char name = special key (up, f1, backspace, etc.)
-  return false
-}
-
-function getPrintableKeySequence(key: KeyEvent): string | null {
-  if (!key.sequence || key.sequence.length < 1) return null
-  if (key.ctrl || key.meta || key.option) return null
-
-  const keypadValue = getKeypadPrintableSequence(key)
-  if (keypadValue !== null) return keypadValue
-
-  if (!CONTROL_CHAR_REGEX.test(key.sequence) && isPrintableCharacterKey(key)) {
-    return key.sequence
-  }
-
-  return null
-}
-
-// Helper to convert render position (in tab-expanded string) to original text position
-function renderPositionToOriginal(text: string, renderPos: number): number {
-  let originalPos = 0
-  let currentRenderPos = 0
-
-  while (originalPos < text.length && currentRenderPos < renderPos) {
-    if (text[originalPos] === '\t') {
-      currentRenderPos += TAB_WIDTH
-    } else {
-      currentRenderPos += 1
-    }
-    originalPos++
-  }
-
-  return Math.min(originalPos, text.length)
-}
-
-type KeyWithPreventDefault =
-  | {
-      preventDefault?: () => void
-    }
-  | null
-  | undefined
-
-function preventKeyDefault(key: KeyWithPreventDefault) {
-  key?.preventDefault?.()
-}
-
-// Helper to check for alt-like modifier keys
-function isAltModifier(key: KeyEvent): boolean {
-  const ESC = '\x1b'
-  return Boolean(
-    key.option ||
-      (key.sequence?.length === 2 &&
-        key.sequence[0] === ESC &&
-        key.sequence[1] !== '['),
-  )
-}
-
-// Helper type for scrollbox with focus/blur methods (not exposed in OpenTUI types but available at runtime)
-interface FocusableScrollBox {
-  focus?: () => void
-  blur?: () => void
-}
-
-interface MultilineInputProps {
-  value: string
-  onChange: (value: InputValue) => void
-  onSubmit: () => void
-  onKeyIntercept?: (key: KeyEvent) => boolean
-  onPaste: (fallbackText?: string) => void
-  placeholder?: string
-  focused?: boolean
-  shouldBlinkCursor?: boolean
-  maxHeight?: number
-  minHeight?: number
-  cursorPosition: number
-  showScrollbar?: boolean
-}
-
-export type MultilineInputHandle = {
-  focus: () => void
-  blur: () => void
-}
-
-export const MultilineInput = forwardRef<
-  MultilineInputHandle,
-  MultilineInputProps
->(function MultilineInput(
-  {
-    value,
-    onChange,
-    onSubmit,
-    onPaste,
-    placeholder = '',
-    focused = true,
-    shouldBlinkCursor,
-    maxHeight = 5,
-    minHeight = 1,
-    onKeyIntercept,
-    cursorPosition,
-    showScrollbar = false,
-  }: MultilineInputProps,
-  forwardedRef,
-) {
-  const theme = useTheme()
-  const renderer = useRenderer()
-  const appContext = useAppContext()
-  const { keyHandler } = appContext
-  const hookBlinkValue = useChatStore((state) => state.isFocusSupported)
-  const effectiveShouldBlinkCursor = shouldBlinkCursor ?? hookBlinkValue
-
-  const scrollBoxRef = useRef<ScrollBoxRenderable | null>(null)
-  const [lastActivity, setLastActivity] = useState(Date.now())
-
-  const stickyColumnRef = useRef<number | null>(null)
-
-  // Refs to track latest value and cursor position synchronously for IME input handling.
-  // When IME sends multiple character events rapidly (e.g., Chinese input), React batches
-  // state updates, causing subsequent events to see stale closure values. These refs are
-  // updated synchronously to ensure each keystroke builds on the previous one.
-  const valueRef = useRef(value)
-  const cursorPositionRef = useRef(cursorPosition)
-
-  // Keep refs current on every render (synchronous assignment avoids useEffect timing issues)
-  valueRef.current = value
-  cursorPositionRef.current = cursorPosition
-
-  // Helper to get or set the sticky column for vertical navigation.
-  // When stickyColumnRef.current is set, we return it (preserving column across
-  // multiple up/down presses). When null, we calculate from current cursor position.
-  const getOrSetStickyColumn = useCallback(
-    (lineStarts: number[], cursorIsChar: boolean): number => {
-      if (stickyColumnRef.current != null) {
-        return stickyColumnRef.current
-      }
-      const lineIndex = lineStarts.findLastIndex(
-        (lineStart) => lineStart <= cursorPosition,
-      )
-      const column =
-        lineIndex === -1
-          ? 0
-          : cursorPosition - lineStarts[lineIndex] + (cursorIsChar ? -1 : 0)
-      stickyColumnRef.current = Math.max(0, column)
-      return stickyColumnRef.current
-    },
-    [cursorPosition],
-  )
-
-  // Update last activity on value or cursor changes
-  useEffect(() => {
-    setLastActivity(Date.now())
-  }, [value, cursorPosition])
-
-  const textRef = useRef<TextRenderable | null>(null)
-
-  const lineInfo = textRef.current
-    ? (
-        (textRef.current satisfies TextRenderable as any)
-          .textBufferView as TextBufferView
-      ).lineInfo
-    : null
-
-  // Focus/blur scrollbox when focused prop changes
-  const prevFocusedRef = useRef(false)
-  useEffect(() => {
-    if (focused && !prevFocusedRef.current) {
-      (scrollBoxRef.current as FocusableScrollBox | null)?.focus?.()
-    } else if (!focused && prevFocusedRef.current) {
-      (scrollBoxRef.current as FocusableScrollBox | null)?.blur?.()
-    }
-    prevFocusedRef.current = focused
-  }, [focused])
-
-  // Expose focus/blur for imperative use cases
-  useImperativeHandle(
-    forwardedRef,
-    () => ({
-      focus: () => {
-        (scrollBoxRef.current as FocusableScrollBox | null)?.focus?.()
-      },
-      blur: () => {
-        (scrollBoxRef.current as FocusableScrollBox | null)?.blur?.()
-      },
-    }),
-    [],
-  )
-
-  const cursorRow = lineInfo
-    ? Math.max(
-        0,
-        lineInfo.lineStartCols.findLastIndex(
-          (lineStart) => lineStart <= cursorPosition,
-        ),
-      )
-    : 0
-
-  // Auto-scroll to cursor when content changes
-  useEffect(() => {
-    const scrollBox = scrollBoxRef.current
-    if (scrollBox && focused) {
-      const scrollPosition = clamp(
-        scrollBox.verticalScrollBar.scrollPosition,
-        Math.max(0, cursorRow - scrollBox.viewport.height + 1),
-        Math.min(scrollBox.scrollHeight - scrollBox.viewport.height, cursorRow),
-      )
-
-      scrollBox.verticalScrollBar.scrollPosition = scrollPosition
-    }
-  }, [scrollBoxRef.current, cursorPosition, focused, cursorRow])
-
-  // Helper to get current selection in original text coordinates
-  const getSelectionRange = useCallback((): { start: number; end: number } | null => {
-    const textBufferView = (textRef.current as any)?.textBufferView
-    if (!textBufferView?.hasSelection?.() || !textBufferView?.getSelection) {
-      return null
-    }
-    const selection = textBufferView.getSelection()
-    if (!selection) return null
-
-    // Convert from render positions to original text positions
-    const start = renderPositionToOriginal(value, Math.min(selection.start, selection.end))
-    const end = renderPositionToOriginal(value, Math.max(selection.start, selection.end))
-
-    if (start === end) return null
-    return { start, end }
-  }, [value])
-
-  // Helper to clear the current selection
-  const clearSelection = useCallback(() => {
-    // Use renderer's clearSelection for proper visual clearing
-    ;(renderer as any)?.clearSelection?.()
-  }, [renderer])
-
-  // Helper to delete selected text and return new value and cursor position
-  const deleteSelection = useCallback((): { newValue: string; newCursor: number } | null => {
-    const selection = getSelectionRange()
-    if (!selection) return null
-
-    const newValue = value.slice(0, selection.start) + value.slice(selection.end)
-    clearSelection()
-    return { newValue, newCursor: selection.start }
-  }, [value, getSelectionRange, clearSelection])
-
-  // Helper to handle selection deletion and call onChange if selection existed
-  // Returns true if selection was deleted, false otherwise
-  const handleSelectionDeletion = useCallback((): boolean => {
-    const deleted = deleteSelection()
-    if (deleted) {
-      onChange({
-        text: deleted.newValue,
-        cursorPosition: deleted.newCursor,
-        lastEditDueToNav: false,
-      })
-      return true
-    }
-    return false
-  }, [deleteSelection, onChange])
-
-  const insertTextAtCursor = useCallback(
-    (textToInsert: string) => {
-      if (!textToInsert) return
-
-      // Check if there's a selection to replace
-      const selection = getSelectionRange()
-      if (selection) {
-        // Replace selected text with the new text
-        clearSelection()
-        // Read from refs which have the latest values (updated synchronously below)
-        const currentValue = valueRef.current
-        const newValue =
-          currentValue.slice(0, selection.start) +
-          textToInsert +
-          currentValue.slice(selection.end)
-        const newCursor = selection.start + textToInsert.length
-
-        // Update refs synchronously BEFORE calling onChange - critical for IME input
-        // where multiple characters may arrive before React processes state updates
-        valueRef.current = newValue
-        cursorPositionRef.current = newCursor
-
-        onChange({
-          text: newValue,
-          cursorPosition: newCursor,
-          lastEditDueToNav: false,
-        })
-        return
-      }
-
-      // No selection, insert at cursor
-      // Read from refs to get latest state (handles rapid IME input)
-      const currentValue = valueRef.current
-      const currentCursor = cursorPositionRef.current
-      const newValue =
-        currentValue.slice(0, currentCursor) +
-        textToInsert +
-        currentValue.slice(currentCursor)
-      const newCursor = currentCursor + textToInsert.length
-
-      // Update refs synchronously BEFORE calling onChange - critical for IME input
-      // where multiple characters may arrive before React processes state updates
-      valueRef.current = newValue
-      cursorPositionRef.current = newCursor
-
-      onChange({
-        text: newValue,
-        cursorPosition: newCursor,
-        lastEditDueToNav: false,
-      })
-    },
-    [onChange, getSelectionRange, clearSelection],
-  )
-
-  const moveCursor = useCallback(
-    (nextPosition: number) => {
-      const clamped = Math.max(0, Math.min(value.length, nextPosition))
-      if (clamped === cursorPosition) return
-      onChange({
-        text: value,
-        cursorPosition: clamped,
-        lastEditDueToNav: false,
-      })
-    },
-    [cursorPosition, onChange, value],
-  )
-
-  // Handle mouse clicks to position cursor
-  const handleMouseDown = useCallback(
-    (event: MouseEvent) => {
-      if (!focused) return
-
-      // Clear sticky column since this is not up/down navigation
-      stickyColumnRef.current = null
-
-      const scrollBox = scrollBoxRef.current
-      if (!scrollBox) return
-
-      const lineStarts = lineInfo?.lineStartCols ?? [0]
-
-      const viewport = (scrollBox as any).viewport
-      const viewportTop = Number(viewport?.y ?? 0)
-      const viewportLeft = Number(viewport?.x ?? 0)
-
-      // Get click position, accounting for scroll
-      const scrollPosition = scrollBox.verticalScrollBar?.scrollPosition ?? 0
-      const clickRowInViewport = Math.floor(event.y - viewportTop)
-      const clickRow = clickRowInViewport + scrollPosition
-
-      // Find which visual line was clicked
-      const lineIndex = Math.min(
-        Math.max(0, clickRow),
-        lineStarts.length - 1,
-      )
-
-      // Get the character range for this line
-      const lineStartChar = lineStarts[lineIndex]
-      const lineEndChar = lineStarts[lineIndex + 1] ?? value.length
-
-      // Convert click x to character position, accounting for tabs
-      const clickCol = Math.max(0, Math.floor(event.x - viewportLeft))
-
-      let visualCol = 0
-      let charIndex = lineStartChar
-
-      while (charIndex < lineEndChar && visualCol < clickCol) {
-        const char = value[charIndex]
-        if (char === '\t') {
-          visualCol += TAB_WIDTH
-        } else if (char === '\n') {
-          break
-        } else {
-          visualCol += 1
-        }
-        charIndex++
-      }
-
-      // Clamp to valid range
-      const newCursorPosition = Math.min(charIndex, value.length)
-
-      // Update cursor position if changed
-      if (newCursorPosition !== cursorPosition) {
-        onChange({
-          text: value,
-          cursorPosition: newCursorPosition,
-          lastEditDueToNav: false,
-        })
-      }
-    },
-    [focused, lineInfo, value, cursorPosition, onChange],
-  )
-
-  const isPlaceholder = value.length === 0 && placeholder.length > 0
-  const displayValue = isPlaceholder ? placeholder : value
-  const showCursor = focused
-
-  // Replace tabs with spaces for proper rendering
-  const displayValueForRendering = displayValue.replace(
-    /\t/g,
-    ' '.repeat(TAB_WIDTH),
-  )
-
-  // Calculate cursor position in the expanded string (accounting for tabs)
-  let renderCursorPosition = 0
-  for (let i = 0; i < cursorPosition && i < displayValue.length; i++) {
-    renderCursorPosition += displayValue[i] === '\t' ? TAB_WIDTH : 1
-  }
-
-  const { beforeCursor, afterCursor, activeChar, shouldHighlight } = (() => {
-    if (!showCursor) {
-      return {
-        beforeCursor: '',
-        afterCursor: '',
-        activeChar: ' ',
-        shouldHighlight: false,
-      }
-    }
-
-    const beforeCursor = displayValueForRendering.slice(0, renderCursorPosition)
-    const afterCursor = displayValueForRendering.slice(renderCursorPosition)
-    const activeChar = afterCursor.charAt(0) || ' '
-    const shouldHighlight =
-      !isPlaceholder &&
-      renderCursorPosition < displayValueForRendering.length &&
-      displayValue[cursorPosition] !== '\n' &&
-      displayValue[cursorPosition] !== '\t'
-
-    return {
-      beforeCursor,
-      afterCursor,
-      activeChar,
-      shouldHighlight,
-    }
-  })()
-
-  // --- Keyboard Handler Helpers ---
-
-  // Handle enter/newline keys
-  const handleEnterKeys = useCallback(
-    (key: KeyEvent): boolean => {
-      const lowerKeyName = (key.name ?? '').toLowerCase()
-      const keypadEnter = isKeypadEnter(key)
-      const isReturnOrEnter =
-        key.name === 'return' || key.name === 'enter' || keypadEnter
-
-      markReturnKeySeenForKey(key)
-
-      const linefeedIsEnter = lowerKeyName === 'linefeed' && isLinefeedActingAsEnter()
-      const isEnterKey = isReturnOrEnter || linefeedIsEnter
-
-      const isCtrlJ =
-        (lowerKeyName === 'linefeed' && !linefeedIsEnter) ||
-        (key.ctrl &&
-          !key.meta &&
-          !key.option &&
-          lowerKeyName === 'j')
-
-      // Only handle Enter and Ctrl+J here
-      if (!isEnterKey && !isCtrlJ) return false
-
-      const isAltLikeModifier = isAltModifier(key)
-      // Kitty-protocol keyboards encode plain Enter as an escape sequence
-      // (e.g. \x1b[13u) but report modifiers reliably, so the escape-prefix
-      // and raw \r/\n heuristics (which exist to catch legacy Alt+Enter)
-      // must not apply to kitty events.
-      const isKittyKey = key.source === 'kitty'
-      const hasEscapePrefix =
-        !isKittyKey &&
-        typeof key.sequence === 'string' &&
-        key.sequence.length > 0 &&
-        key.sequence.charCodeAt(0) === 0x1b
-      const hasBackslashBeforeCursor =
-        cursorPosition > 0 && value[cursorPosition - 1] === '\\'
-
-      // Plain Enter: no modifiers, sequence is '\r' (macOS) or '\n' (Linux)
-      const isPlainEnter =
-        isEnterKey &&
-        !key.shift &&
-        !key.ctrl &&
-        !key.meta &&
-        !key.option &&
-        !isAltLikeModifier &&
-        (!hasEscapePrefix || keypadEnter) &&
-        (key.sequence === '\r' ||
-          key.sequence === '\n' ||
-          keypadEnter ||
-          isKittyKey) &&
-        !hasBackslashBeforeCursor
-      const isShiftEnter = isEnterKey && Boolean(key.shift)
-      const isOptionEnter =
-        isEnterKey && !keypadEnter && (isAltLikeModifier || hasEscapePrefix)
-      const isBackslashEnter = isEnterKey && hasBackslashBeforeCursor
-
-      const shouldInsertNewline =
-        isCtrlJ || isShiftEnter || isOptionEnter || isBackslashEnter
-
-      if (shouldInsertNewline) {
-        preventKeyDefault(key)
-
-        // For backslash+Enter, remove the backslash and insert newline
-        if (isBackslashEnter) {
-          const newValue =
-            value.slice(0, cursorPosition - 1) +
-            '\n' +
-            value.slice(cursorPosition)
-          onChange({
-            text: newValue,
-            cursorPosition,
-            lastEditDueToNav: false,
-          })
-          return true
-        }
-
-        // For other newline shortcuts (Shift+Enter, Option+Enter, Ctrl+J), just insert newline
-        const newValue =
-          value.slice(0, cursorPosition) + '\n' + value.slice(cursorPosition)
-        onChange({
-          text: newValue,
-          cursorPosition: cursorPosition + 1,
-          lastEditDueToNav: false,
-        })
-        return true
-      }
-
-      if (isPlainEnter) {
-        preventKeyDefault(key)
-        onSubmit()
-        return true
-      }
-
-      return false
-    },
-    [value, cursorPosition, onChange, onSubmit],
-  )
-
-  // Handle deletion keys (backspace, delete, ctrl+h, ctrl+d, word/line deletion)
-  const handleDeletionKeys = useCallback(
-    (key: KeyEvent): boolean => {
-      const lowerKeyName = (key.name ?? '').toLowerCase()
-      const isAltLikeModifier = isAltModifier(key)
-      const lineStart = findLineStart(value, cursorPosition)
-      const lineEnd = findLineEnd(value, cursorPosition)
-      const wordStart = findPreviousWordBoundary(value, cursorPosition)
-      const wordEnd = findNextWordBoundary(value, cursorPosition)
-
-      // Ctrl+U: Delete from cursor to beginning of current VISUAL line
-      if (key.ctrl && lowerKeyName === 'u' && !key.meta && !key.option) {
-        preventKeyDefault(key)
-        if (handleSelectionDeletion()) return true
-        const visualLineStart = lineInfo?.lineStartCols?.[cursorRow] ?? lineStart
-
-        if (cursorPosition > visualLineStart) {
-          const newValue =
-            value.slice(0, visualLineStart) + value.slice(cursorPosition)
-          onChange({
-            text: newValue,
-            cursorPosition: visualLineStart,
-            lastEditDueToNav: false,
-          })
-        } else if (cursorPosition > 0) {
-          const newValue =
-            value.slice(0, cursorPosition - 1) + value.slice(cursorPosition)
-          onChange({
-            text: newValue,
-            cursorPosition: cursorPosition - 1,
-            lastEditDueToNav: false,
-          })
-        }
-        return true
-      }
-
-      // Alt+Backspace or Ctrl+W: Delete word backward
-      if (
-        (key.name === 'backspace' && isAltLikeModifier) ||
-        (key.ctrl && lowerKeyName === 'w')
-      ) {
-        preventKeyDefault(key)
-        if (handleSelectionDeletion()) return true
-        const newValue =
-          value.slice(0, wordStart) + value.slice(cursorPosition)
-        onChange({
-          text: newValue,
-          cursorPosition: wordStart,
-          lastEditDueToNav: false,
-        })
-        return true
-      }
-
-      // Cmd+Delete: Delete to line start
-      if (key.name === 'delete' && key.meta && !isAltLikeModifier) {
-        preventKeyDefault(key)
-        if (handleSelectionDeletion()) return true
-        const originalValue = value
-        let newValue = originalValue
-        let nextCursor = cursorPosition
-
-        if (cursorPosition > 0) {
-          if (
-            cursorPosition === lineStart &&
-            value[cursorPosition - 1] === '\n'
-          ) {
-            newValue =
-              value.slice(0, cursorPosition - 1) + value.slice(cursorPosition)
-            nextCursor = cursorPosition - 1
-          } else {
-            newValue = value.slice(0, lineStart) + value.slice(cursorPosition)
-            nextCursor = lineStart
-          }
-        }
-
-        if (newValue === originalValue && cursorPosition > 0) {
-          newValue =
-            value.slice(0, cursorPosition - 1) + value.slice(cursorPosition)
-          nextCursor = cursorPosition - 1
-        }
-
-        if (newValue !== originalValue) {
-          onChange({
-            text: newValue,
-            cursorPosition: nextCursor,
-            lastEditDueToNav: false,
-          })
-        }
-        return true
-      }
-
-      // Alt+Delete: Delete word forward
-      if (key.name === 'delete' && isAltLikeModifier) {
-        preventKeyDefault(key)
-        if (handleSelectionDeletion()) return true
-        const newValue = value.slice(0, cursorPosition) + value.slice(wordEnd)
-        onChange({
-          text: newValue,
-          cursorPosition,
-          lastEditDueToNav: false,
-        })
-        return true
-      }
-
-      // Ctrl+K: Delete to line end
-      if (key.ctrl && lowerKeyName === 'k' && !key.meta && !key.option) {
-        preventKeyDefault(key)
-        if (handleSelectionDeletion()) return true
-        const newValue = value.slice(0, cursorPosition) + value.slice(lineEnd)
-        onChange({ text: newValue, cursorPosition, lastEditDueToNav: false })
-        return true
-      }
-
-      // Ctrl+H: Delete char backward (Emacs)
-      if (key.ctrl && lowerKeyName === 'h' && !key.meta && !key.option) {
-        preventKeyDefault(key)
-        if (handleSelectionDeletion()) return true
-        if (cursorPosition > 0) {
-          const newValue =
-            value.slice(0, cursorPosition - 1) + value.slice(cursorPosition)
-          onChange({
-            text: newValue,
-            cursorPosition: cursorPosition - 1,
-            lastEditDueToNav: false,
-          })
-        }
-        return true
-      }
-
-      // Ctrl+D: Delete char forward (Emacs)
-      if (key.ctrl && lowerKeyName === 'd' && !key.meta && !key.option) {
-        preventKeyDefault(key)
-        if (handleSelectionDeletion()) return true
-        if (cursorPosition < value.length) {
-          const newValue =
-            value.slice(0, cursorPosition) + value.slice(cursorPosition + 1)
-          onChange({
-            text: newValue,
-            cursorPosition,
-            lastEditDueToNav: false,
-          })
-        }
-        return true
-      }
-
-      // Basic Backspace (no modifiers)
-      if (key.name === 'backspace' && !key.ctrl && !key.meta && !key.option) {
-        preventKeyDefault(key)
-        if (handleSelectionDeletion()) return true
-        if (cursorPosition > 0) {
-          const newValue =
-            value.slice(0, cursorPosition - 1) + value.slice(cursorPosition)
-          onChange({
-            text: newValue,
-            cursorPosition: cursorPosition - 1,
-            lastEditDueToNav: false,
-          })
-        }
-        return true
-      }
-
-      // Basic Delete (no modifiers)
-      if (key.name === 'delete' && !key.ctrl && !key.meta && !key.option) {
-        preventKeyDefault(key)
-        if (handleSelectionDeletion()) return true
-        if (cursorPosition < value.length) {
-          const newValue =
-            value.slice(0, cursorPosition) + value.slice(cursorPosition + 1)
-          onChange({
-            text: newValue,
-            cursorPosition,
-            lastEditDueToNav: false,
-          })
-        }
-        return true
-      }
-
-      return false
-    },
-    [value, cursorPosition, onChange, lineInfo, cursorRow, handleSelectionDeletion],
-  )
-
-  // Handle navigation keys (arrows, home, end, word navigation, emacs bindings)
-  const handleNavigationKeys = useCallback(
-    (key: KeyEvent): boolean => {
-      const lowerKeyName = (key.name ?? '').toLowerCase()
-      const isAltLikeModifier = isAltModifier(key)
-      const logicalLineStart = findLineStart(value, cursorPosition)
-      const logicalLineEnd = findLineEnd(value, cursorPosition)
-      const wordStart = findPreviousWordBoundary(value, cursorPosition)
-      const wordEnd = findNextWordBoundary(value, cursorPosition)
-
-      // Read lineInfo inside the callback to get current value (not stale from closure)
-      const currentLineInfo = textRef.current
-        ? ((textRef.current as any).textBufferView as TextBufferView)?.lineInfo
-        : null
-
-      // Calculate visual line boundaries from lineInfo (accounts for word wrap)
-      // Fall back to logical line boundaries if visual info is unavailable
-      const lineStarts = currentLineInfo?.lineStartCols ?? []
-      const visualLineIndex = lineStarts.findLastIndex(
-        (start) => start <= cursorPosition,
-      )
-      const visualLineStart = visualLineIndex >= 0
-        ? lineStarts[visualLineIndex]
-        : logicalLineStart
-      const visualLineEnd = lineStarts[visualLineIndex + 1] !== undefined
-        ? lineStarts[visualLineIndex + 1] - 1
-        : logicalLineEnd
-
-      // Alt+Left/B: Word left
-      if (
-        isAltLikeModifier &&
-        (key.name === 'left' || lowerKeyName === 'b')
-      ) {
-        preventKeyDefault(key)
-        onChange({
-          text: value,
-          cursorPosition: wordStart,
-          lastEditDueToNav: false,
-        })
-        return true
-      }
-
-      // Alt+Right/F: Word right
-      if (
-        isAltLikeModifier &&
-        (key.name === 'right' || lowerKeyName === 'f')
-      ) {
-        preventKeyDefault(key)
-        onChange({
-          text: value,
-          cursorPosition: wordEnd,
-          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: visualLineStart,
-          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: visualLineEnd,
-          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: 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
-    },
-    [value, cursorPosition, onChange, moveCursor, shouldHighlight, getOrSetStickyColumn],
-  )
-
-  // Handle character input (regular chars, tab, and IME/multi-byte input)
-  const handleCharacterInput = useCallback(
-    (key: KeyEvent): boolean => {
-      // Tab: let higher-level keyboard handlers (like chat keyboard shortcuts) handle it
-      if (
-        key.name === 'tab' &&
-        key.sequence &&
-        !key.shift &&
-        !key.ctrl &&
-        !key.meta &&
-        !key.option
-      ) {
-        // Don't insert a literal tab character here; allow global keyboard handlers to process it
-        return false
-      }
-
-      // Character input (including multi-byte characters from IME like Chinese, Japanese, Korean)
-      const textToInsert = getPrintableKeySequence(key)
-      if (textToInsert !== null) {
-        preventKeyDefault(key)
-        insertTextAtCursor(textToInsert)
-        return true
-      }
-
-      return false
-    },
-    [insertTextAtCursor],
-  )
-
-  // Increase StdinParser timeout from default 10ms to 100ms.
-  // Some terminals (Ghostty, iTerm2, VS Code) split bracketed paste sequences
-  // across multiple stdin reads when drag-dropping files. The default 10ms
-  // timeout causes the parser to flush partial escape sequences as keypresses,
-  // corrupting paste detection. 100ms is still fast for keyboard input but
-  // gives enough time for split paste sequences to arrive.
-  useEffect(() => {
-    const cliRenderer = appContext.renderer as Record<string, unknown> | null
-    const stdinBuffer = cliRenderer?._stdinBuffer as Record<string, unknown> | undefined
-    if (stdinBuffer && typeof stdinBuffer.timeoutMs === 'number') {
-      stdinBuffer.timeoutMs = 100
-    }
-  }, [appContext])
-
-  // Global paste event listener — catches paste events (e.g. from drag-and-drop)
-  // at the global level, plus a scrollbox-level backup. Some terminals may not
-  // deliver paste events reliably via one mechanism alone, so we use both with
-  // dedup to prevent double-handling.
-  const onPasteRef = useRef(onPaste)
-  onPasteRef.current = onPaste
-  const pasteHandledRef = useRef(false)
-
-  // Always listen for paste events regardless of terminal focus state.
-  // Drag-and-drop inherently causes the terminal to lose focus (the file
-  // manager has focus during the drag), so the paste listener must stay
-  // active even when `focused` is false.
-  useEffect(() => {
-    if (!keyHandler) return
-
-    const handlePaste = (event: PasteEvent) => {
-      pasteHandledRef.current = true
-      onPasteRef.current(getPasteText(event))
-      // Reset dedup flag after microtask so scrollbox handler (which fires
-      // synchronously after global listeners) sees it as handled, but future
-      // paste events are not blocked.
-      queueMicrotask(() => { pasteHandledRef.current = false })
-    }
-
-    keyHandler.on('paste', handlePaste)
-    return () => {
-      keyHandler.off('paste', handlePaste)
-    }
-  }, [keyHandler])
-
-  // Main keyboard handler - delegates to specialized handlers
-  useKeyboard(
-    useCallback(
-      (key: KeyEvent) => {
-        if (!focused) return
-
-        if (onKeyIntercept) {
-          const handled = onKeyIntercept(key)
-          if (handled) return
-        }
-
-        // Clear sticky column for non-vertical navigation
-        const isVerticalNavKey = key.name === 'up' || key.name === 'down'
-        if (!isVerticalNavKey) {
-          stickyColumnRef.current = null
-        }
-
-        // Delegate to specialized handlers
-        if (handleEnterKeys(key)) return
-        if (handleDeletionKeys(key)) return
-        if (handleNavigationKeys(key)) return
-        if (handleCharacterInput(key)) return
-      },
-      [
-        focused,
-        onKeyIntercept,
-        handleEnterKeys,
-        handleDeletionKeys,
-        handleNavigationKeys,
-        handleCharacterInput,
-      ],
-    ),
-  )
-
-  const layoutMetrics = (() => {
-    const safeMaxHeight = Math.max(1, maxHeight)
-    const effectiveMinHeight = Math.max(1, Math.min(minHeight, safeMaxHeight))
-
-    const totalLines =
-      lineInfo === null ? 0 : lineInfo.lineStartCols.length
-
-    // Add bottom gutter when cursor is on line 2 of exactly 2 lines
-    const gutterEnabled =
-      totalLines === 2 && cursorRow === 1 && totalLines + 1 <= safeMaxHeight
-
-    const rawHeight = Math.min(
-      totalLines + (gutterEnabled ? 1 : 0),
-      safeMaxHeight,
-    )
-
-    const heightLines = Math.max(effectiveMinHeight, rawHeight)
-
-    // Content is scrollable when total lines exceed max height
-    const isScrollable = totalLines > safeMaxHeight
-
-    return {
-      heightLines,
-      gutterEnabled,
-      isScrollable,
-    }
-  })()
-
-  const inputColor = isPlaceholder
-    ? theme.muted
-    : focused
-      ? theme.inputFocusedFg
-      : theme.inputFg
-
-  // Use theme's info color for selection highlight background
-  const highlightBg = theme.info
-
-  return (
-    <scrollbox
-      ref={scrollBoxRef}
-      scrollX={false}
-      stickyScroll={true}
-      stickyStart="bottom"
-      scrollbarOptions={{ visible: false }}
-      verticalScrollbarOptions={{
-        visible: showScrollbar && layoutMetrics.isScrollable,
-        trackOptions: { width: 1 },
-      }}
-      onPaste={(event) => {
-        // Backup paste handler: fires if the global keyHandler listener
-        // didn't catch this event (dedup prevents double-handling)
-        if (pasteHandledRef.current) return
-        onPasteRef.current(getPasteText(event))
-      }}
-      onMouseDown={handleMouseDown}
-      style={{
-        flexGrow: 0,
-        flexShrink: 0,
-        rootOptions: {
-          width: '100%',
-          height: layoutMetrics.heightLines,
-          backgroundColor: 'transparent',
-          flexGrow: 0,
-          flexShrink: 0,
-        },
-        wrapperOptions: {
-          paddingLeft: 1,
-          paddingRight: 1,
-          border: false,
-        },
-        contentOptions: {
-          justifyContent: 'flex-start',
-        },
-      }}
-    >
-      <text
-        ref={textRef}
-        style={{ bg: 'transparent', fg: inputColor, wrapMode: 'word' }}
-      >
-        {showCursor ? (
-          <>
-            {beforeCursor}
-            {shouldHighlight ? (
-              <span
-                bg={highlightBg}
-                fg={theme.background}
-                attributes={TextAttributes.BOLD}
-              >
-                {activeChar === ' ' ? '\u00a0' : activeChar}
-              </span>
-            ) : (
-              <InputCursor
-                visible={true}
-                focused={focused}
-                shouldBlink={effectiveShouldBlinkCursor}
-                color={supportsTruecolor() ? theme.info : 'magenta'}
-                key={lastActivity}
-              />
-            )}
-            {shouldHighlight
-              ? afterCursor.length > 0
-                ? afterCursor.slice(1)
-                : ''
-              : afterCursor}
-            {layoutMetrics.gutterEnabled ? '\n' : ''}
-          </>
-        ) : (
-          <>
-            {displayValueForRendering}
-            {layoutMetrics.gutterEnabled ? '\n' : ''}
-          </>
-        )}
-      </text>
-    </scrollbox>
-  )
-})