refactor: move Generate All into empty-state button group with subtle separator

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

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>
             )}