cleanup

Author: jahooma

.agents/types/tools.ts

@@ -69,8 +69,28 @@ export interface AskUserParams {
   questions: {
     /** The question to ask the user */
     question: string
-    /** Array of answer options for the question (minimum 2) */
-    options: string[]
+    /** Short label (max 12 chars) displayed as a chip/tag */
+    header?: string
+    /** Array of answer options with label and optional description (minimum 2) */
+    options: {
+      /** The display text for this option */
+      label: string
+      /** Explanation shown when option is focused */
+      description?: string
+    }[]
+    /** If true, allows selecting multiple options (checkbox). If false, single selection only (radio). */
+    multiSelect?: boolean
+    /** Validation rules for "Other" text input */
+    validation?: {
+      /** Maximum length for "Other" text input */
+      maxLength?: number
+      /** Minimum length for "Other" text input */
+      minLength?: number
+      /** Regex pattern for "Other" text input */
+      pattern?: string
+      /** Custom error message when pattern fails */
+      patternError?: string
+    }
   }[]
 }
 

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

@@ -3,7 +3,7 @@
  * Integrates with @opentui/react useKeyboard and focus manager
  */
 
-import { useCallback } from 'react'
+import { useCallback, useRef, useEffect } from 'react'
 import { useKeyboard } from '@opentui/react'
 import type { FocusTarget, AskUserQuestion } from '../types'
 import { isFocusOnOption, isFocusOnTextInput, isFocusOnConfirmSubmit } from '../types'
@@ -63,9 +63,36 @@ export function useKeyboardNavigation(params: KeyboardNavigationParams) {
     onGoBackFromConfirm,
   } = params
 
+  // Use refs for frequently changing values to avoid recreating the keyboard callback
+  const paramsRef = useRef(params)
+  useEffect(() => {
+    paramsRef.current = params
+  })
+
   useKeyboard(
     useCallback(
       (key) => {
+        // Get current values from ref to avoid stale closures
+        const {
+          focus,
+          dispatchFocus,
+          currentQuestionIndex,
+          totalQuestions,
+          isFirstQuestion,
+          isLastQuestion,
+          isOnConfirmScreen,
+          otherTexts,
+          onSelectAnswer,
+          onOtherTextChange,
+          onChangeQuestion,
+          onSubmit,
+          onAutoAdvance,
+          onTextInputAdvance,
+          onForceSubmit,
+          onGoToConfirm,
+          onGoBackFromConfirm,
+        } = paramsRef.current
+
         // Helper to prevent default behavior
         const preventDefault = () => {
           if ('preventDefault' in key && typeof key.preventDefault === 'function') {
@@ -236,27 +263,7 @@ export function useKeyboardNavigation(params: KeyboardNavigationParams) {
           }
         }
       },
-      [
-        focus,
-        dispatchFocus,
-        currentQuestionIndex,
-        totalQuestions,
-        currentQuestion,
-        isFirstQuestion,
-        isLastQuestion,
-        isOnConfirmScreen,
-        allAnswered,
-        otherTexts,
-        onSelectAnswer,
-        onOtherTextChange,
-        onChangeQuestion,
-        onSubmit,
-        onAutoAdvance,
-        onTextInputAdvance,
-        onForceSubmit,
-        onGoToConfirm,
-        onGoBackFromConfirm,
-      ]
+      [] // Empty deps - callback is stable, values accessed via ref
     )
   )
 }

cli/src/components/ask-user/utils/validation.ts

@@ -23,27 +23,22 @@ export interface QuestionValidation {
 
 /**
  * Validate "Other" text input against rules
- * Phase 1: Basic length check only
- * Phase 3: Full validation with regex, custom errors
+ * Supports max/min length, regex patterns, and custom error messages
  */
 export function validateOtherText(
   text: string,
   validation?: QuestionValidation,
   maxLength: number = 500
 ): ValidationResult {
-  // Phase 1: Simple max length check
+  // Default max length check
   if (text.length > maxLength) {
     return {
       isValid: false,
       error: `Max ${maxLength} characters`,
     }
   }
 
-  // Phase 3 will add:
-  // - minLength check
-  // - pattern (regex) validation
-  // - custom error messages
-
+  // Validation rules (if provided)
   if (validation) {
     if (validation.maxLength && text.length > validation.maxLength) {
       return {