Make arrows and header more compact

Author: jahooma

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

@@ -38,68 +38,61 @@ export const QuestionHeader: React.FC<QuestionHeaderProps> = ({
     <box
       style={{
         flexDirection: 'row',
-        justifyContent: 'space-between',
+        gap: 1,
         alignItems: 'center',
         marginBottom: 1,
       }}
     >
-      {/* Left side: Question counter and progress */}
-      <box style={{ flexDirection: 'column', gap: 0 }}>
-        <box style={{ flexDirection: 'row', gap: 0 }}>
-          <text style={{ fg: theme.secondary }}>
-            {isOnConfirmScreen ? 'Ready to submit' : `Question ${currentIndex + 1} of ${totalQuestions}`}
-          </text>
-        </box>
-        <ProgressIndicator
-          currentIndex={currentIndex}
-          answeredStates={answeredStates}
-          isOnConfirmScreen={isOnConfirmScreen}
-          onNavigate={onNavigate}
-          onNavigateToConfirm={onNavigateToConfirm}
-        />
-      </box>
-
-      {/* Right side: Navigation buttons */}
-      <box style={{ flexDirection: 'row', gap: 1 }}>
-        <Button
-          onClick={onPrev}
+      {/* Left arrow */}
+      <Button
+        onClick={onPrev}
+        style={{
+          borderStyle: 'single',
+          borderColor: isFirstQuestion ? theme.muted : theme.secondary,
+          customBorderChars: BORDER_CHARS,
+          paddingLeft: 1,
+          paddingRight: 1,
+        }}
+      >
+        <text
           style={{
-            borderStyle: 'single',
-            borderColor: isFirstQuestion ? theme.muted : theme.secondary,
-            customBorderChars: BORDER_CHARS,
-            paddingLeft: 1,
-            paddingRight: 1,
+            fg: isFirstQuestion ? theme.muted : theme.foreground,
+            attributes: isFirstQuestion ? undefined : TextAttributes.BOLD,
           }}
         >
-          <text
-            style={{
-              fg: isFirstQuestion ? theme.muted : theme.foreground,
-              attributes: isFirstQuestion ? undefined : TextAttributes.BOLD,
-            }}
-          >
-            ←
-          </text>
-        </Button>
-        <Button
-          onClick={onNext}
+          ←
+        </text>
+      </Button>
+      
+      {/* Progress breadcrumbs */}
+      <ProgressIndicator
+        currentIndex={currentIndex}
+        answeredStates={answeredStates}
+        isOnConfirmScreen={isOnConfirmScreen}
+        onNavigate={onNavigate}
+        onNavigateToConfirm={onNavigateToConfirm}
+      />
+      
+      {/* Right arrow */}
+      <Button
+        onClick={onNext}
+        style={{
+          borderStyle: 'single',
+          borderColor: isLastQuestion ? theme.muted : theme.secondary,
+          customBorderChars: BORDER_CHARS,
+          paddingLeft: 1,
+          paddingRight: 1,
+        }}
+      >
+        <text
           style={{
-            borderStyle: 'single',
-            borderColor: isLastQuestion ? theme.muted : theme.secondary,
-            customBorderChars: BORDER_CHARS,
-            paddingLeft: 1,
-            paddingRight: 1,
+            fg: isLastQuestion ? theme.muted : theme.foreground,
+            attributes: isLastQuestion ? undefined : TextAttributes.BOLD,
           }}
         >
-          <text
-            style={{
-              fg: isLastQuestion ? theme.muted : theme.foreground,
-              attributes: isLastQuestion ? undefined : TextAttributes.BOLD,
-            }}
-          >
-            →
-          </text>
-        </Button>
-      </box>
+          →
+        </text>
+      </Button>
     </box>
   )
 }

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

@@ -24,6 +24,7 @@ export interface MultipleChoiceFormProps {
   onSelectAnswer: (questionIndex: number, optionIndex: number) => void
   onOtherTextChange: (questionIndex: number, text: string) => void
   onSubmit: (finalAnswers?: (number | number[])[], finalOtherTexts?: string[]) => void
+  onQuestionChange?: (currentIndex: number, totalQuestions: number, isOnConfirmScreen: boolean) => void
   width: number
 }
 
@@ -34,12 +35,18 @@ export const MultipleChoiceForm: React.FC<MultipleChoiceFormProps> = ({
   onSelectAnswer,
   onOtherTextChange,
   onSubmit,
+  onQuestionChange,
   width,
 }) => {
   const theme = useTheme()
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
   const [isOnConfirmScreen, setIsOnConfirmScreen] = useState(false)
 
+  // Notify parent when question changes
+  React.useEffect(() => {
+    onQuestionChange?.(currentQuestionIndex, questions.length, isOnConfirmScreen)
+  }, [currentQuestionIndex, questions.length, isOnConfirmScreen, onQuestionChange])
+
   // Computed values
   const currentQuestion = questions[currentQuestionIndex]
   const isLastQuestion = currentQuestionIndex === questions.length - 1

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

@@ -178,10 +178,12 @@ export const ChatInputBar = ({
     inputMode === 'default' ? inputPlaceholder : modeConfig.placeholder
   const borderColor = theme[modeConfig.color]
 
+  const [askUserTitle, setAskUserTitle] = React.useState(' Action Required ')
+
   if (askUserState) {
     return (
       <box
-        title=" Action Required "
+        title={askUserTitle}
         titleAlignment="center"
         style={{
           width: '100%',
@@ -197,6 +199,13 @@ export const ChatInputBar = ({
           onSelectAnswer={updateAskUserAnswer}
           onOtherTextChange={updateAskUserOtherText}
           onSubmit={handleFormSubmit}
+          onQuestionChange={(currentIndex, totalQuestions, isOnConfirmScreen) => {
+            if (isOnConfirmScreen) {
+              setAskUserTitle(' Ready to submit ')
+            } else {
+              setAskUserTitle(` Question ${currentIndex + 1} of ${totalQuestions} `)
+            }
+          }}
           width={inputWidth}
         />
       </box>