fix: auto-advance branch detail and pin navigation bar

- Auto-advance to next undetailed branch after generation completes,
  using a useEffect that watches the count of detailed branches
- Cap tree preview at max-h-48 with internal scroll so the nav bar
  is never pushed off screen
- Make nav bar sticky bottom-0 with bg-card so it stays visible
  regardless of content height

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

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

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Check, RefreshCw, SkipForward, ChevronRight, ChevronLeft } from 'lucide-react'
 import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
 import { GeneratingAnimation } from './GeneratingAnimation'
@@ -21,6 +21,18 @@ export function BranchDetailView() {
   const allBranchesHaveDetail = selectedBranches.every((b) => b.steps)
   const branchesWithDetail = selectedBranches.filter((b) => b.steps).length
 
+  // Auto-advance to next branch without detail after generation completes
+  const prevDetailCount = useRef(branchesWithDetail)
+  useEffect(() => {
+    if (branchesWithDetail > prevDetailCount.current) {
+      prevDetailCount.current = branchesWithDetail
+      const nextIndex = selectedBranches.findIndex((b) => !b.steps)
+      if (nextIndex !== -1) {
+        setViewingIndex(nextIndex)
+      }
+    }
+  }, [branchesWithDetail, selectedBranches])
+
   const handleGenerate = async (branchName: string) => {
     setError(null)
     await generateBranchDetail(branchName)
@@ -35,6 +47,8 @@ export function BranchDetailView() {
   }
 
   return (
+    <div className="flex flex-col gap-4">
+      {/* Content area */}
       <div className="space-y-4">
         {/* Branch tabs */}
         <div className="flex items-center gap-2 overflow-x-auto pb-1">
@@ -72,7 +86,7 @@ export function BranchDetailView() {
             {currentBranch.steps ? (
               <div className="space-y-3">
                 {/* Mini tree preview */}
-              <div className="rounded-lg border border-border bg-accent/30 p-3">
+                <div className="max-h-48 overflow-y-auto rounded-lg border border-border bg-accent/30 p-3">
                   <NodePreview node={currentBranch.steps} depth={0} />
                 </div>
 
@@ -129,9 +143,10 @@ export function BranchDetailView() {
             {error}
           </div>
         )}
+      </div>
 
-      {/* Navigation */}
-      <div className="flex items-center justify-between border-t border-border pt-3">
+      {/* Navigation — sticky so it's always visible */}
+      <div className="sticky bottom-0 flex items-center justify-between border-t border-border bg-card pt-3 pb-1">
         <div className="flex items-center gap-2">
           <button
             type="button"