feat: improve AI builder UX - regenerate scaffold, Generate All layout, honest loading, 3-action review

- BranchSelector: add Regenerate button to re-trigger scaffold suggestions
- BranchDetailView: promote Generate All as primary action above Generate Detail/Skip
- GeneratingAnimation: replace rotating messages with plain honest status text
- TreePreviewCard: add Start Flow + Build Another alongside Open in Editor
- AIFlowBuilderModal: wire up handleStartFlow (navigates to flow) and handleBuildAnother (resets)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

@@ -53,25 +53,46 @@ export function AIFlowBuilderModal({ isOpen, onClose }: AIFlowBuilderModalProps)
     onClose()
   }
 
-  const handleOpenInEditor = async () => {
+  const createTree = async () => {
-    if (!assembledTree) return
+    if (!assembledTree) return null
     try {
-      const tree = await treesApi.create({
+      return await treesApi.create({
         name: assembledTree.suggested_name,
         description: assembledTree.suggested_description,
         tree_structure: assembledTree.tree_structure,
         tree_type: metadata.flow_type,
         status: 'draft',
       })
+    } catch {
+      toast.error('Failed to create flow. Please try again.')
+      return null
+    }
+  }
+
+  const handleOpenInEditor = async () => {
+    const tree = await createTree()
+    if (!tree) return
     handleClose()
     const editorPath =
       metadata.flow_type === 'procedural'
         ? `/flows/${tree.id}/edit`
         : `/trees/${tree.id}/edit`
     navigate(editorPath)
-    } catch {
-      toast.error('Failed to create flow. Please try again.')
   }
+
+  const handleStartFlow = async () => {
+    const tree = await createTree()
+    if (!tree) return
+    handleClose()
+    const navigatePath =
+      metadata.flow_type === 'procedural'
+        ? `/flows/${tree.id}/navigate`
+        : `/trees/${tree.id}/navigate`
+    navigate(navigatePath)
+  }
+
+  const handleBuildAnother = () => {
+    reset()
   }
 
   const getTitle = () => {
@@ -107,7 +128,11 @@ export function AIFlowBuilderModal({ isOpen, onClose }: AIFlowBuilderModalProps)
       {phase === 'generating' && <GeneratingAnimation />}
       {phase === 'detailing' && <BranchDetailView />}
       {phase === 'reviewing' && (
-        <TreePreviewCard onOpenInEditor={handleOpenInEditor} />
+        <TreePreviewCard
+          onOpenInEditor={handleOpenInEditor}
+          onStartFlow={handleStartFlow}
+          onBuildAnother={handleBuildAnother}
+        />
       )}
       {phase === 'error' && <ErrorView />}
     </Modal>

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

@@ -107,21 +107,52 @@ export function BranchDetailView() {
                 </div>
               </div>
             ) : (
-              <div className="flex flex-col items-center gap-3 rounded-lg border border-dashed border-border bg-accent/20 py-8">
+              <div className="flex flex-col items-center gap-4 rounded-lg border border-dashed border-border bg-accent/20 py-8">
                 <p className="text-sm text-muted-foreground">
                   Generate AI detail for this branch
                 </p>
+
+                {/* Generate All — primary action, shown when multiple branches remain */}
+                {selectedBranches.filter((b) => !b.steps).length > 1 && (
+                  isGeneratingAll ? (
+                    <button
+                      type="button"
+                      onClick={cancelGenerateAll}
+                      className="flex items-center gap-2 rounded-lg border border-red-400/30 bg-red-400/10 px-5 py-2.5 text-sm font-medium text-red-400 hover:bg-red-400/20"
+                    >
+                      <Square className="h-4 w-4" />
+                      Stop Generating
+                    </button>
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={generateAllBranchDetails}
+                      disabled={isLoading}
+                      className="flex items-center gap-2 rounded-lg bg-gradient-brand px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
+                    >
+                      <Zap className="h-4 w-4" />
+                      Generate All {selectedBranches.filter((b) => !b.steps).length} Branches
+                    </button>
+                  )
+                )}
+
+                {/* Divider + secondary actions */}
+                {selectedBranches.filter((b) => !b.steps).length > 1 && (
+                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                    <div className="h-px w-8 bg-border" />
+                    or
+                    <div className="h-px w-8 bg-border" />
+                  </div>
+                )}
+
                 <div className="flex items-center gap-2">
                   <button
                     type="button"
                     onClick={() => handleGenerate(currentBranch.name)}
                     disabled={isLoading || isGeneratingAll}
-                    className={cn(
+                    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"
-                      'rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                      isLoading || isGeneratingAll ? 'cursor-not-allowed opacity-50' : 'hover:opacity-90'
-                    )}
                   >
-                    Generate Detail
+                    Generate this branch
                   </button>
                   <button
                     type="button"
@@ -131,38 +162,11 @@ export function BranchDetailView() {
                       }
                     }}
                     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"
+                    className="flex items-center gap-1 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent disabled:opacity-50"
                   >
-                    <SkipForward className="h-3.5 w-3.5" />
+                    <SkipForward className="h-3 w-3" />
                     Skip
                   </button>
-
-                  {/* Subtle separator + Generate All */}
-                  {selectedBranches.filter((b) => !b.steps).length > 1 && (
-                    <>
-                      <div className="h-6 w-px bg-border" />
-                      {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-2 text-sm font-medium text-red-400 hover:bg-red-400/20"
-                        >
-                          <Square className="h-3.5 w-3.5" />
-                          Stop
-                        </button>
-                      ) : (
-                        <button
-                          type="button"
-                          onClick={generateAllBranchDetails}
-                          disabled={isLoading}
-                          className="flex items-center gap-1.5 rounded-lg border border-primary/30 bg-primary/10 px-3 py-2 text-sm font-medium text-primary hover:bg-primary/20 disabled:opacity-50"
-                        >
-                          <Zap className="h-3.5 w-3.5" />
-                          Generate All
-                        </button>
-                      )}
-                    </>
-                  )}
                 </div>
               </div>
             )}

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

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { GripVertical, Plus, X, Pencil, Check } from 'lucide-react'
+import { GripVertical, Plus, X, Pencil, Check, RefreshCw } from 'lucide-react'
 import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
 import { cn } from '@/lib/utils'
 import type { AIBranch } from '@/types'
@@ -10,6 +10,8 @@ export function BranchSelector() {
     selectedBranches,
     selectBranches,
     setPhase,
+    scaffold,
+    isLoading,
     error,
   } = useAIFlowBuilderStore()
 
@@ -73,10 +75,20 @@ export function BranchSelector() {
 
   return (
     <div className="space-y-4">
-      <div>
+      <div className="flex items-center justify-between">
         <p className="text-sm text-muted-foreground">
           AI suggested {suggestedBranches.length} branches. Select, reorder, rename, or add your own.
         </p>
+        <button
+          type="button"
+          onClick={() => scaffold()}
+          disabled={isLoading}
+          className="flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
+          title="Generate new suggestions"
+        >
+          <RefreshCw className={cn('h-3 w-3', isLoading && 'animate-spin')} />
+          Regenerate
+        </button>
       </div>
 
       {/* Branch list */}

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

@@ -1,62 +1,24 @@
-import { useEffect, useState } from 'react'
-import { cn } from '@/lib/utils'
-
-const MESSAGES = [
-  'Setting up your flow...',
-  'Building diagnostic paths...',
-  'Putting the pieces in place...',
-  'Almost there...',
-] as const
-
-const MESSAGE_DURATIONS = [4000, 8000, 8000, Infinity] // ms each message shows
-
 interface GeneratingAnimationProps {
   branchContext?: { current: number; total: number }
 }
 
 export function GeneratingAnimation({ branchContext }: GeneratingAnimationProps) {
-  const [messageIndex, setMessageIndex] = useState(0)
-
-  // Reset and advance message on mount/remount
-  useEffect(() => {
-    setMessageIndex(0)
-    let current = 0
-
-    const advance = () => {
-      current += 1
-      if (current < MESSAGES.length - 1) {
-        setMessageIndex(current)
-        timer = setTimeout(advance, MESSAGE_DURATIONS[current])
-      } else {
-        setMessageIndex(MESSAGES.length - 1)
-      }
-    }
-
-    let timer = setTimeout(advance, MESSAGE_DURATIONS[0])
-    return () => clearTimeout(timer)
-  }, [])
-
   return (
     <div className="flex flex-col items-center justify-center gap-4 py-10">
       {/* Spinner */}
       <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-primary" />
 
       {/* Branch context (Generate All mode) */}
-      {branchContext && (
+      {branchContext ? (
+        <>
           <p className="text-xs font-label uppercase tracking-wide text-muted-foreground">
             Branch {branchContext.current} of {branchContext.total}
           </p>
+          <p className="text-sm text-muted-foreground">Generating branch detail...</p>
+        </>
+      ) : (
+        <p className="text-sm text-muted-foreground">Generating...</p>
       )}
-
-      {/* Rotating message */}
-      <p
-        key={messageIndex}
-        className={cn(
-          'text-sm text-muted-foreground transition-opacity duration-500',
-        )}
-      >
-        {MESSAGES[messageIndex]}
-      </p>
     </div>
   )
 }

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

@@ -1,13 +1,15 @@
-import { GitBranch, Layers, CheckCircle, ArrowRight, RotateCcw } from 'lucide-react'
+import { GitBranch, Layers, CheckCircle, ArrowRight, RotateCcw, Play } from 'lucide-react'
 import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
 import { cn } from '@/lib/utils'
 
 interface TreePreviewCardProps {
   onOpenInEditor: () => void
+  onStartFlow: () => void
+  onBuildAnother: () => void
 }
 
-export function TreePreviewCard({ onOpenInEditor }: TreePreviewCardProps) {
+export function TreePreviewCard({ onOpenInEditor, onStartFlow, onBuildAnother }: TreePreviewCardProps) {
-  const { assembledTree, reset, isLoading } = useAIFlowBuilderStore()
+  const { assembledTree, isLoading } = useAIFlowBuilderStore()
 
   if (!assembledTree) return null
 
@@ -58,28 +60,39 @@ export function TreePreviewCard({ onOpenInEditor }: TreePreviewCardProps) {
       )}
 
       {/* Actions */}
+      <div className="flex flex-col gap-2">
+        <button
+          type="button"
+          onClick={onStartFlow}
+          disabled={isLoading}
+          className={cn(
+            'flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-brand py-2.5 text-sm font-medium text-white shadow-lg shadow-primary/20',
+            'hover:opacity-90 disabled:opacity-50'
+          )}
+        >
+          <Play className="h-4 w-4" />
+          Start Flow
+        </button>
         <div className="flex gap-2">
           <button
             type="button"
             onClick={onOpenInEditor}
             disabled={isLoading}
-          className={cn(
+            className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-border py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
-            'flex flex-1 items-center justify-center gap-2 rounded-lg bg-gradient-brand py-2.5 text-sm font-medium text-white shadow-lg shadow-primary/20',
-            'hover:opacity-90'
-          )}
           >
             <ArrowRight className="h-4 w-4" />
             Open in Editor
           </button>
           <button
             type="button"
-          onClick={reset}
+            onClick={onBuildAnother}
-          className="flex items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="flex items-center gap-2 rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <RotateCcw className="h-4 w-4" />
-          Start Over
+            Build Another
           </button>
         </div>
       </div>
+    </div>
   )
 }