portal-mojo 0.1.0

package/src/admin/network/geofence/ExemptionsTab.tsx

@@ -0,0 +1,349 @@
+// ExemptionsTab — the auditor's "who is exempt" surface. Port of web-mojo
+// `GeofenceExemptionsView.js`. Every entry shows who it covers, why, and until
+// when; expired entries render inactive and are NEVER hidden (the backend
+// lists them with `active: false` for exactly that reason).
+//
+// Three planes, three different write paths:
+//   1. Network ranges — the GEOFENCE_ALLOWLIST setting, a FULL-REPLACE POST.
+//      Every write refetches and compares first (see useSaveGeoAllowlist):
+//      the source posted from possibly-stale local state and could silently
+//      drop a concurrent editor's entry.
+//   2. Individual IPs — GeoLocatedIP whitelist rows, written through the
+//      standard geoip magic-field actions (#1291's model).
+//   3. Bypass holders — read-only. Grants are managed on user records; the
+//      endpoint deliberately returns id/username only so a geofence-only
+//      grant cannot be used to enumerate user PII.
+import {
+    ArmedButton, Badge, formModal, modal, toast, type Field,
+} from '../../../ui';
+import { useCan } from '../../../client';
+import { GEOIP_MANAGE_PERMS, GeoLocatedIPModel } from '../../security/geoip';
+import {
+    AllowlistRaceError, findGeoIpIdByAddress, resolveGeoIpIdForAddress,
+    useBypassHolders, useGeoAllowlist, useSaveGeoAllowlist,
+    type AllowlistWriteEntry,
+} from '../models';
+import {
+    GEOFENCE_MANAGE_PERMS,
+    type AllowlistEntry, type BypassHolder, type GeoIpAllowlistEntry,
+} from './geofence-data';
+
+const RANGE_FIELDS: Field[] = [
+    {
+        name: 'cidr', type: 'text', label: 'Range (CIDR or IP)', required: true, columns: 12,
+        placeholder: '198.51.100.0/24',
+        help: 'Validated server-side — an unparseable value is refused with the entry index.',
+    },
+    {
+        name: 'reason', type: 'text', label: 'Reason', required: true, columns: 12,
+        placeholder: 'Office egress — Seattle HQ',
+    },
+    {
+        name: 'until', type: 'datetimepicker', label: 'Expires (optional)', columns: 12,
+        outputFormat: 'iso',
+        help: 'Leave empty for a permanent exemption.',
+    },
+];
+
+const IP_FIELDS: Field[] = [
+    { name: 'ip', type: 'text', label: 'IP address', required: true, columns: 12, placeholder: '203.0.113.7' },
+    { name: 'reason', type: 'text', label: 'Reason', required: true, columns: 12, placeholder: 'Dev box — Paris' },
+    {
+        name: 'until', type: 'datetimepicker', label: 'Expires (optional)', columns: 12,
+        outputFormat: 'iso',
+        help: 'Leave empty for a permanent exemption.',
+    },
+];
+
+function StatusPill({ active }: { active: boolean }) {
+    return <Badge tone={active ? 'success' : 'muted'}>{active ? 'Active' : 'Expired'}</Badge>;
+}
+
+function untilText(until: string | null | undefined): string {
+    return until ? until : 'Never';
+}
+
+/** The wire form of one stored entry: only `{cidr, reason, until}` is legal. */
+function toWriteEntry(entry: AllowlistEntry): AllowlistWriteEntry {
+    const out: AllowlistWriteEntry = { cidr: entry.cidr };
+    if (entry.reason) out.reason = entry.reason;
+    if (entry.until) out.until = entry.until;
+    return out;
+}
+
+export function ExemptionsTab() {
+    const { can: canManage } = useCan(GEOFENCE_MANAGE_PERMS);
+    const canGeoIpManage = useCan(GEOIP_MANAGE_PERMS).can;
+    const allowlist = useGeoAllowlist();
+    const bypass = useBypassHolders();
+    const save = useSaveGeoAllowlist();
+    const whitelist = GeoLocatedIPModel.useAction('whitelist');
+    const unwhitelist = GeoLocatedIPModel.useAction('unwhitelist');
+
+    const setting: AllowlistEntry[] = allowlist.data?.setting ?? [];
+    const geoips: GeoIpAllowlistEntry[] = allowlist.data?.geoip ?? [];
+    const holders: BypassHolder[] = bypass.data?.holders ?? [];
+
+    const writeAllowlist = async (entries: AllowlistWriteEntry[], label: string) => {
+        try {
+            await save.mutateAsync({ entries, baseline: setting });
+            toast.success(label);
+        } catch (err) {
+            if (err instanceof AllowlistRaceError) {
+                toast.error(err.message);
+                void allowlist.refetch();
+                return;
+            }
+            toast.error(err instanceof Error ? err.message : 'Failed to save the allowlist');
+        }
+    };
+
+    const onAddRange = async () => {
+        const data = await formModal({
+            title: 'Add network exemption',
+            fields: RANGE_FIELDS,
+            submitText: 'Add',
+            intro: 'An allowlisted address passes EVERY rule, including the VPN and Tor checks.',
+        });
+        if (!data) return;
+        const until = typeof data.until === 'string' && data.until ? data.until : undefined;
+        await writeAllowlist(
+            [...setting.map(toWriteEntry), { cidr: String(data.cidr).trim(), reason: String(data.reason), ...(until ? { until } : {}) }],
+            'Exemption added',
+        );
+    };
+
+    const onEditRange = async (index: number) => {
+        const entry = setting[index];
+        if (!entry) return;
+        const data = await formModal({
+            title: 'Edit network exemption',
+            fields: RANGE_FIELDS,
+            submitText: 'Save',
+            initial: { cidr: entry.cidr, reason: entry.reason ?? '', until: entry.until ?? '' },
+        });
+        if (!data) return;
+        const until = typeof data.until === 'string' && data.until ? data.until : undefined;
+        const next = setting.map(toWriteEntry);
+        next[index] = { cidr: String(data.cidr).trim(), reason: String(data.reason), ...(until ? { until } : {}) };
+        await writeAllowlist(next, 'Exemption saved');
+    };
+
+    const onRemoveRange = async (index: number) => {
+        const entry = setting[index];
+        if (!entry) return;
+        const next = setting.filter((_, i) => i !== index).map(toWriteEntry);
+        // Clearing the LAST entry posts `entries: []`, which is a legitimate
+        // clear — not "no change". It is confirmed explicitly.
+        if (next.length === 0) {
+            const ok = await modal.confirm({
+                title: 'Clear every network exemption?',
+                message: 'This removes the last entry, so the allowlist will be empty. Every range is evaluated against the rules again immediately.',
+                confirmText: 'Clear the allowlist',
+                danger: true,
+            });
+            if (!ok) return;
+        }
+        await writeAllowlist(next, `Exemption for ${entry.cidr} removed`);
+    };
+
+    const onWhitelistIp = async () => {
+        const data = await formModal({
+            title: 'Whitelist an IP',
+            fields: IP_FIELDS,
+            submitText: 'Whitelist',
+            intro: 'The address is resolved through the GeoIP provider (creating the record if it is new) and then whitelisted.',
+        });
+        if (!data) return;
+        const ip = String(data.ip).trim();
+        const until = typeof data.until === 'string' && data.until ? data.until : null;
+        try {
+            const id = await resolveGeoIpIdForAddress(GeoLocatedIPModel.endpoint, ip);
+            await whitelist.mutateAsync({
+                id,
+                payload: until ? { reason: String(data.reason), until } : { reason: String(data.reason) },
+            });
+            await allowlist.refetch();
+            toast.success(`${ip} whitelisted`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : `Could not whitelist ${ip}`);
+        }
+    };
+
+    const onUnwhitelistIp = async (ip: string) => {
+        try {
+            // A cached read, not `/lookup` — the record exists by definition,
+            // so removal costs no provider call and no rate-limit budget.
+            const id = await findGeoIpIdByAddress(GeoLocatedIPModel.endpoint, ip);
+            await unwhitelist.mutateAsync({ id, payload: 1 });
+            await allowlist.refetch();
+            toast.success(`Whitelist removed for ${ip}`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : `Could not remove the whitelist for ${ip}`);
+        }
+    };
+
+    return (
+        <div className="geo-exemptions">
+            <div className="netsec-note netsec-note-info">
+                <i className="bi bi-shield-exclamation" />
+                <div>
+                    Exemptions are compliance-sensitive. Every entry shows <b>who it covers, why, and
+                    until when</b> — and any exemption that bypasses a block is recorded in the audit trail.
+                </div>
+            </div>
+
+            {/* ── 1. Network ranges ───────────────────────────────── */}
+            <div className="panel netsec-card">
+                <div className="netsec-card-head">
+                    <span>Network ranges (allowlist)</span>
+                    {canManage && (
+                        <button type="button" className="btn btn-primary btn-compact" onClick={() => void onAddRange()}>
+                            <i className="bi bi-plus-lg" /> Add range
+                        </button>
+                    )}
+                </div>
+                <div className="netsec-card-body">
+                    {allowlist.isPending && <p className="dim">Loading exemptions…</p>}
+                    {allowlist.error && <p className="text-bad">{allowlist.error.message}</p>}
+                    {!allowlist.isPending && !allowlist.error && (
+                        setting.length === 0
+                            ? <p className="dim">No network exemptions.</p>
+                            : (
+                                <div className="netsec-table-scroll">
+                                    <table className="tbl geo-exempt-table">
+                                        <thead>
+                                            <tr>
+                                                <th>Range</th><th>Reason</th><th>Expires</th><th>Status</th>
+                                                {canManage && <th aria-label="Actions" />}
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {setting.map((entry, index) => (
+                                                <tr key={`${entry.cidr}-${index}`} className={entry.active === false ? 'geo-row-expired' : undefined}>
+                                                    <td><code>{entry.cidr}</code></td>
+                                                    <td>{entry.reason || <span className="dim">—</span>}</td>
+                                                    <td>{untilText(entry.until)}</td>
+                                                    <td><StatusPill active={entry.active !== false} /></td>
+                                                    {canManage && (
+                                                        <td className="netsec-row-actions">
+                                                            <button type="button" className="btn-link" onClick={() => void onEditRange(index)}>Edit</button>
+                                                            <ArmedButton
+                                                                className="btn-compact"
+                                                                label="Remove"
+                                                                armedLabel="Click again — this range is evaluated against the rules again immediately"
+                                                                onConfirm={() => onRemoveRange(index)}
+                                                            />
+                                                        </td>
+                                                    )}
+                                                </tr>
+                                            ))}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            )
+                    )}
+                    <p className="dim">
+                        Allowlisted addresses pass <b>every</b> rule, including the VPN and Tor checks.
+                        Expired entries stay listed until they are removed.
+                    </p>
+                </div>
+            </div>
+
+            {/* ── 2. Individual IPs ───────────────────────────────── */}
+            <div className="panel netsec-card">
+                <div className="netsec-card-head">
+                    <span>Individual IPs</span>
+                    {canManage && canGeoIpManage && (
+                        <button type="button" className="btn btn-compact" onClick={() => void onWhitelistIp()}>
+                            <i className="bi bi-shield-check" /> Whitelist an IP…
+                        </button>
+                    )}
+                </div>
+                <div className="netsec-card-body">
+                    {geoips.length === 0
+                        ? <p className="dim">No individually whitelisted IPs.</p>
+                        : (
+                            <div className="netsec-table-scroll">
+                                <table className="tbl geo-exempt-table">
+                                    <thead>
+                                        <tr>
+                                            <th>IP address</th><th>Reason</th><th>Expires</th><th>Status</th>
+                                            {canManage && canGeoIpManage && <th aria-label="Actions" />}
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {geoips.map((entry) => (
+                                            <tr key={entry.ip} className={entry.active === false ? 'geo-row-expired' : undefined}>
+                                                <td><code>{entry.ip}</code></td>
+                                                <td>{entry.reason || <span className="dim">—</span>}</td>
+                                                <td>{untilText(entry.until)}</td>
+                                                <td><StatusPill active={entry.active !== false} /></td>
+                                                {canManage && canGeoIpManage && (
+                                                    <td className="netsec-row-actions">
+                                                        <ArmedButton
+                                                            className="btn-compact"
+                                                            label="Remove"
+                                                            armedLabel="Click again — this address is evaluated against the rules again immediately"
+                                                            onConfirm={() => onUnwhitelistIp(entry.ip)}
+                                                        />
+                                                    </td>
+                                                )}
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            </div>
+                        )}
+                    <p className="dim">
+                        Whitelisting takes a reason and an optional expiry. Full enforcement management
+                        lives on the <b>Blocked IPs</b> page.
+                    </p>
+                </div>
+            </div>
+
+            {/* ── 3. Bypass holders ───────────────────────────────── */}
+            <div className="panel netsec-card">
+                <div className="netsec-card-head">
+                    <span>Users who bypass geofencing</span>
+                    <span className="eyebrow">read-only</span>
+                </div>
+                <div className="netsec-card-body">
+                    {bypass.isPending && <p className="dim">Loading bypass holders…</p>}
+                    {bypass.error && <p className="text-bad">{bypass.error.message}</p>}
+                    {!bypass.isPending && !bypass.error && (
+                        holders.length === 0
+                            ? <p className="dim">No users hold a geofence bypass.</p>
+                            : (
+                                <div className="netsec-table-scroll">
+                                    <table className="tbl geo-exempt-table">
+                                        <thead><tr><th>User</th><th>Status</th><th>Source</th></tr></thead>
+                                        <tbody>
+                                            {holders.map((holder) => (
+                                                <tr key={holder.id}>
+                                                    <td>{holder.username}</td>
+                                                    <td><Badge tone={holder.is_active ? 'success' : 'muted'}>{holder.is_active ? 'Active' : 'Inactive'}</Badge></td>
+                                                    <td>
+                                                        <Badge tone={holder.source === 'superuser' ? 'primary' : 'info'}>
+                                                            {holder.source === 'superuser' ? 'Superuser' : 'Permission grant'}
+                                                        </Badge>
+                                                    </td>
+                                                </tr>
+                                            ))}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            )
+                    )}
+                    <p className="dim">
+                        {/* The honest cap, from the response's own count/capped pair. */}
+                        {bypass.data?.capped
+                            ? `Showing the first ${holders.length} of more than ${bypass.data.count ?? holders.length} — the endpoint caps at 200.`
+                            : `Showing all ${bypass.data?.count ?? holders.length}.`}
+                        {' '}Grants are managed on user records, not here.
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/admin/network/geofence/GeofencingPage.tsx

@@ -0,0 +1,119 @@
+// GeofencingPage — posture header over four tabs (Rules · Simulator ·
+// Blocks log · Exemptions). Port of web-mojo `GeofencingPage.js`.
+//
+// This is the ONE surface in this module that stays a PAGE rather than a
+// KISS detail modal: the requested presentation is exactly "a config page that
+// states what is in force and lets you test it before it bites".
+//
+// ONE `useGeoConfig()` query feeds the header and every tab. TanStack Query
+// replaces the source's manual onEnter/onAfterMount fetch dance entirely — a
+// rules save or an override removal invalidates the key and every consumer
+// re-reads, with no `config-changed` event plumbing.
+import { useState } from 'react';
+import { useCan } from '../../../client';
+import type { EventRow } from '../../incidents/models';
+import {
+    GEOFENCE_API_MISSING_MESSAGE, GEOFENCE_EVENT_CATEGORIES, GeofenceEventModel,
+    isGeofenceApiMissing, useGeoConfig,
+} from '../models';
+import { GEOFENCE_VIEW_PERMS, SECURITY_EVENTS_PERMS } from './geofence-data';
+import { PostureHeader } from './PostureHeader';
+import { RulesTab } from './RulesTab';
+import { SimulatorTab } from './SimulatorTab';
+import { BlocksTab } from './BlocksTab';
+import { ExemptionsTab } from './ExemptionsTab';
+
+type TabKey = 'rules' | 'simulator' | 'blocks' | 'exemptions';
+
+const TABS: { key: TabKey; label: string; icon: string }[] = [
+    { key: 'rules', label: 'Rules', icon: 'bi-sliders' },
+    { key: 'simulator', label: 'Simulator', icon: 'bi-play-circle' },
+    { key: 'blocks', label: 'Blocks log', icon: 'bi-journal-text' },
+    { key: 'exemptions', label: 'Exemptions', icon: 'bi-shield-check' },
+];
+
+export function GeofencingPage() {
+    const { can: canView } = useCan(GEOFENCE_VIEW_PERMS);
+    const { can: canEvents } = useCan(SECURITY_EVENTS_PERMS);
+    const config = useGeoConfig();
+    const [tab, setTab] = useState<TabKey>('rules');
+
+    // The Last-change chip is OPTIONAL: omitted silently — and with no request
+    // issued — for an operator without security-events access.
+    const lastChangeQuery = GeofenceEventModel.useList(
+        { category: GEOFENCE_EVENT_CATEGORIES.config, size: 1, sort: '-created' },
+        { enabled: canView && canEvents },
+    );
+    const lastChange: EventRow | null = lastChangeQuery.data?.rows[0] ?? null;
+
+    if (!canView) {
+        return (
+            <div className="geofencing-page">
+                <div className="panel">
+                    <div className="empty-state">
+                        <i className="bi bi-shield-lock" />
+                        <h3>Access denied</h3>
+                        <p>Geofencing configuration requires a global geofence grant.</p>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    if (config.error) {
+        // A backend without the config plane simply does not register the
+        // /api/geo routes, so the wire answer is a 404 — not an error
+        // envelope. Anything else is a real failure and shows its own message.
+        const missing = isGeofenceApiMissing(config.error);
+        return (
+            <div className="geofencing-page">
+                <div className="panel">
+                    <div className="empty-state">
+                        <i className={`bi ${missing ? 'bi-plug' : 'bi-exclamation-triangle'}`} />
+                        <h3>{missing ? 'Geofencing administration unavailable' : 'Could not load the geofence configuration'}</h3>
+                        <p>{missing ? GEOFENCE_API_MISSING_MESSAGE : config.error.message}</p>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="geofencing-page">
+            <PostureHeader config={config.data} lastChange={lastChange} loading={config.isPending} />
+
+            <div className="geo-tabs">
+                <div className="seg">
+                    {TABS.map((entry) => (
+                        <button
+                            key={entry.key}
+                            type="button"
+                            className={`seg-btn${tab === entry.key ? ' seg-active' : ''}`}
+                            onClick={() => setTab(entry.key)}
+                        >
+                            <i className={`bi ${entry.icon}`} /> {entry.label}
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            <div className="geo-tab-body">
+                {config.isPending ? (
+                    <div className="panel">
+                        <div className="empty-state">
+                            <i className="bi bi-hourglass-split" />
+                            <p>Waiting for the geofence configuration…</p>
+                        </div>
+                    </div>
+                ) : (
+                    <>
+                        {tab === 'rules' && <RulesTab config={config.data} />}
+                        {tab === 'simulator' && <SimulatorTab config={config.data} />}
+                        {tab === 'blocks' && <BlocksTab />}
+                        {tab === 'exemptions' && <ExemptionsTab />}
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/admin/network/geofence/PostureHeader.tsx

@@ -0,0 +1,184 @@
+// PostureHeader — the read-only "is geofencing actually enforcing" answer.
+// Port of web-mojo `GeofencePostureHeader.js`.
+//
+// Read-only ON PURPOSE. Everything it shows (GEOFENCE_ENABLED,
+// GEOFENCE_FAIL_CLOSED, GEOFENCE_FAIL_CLOSED_SCOPES, GEOFENCE_CACHE_TTL,
+// GEOFENCE_STRICT_POSTURE) is a plain `Setting` row with no validated
+// geofence-specific endpoint. Writing them through the generic settings path
+// would bypass the validation seam the config plane exists to provide, so the
+// header points at Runtime Settings instead. Same call web-mojo made.
+import type { ReactNode } from 'react';
+import { fmt } from '../../../ui';
+import type { EventRow } from '../../incidents/models';
+import { configChangedBy } from '../models';
+import { collectScopes, scopeLabel, type GeoRulesConfig } from './geofence-data';
+
+type ChipTone = '' | 'warn' | 'bad' | 'ok';
+
+interface PostureChip {
+    label: string;
+    value: ReactNode;
+    tone: ChipTone;
+    title?: string;
+}
+
+const SOURCE_LABELS: Record<string, string> = {
+    setting: 'Portal (database)',
+    conf: 'Deploy file',
+    none: 'No rules configured',
+};
+
+/** `cache_ttl` is seconds; 0 or negative means the decision cache is off. */
+export function ttlLabel(ttl: number | null | undefined): string {
+    const n = Number(ttl);
+    if (!Number.isFinite(n) || n <= 0) return 'off';
+    if (n % 60 === 0) return `${n / 60} min`;
+    return `${n}s`;
+}
+
+export function buildPostureChips(
+    config: GeoRulesConfig | null | undefined,
+    lastChange: EventRow | null,
+): PostureChip[] {
+    const posture = config?.posture ?? {};
+    const chips: PostureChip[] = [];
+
+    const source = config?.system?.source || 'none';
+    chips.push({
+        label: 'Rules source',
+        value: SOURCE_LABELS[source] ?? source,
+        tone: source === 'conf' ? 'warn' : '',
+        title: source === 'conf'
+            ? 'These rules come from the deployment file. Saving in the portal creates an override that takes precedence.'
+            : undefined,
+    });
+
+    // One chip per scope the config ACTUALLY DECLARES — scopes are
+    // deployment-defined strings and are never hardcoded here.
+    const failClosedScopes = posture.fail_closed_scopes ?? [];
+    for (const scope of collectScopes(config)) {
+        const closed = Boolean(posture.fail_closed) || failClosedScopes.includes(scope);
+        chips.push({
+            label: scopeLabel(scope),
+            value: closed ? 'fail closed' : 'fail open',
+            tone: closed ? 'warn' : '',
+            title: closed
+                ? 'A failed location lookup DENIES the request on this scope.'
+                : 'A failed location lookup lets the request through on this scope.',
+        });
+    }
+
+    // Not in the source. `strict_posture` is what turns an EMPTY ruleset into
+    // a denial (`no_rules_strict`), so an operator staring at "no rules
+    // configured" needs to know which of the two worlds they are in.
+    if (posture.strict_posture) {
+        chips.push({
+            label: 'Strict posture',
+            value: 'on',
+            tone: 'warn',
+            title: 'With no rules configured, requests are DENIED rather than passed through.',
+        });
+    }
+
+    if (posture.cache_ttl !== undefined && posture.cache_ttl !== null) {
+        chips.push({ label: 'Decision cache', value: ttlLabel(posture.cache_ttl), tone: '' });
+    }
+
+    const summary = config?.allowlist_summary ?? {};
+    const ranges = summary.setting_entries ?? 0;
+    const ips = summary.geoip_active ?? 0;
+    chips.push({
+        label: 'Exemptions',
+        value: `${ranges} range${ranges === 1 ? '' : 's'} · ${ips} IP${ips === 1 ? '' : 's'}`,
+        tone: '',
+    });
+
+    if (lastChange) {
+        // BACKEND CORRECTION: `evidence.report_config_change` writes
+        // `changed_by`; `reporter._create_event_dict` writes `user_name`.
+        // web-mojo read `metadata.username`, which neither writes — the chip
+        // rendered blank on every deployment.
+        const who = configChangedBy(lastChange.metadata);
+        const when = fmt.datetime(lastChange.created);
+        chips.push({ label: 'Last change', value: who ? `${when} · ${who}` : when, tone: '' });
+    }
+
+    return chips;
+}
+
+export function PostureHeader({ config, lastChange, loading }: {
+    config: GeoRulesConfig | null | undefined;
+    lastChange: EventRow | null;
+    loading?: boolean;
+}) {
+    if (loading) {
+        return (
+            <div className="panel geo-posture">
+                <div className="dim"><i className="bi bi-hourglass-split" /> Loading geofencing status…</div>
+            </div>
+        );
+    }
+
+    const enabled = Boolean(config?.posture?.enabled);
+    const chips = buildPostureChips(config, lastChange);
+    const endpoints = (config?.enforced_endpoints ?? []).map((entry) => ({
+        // Strip the framework prefix so the list scans; keep enough of the
+        // path to stay unambiguous in a compliance screenshot.
+        endpoint: String(entry.endpoint ?? '').replace(/^mojo\.apps\./, ''),
+        scope: entry.scope || '—',
+        afterAuth: entry.after_auth === true,
+    }));
+
+    return (
+        <div className="panel geo-posture">
+            <div className="geo-posture-head">
+                <span className="geo-posture-icon"><i className="bi bi-globe-americas" /></span>
+                <div className="geo-posture-title">
+                    <h2>Geofencing</h2>
+                    <p className="dim">Location-based access rules for this deployment’s protected endpoints.</p>
+                </div>
+                <span className={`chip ${enabled ? 'chip-success' : 'chip-muted'} geo-status-pill`}>
+                    <i className={`bi ${enabled ? 'bi-shield-check' : 'bi-shield-slash'}`} />
+                    {enabled ? 'Enforcing' : 'Off — rules staged, not enforcing'}
+                </span>
+            </div>
+
+            <div className="geo-chip-row">
+                {chips.map((chip, index) => (
+                    <span key={`${chip.label}-${index}`} className={`geo-chip ${chip.tone}`} title={chip.title}>
+                        {chip.label} <b>{chip.value}</b>
+                    </span>
+                ))}
+            </div>
+
+            {endpoints.length > 0 ? (
+                <details className="geo-endpoints">
+                    <summary>{endpoints.length} protected endpoint{endpoints.length === 1 ? '' : 's'}</summary>
+                    <div className="geo-endpoint-list">
+                        {endpoints.map((entry) => (
+                            <div key={entry.endpoint} className="geo-endpoint">
+                                <span className="chip chip-muted">{entry.scope}</span>
+                                <code>{entry.endpoint}</code>
+                                {entry.afterAuth && (
+                                    <span className="chip chip-warning" title="This endpoint is gated AFTER credentials are verified.">
+                                        enforced after credentials
+                                    </span>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </details>
+            ) : (
+                <p className="dim geo-endpoints-empty">
+                    <i className="bi bi-info-circle" /> No endpoints on this server are gated by geofencing.
+                </p>
+            )}
+
+            <p className="dim geo-posture-foot">
+                Posture values (enforcement, fail-closed scopes, cache TTL, strict posture) are
+                deployment settings and are edited in Runtime Settings, not here — this page owns
+                the rules, exemptions and evidence.
+            </p>
+        </div>
+    );
+}