Better navigate buttons

Author: jahooma

cli/src/components/ask-user/components/progress-indicator.tsx

@@ -1,42 +1,48 @@
 /**
  * Progress indicator component showing question completion status
  * Displays: ● = current, ○ = not answered, ✓ = answered
+ * Dots are clickable to navigate between questions
  */
 
 import React from 'react'
 import { useTheme } from '../../../hooks/use-theme'
+import { Button } from '../../button'
 import { SYMBOLS } from '../constants'
 
 export interface ProgressIndicatorProps {
   currentIndex: number
   answeredStates: boolean[]
   allAnswered: boolean
+  onNavigate?: (index: number) => void
 }
 
 export const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({
   currentIndex,
   answeredStates,
   allAnswered,
+  onNavigate,
 }) => {
   const theme = useTheme()
 
   return (
     <box style={{ flexDirection: 'row', gap: 1, marginTop: 0 }}>
       {answeredStates.map((isAnswered, idx) => {
         const isCurrent = idx === currentIndex
+        const symbol = isAnswered ? SYMBOLS.COMPLETED : isCurrent ? SYMBOLS.CURRENT : SYMBOLS.UNSELECTED
+        const color = isAnswered
+          ? theme.primary
+          : isCurrent
+          ? theme.foreground
+          : theme.muted
+
         return (
-          <text
+          <Button
             key={idx}
-            style={{
-              fg: isAnswered
-                ? theme.primary
-                : isCurrent
-                ? theme.foreground
-                : theme.muted,
-            }}
+            onClick={() => onNavigate?.(idx)}
+            style={{ padding: 0 }}
           >
-            {isAnswered ? SYMBOLS.COMPLETED : isCurrent ? SYMBOLS.CURRENT : SYMBOLS.UNSELECTED}
-          </text>
+            <text style={{ fg: color }}>{symbol}</text>
+          </Button>
         )
       })}
       {allAnswered && (

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

@@ -3,7 +3,10 @@
  */
 
 import React from 'react'
+import { TextAttributes } from '@opentui/core'
 import { useTheme } from '../../../hooks/use-theme'
+import { Button } from '../../button'
+import { BORDER_CHARS } from '../../../utils/ui-constants'
 import { ProgressIndicator } from './progress-indicator'
 import { SkipButton } from './skip-button'
 
@@ -13,6 +16,9 @@ export interface QuestionHeaderProps {
   answeredStates: boolean[]
   allAnswered: boolean
   onSkip?: () => void
+  onNavigate?: (index: number) => void
+  onPrev?: () => void
+  onNext?: () => void
   skipButtonFocused?: boolean
   skipButtonHovered?: boolean
   onSkipMouseOver?: () => void
@@ -26,13 +32,18 @@ export const QuestionHeader: React.FC<QuestionHeaderProps> = ({
   answeredStates,
   allAnswered,
   onSkip,
+  onNavigate,
+  onPrev,
+  onNext,
   skipButtonFocused = false,
   skipButtonHovered = false,
   onSkipMouseOver,
   onSkipMouseOut,
   hasRoomForInlineButtons,
 }) => {
   const theme = useTheme()
+  const isFirstQuestion = currentIndex === 0
+  const isLastQuestion = currentIndex === totalQuestions - 1
 
   return (
     <box
@@ -49,29 +60,72 @@ export const QuestionHeader: React.FC<QuestionHeaderProps> = ({
           <text style={{ fg: theme.secondary }}>
             Question {currentIndex + 1} of {totalQuestions}
           </text>
-          {totalQuestions > 1 && (
-            <text style={{ fg: theme.muted }}> (← → to navigate)</text>
-          )}
         </box>
         {totalQuestions > 1 && (
           <ProgressIndicator
             currentIndex={currentIndex}
             answeredStates={answeredStates}
             allAnswered={allAnswered}
+            onNavigate={onNavigate}
           />
         )}
       </box>
 
-      {/* Right side: Skip button (if room) */}
-      {hasRoomForInlineButtons && onSkip && (
-        <box style={{ flexDirection: 'row', gap: 2 }}>
-          <SkipButton
-            onClick={onSkip}
-            isFocused={skipButtonFocused}
-            isHovered={skipButtonHovered}
-            onMouseOver={onSkipMouseOver}
-            onMouseOut={onSkipMouseOut}
-          />
+      {/* Right side: Navigation and Skip buttons (if room) */}
+      {hasRoomForInlineButtons && (
+        <box style={{ flexDirection: 'row', gap: 1 }}>
+          {/* Navigation buttons (only show for multi-question forms) */}
+          {totalQuestions > 1 && (
+            <>
+              <Button
+                onClick={onPrev}
+                style={{
+                  borderStyle: 'single',
+                  borderColor: isFirstQuestion ? theme.muted : theme.secondary,
+                  customBorderChars: BORDER_CHARS,
+                  paddingLeft: 1,
+                  paddingRight: 1,
+                }}
+              >
+                <text
+                  style={{
+                    fg: isFirstQuestion ? theme.muted : theme.foreground,
+                    attributes: isFirstQuestion ? undefined : TextAttributes.BOLD,
+                  }}
+                >
+                  ←
+                </text>
+              </Button>
+              <Button
+                onClick={onNext}
+                style={{
+                  borderStyle: 'single',
+                  borderColor: isLastQuestion ? theme.muted : theme.secondary,
+                  customBorderChars: BORDER_CHARS,
+                  paddingLeft: 1,
+                  paddingRight: 1,
+                }}
+              >
+                <text
+                  style={{
+                    fg: isLastQuestion ? theme.muted : theme.foreground,
+                    attributes: isLastQuestion ? undefined : TextAttributes.BOLD,
+                  }}
+                >
+                  →
+                </text>
+              </Button>
+            </>
+          )}
+          {onSkip && (
+            <SkipButton
+              onClick={onSkip}
+              isFocused={skipButtonFocused}
+              isHovered={skipButtonHovered}
+              onMouseOver={onSkipMouseOver}
+              onMouseOut={onSkipMouseOut}
+            />
+          )}
         </box>
       )}
     </box>

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

@@ -127,6 +127,24 @@ export const MultipleChoiceForm: React.FC<MultipleChoiceFormProps> = ({
         answeredStates={answeredStates}
         allAnswered={allAnswered}
         onSkip={onSkip}
+        onNavigate={(newIndex) => {
+          setCurrentQuestionIndex(newIndex)
+          focusActions.resetToQuestion(newIndex)
+        }}
+        onPrev={() => {
+          if (!isFirstQuestion) {
+            const newIndex = currentQuestionIndex - 1
+            setCurrentQuestionIndex(newIndex)
+            focusActions.resetToQuestion(newIndex)
+          }
+        }}
+        onNext={() => {
+          if (!isLastQuestion) {
+            const newIndex = currentQuestionIndex + 1
+            setCurrentQuestionIndex(newIndex)
+            focusActions.resetToQuestion(newIndex)
+          }
+        }}
         skipButtonFocused={isSkipFocused}
         skipButtonHovered={isSkipHovered}
         onSkipMouseOver={() => {