portal-mojo 0.1.0

package/src/admin/network/BlockedIpDetail.tsx

@@ -0,0 +1,262 @@
+// BlockedIpDetail — the KISS `modal.detail` for one enforcement record.
+//
+// Deliberately NOT the full IP dossier: #1291 owns that
+// (`showGeoIpDossier`), and this modal links to it rather than forking it.
+// What lives here is the perimeter story — why this address is blocked, until
+// when, and the four relaxing/refreshing actions an operator reaches for from
+// the Blocked IPs table.
+//
+// Creating a block is deliberately absent everywhere in this module: an admin
+// table that turns a typed IP into a fleet-wide iptables entry in two clicks
+// is the wrong default. Unblock and whitelist — both RELAXING — are exposed.
+import {
+    ArmedButton, Badge, DetailView, Eyebrow, FlatRow, StatusPanel,
+    fmt, formModal, modal, toast, type Field, type Tone,
+} from '../../ui';
+import { useCan } from '../../client';
+import { countryName } from '../../charts/worldmap/countryCentroids';
+import {
+    GEOIP_MANAGE_PERMS, GeoLocatedIPModel, blockActive, blockExpired,
+    countryFlag, riskScoreOf, showGeoIpDossier, threatTone, whitelistActive, whitelistExpired,
+    type GeoLocatedIPRow, type GeoTone,
+} from '../security/geoip';
+
+const DASH = <span className="dim-italic">—</span>;
+
+/** `blocked_until`/`whitelisted_until` null means PERMANENT, never "unknown". */
+function untilText(value: number | null | undefined): string {
+    return value == null ? 'Never' : fmt.datetime(value);
+}
+
+/**
+ * #1291 ships `GEOIP_WHITELIST_FIELDS` with a `ttl` SELECT. This module needs a
+ * precise expiry instead: `on_action_whitelist`'s dict branch parses `until`
+ * through `dates.parse_datetime`, and an exemption an auditor has to justify
+ * wants a date, not "30 days from whenever the button was pressed". Hence a
+ * second, differently-named field set rather than a redefinition of theirs —
+ * `GEOIP_UNBLOCK_FIELDS` IS imported from them unchanged.
+ *
+ * `until` is serialized as an ISO string (`outputFormat: 'iso'`), not the field
+ * registry's default epoch seconds, because `parse_datetime` is what reads it.
+ */
+export const NETWORK_WHITELIST_FIELDS: Field[] = [
+    {
+        name: 'reason', type: 'text', label: 'Reason', required: true, columns: 12,
+        placeholder: 'Office egress — Seattle HQ',
+        help: 'Recorded on the record and in the firewall log.',
+    },
+    {
+        name: 'until', type: 'datetimepicker', label: 'Expires (optional)', columns: 12,
+        outputFormat: 'iso',
+        help: 'Leave empty for a permanent exemption.',
+    },
+];
+
+export function enforcementBadge(row: GeoLocatedIPRow) {
+    if (blockActive(row)) return <Badge tone="danger"><i className="bi bi-slash-circle" /> Blocked</Badge>;
+    if (whitelistActive(row)) return <Badge tone="info"><i className="bi bi-shield-check" /> Whitelisted</Badge>;
+    if (blockExpired(row)) return <Badge tone="warning">Block expired</Badge>;
+    if (whitelistExpired(row)) return <Badge tone="warning">Whitelist expired</Badge>;
+    return <span className="dim">—</span>;
+}
+
+export function BlockedIpDetail({ id, onClose }: { id: number; onClose: () => void }) {
+    const { data: row, isPending, error } = GeoLocatedIPModel.useOne(id);
+    const canManage = useCan(GEOIP_MANAGE_PERMS).can;
+    const unblock = GeoLocatedIPModel.useAction('unblock');
+    const whitelist = GeoLocatedIPModel.useAction('whitelist');
+    const unwhitelist = GeoLocatedIPModel.useAction('unwhitelist');
+    const analyze = GeoLocatedIPModel.useAction('threat_analysis');
+
+    if (isPending) return <div className="modal-pad dim">Loading enforcement record…</div>;
+    if (!row || error) return <div className="modal-pad text-bad">{error?.message ?? 'IP record not found'}</div>;
+
+    const flag = countryFlag(row.country_code);
+    const active = blockActive(row);
+    const risk = riskScoreOf(row);
+
+    const runUnblock = async () => {
+        try {
+            await unblock.mutateAsync({ id, payload: 'Unblocked from the admin portal' });
+            toast.success(`${row.ip_address} unblocked`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Unblock failed');
+        }
+    };
+
+    const runWhitelist = async () => {
+        const data = await formModal({
+            title: `Whitelist ${row.ip_address}`,
+            fields: NETWORK_WHITELIST_FIELDS,
+            submitText: 'Whitelist',
+            intro: 'A whitelisted address passes EVERY rule, including the VPN and Tor checks, and an active block is cleared immediately.',
+        });
+        if (!data) return;
+        const until = typeof data.until === 'string' && data.until ? data.until : null;
+        try {
+            await whitelist.mutateAsync({
+                id,
+                payload: until ? { reason: String(data.reason), until } : { reason: String(data.reason) },
+            });
+            toast.success(`${row.ip_address} whitelisted`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Whitelist failed');
+        }
+    };
+
+    const runUnwhitelist = async () => {
+        try {
+            await unwhitelist.mutateAsync({ id, payload: 1 });
+            toast.success(`Whitelist removed for ${row.ip_address}`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Could not remove the whitelist');
+        }
+    };
+
+    const runAnalyze = async () => {
+        try {
+            await analyze.mutateAsync({ id });
+            toast.success('Threat analysis re-run');
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Threat analysis failed');
+        }
+    };
+
+    return (
+        <DetailView
+            icon="bi-slash-circle"
+            title={row.ip_address}
+            subtitle={[row.city, row.region, row.country_name ?? countryName(row.country_code)].filter(Boolean).join(', ') || 'Unknown location'}
+            chips={[
+                { text: active ? 'Block active' : blockExpired(row) ? 'Block expired' : 'Not blocked', tone: active ? 'danger' : blockExpired(row) ? 'warning' : 'muted' },
+                ...(whitelistActive(row) ? [{ icon: 'bi-shield-check', text: 'Whitelisted', tone: 'info' as const }] : []),
+                { text: row.threat_level || 'no threat level', tone: threatTone(row.threat_level) as Tone },
+            ]}
+            sections={[
+                {
+                    key: 'enforcement', label: 'Enforcement', icon: 'bi-shield-slash', render: () => (
+                        <>
+                            <StatusPanel
+                                tone={active ? 'danger' : whitelistActive(row) ? 'info' : 'warning'}
+                                state={active ? 'BLOCKED' : whitelistActive(row) ? 'WHITELISTED' : 'NOT ENFORCED'}
+                                headline={row.blocked_reason || 'No reason recorded on the block.'}
+                                meta={active
+                                    ? `Expires ${untilText(row.blocked_until)} · blocked ${row.block_count} time${row.block_count === 1 ? '' : 's'}`
+                                    : 'A whitelist beats a block, and an expired block stops enforcing — the raw is_blocked flag stays set either way.'}
+                                actions={canManage ? (
+                                    <div className="netsec-action-row">
+                                        {row.is_blocked && (
+                                            <ArmedButton
+                                                className="btn-compact"
+                                                icon="bi-unlock"
+                                                label="Unblock"
+                                                armedLabel="Click again — traffic from this address is allowed fleet-wide"
+                                                onConfirm={runUnblock}
+                                            />
+                                        )}
+                                        <button className="btn btn-compact" onClick={() => void runWhitelist()}>
+                                            <i className="bi bi-shield-check" /> Whitelist…
+                                        </button>
+                                        {row.is_whitelisted && (
+                                            <ArmedButton
+                                                className="btn-compact"
+                                                icon="bi-shield-x"
+                                                label="Remove whitelist"
+                                                armedLabel="Click again — this address is evaluated against the rules again immediately"
+                                                onConfirm={runUnwhitelist}
+                                            />
+                                        )}
+                                        <button className="btn btn-compact" onClick={() => void runAnalyze()}>
+                                            <i className="bi bi-arrow-repeat" /> Re-run threat analysis
+                                        </button>
+                                    </div>
+                                ) : null}
+                            />
+
+                            <Eyebrow>Block lifecycle</Eyebrow>
+                            <FlatRow label="State">{enforcementBadge(row)}</FlatRow>
+                            <FlatRow label="Blocked at">{row.blocked_at != null ? fmt.datetime(row.blocked_at) : DASH}</FlatRow>
+                            <FlatRow label="Blocked until">
+                                {row.blocked_until == null
+                                    ? <><b>Never</b> <span className="dim">— permanent</span></>
+                                    : <>{fmt.datetime(row.blocked_until)} <span className="dim">· {fmt.relative(row.blocked_until)}</span></>}
+                            </FlatRow>
+                            <FlatRow label="Reason">{row.blocked_reason || DASH}</FlatRow>
+                            <FlatRow label="Block count">{row.block_count}</FlatRow>
+
+                            <Eyebrow>Whitelist</Eyebrow>
+                            <FlatRow label="Whitelisted"><Badge tone={whitelistActive(row) ? 'info' : 'muted'}>{whitelistActive(row) ? 'Yes' : row.is_whitelisted ? 'Expired' : 'No'}</Badge></FlatRow>
+                            <FlatRow label="Reason">{row.whitelisted_reason || DASH}</FlatRow>
+                            <FlatRow label="Until">{row.is_whitelisted ? untilText(row.whitelisted_until) : DASH}</FlatRow>
+                        </>
+                    ),
+                },
+                {
+                    key: 'origin', label: 'Origin', icon: 'bi-globe2', render: () => (
+                        <>
+                            <Eyebrow>Location</Eyebrow>
+                            <FlatRow label="Country">
+                                {row.country_code
+                                    ? <>{flag && <span className="geoip-flag">{flag}</span>}{row.country_name || countryName(row.country_code)} <code className="dim geoip-cc">{row.country_code}</code></>
+                                    : DASH}
+                            </FlatRow>
+                            <FlatRow label="Region">{row.region || DASH}{row.region_code && <code className="dim geoip-cc">{row.region_code}</code>}</FlatRow>
+                            <FlatRow label="City">{row.city || DASH}</FlatRow>
+                            <FlatRow label="Postal code">{row.postal_code || DASH}</FlatRow>
+                            <FlatRow label="Timezone">{row.timezone || DASH}</FlatRow>
+
+                            <Eyebrow>Network</Eyebrow>
+                            <FlatRow label="Subnet"><code>{row.subnet || '—'}</code></FlatRow>
+                            <FlatRow label="ASN">{row.asn || DASH}</FlatRow>
+                            <FlatRow label="ASN org">{row.asn_org || DASH}</FlatRow>
+                            <FlatRow label="ISP">{row.isp || DASH}</FlatRow>
+                            <FlatRow label="Connection">{row.connection_type || DASH}</FlatRow>
+                            <FlatRow label="Last seen">{fmt.datetime(row.last_seen)} <span className="dim">· {fmt.relative(row.last_seen)}</span></FlatRow>
+                        </>
+                    ),
+                },
+                {
+                    key: 'threat', label: 'Threat', icon: 'bi-exclamation-triangle', render: () => (
+                        <>
+                            <Eyebrow>Assessment</Eyebrow>
+                            <FlatRow label="Threat level">
+                                <Badge tone={threatTone(row.threat_level) as GeoTone as Tone}>{row.threat_level || 'none'}</Badge>
+                            </FlatRow>
+                            <FlatRow label="Risk score">{risk == null ? DASH : risk}</FlatRow>
+                            <FlatRow label="Is threat"><Badge tone={row.is_threat ? 'danger' : 'muted'}>{row.is_threat ? 'Yes' : 'No'}</Badge></FlatRow>
+                            <FlatRow label="Is suspicious"><Badge tone={row.is_suspicious ? 'warning' : 'muted'}>{row.is_suspicious ? 'Yes' : 'No'}</Badge></FlatRow>
+
+                            <Eyebrow>Signals</Eyebrow>
+                            <div className="netsec-flags">
+                                {([
+                                    ['Tor', row.is_tor], ['VPN', row.is_vpn], ['Proxy', row.is_proxy],
+                                    ['Cloud', row.is_cloud], ['Datacenter', row.is_datacenter], ['Mobile', row.is_mobile],
+                                    ['Known attacker', row.is_known_attacker], ['Known abuser', row.is_known_abuser],
+                                ] as const).map(([label, on]) => (
+                                    <span key={label} className={`chip ${on ? 'chip-danger' : 'chip-muted'}`}>
+                                        <i className={`bi ${on ? 'bi-check-lg' : 'bi-dash'}`} /> {label}
+                                    </span>
+                                ))}
+                            </div>
+
+                            <Eyebrow>Full record</Eyebrow>
+                            <p className="dim">
+                                Location, network and security editing — plus the raw provider record —
+                                live in the IP Intelligence dossier.
+                            </p>
+                            <button className="btn btn-compact" onClick={() => { onClose(); showGeoIpDossier(row.id); }}>
+                                <i className="bi bi-box-arrow-up-right" /> Open the full IP dossier
+                            </button>
+                        </>
+                    ),
+                },
+            ]}
+            initialSection="enforcement"
+            onClose={onClose}
+        />
+    );
+}
+
+export function showBlockedIpDetail(id: number): void {
+    void modal.detail((close) => <BlockedIpDetail id={id} onClose={() => close(null)} />);
+}

package/src/admin/network/FirewallLogPage.tsx

@@ -0,0 +1,115 @@
+// Firewall Log — `logit.Log` filtered to `kind__startswith=firewall:`.
+// Port of web-mojo `admin/security/FirewallLogTablePage.js`.
+//
+// COLUMN HONESTY (the one substantive correction). `GeoLocatedIP` writes these
+// rows through `MojoModel.log`, which fills `path`, `ip`, `username` and `uid`
+// from the AMBIENT REQUEST — i.e. the ADMIN's endpoint and the ADMIN's IP. The
+// address that was blocked lives only in the JSON `payload`. The source
+// labelled `path` as "IP / Path", which was never either of those things; here
+// Request path, Admin, Admin IP and Target IP are four separate columns.
+//
+// Everything else is the shipped monitoring surface: LOG_COLUMNS' renderers,
+// LOG_FILTERS minus the `kind` text box (replaced by the preset segment over
+// the four exact kinds), LogQuickLook and the full LogInspector.
+import {
+    Badge, ModelTable, fmt, groupByDay,
+    type Column, type FilterDef, type Tone,
+} from '../../ui';
+import {
+    LOGS_ADMIN_PERMISSIONS, LOG_COLUMNS, LOG_FILTERS, LogModel, LogQuickLook,
+    openLogInspector, type LogRow,
+} from '../monitoring';
+import { FIREWALL_LOG_KINDS, firewallPayloadOf } from './models';
+
+/** `logit.Log.RestMeta.VIEW_PERMS` — the same gate the Logs page uses. */
+export const FIREWALL_LOG_PERMS = LOGS_ADMIN_PERMISSIONS;
+
+const ACTION_TONE: Record<string, Tone> = {
+    [FIREWALL_LOG_KINDS.block]: 'danger',
+    [FIREWALL_LOG_KINDS.unblock]: 'success',
+    [FIREWALL_LOG_KINDS.whitelist]: 'info',
+    [FIREWALL_LOG_KINDS.unwhitelist]: 'warning',
+};
+
+const ACTION_LABEL: Record<string, string> = {
+    [FIREWALL_LOG_KINDS.block]: 'Block',
+    [FIREWALL_LOG_KINDS.unblock]: 'Unblock',
+    [FIREWALL_LOG_KINDS.whitelist]: 'Whitelist',
+    [FIREWALL_LOG_KINDS.unwhitelist]: 'Unwhitelist',
+};
+
+/** Rename a shipped monitoring column without re-deriving its renderer. */
+function relabelled(key: string, label: string): Column<LogRow> {
+    const base = LOG_COLUMNS.find((column) => column.key === key);
+    if (!base) {
+        // Loud, never silent: the monitoring column set changed under us.
+        console.warn(`FirewallLogPage: monitoring LOG_COLUMNS no longer exports "${key}" — rendering a plain cell.`);
+        return { key, label };
+    }
+    return { ...base, label };
+}
+
+const COLUMNS: Column<LogRow>[] = [
+    relabelled('created', 'When'),
+    {
+        key: 'kind', label: 'Action', sortable: true, hideable: false,
+        render: (log) => {
+            const kind = log.kind ?? '';
+            return <Badge tone={ACTION_TONE[kind] ?? 'muted'}>{ACTION_LABEL[kind] ?? (kind || '—')}</Badge>;
+        },
+    },
+    {
+        // The blocked address. It exists ONLY here — never in `Log.ip`.
+        key: 'payload', label: 'Target IP',
+        render: (log) => {
+            const payload = firewallPayloadOf(log.payload);
+            return payload?.ip ? <code>{payload.ip}</code> : <span className="dim">—</span>;
+        },
+    },
+    {
+        key: 'log', label: 'Details',
+        render: (log) => log.log
+            ? <span title={log.log}>{fmt.truncate(log.log, 70)}</span>
+            : <span className="dim">—</span>,
+    },
+    relabelled('username', 'Admin'),
+    relabelled('ip', 'Admin IP'),
+    relabelled('path', 'Request path'),
+    relabelled('level', 'Level'),
+];
+
+/**
+ * The shipped log filters minus `kind` — the preset segment owns it here, and
+ * a free-text `kind` box beside four exact presets invites `firewall:blocked`
+ * (a value the backend never writes) and an empty table with no explanation.
+ */
+const FILTERS: FilterDef[] = LOG_FILTERS.filter((filter) => filter.key !== 'kind');
+
+export function FirewallLogPage() {
+    return (
+        <ModelTable<LogRow>
+            model={LogModel}
+            eyebrow="Security · Network"
+            title="Firewall Log"
+            searchPlaceholder="Search path, message, user…"
+            columns={COLUMNS}
+            filters={FILTERS}
+            presets={[
+                { key: 'all', label: 'All', params: {} },
+                { key: 'blocks', label: 'Blocks', params: { kind: FIREWALL_LOG_KINDS.block } },
+                { key: 'unblocks', label: 'Unblocks', params: { kind: FIREWALL_LOG_KINDS.unblock } },
+                { key: 'whitelists', label: 'Whitelists', params: { kind: FIREWALL_LOG_KINDS.whitelist } },
+                { key: 'unwhitelists', label: 'Unwhitelists', params: { kind: FIREWALL_LOG_KINDS.unwhitelist } },
+            ]}
+            defaultParams={{ kind__startswith: 'firewall:' }}
+            defaultSort="-created"
+            columnChooser
+            persistState
+            persistKey="admin:network:firewall-log"
+            exportFormats={['csv', 'json']}
+            onRowClick={openLogInspector}
+            rowExpand={(log) => <LogQuickLook log={log} />}
+            {...groupByDay<LogRow>('created')}
+        />
+    );
+}

package/src/admin/network/IPSetDetail.tsx

@@ -0,0 +1,280 @@
+// IPSetDetail — the KISS `modal.detail` for one kernel firewall set.
+// Port of web-mojo `admin/security/IPSetView.js` (TabView: Configuration +
+// CIDR Data, with a fleet-operations kebab), rebuilt on the house detail
+// modal with every fleet-affecting action behind an armed confirmation.
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+    ArmedButton, Badge, DetailView, Eyebrow, FlatRow, StatusPanel,
+    fmt, modal, toast,
+} from '../../ui';
+import { useCan } from '../../client';
+import {
+    IPSET_CACHE_ONLY_HELP, IPSET_DELETE_PERMS, IPSET_KIND_BADGE_OPTIONS,
+    IPSET_MANAGE_PERMS, IPSET_SOURCE_OPTIONS, IPSetModel,
+    isCacheOnlyIPSet, useIPSetCidrData, type IPSetRow,
+} from './models';
+import { promptEditIPSet } from './IPSetEditor';
+
+const DASH = <span className="dim-italic">—</span>;
+
+export function ipSetKindLabel(kind: string): string {
+    return IPSET_KIND_BADGE_OPTIONS.find((option) => option.value === kind)?.label ?? kind;
+}
+
+export function ipSetSourceLabel(source: string): string {
+    return IPSET_SOURCE_OPTIONS.find((option) => option.value === source)?.label ?? source;
+}
+
+function CopyButton({ text }: { text: string }) {
+    const [copied, setCopied] = useState(false);
+    const copy = async () => {
+        const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard;
+        if (!clipboard) { toast.error('Clipboard unavailable in this context'); return; }
+        try {
+            await clipboard.writeText(text);
+            setCopied(true);
+            toast.success('CIDR list copied to clipboard');
+            setTimeout(() => setCopied(false), 1200);
+        } catch (error) {
+            toast.error(`Copy failed: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    };
+    return (
+        <button type="button" className="btn btn-compact" onClick={() => void copy()}>
+            <i className={`bi ${copied ? 'bi-check2' : 'bi-clipboard'}`} /> {copied ? 'Copied' : 'Copy'}
+        </button>
+    );
+}
+
+/**
+ * The `graph=detailed` leg. Mounted only while the CIDR Data section is open,
+ * and cached with `gcTime: 0` — a country zone file is megabytes of text and
+ * has no business sitting in the persistent query cache.
+ */
+function CidrDataSection({ row }: { row: IPSetRow }) {
+    const query = useIPSetCidrData(row.id, true);
+    if (query.isPending) return <p className="dim">Loading CIDR data…</p>;
+    if (query.error) return <p className="text-bad">{query.error.message}</p>;
+    const data = query.data ?? { text: '', lines: [] };
+
+    if (data.lines.length === 0) {
+        return (
+            <div className="empty-state">
+                <i className="bi bi-database" />
+                <p>No CIDRs stored on this set.</p>
+                <p className="dim">
+                    {row.source === 'manual'
+                        ? 'A manual set is only ever filled by an explicit edit — “Refresh source” returns immediately for source=manual and changes nothing.'
+                        : 'Run “Refresh source” to fetch the list from the configured provider.'}
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <div className="netsec-cidr-head">
+                <div>
+                    <div className="eyebrow">CIDR data</div>
+                    <div className="dim">
+                        <b>{data.lines.length.toLocaleString()}</b> entries in the stored blob
+                        {data.lines.length !== row.cidr_count && (
+                            <>
+                                {' · '}
+                                <span className="text-warn" title="cidr_count is only recomputed when the list is written — by a source refresh or by saving the list from the editor.">
+                                    reported count {row.cidr_count.toLocaleString()}
+                                </span>
+                            </>
+                        )}
+                    </div>
+                </div>
+                <CopyButton text={data.text} />
+            </div>
+            <pre className="netsec-cidr-block"><code>{data.text}</code></pre>
+        </>
+    );
+}
+
+export function IPSetDetail({ id, onClose }: { id: number; onClose: () => void }) {
+    const qc = useQueryClient();
+    const { data: row, isPending, error } = IPSetModel.useOne(id);
+    const canManage = useCan(IPSET_MANAGE_PERMS).can;
+    const canDelete = useCan(IPSET_DELETE_PERMS).can;
+    const sync = IPSetModel.useAction('sync');
+    const enable = IPSetModel.useAction('enable');
+    const disable = IPSetModel.useAction('disable');
+    const refresh = IPSetModel.useAction('refresh_source');
+    const remove = IPSetModel.useDelete();
+    const save = IPSetModel.useSave();
+
+    if (isPending) return <div className="modal-pad dim">Loading IP set…</div>;
+    if (!row || error) return <div className="modal-pad text-bad">{error?.message ?? 'IP set not found'}</div>;
+
+    const cacheOnly = isCacheOnlyIPSet(row);
+
+    const run = async (label: string, fn: () => Promise<unknown>) => {
+        try {
+            await fn();
+            toast.success(label);
+        } catch (err) {
+            // The backend's own message, verbatim — the cache-only rejection
+            // explains itself far better than any client copy could.
+            toast.error(err instanceof Error ? err.message : `${label} failed`);
+        }
+    };
+
+    const onEdit = async () => {
+        const changes = await promptEditIPSet(row);
+        if (!changes) return;
+        try {
+            await save.mutateAsync({ id, changes });
+            // A `data` save re-runs set_data() server-side, so the detailed
+            // read must not serve its previous blob.
+            await qc.invalidateQueries({ queryKey: [IPSetModel.endpoint] });
+            toast.success('IP set updated');
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Could not save the IP set');
+        }
+    };
+
+    return (
+        <DetailView
+            icon="bi-hdd-network"
+            title={row.name}
+            subtitle={row.description || `${ipSetKindLabel(row.kind)} set · ${ipSetSourceLabel(row.source)}`}
+            chips={[
+                { text: ipSetKindLabel(row.kind), tone: 'muted' },
+                { text: row.is_enabled ? 'Enabled' : 'Disabled', tone: row.is_enabled ? 'success' : 'muted' },
+                ...(cacheOnly ? [{ icon: 'bi-database-lock', text: 'CACHE-ONLY', tone: 'warning' as const }] : []),
+                ...(row.sync_error ? [{ icon: 'bi-exclamation-triangle', text: 'Sync error', tone: 'danger' as const }] : []),
+            ]}
+            sections={[
+                {
+                    key: 'config', label: 'Configuration', icon: 'bi-sliders', render: () => (
+                        <>
+                            <StatusPanel
+                                tone={row.sync_error ? 'danger' : row.is_enabled ? 'success' : 'info'}
+                                state={row.is_enabled ? 'ENFORCING' : 'NOT ENFORCING'}
+                                headline={row.sync_error
+                                    ? row.sync_error
+                                    : row.is_enabled
+                                        ? 'CIDRs from this set are loaded into iptables on every fleet instance.'
+                                        : 'This set is stored but is not loaded into any firewall.'}
+                                meta={row.last_synced == null
+                                    ? 'Never synced to the fleet.'
+                                    : `Last synced ${fmt.datetime(row.last_synced)} · ${fmt.relative(row.last_synced)}`}
+                                actions={canManage ? (
+                                    <div className="netsec-action-row">
+                                        {row.is_enabled ? (
+                                            <ArmedButton
+                                                className="btn-compact"
+                                                icon="bi-toggle-off"
+                                                label="Disable & remove from fleet"
+                                                armedLabel="Click again — every fleet instance drops this set from iptables"
+                                                onConfirm={() => run('IP set disabled and removed from the fleet', () => disable.mutateAsync({ id }))}
+                                            />
+                                        ) : (
+                                            <ArmedButton
+                                                className="btn-compact"
+                                                icon="bi-toggle-on"
+                                                label="Enable & sync"
+                                                armedLabel={cacheOnly
+                                                    ? 'Click again — the server will refuse this (cache-only list)'
+                                                    : `Click again — ${row.cidr_count.toLocaleString()} ranges are kernel-blocked fleet-wide`}
+                                                onConfirm={() => run('IP set enabled and synced', () => enable.mutateAsync({ id }))}
+                                            />
+                                        )}
+                                        <ArmedButton
+                                            className="btn-compact"
+                                            icon="bi-broadcast"
+                                            label="Sync to fleet"
+                                            armedLabel="Click again — pushes this set to every fleet instance now"
+                                            onConfirm={() => run('Sync broadcast to the fleet', () => sync.mutateAsync({ id }))}
+                                        />
+                                        <ArmedButton
+                                            className="btn-compact"
+                                            icon="bi-arrow-clockwise"
+                                            label="Refresh source"
+                                            armedLabel="Click again — refetches the provider list and replaces the stored CIDRs"
+                                            onConfirm={() => run('Source refresh requested', () => refresh.mutateAsync({ id }))}
+                                        />
+                                        <button className="btn btn-compact" onClick={() => void onEdit()}>
+                                            <i className="bi bi-pencil" /> Edit
+                                        </button>
+                                        {canDelete && (
+                                            <ArmedButton
+                                                className="btn-compact btn-danger"
+                                                icon="bi-trash"
+                                                label="Delete"
+                                                armedLabel="Click again — deletes the set and removes it from every fleet instance. This cannot be undone."
+                                                onConfirm={() => run('IP set deleted', async () => {
+                                                    await remove.mutateAsync({ id });
+                                                    onClose();
+                                                })}
+                                            />
+                                        )}
+                                    </div>
+                                ) : null}
+                            />
+
+                            {cacheOnly && (
+                                <div className="netsec-note netsec-note-warn">
+                                    <i className="bi bi-database-lock" />
+                                    <div>
+                                        <b>{row.name}</b> is a {IPSET_CACHE_ONLY_HELP}. The backend refuses to
+                                        enable it, and a sync request is a silent no-op. It is refreshed by the
+                                        threat-list cron and read by GeoIP detection, not by iptables.
+                                    </div>
+                                </div>
+                            )}
+
+                            <Eyebrow>Identity</Eyebrow>
+                            <FlatRow label="Name"><code>{row.name}</code></FlatRow>
+                            <FlatRow label="Kind">{ipSetKindLabel(row.kind)}</FlatRow>
+                            <FlatRow label="Description">{row.description || DASH}</FlatRow>
+                            <FlatRow label="Enabled">
+                                <Badge tone={row.is_enabled ? 'success' : 'muted'}>{row.is_enabled ? 'Yes' : 'No'}</Badge>
+                            </FlatRow>
+
+                            <Eyebrow>Source</Eyebrow>
+                            <FlatRow label="Source">{ipSetSourceLabel(row.source)}</FlatRow>
+                            <FlatRow label="Source URL">
+                                {row.source_url ? <code className="netsec-break">{row.source_url}</code> : DASH}
+                            </FlatRow>
+                            <FlatRow label="API key">
+                                <span className="dim-italic">Write-only — excluded from every serializer graph.</span>
+                            </FlatRow>
+                            <FlatRow label="CIDRs">
+                                {row.cidr_count.toLocaleString()}
+                                <span className="dim"> · recorded when the list was last written</span>
+                            </FlatRow>
+                            <FlatRow label="Last synced">
+                                {row.last_synced == null ? <b>Never</b> : <>{fmt.datetime(row.last_synced)} <span className="dim">· {fmt.relative(row.last_synced)}</span></>}
+                            </FlatRow>
+                            <FlatRow label="Sync status">
+                                {row.sync_error
+                                    ? <span className="text-bad">{row.sync_error}</span>
+                                    : <span className="text-ok"><i className="bi bi-check-circle" /> OK</span>}
+                            </FlatRow>
+
+                            <Eyebrow>Record</Eyebrow>
+                            <FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow>
+                            <FlatRow label="Modified">{fmt.datetime(row.modified)}</FlatRow>
+                        </>
+                    ),
+                },
+                {
+                    key: 'cidrs', label: 'CIDR Data', icon: 'bi-list-ol',
+                    render: () => <CidrDataSection row={row} />,
+                },
+            ]}
+            initialSection="config"
+            onClose={onClose}
+        />
+    );
+}
+
+export function showIPSetDetail(id: number): void {
+    void modal.detail((close) => <IPSetDetail id={id} onClose={() => close(null)} />);
+}