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/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" />

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">

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">

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

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

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

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',

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' && (

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">

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

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">

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>