From 3a2470dca31d45d196447bc8557e75ca77c6c36f Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 24 Feb 2026 01:12:23 -0500
Subject: [PATCH] refactor: move Generate All into empty-state button group
 with subtle separator

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

diff --git a/frontend/src/components/ai-builder/BranchDetailView.tsx b/frontend/src/components/ai-builder/BranchDetailView.tsx
index 629c2acd..dfb73147 100644
--- a/frontend/src/components/ai-builder/BranchDetailView.tsx
+++ b/frontend/src/components/ai-builder/BranchDetailView.tsx
@@ -51,38 +51,6 @@ export function BranchDetailView() {
 
   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">
@@ -143,7 +111,7 @@ export function BranchDetailView() {
                 <p className="text-sm text-muted-foreground">
                   Generate AI detail for this branch
                 </p>
-                <div className="flex gap-2">
+                <div className="flex items-center gap-2">
                   <button
                     type="button"
                     onClick={() => handleGenerate(currentBranch.name)}
@@ -168,6 +136,33 @@ export function BranchDetailView() {
                     <SkipForward className="h-3.5 w-3.5" />
                     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>
             )}