lonny-agent 0.1.2 → 0.1.9

package/src/pi-tui/components/editor.ts

@@ -0,0 +1,2321 @@
+import type { AutocompleteProvider, AutocompleteSuggestions } from '../autocomplete.js'
+import { getKeybindings } from '../keybindings.js'
+import { decodePrintableKey, matchesKey } from '../keys.js'
+import { KillRing } from '../kill-ring.js'
+import { type Component, CURSOR_MARKER, type Focusable, type TUI } from '../tui.js'
+import { UndoStack } from '../undo-stack.js'
+import {
+  getGraphemeSegmenter,
+  getWordSegmenter,
+  isWhitespaceChar,
+  truncateToWidth,
+  visibleWidth,
+} from '../utils.js'
+import { findWordBackward, findWordForward } from '../word-navigation.js'
+import { SelectList, type SelectListLayoutOptions, type SelectListTheme } from './select-list.js'
+
+const graphemeSegmenter = getGraphemeSegmenter()
+const wordSegmenter = getWordSegmenter()
+
+/** Regex matching paste markers like `[paste #1 +123 lines]` or `[paste #2 1234 chars]`. */
+const PASTE_MARKER_REGEX = /\[paste #(\d+)( (\+\d+ lines|\d+ chars))?\]/g
+
+/** Non-global version for single-segment testing. */
+const PASTE_MARKER_SINGLE = /^\[paste #(\d+)( (\+\d+ lines|\d+ chars))?\]$/
+
+/** Check if a segment is a paste marker (i.e. was merged by segmentWithMarkers). */
+function isPasteMarker(segment: string): boolean {
+  return segment.length >= 10 && PASTE_MARKER_SINGLE.test(segment)
+}
+
+/**
+ * A segmenter that wraps Intl.Segmenter and merges graphemes that fall
+ * within paste markers into single atomic segments.  This makes cursor
+ * movement, deletion, word-wrap, etc. treat paste markers as single units.
+ *
+ * Only markers whose numeric ID exists in `validIds` are merged.
+ */
+function segmentWithMarkers(
+  text: string,
+  baseSegmenter: Intl.Segmenter,
+  validIds: Set<number>,
+): Iterable<Intl.SegmentData> {
+  // Fast path: no paste markers in the text or no valid IDs.
+  if (validIds.size === 0 || !text.includes('[paste #')) {
+    return baseSegmenter.segment(text)
+  }
+
+  // Find all marker spans with valid IDs.
+  const markers: Array<{ start: number; end: number }> = []
+  for (const m of text.matchAll(PASTE_MARKER_REGEX)) {
+    const id = Number.parseInt(m[1]!, 10)
+    if (!validIds.has(id)) continue
+    markers.push({ start: m.index, end: m.index + m[0].length })
+  }
+  if (markers.length === 0) {
+    return baseSegmenter.segment(text)
+  }
+
+  // Build merged segment list.
+  const baseSegments = baseSegmenter.segment(text)
+  const result: Intl.SegmentData[] = []
+  let markerIdx = 0
+
+  for (const seg of baseSegments) {
+    // Skip past markers that are entirely before this segment.
+    while (markerIdx < markers.length && markers[markerIdx]!.end <= seg.index) {
+      markerIdx++
+    }
+
+    const marker = markerIdx < markers.length ? markers[markerIdx]! : null
+
+    if (marker && seg.index >= marker.start && seg.index < marker.end) {
+      // This segment falls inside a marker.
+      // If this is the first segment of the marker, emit a merged segment.
+      if (seg.index === marker.start) {
+        const markerText = text.slice(marker.start, marker.end)
+        result.push({
+          segment: markerText,
+          index: marker.start,
+          input: text,
+        })
+      }
+      // Otherwise skip (already merged into the first segment).
+    } else {
+      result.push(seg)
+    }
+  }
+
+  return result
+}
+
+/**
+ * Represents a chunk of text for word-wrap layout.
+ * Tracks both the text content and its position in the original line.
+ */
+export interface TextChunk {
+  text: string
+  startIndex: number
+  endIndex: number
+}
+
+/**
+ * Split a line into word-wrapped chunks.
+ * Wraps at word boundaries when possible, falling back to character-level
+ * wrapping for words longer than the available width.
+ *
+ * @param line - The text line to wrap
+ * @param maxWidth - Maximum visible width per chunk
+ * @param preSegmented - Optional pre-segmented graphemes (e.g. with paste-marker awareness).
+ *                       When omitted the default Intl.Segmenter is used.
+ * @returns Array of chunks with text and position information
+ */
+export function wordWrapLine(
+  line: string,
+  maxWidth: number,
+  preSegmented?: Intl.SegmentData[],
+): TextChunk[] {
+  if (!line || maxWidth <= 0) {
+    return [{ text: '', startIndex: 0, endIndex: 0 }]
+  }
+
+  const lineWidth = visibleWidth(line)
+  if (lineWidth <= maxWidth) {
+    return [{ text: line, startIndex: 0, endIndex: line.length }]
+  }
+
+  const chunks: TextChunk[] = []
+  const segments = preSegmented ?? [...graphemeSegmenter.segment(line)]
+
+  let currentWidth = 0
+  let chunkStart = 0
+
+  // Wrap opportunity: the position after the last whitespace before a non-whitespace
+  // grapheme, i.e. where a line break is allowed.
+  let wrapOppIndex = -1
+  let wrapOppWidth = 0
+
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i]!
+    const grapheme = seg.segment
+    const gWidth = visibleWidth(grapheme)
+    const charIndex = seg.index
+    const isWs = !isPasteMarker(grapheme) && isWhitespaceChar(grapheme)
+
+    // Overflow check before advancing.
+    if (currentWidth + gWidth > maxWidth) {
+      if (wrapOppIndex >= 0 && currentWidth - wrapOppWidth + gWidth <= maxWidth) {
+        // Backtrack to last wrap opportunity (the remaining content
+        // plus the current grapheme still fits within maxWidth).
+        chunks.push({
+          text: line.slice(chunkStart, wrapOppIndex),
+          startIndex: chunkStart,
+          endIndex: wrapOppIndex,
+        })
+        chunkStart = wrapOppIndex
+        currentWidth -= wrapOppWidth
+      } else if (chunkStart < charIndex) {
+        // No viable wrap opportunity: force-break at current position.
+        // This also handles the case where backtracking to a word
+        // boundary wouldn't help because the remaining content plus
+        // the current grapheme (e.g. a wide character) still exceeds
+        // maxWidth.
+        chunks.push({
+          text: line.slice(chunkStart, charIndex),
+          startIndex: chunkStart,
+          endIndex: charIndex,
+        })
+        chunkStart = charIndex
+        currentWidth = 0
+      }
+      wrapOppIndex = -1
+    }
+
+    if (gWidth > maxWidth) {
+      // Single atomic segment wider than maxWidth (e.g. paste marker
+      // in a narrow terminal). Re-wrap it at grapheme granularity.
+
+      // The segment remains logically atomic for cursor
+      // movement / editing — the split is purely visual for word-wrap layout.
+      const subChunks = wordWrapLine(grapheme, maxWidth)
+      for (let j = 0; j < subChunks.length - 1; j++) {
+        const sc = subChunks[j]!
+        chunks.push({
+          text: sc.text,
+          startIndex: charIndex + sc.startIndex,
+          endIndex: charIndex + sc.endIndex,
+        })
+      }
+      const last = subChunks[subChunks.length - 1]!
+      chunkStart = charIndex + last.startIndex
+      currentWidth = visibleWidth(last.text)
+      wrapOppIndex = -1
+      continue
+    }
+
+    // Advance.
+    currentWidth += gWidth
+
+    // Record wrap opportunity: whitespace followed by non-whitespace.
+    // Multiple spaces join (no break between them); the break point is
+    // after the last space before the next word.
+    const next = segments[i + 1]
+    if (isWs && next && (isPasteMarker(next.segment) || !isWhitespaceChar(next.segment))) {
+      wrapOppIndex = next.index
+      wrapOppWidth = currentWidth
+    }
+  }
+
+  // Push final chunk.
+  chunks.push({ text: line.slice(chunkStart), startIndex: chunkStart, endIndex: line.length })
+
+  return chunks
+}
+
+// Kitty CSI-u sequences for printable keys, including optional shifted/base codepoints.
+interface EditorState {
+  lines: string[]
+  cursorLine: number
+  cursorCol: number
+}
+
+interface LayoutLine {
+  text: string
+  hasCursor: boolean
+  cursorPos?: number
+}
+
+export interface EditorTheme {
+  borderColor: (str: string) => string
+  selectList: SelectListTheme
+}
+
+export interface EditorOptions {
+  paddingX?: number
+  autocompleteMaxVisible?: number
+}
+
+const SLASH_COMMAND_SELECT_LIST_LAYOUT: SelectListLayoutOptions = {
+  minPrimaryColumnWidth: 12,
+  maxPrimaryColumnWidth: 32,
+}
+
+const ATTACHMENT_AUTOCOMPLETE_DEBOUNCE_MS = 20
+
+export class Editor implements Component, Focusable {
+  private state: EditorState = {
+    lines: [''],
+    cursorLine: 0,
+    cursorCol: 0,
+  }
+
+  /** Focusable interface - set by TUI when focus changes */
+  focused: boolean = false
+
+  protected tui: TUI
+  private theme: EditorTheme
+  private paddingX: number = 0
+
+  // Store last render width for cursor navigation
+  private lastWidth: number = 80
+
+  // Vertical scrolling support
+  private scrollOffset: number = 0
+
+  // Border color (can be changed dynamically)
+  public borderColor: (str: string) => string
+
+  // Autocomplete support
+  private autocompleteProvider?: AutocompleteProvider
+  private autocompleteList?: SelectList
+  private autocompleteState: 'regular' | 'force' | null = null
+  private autocompletePrefix: string = ''
+  private autocompleteMaxVisible: number = 5
+  private autocompleteAbort?: AbortController
+  private autocompleteDebounceTimer?: ReturnType<typeof setTimeout>
+  private autocompleteRequestTask: Promise<void> = Promise.resolve()
+  private autocompleteStartToken: number = 0
+  private autocompleteRequestId: number = 0
+
+  // Paste tracking for large pastes
+  private pastes: Map<number, string> = new Map()
+  private pasteCounter: number = 0
+
+  // Bracketed paste mode buffering
+  private pasteBuffer: string = ''
+  private isInPaste: boolean = false
+
+  // Prompt history for up/down navigation
+  private history: string[] = []
+  private historyIndex: number = -1 // -1 = not browsing, 0 = most recent, 1 = older, etc.
+
+  // Kill ring for Emacs-style kill/yank operations
+  private killRing = new KillRing()
+  private lastAction: 'kill' | 'yank' | 'type-word' | null = null
+
+  // Character jump mode
+  private jumpMode: 'forward' | 'backward' | null = null
+
+  // Preferred visual column for vertical cursor movement (sticky column)
+  private preferredVisualCol: number | null = null
+
+  // When the cursor is snapped to the start of an atomic segment, e.g. a
+  // paste marker, cursorCol no longer reflects where the cursor would have
+  // landed. This field stores the pre-snap cursorCol so that the next
+  // vertical move can resolve it to a visual column on whatever VL it belongs
+  // to.
+  private snappedFromCursorCol: number | null = null
+
+  // Undo support
+  private undoStack = new UndoStack<EditorState>()
+
+  public onSubmit?: (text: string) => void
+  public onChange?: (text: string) => void
+  public disableSubmit: boolean = false
+
+  constructor(tui: TUI, theme: EditorTheme, options: EditorOptions = {}) {
+    this.tui = tui
+    this.theme = theme
+    this.borderColor = theme.borderColor
+    const paddingX = options.paddingX ?? 0
+    this.paddingX = Number.isFinite(paddingX) ? Math.max(0, Math.floor(paddingX)) : 0
+    const maxVisible = options.autocompleteMaxVisible ?? 5
+    this.autocompleteMaxVisible = Number.isFinite(maxVisible)
+      ? Math.max(3, Math.min(20, Math.floor(maxVisible)))
+      : 5
+  }
+
+  /** Set of currently valid paste IDs, for marker-aware segmentation. */
+  private validPasteIds(): Set<number> {
+    return new Set(this.pastes.keys())
+  }
+
+  /** Segment text with paste-marker awareness, only merging markers with valid IDs. */
+  private segment(text: string, mode: 'word' | 'grapheme'): Iterable<Intl.SegmentData> {
+    return segmentWithMarkers(
+      text,
+      mode === 'word' ? wordSegmenter : graphemeSegmenter,
+      this.validPasteIds(),
+    )
+  }
+
+  getPaddingX(): number {
+    return this.paddingX
+  }
+
+  setPaddingX(padding: number): void {
+    const newPadding = Number.isFinite(padding) ? Math.max(0, Math.floor(padding)) : 0
+    if (this.paddingX !== newPadding) {
+      this.paddingX = newPadding
+      this.tui.requestRender()
+    }
+  }
+
+  getAutocompleteMaxVisible(): number {
+    return this.autocompleteMaxVisible
+  }
+
+  setAutocompleteMaxVisible(maxVisible: number): void {
+    const newMaxVisible = Number.isFinite(maxVisible)
+      ? Math.max(3, Math.min(20, Math.floor(maxVisible)))
+      : 5
+    if (this.autocompleteMaxVisible !== newMaxVisible) {
+      this.autocompleteMaxVisible = newMaxVisible
+      this.tui.requestRender()
+    }
+  }
+
+  setAutocompleteProvider(provider: AutocompleteProvider): void {
+    this.cancelAutocomplete()
+    this.autocompleteProvider = provider
+  }
+
+  /**
+   * Add a prompt to history for up/down arrow navigation.
+   * Called after successful submission.
+   */
+  addToHistory(text: string): void {
+    const trimmed = text.trim()
+    if (!trimmed) return
+    // Don't add consecutive duplicates
+    if (this.history.length > 0 && this.history[0] === trimmed) return
+    this.history.unshift(trimmed)
+    // Limit history size
+    if (this.history.length > 100) {
+      this.history.pop()
+    }
+  }
+
+  private isEditorEmpty(): boolean {
+    return this.state.lines.length === 1 && this.state.lines[0] === ''
+  }
+
+  private isOnFirstVisualLine(): boolean {
+    const visualLines = this.buildVisualLineMap(this.lastWidth)
+    const currentVisualLine = this.findCurrentVisualLine(visualLines)
+    return currentVisualLine === 0
+  }
+
+  private isOnLastVisualLine(): boolean {
+    const visualLines = this.buildVisualLineMap(this.lastWidth)
+    const currentVisualLine = this.findCurrentVisualLine(visualLines)
+    return currentVisualLine === visualLines.length - 1
+  }
+
+  private navigateHistory(direction: 1 | -1): void {
+    this.lastAction = null
+    if (this.history.length === 0) return
+
+    const newIndex = this.historyIndex - direction // Up(-1) increases index, Down(1) decreases
+    if (newIndex < -1 || newIndex >= this.history.length) return
+
+    // Capture state when first entering history browsing mode
+    if (this.historyIndex === -1 && newIndex >= 0) {
+      this.pushUndoSnapshot()
+    }
+
+    this.historyIndex = newIndex
+
+    if (this.historyIndex === -1) {
+      // Returned to "current" state - clear editor
+      this.setTextInternal('')
+    } else {
+      this.setTextInternal(this.history[this.historyIndex] || '')
+    }
+  }
+
+  /** Internal setText that doesn't reset history state - used by navigateHistory */
+  private setTextInternal(text: string): void {
+    const lines = text.split('\n')
+    this.state.lines = lines.length === 0 ? [''] : lines
+    this.state.cursorLine = this.state.lines.length - 1
+    this.setCursorCol(this.state.lines[this.state.cursorLine]?.length || 0)
+    // Reset scroll - render() will adjust to show cursor
+    this.scrollOffset = 0
+
+    if (this.onChange) {
+      this.onChange(this.getText())
+    }
+  }
+
+  invalidate(): void {
+    // No cached state to invalidate currently
+  }
+
+  render(width: number): string[] {
+    const maxPadding = Math.max(0, Math.floor((width - 1) / 2))
+    const paddingX = Math.min(this.paddingX, maxPadding)
+    const contentWidth = Math.max(1, width - paddingX * 2)
+
+    // Layout width: with padding the cursor can overflow into it,
+    // without padding we reserve 1 column for the cursor.
+    const layoutWidth = Math.max(1, contentWidth - (paddingX ? 0 : 1))
+
+    // Store for cursor navigation (must match wrapping width)
+    this.lastWidth = layoutWidth
+
+    const horizontal = this.borderColor('─')
+
+    // Layout the text
+    const layoutLines = this.layoutText(layoutWidth)
+
+    // Calculate max visible lines: 30% of terminal height, minimum 5 lines
+    const terminalRows = this.tui.terminal.rows
+    const maxVisibleLines = Math.max(5, Math.floor(terminalRows * 0.3))
+
+    // Find the cursor line index in layoutLines
+    let cursorLineIndex = layoutLines.findIndex(line => line.hasCursor)
+    if (cursorLineIndex === -1) cursorLineIndex = 0
+
+    // Adjust scroll offset to keep cursor visible
+    if (cursorLineIndex < this.scrollOffset) {
+      this.scrollOffset = cursorLineIndex
+    } else if (cursorLineIndex >= this.scrollOffset + maxVisibleLines) {
+      this.scrollOffset = cursorLineIndex - maxVisibleLines + 1
+    }
+
+    // Clamp scroll offset to valid range
+    const maxScrollOffset = Math.max(0, layoutLines.length - maxVisibleLines)
+    this.scrollOffset = Math.max(0, Math.min(this.scrollOffset, maxScrollOffset))
+
+    // Get visible lines slice
+    const visibleLines = layoutLines.slice(this.scrollOffset, this.scrollOffset + maxVisibleLines)
+
+    const result: string[] = []
+    const leftPadding = ' '.repeat(paddingX)
+    const rightPadding = leftPadding
+
+    // Render top border (with scroll indicator if scrolled down)
+    if (this.scrollOffset > 0) {
+      const indicator = `─── ↑ ${this.scrollOffset} more `
+      const remaining = width - visibleWidth(indicator)
+      if (remaining >= 0) {
+        result.push(this.borderColor(indicator + '─'.repeat(remaining)))
+      } else {
+        result.push(this.borderColor(truncateToWidth(indicator, width)))
+      }
+    } else {
+      result.push(horizontal.repeat(width))
+    }
+
+    // Render each visible layout line
+    // Emit hardware cursor marker only when focused and not showing autocomplete
+    const emitCursorMarker = this.focused && !this.autocompleteState
+
+    for (const layoutLine of visibleLines) {
+      let displayText = layoutLine.text
+      let lineVisibleWidth = visibleWidth(layoutLine.text)
+      let cursorInPadding = false
+
+      // Add cursor if this line has it
+      if (layoutLine.hasCursor && layoutLine.cursorPos !== undefined) {
+        const before = displayText.slice(0, layoutLine.cursorPos)
+        const after = displayText.slice(layoutLine.cursorPos)
+
+        // Hardware cursor marker (zero-width, emitted before fake cursor for IME positioning)
+        const marker = emitCursorMarker ? CURSOR_MARKER : ''
+
+        if (after.length > 0) {
+          // Cursor is on a character (grapheme) - replace it with highlighted version
+          // Get the first grapheme from 'after'
+          const afterGraphemes = [...this.segment(after, 'grapheme')]
+          const firstGrapheme = afterGraphemes[0]?.segment || ''
+          const restAfter = after.slice(firstGrapheme.length)
+          const cursor = `\x1b[7m${firstGrapheme}\x1b[0m`
+          displayText = before + marker + cursor + restAfter
+          // lineVisibleWidth stays the same - we're replacing, not adding
+        } else {
+          // Cursor is at the end - add highlighted space
+          const cursor = '\x1b[7m \x1b[0m'
+          displayText = before + marker + cursor
+          lineVisibleWidth = lineVisibleWidth + 1
+          // If cursor overflows content width into the padding, flag it
+          if (lineVisibleWidth > contentWidth && paddingX > 0) {
+            cursorInPadding = true
+          }
+        }
+      }
+
+      // Calculate padding based on actual visible width
+      const padding = ' '.repeat(Math.max(0, contentWidth - lineVisibleWidth))
+      const lineRightPadding = cursorInPadding ? rightPadding.slice(1) : rightPadding
+
+      // Render the line (no side borders, just horizontal lines above and below)
+      result.push(`${leftPadding}${displayText}${padding}${lineRightPadding}`)
+    }
+
+    // Render bottom border (with scroll indicator if more content below)
+    const linesBelow = layoutLines.length - (this.scrollOffset + visibleLines.length)
+    if (linesBelow > 0) {
+      const indicator = `─── ↓ ${linesBelow} more `
+      const remaining = width - visibleWidth(indicator)
+      result.push(this.borderColor(indicator + '─'.repeat(Math.max(0, remaining))))
+    } else {
+      result.push(horizontal.repeat(width))
+    }
+
+    // Autocomplete list rendered ABOVE the editor (matching web UI behavior)
+    if (this.autocompleteState && this.autocompleteList) {
+      const autocompleteResult = this.autocompleteList.render(contentWidth)
+      const acLines: string[] = []
+      for (const line of autocompleteResult) {
+        const lineWidth = visibleWidth(line)
+        const linePadding = ' '.repeat(Math.max(0, contentWidth - lineWidth))
+        acLines.push(`${leftPadding}${line}${linePadding}${rightPadding}`)
+      }
+      result.unshift(...acLines)
+    }
+
+    return result
+  }
+
+  handleInput(data: string): void {
+    const kb = getKeybindings()
+
+    // Handle character jump mode (awaiting next character to jump to)
+    if (this.jumpMode !== null) {
+      // Cancel if the hotkey is pressed again
+      if (
+        kb.matches(data, 'tui.editor.jumpForward') ||
+        kb.matches(data, 'tui.editor.jumpBackward')
+      ) {
+        this.jumpMode = null
+        return
+      }
+
+      const printable = decodePrintableKey(data) ?? (data.charCodeAt(0) >= 32 ? data : undefined)
+      if (printable !== undefined) {
+        // Printable character - perform the jump
+        const direction = this.jumpMode
+        this.jumpMode = null
+        this.jumpToChar(printable, direction)
+        return
+      }
+
+      // Control character - cancel and fall through to normal handling
+      this.jumpMode = null
+    }
+
+    // Handle bracketed paste mode
+    if (data.includes('\x1b[200~')) {
+      this.isInPaste = true
+      this.pasteBuffer = ''
+      data = data.replace('\x1b[200~', '')
+    }
+
+    if (this.isInPaste) {
+      this.pasteBuffer += data
+      const endIndex = this.pasteBuffer.indexOf('\x1b[201~')
+      if (endIndex !== -1) {
+        const pasteContent = this.pasteBuffer.substring(0, endIndex)
+        if (pasteContent.length > 0) {
+          this.handlePaste(pasteContent)
+        }
+        this.isInPaste = false
+        const remaining = this.pasteBuffer.substring(endIndex + 6)
+        this.pasteBuffer = ''
+        if (remaining.length > 0) {
+          this.handleInput(remaining)
+        }
+        return
+      }
+      return
+    }
+
+    // Ctrl+C - let parent handle (exit/clear)
+    if (kb.matches(data, 'tui.input.copy')) {
+      return
+    }
+
+    // Undo
+    if (kb.matches(data, 'tui.editor.undo')) {
+      this.undo()
+      return
+    }
+
+    // Handle autocomplete mode
+    if (this.autocompleteState && this.autocompleteList) {
+      if (kb.matches(data, 'tui.select.cancel')) {
+        this.cancelAutocomplete()
+        return
+      }
+
+      if (kb.matches(data, 'tui.select.up') || kb.matches(data, 'tui.select.down')) {
+        this.autocompleteList.handleInput(data)
+        return
+      }
+
+      if (kb.matches(data, 'tui.input.tab')) {
+        const selected = this.autocompleteList.getSelectedItem()
+        if (selected && this.autocompleteProvider) {
+          this.pushUndoSnapshot()
+          this.lastAction = null
+          const result = this.autocompleteProvider.applyCompletion(
+            this.state.lines,
+            this.state.cursorLine,
+            this.state.cursorCol,
+            selected,
+            this.autocompletePrefix,
+          )
+          this.state.lines = result.lines
+          this.state.cursorLine = result.cursorLine
+          this.setCursorCol(result.cursorCol)
+          this.cancelAutocomplete()
+          if (this.onChange) this.onChange(this.getText())
+        }
+        return
+      }
+
+      if (kb.matches(data, 'tui.select.confirm')) {
+        const selected = this.autocompleteList.getSelectedItem()
+        if (selected && this.autocompleteProvider) {
+          this.pushUndoSnapshot()
+          this.lastAction = null
+          const result = this.autocompleteProvider.applyCompletion(
+            this.state.lines,
+            this.state.cursorLine,
+            this.state.cursorCol,
+            selected,
+            this.autocompletePrefix,
+          )
+          this.state.lines = result.lines
+          this.state.cursorLine = result.cursorLine
+          this.setCursorCol(result.cursorCol)
+
+          if (this.autocompletePrefix.startsWith('/')) {
+            this.cancelAutocomplete()
+            // Fall through to submit
+          } else {
+            this.cancelAutocomplete()
+            if (this.onChange) this.onChange(this.getText())
+            return
+          }
+        }
+      }
+    }
+
+    // Tab - trigger completion
+    if (kb.matches(data, 'tui.input.tab') && !this.autocompleteState) {
+      this.handleTabCompletion()
+      return
+    }
+
+    // Deletion actions
+    if (kb.matches(data, 'tui.editor.deleteToLineEnd')) {
+      this.deleteToEndOfLine()
+      return
+    }
+    if (kb.matches(data, 'tui.editor.deleteToLineStart')) {
+      this.deleteToStartOfLine()
+      return
+    }
+    if (kb.matches(data, 'tui.editor.deleteWordBackward')) {
+      this.deleteWordBackwards()
+      return
+    }
+    if (kb.matches(data, 'tui.editor.deleteWordForward')) {
+      this.deleteWordForward()
+      return
+    }
+    if (kb.matches(data, 'tui.editor.deleteCharBackward') || matchesKey(data, 'shift+backspace')) {
+      this.handleBackspace()
+      return
+    }
+    if (kb.matches(data, 'tui.editor.deleteCharForward') || matchesKey(data, 'shift+delete')) {
+      this.handleForwardDelete()
+      return
+    }
+
+    // Kill ring actions
+    if (kb.matches(data, 'tui.editor.yank')) {
+      this.yank()
+      return
+    }
+    if (kb.matches(data, 'tui.editor.yankPop')) {
+      this.yankPop()
+      return
+    }
+
+    // Cursor movement actions
+    if (kb.matches(data, 'tui.editor.cursorLineStart')) {
+      this.moveToLineStart()
+      return
+    }
+    if (kb.matches(data, 'tui.editor.cursorLineEnd')) {
+      this.moveToLineEnd()
+      return
+    }
+    if (kb.matches(data, 'tui.editor.cursorWordLeft')) {
+      this.moveWordBackwards()
+      return
+    }
+    if (kb.matches(data, 'tui.editor.cursorWordRight')) {
+      this.moveWordForwards()
+      return
+    }
+
+    // New line
+    if (
+      kb.matches(data, 'tui.input.newLine') ||
+      (data.charCodeAt(0) === 10 && data.length > 1) ||
+      data === '\x1b\r' ||
+      data === '\x1b[13;2~' ||
+      (data.length > 1 && data.includes('\x1b') && data.includes('\r')) ||
+      (data === '\n' && data.length === 1)
+    ) {
+      if (this.shouldSubmitOnBackslashEnter(data, kb)) {
+        this.handleBackspace()
+        this.submitValue()
+        return
+      }
+      this.addNewLine()
+      return
+    }
+
+    // Submit (Enter)
+    if (kb.matches(data, 'tui.input.submit')) {
+      if (this.disableSubmit) return
+
+      // Workaround for terminals without Shift+Enter support:
+      // If char before cursor is \, delete it and insert newline instead of submitting.
+      const currentLine = this.state.lines[this.state.cursorLine] || ''
+      if (this.state.cursorCol > 0 && currentLine[this.state.cursorCol - 1] === '\\') {
+        this.handleBackspace()
+        this.addNewLine()
+        return
+      }
+
+      this.submitValue()
+      return
+    }
+
+    // Arrow key navigation (with history support)
+    if (kb.matches(data, 'tui.editor.cursorUp')) {
+      if (this.isEditorEmpty()) {
+        this.navigateHistory(-1)
+      } else if (this.historyIndex > -1 && this.isOnFirstVisualLine()) {
+        this.navigateHistory(-1)
+      } else if (this.isOnFirstVisualLine()) {
+        // Already at top - jump to start of line
+        this.moveToLineStart()
+      } else {
+        this.moveCursor(-1, 0)
+      }
+      return
+    }
+    if (kb.matches(data, 'tui.editor.cursorDown')) {
+      if (this.historyIndex > -1 && this.isOnLastVisualLine()) {
+        this.navigateHistory(1)
+      } else if (this.isOnLastVisualLine()) {
+        // Already at bottom - jump to end of line
+        this.moveToLineEnd()
+      } else {
+        this.moveCursor(1, 0)
+      }
+      return
+    }
+    if (kb.matches(data, 'tui.editor.cursorRight')) {
+      this.moveCursor(0, 1)
+      return
+    }
+    if (kb.matches(data, 'tui.editor.cursorLeft')) {
+      this.moveCursor(0, -1)
+      return
+    }
+
+    // Page up/down - scroll by page and move cursor
+    if (kb.matches(data, 'tui.editor.pageUp')) {
+      this.pageScroll(-1)
+      return
+    }
+    if (kb.matches(data, 'tui.editor.pageDown')) {
+      this.pageScroll(1)
+      return
+    }
+
+    // Character jump mode triggers
+    if (kb.matches(data, 'tui.editor.jumpForward')) {
+      this.jumpMode = 'forward'
+      return
+    }
+    if (kb.matches(data, 'tui.editor.jumpBackward')) {
+      this.jumpMode = 'backward'
+      return
+    }
+
+    // Shift+Space - insert regular space
+    if (matchesKey(data, 'shift+space')) {
+      this.insertCharacter(' ')
+      return
+    }
+
+    const printable = decodePrintableKey(data)
+    if (printable !== undefined) {
+      this.insertCharacter(printable)
+      return
+    }
+
+    // Regular characters
+    if (data.charCodeAt(0) >= 32) {
+      this.insertCharacter(data)
+    }
+  }
+
+  private layoutText(contentWidth: number): LayoutLine[] {
+    const layoutLines: LayoutLine[] = []
+
+    if (
+      this.state.lines.length === 0 ||
+      (this.state.lines.length === 1 && this.state.lines[0] === '')
+    ) {
+      // Empty editor
+      layoutLines.push({
+        text: '',
+        hasCursor: true,
+        cursorPos: 0,
+      })
+      return layoutLines
+    }
+
+    // Process each logical line
+    for (let i = 0; i < this.state.lines.length; i++) {
+      const line = this.state.lines[i] || ''
+      const isCurrentLine = i === this.state.cursorLine
+      const lineVisibleWidth = visibleWidth(line)
+
+      if (lineVisibleWidth <= contentWidth) {
+        // Line fits in one layout line
+        if (isCurrentLine) {
+          layoutLines.push({
+            text: line,
+            hasCursor: true,
+            cursorPos: this.state.cursorCol,
+          })
+        } else {
+          layoutLines.push({
+            text: line,
+            hasCursor: false,
+          })
+        }
+      } else {
+        // Line needs wrapping - use word-aware wrapping
+        const chunks = wordWrapLine(line, contentWidth, [...this.segment(line, 'grapheme')])
+
+        for (let chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
+          const chunk = chunks[chunkIndex]
+          if (!chunk) continue
+
+          const cursorPos = this.state.cursorCol
+          const isLastChunk = chunkIndex === chunks.length - 1
+
+          // Determine if cursor is in this chunk
+          // For word-wrapped chunks, we need to handle the case where
+          // cursor might be in trimmed whitespace at end of chunk
+          let hasCursorInChunk = false
+          let adjustedCursorPos = 0
+
+          if (isCurrentLine) {
+            if (isLastChunk) {
+              // Last chunk: cursor belongs here if >= startIndex
+              hasCursorInChunk = cursorPos >= chunk.startIndex
+              adjustedCursorPos = cursorPos - chunk.startIndex
+            } else {
+              // Non-last chunk: cursor belongs here if in range [startIndex, endIndex)
+              // But we need to handle the visual position in the trimmed text
+              hasCursorInChunk = cursorPos >= chunk.startIndex && cursorPos < chunk.endIndex
+              if (hasCursorInChunk) {
+                adjustedCursorPos = cursorPos - chunk.startIndex
+                // Clamp to text length (in case cursor was in trimmed whitespace)
+                if (adjustedCursorPos > chunk.text.length) {
+                  adjustedCursorPos = chunk.text.length
+                }
+              }
+            }
+          }
+
+          if (hasCursorInChunk) {
+            layoutLines.push({
+              text: chunk.text,
+              hasCursor: true,
+              cursorPos: adjustedCursorPos,
+            })
+          } else {
+            layoutLines.push({
+              text: chunk.text,
+              hasCursor: false,
+            })
+          }
+        }
+      }
+    }
+
+    return layoutLines
+  }
+
+  getText(): string {
+    return this.state.lines.join('\n')
+  }
+
+  private expandPasteMarkers(text: string): string {
+    let result = text
+    for (const [pasteId, pasteContent] of this.pastes) {
+      const markerRegex = new RegExp(`\\[paste #${pasteId}( (\\+\\d+ lines|\\d+ chars))?\\]`, 'g')
+      result = result.replace(markerRegex, () => pasteContent)
+    }
+    return result
+  }
+
+  /**
+   * Get text with paste markers expanded to their actual content.
+   * Use this when you need the full content (e.g., for external editor).
+   */
+  getExpandedText(): string {
+    return this.expandPasteMarkers(this.state.lines.join('\n'))
+  }
+
+  getLines(): string[] {
+    return [...this.state.lines]
+  }
+
+  getCursor(): { line: number; col: number } {
+    return { line: this.state.cursorLine, col: this.state.cursorCol }
+  }
+
+  setText(text: string): void {
+    this.cancelAutocomplete()
+    this.lastAction = null
+    this.historyIndex = -1 // Exit history browsing mode
+    const normalized = this.normalizeText(text)
+    // Push undo snapshot if content differs (makes programmatic changes undoable)
+    if (this.getText() !== normalized) {
+      this.pushUndoSnapshot()
+    }
+    this.setTextInternal(normalized)
+  }
+
+  /**
+   * Insert text at the current cursor position.
+   * Used for programmatic insertion (e.g., clipboard image markers).
+   * This is atomic for undo - single undo restores entire pre-insert state.
+   */
+  insertTextAtCursor(text: string): void {
+    if (!text) return
+    this.cancelAutocomplete()
+    this.pushUndoSnapshot()
+    this.lastAction = null
+    this.historyIndex = -1
+    this.insertTextAtCursorInternal(text)
+  }
+
+  /**
+   * Normalize text for editor storage:
+   * - Normalize line endings (\r\n and \r -> \n)
+   * - Expand tabs to 4 spaces
+   */
+  private normalizeText(text: string): string {
+    return text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').replace(/\t/g, '    ')
+  }
+
+  /**
+   * Internal text insertion at cursor. Handles single and multi-line text.
+   * Does not push undo snapshots or trigger autocomplete - caller is responsible.
+   * Normalizes line endings and calls onChange once at the end.
+   */
+  private insertTextAtCursorInternal(text: string): void {
+    if (!text) return
+
+    // Normalize line endings and tabs
+    const normalized = this.normalizeText(text)
+    const insertedLines = normalized.split('\n')
+
+    const currentLine = this.state.lines[this.state.cursorLine] || ''
+    const beforeCursor = currentLine.slice(0, this.state.cursorCol)
+    const afterCursor = currentLine.slice(this.state.cursorCol)
+
+    if (insertedLines.length === 1) {
+      // Single line - insert at cursor position
+      this.state.lines[this.state.cursorLine] = beforeCursor + normalized + afterCursor
+      this.setCursorCol(this.state.cursorCol + normalized.length)
+    } else {
+      // Multi-line insertion
+      this.state.lines = [
+        // All lines before current line
+        ...this.state.lines.slice(0, this.state.cursorLine),
+
+        // The first inserted line merged with text before cursor
+        beforeCursor + insertedLines[0],
+
+        // All middle inserted lines
+        ...insertedLines.slice(1, -1),
+
+        // The last inserted line with text after cursor
+        insertedLines[insertedLines.length - 1] + afterCursor,
+
+        // All lines after current line
+        ...this.state.lines.slice(this.state.cursorLine + 1),
+      ]
+
+      this.state.cursorLine += insertedLines.length - 1
+      this.setCursorCol((insertedLines[insertedLines.length - 1] || '').length)
+    }
+
+    if (this.onChange) {
+      this.onChange(this.getText())
+    }
+  }
+
+  // All the editor methods from before...
+  private insertCharacter(char: string, skipUndoCoalescing?: boolean): void {
+    this.historyIndex = -1 // Exit history browsing mode
+
+    // Undo coalescing (fish-style):
+    // - Consecutive word chars coalesce into one undo unit
+    // - Space captures state before itself (so undo removes space+following word together)
+    // - Each space is separately undoable
+    // Skip coalescing when called from atomic operations (e.g., handlePaste)
+    if (!skipUndoCoalescing) {
+      if (isWhitespaceChar(char) || this.lastAction !== 'type-word') {
+        this.pushUndoSnapshot()
+      }
+      this.lastAction = 'type-word'
+    }
+
+    const line = this.state.lines[this.state.cursorLine] || ''
+
+    const before = line.slice(0, this.state.cursorCol)
+    const after = line.slice(this.state.cursorCol)
+
+    this.state.lines[this.state.cursorLine] = before + char + after
+    this.setCursorCol(this.state.cursorCol + char.length)
+
+    if (this.onChange) {
+      this.onChange(this.getText())
+    }
+
+    // Check if we should trigger or update autocomplete
+    if (!this.autocompleteState) {
+      // Auto-trigger for "/" at the start of a line (slash commands)
+      if (char === '/' && this.isAtStartOfMessage()) {
+        this.tryTriggerAutocomplete()
+      }
+      // Auto-trigger for symbol-based completion like @ or # at token boundaries
+      else if (char === '@' || char === '#') {
+        const currentLine = this.state.lines[this.state.cursorLine] || ''
+        const textBeforeCursor = currentLine.slice(0, this.state.cursorCol)
+        const charBeforeSymbol = textBeforeCursor[textBeforeCursor.length - 2]
+        if (
+          textBeforeCursor.length === 1 ||
+          charBeforeSymbol === ' ' ||
+          charBeforeSymbol === '\t'
+        ) {
+          this.tryTriggerAutocomplete()
+        }
+      }
+      // Also auto-trigger when typing letters in a slash command or symbol completion context
+      else if (/[a-zA-Z0-9.\-_]/.test(char)) {
+        const currentLine = this.state.lines[this.state.cursorLine] || ''
+        const textBeforeCursor = currentLine.slice(0, this.state.cursorCol)
+        // Check if we're in a slash command (with or without space for arguments)
+        if (this.isInSlashCommandContext(textBeforeCursor)) {
+          this.tryTriggerAutocomplete()
+        }
+        // Check if we're in a symbol-based completion context like @ or #
+        else if (textBeforeCursor.match(/(?:^|[\s])[@#][^\s]*$/)) {
+          this.tryTriggerAutocomplete()
+        }
+      }
+    } else {
+      this.updateAutocomplete()
+    }
+  }
+
+  private handlePaste(pastedText: string): void {
+    this.cancelAutocomplete()
+    this.historyIndex = -1 // Exit history browsing mode
+    this.lastAction = null
+
+    this.pushUndoSnapshot()
+
+    // Some terminals (e.g. tmux popups with extended-keys-format=csi-u) re-encode
+    // control bytes inside bracketed paste as CSI-u Ctrl+<letter> sequences
+    // (ESC [ <codepoint> ; 5 u). Decode those back to their literal byte so the
+    // per-char filter below preserves newlines instead of stripping ESC and
+    // leaking the printable tail (e.g. "[106;5u") into the editor.
+    const decodedText = pastedText.replace(/\x1b\[(\d+);5u/g, (match, code) => {
+      const cp = Number(code)
+      if (cp >= 97 && cp <= 122) return String.fromCharCode(cp - 96)
+      if (cp >= 65 && cp <= 90) return String.fromCharCode(cp - 64)
+      return match
+    })
+
+    // Clean the pasted text: normalize line endings, expand tabs
+    const cleanText = this.normalizeText(decodedText)
+
+    // Filter out non-printable characters except newlines
+    let filteredText = cleanText
+      .split('')
+      .filter(char => char === '\n' || char.charCodeAt(0) >= 32)
+      .join('')
+
+    // If pasting a file path (starts with /, ~, or .) and the character before
+    // the cursor is a word character, prepend a space for better readability
+    if (/^[/~.]/.test(filteredText)) {
+      const currentLine = this.state.lines[this.state.cursorLine] || ''
+      const charBeforeCursor = this.state.cursorCol > 0 ? currentLine[this.state.cursorCol - 1] : ''
+      if (charBeforeCursor && /\w/.test(charBeforeCursor)) {
+        filteredText = ` ${filteredText}`
+      }
+    }
+
+    // Split into lines to check for large paste
+    const pastedLines = filteredText.split('\n')
+
+    // Check if this is a large paste (> 10 lines or > 1000 characters)
+    const totalChars = filteredText.length
+    if (pastedLines.length > 10 || totalChars > 1000) {
+      // Store the paste and insert a marker
+      this.pasteCounter++
+      const pasteId = this.pasteCounter
+      this.pastes.set(pasteId, filteredText)
+
+      // Insert marker like "[paste #1 +123 lines]" or "[paste #1 1234 chars]"
+      const marker =
+        pastedLines.length > 10
+          ? `[paste #${pasteId} +${pastedLines.length} lines]`
+          : `[paste #${pasteId} ${totalChars} chars]`
+      this.insertTextAtCursorInternal(marker)
+      return
+    }
+
+    if (pastedLines.length === 1) {
+      // Single line - insert atomically (do not trigger autocomplete during paste)
+      this.insertTextAtCursorInternal(filteredText)
+      return
+    }
+
+    // Multi-line paste - use direct state manipulation
+    this.insertTextAtCursorInternal(filteredText)
+  }
+
+  private addNewLine(): void {
+    this.cancelAutocomplete()
+    this.historyIndex = -1 // Exit history browsing mode
+    this.lastAction = null
+
+    this.pushUndoSnapshot()
+
+    const currentLine = this.state.lines[this.state.cursorLine] || ''
+
+    const before = currentLine.slice(0, this.state.cursorCol)
+    const after = currentLine.slice(this.state.cursorCol)
+
+    // Split current line
+    this.state.lines[this.state.cursorLine] = before
+    this.state.lines.splice(this.state.cursorLine + 1, 0, after)
+
+    // Move cursor to start of new line
+    this.state.cursorLine++
+    this.setCursorCol(0)
+
+    if (this.onChange) {
+      this.onChange(this.getText())
+    }
+  }
+
+  private shouldSubmitOnBackslashEnter(
+    data: string,
+    kb: ReturnType<typeof getKeybindings>,
+  ): boolean {
+    if (this.disableSubmit) return false
+    if (!matchesKey(data, 'enter')) return false
+    const submitKeys = kb.getKeys('tui.input.submit')
+    const hasShiftEnter = submitKeys.includes('shift+enter') || submitKeys.includes('shift+return')
+    if (!hasShiftEnter) return false
+
+    const currentLine = this.state.lines[this.state.cursorLine] || ''
+    return this.state.cursorCol > 0 && currentLine[this.state.cursorCol - 1] === '\\'
+  }
+
+  private submitValue(): void {
+    this.cancelAutocomplete()
+    const result = this.expandPasteMarkers(this.state.lines.join('\n')).trim()
+
+    this.state = { lines: [''], cursorLine: 0, cursorCol: 0 }
+    this.pastes.clear()
+    this.pasteCounter = 0
+    this.historyIndex = -1
+    this.scrollOffset = 0
+    this.undoStack.clear()
+    this.lastAction = null
+
+    if (this.onChange) this.onChange('')
+    if (this.onSubmit) this.onSubmit(result)
+  }
+
+  private handleBackspace(): void {
+    this.historyIndex = -1 // Exit history browsing mode
+    this.lastAction = null
+
+    if (this.state.cursorCol > 0) {
+      this.pushUndoSnapshot()
+
+      // Delete grapheme before cursor (handles emojis, combining characters, etc.)
+      const line = this.state.lines[this.state.cursorLine] || ''
+      const beforeCursor = line.slice(0, this.state.cursorCol)
+
+      // Find the last grapheme in the text before cursor
+      const graphemes = [...this.segment(beforeCursor, 'grapheme')]
+      const lastGrapheme = graphemes[graphemes.length - 1]
+      const graphemeLength = lastGrapheme ? lastGrapheme.segment.length : 1
+
+      const before = line.slice(0, this.state.cursorCol - graphemeLength)
+      const after = line.slice(this.state.cursorCol)
+
+      this.state.lines[this.state.cursorLine] = before + after
+      this.setCursorCol(this.state.cursorCol - graphemeLength)
+    } else if (this.state.cursorLine > 0) {
+      this.pushUndoSnapshot()
+
+      // Merge with previous line
+      const currentLine = this.state.lines[this.state.cursorLine] || ''
+      const previousLine = this.state.lines[this.state.cursorLine - 1] || ''
+
+      this.state.lines[this.state.cursorLine - 1] = previousLine + currentLine
+      this.state.lines.splice(this.state.cursorLine, 1)
+
+      this.state.cursorLine--
+      this.setCursorCol(previousLine.length)
+    }
+
+    if (this.onChange) {
+      this.onChange(this.getText())
+    }
+
+    // Update or re-trigger autocomplete after backspace
+    if (this.autocompleteState) {
+      this.updateAutocomplete()
+    } else {
+      // If autocomplete was cancelled (no matches), re-trigger if we're in a completable context
+      const currentLine = this.state.lines[this.state.cursorLine] || ''
+      const textBeforeCursor = currentLine.slice(0, this.state.cursorCol)
+      // Slash command context
+      if (this.isInSlashCommandContext(textBeforeCursor)) {
+        this.tryTriggerAutocomplete()
+      }
+      // Symbol-based completion context like @ or #
+      else if (textBeforeCursor.match(/(?:^|[\s])[@#][^\s]*$/)) {
+        this.tryTriggerAutocomplete()
+      }
+    }
+  }
+
+  /**
+   * Set cursor column and clear preferredVisualCol.
+   * Use this for all non-vertical cursor movements to reset sticky column behavior.
+   */
+  private setCursorCol(col: number): void {
+    this.state.cursorCol = col
+    this.preferredVisualCol = null
+    this.snappedFromCursorCol = null
+  }
+
+  /**
+   * Move cursor to a target visual line, applying sticky column logic.
+   * Shared by moveCursor() and pageScroll().
+   */
+  private moveToVisualLine(
+    visualLines: Array<{ logicalLine: number; startCol: number; length: number }>,
+    currentVisualLine: number,
+    targetVisualLine: number,
+  ): void {
+    const currentVL = visualLines[currentVisualLine]
+    const targetVL = visualLines[targetVisualLine]
+    if (!(currentVL && targetVL)) return
+
+    // When the cursor was snapped to a segment start, resolve the pre-snap
+    // position against the VL it belongs to. This gives the correct visual
+    // column even after a resize reshuffles VLs.
+    let currentVisualCol: number
+    if (this.snappedFromCursorCol !== null) {
+      const vlIndex = this.findVisualLineAt(
+        visualLines,
+        currentVL.logicalLine,
+        this.snappedFromCursorCol,
+      )
+      currentVisualCol = this.snappedFromCursorCol - visualLines[vlIndex].startCol
+    } else {
+      currentVisualCol = this.state.cursorCol - currentVL.startCol
+    }
+
+    // For non-last segments, clamp to length-1 to stay within the segment
+    const isLastSourceSegment =
+      currentVisualLine === visualLines.length - 1 ||
+      visualLines[currentVisualLine + 1]?.logicalLine !== currentVL.logicalLine
+    const sourceMaxVisualCol = isLastSourceSegment
+      ? currentVL.length
+      : Math.max(0, currentVL.length - 1)
+
+    const isLastTargetSegment =
+      targetVisualLine === visualLines.length - 1 ||
+      visualLines[targetVisualLine + 1]?.logicalLine !== targetVL.logicalLine
+    const targetMaxVisualCol = isLastTargetSegment
+      ? targetVL.length
+      : Math.max(0, targetVL.length - 1)
+
+    const moveToVisualCol = this.computeVerticalMoveColumn(
+      currentVisualCol,
+      sourceMaxVisualCol,
+      targetMaxVisualCol,
+    )
+
+    // Set cursor position
+    this.state.cursorLine = targetVL.logicalLine
+    const targetCol = targetVL.startCol + moveToVisualCol
+    const logicalLine = this.state.lines[targetVL.logicalLine] || ''
+    this.state.cursorCol = Math.min(targetCol, logicalLine.length)
+
+    // Snap cursor to atomic segment boundary (e.g. paste markers)
+    // so the cursor never lands in the middle of a multi-grapheme unit.
+    // Single-grapheme segments don't need snapping.
+    const segments = [...this.segment(logicalLine, 'grapheme')]
+    for (const seg of segments) {
+      if (seg.index > this.state.cursorCol) break
+      if (seg.segment.length <= 1) continue
+      if (this.state.cursorCol < seg.index + seg.segment.length) {
+        const isContinuation = seg.index < targetVL.startCol
+        const isMovingDown = targetVisualLine > currentVisualLine
+
+        if (isContinuation && isMovingDown) {
+          // The segment started on a previous visual line, and we
+          // already visited it on the way down. Skip all remaining
+          // continuation VLs and land on the first VL past it.
+          const segEnd = seg.index + seg.segment.length
+          let next = targetVisualLine + 1
+          while (
+            next < visualLines.length &&
+            visualLines[next].logicalLine === targetVL.logicalLine &&
+            visualLines[next].startCol < segEnd
+          ) {
+            next++
+          }
+          if (next < visualLines.length) {
+            this.moveToVisualLine(visualLines, currentVisualLine, next)
+            return
+          }
+        }
+
+        // Snap to the start of the segment so it gets highlighted.
+        // Store the pre-snap position so the next vertical move can
+        // resolve it to the correct visual column.
+        this.snappedFromCursorCol = this.state.cursorCol
+        this.state.cursorCol = seg.index
+        return
+      }
+    }
+
+    // No snap occurred – we moved out of the atomic segment.
+    this.snappedFromCursorCol = null
+  }
+
+  /**
+   * Compute the target visual column for vertical cursor movement.
+   * Implements the sticky column decision table:
+   *
+   * | P | S | T | U | Scenario                                             | Set Preferred | Move To     |
+   * |---|---|---|---| ---------------------------------------------------- |---------------|-------------|
+   * | 0 | * | 0 | - | Start nav, target fits                               | null          | current     |
+   * | 0 | * | 1 | - | Start nav, target shorter                            | current       | target end  |
+   * | 1 | 0 | 0 | 0 | Clamped, target fits preferred                       | null          | preferred   |
+   * | 1 | 0 | 0 | 1 | Clamped, target longer but still can't fit preferred | keep          | target end  |
+   * | 1 | 0 | 1 | - | Clamped, target even shorter                         | keep          | target end  |
+   * | 1 | 1 | 0 | - | Rewrapped, target fits current                       | null          | current     |
+   * | 1 | 1 | 1 | - | Rewrapped, target shorter than current               | current       | target end  |
+   *
+   * Where:
+   * - P = preferred col is set
+   * - S = cursor in middle of source line (not clamped to end)
+   * - T = target line shorter than current visual col
+   * - U = target line shorter than preferred col
+   */
+  private computeVerticalMoveColumn(
+    currentVisualCol: number,
+    sourceMaxVisualCol: number,
+    targetMaxVisualCol: number,
+  ): number {
+    const hasPreferred = this.preferredVisualCol !== null // P
+    const cursorInMiddle = currentVisualCol < sourceMaxVisualCol // S
+    const targetTooShort = targetMaxVisualCol < currentVisualCol // T
+
+    if (!hasPreferred || cursorInMiddle) {
+      if (targetTooShort) {
+        // Cases 2 and 7
+        this.preferredVisualCol = currentVisualCol
+        return targetMaxVisualCol
+      }
+
+      // Cases 1 and 6
+      this.preferredVisualCol = null
+      return currentVisualCol
+    }
+
+    const targetCantFitPreferred = targetMaxVisualCol < this.preferredVisualCol! // U
+    if (targetTooShort || targetCantFitPreferred) {
+      // Cases 4 and 5
+      return targetMaxVisualCol
+    }
+
+    // Case 3
+    const result = this.preferredVisualCol!
+    this.preferredVisualCol = null
+    return result
+  }
+
+  private moveToLineStart(): void {
+    this.lastAction = null
+    this.setCursorCol(0)
+  }
+
+  private moveToLineEnd(): void {
+    this.lastAction = null
+    const currentLine = this.state.lines[this.state.cursorLine] || ''
+    this.setCursorCol(currentLine.length)
+  }
+
+  private deleteToStartOfLine(): void {
+    this.historyIndex = -1 // Exit history browsing mode
+
+    const currentLine = this.state.lines[this.state.cursorLine] || ''
+
+    if (this.state.cursorCol > 0) {
+      this.pushUndoSnapshot()
+
+      // Calculate text to be deleted and save to kill ring (backward deletion = prepend)
+      const deletedText = currentLine.slice(0, this.state.cursorCol)
+      this.killRing.push(deletedText, { prepend: true, accumulate: this.lastAction === 'kill' })
+      this.lastAction = 'kill'
+
+      // Delete from start of line up to cursor
+      this.state.lines[this.state.cursorLine] = currentLine.slice(this.state.cursorCol)
+      this.setCursorCol(0)
+    } else if (this.state.cursorLine > 0) {
+      this.pushUndoSnapshot()
+
+      // At start of line - merge with previous line, treating newline as deleted text
+      this.killRing.push('\n', { prepend: true, accumulate: this.lastAction === 'kill' })
+      this.lastAction = 'kill'
+
+      const previousLine = this.state.lines[this.state.cursorLine - 1] || ''
+      this.state.lines[this.state.cursorLine - 1] = previousLine + currentLine
+      this.state.lines.splice(this.state.cursorLine, 1)
+      this.state.cursorLine--
+      this.setCursorCol(previousLine.length)
+    }
+
+    if (this.onChange) {
+      this.onChange(this.getText())
+    }
+  }
+
+  private deleteToEndOfLine(): void {
+    this.historyIndex = -1 // Exit history browsing mode
+
+    const currentLine = this.state.lines[this.state.cursorLine] || ''
+
+    if (this.state.cursorCol < currentLine.length) {
+      this.pushUndoSnapshot()
+
+      // Calculate text to be deleted and save to kill ring (forward deletion = append)
+      const deletedText = currentLine.slice(this.state.cursorCol)
+      this.killRing.push(deletedText, { prepend: false, accumulate: this.lastAction === 'kill' })
+      this.lastAction = 'kill'
+
+      // Delete from cursor to end of line
+      this.state.lines[this.state.cursorLine] = currentLine.slice(0, this.state.cursorCol)
+    } else if (this.state.cursorLine < this.state.lines.length - 1) {
+      this.pushUndoSnapshot()
+
+      // At end of line - merge with next line, treating newline as deleted text
+      this.killRing.push('\n', { prepend: false, accumulate: this.lastAction === 'kill' })
+      this.lastAction = 'kill'
+
+      const nextLine = this.state.lines[this.state.cursorLine + 1] || ''
+      this.state.lines[this.state.cursorLine] = currentLine + nextLine
+      this.state.lines.splice(this.state.cursorLine + 1, 1)
+    }
+
+    if (this.onChange) {
+      this.onChange(this.getText())
+    }
+  }
+
+  private deleteWordBackwards(): void {
+    this.historyIndex = -1 // Exit history browsing mode
+
+    const currentLine = this.state.lines[this.state.cursorLine] || ''
+
+    // If at start of line, behave like backspace at column 0 (merge with previous line)
+    if (this.state.cursorCol === 0) {
+      if (this.state.cursorLine > 0) {
+        this.pushUndoSnapshot()
+
+        // Treat newline as deleted text (backward deletion = prepend)
+        this.killRing.push('\n', { prepend: true, accumulate: this.lastAction === 'kill' })
+        this.lastAction = 'kill'
+
+        const previousLine = this.state.lines[this.state.cursorLine - 1] || ''
+        this.state.lines[this.state.cursorLine - 1] = previousLine + currentLine
+        this.state.lines.splice(this.state.cursorLine, 1)
+        this.state.cursorLine--
+        this.setCursorCol(previousLine.length)
+      }
+    } else {
+      this.pushUndoSnapshot()
+
+      // Save lastAction before cursor movement (moveWordBackwards resets it)
+      const wasKill = this.lastAction === 'kill'
+
+      const oldCursorCol = this.state.cursorCol
+      this.moveWordBackwards()
+      const deleteFrom = this.state.cursorCol
+      this.setCursorCol(oldCursorCol)
+
+      const deletedText = currentLine.slice(deleteFrom, this.state.cursorCol)
+      this.killRing.push(deletedText, { prepend: true, accumulate: wasKill })
+      this.lastAction = 'kill'
+
+      this.state.lines[this.state.cursorLine] =
+        currentLine.slice(0, deleteFrom) + currentLine.slice(this.state.cursorCol)
+      this.setCursorCol(deleteFrom)
+    }
+
+    if (this.onChange) {
+      this.onChange(this.getText())
+    }
+  }
+
+  private deleteWordForward(): void {
+    this.historyIndex = -1 // Exit history browsing mode
+
+    const currentLine = this.state.lines[this.state.cursorLine] || ''
+
+    // If at end of line, merge with next line (delete the newline)
+    if (this.state.cursorCol >= currentLine.length) {
+      if (this.state.cursorLine < this.state.lines.length - 1) {
+        this.pushUndoSnapshot()
+
+        // Treat newline as deleted text (forward deletion = append)
+        this.killRing.push('\n', { prepend: false, accumulate: this.lastAction === 'kill' })
+        this.lastAction = 'kill'
+
+        const nextLine = this.state.lines[this.state.cursorLine + 1] || ''
+        this.state.lines[this.state.cursorLine] = currentLine + nextLine
+        this.state.lines.splice(this.state.cursorLine + 1, 1)
+      }
+    } else {
+      this.pushUndoSnapshot()
+
+      // Save lastAction before cursor movement (moveWordForwards resets it)
+      const wasKill = this.lastAction === 'kill'
+
+      const oldCursorCol = this.state.cursorCol
+      this.moveWordForwards()
+      const deleteTo = this.state.cursorCol
+      this.setCursorCol(oldCursorCol)
+
+      const deletedText = currentLine.slice(this.state.cursorCol, deleteTo)
+      this.killRing.push(deletedText, { prepend: false, accumulate: wasKill })
+      this.lastAction = 'kill'
+
+      this.state.lines[this.state.cursorLine] =
+        currentLine.slice(0, this.state.cursorCol) + currentLine.slice(deleteTo)
+    }
+
+    if (this.onChange) {
+      this.onChange(this.getText())
+    }
+  }
+
+  private handleForwardDelete(): void {
+    this.historyIndex = -1 // Exit history browsing mode
+    this.lastAction = null
+
+    const currentLine = this.state.lines[this.state.cursorLine] || ''
+
+    if (this.state.cursorCol < currentLine.length) {
+      this.pushUndoSnapshot()
+
+      // Delete grapheme at cursor position (handles emojis, combining characters, etc.)
+      const afterCursor = currentLine.slice(this.state.cursorCol)
+
+      // Find the first grapheme at cursor
+      const graphemes = [...this.segment(afterCursor, 'grapheme')]
+      const firstGrapheme = graphemes[0]
+      const graphemeLength = firstGrapheme ? firstGrapheme.segment.length : 1
+
+      const before = currentLine.slice(0, this.state.cursorCol)
+      const after = currentLine.slice(this.state.cursorCol + graphemeLength)
+      this.state.lines[this.state.cursorLine] = before + after
+    } else if (this.state.cursorLine < this.state.lines.length - 1) {
+      this.pushUndoSnapshot()
+
+      // At end of line - merge with next line
+      const nextLine = this.state.lines[this.state.cursorLine + 1] || ''
+      this.state.lines[this.state.cursorLine] = currentLine + nextLine
+      this.state.lines.splice(this.state.cursorLine + 1, 1)
+    }
+
+    if (this.onChange) {
+      this.onChange(this.getText())
+    }
+
+    // Update or re-trigger autocomplete after forward delete
+    if (this.autocompleteState) {
+      this.updateAutocomplete()
+    } else {
+      const currentLine = this.state.lines[this.state.cursorLine] || ''
+      const textBeforeCursor = currentLine.slice(0, this.state.cursorCol)
+      // Slash command context
+      if (this.isInSlashCommandContext(textBeforeCursor)) {
+        this.tryTriggerAutocomplete()
+      }
+      // Symbol-based completion context like @ or #
+      else if (textBeforeCursor.match(/(?:^|[\s])[@#][^\s]*$/)) {
+        this.tryTriggerAutocomplete()
+      }
+    }
+  }
+
+  /**
+   * Build a mapping from visual lines to logical positions.
+   * Returns an array where each element represents a visual line with:
+   * - logicalLine: index into this.state.lines
+   * - startCol: starting column in the logical line
+   * - length: length of this visual line segment
+   */
+  private buildVisualLineMap(
+    width: number,
+  ): Array<{ logicalLine: number; startCol: number; length: number }> {
+    const visualLines: Array<{ logicalLine: number; startCol: number; length: number }> = []
+
+    for (let i = 0; i < this.state.lines.length; i++) {
+      const line = this.state.lines[i] || ''
+      const lineVisWidth = visibleWidth(line)
+      if (line.length === 0) {
+        // Empty line still takes one visual line
+        visualLines.push({ logicalLine: i, startCol: 0, length: 0 })
+      } else if (lineVisWidth <= width) {
+        visualLines.push({ logicalLine: i, startCol: 0, length: line.length })
+      } else {
+        // Line needs wrapping - use word-aware wrapping
+        const chunks = wordWrapLine(line, width, [...this.segment(line, 'grapheme')])
+        for (const chunk of chunks) {
+          visualLines.push({
+            logicalLine: i,
+            startCol: chunk.startIndex,
+            length: chunk.endIndex - chunk.startIndex,
+          })
+        }
+      }
+    }
+
+    return visualLines
+  }
+
+  /**
+   * Find the visual line index that contains the given logical position.
+   */
+  private findVisualLineAt(
+    visualLines: Array<{ logicalLine: number; startCol: number; length: number }>,
+    line: number,
+    col: number,
+  ): number {
+    for (let i = 0; i < visualLines.length; i++) {
+      const vl = visualLines[i]
+      if (!vl || vl.logicalLine !== line) continue
+      const offset = col - vl.startCol
+      // Cursor is in this segment if it's within range. For the last
+      // segment of a logical line, cursor can be at length (end position)
+      const isLastSegmentOfLine =
+        i === visualLines.length - 1 || visualLines[i + 1]?.logicalLine !== vl.logicalLine
+      if (offset >= 0 && (offset < vl.length || (isLastSegmentOfLine && offset === vl.length))) {
+        return i
+      }
+    }
+    return visualLines.length - 1
+  }
+
+  /**
+   * Find the visual line index for the current cursor position.
+   */
+  private findCurrentVisualLine(
+    visualLines: Array<{ logicalLine: number; startCol: number; length: number }>,
+  ): number {
+    return this.findVisualLineAt(visualLines, this.state.cursorLine, this.state.cursorCol)
+  }
+
+  private moveCursor(deltaLine: number, deltaCol: number): void {
+    this.lastAction = null
+    const visualLines = this.buildVisualLineMap(this.lastWidth)
+    const currentVisualLine = this.findCurrentVisualLine(visualLines)
+
+    if (deltaLine !== 0) {
+      const targetVisualLine = currentVisualLine + deltaLine
+
+      if (targetVisualLine >= 0 && targetVisualLine < visualLines.length) {
+        this.moveToVisualLine(visualLines, currentVisualLine, targetVisualLine)
+      }
+    }
+
+    if (deltaCol !== 0) {
+      const currentLine = this.state.lines[this.state.cursorLine] || ''
+
+      if (deltaCol > 0) {
+        // Moving right - move by one grapheme (handles emojis, combining characters, etc.)
+        if (this.state.cursorCol < currentLine.length) {
+          const afterCursor = currentLine.slice(this.state.cursorCol)
+          const graphemes = [...this.segment(afterCursor, 'grapheme')]
+          const firstGrapheme = graphemes[0]
+          this.setCursorCol(
+            this.state.cursorCol + (firstGrapheme ? firstGrapheme.segment.length : 1),
+          )
+        } else if (this.state.cursorLine < this.state.lines.length - 1) {
+          // Wrap to start of next logical line
+          this.state.cursorLine++
+          this.setCursorCol(0)
+        } else {
+          // At end of last line - can't move, but set preferredVisualCol for up/down navigation
+          const currentVL = visualLines[currentVisualLine]
+          if (currentVL) {
+            this.preferredVisualCol = this.state.cursorCol - currentVL.startCol
+          }
+        }
+      } else {
+        // Moving left - move by one grapheme (handles emojis, combining characters, etc.)
+        if (this.state.cursorCol > 0) {
+          const beforeCursor = currentLine.slice(0, this.state.cursorCol)
+          const graphemes = [...this.segment(beforeCursor, 'grapheme')]
+          const lastGrapheme = graphemes[graphemes.length - 1]
+          this.setCursorCol(this.state.cursorCol - (lastGrapheme ? lastGrapheme.segment.length : 1))
+        } else if (this.state.cursorLine > 0) {
+          // Wrap to end of previous logical line
+          this.state.cursorLine--
+          const prevLine = this.state.lines[this.state.cursorLine] || ''
+          this.setCursorCol(prevLine.length)
+        }
+      }
+    }
+  }
+
+  /**
+   * Scroll by a page (direction: -1 for up, 1 for down).
+   * Moves cursor by the page size while keeping it in bounds.
+   */
+  private pageScroll(direction: -1 | 1): void {
+    this.lastAction = null
+    const terminalRows = this.tui.terminal.rows
+    const pageSize = Math.max(5, Math.floor(terminalRows * 0.3))
+
+    const visualLines = this.buildVisualLineMap(this.lastWidth)
+    const currentVisualLine = this.findCurrentVisualLine(visualLines)
+    const targetVisualLine = Math.max(
+      0,
+      Math.min(visualLines.length - 1, currentVisualLine + direction * pageSize),
+    )
+
+    this.moveToVisualLine(visualLines, currentVisualLine, targetVisualLine)
+  }
+
+  private moveWordBackwards(): void {
+    this.lastAction = null
+    const currentLine = this.state.lines[this.state.cursorLine] || ''
+
+    // If at start of line, move to end of previous line
+    if (this.state.cursorCol === 0) {
+      if (this.state.cursorLine > 0) {
+        this.state.cursorLine--
+        const prevLine = this.state.lines[this.state.cursorLine] || ''
+        this.setCursorCol(prevLine.length)
+      }
+      return
+    }
+
+    this.setCursorCol(
+      findWordBackward(currentLine, this.state.cursorCol, {
+        segment: text => this.segment(text, 'word'),
+        isAtomicSegment: isPasteMarker,
+      }),
+    )
+  }
+
+  /**
+   * Yank (paste) the most recent kill ring entry at cursor position.
+   */
+  private yank(): void {
+    if (this.killRing.length === 0) return
+
+    this.pushUndoSnapshot()
+
+    const text = this.killRing.peek()!
+    this.insertYankedText(text)
+
+    this.lastAction = 'yank'
+  }
+
+  /**
+   * Cycle through kill ring (only works immediately after yank or yank-pop).
+   * Replaces the last yanked text with the previous entry in the ring.
+   */
+  private yankPop(): void {
+    // Only works if we just yanked and have more than one entry
+    if (this.lastAction !== 'yank' || this.killRing.length <= 1) return
+
+    this.pushUndoSnapshot()
+
+    // Delete the previously yanked text (still at end of ring before rotation)
+    this.deleteYankedText()
+
+    // Rotate the ring: move end to front
+    this.killRing.rotate()
+
+    // Insert the new most recent entry (now at end after rotation)
+    const text = this.killRing.peek()!
+    this.insertYankedText(text)
+
+    this.lastAction = 'yank'
+  }
+
+  /**
+   * Insert text at cursor position (used by yank operations).
+   */
+  private insertYankedText(text: string): void {
+    this.historyIndex = -1 // Exit history browsing mode
+    const lines = text.split('\n')
+
+    if (lines.length === 1) {
+      // Single line - insert at cursor
+      const currentLine = this.state.lines[this.state.cursorLine] || ''
+      const before = currentLine.slice(0, this.state.cursorCol)
+      const after = currentLine.slice(this.state.cursorCol)
+      this.state.lines[this.state.cursorLine] = before + text + after
+      this.setCursorCol(this.state.cursorCol + text.length)
+    } else {
+      // Multi-line insert
+      const currentLine = this.state.lines[this.state.cursorLine] || ''
+      const before = currentLine.slice(0, this.state.cursorCol)
+      const after = currentLine.slice(this.state.cursorCol)
+
+      // First line merges with text before cursor
+      this.state.lines[this.state.cursorLine] = before + (lines[0] || '')
+
+      // Insert middle lines
+      for (let i = 1; i < lines.length - 1; i++) {
+        this.state.lines.splice(this.state.cursorLine + i, 0, lines[i] || '')
+      }
+
+      // Last line merges with text after cursor
+      const lastLineIndex = this.state.cursorLine + lines.length - 1
+      this.state.lines.splice(lastLineIndex, 0, (lines[lines.length - 1] || '') + after)
+
+      // Update cursor position
+      this.state.cursorLine = lastLineIndex
+      this.setCursorCol((lines[lines.length - 1] || '').length)
+    }
+
+    if (this.onChange) {
+      this.onChange(this.getText())
+    }
+  }
+
+  /**
+   * Delete the previously yanked text (used by yank-pop).
+   * The yanked text is derived from killRing[end] since it hasn't been rotated yet.
+   */
+  private deleteYankedText(): void {
+    const yankedText = this.killRing.peek()
+    if (!yankedText) return
+
+    const yankLines = yankedText.split('\n')
+
+    if (yankLines.length === 1) {
+      // Single line - delete backward from cursor
+      const currentLine = this.state.lines[this.state.cursorLine] || ''
+      const deleteLen = yankedText.length
+      const before = currentLine.slice(0, this.state.cursorCol - deleteLen)
+      const after = currentLine.slice(this.state.cursorCol)
+      this.state.lines[this.state.cursorLine] = before + after
+      this.setCursorCol(this.state.cursorCol - deleteLen)
+    } else {
+      // Multi-line delete - cursor is at end of last yanked line
+      const startLine = this.state.cursorLine - (yankLines.length - 1)
+      const startCol = (this.state.lines[startLine] || '').length - (yankLines[0] || '').length
+
+      // Get text after cursor on current line
+      const afterCursor = (this.state.lines[this.state.cursorLine] || '').slice(
+        this.state.cursorCol,
+      )
+
+      // Get text before yank start position
+      const beforeYank = (this.state.lines[startLine] || '').slice(0, startCol)
+
+      // Remove all lines from startLine to cursorLine and replace with merged line
+      this.state.lines.splice(startLine, yankLines.length, beforeYank + afterCursor)
+
+      // Update cursor
+      this.state.cursorLine = startLine
+      this.setCursorCol(startCol)
+    }
+
+    if (this.onChange) {
+      this.onChange(this.getText())
+    }
+  }
+
+  private pushUndoSnapshot(): void {
+    this.undoStack.push(this.state)
+  }
+
+  private undo(): void {
+    this.historyIndex = -1 // Exit history browsing mode
+    const snapshot = this.undoStack.pop()
+    if (!snapshot) return
+    Object.assign(this.state, snapshot)
+    this.lastAction = null
+    this.preferredVisualCol = null
+    if (this.onChange) {
+      this.onChange(this.getText())
+    }
+  }
+
+  /**
+   * Jump to the first occurrence of a character in the specified direction.
+   * Multi-line search. Case-sensitive. Skips the current cursor position.
+   */
+  private jumpToChar(char: string, direction: 'forward' | 'backward'): void {
+    this.lastAction = null
+    const isForward = direction === 'forward'
+    const lines = this.state.lines
+
+    const end = isForward ? lines.length : -1
+    const step = isForward ? 1 : -1
+
+    for (let lineIdx = this.state.cursorLine; lineIdx !== end; lineIdx += step) {
+      const line = lines[lineIdx] || ''
+      const isCurrentLine = lineIdx === this.state.cursorLine
+
+      // Current line: start after/before cursor; other lines: search full line
+      const searchFrom = isCurrentLine
+        ? isForward
+          ? this.state.cursorCol + 1
+          : this.state.cursorCol - 1
+        : undefined
+
+      const idx = isForward ? line.indexOf(char, searchFrom) : line.lastIndexOf(char, searchFrom)
+
+      if (idx !== -1) {
+        this.state.cursorLine = lineIdx
+        this.setCursorCol(idx)
+        return
+      }
+    }
+    // No match found - cursor stays in place
+  }
+
+  private moveWordForwards(): void {
+    this.lastAction = null
+    const currentLine = this.state.lines[this.state.cursorLine] || ''
+
+    // If at end of line, move to start of next line
+    if (this.state.cursorCol >= currentLine.length) {
+      if (this.state.cursorLine < this.state.lines.length - 1) {
+        this.state.cursorLine++
+        this.setCursorCol(0)
+      }
+      return
+    }
+
+    this.setCursorCol(
+      findWordForward(currentLine, this.state.cursorCol, {
+        segment: text => this.segment(text, 'word'),
+        isAtomicSegment: isPasteMarker,
+      }),
+    )
+  }
+
+  // Slash menu only allowed on the first line of the editor
+  private isSlashMenuAllowed(): boolean {
+    return this.state.cursorLine === 0
+  }
+
+  // Helper method to check if cursor is at start of message (for slash command detection)
+  private isAtStartOfMessage(): boolean {
+    if (!this.isSlashMenuAllowed()) return false
+    const currentLine = this.state.lines[this.state.cursorLine] || ''
+    const beforeCursor = currentLine.slice(0, this.state.cursorCol)
+    return beforeCursor.trim() === '' || beforeCursor.trim() === '/'
+  }
+
+  private isInSlashCommandContext(textBeforeCursor: string): boolean {
+    return this.isSlashMenuAllowed() && textBeforeCursor.trimStart().startsWith('/')
+  }
+
+  // Autocomplete methods
+  /**
+   * Find the best autocomplete item index for the given prefix.
+   * Returns -1 if no match is found.
+   *
+   * Match priority:
+   * 1. Exact match (prefix === item.value) -> always selected
+   * 2. Prefix match -> first item whose value starts with prefix
+   * 3. No match -> -1 (keep default highlight)
+   *
+   * Matching is case-sensitive and checks item.value only.
+   */
+  private getBestAutocompleteMatchIndex(
+    items: Array<{ value: string; label: string }>,
+    prefix: string,
+  ): number {
+    if (!prefix) return -1
+
+    let firstPrefixIndex = -1
+
+    for (let i = 0; i < items.length; i++) {
+      const value = items[i]!.value
+      if (value === prefix) {
+        return i // Exact match always wins
+      }
+      if (firstPrefixIndex === -1 && value.startsWith(prefix)) {
+        firstPrefixIndex = i
+      }
+    }
+
+    return firstPrefixIndex
+  }
+
+  private createAutocompleteList(
+    prefix: string,
+    items: Array<{ value: string; label: string; description?: string }>,
+  ): SelectList {
+    const layout = prefix.startsWith('/') ? SLASH_COMMAND_SELECT_LIST_LAYOUT : undefined
+    return new SelectList(items, this.autocompleteMaxVisible, this.theme.selectList, layout)
+  }
+
+  private tryTriggerAutocomplete(explicitTab: boolean = false): void {
+    this.requestAutocomplete({ force: false, explicitTab })
+  }
+
+  private handleTabCompletion(): void {
+    if (!this.autocompleteProvider) return
+
+    const currentLine = this.state.lines[this.state.cursorLine] || ''
+    const beforeCursor = currentLine.slice(0, this.state.cursorCol)
+
+    if (this.isInSlashCommandContext(beforeCursor) && !beforeCursor.trimStart().includes(' ')) {
+      this.handleSlashCommandCompletion()
+    } else {
+      this.forceFileAutocomplete(true)
+    }
+  }
+
+  private handleSlashCommandCompletion(): void {
+    this.requestAutocomplete({ force: false, explicitTab: true })
+  }
+
+  private forceFileAutocomplete(explicitTab: boolean = false): void {
+    this.requestAutocomplete({ force: true, explicitTab })
+  }
+
+  private requestAutocomplete(options: { force: boolean; explicitTab: boolean }): void {
+    if (!this.autocompleteProvider) return
+
+    if (options.force) {
+      const shouldTrigger =
+        !this.autocompleteProvider.shouldTriggerFileCompletion ||
+        this.autocompleteProvider.shouldTriggerFileCompletion(
+          this.state.lines,
+          this.state.cursorLine,
+          this.state.cursorCol,
+        )
+      if (!shouldTrigger) {
+        return
+      }
+    }
+
+    this.cancelAutocompleteRequest()
+    const startToken = ++this.autocompleteStartToken
+
+    const debounceMs = this.getAutocompleteDebounceMs(options)
+    if (debounceMs > 0) {
+      this.autocompleteDebounceTimer = setTimeout(() => {
+        this.autocompleteDebounceTimer = undefined
+        void this.startAutocompleteRequest(startToken, options)
+      }, debounceMs)
+      return
+    }
+
+    void this.startAutocompleteRequest(startToken, options)
+  }
+
+  private async startAutocompleteRequest(
+    startToken: number,
+    options: { force: boolean; explicitTab: boolean },
+  ): Promise<void> {
+    const previousTask = this.autocompleteRequestTask
+    this.autocompleteRequestTask = (async () => {
+      await previousTask
+      if (startToken !== this.autocompleteStartToken || !this.autocompleteProvider) {
+        return
+      }
+
+      const controller = new AbortController()
+      this.autocompleteAbort = controller
+      const requestId = ++this.autocompleteRequestId
+      const snapshotText = this.getText()
+      const snapshotLine = this.state.cursorLine
+      const snapshotCol = this.state.cursorCol
+
+      await this.runAutocompleteRequest(
+        requestId,
+        controller,
+        snapshotText,
+        snapshotLine,
+        snapshotCol,
+        options,
+      )
+    })()
+    await this.autocompleteRequestTask
+  }
+
+  private getAutocompleteDebounceMs(options: { force: boolean; explicitTab: boolean }): number {
+    if (options.explicitTab || options.force) {
+      return 0
+    }
+
+    const currentLine = this.state.lines[this.state.cursorLine] || ''
+    const textBeforeCursor = currentLine.slice(0, this.state.cursorCol)
+    const isSymbolAutocompleteContext = /(?:^|[ \t])(?:@(?:"[^"]*|[^\s]*)|#[^\s]*)$/.test(
+      textBeforeCursor,
+    )
+    return isSymbolAutocompleteContext ? ATTACHMENT_AUTOCOMPLETE_DEBOUNCE_MS : 0
+  }
+
+  private async runAutocompleteRequest(
+    requestId: number,
+    controller: AbortController,
+    snapshotText: string,
+    snapshotLine: number,
+    snapshotCol: number,
+    options: { force: boolean; explicitTab: boolean },
+  ): Promise<void> {
+    if (!this.autocompleteProvider) return
+
+    const suggestions = await this.autocompleteProvider.getSuggestions(
+      this.state.lines,
+      this.state.cursorLine,
+      this.state.cursorCol,
+      { signal: controller.signal, force: options.force },
+    )
+
+    if (
+      !this.isAutocompleteRequestCurrent(
+        requestId,
+        controller,
+        snapshotText,
+        snapshotLine,
+        snapshotCol,
+      )
+    ) {
+      return
+    }
+
+    this.autocompleteAbort = undefined
+
+    if (!suggestions || !Array.isArray(suggestions.items) || suggestions.items.length === 0) {
+      this.cancelAutocomplete()
+      this.tui.requestRender()
+      return
+    }
+
+    if (options.force && options.explicitTab && suggestions.items.length === 1) {
+      const item = suggestions.items[0]!
+      this.pushUndoSnapshot()
+      this.lastAction = null
+      const result = this.autocompleteProvider.applyCompletion(
+        this.state.lines,
+        this.state.cursorLine,
+        this.state.cursorCol,
+        item,
+        suggestions.prefix,
+      )
+      this.state.lines = result.lines
+      this.state.cursorLine = result.cursorLine
+      this.setCursorCol(result.cursorCol)
+      if (this.onChange) this.onChange(this.getText())
+      this.tui.requestRender()
+      return
+    }
+
+    this.applyAutocompleteSuggestions(suggestions, options.force ? 'force' : 'regular')
+    this.tui.requestRender()
+  }
+
+  private isAutocompleteRequestCurrent(
+    requestId: number,
+    controller: AbortController,
+    snapshotText: string,
+    snapshotLine: number,
+    snapshotCol: number,
+  ): boolean {
+    return (
+      !controller.signal.aborted &&
+      requestId === this.autocompleteRequestId &&
+      this.getText() === snapshotText &&
+      this.state.cursorLine === snapshotLine &&
+      this.state.cursorCol === snapshotCol
+    )
+  }
+
+  private applyAutocompleteSuggestions(
+    suggestions: AutocompleteSuggestions,
+    state: 'regular' | 'force',
+  ): void {
+    this.autocompletePrefix = suggestions.prefix
+    this.autocompleteList = this.createAutocompleteList(suggestions.prefix, suggestions.items)
+
+    const bestMatchIndex = this.getBestAutocompleteMatchIndex(suggestions.items, suggestions.prefix)
+    if (bestMatchIndex >= 0) {
+      this.autocompleteList.setSelectedIndex(bestMatchIndex)
+    }
+
+    this.autocompleteState = state
+  }
+
+  private cancelAutocompleteRequest(): void {
+    this.autocompleteStartToken += 1
+    if (this.autocompleteDebounceTimer) {
+      clearTimeout(this.autocompleteDebounceTimer)
+      this.autocompleteDebounceTimer = undefined
+    }
+    this.autocompleteAbort?.abort()
+    this.autocompleteAbort = undefined
+  }
+
+  private clearAutocompleteUi(): void {
+    this.autocompleteState = null
+    this.autocompleteList = undefined
+    this.autocompletePrefix = ''
+  }
+
+  private cancelAutocomplete(): void {
+    this.cancelAutocompleteRequest()
+    this.clearAutocompleteUi()
+  }
+
+  public isShowingAutocomplete(): boolean {
+    return this.autocompleteState !== null
+  }
+
+  private updateAutocomplete(): void {
+    if (!this.autocompleteState || !this.autocompleteProvider) return
+    this.requestAutocomplete({ force: this.autocompleteState === 'force', explicitTab: false })
+  }
+}