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>
2026-02-24 07:40:44 -05:00
parent 97cd297f46
commit ed4ab059bf
41 changed files with 1909 additions and 315 deletions
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -11,8 +11,8 @@ export const apiClient = axios.create({
  },
 })

-// Global error handler - shows toast for common API errors
-// Pages can still catch errors explicitly if they need custom handling
+// Global error handler for shared cases only.
+// By convention, 4xx errors are handled at the page/component level.
 function handleGlobalError(error: AxiosError) {
  // Network error (no response from server)
  if (!error.response) {
@@ -43,9 +43,8 @@ function handleGlobalError(error: AxiosError) {
    return
  }

-  // Client errors (4xx) — don't toast globally.
-  // Pages handle their own 4xx errors (permission checks, validation, not-found)
-  // and many are caught silently. Global toasts here cause noisy duplicates.
+  // Client errors (4xx) remain page-owned to avoid duplicate/noisy toasts.
+  // Global handling only covers 401/429/5xx.
  if (status >= 400 && status < 500) {
    return
  }
--- a/frontend/src/components/admin/PageHeader.tsx
+++ b/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'
--- a/frontend/src/components/ai-builder/AIFlowBuilderModal.tsx
+++ b/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>
--- a/frontend/src/components/ai-builder/BranchDetailView.tsx
+++ b/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>
--- 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,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>
  )
 }
--- 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>
  )
--- a/frontend/src/components/common/PageHeader.tsx
+++ b/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
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/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 (
--- a/frontend/src/components/layout/ProtectedRoute.tsx
+++ b/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>
    )
  }
--- a/frontend/src/components/maintenance/BatchLaunchModal.tsx
+++ b/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">
--- a/frontend/src/components/session/ShareSessionModal.tsx
+++ b/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>
--- a/frontend/src/components/step-library/CustomStepModal.tsx
+++ b/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>
--- a/frontend/src/components/tree-editor/TreeEditorLayout.tsx
+++ b/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 />
--- a/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx
+++ b/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={{
--- a/frontend/src/pages/AccountSettingsPage.tsx
+++ b/frontend/src/pages/AccountSettingsPage.tsx
@@ -138,12 +138,10 @@ export function AccountSettingsPage() {

  if (error) {
    return (
-      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
-        <div className="rounded-md border border-red-400/20 bg-red-400/10 p-4 text-red-400">
-          <div className="flex items-center gap-2">
-            <AlertCircle className="h-5 w-5" />
-            {error}
-          </div>
+      <div className="rounded-md border border-red-400/20 bg-red-400/10 p-4 text-red-400">
+        <div className="flex items-center gap-2">
+          <AlertCircle className="h-5 w-5" />
+          {error}
        </div>
      </div>
    )
@@ -152,7 +150,7 @@ export function AccountSettingsPage() {
  const sub = subscription?.subscription

  return (
-    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+    <div>
      <div className="mb-8">
        <div className="flex items-center gap-3">
          <Building2 className="h-8 w-8 text-muted-foreground" />
--- a/frontend/src/pages/ForgotPasswordPage.tsx
+++ b/frontend/src/pages/ForgotPasswordPage.tsx
@@ -35,7 +35,7 @@ export function ForgotPasswordPage() {
              <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
            </div>
          </div>
-          <h1 className="text-3xl font-bold text-foreground tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
            Reset Password
          </h1>
          <p className="mt-2 text-sm text-muted-foreground">
--- a/frontend/src/pages/MaintenanceFlowDetailPage.tsx
+++ b/frontend/src/pages/MaintenanceFlowDetailPage.tsx
@@ -5,6 +5,9 @@ import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
 import { maintenanceSchedulesApi } from '@/api/maintenanceSchedules'
 import { BatchLaunchModal } from '@/components/maintenance/BatchLaunchModal'
+import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
+import { PageHeader } from '@/components/common/PageHeader'
 import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
 import type { Tree, MaintenanceSchedule, Session } from '@/types'
@@ -64,12 +67,29 @@ export default function MaintenanceFlowDetailPage() {
  if (isLoading) {
    return (
      <div className="flex h-64 items-center justify-center">
-        <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+        <Spinner size="sm" className="h-6 w-6 border-primary border-t-transparent" />
      </div>
    )
  }

-  if (!tree) return null
+  if (!tree) {
+    return (
+      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+        <EmptyState
+          title="Maintenance flow not found"
+          description="This flow is unavailable or you do not have access."
+          action={(
+            <button
+              onClick={() => navigate('/trees?type=maintenance')}
+              className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              Back to Maintenance Flows
+            </button>
+          )}
+        />
+      </div>
+    )
+  }

  // Group sessions by batch_id for run history
  const batchMap = new Map<string, Session[]>()
@@ -81,43 +101,42 @@ export default function MaintenanceFlowDetailPage() {
  const batches = Array.from(batchMap.entries()).slice(0, 10)

  return (
-    <div className="mx-auto max-w-4xl space-y-6 p-6">
+    <div className="container mx-auto max-w-4xl space-y-6 px-4 py-6 sm:px-6 sm:py-8">
      {/* Header */}
-      <div className="flex items-start justify-between">
-        <div className="flex items-center gap-3">
+      <PageHeader
+        title={tree.name}
+        description={tree.description || undefined}
+        icon={(
          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-500/10 text-amber-400">
            <Wrench className="h-5 w-5" />
          </div>
-          <div>
-            <h1 className="text-xl font-semibold text-foreground">{tree.name}</h1>
-            {tree.description && (
-              <p className="text-[0.8125rem] text-muted-foreground">{tree.description}</p>
-            )}
+        )}
+        titleClassName="text-xl font-semibold"
+        action={(
+          <div className="flex gap-2">
+            <button
+              onClick={() => navigate(`/flows/${id}/edit`)}
+              className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              <Settings className="h-3.5 w-3.5" />
+              Edit Flow
+            </button>
+            <button
+              onClick={() => navigate(`/flows/${id}/navigate`)}
+              className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
+            >
+              <Play className="h-3.5 w-3.5" />
+              Run
+            </button>
+            <button
+              onClick={() => setShowBatchModal(true)}
+              className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              Batch Launch
+            </button>
          </div>
-        </div>
-        <div className="flex gap-2">
-          <button
-            onClick={() => navigate(`/flows/${id}/edit`)}
-            className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
-            <Settings className="h-3.5 w-3.5" />
-            Edit Flow
-          </button>
-          <button
-            onClick={() => navigate(`/flows/${id}/navigate`)}
-            className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
-          >
-            <Play className="h-3.5 w-3.5" />
-            Run
-          </button>
-          <button
-            onClick={() => setShowBatchModal(true)}
-            className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
-            Batch Launch
-          </button>
-        </div>
-      </div>
+        )}
+      />

      {/* Schedule Panel */}
      <div className="rounded-xl border border-border bg-card p-5">
--- a/frontend/src/pages/MyAnalyticsPage.tsx
+++ b/frontend/src/pages/MyAnalyticsPage.tsx
@@ -11,6 +11,7 @@ import {
  ResponsiveContainer,
 } from 'recharts'
 import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
 import { analyticsApi } from '@/api'
 import { usePermissions } from '@/hooks/usePermissions'
 import type { PersonalAnalyticsResponse, AnalyticsPeriod } from '@/types'
@@ -54,8 +55,11 @@ export default function MyAnalyticsPage() {

  if (!data) {
    return (
-      <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-muted-foreground">Failed to load analytics data.</p>
+      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+        <EmptyState
+          title="Analytics unavailable"
+          description="Failed to load analytics data. Please try again."
+        />
      </div>
    )
  }
--- a/frontend/src/pages/QuickStartPage.tsx
+++ b/frontend/src/pages/QuickStartPage.tsx
@@ -1,9 +1,9 @@
-import { useState, useEffect, useRef, useMemo } from 'react'
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Search, Loader2, Star, ChevronLeft, ChevronRight } from 'lucide-react'
+import { Search, Loader2, Star, ChevronLeft, ChevronRight, GitBranch } from 'lucide-react'
 import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
-import type { TreeListItem } from '@/types'
+import type { TreeListItem, TreeFilters } from '@/types'
 import type { Session } from '@/types/session'
 import { getTreeNavigatePath } from '@/lib/routing'
 import { usePermissions } from '@/hooks/usePermissions'
@@ -21,6 +21,7 @@ import { ViewToggle } from '@/components/library/ViewToggle'
 import { AIFlowBuilderModal } from '@/components/ai-builder/AIFlowBuilderModal'
 import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
 import { cn } from '@/lib/utils'
+import { toast } from '@/lib/toast'

 function timeAgo(dateStr: string): string {
  const now = Date.now()
@@ -66,6 +67,16 @@ export function QuickStartPage() {
  const [showAIBuilder, setShowAIBuilder] = useState(false)
  const { aiEnabled } = useCachedQuota()

+  // Tab state
+  type Tab = 'mine' | 'team' | 'public' | 'all'
+  const hasTeam = Boolean(user?.account_id)
+  const [activeTab, setActiveTab] = useState<Tab>('mine')
+
+  // Fork modal state
+  const [forkTarget, setForkTarget] = useState<TreeListItem | null>(null)
+  const [forkReason, setForkReason] = useState('')
+  const [isForking, setIsForking] = useState(false)
+
  // Pin store
  const pinnedItems = usePinnedFlowsStore((s) => s.items)
  const pinnedIsLoading = usePinnedFlowsStore((s) => s.isLoading)
@@ -102,34 +113,29 @@ export function QuickStartPage() {
    })
  }, [])

-  // Load my flows when page/size or user changes
-  useEffect(() => {
+  // Load flows — tab-aware
+  const loadFlows = useCallback(async () => {
    if (!user?.id) return
+    setIsLoadingFlows(true)
+    setAllFlowsCeiling(false)

-    const loadFlows = async () => {
-      setIsLoadingFlows(true)
-      setAllFlowsCeiling(false)
-
+    try {
      if (pageSize === 'all') {
-        // Fetch in chunks of 100, max 500
        let allItems: TreeListItem[] = []
        let skip = 0
        const CHUNK = 100
        const MAX = 500

        while (true) {
-          const chunk = await treesApi.list({
-            author_id: user.id,
-            sort_by: 'updated_at',
-            limit: CHUNK,
-            skip,
-          })
+          const params: TreeFilters = { sort_by: 'updated_at', limit: CHUNK, skip }
+          if (activeTab === 'mine') params.author_id = user.id
+          if (activeTab === 'team') params.visibility = 'team'
+          if (activeTab === 'public') { params.visibility = 'public'; params.sort_by = 'usage_count' }
+
+          const chunk = await treesApi.list(params)
          allItems = [...allItems, ...chunk]
          if (chunk.length < CHUNK || allItems.length >= MAX) {
-            if (allItems.length >= MAX) {
-              allItems = allItems.slice(0, MAX)
-              setAllFlowsCeiling(true)
-            }
+            if (allItems.length >= MAX) { allItems = allItems.slice(0, MAX); setAllFlowsCeiling(true) }
            break
          }
          skip += CHUNK
@@ -138,20 +144,34 @@ export function QuickStartPage() {
        setHasNextPage(false)
      } else {
        const numSize = pageSize as number
-        const response = await treesApi.list({
-          author_id: user.id,
-          sort_by: 'updated_at',
+        const params: TreeFilters = {
+          sort_by: activeTab === 'public' ? 'usage_count' : 'updated_at',
          limit: numSize + 1,
          skip: (page - 1) * numSize,
-        })
+        }
+        if (activeTab === 'mine') params.author_id = user.id
+        if (activeTab === 'team') params.visibility = 'team'
+        if (activeTab === 'public') params.visibility = 'public'
+
+        const response = await treesApi.list(params)
        setHasNextPage(response.length > numSize)
        setMyFlows(response.slice(0, numSize))
      }
+    } catch {
+      // silently fail
+    } finally {
      setIsLoadingFlows(false)
    }
+  }, [user?.id, page, pageSize, activeTab])

-    loadFlows().catch(() => setIsLoadingFlows(false))
-  }, [user?.id, page, pageSize])
+  useEffect(() => { loadFlows() }, [loadFlows])
+
+  // Reload on window focus (fixes stale data after returning from editor)
+  useEffect(() => {
+    const onFocus = () => loadFlows()
+    window.addEventListener('focus', onFocus)
+    return () => window.removeEventListener('focus', onFocus)
+  }, [loadFlows])

  // Debounced search
  useEffect(() => {
@@ -219,9 +239,35 @@ export function QuickStartPage() {
  const handleTagClick = () => {} // Not used on dashboard
  const handleFolderCreated = () => {} // Not used on dashboard

+  const handleFork = async () => {
+    if (!forkTarget) return
+    setIsForking(true)
+    try {
+      const forked = await treesApi.fork(forkTarget.id, {
+        fork_reason: forkReason.trim() || undefined,
+      })
+      toast.success(`"${forked.name}" added to your flows`)
+      setForkTarget(null)
+      setForkReason('')
+      setActiveTab('mine')
+    } catch {
+      toast.error('Failed to fork flow')
+    } finally {
+      setIsForking(false)
+    }
+  }
+
  // Page size options
  const pageSizeOptions: (number | 'all')[] = [10, 25, 50, 'all']

+  // Tabs
+  const tabs: { id: Tab; label: string }[] = [
+    { id: 'mine', label: 'My Flows' },
+    ...(hasTeam ? [{ id: 'team' as Tab, label: 'My Team' }] : []),
+    { id: 'public', label: 'Public' },
+    { id: 'all', label: 'All' },
+  ]
+
  return (
    <div className="p-6 space-y-6">
      {/* Page Header */}
@@ -234,14 +280,6 @@ export function QuickStartPage() {
            Welcome back. Here&apos;s what&apos;s happening with your flows.
          </p>
        </div>
-        <div className="flex items-center gap-2">
-          {canCreateTrees && (
-            <CreateFlowDropdown
-              aiEnabled={aiEnabled}
-              onOpenAIBuilder={() => setShowAIBuilder(true)}
-            />
-          )}
-        </div>
      </div>

      {/* Quick Stats */}
@@ -354,11 +392,31 @@ export function QuickStartPage() {
        )}
      </div>

-      {/* My Flows Section */}
+      {/* My Flows Section — tabbed */}
      <div>
-        <div className="mb-3 flex items-center justify-between">
-          <h2 className="font-heading text-lg font-semibold text-foreground">My Flows</h2>
-          <div className="flex items-center gap-2">
+        <div className="mb-3 flex items-center gap-1 border-b border-border">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => { setActiveTab(tab.id); setPage(1) }}
+              className={cn(
+                'px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px',
+                activeTab === tab.id
+                  ? 'border-primary text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground'
+              )}
+            >
+              {tab.label}
+            </button>
+          ))}
+          <div className="ml-auto flex items-center gap-2 pb-1.5">
+            {activeTab === 'mine' && canCreateTrees && (
+              <CreateFlowDropdown
+                aiEnabled={aiEnabled}
+                onOpenAIBuilder={() => setShowAIBuilder(true)}
+              />
+            )}
            <ViewToggle view={dashboardMyFlowsView} onChange={setDashboardMyFlowsView} />
          </div>
        </div>
@@ -371,8 +429,16 @@ export function QuickStartPage() {
          </div>
        ) : myFlows.length === 0 ? (
          <div className="py-12 text-center">
-            <p className="text-muted-foreground mb-4">You haven&apos;t created any flows yet.</p>
-            {canCreateTrees && (
+            <p className="text-muted-foreground mb-4">
+              {activeTab === 'mine'
+                ? "You haven't created any flows yet."
+                : activeTab === 'team'
+                ? 'No team flows found.'
+                : activeTab === 'public'
+                ? 'No public flows found.'
+                : 'No flows found.'}
+            </p>
+            {activeTab === 'mine' && canCreateTrees && (
              <CreateFlowDropdown
                aiEnabled={aiEnabled}
                onOpenAIBuilder={() => setShowAIBuilder(true)}
@@ -497,6 +563,48 @@ export function QuickStartPage() {
        )}
      </div>

+      {/* Fork Modal */}
+      {forkTarget && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+          <div className="w-full max-w-sm rounded-xl border border-border bg-card p-5 shadow-xl">
+            <h3 className="mb-1 text-sm font-semibold text-foreground">Fork this flow?</h3>
+            <p className="mb-4 text-xs text-muted-foreground">
+              Creates a copy of &ldquo;{forkTarget.name}&rdquo; under your account that you can edit freely.
+            </p>
+            <label className="mb-1 block text-xs text-muted-foreground">
+              Why are you forking? <span className="opacity-60">(optional)</span>
+            </label>
+            <input
+              type="text"
+              value={forkReason}
+              onChange={(e) => setForkReason(e.target.value)}
+              placeholder="e.g. Adding Cisco Meraki steps for our network"
+              maxLength={255}
+              className="mb-4 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              onKeyDown={(e) => e.key === 'Enter' && handleFork()}
+            />
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={handleFork}
+                disabled={isForking}
+                className="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-gradient-brand py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
+              >
+                <GitBranch className="h-3.5 w-3.5" />
+                {isForking ? 'Forking...' : 'Fork Flow'}
+              </button>
+              <button
+                type="button"
+                onClick={() => setForkTarget(null)}
+                className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
      {/* AI Builder Modal */}
      {showAIBuilder && (
        <AIFlowBuilderModal
--- a/frontend/src/pages/TeamAnalyticsPage.tsx
+++ b/frontend/src/pages/TeamAnalyticsPage.tsx
@@ -11,8 +11,10 @@ import {
  ResponsiveContainer,
 } from 'recharts'
 import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
 import { analyticsApi } from '@/api'
 import { usePermissions } from '@/hooks/usePermissions'
+import { toast } from '@/lib/toast'
 import type { TeamAnalyticsResponse, AnalyticsPeriod } from '@/types'

 const CHART_COLORS = {
@@ -46,6 +48,12 @@ export default function TeamAnalyticsPage() {
      .finally(() => setLoading(false))
  }, [period, isAccountOwner, isSuperAdmin])

+  useEffect(() => {
+    if (!isAccountOwner && !isSuperAdmin) {
+      toast.info('Viewing your personal analytics', { id: 'analytics-redirect' })
+    }
+  }, [isAccountOwner, isSuperAdmin])
+
  if (!isAccountOwner && !isSuperAdmin) {
    return <Navigate to="/analytics/me" replace />
  }
@@ -60,8 +68,11 @@ export default function TeamAnalyticsPage() {

  if (!data) {
    return (
-      <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-muted-foreground">Failed to load analytics data.</p>
+      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+        <EmptyState
+          title="Analytics unavailable"
+          description="Failed to load analytics data. Please try again."
+        />
      </div>
    )
  }
--- a/frontend/src/pages/TreeEditorPage.tsx
+++ b/frontend/src/pages/TreeEditorPage.tsx
@@ -651,7 +651,7 @@ export function TreeEditorPage() {
          {/* Publish */}
          <button
            onClick={handlePublish}
-            disabled={isSaving || !isDirty || hasBlockingErrors}
+            disabled={isSaving || hasBlockingErrors}
            title={hasBlockingErrors ? 'Fix validation errors before publishing (Ctrl+S when no errors)' : 'Publish tree (Ctrl+S when no errors)'}
            className={cn(
              'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -21,6 +21,8 @@ import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
 import { useCachedQuota } from '@/hooks/useCachedQuota'
 import { AIFlowBuilderModal } from '@/components/ai-builder/AIFlowBuilderModal'
 import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
+import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
 import { toast } from '@/lib/toast'

 export function TreeLibraryPage() {
@@ -465,13 +467,17 @@ export function TreeLibraryPage() {
          {/* Loading State */}
          {isLoading ? (
            <div className="flex justify-center py-12">
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-primary" />
+              <Spinner />
            </div>
          ) : trees.length === 0 ? (
-            <div className="py-12 text-center text-muted-foreground">
-              No flows found.{' '}
-              {(searchQuery || hasActiveFilters) && 'Try adjusting your filters.'}
-            </div>
+            <EmptyState
+              title="No flows found"
+              description={
+                (searchQuery || hasActiveFilters)
+                  ? 'Try adjusting your filters.'
+                  : 'Create your first flow to get started.'
+              }
+            />
          ) : (
            <>
              {treeLibraryView === 'grid' && (
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/frontend/src/pages/TreeNavigationPage.tsx
@@ -795,7 +795,7 @@ export function TreeNavigationPage() {
                  {index < 9 && (
                    selectingOption === option.id ? (
                      <span className="flex h-6 w-6 shrink-0 items-center justify-center">
-                        <span className="h-4 w-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
+                        <Spinner size="sm" className="h-4 w-4 border-t-foreground" />
                      </span>
                    ) : (
                      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-accent text-xs font-medium text-muted-foreground">
--- a/frontend/src/pages/account/TargetListsPage.tsx
+++ b/frontend/src/pages/account/TargetListsPage.tsx
@@ -4,6 +4,10 @@ import { targetListsApi } from '@/api'
 import type { TargetList, TargetListCreate, TargetEntry } from '@/types'
 import { toast } from '@/lib/toast'
 import { ConfirmDialog } from '@/components/common/ConfirmDialog'
+import { Modal } from '@/components/common/Modal'
+import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
+import { PageHeader } from '@/components/common/PageHeader'

 export default function TargetListsPage() {
  const [lists, setLists] = useState<TargetList[]>([])
@@ -103,34 +107,31 @@ export default function TargetListsPage() {

  return (
    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-xl font-semibold text-foreground">Target Lists</h1>
-          <p className="text-[0.8125rem] text-muted-foreground">
-            Saved server lists for maintenance flow batch launching
-          </p>
-        </div>
-        <button
-          onClick={() => openEditor()}
-          className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
-        >
-          <Plus className="h-4 w-4" />
-          New List
-        </button>
-      </div>
+      <PageHeader
+        title="Target Lists"
+        titleClassName="text-xl font-semibold"
+        description="Saved server lists for maintenance flow batch launching"
+        action={(
+          <button
+            onClick={() => openEditor()}
+            className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
+          >
+            <Plus className="h-4 w-4" />
+            New List
+          </button>
+        )}
+      />

      {isLoading ? (
        <div className="flex h-32 items-center justify-center">
-          <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+          <Spinner size="sm" className="h-5 w-5 border-primary border-t-transparent" />
        </div>
      ) : lists.length === 0 ? (
-        <div className="flex flex-col items-center justify-center rounded-xl border border-border bg-card py-12 text-center">
-          <Server className="mb-3 h-10 w-10 text-muted-foreground" />
-          <p className="font-medium text-foreground">No target lists yet</p>
-          <p className="mt-1 text-[0.8125rem] text-muted-foreground">
-            Create lists of servers to reuse across maintenance runs
-          </p>
-        </div>
+        <EmptyState
+          icon={<Server className="h-10 w-10" />}
+          title="No target lists yet"
+          description="Create lists of servers to reuse across maintenance runs."
+        />
      ) : (
        <div className="space-y-3">
          {lists.map(list => (
@@ -172,68 +173,68 @@ export default function TargetListsPage() {
      )}

      {/* Editor Modal */}
-      {showEditor && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-          <div className="w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-2xl">
-            <h2 className="mb-4 text-base font-semibold text-foreground">
-              {editingList ? 'Edit Target List' : 'New Target List'}
-            </h2>
-            <div className="space-y-4">
-              <div>
-                <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
-                  Name
-                </label>
-                <input
-                  type="text"
-                  value={editorName}
-                  onChange={e => setEditorName(e.target.value)}
-                  className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
-                  placeholder="e.g. RDS Farm A"
-                />
-              </div>
-              <div>
-                <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
-                  Description (optional)
-                </label>
-                <input
-                  type="text"
-                  value={editorDescription}
-                  onChange={e => setEditorDescription(e.target.value)}
-                  className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
-                  placeholder="e.g. Production RDS servers"
-                />
-              </div>
-              <div>
-                <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
-                  Targets &mdash; one per line (add notes after #)
-                </label>
-                <textarea
-                  value={editorTargets}
-                  onChange={e => setEditorTargets(e.target.value)}
-                  rows={6}
-                  className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
-                  placeholder={"RDS-01 # 192.168.1.10\nRDS-02\nRDS-03 # Backup server"}
-                />
-              </div>
-            </div>
-            <div className="mt-6 flex justify-end gap-2">
-              <button
-                onClick={() => setShowEditor(false)}
-                className="rounded-lg border border-border px-4 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleSave}
-                disabled={isSaving}
-                className="rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
-              >
-                {isSaving ? 'Saving\u2026' : 'Save'}
-              </button>
-            </div>
+      <Modal
+        isOpen={showEditor}
+        onClose={() => setShowEditor(false)}
+        title={editingList ? 'Edit Target List' : 'New Target List'}
+        size="md"
+        footer={(
+          <div className="flex justify-end gap-2">
+            <button
+              onClick={() => setShowEditor(false)}
+              className="rounded-lg border border-border px-4 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={isSaving}
+              className="rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
+            >
+              {isSaving ? 'Saving\u2026' : 'Save'}
+            </button>
+          </div>
+        )}
+      >
+        <div className="space-y-4">
+          <div>
+            <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+              Name
+            </label>
+            <input
+              type="text"
+              value={editorName}
+              onChange={e => setEditorName(e.target.value)}
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              placeholder="e.g. RDS Farm A"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+              Description (optional)
+            </label>
+            <input
+              type="text"
+              value={editorDescription}
+              onChange={e => setEditorDescription(e.target.value)}
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              placeholder="e.g. Production RDS servers"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+              Targets &mdash; one per line (add notes after #)
+            </label>
+            <textarea
+              value={editorTargets}
+              onChange={e => setEditorTargets(e.target.value)}
+              rows={6}
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              placeholder={"RDS-01 # 192.168.1.10\nRDS-02\nRDS-03 # Backup server"}
+            />
          </div>
        </div>
-      )}
+      </Modal>

      {deleteTarget && (
        <ConfirmDialog
--- a/frontend/src/pages/account/TeamCategoriesPage.tsx
+++ b/frontend/src/pages/account/TeamCategoriesPage.tsx
@@ -3,6 +3,7 @@ import { Plus, Trash2, Pencil, FolderTree } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 import { Modal } from '@/components/common/Modal'
+import { PageHeader } from '@/components/common/PageHeader'
 import api from '@/api/client'

 interface TeamCategory {
@@ -80,17 +81,17 @@ export function TeamCategoriesPage() {
  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20')

  return (
-    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
-      <div className="mb-6 flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold font-heading text-foreground">Team Categories</h1>
-          <p className="mt-1 text-sm text-muted-foreground">Manage tree categories for your team</p>
-        </div>
-        <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
-          <Plus className="h-4 w-4" />
-          Create Category
-        </button>
-      </div>
+    <div className="space-y-6">
+      <PageHeader
+        title="Team Categories"
+        description="Manage tree categories for your team"
+        action={(
+          <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
+            <Plus className="h-4 w-4" />
+            Create Category
+          </button>
+        )}
+      />

      {loading ? (
        <div className="space-y-3">
--- a/frontend/src/pages/admin/UserDetailPage.tsx
+++ b/frontend/src/pages/admin/UserDetailPage.tsx
@@ -3,6 +3,8 @@ import { useParams, useNavigate } from 'react-router-dom'
 import { ArrowLeft, Shield, Crown, UserCheck, UserX, Clock, Ticket, KeyRound, Copy, Check, Archive, ArchiveRestore, Trash2 } from 'lucide-react'
 import { StatusBadge } from '@/components/admin'
 import { Modal } from '@/components/common/Modal'
+import { Spinner } from '@/components/common/Spinner'
+import { EmptyState } from '@/components/common/EmptyState'
 import { adminApi } from '@/api/admin'
 import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
@@ -177,14 +179,25 @@ export function UserDetailPage() {
  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
-        <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-foreground" />
+        <Spinner className="border-t-foreground" />
      </div>
    )
  }

  if (!user) {
    return (
-      <div className="py-20 text-center text-muted-foreground">User not found</div>
+      <EmptyState
+        title="User not found"
+        description="This user may have been removed or is unavailable."
+        action={(
+          <button
+            onClick={() => navigate('/admin/users')}
+            className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            Back to Users
+          </button>
+        )}
+      />
    )
  }

@@ -202,7 +215,7 @@ export function UserDetailPage() {
          <ArrowLeft className="h-4 w-4" />
        </button>
        <div className="flex-1">
-          <h1 className="text-xl font-semibold text-foreground">
+          <h1 className="text-xl font-heading font-semibold text-foreground">
            {user.full_name || user.email}
          </h1>
          <p className="text-sm text-muted-foreground">{user.email}</p>
--- a/frontend/src/store/aiFlowBuilderStore.ts
+++ b/frontend/src/store/aiFlowBuilderStore.ts
@@ -29,6 +29,8 @@ interface AIFlowBuilderState {

  // UI state
  isLoading: boolean
+  isGeneratingAll: boolean
+  stopGeneratingAll: boolean
  error: string | null

  // Actions
@@ -39,6 +41,8 @@ interface AIFlowBuilderState {
  selectBranches: (branches: AIBranch[]) => void
  generateBranchDetail: (branchName: string) => Promise<void>
  assemble: () => Promise<void>
+  generateAllBranchDetails: () => Promise<void>
+  cancelGenerateAll: () => void
  reset: () => void
  setPhase: (phase: AIWizardPhase) => void
  setError: (error: string | null) => void
@@ -62,6 +66,8 @@ export const useAIFlowBuilderStore = create<AIFlowBuilderState>()((set, get) =>
  assembledTree: null,
  quota: null,
  isLoading: false,
+  isGeneratingAll: false,
+  stopGeneratingAll: false,
  error: null,

  loadQuota: async () => {
@@ -175,6 +181,30 @@ export const useAIFlowBuilderStore = create<AIFlowBuilderState>()((set, get) =>
    }
  },

+  generateAllBranchDetails: async () => {
+    const { selectedBranches, generateBranchDetail } = get()
+    const undetailed = selectedBranches.filter((b) => !b.steps)
+    if (undetailed.length === 0) return
+
+    set({ isGeneratingAll: true, stopGeneratingAll: false, error: null })
+
+    for (const branch of undetailed) {
+      if (get().stopGeneratingAll) break
+      // Set currentBranchIndex so tabs show the active branch
+      const idx = get().selectedBranches.findIndex((b) => b.name === branch.name)
+      if (idx !== -1) set({ currentBranchIndex: idx })
+      await generateBranchDetail(branch.name)
+      // If generateBranchDetail set phase to 'error', stop
+      if (get().phase === 'error') break
+    }
+
+    set({ isGeneratingAll: false })
+  },
+
+  cancelGenerateAll: () => {
+    set({ stopGeneratingAll: true })
+  },
+
  reset: () => {
    set({
      phase: 'foundation',
@@ -185,6 +215,8 @@ export const useAIFlowBuilderStore = create<AIFlowBuilderState>()((set, get) =>
      currentBranchIndex: 0,
      assembledTree: null,
      isLoading: false,
+      isGeneratingAll: false,
+      stopGeneratingAll: false,
      error: null,
    })
  },
--- a/frontend/src/types/tree.ts
+++ b/frontend/src/types/tree.ts
@@ -164,6 +164,7 @@ export interface TreeListItem {
  category_info: CategoryInfo | null
  tags: string[]
  author_id: string | null
+  author_name: string | null
  account_id: string | null
  is_active: boolean
  is_public: boolean
@@ -173,6 +174,7 @@ export interface TreeListItem {
  usage_count: number
  created_at: string
  updated_at: string
+  visibility: 'private' | 'team' | 'link' | 'public'
 }

 export interface TreeCreate {
@@ -215,6 +217,7 @@ export interface TreeFilters {
  is_active?: boolean
  author_id?: string
  is_public?: boolean
+  visibility?: 'private' | 'team' | 'link' | 'public'
  sort_by?: 'usage_count' | 'updated_at' | 'created_at' | 'name' | 'name_desc' | 'version'
  skip?: number
  limit?: number
--- a/frontend/src/types/user.ts
+++ b/frontend/src/types/user.ts
@@ -8,8 +8,8 @@ export interface User {
  is_super_admin: boolean
  is_active: boolean
  must_change_password: boolean
-  account_id: string
-  account_role: 'owner' | 'engineer' | 'viewer'
+  account_id: string | null
+  account_role: 'owner' | 'engineer' | 'viewer' | null
  created_at: string
  last_login: string | null
 }