portal-mojo 0.2.2 → 0.2.3

package/src/admin/incidents/IncidentDetail.tsx

@@ -1,25 +1,194 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { createIncidentHistoryAdapter, useCan, useMe } from '../../client/runtime';
-import { Badge, DetailView, Eyebrow, FlatRow, KnownFieldsCard, RecordFeed, StatusPanel, fmt, toast, type Tone } from '../../ui';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { createIncidentHistoryAdapter, mojoCall, useCan, useMe } from '../../client/runtime';
+import { Badge, DetailView, Eyebrow, FlatRow, JsonBlock, KnownFieldsCard, RecordFeed, StatusPanel, fmt, toast, type Tone } from '../../ui';
 import { SECURITY_MANAGE_PERMS } from '../security-permissions';
 import { AssistantContextLauncher } from '../assistant/launchers';
-import { EvidenceCard, INCIDENT_METADATA_FIELDS, RequestResponseForensics, TraceForensics, metadataOf } from './forensics';
-import { INCIDENT_LIFECYCLE, IncidentModel, showEventDetail, useIncidentDetail, useIncidentEvents } from './models';
-import { sanitizeIncidentHistoryRow, sanitizeSecurityText } from './sanitize';
+import { showGeoIpDossier, showGeoIpDossierForAddress } from '../security/geoip/GeoIpDossier';
+import { blockActive, blockExpired, countryFlag, threatTone, whitelistActive, whitelistExpired, type GeoLocatedIPRow } from '../security/geoip/models';
+import { EvidenceCard, INCIDENT_METADATA_FIELDS, RequestResponseForensics, TraceForensics, first, metadataOf } from './forensics';
+import { INCIDENT_LIFECYCLE, IncidentModel, showEventDetail, useIncidentEvents, type IncidentRow } from './models';
+import { sanitizeIncidentHistoryRow, sanitizeIncidentRow, sanitizeSecurityText } from './sanitize';
 
 function priorityTone(priority: number): Tone { return priority >= 8 ? 'danger' : priority >= 5 ? 'warning' : 'info'; }
 function statusTone(status: string): Tone { return ['resolved', 'closed'].includes(status) ? 'success' : ['new', 'open'].includes(status) ? 'danger' : status === 'investigating' ? 'warning' : 'muted'; }
 
+const DASH = <span className="dim-italic">—</span>;
+
+function asRecord(value: unknown): Record<string, unknown> {
+    return value != null && typeof value === 'object' && !Array.isArray(value)
+        ? value as Record<string, unknown> : {};
+}
+
+function scalar(value: unknown): string | null {
+    if (typeof value === 'string') return value.trim() ? value : null;
+    if (typeof value === 'number' && Number.isFinite(value)) return String(value);
+    return null;
+}
+
+function temporal(value: unknown): string | number | null {
+    if (typeof value === 'number' && Number.isFinite(value)) return value;
+    if (typeof value === 'string' && value.trim()) return value;
+    return null;
+}
+
+function display(value: unknown) {
+    return scalar(value) ?? DASH;
+}
+
+function Timestamp({ value, relative = true }: { value: unknown; relative?: boolean }) {
+    const time = temporal(value);
+    return time == null ? DASH : <>{fmt.datetime(time)}{relative && <span className="dim"> · {fmt.relative(time)}</span>}</>;
+}
+
+const SOURCE_FLAGS: readonly [string, keyof GeoLocatedIPRow][] = [
+    ['Tor', 'is_tor'], ['VPN', 'is_vpn'], ['Proxy', 'is_proxy'],
+    ['Cloud', 'is_cloud'], ['Datacenter', 'is_datacenter'], ['Mobile', 'is_mobile'],
+    ['Known attacker', 'is_known_attacker'], ['Known abuser', 'is_known_abuser'],
+];
+
+function IncidentSourceIntelligence({ incident, metadata }: { incident: IncidentRow; metadata: Record<string, unknown> }) {
+    const infoRecord = asRecord(incident.ip_info);
+    const info = infoRecord as Partial<GeoLocatedIPRow>;
+    const sourceIp = scalar(incident.source_ip)
+        ?? scalar(first(metadata, 'source_ip', 'request_ip'))
+        ?? scalar(info.ip_address);
+    const dossierId = Number.isSafeInteger(info.id) && Number(info.id) > 0 ? Number(info.id) : null;
+    const openDossier = dossierId != null
+        ? () => showGeoIpDossier(dossierId)
+        : sourceIp ? () => showGeoIpDossierForAddress(sourceIp) : null;
+
+    const enforcement = {
+        is_blocked: info.is_blocked === true,
+        blocked_until: temporal(info.blocked_until) as number | null,
+        is_whitelisted: info.is_whitelisted === true,
+        whitelisted_until: temporal(info.whitelisted_until) as number | null,
+    };
+    const blocked = blockActive(enforcement);
+    const whitelisted = whitelistActive(enforcement);
+    const level = scalar(info.threat_level)?.toLowerCase() ?? '';
+    const risk = typeof info.risk_score === 'number' ? info.risk_score : null;
+    const hasAssessment = ['threat_level', 'risk_score', 'is_threat', 'is_suspicious'].some((key) => key in infoRecord);
+    const hasEnforcement = ['is_blocked', 'is_whitelisted', 'blocked_at', 'blocked_until', 'whitelisted_until'].some((key) => key in infoRecord);
+    const hasFirewall = ['firewall_generation', 'firewall_pending', 'firewall_sync_error', 'firewall_observed_at'].some((key) => key in infoRecord);
+    const hasObservation = ['created', 'modified', 'last_seen', 'expires_at'].some((key) => key in infoRecord);
+    const context = [
+        ['Request IP', first(metadata, 'request_ip')],
+        ['Server', first(metadata, 'server')],
+        ['Protocol', first(metadata, 'http_protocol', 'protocol')],
+        ['Connection ID', first(metadata, 'connection_id')],
+        ['User agent', first(metadata, 'http_user_agent', 'user_agent')],
+    ] as const;
+    const contextRows = context.filter(([, value]) => scalar(value) != null);
+    const countryCode = scalar(info.country_code) ?? scalar(incident.country_code) ?? scalar(metadata.country_code);
+    const countryName = scalar(info.country_name) ?? scalar(metadata.country_name);
+    const flag = countryFlag(countryCode);
+    const place = [scalar(info.city) ?? scalar(metadata.city), scalar(info.region) ?? scalar(metadata.region), countryName ?? countryCode].filter(Boolean).join(', ');
+    const status = blocked
+        ? { tone: 'danger' as const, state: 'BLOCKED', headline: scalar(info.blocked_reason) ? `Blocked: ${scalar(info.blocked_reason)}` : 'Currently blocked' }
+        : whitelisted
+            ? { tone: 'success' as const, state: 'WHITELISTED', headline: scalar(info.whitelisted_reason) ? `Whitelisted: ${scalar(info.whitelisted_reason)}` : 'Currently whitelisted' }
+            : hasAssessment && (info.is_threat === true || ['high', 'critical'].includes(level))
+                ? { tone: 'danger' as const, state: 'ALLOWED · HIGH RISK', headline: `${level || 'high'} threat assessment` }
+                : hasAssessment && (info.is_suspicious === true || level === 'medium')
+                    ? { tone: 'warning' as const, state: 'ALLOWED · ELEVATED RISK', headline: 'Suspicious source signals detected' }
+                    : hasAssessment
+                        ? { tone: 'success' as const, state: 'ALLOWED', headline: 'No active threat signals' }
+                        : { tone: 'info' as const, state: 'SOURCE RECORDED', headline: 'No cached IP intelligence was attached' };
+
+    return <>
+        <StatusPanel
+            tone={status.tone}
+            state={status.state}
+            headline={status.headline}
+            meta={`${place || sourceIp || 'Unknown source'}${risk == null ? '' : ` · risk ${risk}/100`}`}
+            actions={openDossier && <button type="button" className="btn btn-compact" onClick={openDossier}><i className="bi bi-box-arrow-up-right" /> Open full IP dossier</button>}
+        />
+
+        <Eyebrow>Location &amp; network</Eyebrow>
+        <FlatRow label="IP address">{sourceIp ? (openDossier ? <button type="button" className="btn-link" onClick={openDossier}><code>{sourceIp}</code></button> : <code>{sourceIp}</code>) : DASH}</FlatRow>
+        <FlatRow label="Hostname"><code>{incident.hostname || '—'}</code></FlatRow>
+        <FlatRow label="Country">{countryCode || countryName ? <>{flag && <span className="geoip-flag">{flag}</span>}{countryName || countryCode}{countryCode && <code className="dim geoip-cc">{countryCode}</code>}</> : DASH}</FlatRow>
+        <FlatRow label="Region">{display(info.region ?? metadata.region)}{info.region_code && <code className="dim geoip-cc">{info.region_code}</code>}</FlatRow>
+        <FlatRow label="City / postal">{[scalar(info.city ?? metadata.city), scalar(info.postal_code)].filter(Boolean).join(' · ') || DASH}</FlatRow>
+        <FlatRow label="Timezone">{display(info.timezone ?? metadata.timezone)}</FlatRow>
+        <FlatRow label="Coordinates">{info.latitude != null && info.longitude != null ? <code>{info.latitude}, {info.longitude}</code> : DASH}</FlatRow>
+        <FlatRow label="Subnet"><code>{scalar(info.subnet) || '—'}</code></FlatRow>
+        <FlatRow label="ASN">{display(info.asn)}</FlatRow>
+        <FlatRow label="ASN organization">{display(info.asn_org)}</FlatRow>
+        <FlatRow label="ISP">{display(info.isp)}</FlatRow>
+        <FlatRow label="Connection">{[scalar(info.connection_type), scalar(info.mobile_carrier)].filter(Boolean).join(' · ') || DASH}</FlatRow>
+
+        {hasAssessment && <>
+            <Eyebrow>Risk &amp; reputation</Eyebrow>
+            <FlatRow label="Threat level"><Badge tone={threatTone(info.threat_level) as Tone}>{info.threat_level || 'none'}</Badge></FlatRow>
+            <FlatRow label="Risk score">{risk == null ? DASH : <strong>{risk}/100</strong>}</FlatRow>
+            <FlatRow label="Threat"><Badge tone={info.is_threat ? 'danger' : 'muted'}>{info.is_threat ? 'Yes' : 'No'}</Badge></FlatRow>
+            <FlatRow label="Suspicious"><Badge tone={info.is_suspicious ? 'warning' : 'muted'}>{info.is_suspicious ? 'Yes' : 'No'}</Badge></FlatRow>
+            <div className="netsec-flags">
+                {SOURCE_FLAGS.map(([label, key]) => {
+                    const active = info[key] === true;
+                    return <span key={label} className={`chip ${active ? 'chip-danger' : 'chip-muted'}`}><i className={`bi ${active ? 'bi-check-lg' : 'bi-dash'}`} /> {label}</span>;
+                })}
+            </div>
+        </>}
+
+        {hasEnforcement && <>
+            <Eyebrow>Enforcement</Eyebrow>
+            <FlatRow label="Effective state"><Badge tone={blocked ? 'danger' : whitelisted ? 'success' : 'muted'}>{blocked ? 'Blocked' : whitelisted ? 'Whitelisted' : blockExpired(enforcement) ? 'Block expired' : whitelistExpired(enforcement) ? 'Whitelist expired' : 'Allowed'}</Badge></FlatRow>
+            <FlatRow label="Blocked at"><Timestamp value={info.blocked_at} /></FlatRow>
+            <FlatRow label="Blocked until"><Timestamp value={info.blocked_until} relative={false} /></FlatRow>
+            <FlatRow label="Block reason">{display(info.blocked_reason)}</FlatRow>
+            <FlatRow label="Block count">{typeof info.block_count === 'number' ? info.block_count : DASH}</FlatRow>
+            <FlatRow label="Whitelist until"><Timestamp value={info.whitelisted_until} relative={false} /></FlatRow>
+            <FlatRow label="Whitelist reason">{display(info.whitelisted_reason)}</FlatRow>
+        </>}
+
+        {hasFirewall && <>
+            <Eyebrow>Firewall reconciliation</Eyebrow>
+            <FlatRow label="State"><Badge tone={info.firewall_pending ? 'warning' : info.firewall_sync_error ? 'danger' : 'success'}>{info.firewall_pending ? 'Pending' : info.firewall_sync_error ? 'Error' : 'In sync'}</Badge></FlatRow>
+            <FlatRow label="Generation">{typeof info.firewall_generation === 'number' ? info.firewall_generation : DASH}</FlatRow>
+            <FlatRow label="Observed"><Timestamp value={info.firewall_observed_at} /></FlatRow>
+            <FlatRow label="Sync error">{display(info.firewall_sync_error)}</FlatRow>
+        </>}
+
+        {hasObservation && <>
+            <Eyebrow>Observation</Eyebrow>
+            <FlatRow label="First recorded"><Timestamp value={info.created} /></FlatRow>
+            <FlatRow label="Modified"><Timestamp value={info.modified} /></FlatRow>
+            <FlatRow label="Last seen"><Timestamp value={info.last_seen} /></FlatRow>
+            <FlatRow label="Cache expires"><Timestamp value={info.expires_at} relative={false} /></FlatRow>
+        </>}
+
+        {contextRows.length > 0 && <>
+            <Eyebrow>Incident context</Eyebrow>
+            {contextRows.map(([label, value]) => <FlatRow key={label} label={label}>{label === 'Connection ID' || label === 'Request IP' ? <code>{scalar(value)}</code> : scalar(value)}</FlatRow>)}
+        </>}
+    </>;
+}
+
+function prepareIncidentDetailRecord(rawIncident: IncidentRow): { rawIncident: IncidentRow; incident: IncidentRow } {
+    return { rawIncident, incident: sanitizeIncidentRow(rawIncident) };
+}
+
+/** Keep the authorized raw record isolated from every sanitized incident cache. */
+function useRawIncidentDetail(id: number | null) {
+    return useQuery({
+        queryKey: [IncidentModel.endpoint, 'raw-one', id, { graph: 'detailed' }],
+        queryFn: async () => (await mojoCall(`${IncidentModel.endpoint}/${id!}`, { params: { graph: 'detailed' } })).data as IncidentRow,
+        enabled: id != null,
+    });
+}
+
 export function IncidentDetail({ id, onClose }: { id: number; onClose: () => void }) {
     const queryClient = useQueryClient();
-    const query = useIncidentDetail(id);
+    const query = useRawIncidentDetail(id);
     const events = useIncidentEvents(id);
     const save = IncidentModel.useSave();
     const { can: canManage } = useCan(SECURITY_MANAGE_PERMS);
     const { data: me } = useMe();
     if (query.isPending) return <div className="modal-pad dim">Loading incident…</div>;
     if (!query.data || query.error) return <div className="modal-pad text-bad">{query.error?.message ?? 'Incident not found'}</div>;
-    const incident = query.data;
+    const { rawIncident, incident } = prepareIncidentDetailRecord(query.data);
     const groupId = Number.isSafeInteger(incident.group_id) && Number(incident.group_id) > 0
         ? Number(incident.group_id) : null;
     const adapter = createIncidentHistoryAdapter(id, {
@@ -36,6 +205,7 @@ export function IncidentDetail({ id, onClose }: { id: number; onClose: () => voi
         } catch (error) { toast.error(error instanceof Error ? error.message : 'Status update failed'); }
     };
     const trace = metadata.stack_trace ?? metadata.traceback;
+    const hasSource = Boolean(scalar(incident.source_ip) || Object.keys(asRecord(incident.ip_info)).length || scalar(first(metadata, 'source_ip', 'request_ip')));
     return <DetailView
         icon="bi-shield-exclamation"
         title={incident.title || `Incident #${incident.id}`}
@@ -55,12 +225,15 @@ export function IncidentDetail({ id, onClose }: { id: number; onClose: () => voi
                 <FlatRow label="Hostname"><code>{incident.hostname || '—'}</code></FlatRow>
                 <FlatRow label="Model">{incident.model_name ? `${incident.model_name} #${incident.model_id ?? '—'}` : '—'}</FlatRow>
             </> },
+            ...(hasSource ? [{ key: 'source', label: 'Source', icon: 'bi-globe2', render: () => <IncidentSourceIntelligence incident={incident} metadata={metadata} /> }] : []),
             { key: 'evidence', label: 'Evidence', icon: 'bi-funnel', render: () => <EvidenceCard metadata={{ ...metadata, model_name: incident.model_name, model_id: incident.model_id }} /> },
             { key: 'events', label: 'Events', icon: 'bi-list-ul', render: () => events.isPending ? <p className="dim">Loading events…</p> : events.data?.rows.length ? <div className="incident-events-list">{events.data.rows.map((event) => <button type="button" className="incident-event-row" key={event.id} onClick={() => showEventDetail(event.id)}><Badge tone={event.level >= 8 ? 'danger' : event.level >= 4 ? 'warning' : 'muted'}>L{event.level}</Badge><span><strong>{event.title || event.category}</strong><small>{fmt.datetime(event.created)} · {event.details || 'No details'}</small></span></button>)}</div> : <p className="dim-italic">No events on this incident.</p> },
             { key: 'request', label: 'Request', icon: 'bi-globe2', render: () => <RequestResponseForensics metadata={metadata} /> },
             ...(trace ? [{ key: 'trace', label: 'Stack trace', icon: 'bi-code-square', render: () => <TraceForensics metadata={metadata} /> }] : []),
             { key: 'history', label: 'History', icon: 'bi-chat-left-text', render: () => <RecordFeed adapter={adapter} variant="compact" showInput={canManage} currentUserId={me?.id ?? null} placeholder="Add an incident note…" attachmentUpload={{ destination: groupId == null ? {} : { groupId, use: 'uploads' }, expectedGroupId: groupId }} /> },
             { key: 'metadata', label: 'Known fields', icon: 'bi-braces', render: () => <KnownFieldsCard data={metadata} known={[...INCIDENT_METADATA_FIELDS]} showRaw={false} emptyText="No curated forensic metadata." /> },
+            { divider: 'Raw' },
+            { key: 'raw', label: 'Raw data', icon: 'bi-filetype-json', render: () => <><Eyebrow>Complete API response</Eyebrow><p className="dim">The complete incident record returned by Django, including all metadata and IP information.</p><JsonBlock value={rawIncident} label="Incident API record" collapsible={false} /></> },
         ]}
         initialSection="overview"
         onClose={onClose}

package/src/admin/incidents/models.ts

@@ -18,7 +18,7 @@ export interface EventRow {
     source_ip: string | null; hostname: string | null; uid: number | null;
     country_code: string | null; title: string | null; details: string | null;
     model_name: string | null; model_id: number | null; metadata: Record<string, unknown>;
-    group_id: number | null; incident?: Relation; geo_ip?: Record<string, unknown> | null;
+    group_id: number | null; incident?: Relation; geo_ip?: string | Record<string, unknown> | null;
 }
 
 const COMMON = new Set(['start', 'size', 'sort', 'search', 'dr_field', 'dr_start', 'dr_end']);

package/src/admin/jobs/RunnerDetail.tsx

@@ -15,7 +15,9 @@
 //   · the `version` chip — the heartbeat payload has no version field.
 //   · trusted-HTML interpolation throughout — every slot here is a ReactNode.
 import { useState, type ReactNode } from 'react';
+import { downloadBlob, useCan } from '../../client/runtime';
 import {
+    ArmedButton,
     Badge,
     DetailView,
     Eyebrow,
@@ -23,13 +25,11 @@ import {
     JsonBlock,
     KnownFieldsCard,
     StatusPanel,
-    ArmedButton,
     fmt,
     modal,
     toast,
     type Tone,
 } from '../../ui';
-import { downloadBlob } from '../../client/runtime';
 import {
     BROADCAST_COMMANDS,
     broadcastCommand,
@@ -56,7 +56,6 @@ import {
     useRunnerJobLogs,
     useRunnerSysinfo,
 } from './queries';
-import { useCan } from '../../client/runtime';
 
 // ── Small presentational pieces ───────────────────────────────────────
 
@@ -439,6 +438,7 @@ export function RunnerDetail({ runner, onClose }: { runner: RunnerRow; onClose:
                 active: activeRows.length || null,
                 history: history.data?.count || null,
             }}
+            contextMenu={[{ label: 'Runner controls…', permissions: JOBS_MANAGE_PERMS, onSelect: () => void modal.open(close => <div className="modal-pad"><h2 className="modal-title">Runner controls</h2><ControlSection runner={runner} onClose={() => close(null)} /><div className="modal-actions"><button className="btn" onClick={() => close(null)}>Close</button></div></div>) }]}
             sections={[
                 {
                     key: 'overview', label: 'Overview', icon: 'bi-grid-1x2', render: () => (
@@ -558,11 +558,8 @@ export function RunnerDetail({ runner, onClose }: { runner: RunnerRow; onClose:
                         </>
                     ),
                 },
-                { divider: 'Control' },
-                {
-                    key: 'control', label: 'Control', icon: 'bi-power',
-                    render: () => <ControlSection runner={runner} onClose={onClose} />,
-                },
+
+
             ]}
             initialSection="overview"
             onClose={onClose}

package/src/admin/jobs/ScheduledTaskDetail.tsx

@@ -25,11 +25,10 @@
 //     tool `_tool_run_scheduled_task_now`. There is no REST route and no
 //     publish endpoint to synthesize one, so the control stays ABSENT rather
 //     than shipping disabled (wave-7a precedent). Tracked as django-mojo #1309.
-import type { ReactNode } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
 import { mojoList, useCan } from '../../client/runtime';
 import {
-    ArmedButton,
     Badge,
     DetailView,
     Eyebrow,
@@ -211,7 +210,7 @@ export function ScheduledTaskDetail({ id, onClose }: { id: string; onClose: () =
     const queryClient = useQueryClient();
     const query = ScheduledTaskModel.useOne(id);
     const save = ScheduledTaskModel.useSave();
-    const remove = ScheduledTaskModel.useDelete();
+
     const { can: canManage } = useCan(SCHEDULED_TASK_MANAGE_PERMS);
 
     if (query.isPending) return <div className="modal-pad dim">Loading scheduled task…</div>;
@@ -243,16 +242,7 @@ export function ScheduledTaskDetail({ id, onClose }: { id: string; onClose: () =
         }
     };
 
-    const destroy = async () => {
-        try {
-            await remove.mutateAsync({ id });
-            await invalidate();
-            toast.success(`Deleted ${task.name || 'scheduled task'}`);
-            onClose();
-        } catch (error) {
-            toast.error(error instanceof Error ? error.message : 'Delete failed');
-        }
-    };
+
 
     const schedule = formatSchedule(task);
     const stateTone: Tone = task.enabled ? 'success' : 'muted';
@@ -271,6 +261,7 @@ export function ScheduledTaskDetail({ id, onClose }: { id: string; onClose: () =
                 ...(task.run_once ? [{ icon: 'bi-1-circle', text: 'Run once', tone: 'info' as const }] : []),
                 { icon: 'bi-broadcast', text: task.channel, tone: 'muted' },
             ]}
+            active={canManage ? { value: task.enabled, disabled: save.isPending, onChange: next => void setEnabled(next) } : undefined}
             badges={{ overview: task.last_error ? <Badge tone="danger">error</Badge> : null }}
             menuContext={task}
             contextMenu={[
@@ -283,6 +274,7 @@ export function ScheduledTaskDetail({ id, onClose }: { id: string; onClose: () =
                     label: task.enabled ? 'Disable' : 'Enable',
                     icon: task.enabled ? 'bi-pause-circle' : 'bi-play-circle',
                     permissions: SCHEDULED_TASK_MANAGE_PERMS,
+                    disabled: save.isPending,
                     onSelect: () => { void setEnabled(!task.enabled); },
                 },
             ]}
@@ -348,66 +340,8 @@ export function ScheduledTaskDetail({ id, onClose }: { id: string; onClose: () =
                 },
                 { key: 'config', label: 'Configuration', icon: 'bi-sliders', render: () => <ConfigurationSection task={task} /> },
                 { key: 'results', label: 'Results', icon: 'bi-list-check', render: () => <ResultsSection taskId={id} /> },
-                { divider: 'Manage' },
-                {
-                    key: 'manage', label: 'Manage', icon: 'bi-gear', permissions: SCHEDULED_TASK_MANAGE_PERMS, render: () => (
-                        <>
-                            <Eyebrow>Operates on {task.name || 'this task'}</Eyebrow>
-                            <div className="jobs-op-row">
-                                <div className="jobs-op-label">
-                                    <i className={`bi ${task.enabled ? 'bi-pause-circle' : 'bi-play-circle'}`} />
-                                    {task.enabled ? 'Disable' : 'Enable'}
-                                </div>
-                                <div className="jobs-op-desc">
-                                    {task.enabled
-                                        ? 'The hourly dispatcher skips disabled tasks. Nothing already published is affected.'
-                                        : 'The hourly dispatcher will pick this task up again on its next matching hour.'}
-                                </div>
-                                <div className="jobs-op-action">
-                                    <button
-                                        type="button" className="btn btn-compact" disabled={!canManage || save.isPending}
-                                        onClick={() => void setEnabled(!task.enabled)}
-                                    >
-                                        {task.enabled ? 'Disable' : 'Enable'}
-                                    </button>
-                                </div>
-                            </div>
 
-                            <div className="jobs-op-row">
-                                <div className="jobs-op-label"><i className="bi bi-pencil" /> Edit</div>
-                                <div className="jobs-op-desc">
-                                    Change the schedule, notification channels and configuration. The task type is fixed
-                                    after creation.
-                                </div>
-                                <div className="jobs-op-action">
-                                    <button type="button" className="btn btn-compact" disabled={!canManage} onClick={() => void edit()}>
-                                        Edit task…
-                                    </button>
-                                </div>
-                            </div>
 
-                            <div className="danger-zone">
-                                <div className="jobs-op-row">
-                                    <div className="jobs-op-label"><i className="bi bi-trash" /> Delete</div>
-                                    <div className="jobs-op-desc">
-                                        Removes the task and cascades to every one of its execution results. Jobs already
-                                        published stay queued.
-                                    </div>
-                                    <div className="jobs-op-action">
-                                        <ArmedButton
-                                            className="btn-compact btn-danger-ghost"
-                                            label="Delete task"
-                                            armedLabel="Click again — the task and all its results are gone"
-                                            icon="bi-trash"
-                                            disabled={!canManage || remove.isPending}
-                                            onConfirm={destroy}
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-                        </>
-                    ),
-                },
             ]}
             initialSection="overview"
             onClose={onClose}

package/src/admin/jobs/index.ts

@@ -14,7 +14,7 @@ export * from './RunnerDetail';
 export * from './sections/JobRunnersStrip';
 export * from './sections/JobChannelsPanel';
 export * from './sections/JobThroughputSection';
-export * from './sections/JobOperationsSection';
+export { JobOperationsSection } from './sections/JobOperationsSection';
 // Stage C — scheduled tasks (plan step 10).
 export * from './ScheduledTasksPage';
 export * from './ScheduledTaskDetail';

package/src/admin/jobs/purge-preview.ts

@@ -0,0 +1,25 @@
+/** A preview is an estimate for an immutable filter tuple, never a snapshot. */
+export interface PurgeParameters { daysOld: number; status: string | null }
+export interface PurgePreviewIdentity { id: number; params: Readonly<PurgeParameters> }
+export function createPurgePreviewGuard() {
+    let generation = 0;
+    let accepted: PurgePreviewIdentity | null = null;
+    let disposed = false;
+    return {
+        begin(params: PurgeParameters): PurgePreviewIdentity {
+            accepted = null;
+            return { id: ++generation, params: Object.freeze({ ...params }) };
+        },
+        accept(identity: PurgePreviewIdentity): boolean {
+            if (disposed || identity.id !== generation) return false;
+            accepted = identity;
+            return true;
+        },
+        execution(identity: PurgePreviewIdentity): Readonly<PurgeParameters> | null {
+            return !disposed && accepted === identity && identity.id === generation ? identity.params : null;
+        },
+        current(identity: PurgePreviewIdentity) { return !disposed && identity.id === generation; },
+        invalidate() { generation++; accepted = null; },
+        dispose() { disposed = true; generation++; accepted = null; },
+    };
+}

package/src/admin/jobs/sections/JobOperationsSection.tsx

@@ -13,9 +13,9 @@
 //   · clear-queue's `confirm:"yes"` is sent only AFTER the armed confirmation.
 //     Pre-satisfying a server-side safety gate removes it.
 //   · every destructive control is an ArmedButton, not a plain button.
-import { useState, type ReactNode } from 'react';
-import { ArmedButton, JsonBlock, modal, toast } from '../../../ui';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { useCan } from '../../../client/runtime';
+import { ArmedButton, JsonBlock, modal, toast } from '../../../ui';
 import {
     cleanupConsumers,
     clearQueue,
@@ -33,6 +33,8 @@ import {
 } from '../control';
 import { JOBS_MANAGE_PERMS, JOB_STATUS_OPTIONS } from '../models';
 
+import { createPurgePreviewGuard, type PurgePreviewIdentity } from '../purge-preview';
+
 const ALL_CHANNELS = '';
 
 function OperationRow({ label, icon, description, children, note }: {
@@ -56,63 +58,69 @@ function OperationRow({ label, icon, description, children, note }: {
 
 // ── Purge dialog: preview, then arm ───────────────────────────────────
 
-function PurgeDialog({ onClose }: { onClose: () => void }) {
+export function PurgeDialog({ onClose, onExecuting }: { onClose: () => void; onExecuting?: (value: boolean) => void }) {
     const [days, setDays] = useState(30);
     const [status, setStatus] = useState('');
-    const [preview, setPreview] = useState<PurgeResult | null>(null);
+    const guard = useRef(createPurgePreviewGuard());
+    const [preview, setPreview] = useState<(PurgePreviewIdentity & { result: PurgeResult }) | null>(null);
     const [busy, setBusy] = useState(false);
-
+    const [executing, setExecuting] = useState(false);
+    const executionLock = useRef(false);
+    const mounted = useRef(false);
+    const [outcome, setOutcome] = useState<PurgeResult | null>(null);
+    const { can: canManage } = useCan(JOBS_MANAGE_PERMS);
+    useEffect(() => {
+        guard.current = createPurgePreviewGuard(); mounted.current = true;
+        return () => { mounted.current = false; guard.current.dispose(); };
+    }, []);
+    const invalidate = () => { if (executionLock.current) return; guard.current.invalidate(); setPreview(null); setBusy(false); };
     const runPreview = async () => {
-        setBusy(true);
-        setPreview(null);
+        if (!canManage || executionLock.current) return;
+        const identity = guard.current.begin({ daysOld: Math.max(0, Math.floor(days)), status: status || null });
+        setBusy(true); setPreview(null); setOutcome(null);
         try {
-            const result = await purgeJobs({ daysOld: days, status: status || null, dryRun: true });
-            setPreview(result);
+            const result = await purgeJobs({ ...identity.params, dryRun: true });
+            if (guard.current.accept(identity)) setPreview(Object.assign(identity, { result }));
         } catch (error) {
-            toast.error(error instanceof Error ? error.message : 'Purge preview failed');
-        } finally {
-            setBusy(false);
-        }
+            if (guard.current.current(identity)) toast.error(error instanceof Error ? error.message : 'Purge preview failed');
+        } finally { if (guard.current.current(identity)) setBusy(false); }
     };
-
     const runPurge = async () => {
-        setBusy(true);
+        const params = preview && guard.current.execution(preview);
+        if (!canManage || busy || executionLock.current || !params) return;
+        executionLock.current = true; onExecuting?.(true); setExecuting(true);
+        guard.current.invalidate(); setPreview(null); setBusy(true);
         try {
-            const result = await purgeJobs({ daysOld: days, status: status || null });
-            // A REAL run reports `deleted`; only the dry run has `count`.
-            const deleted = isPurgeDryRun(result) ? result.count : result.deleted;
-            toast.success(`Purged ${deleted} record(s) older than ${days} day(s)`);
-            onClose();
-        } catch (error) {
-            toast.error(error instanceof Error ? error.message : 'Purge failed');
-        } finally {
-            setBusy(false);
-        }
+            const result = await purgeJobs({ ...params });
+            if (mounted.current) { setOutcome(result); setPreview(null); }
+        } catch (error) { if (mounted.current) toast.error(error instanceof Error ? error.message : 'Purge failed'); }
+        finally { executionLock.current = false; onExecuting?.(false); if (mounted.current) { setExecuting(false); setBusy(false); } }
     };
-
-    const previewCount = preview && isPurgeDryRun(preview) ? preview.count : null;
+    const previewCount = preview && isPurgeDryRun(preview.result) ? preview.result.count : null;
 
     return (
         <div className="modal-pad">
             <h2 className="modal-title">Purge old jobs</h2>
             <p className="dim">
                 Deletes job rows older than the cutoff, and their events and logs with them. Preview first — the
-                count is the only way to know what the cutoff actually covers.
+                preview is an estimate. Execution recalculates the cutoff; deleted counts include cascaded event and log rows.
             </p>
             <label className="jobs-field">
                 <span>Older than (days)</span>
                 <input
                     type="number" className="input input-compact" min={0} step={1}
+                    disabled={executing}
                     value={days}
-                    onChange={(event) => { setDays(Math.max(0, Number(event.target.value) || 0)); setPreview(null); }}
+                    onChange={(event) => { setDays(Math.max(0, Math.floor(Number(event.target.value) || 0))); invalidate(); }}
                 />
             </label>
             <label className="jobs-field">
                 <span>Status filter</span>
                 <select
                     className="input input-compact"
+                    disabled={executing}
                     value={status}
-                    onChange={(event) => { setStatus(event.target.value); setPreview(null); }}
+                    onChange={(event) => { setStatus(event.target.value); invalidate(); }}
                 >
                     <option value="">Every status</option>
                     {JOB_STATUS_OPTIONS.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
@@ -123,23 +131,25 @@ function PurgeDialog({ onClose }: { onClose: () => void }) {
                 <p className={`jobs-note ${previewCount > 0 ? 'jobs-note-warn' : 'jobs-note-info'}`}>
                     <i className="bi bi-info-circle" />
                     {previewCount > 0
-                        ? <> <strong>{previewCount}</strong> job(s) would be deleted, created before {new Date(preview.cutoff).toLocaleString()}.</>
+                        ? <> <strong>{previewCount}</strong> job(s) would be deleted, created before {new Date(preview.result.cutoff).toLocaleString()}.</>
                         : <> Nothing matches — no job is older than that cutoff.</>}
                 </p>
             )}
 
+            {outcome && <div className="jobs-note jobs-note-info"><h3>Execution result (actual cutoff)</h3><JsonBlock value={outcome} defaultOpen /></div>}
             <div className="modal-actions">
-                <button type="button" className="btn" onClick={onClose}>Cancel</button>
+                <button type="button" className="btn" disabled={executing} onClick={() => { invalidate(); onClose(); }}>Cancel</button>
                 <button type="button" className="btn" disabled={busy} onClick={() => void runPreview()}>
                     {busy && !preview ? 'Previewing…' : 'Preview'}
                 </button>
                 <ArmedButton
+                    key={preview?.id ?? 'no-preview'}
                     label="Purge"
                     armedLabel={previewCount != null ? `Click again to delete ${previewCount} job(s)` : 'Click again to purge'}
                     className="btn-danger-ghost"
                     // Arming before a preview would be arming a number nobody
                     // has seen.
-                    disabled={busy || previewCount == null || previewCount === 0}
+                    disabled={!canManage || busy || previewCount == null || previewCount === 0}
                     onConfirm={runPurge}
                 />
             </div>
@@ -208,6 +218,7 @@ export function JobOperationsSection({ channels, channelsPending, onChanged }: {
     onChanged?: () => void;
 }) {
     const { can: canManage } = useCan(JOBS_MANAGE_PERMS);
+    const purgeExecuting = useRef(false);
     const [channel, setChannel] = useState(ALL_CHANNELS);
     const noChannels = !channelsPending && channels.length === 0;
     // A stale selection must never become a request for a channel that no
@@ -368,8 +379,8 @@ export function JobOperationsSection({ channels, channelsPending, onChanged }: {
                 <button
                     type="button" className="btn btn-compact btn-danger-ghost" disabled={!canManage}
                     onClick={() => void modal.open((close) => (
-                        <PurgeDialog onClose={() => { close(null); onChanged?.(); }} />
-                    ), { size: 'sm' })}
+                        <PurgeDialog onExecuting={value => { purgeExecuting.current = value; }} onClose={() => { if (!purgeExecuting.current) { close(null); onChanged?.(); } }} />
+                    ), { size: 'sm', canDismiss: () => !purgeExecuting.current })}
                 >
                     Purge…
                 </button>