portal-mojo 0.2.20 → 0.2.21

package/src/admin/dns/DomainRegistrarSettings.tsx

@@ -0,0 +1,52 @@
+import { useRef, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { hasPermission, useMe } from '../../client/runtime';
+import { fetchDomainOverview, saveDomainRegistrarSettings } from './registrar-api';
+import { DNS_MANAGE_PERMISSIONS, DomainModel, type DomainRow } from './models';
+import { modal } from '../../ui';
+import { redactRegistrarError } from './purchase-data';
+
+export function DomainRegistrarSettings({ domain, onBusyChange, close }: { domain: DomainRow; onBusyChange?: (busy: boolean) => void; close?: () => void }) {
+    const { data: me } = useMe(); const queryClient = useQueryClient();
+    const [autoRenew, setAutoRenew] = useState(domain.auto_renew === true);
+    const [privacy, setPrivacy] = useState(domain.privacy === true);
+    const [live, setLive] = useState(domain);
+    const [busy, setBusy] = useState(false); const [error, setError] = useState(''); const [saved, setSaved] = useState(false);
+    const [uncertain, setUncertain] = useState(false); const inFlight = useRef(false);
+    if (domain.provider !== 'route53' || !hasPermission(me ?? null, DNS_MANAGE_PERMISSIONS, null)) return null;
+    const changed = autoRenew !== (live.auto_renew === true) || privacy !== (live.privacy === true);
+    const submit = async (event: React.FormEvent) => {
+        event.preventDefault(); if (inFlight.current || uncertain || !changed) return;
+        const changes: Partial<Pick<DomainRow, 'auto_renew' | 'privacy'>> = {};
+        if (autoRenew !== (live.auto_renew === true)) changes.auto_renew = autoRenew;
+        if (privacy !== (live.privacy === true)) changes.privacy = privacy;
+        inFlight.current = true; onBusyChange?.(true); setBusy(true); setError(''); setSaved(false);
+        let failed = false;
+        try { await saveDomainRegistrarSettings(domain.id, changes); }
+        catch (reason) { failed = true; setUncertain(true); setError(`${redactRegistrarError(reason)} The registrar outcome is uncertain. Inspect the registrar before another change.`); }
+        finally {
+            try {
+                const fresh = await fetchDomainOverview(domain.id);
+                queryClient.setQueryData(DomainModel.keys.one(domain.id), fresh);
+                setLive(fresh); setAutoRenew(fresh.auto_renew === true); setPrivacy(fresh.privacy === true);
+                if (!failed) setSaved(true);
+            } catch { setUncertain(true); setError('The authoritative domain could not be refreshed. Inspect the registrar and reopen this domain before making another change.'); }
+            await DomainModel.invalidate(queryClient);
+            inFlight.current = false; onBusyChange?.(false); setBusy(false);
+        }
+    };
+    return <form className="modal-pad domains-registrar-settings" onSubmit={(event) => void submit(event)}>
+        <h2 className="modal-title">Registrar settings</h2><p className="dim">Route 53 only. A database save does not prove that the registrar applied the change.</p>
+        {error && <div className="form-alert" role="alert">{error}</div>}
+        {live.last_error && <div className="form-alert" role="status"><b>Registrar warning</b><p>{redactRegistrarError(live.last_error)}</p><p>This may be historical. Inspect the registrar before assuming the setting was applied.</p></div>}
+        {saved && <p role="status">Domain refreshed after save. Check the registrar for application of these settings.</p>}
+        <label className="field"><span><input type="checkbox" checked={autoRenew} disabled={busy || uncertain} onChange={(event) => setAutoRenew(event.target.checked)} /> Auto-renew</span></label>
+        <label className="field"><span><input type="checkbox" checked={privacy} disabled={busy || uncertain} onChange={(event) => setPrivacy(event.target.checked)} /> WHOIS privacy</span></label>
+        <div className="modal-actions">{close && <button className="btn" type="button" disabled={busy} onClick={close}>Close</button>}<button className="btn btn-primary" type="submit" disabled={busy || uncertain || !changed}>{busy ? 'Saving and refreshing…' : 'Save registrar settings'}</button></div>
+    </form>;
+}
+
+export function showDomainRegistrarSettings(domain: DomainRow): Promise<unknown> {
+    let busy = false;
+    return modal.open((close) => <DomainRegistrarSettings domain={domain} close={() => close(null)} onBusyChange={(value) => { busy = value; }} />, { size: 'md', canDismiss: () => !busy });
+}

package/src/admin/dns/DomainsPage.tsx

@@ -1,19 +1,12 @@
 import { useQueryClient } from '@tanstack/react-query';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { Badge, ModelTable, fmt, modal, type Column, type FilterDef } from '../../ui';
 import { DomainDetail } from './DomainDetail';
 import { hasPermission, useMe } from '../../client/runtime';
-import { openSharedValidation } from './SharedValidationDialog';
 import { DomainModel, DNS_MANAGE_PERMISSIONS, type DomainRow } from './models';
 import { providerLabel } from './data';
+import { domainRecordsHref, domainScopeLabel, supportsDomainRecords } from './domain-navigation';
 
-const columns: Column<DomainRow>[] = [
-    { key: 'name', label: 'Domain', sortable: true, hideable: false, render: (row) => <code>{row.name}</code> },
-    { key: 'provider', label: 'Provider', sortable: true, render: (row) => providerLabel(row.provider) },
-    { key: 'status', label: 'Status', sortable: true, render: (row) => <Badge tone={fmt.inferTone(row.status)}>{row.status}</Badge> },
-    { key: 'group', label: 'Group', render: (row) => typeof row.group === 'object' ? row.group?.name ?? 'Platform' : row.group ?? 'Platform' },
-    { key: 'expires', label: 'Expires', sortable: true, render: (row) => fmt.date(row.expires) },
-    { key: 'created', label: 'Created', sortable: true, render: (row) => fmt.date(row.created) },
-];
 const filters: FilterDef[] = [
     { key: 'provider', label: 'Provider', type: 'select', options: [{ value: 'route53', label: 'Route 53' }, { value: 'godaddy', label: 'GoDaddy' }, { value: 'mojo', label: 'Mojo certificate-only' }] },
     { key: 'status', label: 'Status', type: 'select', options: ['pending', 'registering', 'active'].map((value) => ({ value, label: value })) },
@@ -22,10 +15,26 @@ const filters: FilterDef[] = [
 export function DomainsPage() {
     const queryClient = useQueryClient();
     const { data: me } = useMe();
+    const location = useLocation(); const navigate = useNavigate();
     const canManage = hasPermission(me ?? null, DNS_MANAGE_PERMISSIONS, null);
-    const open = async (row: DomainRow) => {
-        await DomainModel.fetchOne(queryClient, row.id);
-        await modal.detail((close) => <DomainDetail id={row.id} onClose={() => close(null)} />);
+    const start = async (initialMode: 'register' | 'adopt' | 'purchase') => {
+        const { showDomainOnboarding } = await import('./DomainOnboardingDialog');
+        await showDomainOnboarding({ initialMode });
+    };
+    const open = (row: DomainRow) => {
+        void DomainModel.fetchOne(queryClient, row.id).catch(() => undefined);
+        void modal.detail((close) => <DomainDetail id={row.id} onClose={() => close(null)} />);
     };
-    return <ModelTable<DomainRow> model={DomainModel} eyebrow="Infrastructure · DNS" title="Domains" searchable searchPlaceholder="Search domain names" columns={columns} filters={filters} defaultParams={{ sort: 'name' }} columnChooser persistState persistKey="admin:dns:domains" onRowClick={(row) => void open(row)} {...(canManage ? { onAdd: () => void openSharedValidation(), addLabel: 'Shared validation setup' } : {})} />;
+    const columns: Column<DomainRow>[] = [
+        { key: 'name', label: 'Domain', sortable: true, hideable: false, render: (row) => <span className="ops-cell"><strong>{row.name}</strong><small>{providerLabel(row.provider)}</small></span> },
+        { key: 'status', label: 'Status', sortable: true, render: (row) => <Badge tone={fmt.inferTone(row.status)}>{row.status}</Badge> },
+        { key: 'expires', label: 'Expires', sortable: true, render: (row) => fmt.date(row.expires) },
+        { key: 'group', label: 'Scope', render: (row) => <span className="domains-scope">{domainScopeLabel(row.group)}</span> },
+        { key: 'records', label: 'DNS Records', render: (row) => supportsDomainRecords(row.provider) ? <button className="btn btn-sm" type="button" onClick={(event) => { event.stopPropagation(); navigate(domainRecordsHref(location.pathname, row.id)); }}>DNS Records <i className="bi bi-arrow-right" /></button> : <span className="dim">{row.provider === 'mojo' ? 'Certificate-only' : 'Provider unavailable'}</span> },
+    ];
+    return <div className="domains-page">
+        <header className="domains-header"><div><div className="eyebrow">Network &amp; hosting</div><h1>Domains</h1><p className="dim">Manage the names this installation controls.</p></div>{canManage && <div className="domains-actions"><button className="btn" onClick={() => void start('register')}>Register existing</button>{me?.is_superuser === true && <button className="btn" onClick={() => void start('adopt')}>Adopt</button>}<button className="btn btn-primary" onClick={() => void start('purchase')}>Buy domain</button></div>}</header>
+        <ModelTable<DomainRow> model={DomainModel} title="Managed domains" searchable searchPlaceholder="Search domain names" columns={columns} filters={filters} defaultParams={{ sort: 'name' }} columnChooser persistState persistKey="admin:dns:domains" onRowClick={open} />
+        {canManage && <details className="domains-advanced"><summary>Advanced</summary><p className="dim">Connect external domains to shared wildcard validation, or review controller allocations and trust.</p><button className="btn" onClick={() => void import('./SharedValidationDialog').then(({ openSharedValidation }) => openSharedValidation())}>Shared validation setup</button></details>}
+    </div>;
 }

package/src/admin/dns/SharedValidationDialog.tsx

@@ -258,7 +258,7 @@ export function SharedValidationDialog({ domain: fixedDomain, close, onBusy }: {
             <label className="field"><span className="field-label">Existing validation target (optional for inspection)</span><input ref={allocationRef} className="input" maxLength={253} disabled={busy} placeholder="existing-target.acme-hub.example" onChange={() => setInspected(null)} /><span className="field-help">Only the public target hostname supplied by its controller. Knowing it does not grant issuance authority.</span></label>
             <div className="dns-shared-actions"><button className="btn" disabled={busy} onClick={inspect}>Inspect plan</button><button className="btn" disabled={busy || plan.loading || !inspected} onClick={() => void refresh()}>Refresh</button></div>
             {plan.loading && inspected && <p className="dim">Checking validation…</p>}{plan.error && <div className="dns-errors" role="alert">{plan.error.message}{r && ' Displaying the last successful check.'}</div>}
-            {r && <><ValidationFacts readiness={r} />{r.connection_request && canManage && <div className="dns-shared-request"><strong>Public connection request</strong><RequestFacts request={r.connection_request} /><p>Send this file to the allocation controller. They open their deployment’s Domains → Shared validation setup → Controller review and import it.</p><div className="dns-shared-actions"><button className="btn" disabled={busy || !!plan.error || plan.loading} onClick={() => void exportRequest('download')}>Download request</button>{typeof navigator.canShare === 'function' && typeof navigator.share === 'function' && <button className="btn" disabled={busy || !!plan.error || plan.loading} onClick={() => void exportRequest('share')}>Share request</button>}<button className="btn" disabled={busy || !!plan.error || plan.loading} onClick={() => void exportRequest('copy')}>Copy request</button></div></div>}
+            {r && <><ValidationFacts readiness={r} />{r.connection_request && canManage && <div className="dns-shared-request"><strong>Public connection request</strong><RequestFacts request={r.connection_request} /><p>Send this file to the allocation controller. They open their deployment’s Domains → Advanced → Shared validation setup → Controller review and import it.</p><div className="dns-shared-actions"><button className="btn" disabled={busy || !!plan.error || plan.loading} onClick={() => void exportRequest('download')}>Download request</button>{typeof navigator.canShare === 'function' && typeof navigator.share === 'function' && <button className="btn" disabled={busy || !!plan.error || plan.loading} onClick={() => void exportRequest('share')}>Share request</button>}<button className="btn" disabled={busy || !!plan.error || plan.loading} onClick={() => void exportRequest('copy')}>Copy request</button></div></div>}
                 {canManage && <div className="dns-shared-actions">
                     {r.capabilities.can_connect && r.next_action.code !== 'grant_trust' && <button className="btn btn-primary" disabled={busy || !!plan.error || plan.loading || refreshRequired} onClick={() => void localAction('connect')}>{r.connection ? 'Connect approved validation' : 'Prepare connection'}</button>}
                     {r.capabilities.can_restart && r.trust.state === 'revoked' && <button className="btn btn-primary" disabled={busy || !!plan.error || plan.loading || refreshRequired} onClick={() => void localAction('restart')}>Prepare fresh request</button>}

package/src/admin/dns/api.ts

@@ -226,8 +226,10 @@ export function quoteDomain(input: { group: number; domain: string; years?: numb
     return postData('/api/dnsman/registrar/quote', input);
 }
 
-export async function purchaseDomain(input: { group: number; purchase: number; confirm_token: string }): Promise<RegistrarPurchaseResult> {
-    return sanitizePurchaseResult(await postData('/api/dnsman/registrar/purchase', input));
+export async function purchaseDomain(input: { group: number; purchase: number; confirm_token: string; confirm_domain: string; confirm_price: string }): Promise<RegistrarPurchaseResult> {
+    // Snapshot once: the safe 440 continuation must use the identical quote.
+    const body = Object.freeze({ ...input });
+    return sanitizePurchaseResult(await withFreshAuth(() => postData('/api/dnsman/registrar/purchase', body)));
 }
 
 /** Detail and its error remain modal-local; neither enters Query cache. */

package/src/admin/dns/domain-navigation.ts

@@ -0,0 +1,16 @@
+import type { DomainRow } from './models';
+
+/** The observed DNS route supplies the mount, including embedded prefixes. */
+export function dnsAdminMount(pathname: string): string {
+    const marker = pathname.indexOf('/dns/');
+    return marker < 0 ? '' : pathname.slice(0, marker);
+}
+export function domainRecordsHref(pathname: string, id: number): string {
+    return `${dnsAdminMount(pathname)}/dns/records?domain=${encodeURIComponent(id)}`;
+}
+export function domainScopeLabel(group: DomainRow['group']): string {
+    return group == null ? 'Platform' : typeof group === 'number' ? `Group #${group}` : group.name;
+}
+export function supportsDomainRecords(provider: string): boolean {
+    return provider === 'route53' || provider === 'godaddy';
+}

package/src/admin/dns/registrar-api.ts

@@ -0,0 +1,13 @@
+import { mojoCall } from '../../client/runtime';
+import { sanitizeDomainRow, type DomainRow } from './models';
+
+/** Registrar writes are deliberately narrower than the generic model surface. */
+export async function saveDomainRegistrarSettings(id: number, changes: Partial<Pick<DomainRow, 'auto_renew' | 'privacy'>>): Promise<void> {
+    if (Object.keys(changes).length === 0 || Object.entries(changes).some(([key, value]) => !['auto_renew', 'privacy'].includes(key) || typeof value !== 'boolean')) throw new Error('Only changed boolean registrar settings may be saved');
+    await mojoCall(`/api/dnsman/domain/${id}`, { method: 'POST', body: { ...changes } });
+}
+
+/** Authoritative uncached read after every attempted registrar write. */
+export async function fetchDomainOverview(id: number): Promise<DomainRow> {
+    return sanitizeDomainRow((await mojoCall(`/api/dnsman/domain/${id}`)).data);
+}

package/src/admin/domains/assistant.ts

@@ -1,3 +1,4 @@
+import { namedPage } from './lazy-page';
 import type { AdminSection } from '../core';
 import { ASSISTANT_PERMISSIONS } from '../assistant/permissions';
 
@@ -5,10 +6,10 @@ export { ASSISTANT_PERMISSIONS } from '../assistant/permissions';
 export const ASSISTANT_ADMIN_SECTION: AdminSection = {
     id: 'assistant', basePath: 'assistant', title: 'Assistant', icon: 'bi-stars', navigationGroup: 'assistant', permissions: ASSISTANT_PERMISSIONS,
     routes: [
-        { path: 'setup', label: 'Setup', requireSuperuser: true, loadComponent: () => import('../assistant/AssistantSetupPage').then(({ AssistantSetupPage }) => ({ default: AssistantSetupPage })) },
-        { path: 'conversations', label: 'Conversations', loadComponent: () => import('../assistant/pages').then(({ ConversationsPage }) => ({ default: ConversationsPage })), permissions: ASSISTANT_PERMISSIONS },
-        { path: 'skills', label: 'Skills', loadComponent: () => import('../assistant/pages').then(({ SkillsPage }) => ({ default: SkillsPage })), permissions: ASSISTANT_PERMISSIONS },
-        { path: 'memories', label: 'Memory', loadComponent: () => import('../assistant/pages').then(({ MemoriesPage }) => ({ default: MemoriesPage })), permissions: ['sys.assistant'] },
+        { path: 'setup', label: 'Setup', requireSuperuser: true, loadComponent: () => import('../assistant/AssistantSetupPage').then(namedPage('AssistantSetupPage')) },
+        { path: 'conversations', label: 'Conversations', loadComponent: () => import('../assistant/pages').then(namedPage('ConversationsPage')), permissions: ASSISTANT_PERMISSIONS },
+        { path: 'skills', label: 'Skills', loadComponent: () => import('../assistant/pages').then(namedPage('SkillsPage')), permissions: ASSISTANT_PERMISSIONS },
+        { path: 'memories', label: 'Memory', loadComponent: () => import('../assistant/pages').then(namedPage('MemoriesPage')), permissions: ['sys.assistant'] },
     ],
 };
 export const ASSISTANT_ADMIN_SECTIONS = [ASSISTANT_ADMIN_SECTION] as const;

package/src/admin/domains/communications.ts

@@ -1,3 +1,4 @@
+import { namedPage } from './lazy-page';
 import type { AdminSection } from '../core';
 import { EMAIL_ADMIN_PERMISSIONS, PUBLIC_MESSAGE_VIEW_PERMISSIONS } from '../messaging/models';
 import { PUSH_ADMIN_PERMISSIONS } from '../messaging/push/models';
@@ -7,29 +8,29 @@ import { SHORTLINK_MANAGE_PERMISSIONS } from '../shortlinks/models';
 export const SHORTLINKS_ADMIN_SECTION: AdminSection = {
     id: 'shortlinks', basePath: 'shortlinks', title: 'Shortlinks', icon: 'bi-link-45deg', navigationGroup: 'communications', permissions: SHORTLINK_MANAGE_PERMISSIONS,
     routes: [
-        { path: 'links', label: 'Links', loadComponent: () => import('../shortlinks/ShortlinksPage').then(({ ShortlinksPage }) => ({ default: ShortlinksPage })), permissions: SHORTLINK_MANAGE_PERMISSIONS },
-        { path: 'history', label: 'Click history', loadComponent: () => import('../shortlinks/ShortlinkHistoryPage').then(({ ShortlinkHistoryPage }) => ({ default: ShortlinkHistoryPage })), permissions: SHORTLINK_MANAGE_PERMISSIONS },
+        { path: 'links', label: 'Links', loadComponent: () => import('../shortlinks/ShortlinksPage').then(namedPage('ShortlinksPage')), permissions: SHORTLINK_MANAGE_PERMISSIONS },
+        { path: 'history', label: 'Click history', loadComponent: () => import('../shortlinks/ShortlinkHistoryPage').then(namedPage('ShortlinkHistoryPage')), permissions: SHORTLINK_MANAGE_PERMISSIONS },
     ],
 };
 export const EMAIL_ADMIN_SECTION: AdminSection = {
     id: 'email', basePath: 'email', title: 'Email', icon: 'bi-envelope-at', navigationGroup: 'communications', permissions: EMAIL_ADMIN_PERMISSIONS,
     routes: [
-        { path: 'domains', label: 'Email Domains', loadComponent: () => import('../messaging/EmailDomainsPage').then(({ EmailDomainsPage }) => ({ default: EmailDomainsPage })), permissions: EMAIL_ADMIN_PERMISSIONS },
-        { path: 'mailboxes', label: 'Mailboxes', loadComponent: () => import('../messaging/MailboxesPage').then(({ MailboxesPage }) => ({ default: MailboxesPage })), permissions: EMAIL_ADMIN_PERMISSIONS },
-        { path: 'sent', label: 'Sent Messages', loadComponent: () => import('../messaging/SentMessagesPage').then(({ SentMessagesPage }) => ({ default: SentMessagesPage })), permissions: EMAIL_ADMIN_PERMISSIONS },
-        { path: 'templates', label: 'Email Templates', loadComponent: () => import('../messaging/EmailTemplatesPage').then(({ EmailTemplatesPage }) => ({ default: EmailTemplatesPage })), permissions: EMAIL_ADMIN_PERMISSIONS },
+        { path: 'domains', label: 'Email Domains', loadComponent: () => import('../messaging/EmailDomainsPage').then(namedPage('EmailDomainsPage')), permissions: EMAIL_ADMIN_PERMISSIONS },
+        { path: 'mailboxes', label: 'Mailboxes', loadComponent: () => import('../messaging/MailboxesPage').then(namedPage('MailboxesPage')), permissions: EMAIL_ADMIN_PERMISSIONS },
+        { path: 'sent', label: 'Sent Messages', loadComponent: () => import('../messaging/SentMessagesPage').then(namedPage('SentMessagesPage')), permissions: EMAIL_ADMIN_PERMISSIONS },
+        { path: 'templates', label: 'Email Templates', loadComponent: () => import('../messaging/EmailTemplatesPage').then(namedPage('EmailTemplatesPage')), permissions: EMAIL_ADMIN_PERMISSIONS },
     ],
 };
 export const PUBLIC_MESSAGES_ADMIN_SECTION: AdminSection = {
     id: 'public-messages', basePath: 'messaging', title: 'Contact Messages', icon: 'bi-chat-left-text', navigationGroup: 'communications', permissions: PUBLIC_MESSAGE_VIEW_PERMISSIONS,
-    routes: [{ path: 'public-messages', label: 'Contact Messages', loadComponent: () => import('../messaging/PublicMessagesPage').then(({ PublicMessagesPage }) => ({ default: PublicMessagesPage })), permissions: PUBLIC_MESSAGE_VIEW_PERMISSIONS }],
+    routes: [{ path: 'public-messages', label: 'Contact Messages', loadComponent: () => import('../messaging/PublicMessagesPage').then(namedPage('PublicMessagesPage')), permissions: PUBLIC_MESSAGE_VIEW_PERMISSIONS }],
 };
 export const PUSH_ADMIN_SECTION: AdminSection = {
     id: 'push', basePath: 'push', title: 'Push Notifications', icon: 'bi-bell', navigationGroup: 'communications', permissions: PUSH_ADMIN_PERMISSIONS,
-    routes: [{ path: '', label: 'Push Notifications', loadComponent: () => import('../messaging/push/PushPage').then(({ PushPage }) => ({ default: PushPage })), permissions: PUSH_ADMIN_PERMISSIONS }],
+    routes: [{ path: '', label: 'Push Notifications', loadComponent: () => import('../messaging/push/PushPage').then(namedPage('PushPage')), permissions: PUSH_ADMIN_PERMISSIONS }],
 };
 export const PHONE_HUB_ADMIN_SECTION: AdminSection = {
     id: 'phonehub', basePath: 'phonehub', title: 'Phone Hub', icon: 'bi-phone', navigationGroup: 'communications', permissions: PHONE_HUB_ADMIN_PERMISSIONS,
-    routes: [{ path: '', label: 'Phone Hub', loadComponent: () => import('../phonehub/PhoneHubPage').then(({ PhoneHubPage }) => ({ default: PhoneHubPage })), permissions: PHONE_HUB_ADMIN_PERMISSIONS }],
+    routes: [{ path: '', label: 'Phone Hub', loadComponent: () => import('../phonehub/PhoneHubPage').then(namedPage('PhoneHubPage')), permissions: PHONE_HUB_ADMIN_PERMISSIONS }],
 };
 export const COMMUNICATIONS_ADMIN_SECTIONS = [SHORTLINKS_ADMIN_SECTION, EMAIL_ADMIN_SECTION, PUBLIC_MESSAGES_ADMIN_SECTION, PUSH_ADMIN_SECTION, PHONE_HUB_ADMIN_SECTION] as const;

package/src/admin/domains/identity.ts

@@ -1,3 +1,4 @@
+import { namedPage } from './lazy-page';
 import type { AdminSection } from '../core';
 import { GLOBAL_CREDENTIAL_PERMS } from '../credentials/models';
 import { MEMBER_READ_PERMISSIONS } from '../identity/members/models';
@@ -7,35 +8,35 @@ 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,
-    routes: [{ path: 'users', label: 'Users', loadComponent: () => import('../identity/users/UsersPage').then(({ UsersPage }) => ({ default: UsersPage })), permissions: USER_VIEW_PERMISSIONS }],
+    routes: [{ path: 'users', label: 'Users', loadComponent: () => import('../identity/users/UsersPage').then(namedPage('UsersPage')), permissions: USER_VIEW_PERMISSIONS }],
 };
 
 export const MEMBERS_ADMIN_SECTION: AdminSection = {
     id: 'members', basePath: '', title: 'Members', icon: 'bi-person-badge', navigationGroup: 'identity-access', permissions: MEMBER_READ_PERMISSIONS,
-    routes: [{ path: 'members', label: 'Members', loadComponent: () => import('../identity/members/MembersPage').then(({ MembersPage }) => ({ default: MembersPage })), permissions: MEMBER_READ_PERMISSIONS }],
+    routes: [{ path: 'members', label: 'Members', loadComponent: () => import('../identity/members/MembersPage').then(namedPage('MembersPage')), permissions: MEMBER_READ_PERMISSIONS }],
 };
 
 export const CREDENTIALS_ADMIN_SECTION: AdminSection = {
     id: 'credentials', basePath: '', title: 'Credentials', icon: 'bi-key', navigationGroup: 'identity-access', permissions: GLOBAL_CREDENTIAL_PERMS,
     routes: [
-        { path: 'api-keys', label: 'Group API Keys', loadComponent: () => import('../credentials/group-api-keys').then(({ GroupApiKeysPage }) => ({ default: GroupApiKeysPage })), permissions: GLOBAL_CREDENTIAL_PERMS },
-        { path: 'webhook-subscriptions', label: 'Webhooks', loadComponent: () => import('../credentials/webhook-subscriptions').then(({ WebhookSubscriptionsPage }) => ({ default: WebhookSubscriptionsPage })), permissions: GLOBAL_CREDENTIAL_PERMS },
+        { path: 'api-keys', label: 'Group API Keys', loadComponent: () => import('../credentials/group-api-keys').then(namedPage('GroupApiKeysPage')), permissions: GLOBAL_CREDENTIAL_PERMS },
+        { path: 'webhook-subscriptions', label: 'Webhooks', loadComponent: () => import('../credentials/webhook-subscriptions').then(namedPage('WebhookSubscriptionsPage')), permissions: GLOBAL_CREDENTIAL_PERMS },
     ],
 };
 
 export const SIGNIN_ADMIN_SECTION: AdminSection = {
     id: 'signin', basePath: 'system/sign-in', title: 'Sign-in', icon: 'bi-box-arrow-in-right', navigationGroup: 'identity-access', permissions: SIGNIN_ADMIN_PERMISSIONS,
-    routes: [{ path: '', loadComponent: () => import('../signin/SigninPage').then(({ SigninPage }) => ({ default: SigninPage })), permissions: SIGNIN_ADMIN_PERMISSIONS }],
+    routes: [{ path: '', loadComponent: () => import('../signin/SigninPage').then(namedPage('SigninPage')), permissions: SIGNIN_ADMIN_PERMISSIONS }],
 };
 
 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 }],
+    routes: [{ path: 'groups', label: 'Groups', loadComponent: () => import('../identity/groups/GroupsPage').then(namedPage('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 })) }],
+    routes: [{ path: 'apikeys', label: 'Personal API Keys', loadComponent: () => import('../identity/users/PersonalApiKeysPage').then(namedPage('PersonalApiKeysPage')) }],
 };
 
 export const IDENTITY_ADMIN_SECTIONS = [

package/src/admin/domains/infrastructure.ts

@@ -1,3 +1,4 @@
+import { namedPage } from './lazy-page';
 import type { AdminSection } from '../core';
 import { DNS_MANAGE_PERMISSIONS, DNS_VIEW_PERMISSIONS } from '../dns/models';
 import { BUCKET_MANAGE_PERMS, STORAGE_VIEW_PERMS } from '../storage/permissions';
@@ -6,29 +7,34 @@ import { SETTINGS_PERMISSIONS } from '../settings/model';
 export const DNS_ADMIN_SECTION: AdminSection = {
     id: 'dns', title: 'DNS', icon: 'bi-globe2', navigationGroup: 'infrastructure', basePath: 'dns', permissions: DNS_VIEW_PERMISSIONS,
     routes: [
-        { path: 'domains', label: 'Domains', loadComponent: () => import('../dns/DomainsPage').then(({ DomainsPage }) => ({ default: DomainsPage })), permissions: DNS_VIEW_PERMISSIONS },
-        { path: 'records', label: 'DNS Records', loadComponent: () => import('../dns/DnsRecordsPage').then(({ DnsRecordsPage }) => ({ default: DnsRecordsPage })), permissions: DNS_VIEW_PERMISSIONS },
-        { path: 'certificates', label: 'Certificates', loadComponent: () => import('../dns/CertificatesPage').then(({ CertificatesPage }) => ({ default: CertificatesPage })), permissions: DNS_VIEW_PERMISSIONS },
-        { path: 'purchases', label: 'Domain Purchases', loadComponent: () => import('../dns/DomainPurchasesPage').then(({ DomainPurchasesPage }) => ({ default: DomainPurchasesPage })), permissions: DNS_VIEW_PERMISSIONS },
-        { path: 'registrant', label: 'Registrant Contact', loadComponent: () => import('../dns/RegistrantContactPage').then(({ RegistrantContactPage }) => ({ default: RegistrantContactPage })), permissions: DNS_MANAGE_PERMISSIONS },
-        { path: 'credentials', label: 'Provider Credentials', loadComponent: () => import('../dns/ProviderCredentialsPage').then(({ ProviderCredentialsPage }) => ({ default: ProviderCredentialsPage })), permissions: DNS_VIEW_PERMISSIONS },
+        { path: 'domains', label: 'Domains', loadComponent: () => import('../dns/DomainsPage').then(namedPage('DomainsPage')), permissions: DNS_VIEW_PERMISSIONS },
+        { path: 'records', label: 'DNS Records', loadComponent: () => import('../dns/DnsRecordsPage').then(namedPage('DnsRecordsPage')), permissions: DNS_VIEW_PERMISSIONS },
+        { path: 'certificates', label: 'Certificates', loadComponent: () => import('../dns/CertificatesPage').then(namedPage('CertificatesPage')), permissions: DNS_VIEW_PERMISSIONS },
+        { path: 'purchases', label: 'Domain Purchases', loadComponent: () => import('../dns/DomainPurchasesPage').then(namedPage('DomainPurchasesPage')), permissions: DNS_VIEW_PERMISSIONS },
+        { path: 'registrant', label: 'Registrant Contact', loadComponent: () => import('../dns/RegistrantContactPage').then(namedPage('RegistrantContactPage')), permissions: DNS_MANAGE_PERMISSIONS },
+        { path: 'credentials', label: 'Provider Credentials', loadComponent: () => import('../dns/ProviderCredentialsPage').then(namedPage('ProviderCredentialsPage')), permissions: DNS_VIEW_PERMISSIONS },
     ],
 };
 export const STORAGE_ADMIN_SECTION: AdminSection = {
     id: 'storage', basePath: 'storage', title: 'Storage', icon: 'bi-hdd-stack', navigationGroup: 'infrastructure', permissions: ['sys.view_fileman', 'sys.manage_files', 'sys.manage_aws', 'sys.files', ...SETTINGS_PERMISSIONS],
     routes: [
-        { path: 'buckets', label: 'Buckets', loadComponent: () => import('../storage/BucketsPage').then(({ BucketsPage }) => ({ default: BucketsPage })), permissions: BUCKET_MANAGE_PERMS },
-        { path: 'backends', label: 'Backends', loadComponent: () => import('../storage/BackendsPage').then(({ BackendsPage }) => ({ default: BackendsPage })), permissions: STORAGE_VIEW_PERMS },
-        { path: 'files', label: 'Files', loadComponent: () => import('../storage/FilesPage').then(({ FilesPage }) => ({ default: FilesPage })), permissions: STORAGE_VIEW_PERMS },
+        { path: 'buckets', label: 'Buckets', loadComponent: () => import('../storage/BucketsPage').then(namedPage('BucketsPage')), permissions: BUCKET_MANAGE_PERMS },
+        { path: 'backends', label: 'Backends', loadComponent: () => import('../storage/BackendsPage').then(namedPage('BackendsPage')), permissions: STORAGE_VIEW_PERMS },
+        { path: 'files', label: 'Files', loadComponent: () => import('../storage/FilesPage').then(namedPage('FilesPage')), permissions: STORAGE_VIEW_PERMS },
         // Media rendering edits three Setting rows, so it carries the Settings page's gate, not the storage one.
-        { path: 'rendering', label: 'Media rendering', loadComponent: () => import('../storage/MediaRenderingPage').then(({ MediaRenderingPage }) => ({ default: MediaRenderingPage })), permissions: SETTINGS_PERMISSIONS },
+        { path: 'rendering', label: 'Media rendering', loadComponent: () => import('../storage/MediaRenderingPage').then(namedPage('MediaRenderingPage')), permissions: SETTINGS_PERMISSIONS },
     ],
 };
 export const EDGE_ADMIN_SECTION: AdminSection = {
     id: 'edge', basePath: 'edge', title: 'Edge', icon: 'bi-hdd-network', navigationGroup: 'infrastructure', permissions: DNS_VIEW_PERMISSIONS,
     routes: [
-        { path: 'vhosts', label: 'Vhosts', loadComponent: () => import('../edge/VhostsPage').then(({ VhostsPage }) => ({ default: VhostsPage })), permissions: DNS_VIEW_PERMISSIONS },
-        { path: 'upstreams', label: 'Upstreams', loadComponent: () => import('../edge/UpstreamsPage').then(({ UpstreamsPage }) => ({ default: UpstreamsPage })), permissions: DNS_VIEW_PERMISSIONS },
+        { path: 'vhosts', label: 'Serving', loadComponent: () => import('../edge/VhostsPage').then(namedPage('VhostsPage')), permissions: DNS_VIEW_PERMISSIONS },
+        { path: 'upstreams', label: 'Upstreams', loadComponent: () => import('../edge/UpstreamsPage').then(namedPage('UpstreamsPage')), permissions: DNS_VIEW_PERMISSIONS },
     ],
 };
-export const INFRASTRUCTURE_ADMIN_SECTIONS = [DNS_ADMIN_SECTION, STORAGE_ADMIN_SECTION, EDGE_ADMIN_SECTION] as const;
+export const FLEET_ADMIN_SECTION: AdminSection = {
+    id: 'fleet', title: 'Fleet', icon: 'bi-cloud', navigationGroup: 'operations',
+    permissions: ['sys.view_admin', 'sys.manage_users', 'sys.manage_settings', 'sys.admin', 'sys.manage_aws'],
+    routes: [{ path: '', label: 'Fleet', loadComponent: () => import('../fleet/FleetPage').then(namedPage('FleetPage')) }],
+};
+export const INFRASTRUCTURE_ADMIN_SECTIONS = [FLEET_ADMIN_SECTION, DNS_ADMIN_SECTION, STORAGE_ADMIN_SECTION, EDGE_ADMIN_SECTION] as const;

package/src/admin/domains/lazy-page.ts

@@ -0,0 +1,6 @@
+import type { ComponentType } from 'react';
+
+/** Adapt an explicit named page export; every route keeps its literal lazy import. */
+export function namedPage<TName extends string>(name: TName) {
+    return <TModule extends Record<TName, ComponentType>>(module: TModule) => ({ default: module[name] });
+}

package/src/admin/domains/observability.ts

@@ -1,3 +1,4 @@
+import { namedPage } from './lazy-page';
 import type { AdminSection } from '../core';
 import { CLOUDWATCH_PERMISSIONS } from '../cloudwatch/data';
 import { DASHBOARD_METRIC_PERMISSIONS } from '../dashboard/data';
@@ -10,19 +11,19 @@ import { SECURITY_VIEW_PERMS } from '../security-permissions';
 export const ADMIN_DASHBOARD_PERMISSIONS = [...new Set([...DASHBOARD_METRIC_PERMISSIONS, ...SECURITY_VIEW_PERMS, ...JOBS_VIEW_PERMS, ...EMAIL_ADMIN_PERMISSIONS, ...LOGIN_SUMMARY_PERMS])];
 export const DASHBOARD_ADMIN_SECTION: AdminSection = {
     id: 'dashboard', basePath: '', title: 'Dashboard', icon: 'bi-grid-1x2', navigationGroup: null, permissions: ADMIN_DASHBOARD_PERMISSIONS,
-    routes: [{ path: '', label: 'Dashboard', loadComponent: () => import('../dashboard/AdminDashboardPage').then(({ AdminDashboardPage }) => ({ default: AdminDashboardPage })), permissions: ADMIN_DASHBOARD_PERMISSIONS, fallbackToFirstVisible: true }],
+    routes: [{ path: '', label: 'Dashboard', loadComponent: () => import('../dashboard/AdminDashboardPage').then(namedPage('AdminDashboardPage')), permissions: ADMIN_DASHBOARD_PERMISSIONS, fallbackToFirstVisible: true }],
 };
 export const MONITORING_ADMIN_SECTION: AdminSection = {
     id: 'monitoring', basePath: '', title: 'Monitoring', icon: 'bi-activity', navigationGroup: 'observability',
     permissions: [...new Set([...LOGS_ADMIN_PERMISSIONS, ...METRICS_EXPLORER_PERMISSIONS, ...METRICS_PERMISSIONS_ADMIN_PERMISSIONS])],
     routes: [
-        { path: 'logs', label: 'Logs', loadComponent: () => import('../monitoring/LogsPage').then(({ LogsPage }) => ({ default: LogsPage })), permissions: LOGS_ADMIN_PERMISSIONS },
-        { path: 'metrics/explorer', label: 'Metrics Explorer', loadComponent: () => import('../monitoring/MetricsExplorerPage').then(({ MetricsExplorerPage }) => ({ default: MetricsExplorerPage })), permissions: METRICS_EXPLORER_PERMISSIONS },
-        { path: 'metrics/permissions', label: 'Metrics Permissions', loadComponent: () => import('../monitoring/MetricsPermissionsPage').then(({ MetricsPermissionsPage }) => ({ default: MetricsPermissionsPage })), permissions: METRICS_PERMISSIONS_ADMIN_PERMISSIONS },
+        { path: 'logs', label: 'Logs', loadComponent: () => import('../monitoring/LogsPage').then(namedPage('LogsPage')), permissions: LOGS_ADMIN_PERMISSIONS },
+        { path: 'metrics/explorer', label: 'Metrics Explorer', loadComponent: () => import('../monitoring/MetricsExplorerPage').then(namedPage('MetricsExplorerPage')), permissions: METRICS_EXPLORER_PERMISSIONS },
+        { path: 'metrics/permissions', label: 'Metrics Permissions', loadComponent: () => import('../monitoring/MetricsPermissionsPage').then(namedPage('MetricsPermissionsPage')), permissions: METRICS_PERMISSIONS_ADMIN_PERMISSIONS },
     ],
 };
 export const CLOUDWATCH_ADMIN_SECTION: AdminSection = {
     id: 'cloudwatch', title: 'CloudWatch', icon: 'bi-clouds', navigationGroup: 'observability', permissions: CLOUDWATCH_PERMISSIONS,
-    routes: [{ path: '', label: 'CloudWatch', loadComponent: () => import('../cloudwatch/CloudWatchDashboardPage').then(({ CloudWatchDashboardPage }) => ({ default: CloudWatchDashboardPage })), permissions: CLOUDWATCH_PERMISSIONS }],
+    routes: [{ path: '', label: 'CloudWatch', loadComponent: () => import('../cloudwatch/CloudWatchDashboardPage').then(namedPage('CloudWatchDashboardPage')), permissions: CLOUDWATCH_PERMISSIONS }],
 };
 export const OBSERVABILITY_ADMIN_SECTIONS = [DASHBOARD_ADMIN_SECTION, MONITORING_ADMIN_SECTION, CLOUDWATCH_ADMIN_SECTION] as const;

package/src/admin/domains/operations.ts

@@ -1,3 +1,4 @@
+import { namedPage } from './lazy-page';
 import type { AdminSection } from '../core';
 import { JOBS_VIEW_PERMS, SCHEDULED_TASK_VIEW_PERMS } from '../jobs/models';
 import { SETTINGS_PERMISSIONS } from '../settings/model';
@@ -6,22 +7,36 @@ const navigationGroup = 'operations';
 
 export const SETTINGS_ADMIN_SECTION: AdminSection = {
     id: 'settings', title: 'Settings', icon: 'bi-gear', navigationGroup, permissions: SETTINGS_PERMISSIONS,
-    routes: [{ path: '', loadComponent: () => import('../settings/SettingsPage').then(({ SettingsPage }) => ({ default: SettingsPage })), permissions: SETTINGS_PERMISSIONS }],
+    routes: [{ path: '', loadComponent: () => import('../settings/SettingsPage').then(namedPage('SettingsPage')), permissions: SETTINGS_PERMISSIONS }],
 };
 // Empty any-of permissions admit only the existing literal-superuser bypass.
 // A global admin permission alone must not expose this configuration surface.
 export const FLEET_CONFIGURATION_ADMIN_SECTION: AdminSection = {
     id: 'fleet-configuration', title: 'Fleet Configuration', icon: 'bi-hdd-network',
     navigationGroup, permissions: [],
-    routes: ['', 'shared-validation'].map((path) => ({ path, requireSuperuser: true, loadComponent: () => import('../fleet-configuration/FleetConfigurationPage').then(({ FleetConfigurationPage }) => ({ default: FleetConfigurationPage })) })),
+    routes: ['', 'shared-validation'].map((path) => ({ path, requireSuperuser: true, loadComponent: () => import('../fleet-configuration/FleetConfigurationPage').then(namedPage('FleetConfigurationPage')) })),
 };
 export const JOBS_ADMIN_SECTION: AdminSection = {
     id: 'jobs', title: 'Jobs', icon: 'bi-cpu', navigationGroup, permissions: [...new Set([...JOBS_VIEW_PERMS, ...SCHEDULED_TASK_VIEW_PERMS])],
     routes: [
-        { path: '', label: 'Dashboard', loadComponent: () => import('../jobs/JobDashboardPage').then(({ JobDashboardPage }) => ({ default: JobDashboardPage })), permissions: JOBS_VIEW_PERMS },
-        { path: 'runners', label: 'Runners', loadComponent: () => import('../jobs/JobRunnersPage').then(({ JobRunnersPage }) => ({ default: JobRunnersPage })), permissions: JOBS_VIEW_PERMS },
-        { path: 'list', label: 'Jobs', loadComponent: () => import('../jobs/JobsTablePage').then(({ JobsTablePage }) => ({ default: JobsTablePage })), permissions: JOBS_VIEW_PERMS },
-        { path: 'scheduled-tasks', label: 'Scheduled Tasks', loadComponent: () => import('../jobs/ScheduledTasksPage').then(({ ScheduledTasksPage }) => ({ default: ScheduledTasksPage })), permissions: SCHEDULED_TASK_VIEW_PERMS },
+        { path: '', label: 'Dashboard', loadComponent: () => import('../jobs/JobDashboardPage').then(namedPage('JobDashboardPage')), permissions: JOBS_VIEW_PERMS },
+        { path: 'runners', label: 'Runners', loadComponent: () => import('../jobs/JobRunnersPage').then(namedPage('JobRunnersPage')), permissions: JOBS_VIEW_PERMS },
+        { path: 'list', label: 'Jobs', loadComponent: () => import('../jobs/JobsTablePage').then(namedPage('JobsTablePage')), permissions: JOBS_VIEW_PERMS },
+        { path: 'scheduled-tasks', label: 'Scheduled Tasks', loadComponent: () => import('../jobs/ScheduledTasksPage').then(namedPage('ScheduledTasksPage')), permissions: SCHEDULED_TASK_VIEW_PERMS },
     ],
 };
-export const OPERATIONS_ADMIN_SECTIONS = [SETTINGS_ADMIN_SECTION, FLEET_CONFIGURATION_ADMIN_SECTION, JOBS_ADMIN_SECTION] as const;
+export const DEPLOYMENTS_ADMIN_SECTION: AdminSection = {
+    id: 'deployments', title: 'Deployments', icon: 'bi-rocket', navigationGroup,
+    permissions: ['sys.view_platform', 'sys.manage_platform', 'sys.admin', 'sys.view_dns', 'sys.manage_dns', 'sys.security'],
+    routes: [{ path: '', label: 'Deployments', loadComponent: () => import('../deployments/DeploymentsPage').then(namedPage('DeploymentsPage')) }],
+};
+export const MAINTENANCE_ADMIN_SECTION: AdminSection = {
+    id: 'maintenance', title: 'Maintenance', icon: 'bi-tools', navigationGroup,
+    permissions: ['sys.manage_aws', 'sys.view_platform', 'sys.manage_platform', 'sys.admin'],
+    routes: [{ path: '', label: 'Maintenance', loadComponent: () => import('../maintenance/MaintenancePage').then(namedPage('MaintenancePage')) }],
+};
+export const GEOLOCATION_ADMIN_SECTION: AdminSection = {
+    id: 'geolocation', title: 'GeoLocation', icon: 'bi-geo-alt', navigationGroup, permissions: [],
+    routes: [{ path: '', label: 'GeoLocation', requireSuperuser: true, loadComponent: () => import('../geolocation/GeoLocationPage').then(namedPage('GeoLocationPage')) }],
+};
+export const OPERATIONS_ADMIN_SECTIONS = [SETTINGS_ADMIN_SECTION, FLEET_CONFIGURATION_ADMIN_SECTION, JOBS_ADMIN_SECTION, MAINTENANCE_ADMIN_SECTION, DEPLOYMENTS_ADMIN_SECTION, GEOLOCATION_ADMIN_SECTION] as const;

package/src/admin/domains/security.ts

@@ -1,3 +1,4 @@
+import { namedPage } from './lazy-page';
 import type { AdminRoute, AdminSection } from '../core';
 import { BOUNCER_VIEW_PERMS } from '../bouncer/models';
 import { EDGE_BLOCKLIST_VIEW_PERMS } from '../edge/permissions';
@@ -9,48 +10,48 @@ import { GEOFENCE_VIEW_PERMS } from '../network/geofence/permissions';
 import { IPSET_VIEW_PERMS } from '../network/permissions';
 
 export const INCIDENTS_ADMIN_ROUTES: AdminRoute[] = [
-    { path: 'incidents', label: 'Incidents', loadComponent: () => import('../incidents/IncidentsPage').then(({ IncidentsPage }) => ({ default: IncidentsPage })), permissions: SECURITY_VIEW_PERMS },
-    { path: 'events', label: 'Events', loadComponent: () => import('../incidents/EventsPage').then(({ EventsPage }) => ({ default: EventsPage })), permissions: SECURITY_VIEW_PERMS },
+    { path: 'incidents', label: 'Incidents', loadComponent: () => import('../incidents/IncidentsPage').then(namedPage('IncidentsPage')), permissions: SECURITY_VIEW_PERMS },
+    { path: 'events', label: 'Events', loadComponent: () => import('../incidents/EventsPage').then(namedPage('EventsPage')), permissions: SECURITY_VIEW_PERMS },
 ];
 export const RULES_ADMIN_ROUTES: AdminRoute[] = [
-    { path: 'rules', label: 'Rule Engine', loadComponent: () => import('../rules/RuleSetsPage').then(({ RuleSetsPage }) => ({ default: RuleSetsPage })), permissions: SECURITY_VIEW_PERMS },
+    { path: 'rules', label: 'Rule Engine', loadComponent: () => import('../rules/RuleSetsPage').then(namedPage('RuleSetsPage')), permissions: SECURITY_VIEW_PERMS },
 ];
 
 export const SECURITY_OPERATIONS_ADMIN_SECTION: AdminSection = {
     id: 'security-operations', basePath: 'security', title: 'Security Operations', icon: 'bi-shield-check', navigationGroup: 'security', permissions: SECURITY_VIEW_PERMS,
     routes: [
-        { path: 'tickets', label: 'Tickets', loadComponent: () => import('../security/tickets').then(({ TicketsPage }) => ({ default: TicketsPage })), permissions: SECURITY_VIEW_PERMS },
+        { path: 'tickets', label: 'Tickets', loadComponent: () => import('../security/tickets').then(namedPage('TicketsPage')), permissions: SECURITY_VIEW_PERMS },
         ...INCIDENTS_ADMIN_ROUTES, ...RULES_ADMIN_ROUTES,
     ],
 };
 export const BOUNCER_ADMIN_SECTION: AdminSection = {
     id: 'bouncer', basePath: 'security/bouncer', title: 'Bouncer', icon: 'bi-shield-check', navigationGroup: 'security', permissions: BOUNCER_VIEW_PERMS,
     routes: [
-        { path: 'signals', label: 'Signal Decisions', loadComponent: () => import('../bouncer/signals').then(({ BouncerSignalsPage }) => ({ default: BouncerSignalsPage })), permissions: BOUNCER_VIEW_PERMS },
-        { path: 'devices', label: 'Device Reputation', loadComponent: () => import('../bouncer/devices').then(({ BouncerDevicesPage }) => ({ default: BouncerDevicesPage })), permissions: BOUNCER_VIEW_PERMS },
-        { path: 'signatures', label: 'Bot Signatures', loadComponent: () => import('../bouncer/signatures').then(({ BotSignaturesPage }) => ({ default: BotSignaturesPage })), permissions: BOUNCER_VIEW_PERMS },
+        { path: 'signals', label: 'Signal Decisions', loadComponent: () => import('../bouncer/signals').then(namedPage('BouncerSignalsPage')), permissions: BOUNCER_VIEW_PERMS },
+        { path: 'devices', label: 'Device Reputation', loadComponent: () => import('../bouncer/devices').then(namedPage('BouncerDevicesPage')), permissions: BOUNCER_VIEW_PERMS },
+        { path: 'signatures', label: 'Bot Signatures', loadComponent: () => import('../bouncer/signatures').then(namedPage('BotSignaturesPage')), permissions: BOUNCER_VIEW_PERMS },
     ],
 };
 export const DEVICE_INTEL_ADMIN_SECTION: AdminSection = {
     id: 'device-intel', basePath: 'security/devices', title: 'Devices & Logins', icon: 'bi-laptop', navigationGroup: 'security', permissions: [...new Set([...USER_DEVICE_VIEW_PERMS, ...LOGIN_EVENT_VIEW_PERMS])],
     routes: [
-        { path: 'user-devices', label: 'User Devices', loadComponent: () => import('../security/devices/UserDevicesPage').then(({ UserDevicesPage }) => ({ default: UserDevicesPage })), permissions: USER_DEVICE_VIEW_PERMS },
-        { path: 'login-locations', label: 'Login Locations', loadComponent: () => import('../security/devices/LoginLocationsPage').then(({ LoginLocationsPage }) => ({ default: LoginLocationsPage })), permissions: LOGIN_EVENT_VIEW_PERMS },
+        { path: 'user-devices', label: 'User Devices', loadComponent: () => import('../security/devices/UserDevicesPage').then(namedPage('UserDevicesPage')), permissions: USER_DEVICE_VIEW_PERMS },
+        { path: 'login-locations', label: 'Login Locations', loadComponent: () => import('../security/devices/LoginLocationsPage').then(namedPage('LoginLocationsPage')), permissions: LOGIN_EVENT_VIEW_PERMS },
     ],
 };
 export const GEOIP_ADMIN_SECTION: AdminSection = {
     id: 'geoip', basePath: 'security/geoip', title: 'IP Intelligence', icon: 'bi-globe2', navigationGroup: 'security', permissions: GEOIP_VIEW_PERMS,
-    routes: [{ path: 'cache', label: 'GeoIP Cache', loadComponent: () => import('../security/geoip/GeoIpCachePage').then(({ GeoIpCachePage }) => ({ default: GeoIpCachePage })), permissions: GEOIP_VIEW_PERMS }],
+    routes: [{ path: 'cache', label: 'GeoIP Cache', loadComponent: () => import('../security/geoip/GeoIpCachePage').then(namedPage('GeoIpCachePage')), permissions: GEOIP_VIEW_PERMS }],
 };
 export const NETWORK_SECURITY_ADMIN_SECTION: AdminSection = {
     id: 'network-security', basePath: 'security/network', title: 'Network Security', icon: 'bi-hdd-network', navigationGroup: 'security',
     permissions: [...new Set([...GEOIP_VIEW_PERMS, ...LOGS_ADMIN_PERMISSIONS, ...IPSET_VIEW_PERMS, ...GEOFENCE_VIEW_PERMS, ...EDGE_BLOCKLIST_VIEW_PERMS])],
     routes: [
-        { path: 'blocked-ips', label: 'Blocked IPs', loadComponent: () => import('../network/BlockedIPsPage').then(({ BlockedIPsPage }) => ({ default: BlockedIPsPage })), permissions: GEOIP_VIEW_PERMS },
-        { path: 'firewall-log', label: 'Firewall Log', loadComponent: () => import('../network/FirewallLogPage').then(({ FirewallLogPage }) => ({ default: FirewallLogPage })), permissions: LOGS_ADMIN_PERMISSIONS },
-        { path: 'ip-sets', label: 'IP Sets', loadComponent: () => import('../network/IPSetsPage').then(({ IPSetsPage }) => ({ default: IPSetsPage })), permissions: IPSET_VIEW_PERMS },
-        { path: 'geofencing', label: 'Geofencing', loadComponent: () => import('../network/geofence/GeofencingPage').then(({ GeofencingPage }) => ({ default: GeofencingPage })), permissions: GEOFENCE_VIEW_PERMS },
-        { path: 'edge-blocklist', label: 'Edge Blocklist', loadComponent: () => import('../edge/BlocklistPage').then(({ BlocklistPage }) => ({ default: BlocklistPage })), permissions: EDGE_BLOCKLIST_VIEW_PERMS },
+        { path: 'blocked-ips', label: 'Blocked IPs', loadComponent: () => import('../network/BlockedIPsPage').then(namedPage('BlockedIPsPage')), permissions: GEOIP_VIEW_PERMS },
+        { path: 'firewall-log', label: 'Firewall Log', loadComponent: () => import('../network/FirewallLogPage').then(namedPage('FirewallLogPage')), permissions: LOGS_ADMIN_PERMISSIONS },
+        { path: 'ip-sets', label: 'IP Sets', loadComponent: () => import('../network/IPSetsPage').then(namedPage('IPSetsPage')), permissions: IPSET_VIEW_PERMS },
+        { path: 'geofencing', label: 'Geofencing', loadComponent: () => import('../network/geofence/GeofencingPage').then(namedPage('GeofencingPage')), permissions: GEOFENCE_VIEW_PERMS },
+        { path: 'edge-blocklist', label: 'Edge Blocklist', loadComponent: () => import('../edge/BlocklistPage').then(namedPage('BlocklistPage')), permissions: EDGE_BLOCKLIST_VIEW_PERMS },
     ],
 };
 

package/src/admin/edge/EdgeHelp.tsx

@@ -0,0 +1,10 @@
+import { useId, useRef, useState, type ReactNode } from 'react';
+import { Popover } from '../../ui';
+
+/** Short, keyboard-accessible help, including inside native dialogs. */
+export function EdgeHelp({ label, children }: { label: string; children: ReactNode }) {
+    const anchor = useRef<HTMLButtonElement>(null);
+    const [open, setOpen] = useState(false);
+    const id = useId();
+    return <span className="edge-help"><button ref={anchor} type="button" className="btn-icon" aria-label={label} aria-expanded={open} aria-controls={open ? id : undefined} onClick={() => setOpen(value => !value)}><i className="bi bi-info-circle" aria-hidden="true" /></button><Popover id={id} anchorRef={anchor} open={open} onClose={() => setOpen(false)} className="edge-help-popover" aria-label={label}>{children}</Popover></span>;
+}