From f5e001b1995b23417003848374f76595c2325585 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sat, 21 Feb 2026 13:58:18 -0500
Subject: [PATCH] fix: persist branch viewing index in store to survive phase
 remounts

Local useState resets to 0 every time phase transitions from 'generating'
back to 'detailing', causing the view to snap back to branch 1.

Move viewingIndex to store's currentBranchIndex (already existed) and
advance it in generateBranchDetail after success. Component reads from
store so remounts no longer lose position.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/ai-builder/BranchDetailView.tsx  | 17 +++--------------
 frontend/src/store/aiFlowBuilderStore.ts        |  4 ++++
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/ai-builder/BranchDetailView.tsx b/frontend/src/components/ai-builder/BranchDetailView.tsx
index 0727f070..24ef854a 100644
--- a/frontend/src/components/ai-builder/BranchDetailView.tsx
+++ b/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)
diff --git a/frontend/src/store/aiFlowBuilderStore.ts b/frontend/src/store/aiFlowBuilderStore.ts
index d2c9b8a4..e8045810 100644
--- a/frontend/src/store/aiFlowBuilderStore.ts
+++ b/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,
       })