From ad85502ca10e1c517e2b989ce1061536f2e2016c Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 24 Feb 2026 00:52:17 -0500
Subject: [PATCH] feat: add Generate All button and per-branch progress to AI
 builder detail stage

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../ai-builder/BranchDetailView.tsx           | 60 +++++++++++++++++--
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ai-builder/BranchDetailView.tsx b/frontend/src/components/ai-builder/BranchDetailView.tsx
index 24ef854a..629c2acd 100644
--- a/frontend/src/components/ai-builder/BranchDetailView.tsx
+++ b/frontend/src/components/ai-builder/BranchDetailView.tsx
@@ -1,4 +1,4 @@
-import { Check, RefreshCw, SkipForward, ChevronRight, ChevronLeft } from 'lucide-react'
+import { Check, RefreshCw, SkipForward, ChevronRight, ChevronLeft, Zap, Square } from 'lucide-react'
 import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
 import { GeneratingAnimation } from './GeneratingAnimation'
 import { cn } from '@/lib/utils'
@@ -13,6 +13,9 @@ export function BranchDetailView() {
     error,
     phase,
     setError,
+    isGeneratingAll,
+    generateAllBranchDetails,
+    cancelGenerateAll,
   } = useAIFlowBuilderStore()
 
   const viewingIndex = currentBranchIndex
@@ -32,11 +35,55 @@ export function BranchDetailView() {
   }
 
   if (phase === 'generating' && isLoading) {
-    return <GeneratingAnimation />
+    return (
+      <GeneratingAnimation
+        branchContext={
+          isGeneratingAll
+            ? {
+                current: selectedBranches.filter((b) => b.steps).length + 1,
+                total: selectedBranches.length,
+              }
+            : undefined
+        }
+      />
+    )
   }
 
   return (
     <div className="flex flex-col gap-4">
+      {/* Generate All / Stop control */}
+      {(() => {
+        const undetailedCount = selectedBranches.filter((b) => !b.steps).length
+        if (undetailedCount === 0) return null
+        return (
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-muted-foreground">
+              {undetailedCount} branch{undetailedCount !== 1 ? 'es' : ''} need detail
+            </span>
+            {isGeneratingAll ? (
+              <button
+                type="button"
+                onClick={cancelGenerateAll}
+                className="flex items-center gap-1.5 rounded-lg border border-red-400/30 bg-red-400/10 px-3 py-1.5 text-xs font-medium text-red-400 hover:bg-red-400/20"
+              >
+                <Square className="h-3 w-3" />
+                Stop
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={generateAllBranchDetails}
+                disabled={isLoading}
+                className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-3 py-1.5 text-xs font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
+              >
+                <Zap className="h-3 w-3" />
+                Generate All
+              </button>
+            )}
+          </div>
+        )
+      })()}
+
       {/* Content area */}
       <div className="space-y-4">
         {/* Branch tabs */}
@@ -83,7 +130,7 @@ export function BranchDetailView() {
                   <button
                     type="button"
                     onClick={() => handleGenerate(currentBranch.name)}
-                    disabled={isLoading}
+                    disabled={isLoading || isGeneratingAll}
                     className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
                   >
                     <RefreshCw className="h-3 w-3" />
@@ -100,10 +147,10 @@ export function BranchDetailView() {
                   <button
                     type="button"
                     onClick={() => handleGenerate(currentBranch.name)}
-                    disabled={isLoading}
+                    disabled={isLoading || isGeneratingAll}
                     className={cn(
                       'rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                      isLoading ? 'cursor-not-allowed opacity-50' : 'hover:opacity-90'
+                      isLoading || isGeneratingAll ? 'cursor-not-allowed opacity-50' : 'hover:opacity-90'
                     )}
                   >
                     Generate Detail
@@ -115,7 +162,8 @@ export function BranchDetailView() {
                         setViewingIndex(viewingIndex + 1)
                       }
                     }}
-                    className="flex items-center gap-1 rounded-lg border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent"
+                    disabled={isGeneratingAll}
+                    className="flex items-center gap-1 rounded-lg border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent disabled:opacity-50"
                   >
                     <SkipForward className="h-3.5 w-3.5" />
                     Skip