feat: add backup recovery, setup wizard and user-view guards

frontend/app/ui/FeatureGate.tsx

@@ -4,6 +4,8 @@ import { usePathname } from "next/navigation";
 import { useEffect, useState, type ReactNode } from "react";
 import { authFetch, getApiBase, getToken } from "../lib/auth";
 import { canAccess, featureForPath, type FeatureAccess } from "../lib/features";
+import { useEffectiveRole } from "../lib/viewMode";
+import { isAdminPage } from "../lib/user-view-policy";
 
 export function useFeatureUser() {
   const pathname = usePathname();
@@ -11,6 +13,7 @@ export function useFeatureUser() {
     path: string;
     user: { role?: string; features?: FeatureAccess; invite_management_enabled?: boolean } | null;
   }>({ path: "", user: null });
+  const role = useEffectiveRole(state.user?.role);
   useEffect(() => {
     let active = true;
     const load = async () => {
@@ -33,13 +36,26 @@ export function useFeatureUser() {
       window.removeEventListener("focus", load);
     };
   }, [pathname]);
-  return { user: state.user, ready: state.path === pathname };
+  return { user: state.user ? { ...state.user, role: role ?? undefined } : null, ready: state.path === pathname };
 }
 
 export default function FeatureGate({ children }: { children: ReactNode }) {
   const pathname = usePathname();
   const { user, ready } = useFeatureUser();
   const feature = featureForPath(pathname);
+  if (isAdminPage(pathname, false)) {
+    if (!ready) return <main className="card">Checking administrator access...</main>;
+    if (user?.role !== "admin") {
+      return (
+        <main className="card">
+          <h1>Administrator access required</h1>
+          <p>Sign in with an administrator account to use configuration and administration tools.</p>
+          <a href="/login">Sign in</a>
+        </main>
+      );
+    }
+    return children;
+  }
   if (!feature) return children;
   if (!ready) return <main className="card">Loading account access...</main>;
   if (!getToken()) return children;