portal-mojo 0.2.4 → 0.2.6

package/src/admin/identity/members/MemberDetail.tsx

@@ -3,16 +3,19 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useCan, type PermSpec } from '../../../client/runtime';
 import {
     Badge, DetailView, Eyebrow, FlatRow, FormView, JsonBlock, MetricCard,
-    ModelTable, confirmGuardrail, fmt, formModal, toast, type Column, type DetailMenuEntry,
+    ModelTable, confirmGuardrail, fmt, formModal, toast, getFormTabs, formTabsVersion, subscribeFormTabs,
+    type Column, type DetailMenuEntry,
 } from '../../../ui';
 import { LOGS_ADMIN_PERMISSIONS, LogModel, type LogRow } from '../../monitoring';
 import {
     MEMBER_READ_PERMISSIONS,
+    MEMBER_APP_PERMS_TABSET,
     MEMBER_SAVE_PERMISSIONS,
     MemberModel,
     effectiveMemberGrants,
     getMemberPermissions,
     ignoredMemberGrants,
+    isEditableMemberPermission,
     memberPermissionFields,
     memberPermissionsVersion,
     rawMemberGrants,
@@ -123,6 +126,7 @@ export function MemberDetail({
     const resend = MemberModel.useAction('resend_invite');
     const { can: canSave } = useCan(MEMBER_SAVE_PERMISSIONS);
     useSyncExternalStore(subscribeMemberPermissions, memberPermissionsVersion, memberPermissionsVersion);
+    useSyncExternalStore(subscribeFormTabs, formTabsVersion, formTabsVersion);
 
     if (readLoading) return <div className="detail-loading"><span className="skel skel-block" /></div>;
     if (!canRead) return <div className="modal-pad text-bad">Access denied</div>;
@@ -141,6 +145,18 @@ export function MemberDetail({
     const raw = rawMemberGrants(member.permissions);
     const catalog = getMemberPermissions();
     const catalogNames = new Set(catalog.map((permission) => permission.name));
+    // Product editors may only write grants accepted by the member catalog.
+    // Tab registration must not expose system/derived grants or unrelated fields.
+    const productTabs = getFormTabs(MEMBER_APP_PERMS_TABSET).map((tab) => ({
+        ...tab,
+        fields: tab.fields.filter((field) => {
+            if (!field.name.startsWith('permissions.')) return false;
+            const name = field.name.slice('permissions.'.length);
+            return catalogNames.has(name) && isEditableMemberPermission(name);
+        }),
+    })).filter((tab) => tab.fields.length > 0);
+    const productFieldNames = new Set(productTabs.flatMap((tab) => tab.fields.map((field) => field.name)));
+    const groupFields = memberPermissionFields().filter((field) => !productFieldNames.has(field.name));
     const deploymentOnly = raw.filter((name) => !catalogNames.has(name) && !ignoredMemberGrants(member.permissions).includes(name));
 
     const editRole = async () => {
@@ -236,13 +252,13 @@ export function MemberDetail({
                     key: 'Permissions', label: 'Permissions', icon: 'bi-shield-lock', render: () => (
                         <>
                             <Eyebrow>Per-group authorization</Eyebrow>
-                            <p className="dim">Role labels are not authorization. Protected changes may be rejected by <code>MEMBER_PERMS_PROTECTION</code>; failed autosaves revert and show the server error.</p>
+                            <p className="dim">Access for this group. Changes save automatically; a rejected change is restored with an explanation.</p>
                             {canSave
                                 ? (
                                     <FormView
                                         model={MemberModel}
                                         row={member}
-                                        fields={memberPermissionFields()}
+                                        fields={groupFields}
                                         beforeSave={({ changes }) => confirmGrantEscalation(member, changes)}
                                         onSaved={() => { void MemberModel.invalidate(qc); }}
                                     />
@@ -254,6 +270,19 @@ export function MemberDetail({
                         </>
                     ),
                 },
+                ...(productTabs.length > 0 ? [{
+                    key: 'ProductPermissions', label: 'Product permissions', icon: 'bi-puzzle', render: () => (
+                        <>
+                            <Eyebrow>Product permissions</Eyebrow>
+                            <p className="dim">These grants apply only to this membership’s group. Changes save automatically.</p>
+                            {canSave ? (
+                                <FormView model={MemberModel} row={member} tabs={productTabs}
+                                    beforeSave={({ changes }) => confirmGrantEscalation(member, changes)}
+                                    onSaved={() => { void MemberModel.invalidate(qc); }} />
+                            ) : <GrantSummary member={member} />}
+                        </>
+                    ),
+                }] : []),
                 { divider: 'Activity' },
                 {
                     key: 'Audit', label: 'Audit', icon: 'bi-clock-history',

package/src/admin/identity/members/models.ts

@@ -113,6 +113,9 @@ export interface MemberPermissionDef {
     tooltip?: string;
 }
 
+/** Optional product tabs installed by the consuming app through registerFormTabs. */
+export const MEMBER_APP_PERMS_TABSET = 'member-app-perms';
+
 const permissionRegistry = new Map<string, MemberPermissionDef>();
 let permissionVersion = 0;
 const permissionListeners = new Set<() => void>();

package/src/admin/identity/users/PersonalApiKeysPage.tsx

@@ -0,0 +1,220 @@
+// API Keys — the /api/account/api_keys (UserAPIKey) screen, columns and
+// flows measured against the LIVE backend (mverify @9009, 2026-08-05):
+//   · rows {id, label, allowed_ips, expires, is_active, last_used, created}
+//   · create is POST /api/auth/generate_api_key (label / allowed_ips /
+//     expire_days ≤ 360) → {id, jti, expires, token} — the token's ONE
+//     appearance, so the reveal dialog is show-once (GroupView
+//     _showApiKeyTokenDialog recipe)
+//   · `revoke` POST_SAVE_ACTION rotates the signing secret + deactivates —
+//     irreversible, hence the ARMED-BUTTON idiom, not a confirm dialog
+//   · disable/enable is a plain is_active save — reversible, hence
+//     act-immediately + grace-window UNDO TOAST (no confirm)
+//   · no DELETE (CAN_DELETE false server-side)
+// NOTE: the group-scoped /api/group/apikey surface 500s on the live dev
+// backend — this user-key surface is the one that works today.
+import { useQueryClient } from '@tanstack/react-query';
+import {
+    Badge, DetailView, fmt, formModal, modal, toast, ModelTable,
+    ArmedButton,
+    type Column, type FilterDef,
+} from 'portal-mojo/ui';
+import { showSecretDialog } from '../../credentials';
+import { ApiKeyModel, useGenerateUserApiKey, type ApiKeyRow } from './models';
+
+const nowSec = () => Math.floor(Date.now() / 1000);
+
+const COLUMNS: Column<ApiKeyRow>[] = [
+    {
+        key: 'label', label: 'Key', sortable: true, hideable: false, render: (k) => (
+            <div className="cell-user">
+                <span className="cell-avatar" style={{ fontSize: 13 }}><i className="bi bi-key" /></span>
+                <span>
+                    <span className="cell-name">{k.label || <span className="dim-italic">Unlabeled key</span>}</span>
+                    <span className="cell-sub">#{k.id}</span>
+                </span>
+            </div>
+        ),
+    },
+    {
+        key: 'is_active', label: 'Status', render: (k) =>
+            !k.is_active ? <Badge tone="muted">Inactive</Badge>
+            : k.expires <= nowSec() ? <Badge tone="danger">Expired</Badge>
+            : <Badge tone="success">Active</Badge>,
+    },
+    {
+        key: 'allowed_ips', label: 'Allowed IPs', render: (k) =>
+            k.allowed_ips.length > 0
+                ? <code className="dim">{k.allowed_ips.join(', ')}</code>
+                : <span className="dim">Any</span>,
+    },
+    { key: 'created', label: 'Created', sortable: true, render: (k) => fmt.date(k.created) },
+    {
+        key: 'expires', label: 'Expires', sortable: true, render: (k) => (
+            <span style={k.expires <= nowSec() ? { color: 'var(--bad)' } : undefined}>{fmt.date(k.expires)}</span>
+        ),
+    },
+    { key: 'last_used', label: 'Last used', sortable: true, render: (k) => fmt.relative(k.last_used, 'never') },
+];
+
+const FILTERS: FilterDef[] = [
+    { key: 'label', label: 'Label', type: 'text', placeholder: 'Contains…' },
+    { key: 'is_active', label: 'Status', type: 'boolean', trueLabel: 'Active', falseLabel: 'Inactive' },
+    { key: 'created', label: 'Created', type: 'daterange' },
+    { key: 'expires', label: 'Expires', type: 'daterange' },
+];
+
+/** Full facts and write flows in an explicit native detail modal. */
+function KeyDetail({ id, onToggle, onRevoke, onClose }: {
+    id: number;
+    onToggle: (k: ApiKeyRow, next: boolean) => void;
+    onRevoke: (k: ApiKeyRow) => Promise<void>;
+    onClose: () => void;
+}) {
+    const query = ApiKeyModel.useOne(id);
+    if (query.isPending) return <div className="detail-loading"><span className="skel skel-block" /></div>;
+    if (!query.data || query.error) return <div className="modal-pad text-bad">{query.error?.message ?? 'API key not found'}</div>;
+    const k = query.data;
+    return (
+        <DetailView<ApiKeyRow>
+            icon="bi-key"
+            title={k.label || `Key #${k.id}`}
+            subtitle={`Personal API key #${k.id}`}
+            onClose={onClose}
+            sections={[{
+                key: 'details', label: 'Details', icon: 'bi-info-circle',
+                render: () => (
+                    <div className="expand-grid">
+                        <div>
+                            <div className="eyebrow">Details</div>
+                            <div>Created {fmt.datetime(k.created)}</div>
+                            <div>Expires {fmt.datetime(k.expires)}</div>
+                            <div className="dim">Last used {fmt.relative(k.last_used, 'never')}</div>
+                        </div>
+                        <div>
+                            <div className="eyebrow">Allowed IPs</div>
+                            {k.allowed_ips.length > 0
+                                ? k.allowed_ips.map((ip) => <div key={ip}><code>{ip}</code></div>)
+                                : <div className="dim">Any address</div>}
+                        </div>
+                        <div>
+                            <div className="eyebrow">Actions</div>
+                            <div className="chip-row" style={{ gap: 8 }}>
+                                <button type="button" className="btn btn-compact" onClick={() => onToggle(k, !k.is_active)}>
+                                    {k.is_active ? 'Disable' : 'Enable'}
+                                </button>
+                                <ArmedButton
+                                    label="Revoke"
+                                    armedLabel="Click again — token dies now"
+                                    className="btn-compact"
+                                    title="Rotate the secret and deactivate — cannot be undone"
+                                    onConfirm={() => onRevoke(k)}
+                                />
+                            </div>
+                            <div className="dim" style={{ marginTop: 6 }}>
+                                Disable is reversible (undo offered). Revoke rotates the secret — permanent.
+                            </div>
+                        </div>
+                    </div>
+                ),
+            }]}
+        />
+    );
+}
+
+export function PersonalApiKeysPage() {
+    const qc = useQueryClient();
+    const save = ApiKeyModel.useSave();
+    const revoke = ApiKeyModel.useAction('revoke');
+    const generateKey = useGenerateUserApiKey();
+
+    const generate = async () => {
+        const data = await formModal(ApiKeyModel.forms.generate!);
+        if (!data) return;
+        const body: Record<string, unknown> = {
+            label: data.label,
+            expire_days: Number(data.expire_days || 360),
+        };
+        const ips = String(data.allowed_ips ?? '').trim();
+        if (ips) body.allowed_ips = ips.split(',').map((s) => s.trim()).filter(Boolean);
+        try {
+            await generateKey.mutateAsync({
+                changes: body,
+                onToken: async (token) => {
+                    await showSecretDialog({
+                        title: 'API key created',
+                        intro: <><b>{String(data.label || 'Unlabeled key')}</b> is ready.</>,
+                        warning: 'Save this token now. It will not be shown again.',
+                        secret: token,
+                        ariaLabel: 'Generated API key',
+                        footer: <p className="dim">Treat this token like a password. Anyone holding it can call the API as you.</p>,
+                    });
+                },
+            });
+            toast.success('API key generated');
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Failed to generate key');
+        }
+    };
+
+    /**
+     * Disable/enable — reversible, so it acts IMMEDIATELY and offers Undo
+     * for the grace window instead of asking permission first.
+     */
+    const toggleKey = (k: ApiKeyRow, next: boolean) => {
+        void (async () => {
+            try {
+                await save.mutateAsync({ id: k.id, changes: { is_active: next } });
+                toast.undo(
+                    `${k.label || `Key #${k.id}`} ${next ? 'enabled' : 'disabled'}`,
+                    () => {
+                        void save.mutateAsync({ id: k.id, changes: { is_active: !next } })
+                            .then(() => toast.info(`${k.label || `Key #${k.id}`} restored`))
+                            .catch((err: unknown) => toast.error(err instanceof Error ? err.message : 'Undo failed'));
+                    },
+                );
+            } catch (err) {
+                toast.error(err instanceof Error ? err.message : 'Save failed');
+            }
+        })();
+    };
+
+    /** Revoke — the armed button already collected intent; just fire. */
+    const revokeKey = async (k: ApiKeyRow) => {
+        try {
+            await revoke.mutateAsync({ id: k.id, payload: true });
+            toast.success(`${k.label || `Key #${k.id}`} revoked — the token is dead`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Revoke failed');
+        }
+    };
+
+    const openKey = (k: ApiKeyRow) => {
+        void ApiKeyModel.fetchOne(qc, k.id).catch(() => undefined);
+        void modal.detail((close) => (
+            <KeyDetail id={k.id} onToggle={toggleKey} onRevoke={revokeKey} onClose={() => close(null)} />
+        ));
+    };
+
+    return (
+        <ModelTable<ApiKeyRow>
+            model={ApiKeyModel}
+            eyebrow="Account"
+            title="API Keys"
+            searchPlaceholder="Search key labels…"
+            columns={COLUMNS}
+            filters={FILTERS}
+            presets={[
+                { key: 'all', label: 'All', params: {} },
+                { key: 'active', label: 'Active', params: { is_active: 'true' } },
+                { key: 'inactive', label: 'Inactive', params: { is_active: 'false' } },
+            ]}
+            defaultSort="-created"
+            columnChooser
+            persistState
+            exportFormats={['csv', 'json']}
+            onRowClick={openKey}
+            addLabel="Generate Key"
+            onAdd={generate}
+        />
+    );
+}

package/src/admin/identity/users/UserDetail.tsx

@@ -237,12 +237,12 @@ function UserDetailLoaded({ user, isAdmin, hasAppPerms, onClose, onOpenGroup }:
                 { divider: 'Access' },
                 ...(canMembers ? [{ key: 'Groups', label: 'Groups', icon: 'bi-people', render: () => <GroupsSection user={user} onOpenGroup={onOpenGroup} /> }] : []),
                 {
-                    key: 'SysPerms', label: 'Sys Perms', icon: 'bi-shield-check',
+                    key: 'SysPerms', label: 'System permissions', icon: 'bi-shield-check',
                     permissions: ADMIN,
                     render: () => <SysPermsSection user={user} />,
                 },
                 ...(hasAppPerms ? [{
-                    key: 'AppPerms', label: 'App Perms', icon: 'bi-puzzle',
+                    key: 'AppPerms', label: 'Product permissions', icon: 'bi-puzzle',
                     permissions: ADMIN,
                     render: () => <AppPermsSection user={user} />,
                 }] : []),

package/src/admin/identity/users/index.ts

@@ -4,9 +4,11 @@ import { UsersPage } from './UsersPage';
 export * from './models';
 export * from './UsersPage';
 export * from './UserDetail';
+export * from './PersonalApiKeysPage';
 export * from './sections/permission-catalog';
 
 export { USERS_ADMIN_SECTION } from '../../domains/identity';
+export const loadPersonalApiKeysPage = () => import('./PersonalApiKeysPage').then(({ PersonalApiKeysPage }) => ({ default: PersonalApiKeysPage }));
 
 /** Useful to custom routers that open a User detail outside ModelTable. */
 export const USER_ADMIN_SURFACES = { UsersPage, UserDetail } as const;

package/src/admin/identity/users/sections/PermissionsSection.tsx

@@ -26,8 +26,8 @@ export function SysPermsSection({ user }: { user: UserRow }) {
 export function AppPermsSection({ user }: { user: UserRow }) {
     return (
         <>
-            <Eyebrow>App permissions</Eyebrow>
-            <p className="dim" style={{ margin: '0 0 12px' }}>Toggles autosave as soon as you flip them.</p>
+            <Eyebrow>Product permissions</Eyebrow>
+            <p className="dim" style={{ margin: '0 0 12px' }}>User grants can apply across groups. To give access to just one group, edit that membership instead. Changes save automatically.</p>
             {/* Registry NAME (not a snapshot) so late registrations re-render. */}
             <FormView model={UserModel} row={user} tabs={USER_APP_PERMS_TABSET} />
         </>

package/src/admin/index.ts

@@ -12,6 +12,7 @@ export * from './security';
 export * from './incidents';
 export * from './rules';
 export * from './identity';
+export * from './signin';
 export * from './jobs';
 export * from './network';
 export * from './dns';
@@ -22,3 +23,5 @@ export * from './phonehub';
 export * from './dashboard';
 export * from './assistant';
 export { ADMIN_SECTIONS } from './registry';
+export { FleetConfigurationPage, FleetNodeStatus } from './fleet-configuration/FleetConfigurationPage';
+export { FLEET_CONFIGURATION_ADMIN_SECTION } from './domains/operations';

package/src/admin/messaging/push/PushPage.tsx

@@ -4,13 +4,14 @@ import { useSearchParams } from 'react-router-dom';
 import { KPITile, MetricsChart } from '../../../charts';
 import { useCan } from '../../../client/runtime';
 import { Badge, DetailView, FlatRow, ModelTable, Tabs, fmt, modal, toast, type Column, type FilterDef } from '../../../ui';
-import { fetchPushGroupChoices, fetchPushStats, parseFcmServiceAccount, savePushConfigImperative, testPushConfigConnection, type FcmCredentialEdit } from './api';
+import { fetchPushGroupChoices, fetchPushStats, parseFcmServiceAccount, savePushConfigImperative, testPushConfigConnection, type FcmCredentialEdit, type PushTestResult } from './api';
 import {
     PUSH_CONFIG_MANAGE_PERMISSIONS,
     PUSH_CONFIG_TEST_PERMISSIONS,
     PUSH_CONFIG_VIEW_PERMISSIONS,
     PUSH_DELIVERY_VIEW_PERMISSIONS,
     PUSH_DEVICE_VIEW_PERMISSIONS,
+    PUSH_DEVICE_TEST_PERMISSIONS,
     PUSH_GROUP_DIRECTORY_PERMISSIONS,
     PUSH_METRICS_PERMISSIONS,
     PUSH_TEMPLATE_MANAGE_PERMISSIONS,
@@ -25,32 +26,79 @@ import {
     type PushTemplateRow,
 } from './models';
 
+import { openPushDeviceTest, PushTestResultView, usePushRequestOwner } from './PushTestDialog';
+
 const relationLabel=(value:{id:number;name?:string;display_name?:string}|null,fallback='—')=>value?.name??value?.display_name??(value?`#${value.id}`:fallback);
-const statusTone=(status:string)=>status==='sent'||status==='delivered'?'success':status==='failed'?'danger':'warning';
+const statusTone=(status:string)=>status==='accepted'||status==='delivered'?'success':status==='failed'||status==='rejected'||status==='blocked'?'danger':'warning';
+const outcomeLabel=(row:PushDeliveryRow)=>row.push_outcome??row.status;
+const outcomeHelp=(row:PushDeliveryRow)=>({accepted:'FCM accepted the message. Device receipt has not been confirmed.',delivered:'The device reported receipt of this notification.',simulated:'Simulation only. No notification was sent to FCM.',unknown:'Provider acceptance is unknown. Check the device before sending again.',sent:'Recorded as sent. This older record does not establish provider acceptance or device receipt.',pending:'No confirmed provider acceptance is recorded.',rejected:'FCM rejected this message.',blocked:'The send was blocked before provider acceptance.',failed:'The send attempt failed.'})[outcomeLabel(row)]??'No delivery confirmation is available.';
 
-export function PushStatsPanel(){const query=useQuery({queryKey:['/api/account/devices/push/stats','caller'],queryFn:fetchPushStats,staleTime:30_000});const row=query.data;return <div className="push-stats"><section><h2>Your activity</h2><p className="dim">These five counts belong only to the signed-in caller; they are not platform totals.</p><div className="push-kpi-grid"><KPITile label="Sent" value={row?.total_sent} loading={query.isPending}/><KPITile label="Failed" value={row?.total_failed} tone="bad" loading={query.isPending}/><KPITile label="Pending" value={row?.total_pending} loading={query.isPending}/></div></section><section><h2>Your devices</h2><div className="push-kpi-grid push-kpi-grid-two"><KPITile label="Registered devices" value={row?.registered_devices} loading={query.isPending}/><KPITile label="Enabled devices" value={row?.enabled_devices} loading={query.isPending}/></div></section>{query.error&&<div className="form-alert">Caller push statistics are unavailable.</div>}</div>;}
+export function PushStatsPanel(){const query=useQuery({queryKey:['/api/account/devices/push/stats','caller'],queryFn:fetchPushStats,staleTime:30_000});const row=query.data;return <div className="push-stats"><section><h2>Your activity</h2><p className="dim">Activity for your account. Recorded sent counts may include simulated sends.</p><div className="push-kpi-grid"><KPITile label="Recorded sent" value={row?.total_sent} loading={query.isPending}/><KPITile label="Failed" value={row?.total_failed} tone="bad" loading={query.isPending}/><KPITile label="Pending" value={row?.total_pending} loading={query.isPending}/></div></section><section><h2>Your devices</h2><div className="push-kpi-grid push-kpi-grid-two"><KPITile label="Registered devices" value={row?.registered_devices} loading={query.isPending}/><KPITile label="Enabled devices" value={row?.enabled_devices} loading={query.isPending}/></div></section>{query.error&&<div className="form-alert">Caller push statistics are unavailable.</div>}</div>;}
 export function PushMetricsPanel(){return <div className="panel panel-pad"><p className="eyebrow">Global metrics account</p><MetricsChart title="Push delivery activity" slugs={['push_sent','push_failed']} seriesLabels={{push_sent:'Sent',push_failed:'Failed'}} account="global" defaultRange="7d" defaultGranularity="hours" defaultType="line"/></div>;}
 
 const deviceColumns:Column<PushDeviceRow>[]=[{key:'last_seen',label:'Last seen',sortable:true,hideable:false,render:r=>fmt.datetime(r.last_seen)},{key:'device_name',label:'Device',sortable:true,render:r=>r.device_name||r.device_id},{key:'user',label:'User',render:r=>relationLabel(r.user)},{key:'platform',label:'Platform',sortable:true,render:r=><Badge tone="info">{r.platform}</Badge>},{key:'app_version',label:'App version',render:r=>r.app_version||'—'},{key:'push_enabled',label:'Push',sortable:true,render:r=><Badge tone={r.push_enabled?'success':'muted'}>{r.push_enabled?'enabled':'disabled'}</Badge>}];
 const deviceFilters:FilterDef[]=[{key:'platform',label:'Platform',type:'select',options:['ios','android','web'].map(value=>({value,label:value}))},{key:'push_enabled',label:'Push enabled',type:'boolean'},{key:'is_active',label:'Active',type:'boolean'}];
-function DeviceDetail({id,onClose}:{id:number;onClose:()=>void}){const query=PushDeviceModel.useOne(id);if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading registered device…':'Registered device unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;return <DetailView title={row.device_name||row.device_id} subtitle={`${row.platform} · ${relationLabel(row.user)}`} icon="bi-phone" onClose={onClose} sections={[{key:'device',label:'Device',icon:'bi-device-ssd',render:()=><div className="detail-section"><FlatRow label="Device id"><code>{row.device_id}</code></FlatRow><FlatRow label="Platform">{row.platform}</FlatRow><FlatRow label="OS version">{row.os_version||'—'}</FlatRow><FlatRow label="App version">{row.app_version||'—'}</FlatRow><FlatRow label="Push enabled">{row.push_enabled?'Yes':'No'}</FlatRow><FlatRow label="Last seen">{fmt.datetime(row.last_seen)}</FlatRow></div>},{key:'preferences',label:'Preferences',icon:'bi-sliders',render:()=><div className="detail-section">{Object.keys(row.push_preferences).length?Object.entries(row.push_preferences).map(([key,value])=><FlatRow key={key} label={key}>{value?'Enabled':'Disabled'}</FlatRow>):<p className="dim">No category overrides.</p>}<p className="dim">Device tokens are sensitive and never enter this client.</p></div>}]} />;}
+function DeviceDetail({id,onClose}:{id:number;onClose:()=>void}) {
+    const query=PushDeviceModel.useOne(id);const canSend=useCan(PUSH_DEVICE_TEST_PERMISSIONS).can;const canView=useCan(PUSH_DEVICE_VIEW_PERMISSIONS).can;
+    if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading registered device…':'Registered device unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;
+    const row=query.data;
+    return <DetailView title={row.device_name||row.device_id} subtitle={`${row.platform} · ${relationLabel(row.user)}`} icon="bi-phone" onClose={onClose}
+        chips={[{text:row.is_active===null?'Activity unknown':row.is_active?'Active':'Inactive',tone:row.is_active?'success':'muted'},{text:row.push_enabled?'Push enabled':'Push disabled',tone:row.push_enabled?'info':'warning'}]}
+        contextMenu={canSend&&canView?[{label:'Send test push',icon:'bi-send',onSelect:()=>void openPushDeviceTest(row)}]:[]}
+        sections={[{key:'device',label:'Overview',icon:'bi-device-ssd',render:()=><div className="detail-section"><FlatRow label="User">{relationLabel(row.user)}</FlatRow><FlatRow label="Registration">#{row.id}</FlatRow><FlatRow label="Device ID"><code>{row.device_id}</code></FlatRow><FlatRow label="Platform">{row.platform}</FlatRow><FlatRow label="OS version">{row.os_version||'—'}</FlatRow><FlatRow label="App version">{row.app_version||'—'}</FlatRow><FlatRow label="Last seen">{fmt.datetime(row.last_seen)}</FlatRow></div>},
+        {key:'preferences',label:'Preferences',icon:'bi-sliders',render:()=><div className="detail-section"><FlatRow label="Push notifications">{row.push_enabled?'Enabled':'Disabled'}</FlatRow>{Object.keys(row.push_preferences).length?Object.entries(row.push_preferences).map(([key,value])=><FlatRow key={key} label={key}>{value?'Enabled':'Disabled'}</FlatRow>):<p className="dim">All notification categories use their default preference.</p>}<p className="dim">Test pushes respect the device’s test category preference.</p></div>}]} />;
+}
 export function PushDevicesPage(){return <ModelTable model={PushDeviceModel} eyebrow="Communications · Push" title="Registered Devices" columns={deviceColumns} filters={deviceFilters} defaultSort="-last_seen" searchable searchPlaceholder="Search device name or device id" columnChooser persistState persistKey="admin:push:devices" onRowClick={row=>void modal.detail(close=><DeviceDetail id={row.id} onClose={()=>close(null)}/>)}/>;}
 
-const deliveryColumns:Column<PushDeliveryRow>[]=[{key:'created',label:'Created',sortable:true,hideable:false,render:r=>fmt.datetime(r.created)},{key:'title',label:'Title',render:r=>r.title||`[${r.category} data]`},{key:'user',label:'User',render:r=>relationLabel(r.user)},{key:'device',label:'Device',render:r=>relationLabel(r.device)},{key:'category',label:'Category',sortable:true},{key:'status',label:'Status',sortable:true,render:r=><Badge tone={statusTone(r.status)}>{r.status}</Badge>}];
+const deliveryColumns:Column<PushDeliveryRow>[]=[{key:'created',label:'Created',sortable:true,hideable:false,render:r=>fmt.datetime(r.created)},{key:'title',label:'Title',render:r=>r.title||`[${r.category} data]`},{key:'user',label:'User',render:r=>relationLabel(r.user)},{key:'device',label:'Device',render:r=>relationLabel(r.device)},{key:'category',label:'Category',sortable:true},{key:'status',label:'Status',sortable:true,render:r=><Badge tone={statusTone(outcomeLabel(r))}>{outcomeLabel(r)}</Badge>}];
 const deliveryFilters:FilterDef[]=[{key:'status',label:'Status',type:'select',options:['pending','sent','delivered','failed'].map(value=>({value,label:value}))},{key:'category',label:'Category',type:'text'},{key:'created',label:'Created',type:'daterange'}];
-function DeliveryDetail({id,onClose}:{id:number;onClose:()=>void}){const query=PushDeliveryModel.useOne(id);if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading delivery…':'Delivery unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;return <DetailView title={row.title||`[${row.category} data]`} subtitle={`${row.status} · ${relationLabel(row.device)}`} icon="bi-bell" chips={[{text:row.status,tone:statusTone(row.status)}]} onClose={onClose} sections={[{key:'preview',label:'Notification',icon:'bi-app-indicator',render:()=><div className="detail-section"><div className="push-preview"><strong>{row.title||'Data-only notification'}</strong><p>{row.body||'No visible message body.'}</p></div><FlatRow label="Category">{row.category}</FlatRow><FlatRow label="Action URL"><code>{row.action_url||'—'}</code></FlatRow></div>},{key:'delivery',label:'Delivery',icon:'bi-truck',render:()=><div className="detail-section"><FlatRow label="User">{relationLabel(row.user)}</FlatRow><FlatRow label="Device">{relationLabel(row.device)}</FlatRow><FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow><FlatRow label="Sent">{row.sent_at?fmt.datetime(row.sent_at):'—'}</FlatRow><FlatRow label="Delivered">{row.delivered_at?fmt.datetime(row.delivered_at):'—'}</FlatRow><FlatRow label="Error">{row.error_message||'—'}</FlatRow><p className="dim">Platform responses and raw payloads are deliberately excluded. Deliveries cannot be retried or deleted here.</p></div>}]} />;}
+function DeliveryDetail({id,onClose}:{id:number;onClose:()=>void}){const query=PushDeliveryModel.useOne(id);if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading delivery…':'Delivery unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;return <DetailView title={row.title||`[${row.category} data]`} subtitle={`${outcomeLabel(row)} · ${relationLabel(row.device)}`} icon="bi-bell" chips={[{text:outcomeLabel(row),tone:statusTone(outcomeLabel(row))}]} onClose={onClose} sections={[{key:'preview',label:'Notification',icon:'bi-app-indicator',render:()=><div className="detail-section"><div className="push-preview"><strong>{row.title||'Data-only notification'}</strong><p>{row.body||'No visible message body.'}</p></div><FlatRow label="Category">{row.category}</FlatRow><FlatRow label="Action URL"><code>{row.action_url||'—'}</code></FlatRow></div>},{key:'delivery',label:'Delivery',icon:'bi-truck',render:()=><div className="detail-section"><p className="push-test-result">{outcomeHelp(row)}</p><FlatRow label="User">{relationLabel(row.user)}</FlatRow><FlatRow label="Device">{relationLabel(row.device)}</FlatRow><FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow><FlatRow label="Sent">{row.sent_at?fmt.datetime(row.sent_at):'—'}</FlatRow><FlatRow label="Delivered">{row.delivered_at?fmt.datetime(row.delivered_at):'—'}</FlatRow><FlatRow label="Error">{row.error_message||'—'}</FlatRow><p className="dim">A sent timestamp records a send attempt; receipt is confirmed only by a device delivery report.</p></div>}]} />;}
 export function PushDeliveriesPage(){return <ModelTable model={PushDeliveryModel} eyebrow="Communications · Push" title="Deliveries" columns={deliveryColumns} filters={deliveryFilters} defaultSort="-created" searchable searchPlaceholder="Search title or category" autoRefresh={20} columnChooser persistState persistKey="admin:push:deliveries" onRowClick={row=>void modal.detail(close=><DeliveryDetail id={row.id} onClose={()=>close(null)}/>)}/>;}
 
 function jsonText(value:Record<string,unknown>):string{return Object.keys(value).length?JSON.stringify(value,null,2):'';}
 function parseJsonObject(value:string,label:string):Record<string,unknown>{if(!value.trim())return {};let parsed:unknown;try{parsed=JSON.parse(value);}catch{throw new Error(`${label} must be valid JSON.`);}if(!parsed||typeof parsed!=='object'||Array.isArray(parsed))throw new Error(`${label} must be a JSON object.`);return parsed as Record<string,unknown>;}
-function TemplateEditor({row,close}:{row?:PushTemplateRow;close:(value:PushTemplateRow|null)=>void}){const save=PushTemplateModel.useSave();const canGroups=useCan(PUSH_GROUP_DIRECTORY_PERMISSIONS).can;const groups=useQuery({queryKey:['push','group-choices'],queryFn:fetchPushGroupChoices,enabled:canGroups,staleTime:60_000});const [name,setName]=useState(row?.name??'');const [category,setCategory]=useState(row?.category??'general');const [priority,setPriority]=useState<PushTemplateRow['priority']>(row?.priority??'normal');const [group,setGroup]=useState(row?.group?String(row.group.id):'');const [title,setTitle]=useState(row?.title_template??'');const [body,setBody]=useState(row?.body_template??'');const [actionUrl,setActionUrl]=useState(row?.action_url??'');const [data,setData]=useState(jsonText(row?.data_template??{}));const [variables,setVariables]=useState(jsonText(row?.variables??{}));const [active,setActive]=useState(row?.is_active??true);const [busy,setBusy]=useState(false);const [error,setError]=useState('');const submit=async()=>{setBusy(true);setError('');try{const dataTemplate=parseJsonObject(data,'Data template');const variableDocs=parseJsonObject(variables,'Variables');if(!title.trim()&&!body.trim()&&!Object.keys(dataTemplate).length)throw new Error('Provide a title, body, or data template.');const saved=await save.mutateAsync({id:row?.id??null,changes:{name:name.trim(),category:category.trim()||'general',priority,group:group?Number(group):null,title_template:title||null,body_template:body||null,action_url:actionUrl||null,data_template:dataTemplate,variables:variableDocs,is_active:active}});toast.success(row?'Push template updated':'Push template created');close(saved);}catch(reason){setError(reason instanceof Error?reason.message:'Template could not be saved.');}finally{setBusy(false);}};return <div className="modal-pad push-editor"><h2 className="modal-title">{row?'Edit':'Create'} push template</h2>{error&&<div className="form-alert" role="alert">{error}</div>}<div className="form-grid"><label className="field col-6"><span className="field-label">Name</span><input className="input" value={name} onChange={e=>setName(e.target.value)}/></label><label className="field col-3"><span className="field-label">Category</span><input className="input" value={category} onChange={e=>setCategory(e.target.value)}/></label><label className="field col-3"><span className="field-label">Priority</span><select className="input" value={priority} onChange={e=>setPriority(e.target.value as PushTemplateRow['priority'])}><option value="low">Low</option><option value="normal">Normal</option><option value="high">High</option></select></label>{canGroups?<label className="field col-12"><span className="field-label">Group</span><select className="input" value={group} onChange={e=>setGroup(e.target.value)}><option value="">System template</option>{groups.data?.map(item=><option key={item.id} value={item.id}>{item.name}</option>)}</select></label>:<div className="field col-12"><span className="field-label">Group</span><div className="input" aria-readonly="true">{relationLabel(row?.group??null,'System template')}</div></div>}<label className="field col-12"><span className="field-label">Title template</span><input className="input" value={title} onChange={e=>setTitle(e.target.value)}/></label><label className="field col-12"><span className="field-label">Body template</span><textarea className="input" rows={4} value={body} onChange={e=>setBody(e.target.value)}/></label><label className="field col-12"><span className="field-label">Action URL template</span><input className="input" value={actionUrl} onChange={e=>setActionUrl(e.target.value)}/></label><label className="field col-6"><span className="field-label">Data template JSON</span><textarea className="input" rows={6} value={data} onChange={e=>setData(e.target.value)}/></label><label className="field col-6"><span className="field-label">Variable documentation JSON</span><textarea className="input" rows={6} value={variables} onChange={e=>setVariables(e.target.value)}/></label><label className="check col-4"><input type="checkbox" checked={active} onChange={e=>setActive(e.target.checked)}/><span>Active</span></label></div><div className="modal-actions"><button className="btn" disabled={busy} onClick={()=>close(null)}>Cancel</button><button className="btn btn-primary" disabled={busy||!name.trim()} onClick={()=>void submit()}>{busy?'Saving…':'Save template'}</button></div></div>;}
+function TemplateEditor({row,close,pending}:{row?:PushTemplateRow;pending:{current:boolean};close:(value:PushTemplateRow|null)=>void}){const save=PushTemplateModel.useSave();const canGroups=useCan(PUSH_GROUP_DIRECTORY_PERMISSIONS).can;const groups=useQuery({queryKey:['push','group-choices'],queryFn:fetchPushGroupChoices,enabled:canGroups,staleTime:60_000});const [name,setName]=useState(row?.name??'');const [category,setCategory]=useState(row?.category??'general');const [priority,setPriority]=useState<PushTemplateRow['priority']>(row?.priority??'normal');const [group,setGroup]=useState(row?.group?String(row.group.id):'');const [title,setTitle]=useState(row?.title_template??'');const [body,setBody]=useState(row?.body_template??'');const [actionUrl,setActionUrl]=useState(row?.action_url??'');const [data,setData]=useState(jsonText(row?.data_template??{}));const [variables,setVariables]=useState(jsonText(row?.variables??{}));const [active,setActive]=useState(row?.is_active??true);const [busy,setBusy]=useState(false);const [error,setError]=useState('');const submit=async()=>{if(pending.current)return;pending.current=true;setBusy(true);setError('');try{const dataTemplate=parseJsonObject(data,'Data template');const variableDocs=parseJsonObject(variables,'Variables');if(!title.trim()&&!body.trim()&&!Object.keys(dataTemplate).length)throw new Error('Provide a title, body, or data template.');const saved=await save.mutateAsync({id:row?.id??null,changes:{name:name.trim(),category:category.trim()||'general',priority,group:group?Number(group):null,title_template:title||null,body_template:body||null,action_url:actionUrl||null,data_template:dataTemplate,variables:variableDocs,is_active:active}});toast.success(row?'Push template updated':'Push template created');close(saved);}catch(reason){setError(reason instanceof Error?reason.message:'Template could not be saved.');}finally{pending.current=false;setBusy(false);}};return <div className="modal-pad push-editor"><h2 className="modal-title">{row?'Edit':'Create'} push template</h2>{error&&<div className="form-alert" role="alert">{error}</div>}<fieldset disabled={busy} className="form-grid push-fields"><label className="field col-6"><span className="field-label">Name</span><input className="input" value={name} onChange={e=>setName(e.target.value)}/></label><label className="field col-3"><span className="field-label">Category</span><input className="input" value={category} onChange={e=>setCategory(e.target.value)}/></label><label className="field col-3"><span className="field-label">Priority</span><select className="input" value={priority} onChange={e=>setPriority(e.target.value as PushTemplateRow['priority'])}><option value="low">Low</option><option value="normal">Normal</option><option value="high">High</option></select></label>{canGroups?<label className="field col-12"><span className="field-label">Group</span><select className="input" value={group} onChange={e=>setGroup(e.target.value)}><option value="">System template</option>{groups.data?.map(item=><option key={item.id} value={item.id}>{item.name}</option>)}</select></label>:<div className="field col-12"><span className="field-label">Group</span><div className="input" aria-readonly="true">{relationLabel(row?.group??null,'System template')}</div></div>}<label className="field col-12"><span className="field-label">Title template</span><input className="input" value={title} onChange={e=>setTitle(e.target.value)}/></label><label className="field col-12"><span className="field-label">Body template</span><textarea className="input" rows={4} value={body} onChange={e=>setBody(e.target.value)}/></label><label className="field col-12"><span className="field-label">Action URL template</span><input className="input" value={actionUrl} onChange={e=>setActionUrl(e.target.value)}/></label><label className="field col-6"><span className="field-label">Data template JSON</span><textarea className="input" rows={6} value={data} onChange={e=>setData(e.target.value)}/></label><label className="field col-6"><span className="field-label">Variable documentation JSON</span><textarea className="input" rows={6} value={variables} onChange={e=>setVariables(e.target.value)}/></label><label className="check col-4"><input type="checkbox" checked={active} onChange={e=>setActive(e.target.checked)}/><span>Active</span></label></fieldset><div className="modal-actions"><button className="btn" disabled={busy} onClick={()=>close(null)}>Cancel</button><button className="btn btn-primary" disabled={busy||!name.trim()} onClick={()=>void submit()}>{busy?'Saving…':'Save template'}</button></div></div>;}
 const templateColumns:Column<PushTemplateRow>[]=[{key:'name',label:'Template',sortable:true,hideable:false},{key:'category',label:'Category',sortable:true},{key:'group',label:'Scope',render:r=>relationLabel(r.group,'System')},{key:'priority',label:'Priority',sortable:true,render:r=><Badge tone={r.priority==='high'?'warning':'info'}>{r.priority}</Badge>},{key:'is_active',label:'Active',sortable:true,render:r=><Badge tone={r.is_active?'success':'muted'}>{r.is_active?'active':'inactive'}</Badge>}];
-function TemplateDetail({id,onClose}:{id:number;onClose:()=>void}){const query=PushTemplateModel.useOne(id);const save=PushTemplateModel.useSave();const canManage=useCan(PUSH_TEMPLATE_MANAGE_PERMISSIONS).can;if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading template…':'Template unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;const edit=()=>void modal.open(close=><TemplateEditor row={row} close={async saved=>{close(saved);if(saved)await query.refetch();}}/>,{size:'lg'});const toggle=async(next:boolean)=>{if(!canManage||save.isPending)return;try{await save.mutateAsync({id,changes:{is_active:next}});await query.refetch();}catch(error){toast.error(error instanceof Error?error.message:"State change failed");}};return <DetailView title={row.name} subtitle={`${row.category} · ${relationLabel(row.group,'System')}`} icon="bi-file-earmark-richtext" onClose={onClose} active={canManage?{value:row.is_active,disabled:save.isPending,onChange:next=>void toggle(next)}:undefined} contextMenu={canManage?[{label:'Edit template',onSelect:edit},{label:row.is_active?'Deactivate':'Reactivate',disabled:save.isPending,onSelect:()=>void toggle(!row.is_active)}]:[]} sections={[{key:'template',label:'Template',icon:'bi-card-text',render:()=><div className="detail-section"><FlatRow label="Title">{row.title_template||'—'}</FlatRow><div className="known-card"><h3>Body</h3><p className="pre-wrap">{row.body_template||'—'}</p></div><FlatRow label="Action URL"><code>{row.action_url||'—'}</code></FlatRow><FlatRow label="Data keys">{Object.keys(row.data_template).join(', ')||'—'}</FlatRow><FlatRow label="Variables">{Object.keys(row.variables).join(', ')||'—'}</FlatRow></div>}]} />;}
-export function PushTemplatesPage(){const canManage=useCan(PUSH_TEMPLATE_MANAGE_PERMISSIONS).can;return <ModelTable model={PushTemplateModel} eyebrow="Communications · Push" title="Templates" columns={templateColumns} defaultSort="name" searchable searchPlaceholder="Search name or category" columnChooser persistState persistKey="admin:push:templates" addLabel="Create template" onAdd={canManage?()=>void modal.open(close=><TemplateEditor close={close}/>,{size:'lg'}):undefined} onRowClick={row=>void modal.detail(close=><TemplateDetail id={row.id} onClose={()=>close(null)}/>)}/>;}
+function TemplateDetail({id,onClose}:{id:number;onClose:()=>void}) {
+    const query=PushTemplateModel.useOne(id);const save=PushTemplateModel.useSave();const canManage=useCan(PUSH_TEMPLATE_MANAGE_PERMISSIONS).can;
+    if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading template…':'Template unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;
+    const row=query.data;const edit=()=>void openTemplateEditor(row,()=>query.refetch());
+    const toggle=async(next:boolean)=>{if(!canManage||save.isPending)return;try{await save.mutateAsync({id,changes:{is_active:next}});await query.refetch();}catch(error){toast.error(error instanceof Error?error.message:'State change failed');}};
+    return <DetailView title={row.name} subtitle={`${row.category} · ${relationLabel(row.group,'System template')}`} icon="bi-file-earmark-richtext" onClose={onClose}
+        active={canManage?{value:row.is_active,disabled:save.isPending,onChange:next=>void toggle(next)}:undefined}
+        contextMenu={canManage?[{label:'Edit template',disabled:save.isPending,onSelect:edit},{label:row.is_active?'Deactivate':'Reactivate',disabled:save.isPending,onSelect:()=>void toggle(!row.is_active)}]:[]}
+        sections={[{key:'overview',label:'Overview',icon:'bi-info-circle',render:()=><div className="detail-section"><FlatRow label="Template ID">#{row.id}</FlatRow><FlatRow label="Scope">{relationLabel(row.group,'System template')}</FlatRow><FlatRow label="Category">{row.category}</FlatRow><FlatRow label="Priority">{row.priority}</FlatRow><FlatRow label="Active">{row.is_active?'Yes':'No'}</FlatRow></div>},
+        {key:'template',label:'Notification',icon:'bi-card-text',render:()=><div className="detail-section"><div className="push-preview"><strong>{row.title_template||'Data-only notification'}</strong><p>{row.body_template||'No visible message body.'}</p></div><FlatRow label="Action URL"><code>{row.action_url||'—'}</code></FlatRow><FlatRow label="Data keys">{Object.keys(row.data_template).join(', ')||'—'}</FlatRow></div>},
+        {key:'variables',label:'Variables',icon:'bi-braces',render:()=><div className="detail-section">{Object.keys(row.variables).length?Object.entries(row.variables).map(([key,value])=><FlatRow key={key} label={key}>{String(value??'—')}</FlatRow>):<p className="dim">No variables documented.</p>}</div>}]} />;
+}
+export function PushTemplatesPage(){const canManage=useCan(PUSH_TEMPLATE_MANAGE_PERMISSIONS).can;return <ModelTable model={PushTemplateModel} eyebrow="Communications · Push" title="Templates" columns={templateColumns} defaultSort="name" searchable searchPlaceholder="Search name or category" columnChooser persistState persistKey="admin:push:templates" addLabel="Create template" onAdd={canManage?()=>void openTemplateEditor():undefined} onRowClick={row=>void modal.detail(close=><TemplateDetail id={row.id} onClose={()=>close(null)}/>)}/>;}
 
-function ConfigEditor({row,close}:{row?:PushConfigRow;close:(value:PushConfigRow|null)=>void}){const qc=useQueryClient();const canGroups=useCan(PUSH_GROUP_DIRECTORY_PERMISSIONS).can;const groups=useQuery({queryKey:['push','group-choices'],queryFn:fetchPushGroupChoices,enabled:canGroups,staleTime:60_000});const credentialRef=useRef<HTMLTextAreaElement>(null);const [clearCredential,setClearCredential]=useState(false);const [name,setName]=useState(row?.name??'');const [group,setGroup]=useState(row?.group?String(row.group.id):'');const [sound,setSound]=useState(row?.default_sound??'default');const [active,setActive]=useState(row?.is_active??true);const [testMode,setTestMode]=useState(row?.test_mode??false);const [busy,setBusy]=useState(false);const [error,setError]=useState('');const toggleClear=()=>{if(clearCredential){setClearCredential(false);return;}if(window.confirm('Clear the stored FCM service account on save?'))setClearCredential(true);};const submit=async()=>{setBusy(true);setError('');let credential:FcmCredentialEdit={mode:'untouched'};try{const source=credentialRef.current?.value??'';if(clearCredential)credential={mode:'clear',confirmed:true};else if(source.trim())credential={mode:'replace',value:parseFcmServiceAccount(source)};const saved=await savePushConfigImperative(qc,row?.id??null,{name:name.trim(),group:group?Number(group):null,default_sound:sound.trim()||'default',is_active:active,test_mode:testMode},credential);toast.success(row?'Push configuration updated':'Push configuration created');close(saved);}catch(reason){setError(reason instanceof Error?reason.message:'Configuration could not be saved.');}finally{if(credentialRef.current)credentialRef.current.value='';credential={mode:'untouched'};setBusy(false);}};return <div className="modal-pad push-editor"><h2 className="modal-title">{row?'Edit':'Create'} push configuration</h2><p className="dim">The FCM service account is write-only and never prefills. Leave blank to keep it, enter a validated service-account JSON object to replace it, or explicitly confirm clear.</p>{error&&<div className="form-alert" role="alert">{error}</div>}<div className="form-grid"><label className="field col-8"><span className="field-label">Name</span><input className="input" value={name} onChange={e=>setName(e.target.value)}/></label><label className="field col-4"><span className="field-label">Default sound</span><input className="input" value={sound} onChange={e=>setSound(e.target.value)}/></label>{canGroups?<label className="field col-12"><span className="field-label">Group</span><select className="input" value={group} onChange={e=>setGroup(e.target.value)}><option value="">System default</option>{groups.data?.map(item=><option key={item.id} value={item.id}>{item.name}</option>)}</select></label>:<div className="field col-12"><span className="field-label">Group</span><div className="input" aria-readonly="true">{relationLabel(row?.group??null,'System default')}</div></div>}<label className="field col-12"><span className="field-label">FCM service account JSON</span><textarea ref={credentialRef} className="input" rows={9} autoComplete="off" spellCheck={false} disabled={clearCredential}/><span className="field-help">Required fields: type=service_account, project_id, client_email, and a PEM private_key.</span></label><div className="col-12"><button type="button" className={`btn${clearCredential?' btn-danger':''}`} onClick={toggleClear}>{clearCredential?'Keep stored credential':'Clear stored credential…'}</button></div><label className="check col-4"><input type="checkbox" checked={active} onChange={e=>setActive(e.target.checked)}/><span>Active</span></label><label className="check col-4"><input type="checkbox" checked={testMode} onChange={e=>setTestMode(e.target.checked)}/><span>Test mode</span></label></div><div className="modal-actions"><button className="btn" disabled={busy} onClick={()=>close(null)}>Cancel</button><button className="btn btn-primary" disabled={busy||!name.trim()} onClick={()=>void submit()}>{busy?'Saving…':'Save configuration'}</button></div></div>;}
+function ConfigEditor({row,close,pending}:{row?:PushConfigRow;pending:{current:boolean};close:(value:PushConfigRow|null)=>void}){const qc=useQueryClient();const canGroups=useCan(PUSH_GROUP_DIRECTORY_PERMISSIONS).can;const groups=useQuery({queryKey:['push','group-choices'],queryFn:fetchPushGroupChoices,enabled:canGroups,staleTime:60_000});const credentialRef=useRef<HTMLTextAreaElement>(null);const [clearCredential,setClearCredential]=useState(false);const [name,setName]=useState(row?.name??'');const [group,setGroup]=useState(row?.group?String(row.group.id):'');const [sound,setSound]=useState(row?.default_sound??'default');const [active,setActive]=useState(row?.is_active??true);const [testMode,setTestMode]=useState(row?.test_mode??false);const [busy,setBusy]=useState(false);const [error,setError]=useState('');const toggleClear=()=>{if(clearCredential){setClearCredential(false);return;}if(window.confirm('Clear the stored FCM service account on save?'))setClearCredential(true);};const submit=async()=>{if(pending.current)return;pending.current=true;setBusy(true);setError('');let credential:FcmCredentialEdit={mode:'untouched'};try{const source=credentialRef.current?.value??'';if(clearCredential)credential={mode:'clear',confirmed:true};else if(source.trim())credential={mode:'replace',value:parseFcmServiceAccount(source)};const saved=await savePushConfigImperative(qc,row?.id??null,{name:name.trim(),group:group?Number(group):null,default_sound:sound.trim()||'default',is_active:active,test_mode:testMode},credential);toast.success(row?'Push configuration updated':'Push configuration created');close(saved);}catch(reason){setError(reason instanceof Error?reason.message:'Configuration could not be saved.');}finally{if(credentialRef.current)credentialRef.current.value='';credential={mode:'untouched'};pending.current=false;setBusy(false);}};return <div className="modal-pad push-editor"><h2 className="modal-title">{row?'Edit':'Create'} push configuration</h2><p className="dim">The FCM service account is write-only and never prefills. Leave blank to keep it, enter a validated service-account JSON object to replace it, or explicitly confirm clear.</p>{error&&<div className="form-alert" role="alert">{error}</div>}<fieldset disabled={busy} className="form-grid push-fields"><label className="field col-8"><span className="field-label">Name</span><input className="input" value={name} onChange={e=>setName(e.target.value)}/></label><label className="field col-4"><span className="field-label">Default sound</span><input className="input" value={sound} onChange={e=>setSound(e.target.value)}/></label>{canGroups?<label className="field col-12"><span className="field-label">Group</span><select className="input" value={group} onChange={e=>setGroup(e.target.value)}><option value="">System default</option>{groups.data?.map(item=><option key={item.id} value={item.id}>{item.name}</option>)}</select></label>:<div className="field col-12"><span className="field-label">Group</span><div className="input" aria-readonly="true">{relationLabel(row?.group??null,'System default')}</div></div>}<label className="field col-12"><span className="field-label">FCM service account JSON</span><textarea ref={credentialRef} className="input" rows={9} autoComplete="off" spellCheck={false} disabled={clearCredential}/><span className="field-help">Required fields: type=service_account, project_id, client_email, and a PEM private_key.</span></label><div className="col-12"><button type="button" className={`btn${clearCredential?' btn-danger':''}`} onClick={toggleClear}>{clearCredential?'Keep stored credential':'Clear stored credential…'}</button></div><label className="check col-4"><input type="checkbox" checked={active} onChange={e=>setActive(e.target.checked)}/><span>Active</span></label><label className="check col-4"><input type="checkbox" checked={testMode} onChange={e=>setTestMode(e.target.checked)}/><span>Simulation mode (no real sends)</span></label></fieldset><div className="modal-actions"><button className="btn" disabled={busy} onClick={()=>close(null)}>Cancel</button><button className="btn btn-primary" disabled={busy||!name.trim()} onClick={()=>void submit()}>{busy?'Saving…':'Save configuration'}</button></div></div>;}
 const configColumns:Column<PushConfigRow>[]=[{key:'name',label:'Configuration',sortable:true,hideable:false},{key:'group',label:'Scope',render:r=>relationLabel(r.group,'System default')},{key:'fcm_project_id',label:'FCM project',render:r=>r.fcm_project_id||'Not reported'},{key:'test_mode',label:'Test mode',sortable:true,render:r=><Badge tone={r.test_mode?'warning':'muted'}>{r.test_mode?'yes':'no'}</Badge>},{key:'is_active',label:'Active',sortable:true,render:r=><Badge tone={r.is_active?'success':'muted'}>{r.is_active?'active':'inactive'}</Badge>}];
-function ConfigDetail({id,onClose}:{id:number;onClose:()=>void}){const query=PushConfigModel.useOne(id);const qc=useQueryClient();const [saving,setSaving]=useState(false);const canManage=useCan(PUSH_CONFIG_MANAGE_PERMISSIONS).can;const canTest=useCan(PUSH_CONFIG_TEST_PERMISSIONS).can;if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading configuration…':'Configuration unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;const edit=()=>void modal.open(close=><ConfigEditor row={row} close={async saved=>{close(saved);if(saved)await query.refetch();}}/>,{size:'lg'});const test=async()=>{try{const result=await testPushConfigConnection(id);toast.success(result.message);}catch{toast.error('FCM connection test failed. Review the stored service account and server logs.');}};const toggle=async(next:boolean)=>{if(!canManage||saving)return;setSaving(true);try{await savePushConfigImperative(qc,id,{is_active:next},{mode:"untouched"});await query.refetch();}catch(error){toast.error(error instanceof Error?error.message:"State change failed");}finally{setSaving(false);}};return <DetailView title={row.name} subtitle={`${relationLabel(row.group,'System default')} · ${row.fcm_project_id||'FCM project unavailable'}`} icon="bi-broadcast-pin" onClose={onClose} active={canManage?{value:row.is_active,disabled:saving,onChange:next=>void toggle(next)}:undefined} contextMenu={[...(canManage?[{label:'Edit configuration',onSelect:edit},{label:row.is_active?'Deactivate':'Reactivate',disabled:saving,onSelect:()=>void toggle(!row.is_active)}]:[]),...(canTest?[{label:'Test stored credentials',onSelect:()=>void test()}]:[])]} sections={[{key:'configuration',label:'Configuration',icon:'bi-sliders',render:()=><div className="detail-section"><FlatRow label="FCM project">{row.fcm_project_id||'—'}</FlatRow><FlatRow label="Default sound">{row.default_sound}</FlatRow><FlatRow label="Active">{row.is_active?'Yes':'No'}</FlatRow><FlatRow label="Test mode">{row.test_mode?'Yes — sends are faked':'No'}</FlatRow><p className="dim">The connection test uses the backend's dummy registration token to validate credentials. This portal never accepts a device token and never sends a caller test notification.</p></div>}]} />;}
-export function PushConfigsPage(){const canManage=useCan(PUSH_CONFIG_MANAGE_PERMISSIONS).can;return <ModelTable model={PushConfigModel} eyebrow="Communications · Push" title="Configuration" columns={configColumns} defaultSort="name" searchable searchPlaceholder="Search configuration names" columnChooser persistState persistKey="admin:push:configs" addLabel="Create configuration" onAdd={canManage?()=>void modal.open(close=><ConfigEditor close={close}/>,{size:'lg'}):undefined} onRowClick={row=>void modal.detail(close=><ConfigDetail id={row.id} onClose={()=>close(null)}/>)}/>;}
+function ConfigDetail({id,onClose}:{id:number;onClose:()=>void}) {
+    const query=PushConfigModel.useOne(id);const qc=useQueryClient();const [saving,setSaving]=useState(false);const [testing,setTesting]=useState(false);const testPending=useRef(false);
+    const canManage=useCan(PUSH_CONFIG_MANAGE_PERMISSIONS).can;const tester=useCan(PUSH_CONFIG_TEST_PERMISSIONS);const canTest=tester.can;
+    const revision=`${id}:${query.data?.modified}:${canTest}:${tester.me?.id}`;const own=usePushRequestOwner(revision);
+    const [result,setResult]=useState<{value:PushTestResult;at:number;revision:string}|null>(null);
+    if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading configuration…':'Configuration unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;
+    const row=query.data;const busy=saving||testing;
+    const edit=()=>{if(!canManage||testPending.current||saving)return;setResult(null);void openConfigEditor(row,()=>query.refetch());};
+    const test=async()=>{if(!canTest||testPending.current||saving)return;testPending.current=true;setTesting(true);setResult(null);const current=own();try{const value=await testPushConfigConnection(id);if(current())setResult({value,at:Date.now()/1000,revision});}finally{testPending.current=false;setTesting(false);}};
+    const toggle=async(next:boolean)=>{if(!canManage||busy||testPending.current)return;setResult(null);setSaving(true);try{await savePushConfigImperative(qc,id,{is_active:next},{mode:'untouched'});await query.refetch();}catch(error){toast.error(error instanceof Error?error.message:'State change failed');}finally{setSaving(false);}};
+    const shown=result?.revision===revision?result:null;
+    return <DetailView title={row.name} subtitle={`${relationLabel(row.group,'System default')} · ${row.fcm_project_id||'FCM project unavailable'}`} icon="bi-broadcast-pin" onClose={onClose}
+        chips={[{text:row.test_mode?'Simulation mode':'Real sends',tone:row.test_mode?'warning':'info'}]}
+        active={canManage?{value:row.is_active,disabled:busy,onChange:next=>void toggle(next)}:undefined}
+        contextMenu={[...(canManage?[{label:'Edit configuration',disabled:busy,onSelect:edit},{label:row.is_active?'Deactivate':'Reactivate',disabled:busy,onSelect:()=>void toggle(!row.is_active)}]:[]),...(canTest?[{label:testing?'Checking FCM…':'Check FCM connection',disabled:busy,onSelect:()=>void test()}]:[])]}
+        sections={[{key:'overview',label:'Overview',icon:'bi-sliders',render:()=><div className="detail-section"><FlatRow label="Scope">{relationLabel(row.group,'System default')}{row.group?` · #${row.group.id}`:''}</FlatRow><FlatRow label="Configuration ID">#{row.id}</FlatRow><FlatRow label="Active">{row.is_active?'Yes':'No'}</FlatRow><FlatRow label="Send mode">{row.test_mode?'Simulation — device sends are skipped':'Real notifications'}</FlatRow><FlatRow label="Default sound">{row.default_sound}</FlatRow><FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow><FlatRow label="Updated">{fmt.datetime(row.modified)}</FlatRow><p className="dim">A user’s active organization configuration takes precedence over the system default. The device test shows which configuration applies.</p>{shown&&<PushTestResultView result={shown.value} at={shown.at}/>}</div>},
+        {key:'connection',label:'Connection',icon:'bi-plug',render:()=><div className="detail-section"><FlatRow label="Provider">Firebase Cloud Messaging (HTTP v1)</FlatRow><FlatRow label="FCM project">{row.fcm_project_id||'Not reported'}</FlatRow><FlatRow label="Service account">{row.fcm_client_email||'Not reported'}</FlatRow><FlatRow label="Credentials">{row.has_fcm_credentials===null?'Presence not reported':row.has_fcm_credentials?'Stored':'Missing'}</FlatRow>
+            <p className="dim">Check FCM connection verifies the stored service account’s permission to send to this project. It contacts FCM even in simulation mode and does not deliver a notification.</p>
+            {testing?<p role="status">Checking FCM connection…</p>:shown?<PushTestResultView result={shown.value} at={shown.at}/>:<p className="dim">No connection check for this configuration in this view.</p>}
+        </div>}]} />;
+}
+export function PushConfigsPage(){const canManage=useCan(PUSH_CONFIG_MANAGE_PERMISSIONS).can;return <ModelTable model={PushConfigModel} eyebrow="Communications · Push" title="Configuration" columns={configColumns} defaultSort="name" searchable searchPlaceholder="Search configuration names" columnChooser persistState persistKey="admin:push:configs" addLabel="Create configuration" onAdd={canManage?()=>void openConfigEditor():undefined} onRowClick={row=>void modal.detail(close=><ConfigDetail id={row.id} onClose={()=>close(null)}/>)}/>;}
+
+export function PushPage(){const [searchParams,setSearchParams]=useSearchParams();const devices=useCan(PUSH_DEVICE_VIEW_PERMISSIONS);const deliveries=useCan(PUSH_DELIVERY_VIEW_PERMISSIONS);const templates=useCan(PUSH_TEMPLATE_VIEW_PERMISSIONS);const config=useCan(PUSH_CONFIG_VIEW_PERMISSIONS);const metrics=useCan(PUSH_METRICS_PERMISSIONS);if(devices.isLoading||deliveries.isLoading||templates.isLoading||config.isLoading||metrics.isLoading)return <div className="panel panel-pad dim">Loading Push permissions…</div>;const items=[{key:'stats',label:'Your stats',panel:<PushStatsPanel/>},...(metrics.can?[{key:'metrics',label:'Global metrics',panel:<PushMetricsPanel/>}]:[]),...(devices.can?[{key:'devices',label:'Devices',panel:<PushDevicesPage/>}]:[]),...(deliveries.can?[{key:'deliveries',label:'Deliveries',panel:<PushDeliveriesPage/>}]:[]),...(templates.can?[{key:'templates',label:'Templates',panel:<PushTemplatesPage/>}]:[]),...(config.can?[{key:'config',label:'Config',panel:<PushConfigsPage/>}]:[])];const requested=searchParams.get('push_surface')??'stats';const select=(key:string)=>setSearchParams({...Object.fromEntries([...searchParams].filter(([name])=>name==='demo')),push_surface:key},{replace:true});return <div className="push-page"><div className="push-heading"><p className="eyebrow">Communications</p><h1>Push Notifications</h1><p className="dim">Inspect registered devices, send test notifications, and verify your push configuration.</p></div><Tabs ariaLabel="Push administration areas" variant="underline-all" items={items} activeKey={requested} onActiveKeyChange={select}/></div>;}
 
-export function PushPage(){const [searchParams,setSearchParams]=useSearchParams();const devices=useCan(PUSH_DEVICE_VIEW_PERMISSIONS);const deliveries=useCan(PUSH_DELIVERY_VIEW_PERMISSIONS);const templates=useCan(PUSH_TEMPLATE_VIEW_PERMISSIONS);const config=useCan(PUSH_CONFIG_VIEW_PERMISSIONS);const metrics=useCan(PUSH_METRICS_PERMISSIONS);if(devices.isLoading||deliveries.isLoading||templates.isLoading||config.isLoading||metrics.isLoading)return <div className="panel panel-pad dim">Loading Push permissions…</div>;const items=[{key:'stats',label:'Your stats',panel:<PushStatsPanel/>},...(metrics.can?[{key:'metrics',label:'Global metrics',panel:<PushMetricsPanel/>}]:[]),...(devices.can?[{key:'devices',label:'Devices',panel:<PushDevicesPage/>}]:[]),...(deliveries.can?[{key:'deliveries',label:'Deliveries',panel:<PushDeliveriesPage/>}]:[]),...(templates.can?[{key:'templates',label:'Templates',panel:<PushTemplatesPage/>}]:[]),...(config.can?[{key:'config',label:'Config',panel:<PushConfigsPage/>}]:[])];const requested=searchParams.get('push_surface')??'stats';const select=(key:string)=>setSearchParams({push_surface:key},{replace:true});return <div className="push-page"><div className="push-heading"><p className="eyebrow">Communications</p><h1>Push Notifications</h1><p className="dim">One global, no-group control plane. Each tab has an independent backend-derived gate; only the active authorized tab mounts and fetches.</p></div><Tabs ariaLabel="Push administration areas" variant="underline-all" items={items} activeKey={requested} onActiveKeyChange={select}/></div>;}
+function openTemplateEditor(row?:PushTemplateRow,onSaved?:()=>unknown){const pending={current:false};return modal.open(close=><TemplateEditor row={row} pending={pending} close={saved=>{close(saved);if(saved)void onSaved?.();}}/>,{size:'lg',canDismiss:()=>!pending.current});}
+function openConfigEditor(row?:PushConfigRow,onSaved?:()=>unknown){const pending={current:false};return modal.open(close=><ConfigEditor row={row} pending={pending} close={saved=>{close(saved);if(saved)void onSaved?.();}}/>,{size:'lg',canDismiss:()=>!pending.current});}