refactor(cli): remove deprecated width prop from MultilineInput

Author: brandonkachen

cli/src/chat.tsx

@@ -1216,7 +1216,6 @@ export const Chat = ({
           inputFocused={inputFocused}
           inputRef={inputRef}
           inputPlaceholder={inputPlaceholder}
-          inputWidth={inputWidth}
           lastEditDueToNav={lastEditDueToNav}
           agentMode={agentMode}
           toggleAgentMode={toggleAgentMode}

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

@@ -13,15 +13,11 @@ import { createTextPasteHandler } from '../../../utils/strings'
 
 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
@@ -34,7 +30,6 @@ export const OtherTextInput: React.FC<OtherTextInputProps> = ({
   isFocused,
   hasText,
   isSelected,
-  width,
   cursorPosition,
   onClick,
   onMouseOver,
@@ -45,9 +40,6 @@ export const OtherTextInput: React.FC<OtherTextInputProps> = ({
 
   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
@@ -106,7 +98,6 @@ export const OtherTextInput: React.FC<OtherTextInputProps> = ({
           focused={isFocused}
           maxHeight={3}
           minHeight={1}
-          width={inputWidth}
           cursorPosition={cursorPosition}
         />
       </box>

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

@@ -27,7 +27,6 @@ export interface MultipleChoiceFormProps {
   onOtherTextChange: (questionIndex: number, text: string) => void
   onSubmit: (finalAnswers?: (number | number[])[], finalOtherTexts?: string[]) => void
   onQuestionChange?: (currentIndex: number, totalQuestions: number, isOnConfirmScreen: boolean) => void
-  width: number
 }
 
 export const MultipleChoiceForm: React.FC<MultipleChoiceFormProps> = ({
@@ -38,7 +37,6 @@ export const MultipleChoiceForm: React.FC<MultipleChoiceFormProps> = ({
   onOtherTextChange,
   onSubmit,
   onQuestionChange,
-  width,
 }) => {
   const theme = useTheme()
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
@@ -270,7 +268,6 @@ export const MultipleChoiceForm: React.FC<MultipleChoiceFormProps> = ({
               }
               hasText={!!otherTexts[currentQuestionIndex]?.trim()}
               isSelected={false}
-              width={width}
               cursorPosition={
                 otherCursorPositions[currentQuestionIndex] ??
                 (otherTexts[currentQuestionIndex] || '').length

cli/src/components/chat-input-bar.tsx

@@ -28,7 +28,6 @@ interface ChatInputBarProps {
   inputFocused: boolean
   inputRef: React.MutableRefObject<MultilineInputHandle | null>
   inputPlaceholder: string
-  inputWidth: number
   lastEditDueToNav: boolean
 
   // Agent mode
@@ -71,7 +70,6 @@ export const ChatInputBar = ({
   inputFocused,
   inputRef,
   inputPlaceholder,
-  inputWidth,
   lastEditDueToNav,
   agentMode,
   toggleAgentMode,
@@ -237,8 +235,6 @@ export const ChatInputBar = ({
     submitAnswers(answers)
   }
 
-  // Adjust input width based on mode configuration
-  const adjustedInputWidth = inputWidth - modeConfig.widthAdjustment
   const effectivePlaceholder =
     inputMode === 'default' ? inputPlaceholder : modeConfig.placeholder
   const borderColor = theme[modeConfig.color]
@@ -275,7 +271,6 @@ export const ChatInputBar = ({
               )
             }
           }}
-          width={inputWidth}
         />
       </box>
     )
@@ -333,7 +328,6 @@ export const ChatInputBar = ({
             placeholder={effectivePlaceholder}
             focused={inputFocused && !feedbackMode}
             maxHeight={compactMaxHeight}
-            width={adjustedInputWidth}
             ref={inputRef}
             cursorPosition={cursorPosition}
           />
@@ -416,7 +410,6 @@ export const ChatInputBar = ({
                 placeholder={effectivePlaceholder}
                 focused={inputFocused && !feedbackMode}
                 maxHeight={Math.floor(terminalHeight / 2)}
-                width={adjustedInputWidth}
                 ref={inputRef}
                 cursorPosition={cursorPosition}
               />

cli/src/components/feedback-input-mode.tsx

@@ -90,7 +90,6 @@ const FeedbackTextSection: React.FC<FeedbackTextSectionProps> = ({
   width,
 }) => {
   const inputFocused = useChatStore((state) => state.inputFocused)
-  const inputWidth = Math.max(1, width - FEEDBACK_CONTAINER_HORIZONTAL_INSET)
 
   return (
     <>
@@ -123,8 +122,6 @@ const FeedbackTextSection: React.FC<FeedbackTextSectionProps> = ({
           focused={inputFocused}
           maxHeight={5}
           minHeight={3}
-          width={inputWidth}
-
           ref={inputRef}
           cursorPosition={cursor}
         />

cli/src/components/multiline-input.tsx

@@ -128,8 +128,6 @@ interface MultilineInputProps {
   shouldBlinkCursor?: boolean
   maxHeight?: number
   minHeight?: number
-  /** @deprecated This prop is no longer used but kept for backwards compatibility */
-  width?: number
   cursorPosition: number
 }
 
@@ -151,7 +149,6 @@ export const MultilineInput = forwardRef<
     shouldBlinkCursor,
     maxHeight = 5,
     minHeight = 1,
-    // width is deprecated and no longer used
     onKeyIntercept,
     cursorPosition,
   }: MultilineInputProps,