portal-mojo 0.2.21 → 0.2.22

package/src/admin/dns/RegistrantContactPage.tsx

@@ -1,42 +1,88 @@
-import { useEffect, useRef, useState } from 'react';
-import { useMe } from '../../client/runtime';
-import { Badge, CollectionSelect, modal } from '../../ui';
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { getAuthSessionRevision, getAuthSnapshot, hasPermission, subscribeAuth, useAuthSnapshot, useMe } from '../../client/runtime';
+import { Badge, CollectionSelect, Tabs, modal } from '../../ui';
+import { OperationsHelp } from '../core/OperationsHelp';
 import { DNS_GROUP_CHOICE_ENDPOINT, clearRegistrantContact, fetchRegistrantContact, saveRegistrantContact } from './api';
-import type { DnsGroupChoice, RegistrantContact, RegistrantContactResponse } from './models';
+import { DNS_MANAGE_PERMISSIONS, type DnsGroupChoice, type RegistrantContact, type RegistrantContactResponse } from './models';
 import { CONTACT_STRING_FIELDS, contactDraft, contactPayload, validateContactDraft } from './registrant-data';
 import { redactRegistrarError } from './purchase-data';
 
 type Scope = { kind: 'group'; group: DnsGroupChoice } | { kind: 'house' };
 const LABELS: Record<(typeof CONTACT_STRING_FIELDS)[number], string> = { FirstName: 'First name', LastName: 'Last name', ContactType: 'Contact type', OrganizationName: 'Organization', AddressLine1: 'Address line 1', AddressLine2: 'Address line 2', City: 'City', State: 'State / province', CountryCode: 'Country code', ZipCode: 'Postal code', PhoneNumber: 'Phone number', Email: 'Email', Fax: 'Fax' };
+const REQUIRED = new Set(['FirstName', 'LastName', 'ContactType', 'AddressLine1', 'City', 'CountryCode', 'ZipCode', 'PhoneNumber', 'Email']);
+const ADDRESS = new Set(['AddressLine1', 'AddressLine2', 'City', 'State', 'CountryCode', 'ZipCode']);
 
-export function RegistrantContactPage() {
-    const { data: me } = useMe(); const [scope, setScope] = useState<Scope | null>(null); const [response, setResponse] = useState<RegistrantContactResponse | null>(null); const [draft, setDraft] = useState<RegistrantContact>({}); const [busy, setBusy] = useState(false); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const generation = useRef(0); const mounted = useRef(true);
-    useEffect(() => () => { mounted.current = false; generation.current += 1; }, []);
+/** Contact values stay in this mounted form, never in Query or browser storage. */
+export function RegistrantContactPage({ initialGroup, lockScope = false, onSaved, onClose, onBusyChange }: { initialGroup?: DnsGroupChoice; lockScope?: boolean; onSaved?: () => void; onClose?: () => void; onBusyChange?: (busy: boolean) => void }) {
+    const { data: me } = useMe(); const auth = useAuthSnapshot();
+    const revision = useSyncExternalStore(subscribeAuth, getAuthSessionRevision, getAuthSessionRevision);
+    const canManage = auth.authenticated && hasPermission(me ?? null, DNS_MANAGE_PERMISSIONS, null);
+    const identity = JSON.stringify([auth.uid, revision, canManage, initialGroup?.id, lockScope]);
+    const latest = useRef(identity); latest.current = identity;
+    const callbacks = useRef({ onSaved, onBusyChange }); callbacks.current = { onSaved, onBusyChange };
+    const [scope, setScope] = useState<Scope | null>(null);
+    const [loaded, setLoaded] = useState<{ identity: string; response: RegistrantContactResponse } | null>(null);
+    const [draft, setDraft] = useState<RegistrantContact>({});
+    const [busy, setBusy] = useState(false); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const [notice, setNotice] = useState('');
+    const [tab, setTab] = useState('contact');
+    const generation = useRef(0); const mounted = useRef(false); const flight = useRef(false);
+    const response = loaded?.identity === identity && canManage ? loaded.response : null;
+    const pending = (value: boolean) => { flight.current = value; setBusy(value); callbacks.current.onBusyChange?.(value); };
+    const current = (accepted: number, owner: string, uid = auth.uid, rev = revision) => mounted.current && generation.current === accepted && latest.current === owner && getAuthSnapshot().uid === uid && getAuthSessionRevision() === rev;
+    const guard = (accepted: number, owner: string) => () => { if (!current(accepted, owner)) throw new Error('Registrant scope or session changed. Reopen this task.'); };
+    const accept = (value: RegistrantContactResponse, target: Scope) => {
+        const group = target.kind === 'group' ? target.group.id : null;
+        if (value.group !== group || value.scope !== (group == null ? 'global' : 'group')) throw new Error('The contact response did not match the selected scope');
+        setLoaded({ identity, response: value }); setDraft(contactDraft(value));
+    };
     const choose = async (next: Scope | null) => {
-        const current = ++generation.current; setScope(next); setResponse(null); setDraft({}); setError('');
-        if (!next) return; setLoading(true); const group = next.kind === 'group' ? next.group.id : null;
-        try { const value = await fetchRegistrantContact(group); if (mounted.current && generation.current === current) { setResponse(value); setDraft(contactDraft(value)); } }
-        catch (reason) { if (mounted.current && generation.current === current) setError(redactRegistrarError(reason)); }
-        finally { if (mounted.current && generation.current === current) setLoading(false); }
+        if (!canManage || flight.current || (next?.kind === 'house' && me?.is_superuser !== true)) return;
+        const accepted = ++generation.current, owner = identity;
+        setScope(next); setLoaded(null); setDraft({}); setError(''); setNotice(''); setTab('contact'); setLoading(!!next);
+        if (!next) return;
+        try { const value = await fetchRegistrantContact(next.kind === 'group' ? next.group.id : null, guard(accepted, owner)); if (current(accepted, owner)) accept(value, next); }
+        catch (reason) { if (current(accepted, owner)) setError(redactRegistrarError(reason)); }
+        finally { if (current(accepted, owner)) setLoading(false); }
     };
+    useEffect(() => { mounted.current = true; return () => { mounted.current = false; generation.current++; callbacks.current.onBusyChange?.(false); }; }, []);
+    useEffect(() => {
+        generation.current++; flight.current = false; setBusy(false); callbacks.current.onBusyChange?.(false);
+        setScope(null); setLoaded(null); setDraft({}); setError(''); setNotice(''); setLoading(false);
+        if (canManage && initialGroup) void choose({ kind: 'group', group: initialGroup });
+        // A session or explicit fixed-scope change discards all local PII.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [identity]);
     const save = async () => {
-        if (!scope || !response || busy) return; const problems = validateContactDraft(draft); if (problems.length) { setError(problems.join('; ')); return; }
-        const current = generation.current; const group = scope.kind === 'group' ? scope.group.id : null; setBusy(true); setError('');
-        try { const saved = await saveRegistrantContact(contactPayload(draft, response, { group }), group); if (mounted.current && generation.current === current) { setResponse(saved); setDraft(contactDraft(saved)); } }
-        catch (reason) { if (mounted.current && generation.current === current) setError(redactRegistrarError(reason)); }
-        finally { if (mounted.current && generation.current === current) setBusy(false); }
+        if (!canManage || !scope || !response || flight.current || loading) return;
+        const problems = validateContactDraft(draft);
+        if (problems.length) { setError(problems.join('; ')); setTab(problems.some(value => /FirstName|LastName|ContactType|PhoneNumber|Email/.test(value)) ? 'contact' : 'address'); return; }
+        const accepted = generation.current, owner = identity, target = scope; const group = target.kind === 'group' ? target.group.id : null;
+        const payload = contactPayload(draft, response, { group }); pending(true); setError(''); setNotice('');
+        try { const saved = await saveRegistrantContact(payload, group, guard(accepted, owner)); if (current(accepted, owner)) { accept(saved, target); setNotice('Contact saved.'); callbacks.current.onSaved?.(); } }
+        catch (reason) { if (current(accepted, owner)) setError(redactRegistrarError(reason)); }
+        finally { if (current(accepted, owner)) pending(false); }
     };
     const clear = async () => {
-        if (!scope || !response || busy || response.source !== 'database') return;
-        if (!await modal.confirm({ title: 'Clear this scope’s contact?', message: 'This reveals any inherited or deployment-file contact but never its values.', confirmText: 'Clear contact', danger: true })) return;
-        const current = generation.current; const group = scope.kind === 'group' ? scope.group.id : null; setBusy(true); setError('');
-        try { const saved = await clearRegistrantContact(group); if (mounted.current && generation.current === current) { setResponse(saved); setDraft(contactDraft(saved)); } }
-        catch (reason) { if (mounted.current && generation.current === current) setError(redactRegistrarError(reason)); }
-        finally { if (mounted.current && generation.current === current) setBusy(false); }
+        if (!canManage || !scope || !response || flight.current || response.source !== 'database') return;
+        const accepted = generation.current, owner = identity, target = scope; pending(true); setError(''); setNotice('');
+        try {
+            if (!await modal.confirm({ title: 'Clear this contact?', message: `Remove the saved contact for ${target.kind === 'house' ? 'House' : target.group.name}. Any inherited contact will apply instead.`, confirmText: 'Clear contact', danger: true })) return;
+            if (!current(accepted, owner)) return;
+            const saved = await clearRegistrantContact(target.kind === 'group' ? target.group.id : null, guard(accepted, owner));
+            if (current(accepted, owner)) { accept(saved, target); setNotice('Saved contact cleared.'); }
+        } catch (reason) { if (current(accepted, owner)) setError(redactRegistrarError(reason)); }
+        finally { if (current(accepted, owner)) pending(false); }
     };
-    return <div className="dns-registrant-page"><div className="panel panel-pad dns-registrant-head"><div><div className="eyebrow">Infrastructure · DNS</div><h1>Registrant Contact</h1><p className="dim">ICANN contact PII is fetched imperatively into this mounted page only. It is cleared on every scope change and never enters Query cache.</p></div><div className="dns-scope-picker"><CollectionSelect<DnsGroupChoice> endpoint={DNS_GROUP_CHOICE_ENDPOINT} value={scope?.kind === 'group' ? scope.group : null} onChange={(_id, row) => void choose(row ? { kind: 'group', group: row } : null)} label="Group scope" placeholder="Search eligible groups…" maxItems={25} defaultParams={{ start: 0 }} />{me?.is_superuser === true && <button className={`btn${scope?.kind === 'house' ? ' btn-primary' : ''}`} disabled={busy} onClick={() => void choose({ kind: 'house' })}><i className="bi bi-house" /> House contact</button>}</div></div>
-        {!scope && <div className="panel panel-pad dim">Choose one authorized group{me?.is_superuser === true ? ' or the House scope' : ''}. No contact has been loaded.</div>}
-        {loading && <div className="panel panel-pad dim">Loading selected scope…</div>}{error && <div className="form-alert" role="alert">{error}</div>}
-        {scope && response && <div className="panel panel-pad dns-contact-card"><div className="dns-contact-status"><h2>{scope.kind === 'house' ? 'House registrant' : scope.group.name}</h2><div className="chip-row"><Badge tone={response.source === 'database' ? 'success' : response.inherited ? 'warning' : 'muted'}>{response.source === 'database' ? 'Direct database contact' : response.inherited ? 'Inherited (values hidden)' : response.source === 'settings_file' ? 'Deployment file' : 'Not configured'}</Badge><Badge tone={response.effective_configured ? 'success' : 'danger'}>{response.effective_configured ? 'Effective contact ready' : 'Purchase blocked'}</Badge></div></div>{response.inherited && <p className="form-alert">A contact is inherited, but its values are intentionally not disclosed. Saving creates this group’s own contact from the blank form.</p>}{response.source === 'settings_file' && <p className="form-alert">The House contact comes from deployment configuration. Saving creates a database override; the file values are shown for editing but opaque extension fields are not copied.</p>}<div className="form-grid">{CONTACT_STRING_FIELDS.map((key) => <div key={key} className={['AddressLine1', 'AddressLine2', 'OrganizationName'].includes(key) ? 'col-12' : 'col-6'}><label className="field"><span className="field-label">{LABELS[key]}</span>{key === 'ContactType' ? <select className="input" value={String(draft[key] ?? '')} disabled={busy} onChange={(event) => setDraft((value) => ({ ...value, [key]: event.target.value }))}><option value="">Select…</option>{['PERSON', 'COMPANY', 'ASSOCIATION', 'PUBLIC_BODY', 'RESELLER'].map((value) => <option key={value}>{value}</option>)}</select> : <input className="input" type={key === 'Email' ? 'email' : 'text'} value={String(draft[key] ?? '')} disabled={busy} onChange={(event) => setDraft((value) => ({ ...value, [key]: event.target.value }))} />}</label></div>)}</div>{response.problems.length > 0 && <div className="form-alert">{response.problems.join('; ')}</div>}<div className="modal-actions">{response.source === 'database' && <button className="btn btn-danger" disabled={busy} onClick={() => void clear()}>Clear this scope</button>}<button className="btn btn-primary" disabled={busy} onClick={() => void save()}>{busy ? 'Saving…' : 'Save contact'}</button></div></div>}
+    if (!canManage) return <div className="modal-pad dim" role="status">DNS management permission is required to manage registrant contacts.</div>;
+    const fields = (address: boolean) => <div className="form-grid">{CONTACT_STRING_FIELDS.filter(key => ADDRESS.has(key) === address).map(key => <div key={key} className={['AddressLine1', 'AddressLine2', 'OrganizationName'].includes(key) ? 'col-12' : 'col-6'}><label className="field"><span className="field-label">{LABELS[key]}{REQUIRED.has(key) && <em> *</em>}{key === 'PhoneNumber' && <OperationsHelp label="phone number">Use the international format +country.number, for example +1.2065550123.</OperationsHelp>}</span>{key === 'ContactType' ? <select className="input" value={String(draft[key] ?? '')} disabled={busy} onChange={event => setDraft(value => ({ ...value, [key]: event.target.value }))}><option value="">Select…</option>{['PERSON', 'COMPANY', 'ASSOCIATION', 'PUBLIC_BODY', 'RESELLER'].map(value => <option key={value}>{value}</option>)}</select> : <input className="input" aria-label={key === 'PhoneNumber' ? 'Phone number' : undefined} type={key === 'Email' ? 'email' : 'text'} value={String(draft[key] ?? '')} disabled={busy} onChange={event => setDraft(value => ({ ...value, [key]: event.target.value }))} />}</label></div>)}</div>;
+    return <div className={lockScope ? 'modal-pad dns-registrant-scoped' : 'dns-registrant-page'}>
+        <div className={lockScope ? 'dns-registrant-head' : 'panel panel-pad dns-registrant-head'}><div>{!lockScope && <div className="eyebrow">Infrastructure · DNS</div>}{lockScope ? <h2 className="modal-title">Registrant contact</h2> : <h1>Registrant Contact</h1>}<p className="dim">{lockScope ? initialGroup?.name : 'Choose whose contact to manage.'} <OperationsHelp label="registrant contact">The registrar requires accurate contact details to register a domain. Contact values are loaded only for the selected scope and remain in this open form.</OperationsHelp></p></div>{!lockScope && <div className="dns-scope-picker"><CollectionSelect<DnsGroupChoice> endpoint={DNS_GROUP_CHOICE_ENDPOINT} value={scope?.kind === 'group' ? scope.group : null} onChange={(_id, row) => void choose(row ? { kind: 'group', group: row } : null)} label="Group scope" placeholder="Search eligible groups…" maxItems={25} disabled={busy} defaultParams={{ start: 0 }} />{me?.is_superuser === true && <button className={`btn${scope?.kind === 'house' ? ' btn-primary' : ''}`} disabled={busy} onClick={() => void choose({ kind: 'house' })}><i className="bi bi-house" /> House contact</button>}</div>}</div>
+        {loading && <p className="dim" role="status">Loading contact…</p>}{error && <div className="form-alert" role="alert">{error}</div>}{notice && <p role="status">{notice}</p>}
+        {response && scope && <div className={lockScope ? 'dns-contact-card' : 'panel panel-pad dns-contact-card'}>
+            <div className="dns-contact-status"><Badge tone={response.effective_configured ? 'success' : 'warning'}>{response.effective_configured ? 'Ready for purchase' : 'Contact required'}</Badge><OperationsHelp label="contact source">{response.source === 'database' ? 'This scope has its own saved contact.' : response.inherited ? 'An inherited contact applies. Its values are hidden. Saving this form creates a separate contact for this group.' : response.source === 'settings_file' ? 'This contact comes from deployment configuration. Saving creates an override.' : 'No contact is configured.'}</OperationsHelp></div>
+            <Tabs ariaLabel="Registrant details" activeKey={tab} onActiveKeyChange={setTab} items={[{ key: 'contact', label: 'Contact', panel: fields(false) }, { key: 'address', label: 'Address', panel: fields(true) }]} />
+            {response.problems.length > 0 && <div className="form-alert">{response.problems.join('; ')}</div>}
+            <div className="modal-actions">{response.source === 'database' && <button className="btn btn-danger" disabled={busy} onClick={() => void clear()}>Clear this scope</button>}{onClose && <button className="btn" disabled={busy} onClick={onClose}>Close</button>}<button className="btn btn-primary" disabled={busy} onClick={() => void save()}>{busy ? 'Saving…' : 'Save contact'}</button></div>
+        </div>}{!response && onClose && <div className="modal-actions"><button className="btn" disabled={busy} onClick={onClose}>Close</button></div>}
     </div>;
 }

package/src/admin/dns/api.ts

@@ -181,32 +181,33 @@ export interface LinkDnsCredentialInput {
     api_secret: string;
 }
 
-async function submitCredential(body: Record<string, unknown>): Promise<DnsCredentialRow> {
-    const response = await withFreshAuth(() => mojoCall('/api/dnsman/credential/link', {
-        method: 'POST', body,
-    }));
+async function submitCredential(body: Record<string, unknown>, beforeSend?: () => void): Promise<DnsCredentialRow> {
+    const response = await withFreshAuth(() => { return mojoCall('/api/dnsman/credential/link', {
+        method: 'POST', body, beforeSend,
+    }); });
     return sanitizeDnsCredentialRow(response.data as DnsCredentialRow);
 }
 
-export async function linkDnsCredential(input: LinkDnsCredentialInput): Promise<DnsCredentialRow> {
+export async function linkDnsCredential(input: LinkDnsCredentialInput, beforeSend?: () => void): Promise<DnsCredentialRow> {
     if (!Number.isInteger(input.group) || input.group < 1) throw new Error('Choose a group');
-    return submitCredential({ ...input });
+    return submitCredential({ ...input }, beforeSend);
 }
 
 export async function rotateDnsCredential(
     row: DnsCredentialRow,
     input: Pick<LinkDnsCredentialInput, 'name' | 'api_key' | 'api_secret'>,
+    beforeSend?: () => void,
 ): Promise<DnsCredentialRow> {
     const group = typeof row.group === 'number' ? row.group : row.group?.id;
     if (!group) throw new Error('This credential has no valid group');
     return submitCredential({
         group, provider: row.provider, credential: row.id,
         name: input.name ?? row.name, api_key: input.api_key, api_secret: input.api_secret,
-    });
+    }, beforeSend);
 }
 
-async function postData<T>(path: string, body: Record<string, unknown>): Promise<T> {
-    return (await mojoCall(path, { method: 'POST', body })).data as T;
+async function postData<T>(path: string, body: Record<string, unknown>, beforeSend?: () => void): Promise<T> {
+    return (await mojoCall(path, { method: 'POST', body, beforeSend })).data as T;
 }
 
 export function searchRegistrar(domain: string): Promise<RegistrarSearchRow> {
@@ -222,14 +223,14 @@ export function suggestRegistrar(input: { domain: string; count?: number; only_a
 }
 
 /** Returns a one-use token; consumers must keep it transient and uncached. */
-export function quoteDomain(input: { group: number; domain: string; years?: number }): Promise<RegistrarQuote> {
-    return postData('/api/dnsman/registrar/quote', input);
+export function quoteDomain(input: { group: number; domain: string; years?: number }, beforeSend?: () => void): Promise<RegistrarQuote> {
+    return postData('/api/dnsman/registrar/quote', input, beforeSend);
 }
 
-export async function purchaseDomain(input: { group: number; purchase: number; confirm_token: string; confirm_domain: string; confirm_price: string }): Promise<RegistrarPurchaseResult> {
+export async function purchaseDomain(input: { group: number; purchase: number; confirm_token: string; confirm_domain: string; confirm_price: string }, beforeSend?: () => void): Promise<RegistrarPurchaseResult> {
     // Snapshot once: the safe 440 continuation must use the identical quote.
     const body = Object.freeze({ ...input });
-    return sanitizePurchaseResult(await withFreshAuth(() => postData('/api/dnsman/registrar/purchase', body)));
+    return sanitizePurchaseResult(await withFreshAuth(() => postData('/api/dnsman/registrar/purchase', body, beforeSend)));
 }
 
 /** Detail and its error remain modal-local; neither enters Query cache. */
@@ -238,23 +239,23 @@ export async function fetchPurchaseDetail(id: number): Promise<DomainPurchaseRow
     return sanitizeDomainPurchaseRow(response.data);
 }
 
-export async function fetchRegistrantContact(group: number | null): Promise<RegistrantContactResponse> {
-    const response = await mojoCall('/api/dnsman/registrant', { ...(group == null ? {} : { params: { group } }) });
+export async function fetchRegistrantContact(group: number | null, beforeSend?: () => void): Promise<RegistrantContactResponse> {
+    const response = await mojoCall('/api/dnsman/registrant', { beforeSend, ...(group == null ? {} : { params: { group } }) });
     return sanitizeRegistrantResponse(response.data);
 }
 
-export async function saveRegistrantContact(contact: RegistrantContact, group: number | null = null): Promise<RegistrantContactResponse> {
-    const response = await mojoCall('/api/dnsman/registrant', { method: 'POST', body: { ...(group == null ? {} : { group }), contact } });
+export async function saveRegistrantContact(contact: RegistrantContact, group: number | null = null, beforeSend?: () => void): Promise<RegistrantContactResponse> {
+    const response = await mojoCall('/api/dnsman/registrant', { method: 'POST', beforeSend, body: { ...(group == null ? {} : { group }), contact } });
     return sanitizeRegistrantResponse(response.data);
 }
 
-export async function clearRegistrantContact(group: number | null): Promise<RegistrantContactResponse> {
-    const response = await mojoCall('/api/dnsman/registrant', { method: 'POST', body: { ...(group == null ? {} : { group }), clear: true } });
+export async function clearRegistrantContact(group: number | null, beforeSend?: () => void): Promise<RegistrantContactResponse> {
+    const response = await mojoCall('/api/dnsman/registrant', { method: 'POST', beforeSend, body: { ...(group == null ? {} : { group }), clear: true } });
     return sanitizeRegistrantResponse(response.data);
 }
 
-export async function registerExistingDomain(input: { group: number; domain: string; credential: number }): Promise<DomainRow> {
-    return sanitizeDomainRow(await postData<DomainRow>('/api/dnsman/registrar/register-existing', input));
+export async function registerExistingDomain(input: { group: number; domain: string; credential: number }, beforeSend?: () => void): Promise<DomainRow> {
+    return sanitizeDomainRow(await postData<DomainRow>('/api/dnsman/registrar/register-existing', input, beforeSend));
 }
 
 export async function discoverHouseDomains(untracked = false): Promise<RegistrarDiscoveryResponse> {
@@ -262,12 +263,12 @@ export async function discoverHouseDomains(untracked = false): Promise<Registrar
     return sanitizeRegistrarDiscoveryResponse(response.data);
 }
 
-export async function adoptHouseDomain(input: { domain: string; group?: number; create_zone?: boolean }): Promise<DomainRow> {
-    return sanitizeDomainRow(await postData<DomainRow>('/api/dnsman/registrar/adopt', input));
+export async function adoptHouseDomain(input: { domain: string; group?: number; create_zone?: boolean }, beforeSend?: () => void): Promise<DomainRow> {
+    return sanitizeDomainRow(await postData<DomainRow>('/api/dnsman/registrar/adopt', input, beforeSend));
 }
 
-export async function assignHouseDomain(input: { domain: number; group: number }): Promise<DomainRow> {
-    return sanitizeDomainRow(await postData<DomainRow>('/api/dnsman/registrar/assign-group', input));
+export async function assignHouseDomain(input: { domain: number; group: number }, beforeSend?: () => void): Promise<DomainRow> {
+    return sanitizeDomainRow(await postData<DomainRow>('/api/dnsman/registrar/assign-group', input, beforeSend));
 }
 
 export function parseDnsRecordSetResponse(value: unknown): DnsRecordSetResponse {

package/src/admin/dns/domain-authority.ts

@@ -0,0 +1,11 @@
+import { getAuthSessionRevision, getAuthSnapshot, hasPermission, mojoGet, type Me } from '../../client/runtime';
+import { DNS_MANAGE_PERMISSIONS } from './models';
+
+export const domainSession = () => `${getAuthSnapshot().uid}:${getAuthSessionRevision()}`;
+
+/** Check the current interactive authority immediately before an onboarding write. */
+export async function requireDomainManager(session: string, platform = false): Promise<void> {
+    if (domainSession() !== session || !getAuthSnapshot().authenticated) throw new Error('Session changed. Reopen this task.');
+    const me = await mojoGet<Me>('/api/user', 'me');
+    if (domainSession() !== session || !hasPermission(me, DNS_MANAGE_PERMISSIONS, null) || platform && me.is_superuser !== true) throw new Error('DNS authority changed. Reopen this task.');
+}

package/src/admin/dns/index.ts

@@ -3,12 +3,12 @@ import './setup';
 export * from './models';
 export * from './api';
 export * from './data';
-export * from './ProviderCredentialsPage';
+export { ProviderCredentialsPage, dnsCredentialGroupId } from './ProviderCredentialsPage';
 export * from './dns-data';
 export * from './dns-integration';
 export * from './domain-links';
 export * from './DomainsPage';
-export * from './DomainDetail';
+export { DomainDetail } from './DomainDetail';
 export * from './DnsRecordsPage';
 export * from './DnsRecordsPanel';
 export * from './DnsRecordEditor';

package/src/admin/dns/purchase-data.ts

@@ -32,9 +32,9 @@ export function decimalTupleEqual(left: string | number, right: string | number)
     return a != null && b != null && a === b;
 }
 
-export interface QuoteIdentity { purchase: number; group: number; domain: string; years: number; price: string; currency: string; expires: number }
+export interface QuoteIdentity { purchase: number; group: number; domain: string; years: number; price: string; currency: string; expires: number; privacy_supported: boolean }
 export function quoteIdentity(quote: RegistrarQuote, group: number): QuoteIdentity {
-    return { purchase: quote.purchase, group, domain: normalizePurchaseDomain(quote.name), years: quote.years, price: String(quote.price), currency: quote.currency, expires: quote.expires };
+    return { purchase: quote.purchase, group, domain: normalizePurchaseDomain(quote.name), years: quote.years, price: String(quote.price), currency: quote.currency, expires: quote.expires, privacy_supported: quote.privacy_supported };
 }
 export function quoteMatches(identity: QuoteIdentity, input: { group: number; domain: string; years: number; price: string | number; currency: string }, now = Date.now() / 1000): boolean {
     return identity.group === input.group && identity.domain === normalizePurchaseDomain(input.domain) && identity.years === input.years
@@ -50,7 +50,7 @@ export function redactRegistrarError(error: unknown): string {
 
 export function sanitizePurchaseResult(value: unknown): RegistrarPurchaseResult {
     const row = value && typeof value === 'object' && !Array.isArray(value) ? value as Record<string, unknown> : {};
-    if (!Number.isInteger(row.purchase) || !Number.isInteger(row.domain) || typeof row.name !== 'string' || typeof row.status !== 'string') throw new Error('Registrar returned a malformed purchase acknowledgement');
+    if (!Number.isInteger(row.purchase) || Number(row.purchase) <= 0 || !Number.isInteger(row.domain) || Number(row.domain) <= 0 || typeof row.name !== 'string' || typeof row.status !== 'string') throw new Error('Registrar returned a malformed purchase acknowledgement');
     return { purchase: Number(row.purchase), domain: Number(row.domain), name: normalizePurchaseDomain(row.name), status: row.status.slice(0, 32), operation_id: typeof row.operation_id === 'string' ? row.operation_id.slice(0, 128) : null, privacy: row.privacy === true, privacy_downgraded: row.privacy_downgraded === true };
 }
 
@@ -61,6 +61,8 @@ export async function pollPurchaseLedger(options: { purchase: number; fetch: (id
         if (delay) await new Promise((resolve) => setTimeout(resolve, delay));
         if (options.isCurrent?.() === false) return null;
         const row = await options.fetch(options.purchase);
+        if (options.isCurrent?.() === false) return null;
+        if (row.id !== options.purchase) throw new Error('The ledger response did not match this purchase');
         if (purchaseTerminal(row)) return row;
     }
     return null;

package/src/admin/dns/registrar-api.ts

@@ -1,13 +1,59 @@
 import { mojoCall } from '../../client/runtime';
-import { sanitizeDomainRow, type DomainRow } from './models';
-
-/** Registrar writes are deliberately narrower than the generic model surface. */
-export async function saveDomainRegistrarSettings(id: number, changes: Partial<Pick<DomainRow, 'auto_renew' | 'privacy'>>): Promise<void> {
-    if (Object.keys(changes).length === 0 || Object.entries(changes).some(([key, value]) => !['auto_renew', 'privacy'].includes(key) || typeof value !== 'boolean')) throw new Error('Only changed boolean registrar settings may be saved');
-    await mojoCall(`/api/dnsman/domain/${id}`, { method: 'POST', body: { ...changes } });
-}
-
-/** Authoritative uncached read after every attempted registrar write. */
-export async function fetchDomainOverview(id: number): Promise<DomainRow> {
-    return sanitizeDomainRow((await mojoCall(`/api/dnsman/domain/${id}`)).data);
+import { sanitizeDomainRow, type DomainRow, type RegistrantContact } from './models';
+import { CONTACT_STRING_FIELDS, validateContactDraft } from './registrant-data';
+export interface RegistrationRequest { signal?: AbortSignal; beforeSend?: () => void }
+export interface DomainRegistration {
+    name: string; registrar: string | null; auto_renew: boolean | null;
+    privacy: boolean | null; admin_privacy: boolean | null; registrant_privacy: boolean | null; tech_privacy: boolean | null;
+    privacy_supported: boolean | null; expires: number | string | null;
+    registrant: RegistrantContact; admin: RegistrantContact; tech: RegistrantContact;
+}
+const object = (value: unknown): Record<string, unknown> => value && typeof value === 'object' && !Array.isArray(value) ? value as Record<string, unknown> : {};
+const bool = (value: unknown) => typeof value === 'boolean' ? value : null;
+const name = (value: string) => value.toLowerCase().replace(/\.+$/, '');
+export function registrationAuthority(registrar: string | null): 'route53' | 'godaddy' | 'unknown' {
+    const value = (registrar ?? '').toLowerCase().replace(/[^a-z0-9]/g, '');
+    if (['amazonregistrarinc', 'amazonregistrar', 'route53', 'amazonroute53'].includes(value)) return 'route53';
+    if (value.startsWith('godaddy')) return 'godaddy';
+    return 'unknown';
+}
+export function registrationContact(value: unknown): RegistrantContact {
+    const source = object(value), contact: RegistrantContact = {};
+    for (const key of CONTACT_STRING_FIELDS) if (typeof source[key] === 'string') contact[key] = source[key].slice(0, 500);
+    if (Array.isArray(source.ExtraParams)) contact.ExtraParams = source.ExtraParams.slice(0, 25).flatMap(value => {
+        const entry = object(value);
+        return typeof entry.Name === 'string' && typeof entry.Value === 'string' ? [{ Name: entry.Name.slice(0, 100), Value: entry.Value.slice(0, 500) }] : [];
+    });
+    return contact;
+}
+export async function fetchDomainRegistration(domain: Pick<DomainRow, 'id' | 'name'>, options: RegistrationRequest = {}): Promise<DomainRegistration> {
+    const row = object((await mojoCall('/api/dnsman/whois', { ...options, unscoped: true, params: { domain: domain.id } })).data);
+    options.beforeSend?.();
+    if (typeof row.name !== 'string' || name(row.name) !== name(domain.name)) throw new Error('Registration identity changed');
+    return { name: domain.name, registrar: typeof row.registrar === 'string' ? row.registrar.slice(0, 200) : null,
+        auto_renew: bool(row.auto_renew), privacy: bool(row.privacy), admin_privacy: bool(row.admin_privacy), registrant_privacy: bool(row.registrant_privacy), tech_privacy: bool(row.tech_privacy), privacy_supported: bool(row.privacy_supported),
+        expires: typeof row.expires === 'number' || typeof row.expires === 'string' ? row.expires : null,
+        registrant: registrationContact(row.registrant), admin: registrationContact(row.admin), tech: registrationContact(row.tech) };
+}
+/** The generic model hook is best-effort; only a subsequent WHOIS read is live evidence. */
+export async function saveDomainRegistrarSettings(id: number, changes: Partial<Pick<DomainRow, 'auto_renew' | 'privacy'>>, options: RegistrationRequest = {}): Promise<void> {
+    if (!Object.keys(changes).length || Object.entries(changes).some(([key, value]) => !['auto_renew', 'privacy'].includes(key) || typeof value !== 'boolean')) throw new Error('Only changed boolean registrar settings may be saved');
+    await mojoCall(`/api/dnsman/domain/${id}`, { ...options, unscoped: true, method: 'POST', body: { ...changes } }); options.beforeSend?.();
+}
+async function registrarOperation(domain: Pick<DomainRow, 'id' | 'name'>, path: string, body: Record<string, unknown>, options: RegistrationRequest): Promise<string> {
+    const row = object((await mojoCall(path, { ...options, unscoped: true, method: 'POST', body: { domain: domain.id, ...body } })).data);
+    options.beforeSend?.();
+    if (typeof row.name !== 'string' || name(row.name) !== name(domain.name) || typeof row.operation_id !== 'string' || !row.operation_id) throw new Error('Registrar receipt could not be confirmed');
+    return row.operation_id.slice(0, 200);
+}
+export const saveRegistrationPrivacy = (domain: Pick<DomainRow, 'id' | 'name'>, enabled: boolean, options: RegistrationRequest = {}) => registrarOperation(domain, '/api/dnsman/whois/privacy', { enabled }, options);
+export function saveRegistrationContacts(domain: Pick<DomainRow, 'id' | 'name'>, contact: RegistrantContact, options: RegistrationRequest = {}) {
+    const safe = registrationContact(contact);
+    if (validateContactDraft(safe).length) throw new Error('Complete the required contact and address fields');
+    return registrarOperation(domain, '/api/dnsman/whois', { contact: safe }, options);
+}
+/** Safe model projection: no registrar PII enters the model cache. */
+export async function fetchDomainOverview(id: number, options: RegistrationRequest = {}): Promise<DomainRow> {
+    const row = sanitizeDomainRow((await mojoCall(`/api/dnsman/domain/${id}`, { ...options, unscoped: true, params: { graph: 'default' } })).data);
+    options.beforeSend?.(); if (row.id !== id) throw new Error('Domain identity changed'); return row;
 }

package/src/admin/domains/infrastructure.ts

@@ -5,18 +5,18 @@ import { BUCKET_MANAGE_PERMS, STORAGE_VIEW_PERMS } from '../storage/permissions'
 import { SETTINGS_PERMISSIONS } from '../settings/model';
 
 export const DNS_ADMIN_SECTION: AdminSection = {
-    id: 'dns', title: 'DNS', icon: 'bi-globe2', navigationGroup: 'infrastructure', basePath: 'dns', permissions: DNS_VIEW_PERMISSIONS,
+    id: 'dns', title: 'DNS', icon: 'bi-globe2', navigationGroup: 'hosting', basePath: 'dns', permissions: DNS_VIEW_PERMISSIONS,
     routes: [
         { path: 'domains', label: 'Domains', loadComponent: () => import('../dns/DomainsPage').then(namedPage('DomainsPage')), permissions: DNS_VIEW_PERMISSIONS },
-        { path: 'records', label: 'DNS Records', loadComponent: () => import('../dns/DnsRecordsPage').then(namedPage('DnsRecordsPage')), permissions: DNS_VIEW_PERMISSIONS },
+        { path: 'records', label: 'DNS Records', searchOnly: true, loadComponent: () => import('../dns/DnsRecordsPage').then(namedPage('DnsRecordsPage')), permissions: DNS_VIEW_PERMISSIONS },
         { path: 'certificates', label: 'Certificates', loadComponent: () => import('../dns/CertificatesPage').then(namedPage('CertificatesPage')), permissions: DNS_VIEW_PERMISSIONS },
-        { path: 'purchases', label: 'Domain Purchases', loadComponent: () => import('../dns/DomainPurchasesPage').then(namedPage('DomainPurchasesPage')), permissions: DNS_VIEW_PERMISSIONS },
-        { path: 'registrant', label: 'Registrant Contact', loadComponent: () => import('../dns/RegistrantContactPage').then(namedPage('RegistrantContactPage')), permissions: DNS_MANAGE_PERMISSIONS },
-        { path: 'credentials', label: 'Provider Credentials', loadComponent: () => import('../dns/ProviderCredentialsPage').then(namedPage('ProviderCredentialsPage')), permissions: DNS_VIEW_PERMISSIONS },
+        { path: 'purchases', label: 'Domain Purchases', searchOnly: true, loadComponent: () => import('../dns/DomainPurchasesPage').then(namedPage('DomainPurchasesPage')), permissions: DNS_VIEW_PERMISSIONS },
+        { path: 'registrant', label: 'Registrant Contact', searchOnly: true, loadComponent: () => import('../dns/RegistrantContactPage').then(namedPage('RegistrantContactPage')), permissions: DNS_MANAGE_PERMISSIONS },
+        { path: 'credentials', label: 'Provider Credentials', searchOnly: true, loadComponent: () => import('../dns/ProviderCredentialsPage').then(namedPage('ProviderCredentialsPage')), permissions: DNS_VIEW_PERMISSIONS },
     ],
 };
 export const STORAGE_ADMIN_SECTION: AdminSection = {
-    id: 'storage', basePath: 'storage', title: 'Storage', icon: 'bi-hdd-stack', navigationGroup: 'infrastructure', permissions: ['sys.view_fileman', 'sys.manage_files', 'sys.manage_aws', 'sys.files', ...SETTINGS_PERMISSIONS],
+    id: 'storage', basePath: 'storage', title: 'Storage', icon: 'bi-hdd-stack', navigationGroup: 'storage', permissions: ['sys.view_fileman', 'sys.manage_files', 'sys.manage_aws', 'sys.files', ...SETTINGS_PERMISSIONS],
     routes: [
         { path: 'buckets', label: 'Buckets', loadComponent: () => import('../storage/BucketsPage').then(namedPage('BucketsPage')), permissions: BUCKET_MANAGE_PERMS },
         { path: 'backends', label: 'Backends', loadComponent: () => import('../storage/BackendsPage').then(namedPage('BackendsPage')), permissions: STORAGE_VIEW_PERMS },
@@ -26,10 +26,10 @@ export const STORAGE_ADMIN_SECTION: AdminSection = {
     ],
 };
 export const EDGE_ADMIN_SECTION: AdminSection = {
-    id: 'edge', basePath: 'edge', title: 'Edge', icon: 'bi-hdd-network', navigationGroup: 'infrastructure', permissions: DNS_VIEW_PERMISSIONS,
+    id: 'edge', basePath: 'edge', title: 'Edge', icon: 'bi-hdd-network', navigationGroup: 'hosting', permissions: DNS_VIEW_PERMISSIONS,
     routes: [
         { path: 'vhosts', label: 'Serving', loadComponent: () => import('../edge/VhostsPage').then(namedPage('VhostsPage')), permissions: DNS_VIEW_PERMISSIONS },
-        { path: 'upstreams', label: 'Upstreams', loadComponent: () => import('../edge/UpstreamsPage').then(namedPage('UpstreamsPage')), permissions: DNS_VIEW_PERMISSIONS },
+        { path: 'upstreams', label: 'Upstreams', searchOnly: true, loadComponent: () => import('../edge/UpstreamsPage').then(namedPage('UpstreamsPage')), permissions: DNS_VIEW_PERMISSIONS },
     ],
 };
 export const FLEET_ADMIN_SECTION: AdminSection = {

package/src/admin/domains/operations.ts

@@ -6,7 +6,7 @@ import { SETTINGS_PERMISSIONS } from '../settings/model';
 const navigationGroup = 'operations';
 
 export const SETTINGS_ADMIN_SECTION: AdminSection = {
-    id: 'settings', title: 'Settings', icon: 'bi-gear', navigationGroup, permissions: SETTINGS_PERMISSIONS,
+    id: 'settings', title: 'Settings', icon: 'bi-gear', navigationGroup: 'configuration', permissions: SETTINGS_PERMISSIONS,
     routes: [{ path: '', loadComponent: () => import('../settings/SettingsPage').then(namedPage('SettingsPage')), permissions: SETTINGS_PERMISSIONS }],
 };
 // Empty any-of permissions admit only the existing literal-superuser bypass.
@@ -14,14 +14,14 @@ export const SETTINGS_ADMIN_SECTION: AdminSection = {
 export const FLEET_CONFIGURATION_ADMIN_SECTION: AdminSection = {
     id: 'fleet-configuration', title: 'Fleet Configuration', icon: 'bi-hdd-network',
     navigationGroup, permissions: [],
-    routes: ['', 'shared-validation'].map((path) => ({ path, requireSuperuser: true, loadComponent: () => import('../fleet-configuration/FleetConfigurationPage').then(namedPage('FleetConfigurationPage')) })),
+    routes: ['', 'shared-validation'].map((path) => ({ path, ...(path === '' ? { label: 'Fleet Configuration', searchOnly: true } : {}), requireSuperuser: true, loadComponent: () => import('../fleet-configuration/FleetConfigurationPage').then(namedPage('FleetConfigurationPage')) })),
 };
 export const JOBS_ADMIN_SECTION: AdminSection = {
     id: 'jobs', title: 'Jobs', icon: 'bi-cpu', navigationGroup, permissions: [...new Set([...JOBS_VIEW_PERMS, ...SCHEDULED_TASK_VIEW_PERMS])],
     routes: [
-        { path: '', label: 'Dashboard', loadComponent: () => import('../jobs/JobDashboardPage').then(namedPage('JobDashboardPage')), permissions: JOBS_VIEW_PERMS },
-        { path: 'runners', label: 'Runners', loadComponent: () => import('../jobs/JobRunnersPage').then(namedPage('JobRunnersPage')), permissions: JOBS_VIEW_PERMS },
-        { path: 'list', label: 'Jobs', loadComponent: () => import('../jobs/JobsTablePage').then(namedPage('JobsTablePage')), permissions: JOBS_VIEW_PERMS },
+        { path: '', label: 'Jobs Dashboard', loadComponent: () => import('../jobs/JobDashboardPage').then(namedPage('JobDashboardPage')), permissions: JOBS_VIEW_PERMS },
+        { path: 'runners', label: 'Job Runners', searchOnly: true, loadComponent: () => import('../jobs/JobRunnersPage').then(namedPage('JobRunnersPage')), permissions: JOBS_VIEW_PERMS },
+        { path: 'list', label: 'Jobs', searchOnly: true, loadComponent: () => import('../jobs/JobsTablePage').then(namedPage('JobsTablePage')), permissions: JOBS_VIEW_PERMS },
         { path: 'scheduled-tasks', label: 'Scheduled Tasks', loadComponent: () => import('../jobs/ScheduledTasksPage').then(namedPage('ScheduledTasksPage')), permissions: SCHEDULED_TASK_VIEW_PERMS },
     ],
 };
@@ -36,7 +36,7 @@ export const MAINTENANCE_ADMIN_SECTION: AdminSection = {
     routes: [{ path: '', label: 'Maintenance', loadComponent: () => import('../maintenance/MaintenancePage').then(namedPage('MaintenancePage')) }],
 };
 export const GEOLOCATION_ADMIN_SECTION: AdminSection = {
-    id: 'geolocation', title: 'GeoLocation', icon: 'bi-geo-alt', navigationGroup, permissions: [],
+    id: 'geolocation', title: 'GeoLocation', icon: 'bi-geo-alt', navigationGroup: 'configuration', permissions: [],
     routes: [{ path: '', label: 'GeoLocation', requireSuperuser: true, loadComponent: () => import('../geolocation/GeoLocationPage').then(namedPage('GeoLocationPage')) }],
 };
 export const OPERATIONS_ADMIN_SECTIONS = [SETTINGS_ADMIN_SECTION, FLEET_CONFIGURATION_ADMIN_SECTION, JOBS_ADMIN_SECTION, MAINTENANCE_ADMIN_SECTION, DEPLOYMENTS_ADMIN_SECTION, GEOLOCATION_ADMIN_SECTION] as const;

package/src/admin/edge/VhostsPage.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import { Link, useLocation } from 'react-router-dom';
+import { useAdminRouteContext } from '../core/route-context';
 import { Badge, CollectionSelect, ModelTable, modal, toast, type Column, type FilterDef } from '../../ui';
 import { getAuthSessionRevision, useAuthSnapshot, useCan, useTableParams } from '../../client/runtime';
 import { DomainModel, type DomainRow } from '../dns/models';
@@ -19,6 +21,9 @@ const FILTERS: FilterDef[] = [
 ];
 
 export function VhostsPage() {
+    const route = useAdminRouteContext(), location = useLocation();
+    const upstreams = location.pathname === '/' ? '/edge/upstreams' : `${location.pathname.replace(/\/[^/]+\/?$/, '')}/upstreams`;
+    const upstreamsMounted = !route || route.paths.includes(upstreams);
     const queryClient = useQueryClient();
     const [revision, setRevision] = useState(0);
     const changed = () => setRevision(value => value + 1);
@@ -42,5 +47,5 @@ export function VhostsPage() {
         const saved = await openVhostWizard(null, { signal });
         if (saved && !signal?.aborted) { changed(); toast.success(`${saved.server_name ?? 'Hostname'} configuration saved${saved.is_enabled ? ', enabled intent' : ', disabled'}.`); await open(saved); }
     };
-    return <div className="edge-serving-page"><header className="page-header edge-serving-heading"><div><div className="eyebrow">Network &amp; hosting</div><h1>Serving</h1><ServingReadiness refreshRevision={revision} /></div>{canManage && <button type="button" className="btn btn-primary" onClick={() => void create()}><i className="bi bi-plus-lg" /> Add hostname</button>}</header><div className="edge-domain-filter"><CollectionSelect<DomainRow> model={DomainModel} value={domain ? Number(domain) : null} label="Domain" placeholder="All domains" defaultParams={{ sort: 'name' }} onChange={id => params.setFilter('domain', id == null ? null : String(id))} /></div><ModelTable<EdgeVhostRow> model={EdgeVhostModel} title="Hostnames" searchable searchPlaceholder="Search label, type or pool" columns={COLUMNS} filters={FILTERS} defaultSort="label" columnChooser persistState persistKey="admin:edge:vhosts" onRowClick={row => void open(row)} /></div>;
+    return <div className="edge-serving-page"><header className="page-header edge-serving-heading"><div><div className="eyebrow">Network &amp; hosting</div><h1>Serving</h1><ServingReadiness refreshRevision={revision} /></div><div className="edge-serving-actions">{upstreamsMounted && <Link className="btn" to={upstreams}>Upstreams</Link>}{canManage && <button type="button" className="btn btn-primary" onClick={() => void create()}><i className="bi bi-plus-lg" /> Add hostname</button>}</div></header><div className="edge-domain-filter"><CollectionSelect<DomainRow> model={DomainModel} value={domain ? Number(domain) : null} label="Domain" placeholder="All domains" defaultParams={{ sort: 'name' }} onChange={id => params.setFilter('domain', id == null ? null : String(id))} /></div><ModelTable<EdgeVhostRow> model={EdgeVhostModel} title="Hostnames" searchable searchPlaceholder="Search label, type or pool" columns={COLUMNS} filters={FILTERS} defaultSort="label" columnChooser persistState persistKey="admin:edge:vhosts" onRowClick={row => void open(row)} /></div>;
 }

package/src/admin/jobs/JobDashboardPage.tsx

@@ -8,7 +8,10 @@
 // returning), and web-mojo's JobHealthView — the only consumer — was never
 // mounted. Stats already carries channels, runners, totals and the scheduler.
 import { useQueryClient } from '@tanstack/react-query';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { hasPermission, useMe } from '../../client/runtime';
+import { useAdminRouteContext } from '../core/route-context';
+import { JOBS_VIEW_PERMS, SCHEDULED_TASK_VIEW_PERMS } from './models';
 import { KPITile } from '../../charts';
 import { JobChannelsPanel } from './sections/JobChannelsPanel';
 import { JobOperationsSection } from './sections/JobOperationsSection';
@@ -21,18 +24,24 @@ export function JobDashboardPage() {
     const stats = useJobStats();
     const channelOptions = useChannelOptions();
     const navigate = useNavigate();
+    const { data: me } = useMe();
+    const route = useAdminRouteContext();
     const location = useLocation();
+    const base = location.pathname.replace(/\/+$/, '') || '/jobs';
+    const related = [
+        { path: 'list', label: 'Jobs', permissions: JOBS_VIEW_PERMS },
+        { path: 'runners', label: 'Runners', permissions: JOBS_VIEW_PERMS },
+        { path: 'scheduled-tasks', label: 'Scheduled tasks', permissions: SCHEDULED_TASK_VIEW_PERMS },
+    ].filter(item => hasPermission(me ?? null, item.permissions, null) && (!route || route.paths.includes(`${base}/${item.path}`)));
 
     const totals = stats.data?.totals;
     const refreshAll = () => { void queryClient.invalidateQueries({ queryKey: jobsKeys.root }); };
 
     /**
      * Open the jobs table already filtered to a channel. The path is derived
-     * from the CURRENT location rather than hardcoded, because an admin
-     * section never knows whether it is mounted at the root or under /system.
+     * from this dashboard location, including custom embedded base paths.
      */
     const openChannel = (channel: string) => {
-        const base = location.pathname.replace(/\/+$/, '');
         navigate({ pathname: `${base}/list`, search: `?channel=${encodeURIComponent(channel)}` });
     };
 
@@ -65,6 +74,7 @@ export function JobDashboardPage() {
                     <i className={`bi bi-arrow-clockwise${stats.isFetching ? ' spin' : ''}`} /> Refresh
                 </button>
             </header>
+            {related.length > 0 && <nav className="jobs-page-links" aria-label="Job tools">{related.map(item => <Link className="btn btn-compact" key={item.path} to={`${base}/${item.path}`}>{item.label}</Link>)}</nav>}
 
             {stats.isError && (
                 <div className="panel jobs-note jobs-note-bad">