frontend/src/components/ai-builder/BranchDetailView.tsx

@@ -1,4 +1,3 @@
-import { useState, useEffect, useRef } from 'react'
 import { Check, RefreshCw, SkipForward, ChevronRight, ChevronLeft } from 'lucide-react'
 import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
 import { GeneratingAnimation } from './GeneratingAnimation'
@@ -7,6 +6,7 @@ import { cn } from '@/lib/utils'
 export function BranchDetailView() {
   const {
     selectedBranches,
+    currentBranchIndex,
     generateBranchDetail,
     assemble,
     isLoading,
@@ -15,24 +15,13 @@ export function BranchDetailView() {
     setError,
   } = useAIFlowBuilderStore()
 
-  const [viewingIndex, setViewingIndex] = useState(0)
+  const viewingIndex = currentBranchIndex
+  const setViewingIndex = (i: number) => useAIFlowBuilderStore.setState({ currentBranchIndex: i })
   const currentBranch = selectedBranches[viewingIndex]
 
   const allBranchesHaveDetail = selectedBranches.every((b) => b.steps)
   const branchesWithDetail = selectedBranches.filter((b) => b.steps).length
 
-  // Auto-advance to next branch without detail after generation completes
-  const prevDetailCount = useRef(branchesWithDetail)
-  useEffect(() => {
-    if (branchesWithDetail > prevDetailCount.current) {
-      prevDetailCount.current = branchesWithDetail
-      const nextIndex = selectedBranches.findIndex((b) => !b.steps)
-      if (nextIndex !== -1) {
-        setViewingIndex(nextIndex)
-      }
-    }
-  }, [branchesWithDetail, selectedBranches])
-
   const handleGenerate = async (branchName: string) => {
     setError(null)
     await generateBranchDetail(branchName)

frontend/src/store/aiFlowBuilderStore.ts

@@ -136,8 +136,12 @@ export const useAIFlowBuilderStore = create<AIFlowBuilderState>()((set, get) =>
       const updatedBranches = selectedBranches.map((b) =>
         b.name === branchName ? { ...b, steps: response.steps } : b
       )
+      // Advance to the next branch that still needs detail
+      const nextIndex = updatedBranches.findIndex((b) => !b.steps)
+      const currentBranchIndex = nextIndex !== -1 ? nextIndex : updatedBranches.findIndex((b) => b.name === branchName)
       set({
         selectedBranches: updatedBranches,
+        currentBranchIndex,
         phase: 'detailing',
         isLoading: false,
       })