feat(cloud): enforce host governance budgets

cloud-console/src/App.vue

@@ -7,6 +7,7 @@ import {
   LogOut,
   MonitorSmartphone,
   Puzzle,
+  UsersRound,
 } from "@lucide/vue";
 import {
   AUTH_INVALID_EVENT,
@@ -19,8 +20,9 @@ import PasswordChangeScreen from "./views/PasswordChangeScreen.vue";
 import TasksView from "./views/TasksView.vue";
 import DevicesView from "./views/DevicesView.vue";
 import PluginsView from "./views/PluginsView.vue";
+import UsersView from "./views/UsersView.vue";
 
-type ViewId = "tasks" | "devices" | "plugins";
+type ViewId = "tasks" | "devices" | "plugins" | "users";
 
 const activeView = ref<ViewId>("tasks");
 const currentUser = ref<CloudUser | null>(null);
@@ -37,6 +39,16 @@ const canSubmitTasks = computed(
     currentUser.value?.scopes.includes("*") ||
     currentUser.value?.scopes.includes("tasks:submit"),
 );
+const canAdminUsers = computed(
+  () => Boolean(
+    currentUser.value?.scopes.includes("*") ||
+    currentUser.value?.scopes.includes("users:admin")),
+);
+const canAdminGovernance = computed(
+  () => Boolean(
+    currentUser.value?.scopes.includes("*") ||
+    currentUser.value?.scopes.includes("governance:admin")),
+);
 const isAuthenticated = computed(() => currentUser.value !== null);
 const currentUserLabel = computed(() =>
   currentUser.value ? `${currentUser.value.display_name} (${currentUser.value.role})` : "",
@@ -48,6 +60,9 @@ const navItems = computed<{ id: ViewId; label: string; icon: Component }[]>(() =
     { id: "devices", label: "Devices", icon: MonitorSmartphone },
     { id: "plugins", label: "Plugins", icon: Puzzle },
   ];
+  if (canAdminUsers.value || canAdminGovernance.value) {
+    items.push({ id: "users", label: "Users & limits", icon: UsersRound });
+  }
   return items;
 });
 
@@ -102,6 +117,8 @@ const activeComponent = computed(() => {
       return DevicesView;
     case "plugins":
       return PluginsView;
+    case "users":
+      return UsersView;
     default:
       return TasksView;
   }
@@ -133,6 +150,11 @@ const activeComponent = computed(() => {
     </nav>
     <main class="app-main">
       <PluginsView v-if="activeView === 'plugins'" :can-admin="canAdminPlugins" />
+      <UsersView
+        v-else-if="activeView === 'users'"
+        :can-admin-users="canAdminUsers"
+        :can-admin-governance="canAdminGovernance"
+      />
       <component v-else :is="activeComponent" :can-submit="canSubmitTasks" />
     </main>
   </div>