feat: add RBAC hooks and permission-gated components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/hooks/usePermissions.ts

@@ -0,0 +1,27 @@
+import { useAuthStore } from '../auth/auth-store';
+
+const ROLE_PERMISSIONS: Record<string, string[]> = {
+  OWNER: ['tenant:manage', 'billing:manage', 'team:manage', 'apps:manage', 'apps:deploy', 'secrets:manage', 'observe:read', 'observe:debug', 'settings:manage'],
+  ADMIN: ['team:manage', 'apps:manage', 'apps:deploy', 'secrets:manage', 'observe:read', 'observe:debug', 'settings:manage'],
+  DEVELOPER: ['apps:deploy', 'secrets:manage', 'observe:read', 'observe:debug'],
+  VIEWER: ['observe:read'],
+};
+
+export function usePermissions() {
+  const roles = useAuthStore((s) => s.roles);
+
+  const permissions = new Set<string>();
+  for (const role of roles) {
+    const perms = ROLE_PERMISSIONS[role];
+    if (perms) perms.forEach((p) => permissions.add(p));
+  }
+
+  return {
+    has: (permission: string) => permissions.has(permission),
+    canManageApps: permissions.has('apps:manage'),
+    canDeploy: permissions.has('apps:deploy'),
+    canManageTenant: permissions.has('tenant:manage'),
+    canViewObservability: permissions.has('observe:read'),
+    roles,
+  };
+}