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>
2026-02-24 01:38:45 -05:00
parent 3a2470dca3
commit 1f8201a315
5 changed files with 127 additions and 111 deletions
--- a/frontend/src/components/ai-builder/AIFlowBuilderModal.tsx
+++ b/frontend/src/components/ai-builder/AIFlowBuilderModal.tsx
@@ -53,27 +53,48 @@ export function AIFlowBuilderModal({ isOpen, onClose }: AIFlowBuilderModalProps)
    onClose()
  }

-  const handleOpenInEditor = async () => {
-    if (!assembledTree) return
+  const createTree = async () => {
+    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',
      })
-      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.')
+      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)
+  }
+
+  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 = () => {
    switch (phase) {
      case 'foundation':
@@ -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>
--- a/frontend/src/components/ai-builder/BranchDetailView.tsx
+++ b/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(
-                      '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'
-                    )}
+                    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"
                  >
-                    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>
            )}
--- a/frontend/src/components/ai-builder/BranchSelector.tsx
+++ b/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 */}
--- a/frontend/src/components/ai-builder/GeneratingAnimation.tsx
+++ b/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 && (
-        <p className="text-xs font-label uppercase tracking-wide text-muted-foreground">
-          Branch {branchContext.current} of {branchContext.total}
-        </p>
+      {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>
  )
 }
--- a/frontend/src/components/ai-builder/TreePreviewCard.tsx
+++ b/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) {
-  const { assembledTree, reset, isLoading } = useAIFlowBuilderStore()
+export function TreePreviewCard({ onOpenInEditor, onStartFlow, onBuildAnother }: TreePreviewCardProps) {
+  const { assembledTree, isLoading } = useAIFlowBuilderStore()

  if (!assembledTree) return null

@@ -58,27 +60,38 @@ export function TreePreviewCard({ onOpenInEditor }: TreePreviewCardProps) {
      )}

      {/* Actions */}
-      <div className="flex gap-2">
+      <div className="flex flex-col gap-2">
        <button
          type="button"
-          onClick={onOpenInEditor}
+          onClick={onStartFlow}
          disabled={isLoading}
          className={cn(
-            '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'
+            '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'
          )}
        >
-          <ArrowRight className="h-4 w-4" />
-          Open in Editor
-        </button>
-        <button
-          type="button"
-          onClick={reset}
-          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"
-        >
-          <RotateCcw className="h-4 w-4" />
-          Start Over
+          <Play className="h-4 w-4" />
+          Start Flow
        </button>
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={onOpenInEditor}
+            disabled={isLoading}
+            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"
+          >
+            <ArrowRight className="h-4 w-4" />
+            Open in Editor
+          </button>
+          <button
+            type="button"
+            onClick={onBuildAnother}
+            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" />
+            Build Another
+          </button>
+        </div>
      </div>
    </div>
  )