fix(vscode): preserve multi-question answers

apps/vscode/test/question-dialog.test.ts

@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+/// <reference lib="dom" />
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { QuestionDialog } from "../webview-ui/src/components/QuestionDialog";
+
+const { respondQuestion } = vi.hoisted(() => ({
+  respondQuestion: vi.fn(async () => undefined),
+}));
+
+vi.mock("@/stores", () => ({
+  useChatStore: () => ({
+    pendingQuestion: {
+      id: "question-request",
+      tool_call_id: "tool-call",
+      questions: [
+        {
+          header: "Target",
+          question: "Choose a target",
+          options: [{ label: "Tests" }],
+        },
+        {
+          header: "Scope",
+          question: "Choose a scope",
+          options: [{ label: "Focused" }],
+        },
+      ],
+    },
+    respondQuestion,
+  }),
+}));
+
+describe("QuestionDialog", () => {
+  let container: HTMLDivElement | undefined;
+
+  afterEach(() => {
+    container?.remove();
+    container = undefined;
+    respondQuestion.mockClear();
+  });
+
+  it("collects every question before submitting the response", async () => {
+    const element = document.createElement("div");
+    container = element;
+    document.body.append(element);
+    const root = createRoot(element);
+
+    await act(async () => {
+      root.render(React.createElement(QuestionDialog));
+    });
+
+    expect(element.textContent).toContain("Question 1 of 2");
+    expect(element.textContent).toContain("Choose a target");
+
+    await act(async () => {
+      element.querySelector<HTMLButtonElement>("button")?.click();
+    });
+
+    expect(respondQuestion).not.toHaveBeenCalled();
+    expect(element.textContent).toContain("Question 2 of 2");
+    expect(element.textContent).toContain("Choose a scope");
+
+    await act(async () => {
+      element.querySelector<HTMLButtonElement>("button")?.click();
+    });
+
+    expect(respondQuestion).toHaveBeenCalledWith({
+      "Choose a target": "Tests",
+      "Choose a scope": "Focused",
+    });
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+});

apps/vscode/tsconfig.json

@@ -15,5 +15,11 @@
     }
   },
   "include": ["src/**/*", "shared/**/*", "test/**/*"],
-  "exclude": ["dist", "node_modules", "webview-ui", "test/settings-store.test.ts"]
+  "exclude": [
+    "dist",
+    "node_modules",
+    "webview-ui",
+    "test/question-dialog.test.ts",
+    "test/settings-store.test.ts"
+  ]
 }

apps/vscode/webview-ui/src/components/QuestionDialog.tsx

@@ -7,33 +7,40 @@ export function QuestionDialog() {
   const [customInput, setCustomInput] = useState("");
   const [showCustom, setShowCustom] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(1);
+  const [questionIndex, setQuestionIndex] = useState(0);
+  const [answers, setAnswers] = useState<Record<string, string>>({});
 
-  // For now, only handle the first question
-  const question = pendingQuestion?.questions?.[0];
+  const question = pendingQuestion?.questions?.[questionIndex];
 
   useEffect(() => {
     if (pendingQuestion) {
       setShowCustom(false);
       setCustomInput("");
       setSelectedIndex(1);
+      setQuestionIndex(0);
+      setAnswers({});
     }
   }, [pendingQuestion?.id]);
 
   if (!pendingQuestion || !question) return null;
 
-  const handleSelect = async (optionLabel: string) => {
-    const answers: Record<string, string> = {
-      [question.question]: optionLabel,
-    };
-    await respondQuestion(answers);
+  const handleAnswer = async (answer: string) => {
+    const nextAnswers = { ...answers, [question.question]: answer };
+    const nextQuestionIndex = questionIndex + 1;
+    if (nextQuestionIndex < pendingQuestion.questions.length) {
+      setAnswers(nextAnswers);
+      setQuestionIndex(nextQuestionIndex);
+      setShowCustom(false);
+      setCustomInput("");
+      setSelectedIndex(1);
+      return;
+    }
+    await respondQuestion(nextAnswers);
   };
 
   const handleCustomSubmit = async () => {
     if (!customInput.trim()) return;
-    const answers: Record<string, string> = {
-      [question.question]: customInput.trim(),
-    };
-    await respondQuestion(answers);
+    await handleAnswer(customInput.trim());
   };
 
   const options = question.options || [];
@@ -42,14 +49,19 @@ export function QuestionDialog() {
   return (
     <div className={cn("mb-0.5 border border-blue-200 dark:border-blue-800 rounded-lg overflow-hidden bg-background flex flex-col shrink")}>
       <div className="p-2 space-y-2">
+        {pendingQuestion.questions.length > 1 && (
+          <div className="text-[10px] text-muted-foreground">
+            Question {questionIndex + 1} of {pendingQuestion.questions.length}
+          </div>
+        )}
         {question.header && <div className="text-[10px] text-muted-foreground uppercase tracking-wide">{question.header}</div>}
         <div className="text-xs font-semibold text-foreground">{question.question}</div>
         <div className="space-y-1.5">
           {options.map((option, idx) => (
             <button
               key={idx}
               onClick={() => {
-                void handleSelect(option.label);
+                void handleAnswer(option.label);
               }}
               onMouseEnter={() => setSelectedIndex(idx + 1)}
               className={cn(

apps/vscode/webview-ui/tsconfig.json

@@ -20,5 +20,5 @@
       "shared/*": ["../shared/*"]
     }
   },
-  "include": ["src", "../test/settings-store.test.ts"]
+  "include": ["src", "../test/question-dialog.test.ts", "../test/settings-store.test.ts"]
 }