feat(cli): improve ask_user custom input UX and filtering

- Add light border around custom input to differentiate from options
- Add conditional scrollbar that only shows when content exceeds max height
- Preserve custom text when switching between options
- Fix click behavior: first click exits custom mode and highlights option
- Filter out redundant Custom/Other options from agent responses
- Update tool description to discourage agents from including Custom options

Author: brandonkachen

cli/src/components/ask-user/components/accordion-question.tsx

@@ -69,11 +69,12 @@ export const AccordionQuestion: React.FC<AccordionQuestionProps> = ({
     if (!answer) return '(click to answer)'
 
     if (answer.isCustom && answer.customText) {
+      const hadNewlines = /\r?\n/.test(answer.customText)
       const flattenedText = answer.customText
         .replace(/\r?\n/g, ' ')
         .replace(/\s+/g, ' ')
         .trim()
-      return `Custom: ${flattenedText}`
+      return `Custom: ${flattenedText}${hadNewlines ? '…' : ''}`
     }
 
     if (isMultiSelect && answer.selectedIndices) {

cli/src/components/ask-user/components/custom-answer-input.tsx

@@ -4,6 +4,7 @@
 
 import React, { memo } from 'react'
 
+import { useTheme } from '../../../hooks/use-theme'
 import { MultilineInput } from '../../multiline-input'
 
 export interface CustomAnswerInputProps {
@@ -26,8 +27,18 @@ export const CustomAnswerInput: React.FC<CustomAnswerInputProps> = memo(
     onSubmit,
     onPaste,
   }) => {
+    const theme = useTheme()
+
     return (
       <box style={{ flexDirection: 'column', paddingLeft: optionIndent + 2 }}>
+        <box
+          style={{
+            borderStyle: 'single',
+            borderColor: theme.muted,
+            paddingLeft: 1,
+            paddingRight: 1,
+          }}
+        >
         <MultilineInput
           value={value}
           cursorPosition={cursorPosition}
@@ -44,7 +55,9 @@ export const CustomAnswerInput: React.FC<CustomAnswerInputProps> = memo(
           maxHeight={5}
           minHeight={1}
           placeholder="Type your answer..."
+          showScrollbar={true}
         />
+        </box>
       </box>
     )
   },

cli/src/components/ask-user/components/question-header.tsx

@@ -6,9 +6,13 @@
 import { TextAttributes } from '@opentui/core'
 import React, { memo } from 'react'
 
+import { useTerminalLayout } from '../../../hooks/use-terminal-layout'
 import { useTheme } from '../../../hooks/use-theme'
 import { Button } from '../../button'
 
+// Overhead for the answer line: modal borders (~6) + marginLeft (3) + "↳ " (3) + quotes (2) + buffer (6)
+const ANSWER_LINE_OVERHEAD = 20
+
 export interface QuestionHeaderProps {
   questionText: string
   questionPrefix: string
@@ -28,6 +32,14 @@ export const QuestionHeader: React.FC<QuestionHeaderProps> = memo(
     onToggleExpand,
   }) => {
     const theme = useTheme()
+    const { terminalWidth } = useTerminalLayout()
+
+    // Calculate available width for the answer text and truncate with ellipsis at end
+    const availableWidth = Math.max(20, terminalWidth - ANSWER_LINE_OVERHEAD)
+    const truncatedAnswer =
+      answerDisplay.length > availableWidth
+        ? answerDisplay.slice(0, availableWidth - 1) + '…'
+        : answerDisplay
 
     return (
       <Button
@@ -50,13 +62,13 @@ export const QuestionHeader: React.FC<QuestionHeaderProps> = memo(
         </text>
         {/* Answer displayed on separate line when collapsed (like User Answers style) */}
         {!isExpanded && (
-          <text truncate wrapMode="none" style={{ marginLeft: 3 }}>
+          <text wrapMode="none" style={{ marginLeft: 3 }}>
             <span fg={theme.primary}>↳ </span>
             <span
               fg={isAnswered ? theme.primary : theme.muted}
               attributes={TextAttributes.ITALIC}
             >
-              {isAnswered ? `"${answerDisplay}"` : '(click to answer)'}
+              {isAnswered ? `"${truncatedAnswer}"` : '(click to answer)'}
             </span>
           </text>
         )}

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

@@ -159,6 +159,20 @@ export const MultipleChoiceForm: React.FC<MultipleChoiceFormProps> = ({
       setSubmitFocused(false)
       const isCustomOption = optionIndex === CUSTOM_OPTION_INDEX
 
+      // When clicking out of Custom typing mode, first click just exits and highlights
+      // the option without selecting it (requires a second click to actually select)
+      if (source === 'mouse' && isTypingCustom && !isCustomOption) {
+        setIsTypingCustom(false)
+        setFocusedOptionIndex(optionIndex)
+        setShowFocusHighlight(true)
+        // Deselect Custom option but preserve the typed text
+        setAnswerForQuestion(questionIndex, (currentAnswer) => ({
+          ...currentAnswer,
+          isCustom: false,
+        }))
+        return
+      }
+
       if (source === 'mouse' && !isCustomOption) {
         setShowFocusHighlight(false)
         suppressNextHoverFocusRef.current = true
@@ -177,6 +191,7 @@ export const MultipleChoiceForm: React.FC<MultipleChoiceFormProps> = ({
               selectedIndex: optionIndex,
               selectedIndices: undefined,
               isCustom: false,
+              customText: currentAnswer?.customText,  // Preserve custom text when switching away
             },
       )
 
@@ -197,7 +212,7 @@ export const MultipleChoiceForm: React.FC<MultipleChoiceFormProps> = ({
       setExpandedIndex(null)
       focusSubmit({ questionIndex, optionIndex })
     },
-    [questions, openQuestion, focusSubmit, setAnswerForQuestion],
+    [questions, openQuestion, focusSubmit, setAnswerForQuestion, isTypingCustom],
   )
 
   // Handle toggling an option (multi-select)

cli/src/components/multiline-input.tsx

@@ -160,6 +160,7 @@ interface MultilineInputProps {
   maxHeight?: number
   minHeight?: number
   cursorPosition: number
+  showScrollbar?: boolean
 }
 
 export type MultilineInputHandle = {
@@ -183,6 +184,7 @@ export const MultilineInput = forwardRef<
     minHeight = 1,
     onKeyIntercept,
     cursorPosition,
+    showScrollbar = false,
   }: MultilineInputProps,
   forwardedRef,
 ) {
@@ -1034,9 +1036,13 @@ export const MultilineInput = forwardRef<
 
     const heightLines = Math.max(effectiveMinHeight, rawHeight)
 
+    // Content is scrollable when total lines exceed max height
+    const isScrollable = totalLines > safeMaxHeight
+
     return {
       heightLines,
       gutterEnabled,
+      isScrollable,
     }
   })()
 
@@ -1056,6 +1062,10 @@ export const MultilineInput = forwardRef<
       stickyScroll={true}
       stickyStart="bottom"
       scrollbarOptions={{ visible: false }}
+      verticalScrollbarOptions={{
+        visible: showScrollbar && layoutMetrics.isScrollable,
+        trackOptions: { width: 1 },
+      }}
       onPaste={(event) => onPaste(event.text)}
       onMouseDown={handleMouseDown}
       style={{

cli/src/hooks/use-ask-user-bridge.ts

@@ -3,18 +3,66 @@ import { useEffect } from 'react'
 
 import { useChatStore } from '../state/chat-store'
 
+import type { AskUserQuestion } from '../state/chat-store'
+
+/**
+ * Patterns that indicate a "custom" or "other" catch-all option.
+ * These are redundant since the UI automatically provides a Custom text input.
+ */
+const REDUNDANT_OPTION_PATTERNS = [
+  /^custom$/i,
+  /^other$/i,
+  /^none\s*(of\s*the\s*above)?$/i,
+  /^something\s*else$/i,
+  /^enter\s*(my\s*)?own$/i,
+  /^type\s*(my\s*)?own$/i,
+  /^write\s*(my\s*)?own$/i,
+]
+
+/**
+ * Gets the label from an option, handling both string and object formats.
+ */
+function getOptionLabel(option: string | { label: string; description?: string }): string {
+  return typeof option === 'string' ? option : option.label
+}
+
+/**
+ * Checks if an option label matches any of the redundant "custom/other" patterns.
+ */
+function isRedundantOption(option: string | { label: string; description?: string }): boolean {
+  const label = getOptionLabel(option).trim()
+  return REDUNDANT_OPTION_PATTERNS.some((pattern) => pattern.test(label))
+}
+
+/**
+ * Filters out redundant "Custom"/"Other" options from questions.
+ * The UI already provides a Custom text input, so these are unnecessary and confusing.
+ */
+function filterRedundantOptions(questions: AskUserQuestion[]): AskUserQuestion[] {
+  return questions.map((question) => {
+    const filteredOptions = question.options.filter((option) => !isRedundantOption(option))
+    return {
+      ...question,
+      // Preserve the original array type (string[] or object[])
+      options: filteredOptions as typeof question.options,
+    }
+  })
+}
+
 export function useAskUserBridge() {
   const setAskUserState = useChatStore((state) => state.setAskUserState)
 
   useEffect(() => {
     const unsubscribe = AskUserBridge.subscribe((request) => {
       if (request) {
+        // Filter out redundant "Custom"/"Other" options since UI provides its own
+        const filteredQuestions = filterRedundantOptions(request.questions)
         setAskUserState({
           toolCallId: request.toolCallId,
-          questions: request.questions,
+          questions: filteredQuestions,
           // Initialize based on question type: multi-select → [], single-select → -1
-          selectedAnswers: request.questions.map((q) => (q.multiSelect ? [] : -1)),
-          otherTexts: new Array(request.questions.length).fill(''),
+          selectedAnswers: filteredQuestions.map((q) => (q.multiSelect ? [] : -1)),
+          otherTexts: new Array(filteredQuestions.length).fill(''),
         })
       } else {
         setAskUserState(null)

common/src/tools/params/tool/ask-user.ts

@@ -110,6 +110,8 @@ The user can either:
 - Type a custom answer in the "Other" text field
 - Skip the questions to provide different instructions instead
 
+IMPORTANT: Do NOT include options like "Custom", "Other", "None of the above", or similar catch-all options. The UI automatically provides a "Custom" text input field for users to type their own answer. Including such options would be redundant and confusing.
+
 Single-select example:
 ${$getNativeToolCallExampleString({
   toolName,