portal-mojo 0.1.0

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

@@ -0,0 +1,423 @@
+// JobOperationsSection — the queue control plane. Port of web-mojo
+// sections/JobOperationsSection.js, re-wired to what django-mojo serves.
+//
+// Corrections to the source, all of them consequences of reading the backend:
+//   · "All Channels" no longer sends `channel: null` (an instant HTTP 400 —
+//     clear-stuck and manual-reclaim are @requires_params('channel')). It is a
+//     CLIENT fan-out with per-channel results.
+//   · results are read from the keys the handlers actually return (`cleared`,
+//     `deleted`, `reset_count`) instead of the `data.count` the source read,
+//     which never existed and always reported zero.
+//   · purge is dry-run-first: the dialog previews "N jobs would be deleted
+//     before <cutoff>" and only then offers the armed real run.
+//   · 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 { useCan } from '../../../client';
+import {
+    cleanupConsumers,
+    clearQueue,
+    clearStuck,
+    forEachChannel,
+    isPurgeDryRun,
+    manualReclaim,
+    publishTestJob,
+    publishTestSuite,
+    purgeJobs,
+    rebuildScheduled,
+    resetFailed,
+    summarizeChannelOutcomes,
+    type PurgeResult,
+} from '../control';
+import { JOBS_MANAGE_PERMS, JOB_STATUS_OPTIONS } from '../models';
+
+const ALL_CHANNELS = '';
+
+function OperationRow({ label, icon, description, children, note }: {
+    label: string;
+    icon: string;
+    description: ReactNode;
+    children: ReactNode;
+    note?: ReactNode;
+}) {
+    return (
+        <div className="jobs-op-row">
+            <div className="jobs-op-label"><i className={`bi ${icon}`} /> {label}</div>
+            <div className="jobs-op-desc">
+                {description}
+                {note && <div className="jobs-op-note">{note}</div>}
+            </div>
+            <div className="jobs-op-action">{children}</div>
+        </div>
+    );
+}
+
+// ── Purge dialog: preview, then arm ───────────────────────────────────
+
+function PurgeDialog({ onClose }: { onClose: () => void }) {
+    const [days, setDays] = useState(30);
+    const [status, setStatus] = useState('');
+    const [preview, setPreview] = useState<PurgeResult | null>(null);
+    const [busy, setBusy] = useState(false);
+
+    const runPreview = async () => {
+        setBusy(true);
+        setPreview(null);
+        try {
+            const result = await purgeJobs({ daysOld: days, status: status || null, dryRun: true });
+            setPreview(result);
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Purge preview failed');
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const runPurge = async () => {
+        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 previewCount = preview && isPurgeDryRun(preview) ? preview.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.
+            </p>
+            <label className="jobs-field">
+                <span>Older than (days)</span>
+                <input
+                    type="number" className="input input-compact" min={0} step={1}
+                    value={days}
+                    onChange={(event) => { setDays(Math.max(0, Number(event.target.value) || 0)); setPreview(null); }}
+                />
+            </label>
+            <label className="jobs-field">
+                <span>Status filter</span>
+                <select
+                    className="input input-compact"
+                    value={status}
+                    onChange={(event) => { setStatus(event.target.value); setPreview(null); }}
+                >
+                    <option value="">Every status</option>
+                    {JOB_STATUS_OPTIONS.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+                </select>
+            </label>
+
+            {preview && previewCount != null && (
+                <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()}.</>
+                        : <> Nothing matches — no job is older than that cutoff.</>}
+                </p>
+            )}
+
+            <div className="modal-actions">
+                <button type="button" className="btn" onClick={onClose}>Cancel</button>
+                <button type="button" className="btn" disabled={busy} onClick={() => void runPreview()}>
+                    {busy && !preview ? 'Previewing…' : 'Preview'}
+                </button>
+                <ArmedButton
+                    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}
+                    onConfirm={runPurge}
+                />
+            </div>
+        </div>
+    );
+}
+
+// ── Test-job dialog ───────────────────────────────────────────────────
+
+function TestJobDialog({ channels, defaultChannel, onClose }: {
+    channels: string[];
+    defaultChannel: string;
+    onClose: () => void;
+}) {
+    const [channel, setChannel] = useState(defaultChannel || channels[0] || 'default');
+    const [delay, setDelay] = useState(0);
+    const [busy, setBusy] = useState(false);
+
+    const run = async () => {
+        setBusy(true);
+        try {
+            const result = await publishTestJob({ channel, delay: delay > 0 ? delay : null });
+            toast.success(`Test job ${result.job_id.slice(0, 12)}… published to ${result.channel}${result.delayed ? ` (in ${delay}s)` : ''}`);
+            onClose();
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Could not publish the test job');
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    return (
+        <div className="modal-pad">
+            <h2 className="modal-title">Publish a test job</h2>
+            <p className="dim">Publishes one sample job and hands back its id so it can be followed in the jobs table.</p>
+            <label className="jobs-field">
+                <span>Channel</span>
+                <select className="input input-compact" value={channel} onChange={(event) => setChannel(event.target.value)}>
+                    {(channels.length > 0 ? channels : ['default']).map((name) => <option key={name} value={name}>{name}</option>)}
+                </select>
+            </label>
+            <label className="jobs-field">
+                <span>Delay (seconds, 0 = immediate)</span>
+                <input
+                    type="number" className="input input-compact" min={0} step={5}
+                    value={delay}
+                    onChange={(event) => setDelay(Math.max(0, Number(event.target.value) || 0))}
+                />
+            </label>
+            <div className="modal-actions">
+                <button type="button" className="btn" onClick={onClose}>Cancel</button>
+                <button type="button" className="btn btn-primary" disabled={busy} onClick={() => void run()}>
+                    {busy ? 'Publishing…' : 'Publish'}
+                </button>
+            </div>
+        </div>
+    );
+}
+
+// ── The section ───────────────────────────────────────────────────────
+
+export function JobOperationsSection({ channels, channelsPending, onChanged }: {
+    channels: string[];
+    channelsPending: boolean;
+    /** Refresh the dashboard after a control mutates queue state. */
+    onChanged?: () => void;
+}) {
+    const { can: canManage } = useCan(JOBS_MANAGE_PERMS);
+    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
+    // longer exists.
+    const target = channel && channels.includes(channel) ? channel : ALL_CHANNELS;
+    const targets = target ? [target] : channels;
+    const disabled = !canManage || noChannels;
+
+    const after = (message: string) => { toast.success(message); onChanged?.(); };
+    const failed = (error: unknown, fallback: string) =>
+        toast.error(error instanceof Error ? error.message : fallback);
+
+    /** clear-stuck / manual-reclaim have no all-channel form — fan out. */
+    const runFanOut = async (verb: string, run: (name: string) => Promise<{ cleared: number }>) => {
+        try {
+            const outcomes = await forEachChannel(targets, run);
+            const cleared = outcomes.reduce((sum, outcome) => sum + (outcome.value?.cleared ?? 0), 0);
+            const anyFailed = outcomes.some((outcome) => !outcome.ok);
+            const line = `${cleared} job(s) requeued · ${summarizeChannelOutcomes(outcomes, verb)}`;
+            // A partial fan-out is reported as partial, never as success.
+            if (anyFailed) toast.warning(line); else toast.success(line);
+            onChanged?.();
+        } catch (error) {
+            failed(error, `${verb} failed`);
+        }
+    };
+
+    return (
+        <div className="panel jobs-operations">
+            <div className="toolbar">
+                <div className="toolbar-heading">
+                    <div className="eyebrow">Control</div>
+                    <h2 className="panel-title">Operations</h2>
+                </div>
+                <div className="toolbar-controls">
+                    <label className="jobs-inline-field">
+                        <span className="dim">Target</span>
+                        <select
+                            className="input input-compact"
+                            value={target}
+                            disabled={noChannels}
+                            onChange={(event) => setChannel(event.target.value)}
+                            aria-label="Target channel"
+                        >
+                            <option value={ALL_CHANNELS}>All channels</option>
+                            {channels.map((name) => <option key={name} value={name}>{name}</option>)}
+                        </select>
+                    </label>
+                </div>
+            </div>
+
+            {noChannels && (
+                <p className="jobs-note jobs-note-warn">
+                    <i className="bi bi-exclamation-triangle" /> No channels are configured or registered. Every
+                    channel-scoped operation is unavailable until a channel exists.
+                </p>
+            )}
+            {!canManage && (
+                <p className="jobs-note jobs-note-info">
+                    <i className="bi bi-info-circle" /> These controls require a global <code>manage_jobs</code> or <code>jobs</code> grant.
+                </p>
+            )}
+
+            <OperationRow
+                label="Test job" icon="bi-play-circle"
+                description="Publish one sample job to verify the pipeline end to end."
+            >
+                <button
+                    type="button" className="btn btn-compact" disabled={disabled}
+                    onClick={() => void modal.open((close) => (
+                        <TestJobDialog channels={channels} defaultChannel={target} onClose={() => { close(null); onChanged?.(); }} />
+                    ), { size: 'sm' })}
+                >
+                    Publish…
+                </button>
+            </OperationRow>
+
+            <OperationRow
+                label="Test suite" icon="bi-robot"
+                description="Publishes a whole sample suite — one job per channel plus dozens of immediate and delayed jobs."
+                note="Load-generating. It returns no ids; watch the dashboard."
+            >
+                <ArmedButton
+                    className="btn-compact" label="Run suite" armedLabel="Click again to flood the queues"
+                    disabled={!canManage}
+                    onConfirm={async () => {
+                        try { after(await publishTestSuite()); } catch (error) { failed(error, 'Test suite failed'); }
+                    }}
+                />
+            </OperationRow>
+
+            <OperationRow
+                label="Clear stuck" icon="bi-wrench"
+                description="Requeue in-flight jobs that have been claimed for longer than the idle threshold."
+                note={target ? <>Targets <code>{target}</code>.</> : <>No all-channel form exists server-side — this runs once per channel and reports each result.</>}
+            >
+                <ArmedButton
+                    className="btn-compact" label="Clear stuck" armedLabel={`Click again to requeue in ${target || `${channels.length} channels`}`}
+                    disabled={disabled}
+                    onConfirm={() => runFanOut('cleared', (name) => clearStuck(name))}
+                />
+            </OperationRow>
+
+            <OperationRow
+                label="Reclaim all" icon="bi-arrow-counterclockwise"
+                description="Requeue EVERY in-flight job, not only the idle ones (idle threshold 0)."
+                note={target ? <>Targets <code>{target}</code>.</> : <>Runs once per channel.</>}
+            >
+                <ArmedButton
+                    className="btn-compact" label="Reclaim" armedLabel={`Click again to reclaim in ${target || `${channels.length} channels`}`}
+                    disabled={disabled}
+                    onConfirm={() => runFanOut('reclaimed', (name) => manualReclaim(name))}
+                />
+            </OperationRow>
+
+            <OperationRow
+                label="Reset failed" icon="bi-arrow-repeat"
+                description="Move failed jobs back to pending and requeue them, up to 100 at a time."
+                note={target ? <>Targets <code>{target}</code>.</> : <>The backend handles the all-channel form itself.</>}
+            >
+                <ArmedButton
+                    className="btn-compact" label="Reset failed" armedLabel="Click again to requeue failed jobs"
+                    disabled={!canManage}
+                    onConfirm={async () => {
+                        try {
+                            const result = await resetFailed({ channel: target || null });
+                            after(`${result.reset_count} failed job(s) reset to pending`);
+                        } catch (error) { failed(error, 'Reset failed'); }
+                    }}
+                />
+            </OperationRow>
+
+            <OperationRow
+                label="Clear queue" icon="bi-eraser"
+                description="Deletes the channel's Redis keys and cancels every DB-pending job on it."
+                note={target
+                    ? <>Targets <code>{target}</code>. Queued work is <strong>lost</strong>.</>
+                    : <>Pick a single channel — clearing every queue at once is not offered.</>}
+            >
+                <ArmedButton
+                    className="btn-compact btn-danger-ghost" label="Clear queue"
+                    armedLabel={`Click again to wipe ${target}`}
+                    disabled={disabled || !target}
+                    onConfirm={async () => {
+                        try {
+                            const result = await clearQueue(target);
+                            after(`Queue ${target} cleared · ${result.db_pending_canceled} pending job(s) canceled`);
+                        } catch (error) { failed(error, 'Clear queue failed'); }
+                    }}
+                />
+            </OperationRow>
+
+            <OperationRow
+                label="Purge history" icon="bi-trash"
+                description="Delete job rows older than a cutoff, with their events and logs."
+                note="Runs a dry-run preview before anything is deleted."
+            >
+                <button
+                    type="button" className="btn btn-compact btn-danger-ghost" disabled={!canManage}
+                    onClick={() => void modal.open((close) => (
+                        <PurgeDialog onClose={() => { close(null); onChanged?.(); }} />
+                    ), { size: 'sm' })}
+                >
+                    Purge…
+                </button>
+            </OperationRow>
+
+            <OperationRow
+                label="Cleanup consumers" icon="bi-people"
+                description="Remove stale Redis stream consumers and, when empty, their groups."
+                note={target ? <>Targets <code>{target}</code>.</> : <>Cleans every channel.</>}
+            >
+                <ArmedButton
+                    className="btn-compact" label="Cleanup" armedLabel="Click again to clean up consumers"
+                    disabled={!canManage}
+                    onConfirm={async () => {
+                        try {
+                            const result = await cleanupConsumers({ channel: target || null });
+                            void modal.open((close) => (
+                                <div className="modal-pad">
+                                    <h2 className="modal-title">Consumer cleanup</h2>
+                                    <JsonBlock value={result} label="Result" defaultOpen />
+                                    <div className="modal-actions">
+                                        <button type="button" className="btn btn-primary" onClick={() => close(null)}>Close</button>
+                                    </div>
+                                </div>
+                            ), { size: 'md' });
+                            onChanged?.();
+                        } catch (error) { failed(error, 'Cleanup failed'); }
+                    }}
+                />
+            </OperationRow>
+
+            <OperationRow
+                label="Rebuild scheduled" icon="bi-calendar-check"
+                description="Rebuild the Redis scheduled sets from the database's pending future jobs."
+                note={target ? <>Targets <code>{target}</code>.</> : <>Rebuilds every channel.</>}
+            >
+                <button
+                    type="button" className="btn btn-compact" disabled={!canManage}
+                    onClick={async () => {
+                        try {
+                            await rebuildScheduled({ channel: target || null });
+                            after('Scheduled sets rebuilt from the database');
+                        } catch (error) { failed(error, 'Rebuild failed'); }
+                    }}
+                >
+                    Rebuild
+                </button>
+            </OperationRow>
+        </div>
+    );
+}

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

@@ -0,0 +1,82 @@
+// JobRunnersStrip — the fleet summary that opens the dashboard. Port of
+// web-mojo JobsRunnersStrip.js.
+//
+// Runners are the PRIMARY alert signal: if none are alive nothing moves, no
+// matter how healthy the channel numbers look. Hence the position at the top
+// and the critical empty state.
+import { Badge, fmt } from '../../../ui';
+import { showRunnerDetail } from '../RunnerDetail';
+import {
+    formatHeartbeatAge,
+    heartbeatAgeSeconds,
+    runnerHealth,
+    type RunnerRow,
+} from '../models';
+import { useRunners } from '../queries';
+
+/** Worst state in the fleet drives the header tone. */
+function summaryTone(runners: RunnerRow[], loaded: boolean): 'success' | 'warning' | 'danger' | 'muted' {
+    if (!loaded) return 'muted';
+    if (runners.length === 0) return 'danger';
+    if (runners.some((runner) => runnerHealth(runner).key === 'down')) return 'danger';
+    if (runners.some((runner) => runnerHealth(runner).key === 'stale')) return 'warning';
+    return 'success';
+}
+
+export function JobRunnersStrip() {
+    const query = useRunners();
+    const runners = query.data ?? [];
+    const loaded = !query.isPending && !query.isError;
+    const alive = runners.filter((runner) => runner.alive).length;
+    const processed = runners.reduce((sum, runner) => sum + (runner.jobs_processed || 0), 0);
+    const tone = summaryTone(runners, loaded);
+
+    const summary = query.isPending
+        ? 'Loading runners…'
+        : query.isError
+            ? 'Could not load runners'
+            : runners.length === 0
+                ? 'No runners registered'
+                : `${alive} of ${runners.length} runner${runners.length === 1 ? '' : 's'} alive · ${fmt.number(processed)} jobs processed`;
+
+    return (
+        <details className="panel jobs-strip" open>
+            <summary className="jobs-strip-head">
+                <span className="jobs-strip-title"><i className="bi bi-cpu" /> Runners</span>
+                <span className={`jobs-strip-summary jobs-text-${tone}`}>{summary}</span>
+                <i className="bi bi-chevron-down jobs-strip-chevron" />
+            </summary>
+            <ul className="jobs-strip-list">
+                {loaded && runners.length === 0 && (
+                    <li className="jobs-strip-row jobs-strip-empty">
+                        <i className="bi bi-exclamation-triangle" />
+                        No runners registered — jobs will not be processed.
+                    </li>
+                )}
+                {runners.map((runner) => {
+                    const health = runnerHealth(runner);
+                    return (
+                        <li key={runner.id}>
+                            <button type="button" className="jobs-strip-row" onClick={() => showRunnerDetail(runner)}>
+                                <span className={`jobs-dot jobs-dot-${health.tone}`} />
+                                <span className="jobs-strip-id">
+                                    <code>{runner.runner_id}</code>
+                                    <span className="dim">
+                                        {runner.channels.length > 0 ? runner.channels.join(', ') : 'no channels'}
+                                        {' · '}
+                                        {fmt.number(runner.jobs_processed)} done
+                                        {runner.jobs_failed > 0 && ` · ${fmt.number(runner.jobs_failed)} failed`}
+                                    </span>
+                                </span>
+                                <span className="dim jobs-strip-when" title={fmt.datetime(runner.last_heartbeat)}>
+                                    {formatHeartbeatAge(heartbeatAgeSeconds(runner.last_heartbeat))}
+                                </span>
+                                <Badge tone={health.tone}>{health.label}</Badge>
+                            </button>
+                        </li>
+                    );
+                })}
+            </ul>
+        </details>
+    );
+}

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

@@ -0,0 +1,118 @@
+// JobThroughputSection — the metrics half of the dashboard. Port of web-mojo
+// sections/JobOverviewSection.js (the two sparkline widgets) plus the full
+// MetricsChart the source never had.
+//
+// The per-channel switch is the interesting part. The backend's slug naming is
+// ASYMMETRIC: publishing is recorded as `jobs.published.<channel>` while
+// terminal outcomes are recorded as `jobs.channel.<channel>.completed` and
+// `.failed`. There is NO per-channel slug for retried or expired, so those two
+// series exist only in the all-channel view and the UI says so rather than
+// plotting an empty line.
+import { useRef, useState } from 'react';
+import { MetricsChart, MetricsMiniWidget } from '../../../charts';
+
+const GLOBAL_SLUGS = ['jobs.completed', 'jobs.failed', 'jobs.retried', 'jobs.expired'];
+const GLOBAL_LABELS: Record<string, string> = {
+    'jobs.completed': 'Completed',
+    'jobs.failed': 'Failed',
+    'jobs.retried': 'Retried',
+    'jobs.expired': 'Expired',
+};
+
+/** The three slugs a channel actually has, in the backend's own naming. */
+function channelSlugs(channel: string): { slugs: string[]; labels: Record<string, string> } {
+    const published = `jobs.published.${channel}`;
+    const completed = `jobs.channel.${channel}.completed`;
+    const failed = `jobs.channel.${channel}.failed`;
+    return {
+        slugs: [published, completed, failed],
+        labels: { [published]: 'Published', [completed]: 'Completed', [failed]: 'Failed' },
+    };
+}
+
+export function JobThroughputSection({ channels }: { channels: string[] }) {
+    const [channel, setChannel] = useState('');
+    // A channel that disappears from the list (stream removed, settings
+    // change) must not leave the chart requesting slugs that no longer exist.
+    // The fallback is loud, but once per channel — not once per render.
+    const warned = useRef<Set<string>>(new Set());
+    const active = channel && channels.includes(channel) ? channel : '';
+    if (channel && !active && !warned.current.has(channel)) {
+        warned.current.add(channel);
+        console.warn(`[admin/jobs] channel ${JSON.stringify(channel)} is no longer reported — falling back to all channels.`);
+    }
+    const scoped = active ? channelSlugs(active) : null;
+
+    return (
+        <div className="jobs-throughput">
+            <div className="jobs-throughput-minis">
+                <MetricsMiniWidget
+                    title="Jobs published"
+                    icon="bi bi-upload"
+                    slugs={['jobs.published']}
+                    account="global"
+                    granularity="days"
+                    defaultRange="30d"
+                    chartType="line"
+                    height={90}
+                    showTrending
+                    showSettings
+                    settingsKey="admin-jobs-published"
+                />
+                <MetricsMiniWidget
+                    title="Jobs failed"
+                    icon="bi bi-exclamation-octagon"
+                    slugs={['jobs.failed']}
+                    account="global"
+                    granularity="days"
+                    defaultRange="30d"
+                    chartType="line"
+                    tone="bad"
+                    height={90}
+                    showTrending
+                    showSettings
+                    settingsKey="admin-jobs-failed"
+                />
+            </div>
+
+            <div className="panel jobs-throughput-chart">
+                <div className="toolbar">
+                    <div className="toolbar-heading">
+                        <div className="eyebrow">Throughput</div>
+                        <h2 className="panel-title">Job outcomes</h2>
+                    </div>
+                    <div className="toolbar-controls">
+                        <label className="jobs-inline-field">
+                            <span className="dim">Channel</span>
+                            <select
+                                className="input input-compact"
+                                value={active}
+                                onChange={(event) => setChannel(event.target.value)}
+                                aria-label="Metric channel"
+                            >
+                                <option value="">All channels</option>
+                                {channels.map((name) => <option key={name} value={name}>{name}</option>)}
+                            </select>
+                        </label>
+                    </div>
+                </div>
+                <MetricsChart
+                    key={active || 'all'}
+                    title={active ? `Outcomes · ${active}` : 'Outcomes · all channels'}
+                    slugs={scoped ? scoped.slugs : GLOBAL_SLUGS}
+                    seriesLabels={scoped ? scoped.labels : GLOBAL_LABELS}
+                    account="global"
+                    defaultRange="7d"
+                    defaultGranularity="days"
+                    defaultType="bar"
+                    height={260}
+                />
+                {active && (
+                    <p className="dim jobs-throughput-note">
+                        Retried and expired are only recorded system-wide — the backend records no per-channel slug for them.
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/admin/messaging/EmailDomainWizard.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import type { QueryClient } from '@tanstack/react-query';
+import { FormWizard, modal, type FormData } from '../../ui';
+import { useCan } from '../../client';
+import { getDnsAdminIntegration } from '../dns/dns-integration';
+import { DNS_VIEW_PERMISSIONS } from '../dns/models';
+import { onboardEmailDomain } from './api';
+import type { DomainActionResult, EmailDomainRow } from './models';
+
+interface WizardOutcome{result:DomainActionResult;recordsHref:string|null}
+function mountedHref(relative:string):string{const clean=relative.replace(/^\/+|\/+$/g,'');const embedded=window.location.hash.startsWith('#/system/');return `#/${embedded?'system/':''}${clean}`;}
+function OnboardResult({outcome,onClose,onNavigate}:{outcome:WizardOutcome;onClose:()=>void;onNavigate:()=>void}){const {result}=outcome;return <div className="modal-pad"><h2 className="modal-title">Onboarding result</h2><p><b>{result.domain}</b> · {result.region}</p>{result.provider&&<p>Provider: {result.provider}{result.applied!=null?` · ${result.applied} records applied`:''}</p>}{result.receipt_rule&&<p><b>Receipt rule:</b> <code>{result.receipt_rule}</code></p>}{result.rule_set&&<p><b>Rule set:</b> <code>{result.rule_set}</code></p>}{result.dns_records.length>0?<div className="table-wrap"><table className="tbl"><thead><tr><th>Type</th><th>Name</th><th>Value</th><th>TTL</th></tr></thead><tbody>{result.dns_records.map((record,index)=><tr key={`${record.type}:${record.name}:${index}`}><td>{record.type}</td><td><code>{record.name}</code></td><td><code>{record.value}</code></td><td>{record.ttl}</td></tr>)}</tbody></table></div>:<p className="dim">No DNS records were returned.</p>}{outcome.recordsHref&&<p><button className="btn" onClick={onNavigate}>Open DNS records</button></p>}{Object.entries(result.topic_arns??{}).map(([key,value])=><p key={key}><b>{key} topic:</b> <code>{value}</code></p>)}{result.notes.map(note=><p key={note}>{note}</p>)}<div className="modal-actions"><button className="btn" onClick={onClose}>Close</button></div></div>}
+
+function WizardBody({domain,queryClient,onPending,onSuccess,onClose}:{domain:EmailDomainRow;queryClient:QueryClient;onPending:(value:boolean)=>void;onSuccess:(value:WizardOutcome)=>void;onClose:()=>void}){
+ const integration=getDnsAdminIntegration();const dnsPermission=useCan(DNS_VIEW_PERMISSIONS);const canViewDns=dnsPermission.can;const canResolve=canViewDns&&Boolean(integration?.resolveDomainByName&&integration.recordsHref);const normalizedDomain=domain.name.trim().toLowerCase().replace(/\.$/,'');const [dnsDomainId,setDnsDomainId]=useState<number|null>(null);const [resolvedFor,setResolvedFor]=useState<string|null>(null);
+ useEffect(()=>{let alive=true;if(dnsPermission.isLoading){setDnsDomainId(null);setResolvedFor(null);return;}if(!canResolve||!integration?.resolveDomainByName){setDnsDomainId(null);setResolvedFor(null);return;}setDnsDomainId(null);setResolvedFor(null);void integration.resolveDomainByName(normalizedDomain).then(id=>{if(alive)setDnsDomainId(id);}).catch(()=>{if(alive)setDnsDomainId(null);}).finally(()=>{if(alive)setResolvedFor(normalizedDomain);});return()=>{alive=false;};},[canResolve,dnsPermission.isLoading,integration,normalizedDomain]);
+ const managedReady=canViewDns&&dnsDomainId!=null&&Boolean(integration?.recordsHref);
+ const finish=async(data:FormData)=>{const useDns=data.use_dnsman==='managed';if(useDns&&!managedReady)throw new Error('Managed DNS is unavailable for this exact domain. Choose manual DNS.');const receiving=Boolean(data.receiving_enabled);const bucket=String(data.s3_inbound_bucket??'').trim();if(receiving&&!bucket)throw new Error('Inbound S3 bucket is required when receiving is enabled.');const mailFrom=String(data.mail_from_subdomain??'').trim();if(Boolean(data.ensure_mail_from)&&!/^[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/i.test(mailFrom))throw new Error('MAIL FROM subdomain is invalid.');const endpoints:Record<string,string>={};for(const key of ['bounce','complaint','delivery','inbound'] as const){const value=String(data[`${key}_endpoint`]??'').trim();if(value){let url:URL;try{url=new URL(value);}catch{throw new Error(`${key} endpoint must be an HTTPS URL.`);}if(url.protocol!=='https:'||url.username||url.password)throw new Error(`${key} endpoint must be an HTTPS URL without credentials.`);endpoints[key]=value;}}
+ const input={use_dnsman:useDns,region:String(data.region||domain.region),receiving_enabled:receiving,...(bucket?{s3_inbound_bucket:bucket}:{}),s3_inbound_prefix:String(data.s3_inbound_prefix??''),ensure_mail_from:Boolean(data.ensure_mail_from),...(mailFrom?{mail_from_subdomain:mailFrom}:{}),...(Object.keys(endpoints).length?{endpoints}:{})};const ok=await modal.confirm({title:'Apply SES onboarding?',message:<><p>This performs external SES/SNS and receiving configuration. Managed mode may also write DNS.</p><p><b>{domain.name}</b> · {useDns?'Managed DNS':'Manual DNS'} · {input.region}</p><p>Receiving: {receiving?`enabled → ${bucket}`:'disabled'} · MAIL FROM: {input.ensure_mail_from?mailFrom:'off'}</p></>,confirmText:'Apply onboarding'});if(!ok)return;onPending(true);try{const result=await onboardEmailDomain(queryClient,domain.id,input);const recordsHref=managedReady&&integration?.recordsHref&&dnsDomainId!=null?mountedHref(integration.recordsHref(dnsDomainId)):null;onSuccess({result,recordsHref});}finally{onPending(false);}};
+ if(dnsPermission.isLoading||(canResolve&&resolvedFor!==normalizedDomain))return <div className="modal-pad"><h2 className="modal-title">Onboard {domain.name}</h2><p className="dim">Resolving DNS permissions and the exact managed domain…</p><div className="modal-actions"><button className="btn" onClick={onClose}>Cancel</button></div></div>;
+ return <div className="modal-pad"><h2 className="modal-title">Onboard {domain.name}</h2>{!managedReady&&<div className="form-alert">Managed DNS is unavailable for this exact domain or permission set. Manual mode returns complete records.</div>}<FormWizard mode="wizard" finishText="Review and onboard" busyText="Onboarding…" onCancel={onClose} onFinish={finish} initial={{region:domain.region,receiving_enabled:domain.receiving_enabled,s3_inbound_bucket:domain.s3_inbound_bucket??'',s3_inbound_prefix:domain.s3_inbound_prefix??'',use_dnsman:managedReady?'managed':'manual',ensure_mail_from:true,mail_from_subdomain:'feedback'}} sections={[{key:'domain',label:'Domain',description:'Confirm region and receiving intent.',fields:[{name:'region',label:'AWS region',type:'text',required:true},{name:'receiving_enabled',label:'Enable receiving',type:'switch'}]},{key:'receiving',label:'Receiving',fields:[{name:'s3_inbound_bucket',label:'Inbound S3 bucket',type:'text',help:'Required when receiving is enabled.'},{name:'s3_inbound_prefix',label:'Object prefix',type:'text'}]},{key:'notifications',label:'Notifications',optional:true,fields:[{name:'bounce_endpoint',label:'Bounce HTTPS endpoint',type:'text'},{name:'complaint_endpoint',label:'Complaint HTTPS endpoint',type:'text'},{name:'delivery_endpoint',label:'Delivery HTTPS endpoint',type:'text'},{name:'inbound_endpoint',label:'Inbound HTTPS endpoint',type:'text'}]},{key:'dns',label:'DNS',description:managedReady?'Managed DNS uses the exact registered DNSMan domain and its stored credential.':'Manual DNS keeps provider changes in your hands.',fields:[{name:'use_dnsman',label:'DNS method',type:'select',options:managedReady?[{value:'manual',label:'Manual DNS'},{value:'managed',label:'Managed DNS'}]:[{value:'manual',label:'Manual DNS'}]},{name:'ensure_mail_from',label:'Configure MAIL FROM',type:'switch'},{name:'mail_from_subdomain',label:'MAIL FROM subdomain',type:'text'}]},{key:'review',label:'Review',description:'Finish opens an exact confirmation before one external request.',fields:[]}]} /></div>;
+}
+
+export async function openEmailDomainWizard(domain:EmailDomainRow,queryClient:QueryClient):Promise<void>{let pending=false;let outcome:WizardOutcome|null=null;await modal.open(close=><WizardBody domain={domain} queryClient={queryClient} onPending={value=>{pending=value;}} onSuccess={value=>{outcome=value;close(null);}} onClose={()=>close(null)}/>,{size:'lg',canDismiss:()=>!pending});const completed=outcome as WizardOutcome|null;if(completed){const navigate=await modal.open<'dns'|null>(close=><OnboardResult outcome={completed} onClose={()=>close(null)} onNavigate={()=>close('dns')}/>,{size:'lg'});if(navigate==='dns'&&completed.recordsHref)window.location.hash=completed.recordsHref.replace(/^#/,'');}}