fix(app): advance multi-question prompts step by step (#1462)

packages/app/e2e/helpers/questions.ts

@@ -44,6 +44,18 @@ export async function openQuestion(
     .click();
 }
 
+export async function expectQuestionNavigationEnabled(
+  page: Page,
+  input: { index: number; total: number },
+): Promise<void> {
+  await expect(
+    page
+      .getByTestId("question-form-card")
+      .first()
+      .getByRole("button", { name: `Question ${input.index} of ${input.total}` }),
+  ).toBeEnabled();
+}
+
 export async function fillQuestionAnswer(
   page: Page,
   input: { question: string; answer: string },
@@ -59,3 +71,32 @@ export async function submitQuestionAnswers(page: Page): Promise<void> {
   await page.getByTestId("question-form-primary-action").click();
   await expect(page.getByTestId("question-form-card")).toHaveCount(0, { timeout: 30_000 });
 }
+
+export async function expectQuestionPrimaryActionEnabled(page: Page, label: string): Promise<void> {
+  await expect(
+    page.getByTestId("question-form-card").first().getByRole("button", { name: label }),
+  ).toBeEnabled();
+}
+
+export async function expectQuestionPrimaryActionDisabled(
+  page: Page,
+  label: string,
+): Promise<void> {
+  await expect(
+    page.getByTestId("question-form-card").first().getByRole("button", { name: label }),
+  ).toBeDisabled();
+}
+
+export async function expectQuestionDismissEnabled(page: Page): Promise<void> {
+  await expect(
+    page.getByTestId("question-form-card").first().getByRole("button", { name: "Dismiss" }),
+  ).toBeEnabled();
+}
+
+export async function continueToNextQuestion(page: Page): Promise<void> {
+  await page
+    .getByTestId("question-form-card")
+    .first()
+    .getByRole("button", { name: "Next" })
+    .click();
+}

packages/app/e2e/question-prompt-pagination.spec.ts

@@ -2,9 +2,14 @@ import { test } from "./fixtures";
 import { openAgentRoute, seedMockAgentWorkspace } from "./helpers/mock-agent";
 import {
   chooseQuestionOption,
+  continueToNextQuestion,
   expectCurrentQuestion,
+  expectQuestionDismissEnabled,
   expectQuestionHidden,
+  expectQuestionNavigationEnabled,
   expectQuestionOptionSelected,
+  expectQuestionPrimaryActionDisabled,
+  expectQuestionPrimaryActionEnabled,
   fillQuestionAnswer,
   openQuestion,
   submitQuestionAnswers,
@@ -15,6 +20,8 @@ const TOTAL_QUESTIONS = 3;
 const SURFACE_QUESTION = "Which surface should this apply to?";
 const ROLLOUT_QUESTION = "Which rollout should we use?";
 const SUCCESS_QUESTION = "What success criteria should we use?";
+const REPO_URL_QUESTION = "What is the GitHub private repo URL to push to?";
+const COMMIT_MESSAGE_QUESTION = "What should the first commit message be?";
 
 test.describe("Question prompt pagination", () => {
   test("shows one question at a time with numbered navigation", async ({ page }) => {
@@ -70,4 +77,51 @@ test.describe("Question prompt pagination", () => {
       await session.cleanup();
     }
   });
+
+  test("free-write questions use Next before final Submit", async ({ page }) => {
+    test.setTimeout(180_000);
+
+    const session = await seedMockAgentWorkspace({
+      repoPrefix: "question-free-write-",
+      title: "Question free-write e2e",
+      initialPrompt: "Emit synthetic questions: two free-write questions.",
+    });
+
+    try {
+      await openAgentRoute(page, session);
+      await waitForQuestionPrompt(page, 120_000);
+
+      await expectCurrentQuestion(page, {
+        index: 1,
+        total: 2,
+        question: REPO_URL_QUESTION,
+      });
+
+      await fillQuestionAnswer(page, {
+        question: REPO_URL_QUESTION,
+        answer: "git@github.com:user/private-repo.git",
+      });
+
+      await expectQuestionPrimaryActionEnabled(page, "Next");
+      await expectQuestionDismissEnabled(page);
+      await expectQuestionNavigationEnabled(page, { index: 2, total: 2 });
+
+      await continueToNextQuestion(page);
+      await expectCurrentQuestion(page, {
+        index: 2,
+        total: 2,
+        question: COMMIT_MESSAGE_QUESTION,
+      });
+      await expectQuestionPrimaryActionDisabled(page, "Submit");
+
+      await fillQuestionAnswer(page, {
+        question: COMMIT_MESSAGE_QUESTION,
+        answer: "Initialize private repo",
+      });
+      await expectQuestionPrimaryActionEnabled(page, "Submit");
+      await submitQuestionAnswers(page);
+    } finally {
+      await session.cleanup();
+    }
+  });
 });

packages/app/src/components/question-form-card.tsx

@@ -16,6 +16,7 @@ import { isWeb } from "@/constants/platform";
 import {
   areQuestionsAnswered,
   buildQuestionFormAnswers,
+  isQuestionAnswered,
   parseQuestionFormQuestions,
   questionShowsTextInput,
   resolveDismissLabel,
@@ -296,6 +297,10 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
     ? Math.min(activeQuestionIndex, questions.length - 1)
     : 0;
   const activeQuestion = questions?.[resolvedActiveQuestionIndex];
+  const activeQuestionAnswered = activeQuestion
+    ? isQuestionAnswered(activeQuestion, resolvedActiveQuestionIndex, selections, otherTexts)
+    : false;
+  const isLastQuestion = questions ? resolvedActiveQuestionIndex === questions.length - 1 : true;
 
   const handleSubmit = useCallback(() => {
     if (!questions || !allAnswered || isResponding) return;
@@ -340,6 +345,15 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
     setActiveQuestionIndex(index);
   }, []);
 
+  const handlePrimaryAction = useCallback(() => {
+    if (!isLastQuestion) {
+      if (!activeQuestionAnswered || isResponding) return;
+      setActiveQuestionIndex((index) => Math.min(index + 1, (questions?.length ?? 1) - 1));
+      return;
+    }
+    handleSubmit();
+  }, [activeQuestionAnswered, handleSubmit, isLastQuestion, isResponding, questions?.length]);
+
   const dismissButtonStyle = useCallback(
     ({ pressed, hovered }: PressableStateCallbackType & { hovered?: boolean }) => [
       styles.actionButton,
@@ -352,18 +366,19 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
     [theme.colors.surface2, theme.colors.surface1, theme.colors.borderAccent],
   );
 
-  const submitDisabled = !allAnswered || isResponding;
+  const primaryDisabled = isResponding || (isLastQuestion ? !allAnswered : !activeQuestionAnswered);
+  const primaryActionLabel = isLastQuestion ? "Submit" : "Next";
   const submitButtonStyle = useCallback(
     ({ pressed }: PressableStateCallbackType & { hovered?: boolean }) => [
       styles.actionButton,
       {
         backgroundColor: theme.colors.accent,
         borderColor: theme.colors.accent,
-        opacity: submitDisabled ? 0.5 : 1,
+        opacity: primaryDisabled ? 0.5 : 1,
       },
-      pressed && !submitDisabled ? styles.optionItemPressed : null,
+      pressed && !primaryDisabled ? styles.optionItemPressed : null,
     ],
-    [submitDisabled, theme.colors.accent],
+    [primaryDisabled, theme.colors.accent],
   );
 
   const containerStyle = useMemo(
@@ -458,7 +473,7 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
               placeholder={getQuestionInputPlaceholder(activeQuestion)}
               isResponding={isResponding}
               onChange={setOtherText}
-              onSubmit={handleSubmit}
+              onSubmit={handlePrimaryAction}
             />
           ) : null}
         </View>
@@ -485,10 +500,10 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
 
         <Pressable
           style={submitButtonStyle}
-          onPress={handleSubmit}
-          disabled={submitDisabled}
+          onPress={handlePrimaryAction}
+          disabled={primaryDisabled}
           accessibilityRole="button"
-          accessibilityLabel="Submit"
+          accessibilityLabel={primaryActionLabel}
           testID="question-form-primary-action"
         >
           {respondingAction === "submit" ? (
@@ -496,7 +511,7 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
           ) : (
             <View style={styles.actionContent}>
               <Check size={14} color={submitActionTextColor} />
-              <Text style={submitActionTextStyle}>Submit</Text>
+              <Text style={submitActionTextStyle}>{primaryActionLabel}</Text>
             </View>
           )}
         </Pressable>