feat: add Generate All button and per-branch progress to AI builder detail stage

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-24 00:52:17 -05:00
parent da5342496b
commit ad85502ca1

View File

@@ -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