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