feat: fix multistep questions (#799)

# Add `onStepChange` callback to ActionSelector component

### TL;DR

Added a new `onStepChange` callback to the ActionSelector component to notify parent components when steps change.

closes #795

### What changed?

- Added `onStepChange` callback prop to the ActionSelector component
- Implemented a new `setStep` function in `useActionSelectorState` that calls the callback when steps change
- Updated all step navigation logic to use this new function
- Fixed QuestionPermission to sync its state with ActionSelector step changes
- Added a regression test story for multi-step questions

### How to test?

1. Run the Storybook and navigate to the new "QuestionMultiStepSync" story
2. Verify that advancing through steps updates the question text and options correctly
3. Check that step navigation works in both directions
4. Confirm the "stepChanged" action is logged in the Actions panel when steps change

### Why make this change?

This change fixes a synchronization issue between the ActionSelector component and its parent components. Previously, when steps changed internally in the ActionSelector, parent components weren't always notified, leading to UI inconsistencies. The new callback ensures parent components can stay in sync with the current step, properly updating question text and options.

Author: k11kirky

apps/twig/src/renderer/components/ActionSelector.stories.tsx

@@ -12,6 +12,7 @@ const meta: Meta<typeof ActionSelector> = {
     onMultiSelect: { action: "multiSelected" },
     onCancel: { action: "cancelled" },
     onStepAnswer: { action: "stepAnswered" },
+    onStepChange: { action: "stepChanged" },
   },
 };
 

apps/twig/src/renderer/components/action-selector/ActionSelector.tsx

@@ -25,6 +25,7 @@ export function ActionSelector({
   onSelect,
   onMultiSelect,
   onCancel,
+  onStepChange,
   onStepAnswer,
 }: ActionSelectorProps) {
   const state = useActionSelectorState({
@@ -37,6 +38,7 @@ export function ActionSelector({
     initialSelections,
     onSelect,
     onMultiSelect,
+    onStepChange,
     onStepAnswer,
   });
 

apps/twig/src/renderer/components/action-selector/types.ts

@@ -32,6 +32,7 @@ export interface ActionSelectorProps {
   onSelect: (optionId: string, customInput?: string) => void;
   onMultiSelect?: (optionIds: string[], customInput?: string) => void;
   onCancel?: () => void;
+  onStepChange?: (stepIndex: number) => void;
   onStepAnswer?: (
     stepIndex: number,
     optionIds: string[],

apps/twig/src/renderer/components/action-selector/useActionSelectorState.ts

@@ -22,6 +22,7 @@ interface UseActionSelectorStateProps {
   initialSelections?: string[];
   onSelect: ActionSelectorProps["onSelect"];
   onMultiSelect: ActionSelectorProps["onMultiSelect"];
+  onStepChange: ActionSelectorProps["onStepChange"];
   onStepAnswer: ActionSelectorProps["onStepAnswer"];
 }
 
@@ -35,6 +36,7 @@ export function useActionSelectorState({
   initialSelections,
   onSelect,
   onMultiSelect,
+  onStepChange,
   onStepAnswer,
 }: UseActionSelectorStateProps) {
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -80,6 +82,15 @@ export function useActionSelectorState({
     setInternalStep(currentStep);
   }, [currentStep]);
 
+  const setStep = useCallback(
+    (nextStep: number) => {
+      if (nextStep === activeStep) return;
+      onStepChange?.(nextStep);
+      setInternalStep(nextStep);
+    },
+    [activeStep, onStepChange],
+  );
+
   const saveCurrentStepAnswer = useCallback(() => {
     const checkedIds = Array.from(checkedOptions);
     const answer: StepAnswer = {
@@ -138,15 +149,15 @@ export function useActionSelectorState({
     if (!hasSteps) return;
     saveCurrentStepAnswer();
     const prevStep = activeStep > 0 ? activeStep - 1 : numSteps - 1;
-    setInternalStep(prevStep);
-  }, [hasSteps, activeStep, numSteps, saveCurrentStepAnswer]);
+    setStep(prevStep);
+  }, [hasSteps, activeStep, numSteps, saveCurrentStepAnswer, setStep]);
 
   const moveToNextStep = useCallback(() => {
     if (!hasSteps) return;
     saveCurrentStepAnswer();
     const nextStep = activeStep < numSteps - 1 ? activeStep + 1 : 0;
-    setInternalStep(nextStep);
-  }, [hasSteps, activeStep, numSteps, saveCurrentStepAnswer]);
+    setStep(nextStep);
+  }, [hasSteps, activeStep, numSteps, saveCurrentStepAnswer, setStep]);
 
   const toggleCheck = useCallback(
     (optionId: string) => {
@@ -194,9 +205,13 @@ export function useActionSelectorState({
     const selected = allOptions[selectedIndex];
 
     if (isSubmitOption(selected.id)) {
+      if (!showSubmitButton) {
+        onSelect(selected.id);
+        return;
+      }
       if (hasSteps && activeStep < numSteps - 1) {
         saveCurrentStepAnswer();
-        setInternalStep(activeStep + 1);
+        setStep(activeStep + 1);
       } else {
         if (multiSelect) {
           handleSubmitMulti();
@@ -239,9 +254,13 @@ export function useActionSelectorState({
       setSelectedIndex(index);
 
       if (isSubmitOption(selected.id)) {
+        if (!showSubmitButton) {
+          onSelect(selected.id);
+          return;
+        }
         if (hasSteps && activeStep < numSteps - 1) {
           saveCurrentStepAnswer();
-          setInternalStep(activeStep + 1);
+          setStep(activeStep + 1);
         } else {
           if (multiSelect) {
             handleSubmitMulti();
@@ -278,9 +297,9 @@ export function useActionSelectorState({
   const handleStepClick = useCallback(
     (stepIndex: number) => {
       saveCurrentStepAnswer();
-      setInternalStep(stepIndex);
+      setStep(stepIndex);
     },
-    [saveCurrentStepAnswer],
+    [saveCurrentStepAnswer, setStep],
   );
 
   const handleEscape = useCallback(() => {

apps/twig/src/renderer/components/permissions/PermissionSelector.stories.tsx

@@ -718,6 +718,21 @@ export const QuestionMultiStep: Story = {
   },
 };
 
+export const QuestionMultiStepSync: Story = {
+  args: {
+    toolCall: buildQuestionToolCallData(multiStepQuestions),
+    options: buildQuestionOptions(multiStepQuestions[0]),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Regression: advancing steps should update the question text and options for each step.",
+      },
+    },
+  },
+};
+
 const multiSelectQuestion: QuestionItem[] = [
   {
     question: "Which features do you want to enable?",

apps/twig/src/renderer/components/permissions/QuestionPermission.tsx

@@ -200,6 +200,10 @@ export function QuestionPermission({
     [],
   );
 
+  const handleStepChange = useCallback((stepIndex: number) => {
+    setActiveStep(stepIndex);
+  }, []);
+
   const hasUnanswered = useMemo(() => {
     for (let i = 0; i < totalQuestions; i++) {
       if (!isQuestionAnswered(stepAnswers, i)) {
@@ -275,6 +279,7 @@ export function QuestionPermission({
       onSelect={handleSelect}
       onMultiSelect={handleMultiSelect}
       onCancel={onCancel}
+      onStepChange={handleStepChange}
       onStepAnswer={handleStepAnswer}
     />
   );