npm - @intranefr/superbackend - Versions diffs - 1.5.0 → 1.5.2 - Mend

@intranefr/superbackend 1.5.0 → 1.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/.env.example +15 -0
package/README.md +11 -0
package/analysis-only.skill +0 -0
package/index.js +23 -0
package/package.json +8 -2
package/src/admin/endpointRegistry.js +120 -0
package/src/controllers/admin.controller.js +90 -6
package/src/controllers/adminBlockDefinitions.controller.js +127 -0
package/src/controllers/adminBlockDefinitionsAi.controller.js +54 -0
package/src/controllers/adminCache.controller.js +342 -0
package/src/controllers/adminContextBlockDefinitions.controller.js +141 -0
package/src/controllers/adminCrons.controller.js +388 -0
package/src/controllers/adminDbBrowser.controller.js +124 -0
package/src/controllers/adminEjsVirtual.controller.js +13 -3
package/src/controllers/adminExperiments.controller.js +200 -0
package/src/controllers/adminHeadless.controller.js +9 -2
package/src/controllers/adminHealthChecks.controller.js +570 -0
package/src/controllers/adminI18n.controller.js +51 -29
package/src/controllers/adminLlm.controller.js +126 -2
package/src/controllers/adminPages.controller.js +720 -0
package/src/controllers/adminPagesContextBlocksAi.controller.js +54 -0
package/src/controllers/adminProxy.controller.js +113 -0
package/src/controllers/adminRateLimits.controller.js +138 -0
package/src/controllers/adminRbac.controller.js +803 -0
package/src/controllers/adminScripts.controller.js +126 -4
package/src/controllers/adminSeoConfig.controller.js +71 -48
package/src/controllers/blogAdmin.controller.js +279 -0
package/src/controllers/blogAiAdmin.controller.js +224 -0
package/src/controllers/blogAutomationAdmin.controller.js +141 -0
package/src/controllers/blogInternal.controller.js +26 -0
package/src/controllers/blogPublic.controller.js +89 -0
package/src/controllers/experiments.controller.js +85 -0
package/src/controllers/fileManager.controller.js +190 -0
package/src/controllers/fileManagerStoragePolicy.controller.js +23 -0
package/src/controllers/healthChecksPublic.controller.js +196 -0
package/src/controllers/internalExperiments.controller.js +17 -0
package/src/controllers/metrics.controller.js +64 -4
package/src/controllers/orgAdmin.controller.js +80 -0
package/src/helpers/mongooseHelper.js +258 -0
package/src/helpers/scriptBase.js +230 -0
package/src/helpers/scriptRunner.js +335 -0
package/src/middleware/rbac.js +62 -0
package/src/middleware.js +810 -48
package/src/models/BlockDefinition.js +27 -0
package/src/models/BlogAutomationLock.js +14 -0
package/src/models/BlogAutomationRun.js +39 -0
package/src/models/BlogPost.js +42 -0
package/src/models/CacheEntry.js +26 -0
package/src/models/ConsoleEntry.js +32 -0
package/src/models/ConsoleLog.js +23 -0
package/src/models/ContextBlockDefinition.js +33 -0
package/src/models/CronExecution.js +47 -0
package/src/models/CronJob.js +70 -0
package/src/models/Experiment.js +75 -0
package/src/models/ExperimentAssignment.js +23 -0
package/src/models/ExperimentEvent.js +26 -0
package/src/models/ExperimentMetricBucket.js +30 -0
package/src/models/ExternalDbConnection.js +49 -0
package/src/models/FileEntry.js +22 -0
package/src/models/GlobalSetting.js +1 -2
package/src/models/HealthAutoHealAttempt.js +57 -0
package/src/models/HealthCheck.js +132 -0
package/src/models/HealthCheckRun.js +51 -0
package/src/models/HealthIncident.js +49 -0
package/src/models/Page.js +95 -0
package/src/models/PageCollection.js +42 -0
package/src/models/ProxyEntry.js +66 -0
package/src/models/RateLimitCounter.js +19 -0
package/src/models/RateLimitMetricBucket.js +20 -0
package/src/models/RbacGrant.js +25 -0
package/src/models/RbacGroup.js +16 -0
package/src/models/RbacGroupMember.js +13 -0
package/src/models/RbacGroupRole.js +13 -0
package/src/models/RbacRole.js +25 -0
package/src/models/RbacUserRole.js +13 -0
package/src/models/ScriptDefinition.js +1 -0
package/src/models/Webhook.js +2 -0
package/src/routes/admin.routes.js +2 -0
package/src/routes/adminBlog.routes.js +21 -0
package/src/routes/adminBlogAi.routes.js +16 -0
package/src/routes/adminBlogAutomation.routes.js +27 -0
package/src/routes/adminCache.routes.js +20 -0
package/src/routes/adminConsoleManager.routes.js +302 -0
package/src/routes/adminCrons.routes.js +25 -0
package/src/routes/adminDbBrowser.routes.js +65 -0
package/src/routes/adminEjsVirtual.routes.js +2 -1
package/src/routes/adminExperiments.routes.js +29 -0
package/src/routes/adminHeadless.routes.js +2 -1
package/src/routes/adminHealthChecks.routes.js +28 -0
package/src/routes/adminI18n.routes.js +4 -3
package/src/routes/adminLlm.routes.js +4 -2
package/src/routes/adminPages.routes.js +55 -0
package/src/routes/adminProxy.routes.js +15 -0
package/src/routes/adminRateLimits.routes.js +17 -0
package/src/routes/adminRbac.routes.js +38 -0
package/src/routes/adminSeoConfig.routes.js +5 -4
package/src/routes/adminUiComponents.routes.js +2 -1
package/src/routes/blogInternal.routes.js +14 -0
package/src/routes/blogPublic.routes.js +9 -0
package/src/routes/experiments.routes.js +30 -0
package/src/routes/fileManager.routes.js +62 -0
package/src/routes/fileManagerStoragePolicy.routes.js +9 -0
package/src/routes/healthChecksPublic.routes.js +9 -0
package/src/routes/internalExperiments.routes.js +15 -0
package/src/routes/log.routes.js +43 -60
package/src/routes/metrics.routes.js +4 -2
package/src/routes/orgAdmin.routes.js +1 -0
package/src/routes/pages.routes.js +123 -0
package/src/routes/proxy.routes.js +46 -0
package/src/routes/rbac.routes.js +47 -0
package/src/routes/webhook.routes.js +2 -1
package/src/routes/workflows.routes.js +4 -0
package/src/services/blockDefinitionsAi.service.js +247 -0
package/src/services/blog.service.js +99 -0
package/src/services/blogAutomation.service.js +978 -0
package/src/services/blogCronsBootstrap.service.js +185 -0
package/src/services/blogPublishing.service.js +58 -0
package/src/services/cacheLayer.service.js +696 -0
package/src/services/consoleManager.service.js +738 -0
package/src/services/consoleOverride.service.js +7 -1
package/src/services/cronScheduler.service.js +350 -0
package/src/services/dbBrowser.service.js +536 -0
package/src/services/ejsVirtual.service.js +102 -32
package/src/services/experiments.service.js +273 -0
package/src/services/experimentsAggregation.service.js +308 -0
package/src/services/experimentsCronsBootstrap.service.js +118 -0
package/src/services/experimentsRetention.service.js +43 -0
package/src/services/experimentsWs.service.js +134 -0
package/src/services/fileManager.service.js +475 -0
package/src/services/fileManagerStoragePolicy.service.js +285 -0
package/src/services/globalSettings.service.js +15 -0
package/src/services/healthChecks.service.js +650 -0
package/src/services/healthChecksBootstrap.service.js +109 -0
package/src/services/healthChecksScheduler.service.js +106 -0
package/src/services/jsonConfigs.service.js +2 -2
package/src/services/llmDefaults.service.js +190 -0
package/src/services/migrationAssets/s3.js +2 -2
package/src/services/pages.service.js +602 -0
package/src/services/pagesContext.service.js +331 -0
package/src/services/pagesContextBlocksAi.service.js +349 -0
package/src/services/proxy.service.js +535 -0
package/src/services/rateLimiter.service.js +623 -0
package/src/services/rbac.service.js +212 -0
package/src/services/scriptsRunner.service.js +215 -15
package/src/services/uiComponentsAi.service.js +6 -19
package/src/services/workflow.service.js +23 -8
package/src/utils/orgRoles.js +14 -0
package/src/utils/rbac/engine.js +60 -0
package/src/utils/rbac/rightsRegistry.js +33 -0
package/views/admin-blog-automation.ejs +877 -0
package/views/admin-blog-edit.ejs +542 -0
package/views/admin-blog.ejs +399 -0
package/views/admin-cache.ejs +681 -0
package/views/admin-console-manager.ejs +680 -0
package/views/admin-crons.ejs +645 -0
package/views/admin-dashboard.ejs +28 -8
package/views/admin-db-browser.ejs +445 -0
package/views/admin-ejs-virtual.ejs +16 -10
package/views/admin-experiments.ejs +91 -0
package/views/admin-file-manager.ejs +942 -0
package/views/admin-health-checks.ejs +725 -0
package/views/admin-i18n.ejs +59 -5
package/views/admin-llm.ejs +99 -1
package/views/admin-organizations.ejs +163 -1
package/views/admin-pages.ejs +2424 -0
package/views/admin-proxy.ejs +491 -0
package/views/admin-rate-limiter.ejs +625 -0
package/views/admin-rbac.ejs +1331 -0
package/views/admin-scripts.ejs +597 -3
package/views/admin-seo-config.ejs +61 -7
package/views/admin-ui-components.ejs +57 -25
package/views/admin-workflows.ejs +7 -7
package/views/file-manager.ejs +866 -0
package/views/pages/blocks/contact.ejs +27 -0
package/views/pages/blocks/cta.ejs +18 -0
package/views/pages/blocks/faq.ejs +20 -0
package/views/pages/blocks/features.ejs +19 -0
package/views/pages/blocks/hero.ejs +13 -0
package/views/pages/blocks/html.ejs +5 -0
package/views/pages/blocks/image.ejs +14 -0
package/views/pages/blocks/testimonials.ejs +26 -0
package/views/pages/blocks/text.ejs +10 -0
package/views/pages/layouts/default.ejs +51 -0
package/views/pages/layouts/minimal.ejs +42 -0
package/views/pages/layouts/sidebar.ejs +54 -0
package/views/pages/partials/footer.ejs +13 -0
package/views/pages/partials/header.ejs +12 -0
package/views/pages/partials/sidebar.ejs +8 -0
package/views/pages/runtime/page.ejs +10 -0
package/views/pages/templates/article.ejs +20 -0
package/views/pages/templates/default.ejs +12 -0
package/views/pages/templates/landing.ejs +14 -0
package/views/pages/templates/listing.ejs +15 -0
package/views/partials/admin-image-upload-modal.ejs +221 -0
package/views/partials/dashboard/nav-items.ejs +12 -0
package/views/partials/dashboard/palette.ejs +5 -3
package/views/partials/llm-provider-model-picker.ejs +183 -0
package/src/routes/llmUi.routes.js +0 -26

package/views/admin-rbac.ejs ADDED Viewed

@@ -0,0 +1,1331 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Admin RBAC</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css">
+</head>
+<body class="bg-gray-50">
+  <div id="app" class="max-w-7xl mx-auto px-6 py-6" v-cloak>
+    <div class="flex items-center justify-between mb-6">
+      <div>
+        <h1 class="text-2xl font-semibold text-gray-900">RBAC</h1>
+        <div class="text-sm text-gray-500">Manage roles, groups, grants and test effective rights</div>
+      </div>
+      <div class="flex items-center gap-2">
+        <button @click="loadAll" class="px-3 py-2 rounded bg-gray-600 text-white text-sm hover:bg-gray-700">
+          <i class="ti ti-refresh mr-1"></i> Refresh
+        </button>
+      </div>
+    </div>
+    <div class="bg-white border border-gray-200 rounded-lg mb-6">
+      <div class="px-4 py-3 border-b border-gray-200 flex items-center gap-2">
+        <button
+          @click="activeTab='rights'"
+          class="px-3 py-2 rounded text-sm"
+          :class="activeTab==='rights' ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
+        >Rights</button>
+        <button
+          @click="activeTab='groups'"
+          class="px-3 py-2 rounded text-sm"
+          :class="activeTab==='groups' ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
+        >Groups</button>
+        <button
+          @click="activeTab='roles'"
+          class="px-3 py-2 rounded text-sm"
+          :class="activeTab==='roles' ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
+        >Roles</button>
+        <button
+          @click="activeTab='docs'"
+          class="px-3 py-2 rounded text-sm"
+          :class="activeTab==='docs' ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
+        >Documentation</button>
+      </div>
+    </div>
+    <div v-if="activeTab==='rights'" class="grid grid-cols-12 gap-6">
+      <div class="col-span-5 space-y-6">
+        <div class="bg-white border border-gray-200 rounded-lg">
+          <div class="p-4 border-b border-gray-200 flex items-center justify-between">
+            <div class="text-sm font-semibold text-gray-800">Test rights</div>
+          </div>
+          <div class="p-4 space-y-4">
+            <div>
+              <label class="text-xs font-semibold text-gray-600">User</label>
+              <input v-model="test.userQuery" @input="debouncedSearchUsers" class="mt-1 w-full border rounded px-3 py-2" placeholder="type email or name" />
+              <div v-if="userResults.length" class="border rounded mt-2 max-h-48 overflow-auto">
+                <button
+                  v-for="u in userResults"
+                  :key="u.id"
+                  @click="selectUser(u)"
+                  class="w-full text-left px-3 py-2 hover:bg-gray-50 text-sm"
+                >
+                  <div class="font-mono text-xs">{{ u.email }}</div>
+                  <div class="text-xs text-gray-500">{{ u.name || '-' }}</div>
+                </button>
+              </div>
+              <div v-if="test.user" class="text-xs text-gray-500 mt-2">Selected: <span class="font-mono">{{ test.user.email }}</span></div>
+            </div>
+            <div v-if="test.user && orgs.length > 1">
+              <label class="text-xs font-semibold text-gray-600">Organization</label>
+              <select v-model="test.orgId" class="mt-1 w-full border rounded px-3 py-2">
+                <option value="" disabled>Select an org</option>
+                <option v-for="o in orgs" :key="o.id" :value="o.id">{{ o.name }} ({{ o.slug }})</option>
+              </select>
+            </div>
+            <div v-else-if="test.user && orgs.length === 1" class="text-xs text-gray-500">
+              Org: <span class="font-mono">{{ orgs[0].name }}</span>
+            </div>
+            <div>
+              <label class="text-xs font-semibold text-gray-600">Right</label>
+              <input
+                v-model="test.right"
+                @input="filterTestRights"
+                @focus="filterTestRights"
+                class="mt-1 w-full border rounded px-3 py-2 font-mono"
+                placeholder="e.g. backoffice:dashboard:access"
+              />
+              <div v-if="testRightResults.length" class="border rounded mt-2 max-h-48 overflow-auto">
+                <button
+                  v-for="r in testRightResults"
+                  :key="r"
+                  @click="selectTestRight(r)"
+                  class="w-full text-left px-3 py-2 hover:bg-gray-50 text-xs font-mono"
+                >
+                  {{ r }}
+                </button>
+              </div>
+            </div>
+            <div class="flex items-center gap-2">
+              <button @click="runTest" class="px-3 py-2 rounded bg-blue-600 text-white text-sm hover:bg-blue-700">
+                <i class="ti ti-check mr-1"></i> Test
+              </button>
+              <div v-if="testStatus" class="text-sm text-gray-600">{{ testStatus }}</div>
+            </div>
+            <div v-if="testResult" class="border rounded p-3 bg-gray-50 text-xs">
+              <div class="font-semibold" :class="testResult.allowed ? 'text-green-700' : 'text-red-700'">
+                {{ testResult.allowed ? 'ALLOWED' : 'DENIED' }}
+              </div>
+              <div class="text-gray-600 mt-1">Reason: <span class="font-mono">{{ testResult.reason }}</span></div>
+              <div v-if="testResult.decisionLayer" class="text-gray-600 mt-1">Decision layer: <span class="font-mono">{{ testResult.decisionLayer }}</span></div>
+              <div v-if="testResult.context" class="mt-3">
+                <div class="font-semibold text-gray-700 mb-1">Context</div>
+                <div class="bg-white border rounded p-2 space-y-1">
+                  <div class="text-gray-600">Groups: <span class="font-mono">{{ (testResult.context.groups || []).map(g => g.id).join(', ') || '-' }}</span></div>
+                  <div class="text-gray-600">Roles: <span class="font-mono">{{ (testResult.context.roles || []).map(r => r.roleId + (r.source==='group' ? '@' + r.groupId : '')).join(', ') || '-' }}</span></div>
+                </div>
+              </div>
+              <div v-if="testResult.explain && testResult.explain.length" class="mt-3">
+                <div class="font-semibold text-gray-700 mb-1">Matched grants</div>
+                <div class="space-y-1">
+                  <div v-for="e in testResult.explain" :key="e.id" class="bg-white border rounded p-2">
+                    <div class="font-mono">{{ e.effect }} {{ e.right }}</div>
+                    <div class="text-gray-500">{{ e.source }} | {{ e.scopeType }} {{ e.scopeId || '' }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-white border border-gray-200 rounded-lg">
+          <div class="p-4 border-b border-gray-200 flex items-center justify-between">
+            <div class="text-sm font-semibold text-gray-800">Create grant</div>
+          </div>
+          <div class="p-4 space-y-4">
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="text-xs font-semibold text-gray-600">Subject type</label>
+                <select v-model="grant.subjectType" @change="onGrantSubjectTypeChange" class="mt-1 w-full border rounded px-3 py-2">
+                  <option value="user">user</option>
+                  <option value="role">role</option>
+                  <option value="group">group</option>
+                  <option value="org">org</option>
+                </select>
+              </div>
+              <div>
+                <label class="text-xs font-semibold text-gray-600">Effect</label>
+                <select v-model="grant.effect" class="mt-1 w-full border rounded px-3 py-2">
+                  <option value="allow">allow</option>
+                  <option value="deny">deny</option>
+                </select>
+              </div>
+            </div>
+            <div>
+              <label class="text-xs font-semibold text-gray-600">Subject ID</label>
+              <div v-if="grant.subjectType === 'user'">
+                <input
+                  v-model="grant.userQuery"
+                  @input="debouncedSearchGrantUsers"
+                  class="mt-1 w-full border rounded px-3 py-2"
+                  placeholder="type email or name"
+                />
+                <div v-if="grantUserResults.length" class="border rounded mt-2 max-h-48 overflow-auto">
+                  <button
+                    v-for="u in grantUserResults"
+                    :key="u.id"
+                    @click="selectGrantUser(u)"
+                    class="w-full text-left px-3 py-2 hover:bg-gray-50 text-sm"
+                  >
+                    <div class="font-mono text-xs">{{ u.email }}</div>
+                    <div class="text-xs text-gray-500">{{ u.name || '-' }}</div>
+                  </button>
+                </div>
+                <div v-if="grant.subjectId" class="text-xs text-gray-500 mt-2">Selected: <span class="font-mono">{{ grant.subjectId }}</span></div>
+              </div>
+              <div v-else-if="grant.subjectType === 'role'">
+                <select v-model="grant.subjectId" class="mt-1 w-full border rounded px-3 py-2">
+                  <option value="">Select role</option>
+                  <option v-for="r in roles" :key="r.id" :value="r.id">{{ r.key }} ({{ r.isGlobal ? 'global' : 'org' }})</option>
+                </select>
+              </div>
+              <div v-else-if="grant.subjectType === 'group'">
+                <select v-model="grant.subjectId" class="mt-1 w-full border rounded px-3 py-2">
+                  <option value="">Select group</option>
+                  <option v-for="g in groups" :key="g.id" :value="g.id">{{ g.name }} ({{ g.isGlobal ? 'global' : 'org' }})</option>
+                </select>
+              </div>
+              <div v-else-if="grant.subjectType === 'org'">
+                <select v-model="grant.subjectId" class="mt-1 w-full border rounded px-3 py-2">
+                  <option value="">Select org</option>
+                  <option v-for="o in organizations" :key="o._id" :value="o._id">{{ o.name }} ({{ o.slug }})</option>
+                </select>
+              </div>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="text-xs font-semibold text-gray-600">Scope</label>
+                <select v-model="grant.scopeType" @change="onGrantScopeTypeChange" class="mt-1 w-full border rounded px-3 py-2">
+                  <option value="global">global</option>
+                  <option value="org">org</option>
+                </select>
+              </div>
+              <div>
+                <label class="text-xs font-semibold text-gray-600">Scope orgId</label>
+                <select v-model="grant.scopeId" :disabled="grant.scopeType !== 'org'" class="mt-1 w-full border rounded px-3 py-2">
+                  <option value="">Select org</option>
+                  <option v-for="o in organizations" :key="o._id" :value="o._id">{{ o.name }} ({{ o.slug }})</option>
+                </select>
+              </div>
+            </div>
+            <div>
+              <label class="text-xs font-semibold text-gray-600">Right</label>
+              <input
+                v-model="grant.right"
+                @input="filterGrantRights"
+                @focus="filterGrantRights"
+                class="mt-1 w-full border rounded px-3 py-2 font-mono"
+              />
+              <div v-if="grantRightResults.length" class="border rounded mt-2 max-h-48 overflow-auto">
+                <button
+                  v-for="r in grantRightResults"
+                  :key="r"
+                  @click="selectGrantRight(r)"
+                  class="w-full text-left px-3 py-2 hover:bg-gray-50 text-xs font-mono"
+                >
+                  {{ r }}
+                </button>
+              </div>
+            </div>
+            <div class="flex items-center gap-2">
+              <button @click="createGrant" class="px-3 py-2 rounded bg-green-600 text-white text-sm hover:bg-green-700">
+                <i class="ti ti-plus mr-1"></i> Create
+              </button>
+              <div v-if="grantStatus" class="text-sm text-gray-600">{{ grantStatus }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-white border border-gray-200 rounded-lg">
+          <div class="p-4 border-b border-gray-200">
+            <div class="text-sm font-semibold text-gray-800">Group members</div>
+          </div>
+          <div class="p-4 space-y-4">
+            <div>
+              <label class="text-xs font-semibold text-gray-600">Group</label>
+              <select v-model="selectedGroupId" @change="onSelectedGroupChange" class="mt-1 w-full border rounded px-3 py-2">
+                <option value="">Select group</option>
+                <option v-for="g in groups" :key="g.id" :value="g.id">{{ g.name }} ({{ g.isGlobal ? 'global' : 'org' }})</option>
+              </select>
+              <div v-if="selectedGroup && !selectedGroup.isGlobal" class="text-xs text-gray-500 mt-2">
+                Org-scoped group: user search is limited to members of <span class="font-mono">{{ selectedGroup.orgId }}</span>
+              </div>
+            </div>
+            <div>
+              <label class="text-xs font-semibold text-gray-600">Add users (search)</label>
+              <input
+                v-model="memberAdd.userQuery"
+                @input="debouncedSearchMemberUsers"
+                class="mt-1 w-full border rounded px-3 py-2"
+                :disabled="!selectedGroupId"
+                placeholder="type email or name"
+              />
+              <div v-if="memberAdd.userResults.length" class="border rounded mt-2 max-h-48 overflow-auto">
+                <button
+                  v-for="u in memberAdd.userResults"
+                  :key="u.id"
+                  @click="addMemberCandidate(u)"
+                  class="w-full text-left px-3 py-2 hover:bg-gray-50 text-sm"
+                >
+                  <div class="font-mono text-xs">{{ u.email }}</div>
+                  <div class="text-xs text-gray-500">{{ u.name || '-' }}</div>
+                </button>
+              </div>
+            </div>
+            <div v-if="memberAdd.selectedUsers.length" class="border rounded p-3 bg-gray-50">
+              <div class="text-xs font-semibold text-gray-700 mb-2">Selected users to add ({{ memberAdd.selectedUsers.length }})</div>
+              <div class="space-y-1 max-h-40 overflow-auto">
+                <div v-for="u in memberAdd.selectedUsers" :key="u.id" class="flex items-center justify-between bg-white border rounded px-2 py-1">
+                  <div>
+                    <div class="font-mono text-xs">{{ u.email }}</div>
+                    <div class="text-xs text-gray-500">{{ u.id }}</div>
+                  </div>
+                  <button @click="removeMemberCandidate(u.id)" class="text-xs text-red-600 hover:underline">Remove</button>
+                </div>
+              </div>
+              <div class="flex items-center gap-2 mt-3">
+                <button
+                  @click="bulkAddMembers"
+                  :disabled="!selectedGroupId || memberAdd.selectedUsers.length === 0"
+                  class="px-3 py-2 rounded bg-blue-600 text-white text-sm hover:bg-blue-700 disabled:opacity-50"
+                >
+                  Add to group
+                </button>
+                <div v-if="memberAdd.status" class="text-sm text-gray-600">{{ memberAdd.status }}</div>
+              </div>
+            </div>
+            <div class="border-t pt-4">
+              <div class="flex items-center justify-between mb-2">
+                <div class="text-xs font-semibold text-gray-700">Current members</div>
+                <button @click="loadSelectedGroupMembers" :disabled="!selectedGroupId" class="text-xs text-gray-700 hover:underline">Reload</button>
+              </div>
+              <div v-if="selectedGroupMembers.length" class="space-y-2">
+                <div class="flex items-center justify-between">
+                  <label class="text-xs text-gray-600">
+                    <input type="checkbox" v-model="memberRemove.selectAll" @change="toggleSelectAllMembers" class="mr-2" />
+                    Select all
+                  </label>
+                  <button
+                    @click="bulkRemoveMembers"
+                    :disabled="memberRemove.selectedMemberIds.length === 0"
+                    class="text-xs text-red-600 hover:underline disabled:opacity-50"
+                  >
+                    Remove selected ({{ memberRemove.selectedMemberIds.length }})
+                  </button>
+                </div>
+                <div v-for="m in selectedGroupMembers" :key="m.id" class="border rounded p-3">
+                  <div class="flex items-center justify-between">
+                    <label class="flex items-center gap-2">
+                      <input type="checkbox" :value="m.id" v-model="memberRemove.selectedMemberIds" @change="syncSelectAllMembers" />
+                      <div>
+                        <div class="font-mono text-xs">{{ m.email || '-' }}</div>
+                        <div class="text-xs text-gray-500">{{ m.userId }}</div>
+                      </div>
+                    </label>
+                    <button @click="removeSingleMember(m.id)" class="text-xs text-red-600 hover:underline">Remove</button>
+                  </div>
+                </div>
+                <div v-if="memberRemove.status" class="text-sm text-gray-600">{{ memberRemove.status }}</div>
+              </div>
+              <div v-else class="text-sm text-gray-500">No members.</div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-white border border-gray-200 rounded-lg">
+          <div class="p-4 border-b border-gray-200 flex items-center justify-between">
+            <div class="text-sm font-semibold text-gray-800">Grants</div>
+            <button @click="loadGrants" class="px-3 py-2 rounded bg-gray-600 text-white text-sm hover:bg-gray-700">Reload</button>
+          </div>
+          <div class="p-4">
+            <div v-if="grants.length" class="space-y-2">
+              <div v-for="g in grants" :key="g.id" class="border rounded p-3">
+                <div class="flex items-center justify-between">
+                  <div class="font-mono text-xs">{{ g.effect }} {{ g.right }}</div>
+                  <button @click="deleteGrant(g.id)" class="text-xs text-red-600 hover:underline">Delete</button>
+                </div>
+                <div class="text-xs text-gray-500 mt-1">
+                  subject: {{ g.subjectType }} {{ g.subjectId }} | scope: {{ g.scopeType }} {{ g.scopeId || '' }}
+                </div>
+              </div>
+            </div>
+            <div v-else class="text-sm text-gray-500">No grants yet.</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="activeTab==='groups'" class="grid grid-cols-12 gap-6">
+      <div class="col-span-5 space-y-6">
+        <div class="bg-white border border-gray-200 rounded-lg">
+          <div class="p-4 border-b border-gray-200">
+            <div class="text-sm font-semibold text-gray-800">Create group</div>
+          </div>
+          <div class="p-4 space-y-4">
+            <div>
+              <label class="text-xs font-semibold text-gray-600">Name</label>
+              <input v-model="groupForm.name" class="mt-1 w-full border rounded px-3 py-2" />
+            </div>
+            <div>
+              <label class="text-xs font-semibold text-gray-600">Description</label>
+              <input v-model="groupForm.description" class="mt-1 w-full border rounded px-3 py-2" />
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="text-xs font-semibold text-gray-600">Scope</label>
+                <select v-model="groupForm.isGlobal" class="mt-1 w-full border rounded px-3 py-2">
+                  <option :value="true">global</option>
+                  <option :value="false">org</option>
+                </select>
+              </div>
+              <div>
+                <label class="text-xs font-semibold text-gray-600">Org</label>
+                <select v-model="groupForm.orgId" :disabled="groupForm.isGlobal" class="mt-1 w-full border rounded px-3 py-2">
+                  <option value="">Select org</option>
+                  <option v-for="o in organizations" :key="o._id" :value="o._id">{{ o.name }} ({{ o.slug }})</option>
+                </select>
+              </div>
+            </div>
+            <div class="flex items-center gap-2">
+              <button @click="createGroup" class="px-3 py-2 rounded bg-green-600 text-white text-sm hover:bg-green-700">
+                <i class="ti ti-plus mr-1"></i> Create
+              </button>
+              <div v-if="groupStatus" class="text-sm text-gray-600">{{ groupStatus }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-white border border-gray-200 rounded-lg">
+          <div class="p-4 border-b border-gray-200">
+            <div class="text-sm font-semibold text-gray-800">Group roles</div>
+          </div>
+          <div class="p-4 space-y-4">
+            <div>
+              <label class="text-xs font-semibold text-gray-600">Group</label>
+              <select v-model="selectedGroupId" @change="onSelectedGroupChange" class="mt-1 w-full border rounded px-3 py-2">
+                <option value="">Select group</option>
+                <option v-for="g in groups" :key="g.id" :value="g.id">{{ g.name }} ({{ g.isGlobal ? 'global' : 'org' }})</option>
+              </select>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="text-xs font-semibold text-gray-600">Role</label>
+                <select v-model="groupRoleForm.roleId" class="mt-1 w-full border rounded px-3 py-2">
+                  <option value="">Select role</option>
+                  <option v-for="r in roles" :key="r.id" :value="r.id">{{ r.key }} ({{ r.isGlobal ? 'global' : 'org' }})</option>
+                </select>
+              </div>
+              <div class="flex items-end">
+                <button @click="addRoleToGroup" :disabled="!selectedGroupId || !groupRoleForm.roleId" class="w-full px-3 py-2 rounded bg-blue-600 text-white text-sm hover:bg-blue-700 disabled:opacity-50">
+                  Assign
+                </button>
+              </div>
+            </div>
+            <div v-if="selectedGroupRoles.length" class="space-y-2">
+              <div v-for="gr in selectedGroupRoles" :key="gr.id" class="border rounded p-3">
+                <div class="flex items-center justify-between">
+                  <div class="font-mono text-xs">{{ gr.key }} ({{ gr.isGlobal ? 'global' : 'org' }})</div>
+                  <button @click="removeRoleFromGroup(gr.id)" class="text-xs text-red-600 hover:underline">Remove</button>
+                </div>
+                <div class="text-xs text-gray-500 mt-1">roleId: {{ gr.roleId }}</div>
+              </div>
+            </div>
+            <div v-else class="text-sm text-gray-500">No roles assigned.</div>
+          </div>
+        </div>
+        <div class="bg-white border border-gray-200 rounded-lg">
+          <div class="p-4 border-b border-gray-200">
+            <div class="text-sm font-semibold text-gray-800">Group members</div>
+          </div>
+          <div class="p-4 space-y-4">
+            <div>
+              <div v-if="selectedGroup && !selectedGroup.isGlobal" class="text-xs text-gray-500">
+                Org-scoped group: user search is limited to members of <span class="font-mono">{{ selectedGroup.orgId }}</span>
+              </div>
+            </div>
+            <div>
+              <label class="text-xs font-semibold text-gray-600">Add users (search)</label>
+              <input
+                v-model="memberAdd.userQuery"
+                @input="debouncedSearchMemberUsers"
+                class="mt-1 w-full border rounded px-3 py-2"
+                :disabled="!selectedGroupId"
+                placeholder="type email or name"
+              />
+              <div v-if="memberAdd.userResults.length" class="border rounded mt-2 max-h-48 overflow-auto">
+                <button
+                  v-for="u in memberAdd.userResults"
+                  :key="u.id"
+                  @click="addMemberCandidate(u)"
+                  class="w-full text-left px-3 py-2 hover:bg-gray-50 text-sm"
+                >
+                  <div class="font-mono text-xs">{{ u.email }}</div>
+                  <div class="text-xs text-gray-500">{{ u.name || '-' }}</div>
+                </button>
+              </div>
+            </div>
+            <div v-if="memberAdd.selectedUsers.length" class="border rounded p-3 bg-gray-50">
+              <div class="text-xs font-semibold text-gray-700 mb-2">Selected users to add ({{ memberAdd.selectedUsers.length }})</div>
+              <div class="space-y-1 max-h-40 overflow-auto">
+                <div v-for="u in memberAdd.selectedUsers" :key="u.id" class="flex items-center justify-between bg-white border rounded px-2 py-1">
+                  <div>
+                    <div class="font-mono text-xs">{{ u.email }}</div>
+                    <div class="text-xs text-gray-500">{{ u.id }}</div>
+                  </div>
+                  <button @click="removeMemberCandidate(u.id)" class="text-xs text-red-600 hover:underline">Remove</button>
+                </div>
+              </div>
+              <div class="flex items-center gap-2 mt-3">
+                <button
+                  @click="bulkAddMembers"
+                  :disabled="!selectedGroupId || memberAdd.selectedUsers.length === 0"
+                  class="px-3 py-2 rounded bg-blue-600 text-white text-sm hover:bg-blue-700 disabled:opacity-50"
+                >
+                  Add to group
+                </button>
+                <div v-if="memberAdd.status" class="text-sm text-gray-600">{{ memberAdd.status }}</div>
+              </div>
+            </div>
+            <div class="border-t pt-4">
+              <div class="flex items-center justify-between mb-2">
+                <div class="text-xs font-semibold text-gray-700">Current members</div>
+                <button @click="loadSelectedGroupMembers" :disabled="!selectedGroupId" class="text-xs text-gray-700 hover:underline">Reload</button>
+              </div>
+              <div v-if="selectedGroupMembers.length" class="space-y-2">
+                <div class="flex items-center justify-between">
+                  <label class="text-xs text-gray-600">
+                    <input type="checkbox" v-model="memberRemove.selectAll" @change="toggleSelectAllMembers" class="mr-2" />
+                    Select all
+                  </label>
+                  <button
+                    @click="bulkRemoveMembers"
+                    :disabled="memberRemove.selectedMemberIds.length === 0"
+                    class="text-xs text-red-600 hover:underline disabled:opacity-50"
+                  >
+                    Remove selected ({{ memberRemove.selectedMemberIds.length }})
+                  </button>
+                </div>
+                <div v-for="m in selectedGroupMembers" :key="m.id" class="border rounded p-3">
+                  <div class="flex items-center justify-between">
+                    <label class="flex items-center gap-2">
+                      <input type="checkbox" :value="m.id" v-model="memberRemove.selectedMemberIds" @change="syncSelectAllMembers" />
+                      <div>
+                        <div class="font-mono text-xs">{{ m.email || '-' }}</div>
+                        <div class="text-xs text-gray-500">{{ m.userId }}</div>
+                      </div>
+                    </label>
+                    <button @click="removeSingleMember(m.id)" class="text-xs text-red-600 hover:underline">Remove</button>
+                  </div>
+                </div>
+                <div v-if="memberRemove.status" class="text-sm text-gray-600">{{ memberRemove.status }}</div>
+              </div>
+              <div v-else class="text-sm text-gray-500">No members.</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-span-7">
+        <div class="bg-white border border-gray-200 rounded-lg">
+          <div class="p-4 border-b border-gray-200 flex items-center justify-between">
+            <div class="text-sm font-semibold text-gray-800">Groups</div>
+            <button @click="loadGroups" class="px-3 py-2 rounded bg-gray-600 text-white text-sm hover:bg-gray-700">Reload</button>
+          </div>
+          <div class="p-4">
+            <div v-if="groups.length" class="space-y-2">
+              <div v-for="g in groups" :key="g.id" class="border rounded p-3">
+                <div class="flex items-center justify-between">
+                  <div class="text-sm font-semibold text-gray-800">{{ g.name }}</div>
+                  <div class="text-xs text-gray-500">{{ g.isGlobal ? 'global' : ('org ' + (g.orgId || '')) }}</div>
+                </div>
+                <div class="text-xs text-gray-500 mt-1">{{ g.description || '-' }}</div>
+                <div class="text-xs text-gray-400 mt-1">id: <span class="font-mono">{{ g.id }}</span></div>
+              </div>
+            </div>
+            <div v-else class="text-sm text-gray-500">No groups yet.</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="activeTab==='roles'" class="grid grid-cols-12 gap-6">
+      <div class="col-span-5 space-y-6">
+        <div class="bg-white border border-gray-200 rounded-lg">
+          <div class="p-4 border-b border-gray-200">
+            <div class="text-sm font-semibold text-gray-800">Create role</div>
+          </div>
+          <div class="p-4 space-y-4">
+            <div>
+              <label class="text-xs font-semibold text-gray-600">Code</label>
+              <input v-model="roleForm.key" class="mt-1 w-full border rounded px-3 py-2 font-mono" placeholder="unique code" />
+            </div>
+            <div>
+              <label class="text-xs font-semibold text-gray-600">Name</label>
+              <input v-model="roleForm.name" class="mt-1 w-full border rounded px-3 py-2" />
+            </div>
+            <div>
+              <label class="text-xs font-semibold text-gray-600">Description</label>
+              <input v-model="roleForm.description" class="mt-1 w-full border rounded px-3 py-2" />
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="text-xs font-semibold text-gray-600">Scope</label>
+                <select v-model="roleForm.isGlobal" class="mt-1 w-full border rounded px-3 py-2">
+                  <option :value="true">global</option>
+                  <option :value="false">org</option>
+                </select>
+              </div>
+              <div>
+                <label class="text-xs font-semibold text-gray-600">Org</label>
+                <select v-model="roleForm.orgId" :disabled="roleForm.isGlobal" class="mt-1 w-full border rounded px-3 py-2">
+                  <option value="">Select org</option>
+                  <option v-for="o in organizations" :key="o._id" :value="o._id">{{ o.name }} ({{ o.slug }})</option>
+                </select>
+              </div>
+            </div>
+            <div class="flex items-center gap-2">
+              <button @click="createRole" class="px-3 py-2 rounded bg-green-600 text-white text-sm hover:bg-green-700">
+                <i class="ti ti-plus mr-1"></i> Create
+              </button>
+              <div v-if="roleStatus" class="text-sm text-gray-600">{{ roleStatus }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-span-7">
+        <div class="bg-white border border-gray-200 rounded-lg">
+          <div class="p-4 border-b border-gray-200 flex items-center justify-between">
+            <div class="text-sm font-semibold text-gray-800">Roles</div>
+            <button @click="loadRoles" class="px-3 py-2 rounded bg-gray-600 text-white text-sm hover:bg-gray-700">Reload</button>
+          </div>
+          <div class="p-4">
+            <div v-if="roles.length" class="space-y-2">
+              <div v-for="r in roles" :key="r.id" class="border rounded p-3">
+                <div class="flex items-center justify-between">
+                  <div class="font-mono text-xs">{{ r.key }}</div>
+                  <div class="text-xs text-gray-500">{{ r.isGlobal ? 'global' : ('org ' + (r.orgId || '')) }}</div>
+                </div>
+                <div class="text-sm text-gray-800 mt-1">{{ r.name }}</div>
+                <div class="text-xs text-gray-500 mt-1">{{ r.description || '-' }}</div>
+                <div class="text-xs text-gray-400 mt-1">id: <span class="font-mono">{{ r.id }}</span></div>
+              </div>
+            </div>
+            <div v-else class="text-sm text-gray-500">No roles yet.</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="activeTab==='docs'" class="space-y-6">
+      <!-- Section 1: Programmatic Rights Checking -->
+      <section class="bg-white border border-gray-200 rounded-lg">
+        <div class="p-4 border-b border-gray-200">
+          <h3 class="text-lg font-semibold text-gray-800">Programmatic Rights Checking (Middleware Mode)</h3>
+          <p class="text-sm text-gray-600 mt-1">Use the RBAC service directly in your code when running SuperBackend in middleware mode.</p>
+        </div>
+        <div class="p-4 space-y-4">
+          <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2">Accessing the Service</h4>
+            <div class="bg-gray-50 rounded p-3 overflow-x-auto">
+              <pre class="text-xs"><code>const rbac = globalThis.superbackend.services.rbac;</code></pre>
+            </div>
+          </div>
+          <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2">Basic Rights Check</h4>
+            <div class="bg-gray-50 rounded p-3 overflow-x-auto">
+              <pre class="text-xs"><code>const result = await rbac.checkRight(userId, orgId, 'backoffice:dashboard:access');
+if (result.allowed) {
+  // User has permission - proceed
+  console.log('Access granted');
+} else {
+  // Permission denied
+  console.log('Access denied by:', result.decisionLayer);
+  // result.decisionLayer can be: 'user', 'role', 'group', 'org', or 'global'
+}</code></pre>
+            </div>
+          </div>
+          <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2">Express Middleware Example</h4>
+            <div class="bg-gray-50 rounded p-3 overflow-x-auto">
+              <pre class="text-xs"><code>const requireRight = (right) => async (req, res, next) => {
+  const rbac = globalThis.superbackend.services.rbac;
+  const result = await rbac.checkRight(req.user.id, req.org.id, right);
+  if (result.allowed) return next();
+  res.status(403).json({ error: 'Insufficient permissions' });
+};
+// Usage
+app.get('/admin/dashboard',
+  authenticate, // your auth middleware
+  requireRight('backoffice:dashboard:access'),
+  dashboardHandler
+);</code></pre>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- Section 2: HTTP API Rights Checking -->
+      <section class="bg-white border border-gray-200 rounded-lg">
+        <div class="p-4 border-b border-gray-200">
+          <h3 class="text-lg font-semibold text-gray-800">HTTP API Rights Checking</h3>
+          <p class="text-sm text-gray-600 mt-1">Check rights via REST API from external services or frontend applications.</p>
+        </div>
+        <div class="p-4 space-y-4">
+          <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2">Endpoint</h4>
+            <div class="bg-gray-50 rounded p-3 overflow-x-auto">
+              <pre class="text-xs"><code>POST /api/rbac/check
+Content-Type: application/json
+Authorization: Bearer &lt;JWT&gt; or Basic Auth</code></pre>
+            </div>
+          </div>
+          <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2">Request Body</h4>
+            <div class="bg-gray-50 rounded p-3 overflow-x-auto">
+              <pre class="text-xs"><code>{
+  "userId": "507f1f77bcf86cd799439011",
+  "orgId": "507f1f77bcf86cd799439012",
+  "right": "backoffice:dashboard:access"
+}</code></pre>
+            </div>
+          </div>
+          <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2">Response</h4>
+            <div class="bg-gray-50 rounded p-3 overflow-x-auto">
+              <pre class="text-xs"><code>{
+  "allowed": true,
+  "decisionLayer": "role",
+  "context": {
+    "userRoles": ["admin", "editor"],
+    "groupRoles": ["viewer"],
+    "userGrants": [],
+    "roleGrants": [
+      { "right": "backoffice:dashboard:access", "effect": "allow" }
+    ],
+    "groupGrants": [],
+    "orgGrants": [],
+    "globalGrants": []
+  }
+}</code></pre>
+            </div>
+          </div>
+          <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2">curl Example</h4>
+            <div class="bg-gray-50 rounded p-3 overflow-x-auto">
+              <pre class="text-xs"><code>curl -X POST http://localhost:3000/api/rbac/check \
+  -H "Authorization: Bearer YOUR_JWT" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "userId": "507f1f77bcf86cd799439011",
+    "orgId": "507f1f77bcf86cd799439012",
+    "right": "backoffice:dashboard:access"
+  }'</code></pre>
+            </div>
+          </div>
+          <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2">JavaScript Fetch Example</h4>
+            <div class="bg-gray-50 rounded p-3 overflow-x-auto">
+              <pre class="text-xs"><code>const response = await fetch('/api/rbac/check', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'Authorization': `Bearer ${token}`
+  },
+  body: JSON.stringify({
+    userId: '507f1f77bcf86cd799439011',
+    orgId: '507f1f77bcf86cd799439012',
+    right: 'backoffice:dashboard:access'
+  })
+});
+const result = await response.json();
+if (result.allowed) {
+  // Proceed with action
+}</code></pre>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- Section 3: Common Patterns -->
+      <section class="bg-white border border-gray-200 rounded-lg">
+        <div class="p-4 border-b border-gray-200">
+          <h3 class="text-lg font-semibold text-gray-800">Common Integration Patterns</h3>
+        </div>
+        <div class="p-4 space-y-4">
+          <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2">Wildcard Rights</h4>
+            <div class="bg-gray-50 rounded p-3 overflow-x-auto">
+              <pre class="text-xs"><code>// Check for wildcard rights
+const result = await rbac.checkRight(userId, orgId, 'backoffice:*');
+// Matches: backoffice:dashboard:access, backoffice:users:read, etc.</code></pre>
+            </div>
+          </div>
+          <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2">Multiple Rights Check</h4>
+            <div class="bg-gray-50 rounded p-3 overflow-x-auto">
+              <pre class="text-xs"><code>// Check multiple rights (AND logic)
+const rights = ['backoffice:dashboard:access', 'backoffice:users:read'];
+const results = await Promise.all(
+  rights.map(right => rbac.checkRight(userId, orgId, right))
+);
+const hasAll = results.every(r => r.allowed);
+const hasAny = results.some(r => r.allowed);</code></pre>
+            </div>
+          </div>
+          <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2">Global vs Org-Scoped Rights</h4>
+            <div class="bg-gray-50 rounded p-3 overflow-x-auto">
+              <pre class="text-xs"><code>// Global rights (orgId can be null/undefined)
+await rbac.checkRight(userId, null, 'system:admin');
+// Org-specific rights
+await rbac.checkRight(userId, orgId, 'org:settings:edit');</code></pre>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- Section 4: Troubleshooting -->
+      <section class="bg-white border border-gray-200 rounded-lg">
+        <div class="p-4 border-b border-gray-200">
+          <h3 class="text-lg font-semibold text-gray-800">Troubleshooting & Best Practices</h3>
+        </div>
+        <div class="p-4 space-y-4">
+          <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2">Common Errors</h4>
+            <ul class="text-sm text-gray-600 space-y-1 list-disc list-inside">
+              <li><strong>Invalid userId:</strong> Ensure the user exists in your database</li>
+              <li><strong>Invalid orgId:</strong> For org-scoped rights, orgId must be valid</li>
+              <li><strong>Malformed right:</strong> Rights should follow the pattern <code>domain:action:resource</code></li>
+              <li><strong>Authentication:</strong> API calls require valid JWT or Basic Auth</li>
+            </ul>
+          </div>
+          <div>
+            <h4 class="text-sm font-semibold text-gray-700 mb-2">Performance Tips</h4>
+            <ul class="text-sm text-gray-600 space-y-1 list-disc list-inside">
+              <li>Cache results for frequently checked rights</li>
+              <li>Use wildcard rights to reduce grant count</li>
+              <li>Batch multiple rights checks when possible</li>
+              <li>Consider decisionLayer for audit logging</li>
+            </ul>
+          </div>
+          <div class="bg-blue-50 border border-blue-200 rounded p-3">
+            <p class="text-sm text-blue-800">
+              <strong>Tip:</strong> Use the <code>decisionLayer</code> property to understand why access was granted/denied. This is useful for audit trails and debugging.
+            </p>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+  <style>
+    [v-cloak] { display: none; }
+  </style>
+  <script>
+    window.BASE_URL = '<%= baseUrl %>';
+    const { createApp } = Vue;
+    createApp({
+      data() {
+        return {
+          activeTab: 'rights',
+          rights: [],
+          grants: [],
+          roles: [],
+          groups: [],
+          organizations: [],
+          selectedGroupId: '',
+          selectedGroupRoles: [],
+          selectedGroupMembers: [],
+          selectedGroup: null,
+          userResults: [],
+          grantUserResults: [],
+          testRightResults: [],
+          grantRightResults: [],
+          orgs: [],
+          testStatus: '',
+          testResult: null,
+          grantStatus: '',
+          roleStatus: '',
+          groupStatus: '',
+          test: {
+            userQuery: '',
+            user: null,
+            orgId: '',
+            right: '',
+          },
+          roleForm: {
+            key: '',
+            name: '',
+            description: '',
+            isGlobal: true,
+            orgId: '',
+          },
+          groupForm: {
+            name: '',
+            description: '',
+            isGlobal: true,
+            orgId: '',
+          },
+          groupRoleForm: {
+            roleId: '',
+          },
+          memberAdd: {
+            userQuery: '',
+            userResults: [],
+            selectedUsers: [],
+            status: '',
+          },
+          memberRemove: {
+            selectAll: false,
+            selectedMemberIds: [],
+            status: '',
+          },
+          grant: {
+            subjectType: 'user',
+            subjectId: '',
+            userQuery: '',
+            scopeType: 'org',
+            scopeId: '',
+            right: '',
+            effect: 'allow',
+          },
+          _userSearchTimer: null,
+          _grantUserSearchTimer: null,
+          _memberUserSearchTimer: null,
+        };
+      },
+      methods: {
+        async api(path, opts) {
+          const base = window.BASE_URL || '';
+          const res = await fetch(base + path, {
+            credentials: 'same-origin',
+            headers: { 'Content-Type': 'application/json' },
+            ...opts,
+          });
+          const json = await res.json().catch(() => ({}));
+          if (!res.ok) throw new Error(json.error || 'Request failed');
+          return json;
+        },
+        debouncedSearchUsers() {
+          clearTimeout(this._userSearchTimer);
+          this._userSearchTimer = setTimeout(() => this.searchUsers(), 250);
+        },
+        async searchUsers() {
+          const q = (this.test.userQuery || '').trim();
+          if (!q) {
+            this.userResults = [];
+            return;
+          }
+          const qs = new URLSearchParams();
+          qs.set('q', q);
+          const data = await this.api('/api/admin/rbac/users?' + qs.toString(), { method: 'GET' });
+          this.userResults = data.users || [];
+        },
+        filterTestRights() {
+          const q = String(this.test.right || '').trim().toLowerCase();
+          if (!q) {
+            this.testRightResults = (this.rights || []).slice(0, 50);
+            return;
+          }
+          this.testRightResults = (this.rights || []).filter((r) => String(r).toLowerCase().includes(q)).slice(0, 50);
+        },
+        selectTestRight(r) {
+          this.test.right = r;
+          this.testRightResults = [];
+        },
+        filterGrantRights() {
+          const q = String(this.grant.right || '').trim().toLowerCase();
+          if (!q) {
+            this.grantRightResults = (this.rights || []).slice(0, 50);
+            return;
+          }
+          this.grantRightResults = (this.rights || []).filter((r) => String(r).toLowerCase().includes(q)).slice(0, 50);
+        },
+        selectGrantRight(r) {
+          this.grant.right = r;
+          this.grantRightResults = [];
+        },
+        debouncedSearchGrantUsers() {
+          clearTimeout(this._grantUserSearchTimer);
+          this._grantUserSearchTimer = setTimeout(() => this.searchGrantUsers(), 250);
+        },
+        async searchGrantUsers() {
+          const q = (this.grant.userQuery || '').trim();
+          if (!q) {
+            this.grantUserResults = [];
+            return;
+          }
+          const qs = new URLSearchParams();
+          qs.set('q', q);
+          const data = await this.api('/api/admin/rbac/users?' + qs.toString(), { method: 'GET' });
+          this.grantUserResults = data.users || [];
+        },
+        async selectGrantUser(u) {
+          this.grant.subjectId = u.id;
+          this.grant.userQuery = u.email;
+          this.grantUserResults = [];
+        },
+        onGrantSubjectTypeChange() {
+          this.grant.subjectId = '';
+          this.grant.userQuery = '';
+          this.grantUserResults = [];
+        },
+        onGrantScopeTypeChange() {
+          if (this.grant.scopeType !== 'org') {
+            this.grant.scopeId = '';
+          }
+        },
+        async selectUser(u) {
+          this.test.user = u;
+          this.userResults = [];
+          this.test.userQuery = u.email;
+          this.testResult = null;
+          this.testStatus = '';
+          const data = await this.api('/api/admin/rbac/users/' + u.id + '/orgs', { method: 'GET' });
+          this.orgs = data.orgs || [];
+          if (this.orgs.length === 1) {
+            this.test.orgId = this.orgs[0].id;
+          } else {
+            this.test.orgId = '';
+          }
+        },
+        async runTest() {
+          this.testStatus = '';
+          this.testResult = null;
+          try {
+            if (!this.test.user) throw new Error('Select a user');
+            if (!this.test.orgId) throw new Error('Select an org');
+            if (!this.test.right) throw new Error('Enter a right');
+            const data = await this.api('/api/admin/rbac/test', {
+              method: 'POST',
+              body: JSON.stringify({
+                userId: this.test.user.id,
+                orgId: this.test.orgId,
+                right: this.test.right,
+              }),
+            });
+            this.testResult = data;
+          } catch (e) {
+            this.testStatus = e.message || 'Failed.';
+          }
+        },
+        async loadRights() {
+          // Derive unique rights from existing grants
+          const uniqueRights = new Set();
+          (this.grants || []).forEach(g => {
+            if (g.right) uniqueRights.add(g.right);
+          });
+          this.rights = Array.from(uniqueRights).sort();
+        },
+        async loadGrants() {
+          const data = await this.api('/api/admin/rbac/grants', { method: 'GET' });
+          this.grants = data.grants || [];
+        },
+        async loadOrganizations() {
+          const qs = new URLSearchParams();
+          qs.set('limit', '500');
+          const data = await this.api('/api/admin/orgs?' + qs.toString(), { method: 'GET' });
+          this.organizations = data.orgs || [];
+        },
+        async loadRoles() {
+          const data = await this.api('/api/admin/rbac/roles', { method: 'GET' });
+          this.roles = data.roles || [];
+        },
+        async loadGroups() {
+          const data = await this.api('/api/admin/rbac/groups', { method: 'GET' });
+          this.groups = data.groups || [];
+        },
+        async loadSelectedGroupMembers() {
+          this.selectedGroupMembers = [];
+          this.memberRemove.selectAll = false;
+          this.memberRemove.selectedMemberIds = [];
+          if (!this.selectedGroupId) return;
+          const data = await this.api('/api/admin/rbac/groups/' + this.selectedGroupId + '/members', { method: 'GET' });
+          this.selectedGroupMembers = data.members || [];
+        },
+        async onSelectedGroupChange() {
+          this.selectedGroup = (this.groups || []).find((g) => String(g.id) === String(this.selectedGroupId)) || null;
+          this.memberAdd.userQuery = '';
+          this.memberAdd.userResults = [];
+          this.memberAdd.selectedUsers = [];
+          this.memberAdd.status = '';
+          this.memberRemove.status = '';
+          await Promise.all([
+            this.loadSelectedGroupRoles(),
+            this.loadSelectedGroupMembers(),
+          ]);
+        },
+        debouncedSearchMemberUsers() {
+          clearTimeout(this._memberUserSearchTimer);
+          this._memberUserSearchTimer = setTimeout(() => this.searchMemberUsers(), 250);
+        },
+        async searchMemberUsers() {
+          const q = (this.memberAdd.userQuery || '').trim();
+          if (!q) {
+            this.memberAdd.userResults = [];
+            return;
+          }
+          if (!this.selectedGroupId) {
+            this.memberAdd.userResults = [];
+            return;
+          }
+          const qs = new URLSearchParams();
+          qs.set('q', q);
+          if (this.selectedGroup && this.selectedGroup.isGlobal === false && this.selectedGroup.orgId) {
+            qs.set('orgId', String(this.selectedGroup.orgId));
+          }
+          const data = await this.api('/api/admin/rbac/users?' + qs.toString(), { method: 'GET' });
+          this.memberAdd.userResults = data.users || [];
+        },
+        addMemberCandidate(u) {
+          if (!u || !u.id) return;
+          const exists = (this.memberAdd.selectedUsers || []).some((x) => String(x.id) === String(u.id));
+          if (!exists) this.memberAdd.selectedUsers.push({ id: u.id, email: u.email, name: u.name || '' });
+          this.memberAdd.userResults = [];
+          this.memberAdd.userQuery = '';
+        },
+        removeMemberCandidate(userId) {
+          this.memberAdd.selectedUsers = (this.memberAdd.selectedUsers || []).filter((u) => String(u.id) !== String(userId));
+        },
+        toggleSelectAllMembers() {
+          if (this.memberRemove.selectAll) {
+            this.memberRemove.selectedMemberIds = (this.selectedGroupMembers || []).map((m) => m.id);
+          } else {
+            this.memberRemove.selectedMemberIds = [];
+          }
+        },
+        syncSelectAllMembers() {
+          const total = (this.selectedGroupMembers || []).length;
+          const selected = (this.memberRemove.selectedMemberIds || []).length;
+          this.memberRemove.selectAll = total > 0 && selected === total;
+        },
+        async bulkAddMembers() {
+          this.memberAdd.status = '';
+          try {
+            const userIds = (this.memberAdd.selectedUsers || []).map((u) => u.id);
+            if (!this.selectedGroupId) throw new Error('Select a group');
+            if (!userIds.length) throw new Error('Select users');
+            const data = await this.api('/api/admin/rbac/groups/' + this.selectedGroupId + '/members/bulk', {
+              method: 'POST',
+              body: JSON.stringify({ userIds }),
+            });
+            this.memberAdd.status = `Added (${data.insertedCount || 0}).`;
+            this.memberAdd.selectedUsers = [];
+            await this.loadSelectedGroupMembers();
+          } catch (e) {
+            this.memberAdd.status = e.message || 'Failed.';
+          }
+        },
+        async removeSingleMember(memberId) {
+          if (!this.selectedGroupId || !memberId) return;
+          try {
+            await this.api('/api/admin/rbac/groups/' + this.selectedGroupId + '/members/' + memberId, { method: 'DELETE' });
+            await this.loadSelectedGroupMembers();
+          } catch (e) {
+            this.memberRemove.status = e.message || 'Failed.';
+          }
+        },
+        async bulkRemoveMembers() {
+          this.memberRemove.status = '';
+          try {
+            if (!this.selectedGroupId) throw new Error('Select a group');
+            const memberIds = (this.memberRemove.selectedMemberIds || []).slice();
+            if (!memberIds.length) throw new Error('Select members');
+            const data = await this.api('/api/admin/rbac/groups/' + this.selectedGroupId + '/members/bulk-remove', {
+              method: 'POST',
+              body: JSON.stringify({ memberIds }),
+            });
+            this.memberRemove.status = `Removed (${data.deletedCount || 0}).`;
+            this.memberRemove.selectedMemberIds = [];
+            this.memberRemove.selectAll = false;
+            await this.loadSelectedGroupMembers();
+          } catch (e) {
+            this.memberRemove.status = e.message || 'Failed.';
+          }
+        },
+        async createRole() {
+          this.roleStatus = '';
+          try {
+            if (!this.roleForm.key) throw new Error('code is required');
+            if (!this.roleForm.name) throw new Error('name is required');
+            if (!this.roleForm.isGlobal && !this.roleForm.orgId) throw new Error('org is required for org-scoped roles');
+            await this.api('/api/admin/rbac/roles', {
+              method: 'POST',
+              body: JSON.stringify({
+                key: this.roleForm.key,
+                name: this.roleForm.name,
+                description: this.roleForm.description,
+                isGlobal: this.roleForm.isGlobal,
+                orgId: this.roleForm.isGlobal ? undefined : this.roleForm.orgId,
+              }),
+            });
+            this.roleStatus = 'Created.';
+            this.roleForm.key = '';
+            this.roleForm.name = '';
+            this.roleForm.description = '';
+            this.roleForm.isGlobal = true;
+            this.roleForm.orgId = '';
+            await this.loadRoles();
+          } catch (e) {
+            this.roleStatus = e.message || 'Failed.';
+          }
+        },
+        async createGroup() {
+          this.groupStatus = '';
+          try {
+            if (!this.groupForm.name) throw new Error('name is required');
+            if (!this.groupForm.isGlobal && !this.groupForm.orgId) throw new Error('org is required for org-scoped groups');
+            await this.api('/api/admin/rbac/groups', {
+              method: 'POST',
+              body: JSON.stringify({
+                name: this.groupForm.name,
+                description: this.groupForm.description,
+                isGlobal: this.groupForm.isGlobal,
+                orgId: this.groupForm.isGlobal ? undefined : this.groupForm.orgId,
+              }),
+            });
+            this.groupStatus = 'Created.';
+            this.groupForm.name = '';
+            this.groupForm.description = '';
+            this.groupForm.isGlobal = true;
+            this.groupForm.orgId = '';
+            await this.loadGroups();
+          } catch (e) {
+            this.groupStatus = e.message || 'Failed.';
+          }
+        },
+        async loadSelectedGroupRoles() {
+          this.selectedGroupRoles = [];
+          this.groupRoleForm.roleId = '';
+          if (!this.selectedGroupId) return;
+          const data = await this.api('/api/admin/rbac/groups/' + this.selectedGroupId + '/roles', { method: 'GET' });
+          this.selectedGroupRoles = data.roles || [];
+        },
+        async addRoleToGroup() {
+          if (!this.selectedGroupId || !this.groupRoleForm.roleId) return;
+          try {
+            await this.api('/api/admin/rbac/groups/' + this.selectedGroupId + '/roles', {
+              method: 'POST',
+              body: JSON.stringify({ roleId: this.groupRoleForm.roleId }),
+            });
+            await this.loadSelectedGroupRoles();
+          } catch (e) {
+            this.groupStatus = e.message || 'Failed.';
+          }
+        },
+        async removeRoleFromGroup(groupRoleId) {
+          if (!this.selectedGroupId || !groupRoleId) return;
+          try {
+            await this.api('/api/admin/rbac/groups/' + this.selectedGroupId + '/roles/' + groupRoleId, { method: 'DELETE' });
+            await this.loadSelectedGroupRoles();
+          } catch (e) {
+            this.groupStatus = e.message || 'Failed.';
+          }
+        },
+        async createGrant() {
+          this.grantStatus = '';
+          try {
+            if (!this.grant.subjectId) throw new Error('Subject ID is required');
+            if (!this.grant.right) throw new Error('Right is required');
+            await this.api('/api/admin/rbac/grants', {
+              method: 'POST',
+              body: JSON.stringify({
+                subjectId: this.grant.subjectId,
+                subjectType: this.grant.subjectType,
+                right: this.grant.right,
+                effect: this.grant.effect,
+                scopeType: this.grant.scopeType,
+                scopeId: this.grant.scopeId,
+              }),
+            });
+            this.grantStatus = 'Grant created.';
+            this.grant = { subjectType: 'user', subjectId: '', right: '', effect: 'allow', scopeType: null, scopeId: '' };
+            await this.loadGrants();
+            await this.loadRights();
+          } catch (e) {
+            this.grantStatus = e.message || 'Failed.';
+          }
+        },
+        async deleteGrant(id) {
+          try {
+            await this.api('/api/admin/rbac/grants/' + id, { method: 'DELETE' });
+            await this.loadGrants();
+            await this.loadRights();
+          } catch (e) {
+            // ignore
+          }
+        },
+        async loadAll() {
+          await Promise.all([
+            this.loadRights(),
+            this.loadGrants(),
+            this.loadOrganizations(),
+            this.loadRoles(),
+            this.loadGroups(),
+          ]);
+          this.selectedGroup = (this.groups || []).find((g) => String(g.id) === String(this.selectedGroupId)) || null;
+        },
+      },
+      async mounted() {
+        await this.loadGrants();
+        await this.loadRights();
+        await this.loadOrganizations();
+        await this.loadRoles();
+        await this.loadGroups();
+      },
+    }).mount('#app');
+  </script>
+</body>
+</html>