portal-mojo 0.2.4 → 0.2.6

package/src/admin/domains/identity.ts

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

package/src/admin/domains/operations.ts

@@ -6,6 +6,13 @@ export const SETTINGS_ADMIN_SECTION: AdminSection = {
     id: 'settings', title: 'Settings', icon: 'bi-gear', navigationGroup: 'operations', permissions: SETTINGS_PERMISSIONS,
     routes: [{ path: '', loadComponent: () => import('../settings/SettingsPage').then(({ SettingsPage }) => ({ default: 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: 'operations', permissions: [],
+    routes: [{ path: '', loadComponent: () => import('../fleet-configuration/FleetConfigurationPage').then(({ FleetConfigurationPage }) => ({ default: FleetConfigurationPage })) }],
+};
 export const JOBS_ADMIN_SECTION: AdminSection = {
     id: 'jobs', title: 'Jobs', icon: 'bi-cpu', navigationGroup: 'operations', permissions: [...new Set([...JOBS_VIEW_PERMS, ...SCHEDULED_TASK_VIEW_PERMS])],
     routes: [
@@ -15,4 +22,4 @@ export const JOBS_ADMIN_SECTION: AdminSection = {
         { path: 'scheduled-tasks', label: 'Scheduled Tasks', loadComponent: () => import('../jobs/ScheduledTasksPage').then(({ ScheduledTasksPage }) => ({ default: ScheduledTasksPage })), permissions: SCHEDULED_TASK_VIEW_PERMS },
     ],
 };
-export const OPERATIONS_ADMIN_SECTIONS = [SETTINGS_ADMIN_SECTION, JOBS_ADMIN_SECTION] as const;
+export const OPERATIONS_ADMIN_SECTIONS = [SETTINGS_ADMIN_SECTION, FLEET_CONFIGURATION_ADMIN_SECTION, JOBS_ADMIN_SECTION] as const;

package/src/admin/fleet-configuration/FleetConfigurationPage.tsx

@@ -0,0 +1,171 @@
+import { useRef, useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMe } from '../../client/runtime';
+import { modal } from '../../ui';
+import {
+    FLEET_ENDPOINT, FLEET_HEALTH_SCOPE, displayFleetValue, fleetChange, fleetIsHealthy, operationFinished,
+    readFleet, readFleetHistory, readFleetOperation, writeFleet,
+    type FleetChanges, type FleetEntry, type FleetOperation, type FleetPublication, type FleetReport, type FleetState,
+} from './data';
+
+function SettingInput({ entry, disabled }: { entry: FleetEntry; disabled: boolean }) {
+    const [mode, setMode] = useState('keep');
+    const current = entry.sensitive ? (entry.configured ? 'Configured (hidden)' : 'Not configured') : displayFleetValue(entry.current);
+    const initial = entry.sensitive ? '' : entry.value_type === 'string' ? String(entry.current ?? '')
+        : entry.value_type === 'boolean' ? String(entry.current === true)
+        : entry.current == null ? '' : JSON.stringify(entry.current);
+    const control = { name: `${entry.key}:value`, className: 'input', disabled, defaultValue: initial };
+    return <div className="panel panel-pad" style={{ minWidth: 0 }}>
+        <h3>{entry.label}</h3><p className="dim">{entry.description}</p>
+        <p style={{ overflowWrap: 'anywhere' }}><b>Current:</b> {current}</p>
+        {!entry.sensitive && <p className="dim">Default: {displayFleetValue(entry.default)}</p>}
+        <p><span className="badge">{entry.restart_required ? 'Restart required' : 'No restart required'}</span></p>
+        <label className="field"><span className="field-label">Proposed change for {entry.label}</span>
+            <select className="input" name={`${entry.key}:mode`} value={mode} disabled={disabled} onChange={(event) => setMode(event.target.value)}>
+                <option value="keep">Keep current value</option><option value="set">{entry.sensitive ? 'Replace secret' : 'Set value'}</option>
+                {entry.overridden && <option value="clear">Remove published override</option>}
+            </select>
+        </label>
+        {mode === 'set' && <label className="field"><span className="field-label">{entry.sensitive ? 'Secret replacement' : 'Proposed value'}</span>
+            {entry.value_type === 'boolean' ? <select {...control}><option value="true">True</option><option value="false">False</option></select>
+                : entry.value_type === 'list' || entry.value_type === 'object' ? <textarea {...control} rows={4} autoComplete="off" spellCheck={false} />
+                    : <input {...control} type={entry.sensitive ? 'password' : entry.value_type === 'integer' ? 'number' : 'text'}
+                        autoComplete="off" spellCheck={false} min={entry.min_value ?? undefined} max={entry.max_value ?? undefined} maxLength={entry.max_length} step={1} />}
+            <span className="field-help">{entry.sensitive ? 'Leave blank to preserve the existing secret. Secrets are never shown in history.'
+                : entry.value_type === 'list' || entry.value_type === 'object' ? `Enter a JSON ${entry.value_type}; at most ${entry.max_items ?? 100} entries.` : 'Validated again by the server before publication.'}</span>
+        </label>}
+        {mode === 'clear' && <p className="text-warn">Removes this published override; the node’s base configuration or application default will apply.</p>}
+    </div>;
+}
+
+function FleetEditor({ state, busy, onPublish }: { state: FleetState; busy: boolean; onPublish: (changes: FleetChanges) => Promise<void> }) {
+    const form = useRef<HTMLFormElement>(null);
+    const [error, setError] = useState('');
+    const sections = [...new Set(state.entries.map((entry) => entry.section))];
+    const submit = async (event: React.FormEvent) => {
+        event.preventDefault(); setError('');
+        try {
+            const fields = new FormData(form.current!);
+            const changes: FleetChanges = {};
+            for (const entry of state.entries) {
+                const change = fleetChange(entry, String(fields.get(`${entry.key}:mode`) ?? 'keep'), String(fields.get(`${entry.key}:value`) ?? ''));
+                if (change) changes[entry.key] = change;
+            }
+            if (!Object.keys(changes).length) { setError('Choose at least one change before publishing.'); return; }
+            await onPublish(changes);
+        } catch (reason) { setError(reason instanceof Error ? reason.message : 'Could not publish configuration'); }
+    };
+    return <form ref={form} onSubmit={submit}>
+        <fieldset disabled={busy} style={{ border: 0, padding: 0, margin: 0, minWidth: 0 }}>
+            {sections.map((section) => <section key={section} style={{ marginBottom: 20 }}><h2>{section}</h2>
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))', gap: 12 }}>
+                    {state.entries.filter((entry) => entry.section === section).map((entry) => <SettingInput key={entry.key} entry={entry} disabled={busy} />)}
+                </div></section>)}
+            {!state.entries.length && <p>No settings have been registered and delegated for this application.</p>}
+            {error && <p className="form-alert" role="alert">{error}</p>}
+            <button className="btn btn-primary" type="submit" disabled={busy || !state.publish_configured || !state.entries.length}>Publish</button>
+        </fieldset>
+    </form>;
+}
+
+export function FleetNodeStatus({ report, revision }: { report: FleetReport; revision: string | null }) {
+    const healthy = fleetIsHealthy(report);
+    const jobsCovered = report.health_scope === FLEET_HEALTH_SCOPE;
+    return <section className="panel panel-pad" aria-label="Fleet convergence" style={{ marginTop: 20 }}>
+        <h2>Fleet convergence</h2><p role="status" className={healthy ? 'text-ok' : 'text-warn'}>
+            {healthy ? 'Applied and healthy on every expected node' : `Not confirmed healthy everywhere — ${report.status}`}</p>
+        <p className="dim" style={{ overflowWrap: 'anywhere' }}>Target revision: {revision ?? 'Not published'}{report.observed_at ? ` · Observed ${report.observed_at}` : ''}</p>
+        {report.error_code && <p className="form-alert">{report.error_code}</p>}
+        {!report.nodes.length ? <p>No node results are available. Publication alone does not establish fleet health.</p>
+            : <div className="tbl-scroll"><table className="tbl"><thead><tr><th>Node</th><th>Published</th><th>Downloaded / installed</th><th>Restart</th><th>Healthy</th><th>Result</th></tr></thead>
+                <tbody>{report.nodes.map((node) => <tr key={node.hostname}><td>{node.hostname}</td><td>{node.published ? 'Yes' : 'Unconfirmed'}</td>
+                    <td>{node.installed ? 'Yes' : 'Unconfirmed'}</td><td>{jobsCovered && node.restarted ? 'Confirmed' : node.restart_requested ? 'Requested' : 'Unconfirmed'}</td>
+                    <td>{jobsCovered && node.healthy && node.installed && node.restarted && !node.error_code ? 'Yes' : 'Unconfirmed'}</td><td>{node.error_code ?? (!jobsCovered && node.status === 'healthy' ? 'Scope unverified' : node.status)}</td></tr>)}</tbody></table></div>}
+        {!jobsCovered && <p className="text-warn">This report does not verify job engine and scheduler activation. Refresh after upgrading the backend to confirm fleet health.</p>}
+        <p className="dim">Health verifies the request service where enabled, plus the job engine and scheduler. Worker-only nodes do not require a request service. Offline or missing nodes remain unconfirmed.</p>
+    </section>;
+}
+
+function FleetContent({ userId }: { userId: number }) {
+    const queryClient = useQueryClient();
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState('');
+    const [notice, setNotice] = useState('');
+    const [editorEpoch, setEditorEpoch] = useState(0);
+    const [operationId, setOperationId] = useState<string | null>(null);
+    const queryKey = [FLEET_ENDPOINT, userId];
+    const stateQuery = useQuery({ queryKey, queryFn: readFleet, refetchOnWindowFocus: false, retry: false });
+    const history = useQuery({ queryKey: [...queryKey, 'history'], queryFn: readFleetHistory, retry: false });
+    const operation = useQuery({ queryKey: [...queryKey, 'operation', operationId], enabled: operationId != null,
+        queryFn: () => readFleetOperation(operationId!), retry: false,
+        refetchInterval: (query) => query.state.error || (query.state.data && operationFinished(query.state.data)) ? false : 3000 });
+    const state = stateQuery.data;
+    const refresh = async () => { await Promise.all([stateQuery.refetch(), history.refetch(), ...(operationId ? [operation.refetch()] : [])]); };
+    const run = async (task: () => Promise<void>) => {
+        setBusy(true); setError(''); setNotice('');
+        try { await task(); } catch (reason) { setError(reason instanceof Error ? reason.message : 'Fleet operation failed'); }
+        finally { setBusy(false); }
+    };
+    const publish = async (changes: FleetChanges) => {
+        if (!state || !await modal.confirm({ title: 'Publish fleet configuration?',
+            message: `Publish changes to ${Object.keys(changes).join(', ')}? Config-sync timers will download the new configuration and may restart services. Publication does not confirm that nodes are healthy.`, confirmText: 'Publish' })) return;
+        await run(async () => {
+            const result = await writeFleet<FleetPublication>({ action: 'publish', expected_revision: state.revision, changes });
+            if (result.published !== true) throw new Error('Publication was not confirmed. Reload to check the current revision.');
+            setOperationId(null); setEditorEpoch((value) => value + 1); setNotice('Published to S3. Node application and health are still pending.'); await refresh();
+        });
+    };
+    const apply = async () => {
+        if (!state || !await modal.confirm({ title: 'Apply configuration now?', message: 'Ask every expected node to run its configured sync service now. Services may restart. Results will appear below.', confirmText: 'Apply now' })) return;
+        await run(async () => {
+            const result = await writeFleet<FleetOperation>({ action: 'apply', expected_revision: state.revision });
+            if (!result.operation_id) throw new Error('No apply operation was returned. Refresh node status before retrying.');
+            queryClient.setQueryData([...queryKey, 'operation', result.operation_id], result);
+            setOperationId(result.operation_id); setNotice('Apply requested. Waiting for each node to confirm its result.');
+        });
+    };
+    const restore = async (versionId: string) => {
+        if (!state || !await modal.confirm({ title: 'Restore previous version?', message: 'Publish this previous configuration as a new revision, including its stored secret values. Config-sync timers may restart services. Node health must be checked separately.', confirmText: 'Restore previous version' })) return;
+        await run(async () => {
+            const result = await writeFleet<FleetPublication>({ action: 'restore', expected_revision: state.revision, version_id: versionId });
+            if (result.published !== true) throw new Error('Restore was not confirmed. Reload to check the current revision.');
+            setOperationId(null); setEditorEpoch((value) => value + 1); setNotice('Previous version published as a new revision. Node application and health are still pending.'); await refresh();
+        });
+    };
+    if (!state) return <div className="panel panel-pad"><h1>Fleet Configuration</h1><p role="alert">{stateQuery.error?.message ?? 'Loading configuration…'}</p>
+        {stateQuery.error && <button className="btn" onClick={() => void refresh()}>Retry</button>}</div>;
+    const tracked = operationId && operation.data?.revision === state.revision ? operation.data : null;
+    const evidence = tracked && (!operationFinished(tracked) || Date.parse(tracked.observed_at ?? '') > Date.parse(state.fleet.observed_at ?? '')) ? tracked : state.fleet;
+    const report = stateQuery.error || operation.error ? { ...evidence, status: 'observation_unavailable', healthy_everywhere: false,
+        nodes: evidence.nodes.map((node) => ({ ...node, healthy: false })) } : evidence;
+    return <div className="page" style={{ minWidth: 0, overflowWrap: 'anywhere' }}><header className="page-header"><div><h1>Fleet Configuration</h1>
+        <p className="dim">Publish registered application settings and track their application across your nodes.</p></div></header>
+        <div className="panel panel-pad" style={{ marginBottom: 20 }}><p style={{ overflowWrap: 'anywhere' }}><b>Published to S3:</b> {state.published ? state.revision : 'Not yet published'}</p>
+            <p className="dim">This request’s node loaded revision: {state.loaded_revision ?? 'Not reported'}</p>
+            {!state.publish_configured && <p className="form-alert">Publishing is unavailable until the fleet configuration location, encryption and delegated settings are configured.</p>}
+            <button className="btn" disabled={busy || stateQuery.isFetching} onClick={() => void refresh()}>Refresh status</button>{' '}
+            <button className="btn" disabled={busy || !state.revision || (operation.data != null && !operationFinished(operation.data))} onClick={() => void apply()}>Apply now</button>
+            {notice && <p role="status">{notice}</p>}{(error || stateQuery.error) && <p className="form-alert" role="alert">{error || stateQuery.error?.message}</p>}
+        </div>
+        <FleetEditor key={`${state.revision ?? 'unpublished'}:${editorEpoch}`} state={state} busy={busy} onPublish={publish} />
+        {operation.error && <p className="form-alert" role="alert">Apply status could not be refreshed: {operation.error.message}. Refresh status to check nodes; prior results are not current confirmation.</p>}
+        {tracked && <p role="status">Apply operation: {tracked.status}</p>}
+        <FleetNodeStatus report={report} revision={state.revision} />
+        <section className="panel panel-pad" style={{ marginTop: 20 }}><h2>Version history</h2>
+            {history.error && <p className="form-alert">{history.error.message}</p>}
+            {history.isPending && <p>Loading versions…</p>}
+            {history.data?.versions.map((version) => <div key={version.version_id} style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginBottom: 12, alignItems: 'center' }}>
+                <span style={{ overflowWrap: 'anywhere', minWidth: 0 }}>{version.published_at ?? 'Time unavailable'} · {version.version_id}{version.current ? ' (current)' : ''}</span>
+                {!version.current && <button className="btn" disabled={busy || !state.publish_configured} onClick={() => void restore(version.version_id)}>Restore previous version</button>}
+            </div>)}
+            {history.data?.versions.length === 0 && <p>No previous versions are available.</p>}
+            {history.data?.truncated && <p className="dim">Only the most recent available versions are shown.</p>}
+        </section></div>;
+}
+
+export function FleetConfigurationPage() {
+    const { data: me, isLoading } = useMe();
+    if (isLoading) return <p>Checking access…</p>;
+    if (me?.is_superuser !== true) return <div className="panel panel-pad">Fleet Configuration requires a superuser account.</div>;
+    return <FleetContent key={me.id} userId={me.id} />;
+}

package/src/admin/fleet-configuration/data.ts

@@ -0,0 +1,89 @@
+import { mojoCall, withFreshAuth } from '../../client/runtime';
+
+export const FLEET_HEALTH_SCOPE = 'request_service_jobs_and_dependencies';
+export const FLEET_ENDPOINT = '/api/account/admin/fleet';
+export interface FleetEntry {
+    key: string; label: string; section: string; description: string;
+    value_type: 'boolean' | 'integer' | 'string' | 'list' | 'object';
+    sensitive: boolean; restart_required: boolean; overridden: boolean;
+    current?: unknown; default?: unknown; configured?: boolean;
+    min_value?: number | null; max_value?: number | null; max_length?: number; max_items?: number;
+}
+export interface FleetNode {
+    hostname: string; revision: string; published: boolean; installed: boolean;
+    restart_requested: boolean; restarted: boolean; healthy: boolean;
+    status: string; error_code?: string | null;
+}
+export interface FleetReport {
+    status: string; nodes: FleetNode[]; healthy_everywhere: boolean;
+    error_code?: string; observed_at?: string; health_scope?: string;
+}
+export interface FleetState {
+    schema_version: number; revision: string | null; version_id: string | null;
+    entries: FleetEntry[]; published: boolean; loaded_revision: string | null;
+    pending_restart: boolean; publish_configured: boolean; fleet: FleetReport;
+}
+export interface FleetHistory { versions: { version_id: string; current: boolean; published_at: string | null }[]; truncated: boolean }
+export interface FleetOperation extends FleetReport { operation_id: string; revision: string; job_status?: string }
+export type FleetChanges = Record<string, { action: 'clear' } | { action: 'set'; value: unknown }>;
+export interface FleetPublication { published: boolean; revision: string; applied: boolean; pending_restart: boolean }
+
+/** Project read responses before Query cache sees them. Never trust a secret value/default. */
+export function sanitizeFleetState(state: FleetState): FleetState {
+    if (state?.schema_version !== 1 || !Array.isArray(state.entries) || !state.fleet || !Array.isArray(state.fleet.nodes)) {
+        throw new Error('Fleet configuration returned an unsupported response');
+    }
+    return { ...state, entries: state.entries.map((entry) => {
+        const { current, default: fallback, ...safe } = entry;
+        return entry.sensitive ? safe : { ...safe, current, default: fallback };
+    }) };
+}
+export function displayFleetValue(value: unknown): string {
+    if (value == null) return 'Not set';
+    return typeof value === 'string' ? value : JSON.stringify(value);
+}
+export function fleetChange(entry: FleetEntry, mode: string, input: string): FleetChanges[string] | null {
+    if (mode === 'keep') return null;
+    if (mode === 'clear') return { action: 'clear' };
+    if (mode !== 'set') throw new Error('Choose a supported change');
+    if (entry.sensitive && input === '') return null;
+    let value: unknown = input;
+    if (entry.value_type === 'boolean') {
+        if (!['true', 'false'].includes(input)) throw new Error(`${entry.label}: choose true or false`);
+        value = input === 'true';
+    } else if (entry.value_type === 'integer') {
+        if (!/^-?\d+$/.test(input)) throw new Error(`${entry.label}: enter a whole number`);
+        value = Number(input);
+        if (!Number.isSafeInteger(value) || (entry.min_value != null && Number(value) < entry.min_value)
+            || (entry.max_value != null && Number(value) > entry.max_value)) throw new Error(`${entry.label}: number is outside the allowed range`);
+    } else if (entry.value_type === 'list' || entry.value_type === 'object') {
+        try { value = JSON.parse(input); } catch { throw new Error(`${entry.label}: enter valid JSON`); }
+        if (entry.value_type === 'list' ? !Array.isArray(value) : value == null || typeof value !== 'object' || Array.isArray(value)) {
+            throw new Error(`${entry.label}: enter a JSON ${entry.value_type}`);
+        }
+        if (entry.max_items != null && Object.keys(value as object).length > entry.max_items) throw new Error(`${entry.label}: too many entries`);
+    } else if (entry.max_length != null && input.length > entry.max_length) throw new Error(`${entry.label}: value is too long`);
+    return { action: 'set', value };
+}
+export function fleetIsHealthy(report: FleetReport | undefined): boolean {
+    return report?.health_scope === FLEET_HEALTH_SCOPE && report.healthy_everywhere === true && report.nodes.length > 0
+        && report.nodes.every((node) => node.installed && node.restarted && node.healthy && !node.error_code);
+}
+export function operationFinished(operation: FleetOperation): boolean {
+    // A completed job only dispatched sync; operation reads observe actual activation.
+    return ['healthy', 'failed', 'expired', 'canceled', 'superseded', 'timed_out'].includes(operation.status)
+        || ['failed', 'expired', 'canceled'].includes(operation.job_status ?? '');
+}
+export async function readFleet(): Promise<FleetState> {
+    return sanitizeFleetState((await mojoCall(FLEET_ENDPOINT)).data as FleetState);
+}
+export async function readFleetHistory(): Promise<FleetHistory> {
+    return (await mojoCall(`${FLEET_ENDPOINT}/history`)).data as FleetHistory;
+}
+export async function readFleetOperation(id: string): Promise<FleetOperation> {
+    return (await mojoCall(`${FLEET_ENDPOINT}/operation/${encodeURIComponent(id)}`)).data as FleetOperation;
+}
+/** Imperative writes deliberately avoid TanStack MutationCache (submitted secrets persist there). */
+export async function writeFleet<T>(body: Record<string, unknown>): Promise<T> {
+    return withFreshAuth(async () => (await mojoCall(FLEET_ENDPOINT, { method: 'POST', body })).data as T);
+}

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

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