fix(cli): implement sticky column for multiline cursor navigation

Fixes cursor position resetting when navigating up/down through lines of
varying lengths. The cursor now remembers its target column during
vertical navigation, matching standard text editor behavior.

- Add stickyColumnRef to track goal column during up/down navigation
- Add getOrSetStickyColumn helper that captures column on first vertical
  movement and reuses it for subsequent movements
- Add desiredIndex parameter to calculateNewCursorPosition
- Clear sticky column on any non-vertical key press

Author: brandonkachen

cli/src/components/multiline-input.tsx

@@ -139,6 +139,29 @@ export const MultilineInput = forwardRef<
   // Refs to track latest values for paste handler (prevents stale closure issues)
   const valueRef = useRef(value)
   const cursorPositionRef = useRef(cursorPosition)
+  const stickyColumnRef = useRef<number | null>(null)
+
+  // Helper to get or set the sticky column for vertical navigation
+  const getOrSetStickyColumn = useCallback(
+    (lineStarts: number[], cursorIsChar: boolean): number => {
+      if (stickyColumnRef.current != null) {
+        return stickyColumnRef.current
+      }
+      const lineIndex = lineStarts.findLastIndex(
+        (lineStart) => lineStart <= cursorPositionRef.current,
+      )
+      // Account for cursorIsChar offset like cursorDown does
+      const column =
+        lineIndex === -1
+          ? 0
+          : cursorPositionRef.current -
+            lineStarts[lineIndex] +
+            (cursorIsChar ? -1 : 0)
+      stickyColumnRef.current = Math.max(0, column)
+      return stickyColumnRef.current
+    },
+    [],
+  )
 
   // Keep refs in sync with props
   useEffect(() => {
@@ -324,6 +347,11 @@ export const MultilineInput = forwardRef<
           }
         }
 
+        const isVerticalNavKey = key.name === 'up' || key.name === 'down'
+        if (!isVerticalNavKey) {
+          stickyColumnRef.current = null
+        }
+
         const lowerKeyName = (key.name ?? '').toLowerCase()
         const ESC = '\x1b'
         const isAltLikeModifier = Boolean(
@@ -699,13 +727,18 @@ export const MultilineInput = forwardRef<
         // Up arrow (no modifiers)
         if (key.name === 'up' && !key.ctrl && !key.meta && !key.option) {
           preventKeyDefault(key)
+
+          const lineStarts = lineInfo?.lineStarts ?? []
+          const desiredIndex = getOrSetStickyColumn(lineStarts, !shouldHighlight)
+
           onChange({
             text: value,
             cursorPosition: calculateNewCursorPosition({
               cursorPosition,
-              lineStarts: lineInfo?.lineStarts ?? [],
+              lineStarts,
               cursorIsChar: !shouldHighlight,
               direction: 'up',
+              desiredIndex,
             }),
             lastEditDueToNav: false,
           })
@@ -714,13 +747,17 @@ export const MultilineInput = forwardRef<
 
         // Down arrow (no modifiers)
         if (key.name === 'down' && !key.ctrl && !key.meta && !key.option) {
+          const lineStarts = lineInfo?.lineStarts ?? []
+          const desiredIndex = getOrSetStickyColumn(lineStarts, !shouldHighlight)
+
           onChange({
             text: value,
             cursorPosition: calculateNewCursorPosition({
               cursorPosition,
-              lineStarts: lineInfo?.lineStarts ?? [],
+              lineStarts,
               cursorIsChar: !shouldHighlight,
               direction: 'down',
+              desiredIndex,
             }),
             lastEditDueToNav: false,
           })

cli/src/utils/word-wrap-utils.ts

@@ -1,36 +1,36 @@
 function cursorUp(params: {
   lineStarts: number[]
   cursorPosition: number
+  desiredIndex: number
 }): number {
-  const { lineStarts, cursorPosition } = params
+  const { lineStarts, cursorPosition, desiredIndex } = params
   const lineIndex = lineStarts.findLastIndex((start) => start <= cursorPosition)
 
   if (lineIndex === -1 || lineIndex === 0) {
     return 0
   }
 
-  const index = cursorPosition - lineStarts[lineIndex]
-  return Math.min(lineStarts[lineIndex] - 1, lineStarts[lineIndex - 1] + index)
+  const prevLineStart = lineStarts[lineIndex - 1]
+  const prevLineEndExclusive = lineStarts[lineIndex] - 1
+
+  return Math.min(prevLineEndExclusive, prevLineStart + desiredIndex)
 }
 
 function cursorDown(params: {
   lineStarts: number[]
   cursorPosition: number
-  cursorIsChar: boolean
+  desiredIndex: number
 }): number {
-  const { lineStarts, cursorPosition, cursorIsChar } = params
+  const { lineStarts, cursorPosition, desiredIndex } = params
   const lineIndex = lineStarts.findLastIndex((start) => start <= cursorPosition)
 
   if (lineIndex === -1 || lineIndex === lineStarts.length - 1) {
     return Infinity
   }
 
-  // Need to account for cursor character itself
-  const index = cursorPosition - lineStarts[lineIndex] + (cursorIsChar ? -1 : 0)
-
   return Math.min(
     (lineStarts[lineIndex + 2] ?? Infinity) - 1,
-    lineStarts[lineIndex + 1] + index,
+    lineStarts[lineIndex + 1] + desiredIndex,
   )
 }
 
@@ -39,6 +39,7 @@ export function calculateNewCursorPosition(params: {
   lineStarts: number[]
   cursorIsChar: boolean
   direction: 'up' | 'down'
+  desiredIndex: number
 }): number {
   const { direction } = params
   if (direction === 'up') {