refactor(cli): use MultilineInput for ask-user "Other" text field

Replace manual keyboard handling in the ask-user form's free-text input
with the shared MultilineInput component. This delegates character input,
backspace, and cursor movement to MultilineInput while letting navigation
keys (up/down/tab) bubble up to the form's keyboard handler.

Author: brandonkachen

cli/src/components/ask-user/components/other-text-input.tsx

@@ -3,33 +3,60 @@
  */
 
 import React from 'react'
-import { TextAttributes } from '@opentui/core'
+import { TextAttributes, type KeyEvent } from '@opentui/core'
 import { Button } from '../../button'
+import { MultilineInput } from '../../multiline-input'
 import { useTheme } from '../../../hooks/use-theme'
 import { SYMBOLS } from '../constants'
+import type { InputValue } from '../../../state/chat-store'
+
+// Width taken by symbol + "Other:" label + padding
+const LABEL_WIDTH = 10
 
 export interface OtherTextInputProps {
   text: string
   isFocused: boolean
   hasText: boolean
   isSelected: boolean
+  width: number
+  cursorPosition: number
   onClick: () => void
   onMouseOver: () => void
+  onChange: (value: InputValue) => void
+  onSubmit: () => void
 }
 
 export const OtherTextInput: React.FC<OtherTextInputProps> = ({
   text,
   isFocused,
   hasText,
   isSelected,
+  width,
+  cursorPosition,
   onClick,
   onMouseOver,
+  onChange,
+  onSubmit,
 }) => {
   const theme = useTheme()
 
-  // Display placeholder or actual text with cursor
-  const displayText = text || (isFocused ? '' : 'Type your own answer...')
-  const textWithCursor = isFocused && text ? `${text}|` : isFocused ? '|' : displayText
+  const placeholder = 'Type your own answer...'
+
+  // Calculate available width for the input (full width minus label and padding)
+  const inputWidth = Math.max(10, width - LABEL_WIDTH)
+
+  // Intercept navigation keys that should be handled by the ask-user form
+  const handleKeyIntercept = (key: KeyEvent): boolean => {
+    // Let Up/Down/Tab be handled by the form's navigation
+    if (
+      (key.name === 'up' || key.name === 'down' || key.name === 'tab') &&
+      !key.ctrl &&
+      !key.meta
+    ) {
+      return true
+    }
+    return false
+  }
 
   return (
     <Button
@@ -46,7 +73,12 @@ export const OtherTextInput: React.FC<OtherTextInputProps> = ({
     >
       <text
         style={{
-          fg: hasText || isSelected ? theme.primary : isFocused ? theme.foreground : theme.muted,
+          fg:
+            hasText || isSelected
+              ? theme.primary
+              : isFocused
+                ? theme.foreground
+                : theme.muted,
           attributes: isFocused ? TextAttributes.BOLD : undefined,
         }}
       >
@@ -60,14 +92,21 @@ export const OtherTextInput: React.FC<OtherTextInputProps> = ({
       >
         Other:
       </text>
-      <text
-        style={{
-          fg: hasText ? theme.primary : theme.muted,
-          attributes: isFocused ? TextAttributes.BOLD : undefined,
-        }}
-      >
-        {textWithCursor}
-      </text>
+      <box style={{ flexGrow: 1, minWidth: 0, paddingLeft: 1 }}>
+        <MultilineInput
+          value={text}
+          onChange={onChange}
+          onSubmit={onSubmit}
+          onKeyIntercept={handleKeyIntercept}
+          placeholder={placeholder}
+          focused={isFocused}
+          maxHeight={3}
+          minHeight={1}
+          width={inputWidth}
+          textAttributes={undefined}
+          cursorPosition={cursorPosition}
+        />
+      </box>
     </Button>
   )
 }

cli/src/components/ask-user/hooks/use-keyboard-navigation.ts

@@ -205,10 +205,9 @@ export function useKeyboardNavigation(params: KeyboardNavigationParams) {
           !key.meta &&
           !key.shift
         ) {
-          // Handle space in text input: add space character and return
-          if (isFocusOnTextInput(focus) && key.name === 'space') {
-            const currentText = otherTexts[currentQuestionIndex] || ''
-            onOtherTextChange(currentQuestionIndex, currentText + ' ')
+          // When focused on the free-text input, let the MultilineInput component
+          // handle character input and submission behavior.
+          if (isFocusOnTextInput(focus)) {
             return
           }
 
@@ -219,9 +218,6 @@ export function useKeyboardNavigation(params: KeyboardNavigationParams) {
             onSelectAnswer(focus.questionIndex, focus.optionIndex)
             // Let auto-advance hook handle the rest
             onAutoAdvance(focus.optionIndex)
-          } else if (isFocusOnTextInput(focus)) {
-            // Advance if text input has content
-            onTextInputAdvance()
           } else if (isFocusOnConfirmSubmit(focus)) {
             // Submit from confirm screen
             onSubmit()
@@ -247,20 +243,10 @@ export function useKeyboardNavigation(params: KeyboardNavigationParams) {
         // Text Input Handling
         // ====================
 
+        // When focused on the free-text input, let the shared MultilineInput
+        // component handle all text editing (characters, backspace, etc.).
         if (isFocusOnTextInput(focus)) {
-          // Backspace
-          if (key.name === 'backspace') {
-            const currentText = otherTexts[currentQuestionIndex] || ''
-            onOtherTextChange(currentQuestionIndex, currentText.slice(0, -1))
-            return
-          }
-
-          // Character input
-          if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
-            const currentText = otherTexts[currentQuestionIndex] || ''
-            onOtherTextChange(currentQuestionIndex, currentText + key.sequence)
-            return
-          }
+          return
         }
       },
       [] // Empty deps - callback is stable, values accessed via ref

cli/src/components/ask-user/index.tsx

@@ -41,6 +41,9 @@ export const MultipleChoiceForm: React.FC<MultipleChoiceFormProps> = ({
   const theme = useTheme()
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
   const [isOnConfirmScreen, setIsOnConfirmScreen] = useState(false)
+  const [otherCursorPositions, setOtherCursorPositions] = useState<number[]>(
+    () => questions.map(() => 0),
+  )
 
   // Notify parent when question changes
   React.useEffect(() => {
@@ -265,8 +268,22 @@ export const MultipleChoiceForm: React.FC<MultipleChoiceFormProps> = ({
               }
               hasText={!!otherTexts[currentQuestionIndex]?.trim()}
               isSelected={false}
+              width={width}
+              cursorPosition={
+                otherCursorPositions[currentQuestionIndex] ??
+                (otherTexts[currentQuestionIndex] || '').length
+              }
               onClick={() => focusActions.selectTextInput(currentQuestionIndex)}
               onMouseOver={() => focusActions.selectTextInput(currentQuestionIndex)}
+              onChange={({ text, cursorPosition }) => {
+                onOtherTextChange(currentQuestionIndex, text)
+                setOtherCursorPositions((prev) => {
+                  const next = [...prev]
+                  next[currentQuestionIndex] = cursorPosition
+                  return next
+                })
+              }}
+              onSubmit={handleTextInputAdvance}
             />
           </box>
         </box>