portal-mojo 0.2.5 → 0.2.6

package/docs/admin-identity-directories-sources.json

@@ -0,0 +1,130 @@
+{
+  "package": "portal-mojo",
+  "package_version": "0.2.5",
+  "source_repository": "https://github.com/NativeMojo/portal-mojo",
+  "source_tag": "v0.2.5",
+  "source_commit": "93c7fdfeb3096d33010e72bd4483cf9ca6e3d6f5",
+  "license": "Apache-2.0",
+  "license_file": "packages/portal-mojo/LICENSE",
+  "files": [
+    {
+      "source_path": "apps/portal/src/group-permissions.ts",
+      "source_sha256": "6237ad45328ecb9637a1a07d8954dd27cd019e22fa32942f5e7d05a76037fb5c",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/group-permissions.ts",
+      "package_sha256": "b909f5a5cf029b8b910a70e6817fea8abd9ded6797af14a16170b2695c0c1699",
+      "adaptation": "Moves system-pinned group permission clauses into the canonical package identity surface."
+    },
+    {
+      "source_path": "apps/portal/src/models.ts",
+      "source_sha256": "0b98a906a774e572f9109703fe22444c3a2e190ca5e02c3a93dfbd02cc3fcb84",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/models.ts",
+      "package_sha256": "6ac12a64d00e409874bc1b13d7941cf54c38a715af5ebcfddd2b2e9257356759",
+      "adaptation": "Extracts the Group model/type and group kind options; shared User, Member and Log models remain owned by their package domains."
+    },
+    {
+      "source_path": "apps/portal/src/pages/ApiKeysPage.tsx",
+      "source_sha256": "3d338cf77c3110b72a9361565c1cced10a7fccc52c486e3dafda119d66c676b2",
+      "package_path": "packages/portal-mojo/src/admin/identity/users/PersonalApiKeysPage.tsx",
+      "package_sha256": "f377d8a97b5c0ccbce745c333fdd7e4a5fd5f5a89b868b058677b31e3efe64ff",
+      "adaptation": "Expanded row facts and actions are presented in a native DetailView modal that observes the current API key record."
+    },
+    {
+      "source_path": "apps/portal/src/pages/GroupDetail.tsx",
+      "source_sha256": "01a8a6032a59a337636ec28e5e2aef90717e5bc00656807135e02820a92a394b",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/GroupDetail.tsx",
+      "package_sha256": "e26943218e3e8f5ac79ddc7f1b0bd40736bcab0bd6e9c694e01830086349a4e2",
+      "adaptation": "Raw metadata is visible in the explicit Metadata section without a collapsible control."
+    },
+    {
+      "source_path": "apps/portal/src/pages/GroupsPage.tsx",
+      "source_sha256": "82e4aa5e7ebf67832bbd3bcf7e15dcfdeea64383039cc426591fa15262e4d4c8",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/GroupsPage.tsx",
+      "package_sha256": "e16f3d0630fdb1937cf667cd2abe8cd1aabc9bb2b731113112930e66bde2f1df",
+      "adaptation": "Moved into the package identity domain and updated package-relative imports."
+    },
+    {
+      "source_path": "apps/portal/src/pages/group-sections/AuditSection.tsx",
+      "source_sha256": "49848f57e5050c0008aa83f7092af9abb8f55d262791a2591e525eaa6d741df4",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/group-sections/AuditSection.tsx",
+      "package_sha256": "07a40636549a0a1d8636a115ee330313b84c0c82500890c6464301fd39de1e06",
+      "adaptation": "Moved into the package identity domain and updated package-relative imports."
+    },
+    {
+      "source_path": "apps/portal/src/pages/group-sections/AuthConfigDialog.tsx",
+      "source_sha256": "f42e18a802f206a2b3f30248c30ad12887598b170deb73b532232a6bf89699dd",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/group-sections/AuthConfigDialog.tsx",
+      "package_sha256": "e2280185bde7eab3ca7108f7d6da9e0e66c4f4d8323ec97f3fd7d49376932b65",
+      "adaptation": "Raw auth overrides remain visible in the explicit configuration dialog without collapsible content."
+    },
+    {
+      "source_path": "apps/portal/src/pages/group-sections/EventsSection.tsx",
+      "source_sha256": "b8cb12ae99d7c8d5931a090b7be8ea4e0373ff4657e786094e9ac862167d43ec",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/group-sections/EventsSection.tsx",
+      "package_sha256": "f0004605fbf7ceb2704adb42c0a3dd14dc5a468c445f0f94f2548fbc5f1bfeb4",
+      "adaptation": "Moved into the package identity domain and updated package-relative imports."
+    },
+    {
+      "source_path": "apps/portal/src/pages/group-sections/GeofenceSection.tsx",
+      "source_sha256": "d0ce22f5ef922371d7a78c353e1a29e5d9ca4932e45814499e9c3cdeda7dc137",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/group-sections/GeofenceSection.tsx",
+      "package_sha256": "227850a8ef844867ea55d599997144b462ee058967224c361dd821713d1b677a",
+      "adaptation": "Moved into the package identity domain and updated package-relative imports."
+    },
+    {
+      "source_path": "apps/portal/src/pages/group-sections/IdentitySection.tsx",
+      "source_sha256": "cda776a26f1e21b73820ed88ab7dcbafdaf2b146c4c3ee4bf6b24dcbaeecc9f4",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/group-sections/IdentitySection.tsx",
+      "package_sha256": "888ff5f7a70c80d8a868f13675b39af9a2a7076d6ea5fbc323493c0265ce9880",
+      "adaptation": "Moved into the package identity domain and updated package-relative imports."
+    },
+    {
+      "source_path": "apps/portal/src/pages/group-sections/MembersSection.tsx",
+      "source_sha256": "dc2e99924b8ba856ce2ed48dffae082e98cac9ef78df3ddb1f05fe8a71f9725d",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/group-sections/MembersSection.tsx",
+      "package_sha256": "abccb58bcdb62d0d1de2611cad080ca7237e0dfa781b10c5fc1d7e251398f628",
+      "adaptation": "Passes the group navigation callback into UserDetail to keep cross-record navigation available."
+    },
+    {
+      "source_path": "apps/portal/src/pages/group-sections/OverviewSection.tsx",
+      "source_sha256": "fb395569018b89e6efd45cea241ba665b73efd15549802a6f0d98d90116ce894",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/group-sections/OverviewSection.tsx",
+      "package_sha256": "08b460272af71ba6209fe388b71f37f79d94a9fecc21c0c2ee3abaf11f01372f",
+      "adaptation": "Moved into the package identity domain and updated package-relative imports."
+    },
+    {
+      "source_path": "apps/portal/src/pages/group-sections/SubGroupsSection.tsx",
+      "source_sha256": "81074a2d74d80fda93e40379b87620807c31db7979736f90559e359bdafc0672",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/group-sections/SubGroupsSection.tsx",
+      "package_sha256": "61e412e709afb4384fdcbaa1d8fbb6df6ba414634ecc6aaa8201c66cf722af93",
+      "adaptation": "Moved into the package identity domain and updated package-relative imports."
+    },
+    {
+      "source_path": "apps/portal/src/pages/group-sections/auth-config.ts",
+      "source_sha256": "37d75dff84bca2577bcd1804c77aa0ef1519e4d913dcfdf7914266045fdbabe6",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/group-sections/auth-config.ts",
+      "package_sha256": "37d75dff84bca2577bcd1804c77aa0ef1519e4d913dcfdf7914266045fdbabe6",
+      "adaptation": "Moved into the package identity domain and updated package-relative imports."
+    },
+    {
+      "source_path": "apps/portal/src/pages/group-sections/geofence-data.ts",
+      "source_sha256": "169d5feb72fbe16a0463d591328ce49963e95f1bc0f5f7e5fa9ed271a5ace8e6",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/group-sections/geofence-data.ts",
+      "package_sha256": "169d5feb72fbe16a0463d591328ce49963e95f1bc0f5f7e5fa9ed271a5ace8e6",
+      "adaptation": "Moved into the package identity domain and updated package-relative imports."
+    },
+    {
+      "source_path": "apps/portal/src/pages/group-sections/models.ts",
+      "source_sha256": "ec6a2fd700a0a91e8f1d9e49c364ffe5466db340b435004971e719da08b49371",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/group-sections/models.ts",
+      "package_sha256": "ec6a2fd700a0a91e8f1d9e49c364ffe5466db340b435004971e719da08b49371",
+      "adaptation": "Moved into the package identity domain and updated package-relative imports."
+    },
+    {
+      "source_path": "apps/portal/src/pages/group-sections/shared.ts",
+      "source_sha256": "68aa819b14edcbbd8ae399d5c5a74360cc50ffd281b6d0d3be1c4f8ebc4e4f6c",
+      "package_path": "packages/portal-mojo/src/admin/identity/groups/group-sections/shared.ts",
+      "package_sha256": "68aa819b14edcbbd8ae399d5c5a74360cc50ffd281b6d0d3be1c4f8ebc4e4f6c",
+      "adaptation": "Moved into the package identity domain and updated package-relative imports."
+    }
+  ]
+}

package/docs/admin-identity-directories.md

@@ -0,0 +1,60 @@
+# Admin Groups and Personal API Keys
+
+The global Admin registry contributes Groups and Personal API Keys to the
+Identity & Access navigation group. `adminSectionRoutes()` and
+`adminSectionsMenu()` therefore mount the same pages in the standalone
+reference portal and in an embedded System Admin boundary:
+
+```tsx
+import {
+  GROUPS_ADMIN_SECTION,
+  GROUP_VIEW_PERMS,
+  GroupDetail,
+  GroupModel,
+  GroupsPage,
+  PERSONAL_API_KEYS_ADMIN_SECTION,
+  PersonalApiKeysPage,
+} from 'portal-mojo/admin/identity';
+```
+
+The registered routes are `/groups` and `/apikeys`; an embedded mount prefixes
+both routes. Group directory and detail access use the system-pinned
+`sys.groups | sys.view_groups` clause. Group mutations use
+`sys.groups | sys.manage_groups`. Active-group membership cannot satisfy
+these gates. The personal key section uses the system identity-view clause,
+while its API requests remain scoped to the signed-in user's own keys.
+
+## Groups
+
+`GroupsPage` retains the native server-owned `ModelTable` search, filters,
+presets, paging, sorting, column chooser, persistence and exports against
+`GET /api/group`. Opening a row presents `GroupDetail` in `modal.detail`.
+`GroupDetail` preserves the Overview, Identity, Members, Sub-Groups, API Keys,
+Webhooks, Geofencing, Events, Audit and Metadata surfaces, with each section's
+existing system permission gate and conditional queries. Parent, child, member
+and user navigation opens native detail modals while keeping the directory
+underneath.
+
+The group model and section code are adapted from the reference portal at
+`v0.2.5` commit `93c7fdfeb3096d33010e72bd4483cf9ca6e3d6f5`. The source hashes
+and corresponding package hashes are recorded in
+[`admin-identity-directories-sources.json`](admin-identity-directories-sources.json).
+The moved implementation retains the package Apache-2.0 license. Two raw JSON
+surfaces render their values directly in their explicit Metadata/Auth details;
+they do not use collapsible content.
+
+## Personal API Keys
+
+`PersonalApiKeysPage` uses the existing `ApiKeyModel` at
+`/api/account/api_keys` and the caller-only generation mutation at
+`/api/auth/generate_api_key`. The generated token is shown once and scrubbed
+before it can reach the query or mutation cache. Key facts and actions open in
+a native detail modal. Disable/enable remains reversible with an undo toast;
+revoke remains armed because it rotates the secret and cannot be undone. There
+is no delete action. This page does not use the separate group credential
+endpoint.
+
+The Personal API Keys route was added to the package identity section registry
+alongside Users, Members, Groups, Credentials and Sign-in. Compatibility page
+paths in the reference app re-export the package-owned pages, and its menu and
+route composition do not inject duplicate directory entries.

package/docs/admin-identity-users.md

@@ -25,7 +25,12 @@ reason per batch; rows already in the target state are ineligible.
 
 The detail preserves all 14 sections: Overview, Profile, Personal, Security,
 OAuth, Groups, Sys Perms, conditional App Perms, API Keys, Devices, Logins,
-Audit, Notifications, and Metadata. Subsidiary count/list queries are enabled
+Audit, Notifications, and Metadata. Permission sections are labeled **System
+permissions** and **Product permissions** in the UI. Consuming apps install
+their product tabs with `registerFormTabs(USER_APP_PERMS_TABSET, tabs)`; the
+section stays absent when none are registered. User grants can cover multiple
+groups; use a Member product permission for a single group.
+Subsidiary count/list queries are enabled
 only when their exact system permission is present. Logs use
 `sys.view_logs | sys.manage_logs | sys.security`; incident events use
 `sys.view_security | sys.security`. Permission revocation therefore removes

package/docs/admin-members.md

@@ -12,6 +12,7 @@ import {
   MEMBERS_ADMIN_SECTION,
   openMemberAdmissionDialog,
   registerMemberPermissions,
+  MEMBER_APP_PERMS_TABSET,
 } from 'portal-mojo/admin';
 ```
 
@@ -103,6 +104,16 @@ and read-only rather than disappearing. Permission switches autosave through
 `FormView`; a deployment's `MEMBER_PERMS_PROTECTION` remains authoritative,
 and rejected changes revert with the server error shown.
 
+For a larger product catalog, also register native `FormView` tabs under
+`MEMBER_APP_PERMS_TABSET` with `registerFormTabs` from `portal-mojo/ui`.
+Use dotted `permissions.<grant>` fields and retain the corresponding
+`registerMemberPermissions` definitions. A separate **Product permissions**
+detail section appears when this tabset is populated. Fields covered by those
+tabs leave the ordinary **Permissions** section, so each grant has one editor.
+Both forms save the same membership row with the same gates, partial-dict
+merge, escalation confirmation and rejection handling. The tabset creates no
+new grant semantics: the backend still decides what each key authorizes.
+
 ## Composition
 
 `MEMBERS_ADMIN_SECTION` is root-relative and dual-mounts as `/members` in the
@@ -110,3 +121,8 @@ standalone Admin and `/system/members` when embedded. It never consumes active
 group context. `GroupMembersPanel` is the reusable Group-detail composition;
 pass optional `onNavigateUser` and `onNavigateGroup` callbacks to connect
 sibling identity details without coupling the package to an app.
+
+Member product tabs only render `permissions.<grant>` fields whose grant is
+registered through `registerMemberPermissions()` and editable. System/derived
+grants, unregistered names and unrelated fields (such as `group` or `user`)
+are ignored; tabs with no valid fields do not appear.

package/docs/admin-network-security.md

@@ -163,7 +163,7 @@ flag is detected, `true` REQUIRES the flag (rare), absent/`null` means don't
 care.
 
 `geofence-data.ts` is the ONE definition of the lossy projection between that
-DSL and the friendly form. `apps/portal/src/pages/group-sections/geofence-data.ts`
+DSL and the friendly form. `packages/portal-mojo/src/admin/identity/groups/group-sections/geofence-data.ts`
 is a re-export shim over it, so the platform page and the group panel cannot
 drift. `GeofenceRuleEditor` is the ONE editor both render.
 

package/docs/menus-and-access.md

@@ -26,8 +26,10 @@ setDefaultMenu('admin');
 Resolution: route containment in registration order (group menus eligible
 only under a kind-matched active group) → defaultMenu → first non-group
 visible. Items support `permissions` (any-of) ∧ `requiresGroupKind`;
-dividers with no visible children drop; a parent lights when a child route
-is active. `scope: 'admin' | 'group' | 'account' | 'global'` makes ownership
+dividers with no visible children drop. Only the destination row is selected;
+an accordion parent is a neutral disclosure control and opens for its active
+child. `exact: true` end-matches both the visual selection and `aria-current`.
+`scope: 'admin' | 'group' | 'account' | 'global'` makes ownership
 explicit; legacy `groupKind` menus still infer group scope. Static rendering
 remains the default for compatibility. `presentation: 'accordion'` enables
 searchable, single-open-section navigation. Give accordion parents stable
@@ -57,6 +59,8 @@ Admin section bundles contribute through `adminSectionsMenu`. Use
 `{grouped: true, presentation: 'accordion'}` for the domain-grouped Admin
 experience. Routes remain mount-relative; multiple embedded root sections
 share one `/system` landing instead of emitting duplicate index routes.
+Generated Admin destinations are exact matched, so an embedded mount’s root
+Dashboard cannot remain selected on every nested page.
 
 Import the route/menu machinery from `portal-mojo/admin/core`, then import only
 the registry domains the shell installs. The stable domains are `identity`,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "portal-mojo",
-    "version": "0.2.5",
+    "version": "0.2.6",
     "description": "React portal toolkit for django-mojo — typed client + params store, mission-control UI, dependency-free SVG charts, admin section bundles.",
     "type": "module",
     "license": "Apache-2.0",

package/src/admin/core/index.ts

@@ -207,8 +207,8 @@ export function adminSectionsMenu(sections: readonly AdminSection[], opts: {
             const labeled = section.routes.filter((route) => route.label);
             const destinations: MenuItem[] = labeled.length > 0 ? labeled.map((route) => ({
                 id: `admin:${section.id}:${route.path || 'index'}`, label: route.label!, keywords: [section.title],
-                route: absolutePath(base, route.path), permissionClauses: [section.permissions, ...(route.permissions ? [route.permissions] : [])],
-            })) : [{ id: `admin:${section.id}`, label: section.title, keywords: [section.title], route: absolutePath(base), permissionClauses: [section.permissions] }];
+                route: absolutePath(base, route.path), exact: true, permissionClauses: [section.permissions, ...(route.permissions ? [route.permissions] : [])],
+            })) : [{ id: `admin:${section.id}`, label: section.title, keywords: [section.title], route: absolutePath(base), exact: true, permissionClauses: [section.permissions] }];
             if (section.navigationGroup === null) {
                 items.push(...destinations.map((destination) => ({ ...destination, icon: section.icon })));
                 continue;
@@ -227,8 +227,8 @@ export function adminSectionsMenu(sections: readonly AdminSection[], opts: {
         const base = relativePath(mount, section.basePath ?? section.id);
         items.push({
             label: section.title, icon: section.icon, permissions: section.permissions,
-            ...(base ? { route: absolutePath(base) } : {}),
-            children: labeled.map((route) => ({ label: route.label!, route: absolutePath(base, route.path), permissions: route.permissions })),
+            ...(base ? { route: absolutePath(base), exact: true } : {}),
+            children: labeled.map((route) => ({ label: route.label!, route: absolutePath(base, route.path), exact: true, permissions: route.permissions })),
         });
     }
     return { name: opts.name ?? 'admin', scope: 'admin', presentation: opts.presentation ?? 'static', items };

package/src/admin/domains/identity.ts

@@ -3,6 +3,7 @@ import { GLOBAL_CREDENTIAL_PERMS } from '../credentials/models';
 import { MEMBER_READ_PERMISSIONS } from '../identity/members/models';
 import { USER_VIEW_PERMISSIONS } from '../identity/users/models';
 import { SIGNIN_ADMIN_PERMISSIONS } from '../signin/api';
+import { GROUP_VIEW_PERMS } from '../identity/groups/group-permissions';
 
 export const USERS_ADMIN_SECTION: AdminSection = {
     id: 'users', basePath: '', title: 'Users', icon: 'bi-people', navigationGroup: 'identity-access', permissions: USER_VIEW_PERMISSIONS,
@@ -27,4 +28,21 @@ export const SIGNIN_ADMIN_SECTION: AdminSection = {
     routes: [{ path: '', loadComponent: () => import('../signin/SigninPage').then(({ SigninPage }) => ({ default: SigninPage })), permissions: SIGNIN_ADMIN_PERMISSIONS }],
 };
 
-export const IDENTITY_ADMIN_SECTIONS = [USERS_ADMIN_SECTION, MEMBERS_ADMIN_SECTION, CREDENTIALS_ADMIN_SECTION, SIGNIN_ADMIN_SECTION] as const;
+export const GROUPS_ADMIN_SECTION: AdminSection = {
+    id: 'groups', basePath: '', title: 'Groups', icon: 'bi-diagram-3', navigationGroup: 'identity-access', permissions: GROUP_VIEW_PERMS,
+    routes: [{ path: 'groups', label: 'Groups', loadComponent: () => import('../identity/groups/GroupsPage').then(({ GroupsPage }) => ({ default: GroupsPage })), permissions: GROUP_VIEW_PERMS }],
+};
+
+export const PERSONAL_API_KEYS_ADMIN_SECTION: AdminSection = {
+    id: 'personal-api-keys', basePath: '', title: 'Personal API Keys', icon: 'bi-key', navigationGroup: 'identity-access', permissions: USER_VIEW_PERMISSIONS,
+    routes: [{ path: 'apikeys', label: 'Personal API Keys', loadComponent: () => import('../identity/users/PersonalApiKeysPage').then(({ PersonalApiKeysPage }) => ({ default: PersonalApiKeysPage })) }],
+};
+
+export const IDENTITY_ADMIN_SECTIONS = [
+    GROUPS_ADMIN_SECTION,
+    PERSONAL_API_KEYS_ADMIN_SECTION,
+    USERS_ADMIN_SECTION,
+    MEMBERS_ADMIN_SECTION,
+    CREDENTIALS_ADMIN_SECTION,
+    SIGNIN_ADMIN_SECTION,
+] as const;

package/src/admin/identity/groups/GroupDetail.tsx

@@ -0,0 +1,287 @@
+// GroupDetail — the FULL GroupView.js port (web-mojo admin/account/groups/
+// GroupView.js, all 2243 lines read 2026-08-05; parity pass over the earlier
+// subset build): DetailView modal with the complete section map —
+//   Overview · Identity · ─Membership─ Members · Sub-Groups · ─Access─
+//   API Keys · Webhooks(manage_group) · Geofencing(geofence perms) ·
+//   ─Activity─ Events · Audit(view_logs…) · ─Detail─ Metadata
+// — kind-aware header (icon/noun/chips), rail count badges, active toggle
+// gated to manage_groups (the source hid it below that tier), kebab context
+// menu (Invite Member · Add Sub-{Noun} · Configure Auth · View Parent ·
+// Deactivate/Activate), and cross-record navigation (parent/sub-group links
+// open a STACKED GroupDetail — native <dialog> stacking).
+//
+// Deviations from source, all deliberate and documented in-section:
+//   · "Edit {Noun}" (the GroupForms.detailed modal) is not carried — the
+//     Identity section IS that form, as an autosave surface covering every
+//     field it had except avatar (no upload pipeline in portal-mojo yet).
+//   · The header aux meta line ("Last activity 50m ago" under the toggle)
+//     folds into the chips row — DetailView has no right-gutter meta slot;
+//     Overview's KPI carries the same fact.
+//   · Member rows use the packaged MemberDetail; optional callbacks keep the
+//     package decoupled while this app still opens UserDetail/GroupDetail.
+//   · Deactivate collects the REQUIRED reason (admin | abuse | archived —
+//     django-mojo services/disable.py GROUP_REST_REASONS); web-mojo's bare
+//     confirm predates that backend rule.
+import { useQueryClient, useQuery } from '@tanstack/react-query';
+import {
+    DetailView, Eyebrow, MetadataSection, formModal, modal, toast,
+    type DetailMenuEntry,
+} from 'portal-mojo/ui';
+import { mojoList, useCan, type Params } from 'portal-mojo/client/runtime';
+import {
+    GLOBAL_CREDENTIAL_PERMS, GroupApiKeyModel, GroupApiKeysSection,
+    WebhookSubscriptionModel, WebhookSubscriptionsSection,
+} from '../../credentials';
+import {
+    MEMBER_INVITE_PERMISSIONS, MEMBER_SAVE_PERMISSIONS, MEMBER_USER_DIRECTORY_PERMISSIONS,
+    MemberModel, openMemberAdmissionDialog,
+} from '../members';
+import { LogModel } from '../../monitoring';
+import {
+    GROUP_DESTRUCTIVE_PERMS, GROUP_MANAGE_PERMS,
+    GroupModel, type GroupRow,
+} from './models';
+import {
+    iconForKind, kindLabel,
+} from './group-sections/models';
+import { GEOFENCE_VIEW_PERMS } from './group-sections/geofence-data';
+import { groupAuditParams } from './group-sections/shared';
+import { openAuthConfigDialog } from './group-sections/AuthConfigDialog';
+import { OverviewSection } from './group-sections/OverviewSection';
+import { IdentitySection } from './group-sections/IdentitySection';
+import { MembersSection } from './group-sections/MembersSection';
+import { SubGroupsSection, runAddSubGroupFlow } from './group-sections/SubGroupsSection';
+import { GeofenceSection } from './group-sections/GeofenceSection';
+import { EventsSection } from './group-sections/EventsSection';
+import { AuditSection } from './group-sections/AuditSection';
+
+export { iconForKind } from './group-sections/models';
+
+const GLOBAL_SECURITY_PERMS = ['sys.view_security', 'sys.security'];
+const GLOBAL_LOG_PERMS = ['sys.view_logs', 'sys.manage_logs', 'sys.security'];
+
+/** Open another group's detail as a stacked modal (source _openGroupById). */
+function openGroupById(id: number) {
+    void modal.detail((close) => <GroupDetail id={id} onClose={() => close(null)} />);
+}
+
+/**
+ * count-only peek sharing useModelList's exact cache key ([endpoint,
+ * params]), so a section mounting the same list dedupes with the badge.
+ * `enabled:false` for gated surfaces (a non-manager's webhook badge must
+ * not fire a guaranteed-403 request per open).
+ */
+function useCountPeek(endpoint: string, params: Params, enabled = true): number | null {
+    const q = useQuery({
+        queryKey: [endpoint, params],
+        queryFn: () => mojoList(endpoint, params),
+        enabled,
+    });
+    return q.data?.count ?? null;
+}
+
+export function GroupDetail({ id, onClose }: { id: number; onClose: () => void }) {
+    const qc = useQueryClient();
+    const { data: group, isPending } = GroupModel.useOne(id);
+    const groupSave = GroupModel.useSave();
+    const disable = GroupModel.useAction('disable');
+    const reactivate = GroupModel.useAction('reactivate');
+    const { can: canManage } = useCan(GROUP_MANAGE_PERMS);
+    const { can: canAccessCredentials } = useCan(GLOBAL_CREDENTIAL_PERMS);
+    const { can: canViewAudit } = useCan(GLOBAL_LOG_PERMS);
+    const { can: canInviteMember } = useCan(MEMBER_INVITE_PERMISSIONS);
+    const { can: canCreateMember } = useCan(MEMBER_SAVE_PERMISSIONS);
+    const { can: canReadUsers } = useCan(MEMBER_USER_DIRECTORY_PERMISSIONS);
+
+    // Rail count badges (source setBadge wiring, as controlled props). The
+    // member/apikey peeks share Overview's keys and dedupe; the gated ones
+    // hold off until the caller could actually open the section.
+    const memberCount = useCountPeek(MemberModel.endpoint, { group: id, size: 1, is_active: true });
+    const subCount = useCountPeek(GroupModel.endpoint, { parent: id, size: 1 });
+    const keyCount = useCountPeek(GroupApiKeyModel.endpoint, { group: id, size: 1 }, canAccessCredentials);
+    const hookCount = useCountPeek(WebhookSubscriptionModel.endpoint, { group: id, size: 1 }, canAccessCredentials);
+    const auditCount = useCountPeek(LogModel.endpoint, { ...groupAuditParams(id), size: 1 }, canViewAudit);
+
+    if (isPending || !group) {
+        return <div className="detail-loading"><span className="skel skel-block" /></div>;
+    }
+
+    const noun = kindLabel(group.kind) || 'Group';
+
+    /** Deactivate collects the REQUIRED reason (admin | abuse | archived). */
+    const deactivate = async () => {
+        const data = await formModal({
+            ...GroupModel.forms.disable!,
+            title: `Deactivate ${noun.toLowerCase()}`,
+            intro: <>Deactivate <b>{group.name}</b>? Members keep their accounts; the group stops resolving.</>,
+        });
+        if (!data) return;
+        const payload: Record<string, unknown> = { reason: data.reason };
+        if (data.note) payload.note = data.note;
+        try {
+            await disable.mutateAsync({ id: group.id, payload });
+            toast.success(`${noun} deactivated`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Deactivate failed');
+        }
+    };
+
+    const activate = async () => {
+        try {
+            await reactivate.mutateAsync({ id: group.id });
+            toast.success(`${noun} reactivated`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Reactivate failed');
+        }
+    };
+
+    // Kebab — the source contextItems (GroupView.js:1361-1373) minus "Edit
+    // {Noun}" (Identity autosave replaces it — see the header comment).
+    const MENU: DetailMenuEntry<GroupRow>[] = [
+        {
+            label: 'Add or Invite Member', icon: 'bi-person-plus',
+            permissions: MEMBER_INVITE_PERMISSIONS,
+            onSelect: () => {
+                void openMemberAdmissionDialog({
+                    group,
+                    canInvite: canInviteMember,
+                    canCreate: canCreateMember,
+                    canReadUsers,
+                    queryClient: qc,
+                });
+            },
+        },
+        {
+            label: `Add Sub-${noun}`, icon: 'bi-diagram-3',
+            permissions: GROUP_MANAGE_PERMS,
+            onSelect: () => { void runAddSubGroupFlow(group, groupSave.mutateAsync); },
+        },
+        {
+            label: 'Configure Auth', icon: 'bi-box-arrow-in-right',
+            permissions: GROUP_MANAGE_PERMS,
+            onSelect: () => { openAuthConfigDialog(group); },
+        },
+        {
+            label: 'View Parent', icon: 'bi-arrow-up-right-square',
+            when: (g) => Boolean(g?.parent?.id),
+            onSelect: () => { if (group.parent?.id) openGroupById(group.parent.id); },
+        },
+        { divider: true },
+        {
+            label: group.is_active ? `Deactivate ${noun}` : `Activate ${noun}`,
+            icon: group.is_active ? 'bi-toggle-off' : 'bi-toggle-on',
+            danger: group.is_active,
+            permissions: GROUP_DESTRUCTIVE_PERMS,
+            onSelect: () => { void (group.is_active ? deactivate() : activate()); },
+        },
+    ];
+
+    const shownMembers = memberCount ?? group.member_count;
+    const timezone = typeof group.metadata?.timezone === 'string' ? group.metadata.timezone : null;
+    const eodRaw = group.metadata?.eod_hour;
+    const eodChip = eodRaw !== undefined && eodRaw !== null && eodRaw !== ''
+        ? `EOD ${String(eodRaw).padStart(2, '0')}:00` : null;
+
+    return (
+        <DetailView<GroupRow>
+            icon={iconForKind(group.kind)}
+            title={group.name}
+            subtitle={group.parent?.name ?? undefined}
+            chips={[
+                ...(group.kind ? [{ text: kindLabel(group.kind), tone: 'primary' as const }] : []),
+                ...(shownMembers > 0 ? [{ icon: 'bi-people', text: `${shownMembers} member${shownMembers === 1 ? '' : 's'}`, tone: 'muted' as const }] : []),
+                ...(subCount != null && subCount > 0 ? [{ icon: 'bi-diagram-3', text: `${subCount} sub-group${subCount === 1 ? '' : 's'}`, tone: 'muted' as const }] : []),
+                ...(timezone ? [{ text: timezone, tone: 'muted' as const }] : []),
+                ...(eodChip ? [{ text: eodChip, tone: 'muted' as const }] : []),
+                ...(group.metadata?.portal ? [{ icon: 'bi-globe', text: 'Has portal', tone: 'muted' as const }] : []),
+            ]}
+            // Toggle hidden below manage_groups (source _buildHeaderAux gate).
+            // Off → deactivate flow (cancel leaves it on); on → reactivate.
+            active={canManage
+                ? { value: group.is_active, onChange: (next) => { void (next ? activate() : deactivate()); } }
+                : undefined}
+            contextMenu={MENU}
+            menuContext={group}
+            badges={{
+                Members: shownMembers > 0 ? shownMembers : null,
+                SubGroups: subCount != null && subCount > 0 ? subCount : null,
+                ApiKeys: keyCount != null && keyCount > 0 ? keyCount : null,
+                Webhooks: hookCount != null && hookCount > 0 ? hookCount : null,
+                Audit: auditCount != null && auditCount > 0 ? auditCount : null,
+            }}
+            onClose={onClose}
+            sections={[
+                {
+                    key: 'Overview', label: 'Overview', icon: 'bi-grid-1x2',
+                    render: () => (
+                        <OverviewSection
+                            group={group}
+                            openGroup={openGroupById}
+                            canViewCredentials={canAccessCredentials}
+                            canViewAudit={canViewAudit}
+                        />
+                    ),
+                },
+                { key: 'Identity', label: 'Identity', icon: 'bi-card-text', render: () => <IdentitySection group={group} editable={canManage} /> },
+                { divider: 'Membership' },
+                { key: 'Members', label: 'Members', icon: 'bi-people', render: () => <MembersSection group={group} openGroup={openGroupById} /> },
+                { key: 'SubGroups', label: 'Sub-Groups', icon: 'bi-diagram-3', render: () => <SubGroupsSection group={group} openGroup={openGroupById} /> },
+                { divider: 'Access' },
+                {
+                    key: 'ApiKeys', label: 'API Keys', icon: 'bi-key',
+                    permissions: GLOBAL_CREDENTIAL_PERMS,
+                    render: () => <GroupApiKeysSection group={group} permission={GLOBAL_CREDENTIAL_PERMS} />,
+                },
+                {
+                    key: 'Webhooks', label: 'Webhooks', icon: 'bi-broadcast',
+                    permissions: GLOBAL_CREDENTIAL_PERMS,
+                    render: () => <WebhookSubscriptionsSection group={group} permission={GLOBAL_CREDENTIAL_PERMS} />,
+                },
+                {
+                    key: 'Geofencing', label: 'Geofencing', icon: 'bi-globe-americas',
+                    permissions: GEOFENCE_VIEW_PERMS,
+                    render: () => <GeofenceSection group={group} />,
+                },
+                { divider: 'Activity' },
+                {
+                    key: 'Events', label: 'Events', icon: 'bi-calendar-event',
+                    permissions: GLOBAL_SECURITY_PERMS,
+                    render: () => <EventsSection group={group} />,
+                },
+                {
+                    key: 'Audit', label: 'Audit', icon: 'bi-clock-history',
+                    // Wider than the source's bare 'view_logs': the fetch
+                    // itself needs logit's VIEW_PERMS, so the gate matches
+                    // what can actually load (fail-closed alignment).
+                    permissions: GLOBAL_LOG_PERMS,
+                    render: () => <AuditSection group={group} />,
+                },
+                { divider: 'Detail' },
+                {
+                    key: 'Metadata', label: 'Metadata', icon: 'bi-braces',
+                    render: () => (
+                        <>
+                            {canManage && (
+                                <MetadataSection
+                                    endpoint={GroupModel.endpoint}
+                                    id={group.id}
+                                    metadata={group.metadata ?? {}}
+                                    onSaved={(next) => {
+                                        // Owner write-through + refetch (the primitive is
+                                        // controlled — it never mirrors server state).
+                                        qc.setQueryData(GroupModel.keys.one(group.id), { ...group, metadata: next });
+                                        void GroupModel.invalidate(qc);
+                                    }}
+                                />
+                            )}
+                            <div style={{ marginTop: 16 }}>
+                                <Eyebrow>Raw metadata (JSON)</Eyebrow>
+                                <pre className="dim" style={{ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }}><code>{JSON.stringify(group.metadata ?? {}, null, 2)}</code></pre>
+                            </div>
+                        </>
+                    ),
+                },
+            ]}
+        />
+    );
+}