feat: implement RBAC permissions system

Add role-based access control with hierarchy: super_admin > team_admin >
engineer > viewer. Adds is_super_admin boolean to User model (migration 010),
centralized backend permissions module, frontend usePermissions hook, and
UI enforcement (conditional Create/Edit buttons, editor redirect for viewers,
role badge in header). All endpoint admin checks updated from role=="admin"
to is_super_admin.

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

frontend/src/components/layout/AppLayout.tsx

@@ -1,5 +1,6 @@
 import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom'
 import { useAuthStore } from '@/store/authStore'
+import { usePermissions } from '@/hooks/usePermissions'
 import { ThemeToggle } from '@/components/common/ThemeToggle'
 import { BrandLogo } from '@/components/common/BrandLogo'
 import { BrandWordmark } from '@/components/common/BrandWordmark'
@@ -9,6 +10,7 @@ export function AppLayout() {
   const location = useLocation()
   const navigate = useNavigate()
   const { user, logout } = useAuthStore()
+  const { effectiveRole } = usePermissions()
 
   const handleLogout = async () => {
     await logout()
@@ -53,6 +55,20 @@ export function AppLayout() {
             <span className="hidden text-sm text-muted-foreground sm:block">
               {user?.name || user?.email}
             </span>
+            {effectiveRole && effectiveRole !== 'engineer' && (
+              <span
+                className={cn(
+                  'hidden rounded-full px-2 py-0.5 text-xs font-medium sm:inline-block',
+                  effectiveRole === 'super_admin' && 'bg-red-500/10 text-red-600 dark:text-red-400',
+                  effectiveRole === 'team_admin' && 'bg-blue-500/10 text-blue-600 dark:text-blue-400',
+                  effectiveRole === 'viewer' && 'bg-gray-500/10 text-gray-600 dark:text-gray-400'
+                )}
+              >
+                {effectiveRole === 'super_admin' ? 'Super Admin' :
+                 effectiveRole === 'team_admin' ? 'Team Admin' :
+                 'Viewer'}
+              </span>
+            )}
             <ThemeToggle />
             <button
               onClick={handleLogout}

frontend/src/hooks/usePermissions.ts

@@ -0,0 +1,75 @@
+/**
+ * Centralized permissions hook for ResolutionFlow.
+ *
+ * Role hierarchy: super_admin > team_admin > engineer > viewer
+ *
+ * Mirrors backend logic in backend/app/core/permissions.py
+ */
+import { useAuthStore } from '@/store/authStore'
+import type { User } from '@/types'
+
+export type EffectiveRole = 'super_admin' | 'team_admin' | 'engineer' | 'viewer'
+
+const ROLE_HIERARCHY: Record<EffectiveRole, number> = {
+  super_admin: 4,
+  team_admin: 3,
+  engineer: 2,
+  viewer: 1,
+}
+
+function getEffectiveRole(user: User | null): EffectiveRole {
+  if (!user) return 'viewer'
+  if (user.is_super_admin) return 'super_admin'
+  if (user.is_team_admin && user.team_id) return 'team_admin'
+  return user.role as EffectiveRole
+}
+
+function hasMinimumRole(user: User | null, minimum: EffectiveRole): boolean {
+  const effective = getEffectiveRole(user)
+  return ROLE_HIERARCHY[effective] >= ROLE_HIERARCHY[minimum]
+}
+
+export function usePermissions() {
+  const { user } = useAuthStore()
+
+  const effectiveRole = getEffectiveRole(user)
+
+  return {
+    effectiveRole,
+    isSuperAdmin: effectiveRole === 'super_admin',
+    isTeamAdmin: effectiveRole === 'team_admin' || effectiveRole === 'super_admin',
+    isEngineer: hasMinimumRole(user, 'engineer'),
+    isViewer: effectiveRole === 'viewer',
+
+    // Content creation permissions
+    canCreateTrees: hasMinimumRole(user, 'engineer'),
+    canCreateSteps: hasMinimumRole(user, 'engineer'),
+
+    // Resource-specific checks
+    canEditTree: (tree: { author_id: string | null; team_id?: string | null }) => {
+      if (!user) return false
+      if (user.is_super_admin) return true
+      if (!hasMinimumRole(user, 'engineer')) return false
+      if (tree.author_id && tree.author_id === user.id) return true
+      if (user.is_team_admin && tree.team_id === user.team_id && user.team_id) return true
+      return false
+    },
+
+    canDeleteTree: (_tree: { author_id: string | null }) => {
+      if (!user) return false
+      return user.is_super_admin
+    },
+
+    canEditStep: (step: { created_by: string }) => {
+      if (!user) return false
+      if (user.is_super_admin) return true
+      if (!hasMinimumRole(user, 'engineer')) return false
+      return step.created_by === user.id
+    },
+
+    // Management permissions
+    canManageCategories: hasMinimumRole(user, 'team_admin'),
+    canManageGlobalCategories: effectiveRole === 'super_admin',
+    canManageTeam: effectiveRole === 'super_admin' || (effectiveRole === 'team_admin'),
+  }
+}

frontend/src/pages/TreeEditorPage.tsx

@@ -8,12 +8,14 @@ import { useTreeEditorStore, useTreeEditorTemporal } from '@/store/treeEditorSto
 import { TreeEditorLayout } from '@/components/tree-editor/TreeEditorLayout'
 import { ValidationSummary } from '@/components/tree-editor/ValidationSummary'
 import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
+import { usePermissions } from '@/hooks/usePermissions'
 import { cn } from '@/lib/utils'
 
 export function TreeEditorPage() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
   const isEditMode = !!id
+  const { canCreateTrees } = usePermissions()
 
   const {
     name,
@@ -75,8 +77,17 @@ export function TreeEditorPage() {
     }
   ])
 
+  // Permission guard: redirect viewers away from editor
+  useEffect(() => {
+    if (!canCreateTrees) {
+      navigate('/trees')
+    }
+  }, [canCreateTrees, navigate])
+
   // Initialize or load tree
   useEffect(() => {
+    if (!canCreateTrees) return
+
     const initialize = async () => {
       if (isEditMode) {
         setLoading(true)
@@ -102,7 +113,7 @@ export function TreeEditorPage() {
     return () => {
       reset()
     }
-  }, [id, isEditMode])
+  }, [id, isEditMode, canCreateTrees])
 
   // Handle unsaved changes warning
   useEffect(() => {

frontend/src/pages/TreeLibraryPage.tsx

@@ -8,8 +8,10 @@ import { FolderSidebar } from '@/components/library/FolderSidebar'
 import { FolderEditModal } from '@/components/library/FolderEditModal'
 import { AddToFolderMenu } from '@/components/library/AddToFolderMenu'
 import { cn } from '@/lib/utils'
+import { usePermissions } from '@/hooks/usePermissions'
 
 export function TreeLibraryPage() {
+  const { canCreateTrees, canEditTree } = usePermissions()
   const navigate = useNavigate()
   const [trees, setTrees] = useState<TreeListItem[]>([])
   const [categories, setCategories] = useState<CategoryListItem[]>([])
@@ -143,16 +145,18 @@ export function TreeLibraryPage() {
                 Select a troubleshooting tree to start a new session
               </p>
             </div>
-            <Link
-              to="/trees/new"
-              className={cn(
-                'flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
-                'hover:bg-primary/90'
-              )}
-            >
-              <Plus className="h-4 w-4" />
-              Create Tree
-            </Link>
+            {canCreateTrees && (
+              <Link
+                to="/trees/new"
+                className={cn(
+                  'flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
+                  'hover:bg-primary/90'
+                )}
+              >
+                <Plus className="h-4 w-4" />
+                Create Tree
+              </Link>
+            )}
           </div>
 
           {/* Search and Filter */}
@@ -306,16 +310,18 @@ export function TreeLibraryPage() {
                     </span>
                     <div className="flex items-center gap-2">
                       <AddToFolderMenu treeId={tree.id} onFolderCreated={handleCreateFolder} />
-                      <Link
-                        to={`/trees/${tree.id}/edit`}
-                        className={cn(
-                          'rounded-md border border-input p-1.5 text-muted-foreground',
-                          'hover:bg-accent hover:text-accent-foreground'
-                        )}
-                        title="Edit tree"
-                      >
-                        <Pencil className="h-4 w-4" />
-                      </Link>
+                      {canEditTree({ author_id: tree.author_id, team_id: tree.team_id }) && (
+                        <Link
+                          to={`/trees/${tree.id}/edit`}
+                          className={cn(
+                            'rounded-md border border-input p-1.5 text-muted-foreground',
+                            'hover:bg-accent hover:text-accent-foreground'
+                          )}
+                          title="Edit tree"
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Link>
+                      )}
                       <button
                         type="button"
                         onClick={() => handleStartSession(tree.id)}

frontend/src/types/tree.ts

@@ -86,6 +86,7 @@ export interface TreeListItem {
   category_info: CategoryInfo | null
   tags: string[]
   author_id: string | null
+  team_id: string | null
   is_active: boolean
   is_public: boolean
   is_default: boolean

frontend/src/types/user.ts

@@ -1,10 +1,11 @@
-export type UserRole = 'admin' | 'engineer' | 'viewer'
+export type UserRole = 'engineer' | 'viewer'
 
 export interface User {
   id: string
   email: string
   name: string
   role: UserRole
+  is_super_admin: boolean
   is_team_admin: boolean
   team_id: string | null
   created_at: string