feat: AI flow builder, visibility model, dashboard tabs, fork UI (#88)

- AI flow builder: scaffold → branch detail → assemble → review flow
- Generate All one-click branch generation with stop/cancel
- Regenerate scaffold suggestions button
- 3-action review screen: Start Flow, Open in Editor, Build Another
- Fix Publish button gated behind !isDirty
- Fix visibility column enforcement in tree access filter
- Add ?visibility filter and author_name to GET /trees
- Dashboard tabbed flows: My Flows / My Team / Public / All
- Create button in My Flows tab, window focus reload (stale data fix)
- Fork UI with optional reason modal
- Fix account_id nullability in User type and schema
- Keep is_public and visibility in sync on updates

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

frontend/src/components/admin/PageHeader.tsx

@@ -1,25 +1,2 @@
-import type { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-
-interface PageHeaderProps {
-  title: string
-  description?: string
-  action?: ReactNode
-  className?: string
-}
-
-export function PageHeader({ title, description, action, className }: PageHeaderProps) {
-  return (
-    <div className={cn('flex items-start justify-between gap-4', className)}>
-      <div>
-        <h1 className="text-2xl font-bold font-heading text-foreground">{title}</h1>
-        {description && (
-          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
-        )}
-      </div>
-      {action && <div className="flex-shrink-0">{action}</div>}
-    </div>
-  )
-}
-
-export default PageHeader
+export { PageHeader } from '@/components/common/PageHeader'
+export { PageHeader as default } from '@/components/common/PageHeader'

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

@@ -37,6 +37,11 @@ export function AIFlowBuilderModal({ isOpen, onClose }: AIFlowBuilderModalProps)
   // Auto-trigger scaffold after conversation starts (ref prevents double-fire)
   const hasTriggeredScaffold = useRef(false)
   useEffect(() => {
+    // Reset guard when wizard resets to foundation (Start Over or close)
+    if (phase === 'foundation') {
+      hasTriggeredScaffold.current = false
+      return
+    }
     if (phase === 'scaffolding' && !hasTriggeredScaffold.current && !useAIFlowBuilderStore.getState().suggestedBranches.length) {
       hasTriggeredScaffold.current = true
       scaffold()
@@ -48,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':
@@ -102,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

@@ -1,4 +1,4 @@
-import { Check, RefreshCw, SkipForward, ChevronRight, ChevronLeft } from 'lucide-react'
+import { Check, RefreshCw, SkipForward, ChevronRight, ChevronLeft, Zap, Square } from 'lucide-react'
 import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
 import { GeneratingAnimation } from './GeneratingAnimation'
 import { cn } from '@/lib/utils'
@@ -13,6 +13,9 @@ export function BranchDetailView() {
     error,
     phase,
     setError,
+    isGeneratingAll,
+    generateAllBranchDetails,
+    cancelGenerateAll,
   } = useAIFlowBuilderStore()
 
   const viewingIndex = currentBranchIndex
@@ -32,11 +35,23 @@ export function BranchDetailView() {
   }
 
   if (phase === 'generating' && isLoading) {
-    return <GeneratingAnimation />
+    return (
+      <GeneratingAnimation
+        branchContext={
+          isGeneratingAll
+            ? {
+                current: selectedBranches.filter((b) => b.steps).length + 1,
+                total: selectedBranches.length,
+              }
+            : undefined
+        }
+      />
+    )
   }
 
   return (
     <div className="flex flex-col gap-4">
+
       {/* Content area */}
       <div className="space-y-4">
         {/* Branch tabs */}
@@ -83,7 +98,7 @@ export function BranchDetailView() {
                   <button
                     type="button"
                     onClick={() => handleGenerate(currentBranch.name)}
-                    disabled={isLoading}
+                    disabled={isLoading || isGeneratingAll}
                     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"
                   >
                     <RefreshCw className="h-3 w-3" />
@@ -92,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>
-                <div className="flex gap-2">
+
+                {/* 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}
-                    className={cn(
-                      'rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                      isLoading ? 'cursor-not-allowed opacity-50' : 'hover:opacity-90'
-                    )}
+                    disabled={isLoading || isGeneratingAll}
+                    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"
@@ -115,9 +161,10 @@ export function BranchDetailView() {
                         setViewingIndex(viewingIndex + 1)
                       }
                     }}
-                    className="flex items-center gap-1 rounded-lg border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent"
+                    disabled={isGeneratingAll}
+                    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>
                 </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,33 +1,24 @@
-import { useEffect, useState } from 'react'
-import { Sparkles } from 'lucide-react'
-
-const MESSAGES = [
-  'Analyzing your flow requirements...',
-  'Building decision paths...',
-  'Generating troubleshooting logic...',
-  'Crafting resolution steps...',
-  'Structuring the flow...',
-]
-
-export function GeneratingAnimation() {
-  const [messageIndex, setMessageIndex] = useState(0)
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setMessageIndex((prev) => (prev + 1) % MESSAGES.length)
-    }, 3000)
-    return () => clearInterval(interval)
-  }, [])
+interface GeneratingAnimationProps {
+  branchContext?: { current: number; total: number }
+}
 
+export function GeneratingAnimation({ branchContext }: GeneratingAnimationProps) {
   return (
-    <div className="flex flex-col items-center justify-center gap-4 py-12">
-      <div className="relative">
-        <div className="h-12 w-12 animate-spin rounded-full border-4 border-border border-t-primary" />
-        <Sparkles className="absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 text-primary" />
-      </div>
-      <p className="text-sm text-muted-foreground animate-pulse">
-        {MESSAGES[messageIndex]}
-      </p>
+    <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>
+          <p className="text-sm text-muted-foreground">Generating branch detail...</p>
+        </>
+      ) : (
+        <p className="text-sm text-muted-foreground">Generating...</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) {
-  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>
   )

frontend/src/components/common/PageHeader.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+interface PageHeaderProps {
+  title: string
+  description?: string
+  icon?: ReactNode
+  action?: ReactNode
+  className?: string
+  titleClassName?: string
+  descriptionClassName?: string
+}
+
+export function PageHeader({
+  title,
+  description,
+  icon,
+  action,
+  className,
+  titleClassName,
+  descriptionClassName,
+}: PageHeaderProps) {
+  return (
+    <div className={cn('flex items-start justify-between gap-4', className)}>
+      <div className="flex items-start gap-3">
+        {icon && <div className="shrink-0">{icon}</div>}
+        <div>
+          <h1 className={cn('text-2xl font-bold font-heading text-foreground', titleClassName)}>
+            {title}
+          </h1>
+          {description && (
+            <p className={cn('mt-1 text-sm text-muted-foreground', descriptionClassName)}>
+              {description}
+            </p>
+          )}
+        </div>
+      </div>
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  )
+}
+
+export default PageHeader

frontend/src/components/layout/AppLayout.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback } from 'react'
 import { Outlet, useLocation, useNavigate, Link } from 'react-router-dom'
-import { Menu, X, LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Users, Settings, LogOut, Shield } from 'lucide-react'
+import { Menu, X, LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Settings, LogOut, Shield } from 'lucide-react'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
@@ -55,8 +55,7 @@ export function AppLayout() {
     { path: '/sessions', label: 'Sessions', icon: Clock },
     { path: '/shares', label: 'Exports', icon: FileText },
     { path: '/step-library', label: 'Step Library', icon: Bookmark },
-    { path: '/account', label: 'Team', icon: Users },
-    { path: '/account', label: 'Settings', icon: Settings },
+    { path: '/account', label: 'Account', icon: Settings },
   ]
 
   return (

frontend/src/components/layout/ProtectedRoute.tsx

@@ -1,6 +1,7 @@
 import { Navigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions, type EffectiveRole } from '@/hooks/usePermissions'
+import { Spinner } from '@/components/common/Spinner'
 
 interface ProtectedRouteProps {
   requiredRole?: EffectiveRole
@@ -15,7 +16,7 @@ export function ProtectedRoute({ requiredRole, children }: ProtectedRouteProps)
   if (isLoading) {
     return (
       <div className="flex h-screen items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
+        <Spinner className="border-t-foreground" />
       </div>
     )
   }

frontend/src/components/maintenance/BatchLaunchModal.tsx

@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 import { targetListsApi, batchLaunchApi } from '@/api'
 import type { TargetList, TargetEntry } from '@/types'
+import { Spinner } from '@/components/common/Spinner'
 
 interface BatchLaunchModalProps {
   treeId: string
@@ -127,7 +128,7 @@ export function BatchLaunchModal({ treeId, treeName, onClose, onLaunched }: Batc
             <div className="space-y-2">
               {savedLists === null ? (
                 <div className="flex h-24 items-center justify-center">
-                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+                  <Spinner size="sm" className="border-primary border-t-transparent" />
                 </div>
               ) : savedLists.length === 0 ? (
                 <p className="text-[0.875rem] text-muted-foreground">

frontend/src/components/session/ShareSessionModal.tsx

@@ -5,6 +5,7 @@ import { sessionsApi } from '@/api/sessions'
 import { buildSessionShareUrl, filterSharesForSession } from '@/lib/sessionShare'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
+import { Spinner } from '@/components/common/Spinner'
 
 interface ShareSessionModalProps {
   sessionId: string
@@ -406,7 +407,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
           {/* Loading state */}
           {isLoadingShares && shares.length === 0 && (
             <div className="flex items-center justify-center py-4">
-              <div className="h-5 w-5 animate-spin rounded-full border-2 border-border border-t-foreground" />
+              <Spinner size="sm" className="h-5 w-5 border-t-foreground" />
             </div>
           )}
         </div>

frontend/src/components/step-library/CustomStepModal.tsx

@@ -5,6 +5,7 @@ import { usePermissions } from '@/hooks/usePermissions'
 import { StepForm } from './StepForm'
 import { StepLibraryBrowser } from './StepLibraryBrowser'
 import type { Step, StepCreate } from '@/types/step'
+import { Spinner } from '@/components/common/Spinner'
 
 export interface CustomStepDraft {
   title: string
@@ -134,7 +135,7 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
         {isSubmitting && (
           <div className="absolute inset-0 flex items-center justify-center bg-black/80 backdrop-blur-sm">
             <div className="flex flex-col items-center gap-3">
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
+              <Spinner className="border-t-foreground" />
               <p className="text-sm text-muted-foreground">Creating step...</p>
             </div>
           </div>

frontend/src/components/tree-editor/TreeEditorLayout.tsx

@@ -5,6 +5,7 @@ import { NodeEditorPanel } from './NodeEditorPanel'
 import { MetadataSidePanel } from './MetadataSidePanel'
 import { useTreeEditorStore } from '@/store/treeEditorStore'
 import { cn } from '@/lib/utils'
+import { Spinner } from '@/components/common/Spinner'
 
 // Lazy load CodeModeEditor (Monaco is ~2MB)
 const CodeModeEditor = lazy(() =>
@@ -46,7 +47,7 @@ export function TreeEditorLayout({
           )}>
             <Suspense fallback={
               <div className="flex h-full items-center justify-center bg-card">
-                <div className="h-6 w-6 animate-spin rounded-full border-2 border-border border-t-foreground" />
+                <Spinner size="sm" className="h-6 w-6 border-t-foreground" />
               </div>
             }>
               <CodeModeEditor />

frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx

@@ -9,6 +9,7 @@ import { createCompletionProvider } from './resolutionFlowCompletions'
 import { CodeModeToolbar } from './CodeModeToolbar'
 import { SyntaxHelpPanel } from './SyntaxHelpPanel'
 import { setMonacoEditor } from './monacoEditorRef'
+import { Spinner } from '@/components/common/Spinner'
 
 export function CodeModeEditor() {
   const editorRef = useRef<MonacoEditor.IStandaloneCodeEditor | null>(null)
@@ -167,7 +168,7 @@ export function CodeModeEditor() {
           onMount={handleEditorDidMount}
           loading={
             <div className="flex h-full items-center justify-center bg-card">
-              <div className="h-6 w-6 animate-spin rounded-full border-2 border-border border-t-foreground" />
+              <Spinner size="sm" className="h-6 w-6 border-t-foreground" />
             </div>
           }
           options={{