portal-mojo 0.2.21 → 0.2.22

package/src/admin/dns/DomainAssignment.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { hasPermission, useMe } from '../../client/runtime';
+import { CollectionSelect, FlatRow, modal, toast } from '../../ui';
+import { assignHouseDomain, DNS_GROUP_CHOICE_ENDPOINT, fetchDnsGroupChoice } from './api';
+import { domainSession, requireDomainManager } from './domain-authority';
+import { fetchDomainOverview } from './registrar-api';
+import { DNS_MANAGE_PERMISSIONS, DomainModel, type DnsGroupChoice, type DomainRow } from './models';
+import { redactRegistrarError } from './purchase-data';
+
+export function DomainAssignment({ domain, close, onBusyChange }: { domain: DomainRow; close: () => void; onBusyChange: (busy: boolean) => void }) {
+    const { data: me } = useMe(); const qc = useQueryClient();
+    const [group, setGroup] = useState<DnsGroupChoice | null>(null);
+    const [review, setReview] = useState(false); const [confirm, setConfirm] = useState('');
+    const [busy, setBusy] = useState(false); const [attempted, setAttempted] = useState(false); const [error, setError] = useState('');
+    const [observed, setObserved] = useState<DomainRow | null>(null);
+    const flight = useRef(false); const mounted = useRef(true); const session = useRef(domainSession());
+    useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
+    const allowed = me?.is_superuser === true && hasPermission(me, DNS_MANAGE_PERMISSIONS, null) && domain.group == null;
+    const refresh = async () => {
+        try { const row = await fetchDomainOverview(domain.id); if (!mounted.current || domainSession() !== session.current) return; setObserved(row); qc.setQueryData(DomainModel.keys.one(domain.id), row); }
+        catch { if (mounted.current) setError('Could not refresh the domain. Check its inventory before taking another action.'); }
+        finally { await DomainModel.invalidate(qc); }
+    };
+    const submit = async () => {
+        if (flight.current || attempted || !allowed || !group || !review || confirm !== group.name) return;
+        flight.current = true; setBusy(true); onBusyChange(true); setError('');
+        try {
+            await requireDomainManager(session.current, true);
+            const [current, target] = await Promise.all([fetchDomainOverview(domain.id), fetchDnsGroupChoice(group.id)]);
+            if (domainSession() !== session.current || !mounted.current) return;
+            if (current.group != null) { setObserved(current); setAttempted(true); throw new Error('This domain has already been assigned. Reassignment is unavailable.'); }
+            if (!target || target.name !== group.name) throw new Error('The destination changed. Close and choose it again.');
+            setAttempted(true);
+            const row = await assignHouseDomain({ domain: domain.id, group: group.id }, () => { if (!mounted.current || domainSession() !== session.current) throw new Error('Session changed. Reopen this task.'); });
+            if (domainSession() !== session.current || !mounted.current) return;
+            const owner = typeof row.group === 'number' ? row.group : row.group?.id;
+            if (row.id !== domain.id || owner !== group.id) throw new Error('The response did not confirm the selected destination.');
+            qc.setQueryData(DomainModel.keys.one(domain.id), row); toast.success(`${domain.name} assigned to ${group.name}`); close();
+        } catch (reason) {
+            if (mounted.current && domainSession() === session.current) setError(`${redactRegistrarError(reason)}${flight.current ? ' Refresh to inspect the current owner. This form will not repeat a submitted assignment.' : ''}`);
+        } finally { await refresh(); flight.current = false; if (mounted.current) setBusy(false); onBusyChange(false); }
+    };
+    if (!allowed) return <div className="modal-pad"><h2 className="modal-title">Assignment unavailable</h2><p>Only a platform administrator can assign an unassigned domain.</p><button className="btn" onClick={close}>Close</button></div>;
+    return <div className="modal-pad domains-assignment"><h2 className="modal-title">Assign {domain.name}</h2><p className="dim">Give this Platform domain to one group. This assignment cannot be changed here.</p>{error && <div className="form-alert" role="alert">{error}</div>}{observed?.group != null && <FlatRow label="Current owner">{typeof observed.group === 'number' ? `Group #${observed.group}` : observed.group.name}</FlatRow>}
+        {!attempted && !review && <CollectionSelect<DnsGroupChoice> endpoint={DNS_GROUP_CHOICE_ENDPOINT} value={group} onChange={(_id, row) => setGroup(row ?? null)} label="Destination group" required maxItems={25} defaultParams={{ start: 0 }} disabled={busy} />}
+        {review && !attempted && <><FlatRow label="Domain">{domain.name}</FlatRow><FlatRow label="From">Platform</FlatRow><FlatRow label="To">{group?.name}</FlatRow><label className="field"><span className="field-label">Type {group?.name} to confirm</span><input className="input" value={confirm} disabled={busy} onChange={event => setConfirm(event.target.value)} /></label></>}
+        <div className="modal-actions"><button className="btn" disabled={busy} onClick={close}>{attempted ? 'Close' : 'Cancel'}</button>{attempted ? <button className="btn" disabled={busy} onClick={() => void refresh()}>Refresh owner</button> : review ? <><button className="btn" disabled={busy} onClick={() => { setReview(false); setConfirm(''); }}>Back</button><button className="btn btn-primary" disabled={busy || confirm !== group?.name} onClick={() => void submit()}>{busy ? 'Assigning…' : 'Assign to group'}</button></> : <button className="btn btn-primary" disabled={!group || busy} onClick={() => setReview(true)}>Review assignment</button>}</div>
+    </div>;
+}
+
+export function showDomainAssignment(domain: DomainRow) {
+    let busy = false;
+    return modal.open(close => <DomainAssignment domain={domain} close={() => close(null)} onBusyChange={value => { busy = value; }} />, { size: 'md', canDismiss: () => !busy });
+}

package/src/admin/dns/DomainDetail.tsx

@@ -1,51 +1,68 @@
+import { useCallback, useState, useSyncExternalStore } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { hasPermission, useMe } from '../../client/runtime';
-import { DetailView, Eyebrow, FlatRow, fmt } from '../../ui';
+import { useQueryClient } from '@tanstack/react-query';
+import { getAuthSessionRevision, hasPermission, subscribeAuth, useAuthSnapshot, useMe } from '../../client/runtime';
+import { Badge, FlatRow, Tabs, fmt, modal } from '../../ui';
+import { OperationsHelp } from '../core/OperationsHelp';
 import { useDnsCapabilities } from './api';
 import { providerLabel } from './data';
 import { useDnsDomainLinks } from './domain-links';
 import { DnsRecordsPanel } from './DnsRecordsPanel';
 import { DomainCertificatesSection } from './DomainCertificatesSection';
-import { SharedValidationPanel } from './SharedValidationPanel';
 import { openSharedValidation } from './SharedValidationDialog';
-import { useValidationPlan } from './shared-validation-api';
-import { domainRecordsHref, domainScopeLabel, dnsAdminMount, supportsDomainRecords } from './domain-navigation';
+import { domainScopeLabel, dnsAdminMount, supportsDomainRecords } from './domain-navigation';
 import { redactRegistrarError } from './purchase-data';
-import { DNS_MANAGE_PERMISSIONS, DNS_VIEW_PERMISSIONS, DomainModel } from './models';
+import { DNS_MANAGE_PERMISSIONS, DNS_VIEW_PERMISSIONS, DomainModel, type DomainRow } from './models';
+import { DomainRegistrationPanel } from './DomainRegistrationPanel';
+import { showDomainAssignment } from './DomainAssignment';
 
-export function DomainDetail({ id, onClose }: { id: number; onClose: () => void }) {
-    const query = DomainModel.useOne(id);
-    const { data: me } = useMe();
-    const links = useDnsDomainLinks();
-    const navigate = useNavigate();
-    const location = useLocation();
+export function showDomainDetails(id: number, initialTab = 'overview') {
+    let busy = false;
+    const onBusyChange = (value: boolean) => { busy = value; };
+    return modal.open(close => <DomainDetail id={id} initialTab={initialTab} onClose={() => close(null)} onBusyChange={onBusyChange} />, { size: 'lg', canDismiss: () => !busy });
+}
+
+export function DomainDetail({ id, initialTab = 'overview', onClose, onBusyChange }: { id: number; initialTab?: string; onClose: () => void; onBusyChange?: (busy: boolean) => void }) {
+    const { data: me } = useMe(); const auth = useAuthSnapshot();
+    const revision = useSyncExternalStore(subscribeAuth, getAuthSessionRevision, getAuthSessionRevision);
+    const canView = auth.authenticated && hasPermission(me, DNS_VIEW_PERMISSIONS, null);
+    const query = DomainModel.useOne(canView ? id : null);
     const domain = query.data;
-    const shared = useValidationPlan(domain ? { domain: domain.id } : null);
-    const group = typeof domain?.group === 'number' ? domain.group : domain?.group?.id ?? null;
-    const capabilities = useDnsCapabilities(group, { enabled: !!domain });
+    if (!canView) return <div className="modal-pad"><h2 className="modal-title">Domain unavailable</h2><button className="btn" onClick={onClose}>Close</button></div>;
     if (query.isPending) return <div className="modal-pad dim">Loading domain…</div>;
-    if (!domain || query.error) return <div className="modal-pad text-bad">{query.error?.message ?? 'Domain not found'}</div>;
-    const availableLinks = capabilities.data ? links.filter((link) => (!link.permissions || hasPermission(me, link.permissions)) && (!link.when || link.when(domain, capabilities.data!))) : [];
-    const navigateLink = (route: string) => {
-        const marker = location.pathname.indexOf('/dns/');
-        const mount = marker >= 0 ? location.pathname.slice(0, marker) : '';
-        onClose();
-        navigate(`${mount}/dns/${route.replace(/^\/?dns\//, '').replace(/^\//, '')}`);
-    };
-    const groupLabel = domainScopeLabel(domain.group);
-    const canManage = hasPermission(me ?? null, DNS_MANAGE_PERMISSIONS, null);
-    const openDestination = (href: string) => { onClose(); navigate(href); };
+    if (!domain || query.error) return <div className="modal-pad"><h2 className="modal-title">Could not load domain</h2><p className="text-bad">{query.error?.message ?? 'Domain not found'}</p><div className="modal-actions"><button className="btn" onClick={onClose}>Close</button><button className="btn" onClick={() => void query.refetch()}>Retry</button></div></div>;
+    return <DomainContent key={`${auth.uid}:${revision}:${domain.id}`} domain={domain} initialTab={initialTab} onClose={onClose} onBusyChange={onBusyChange} />;
+}
+
+function DomainContent({ domain, initialTab, onClose, onBusyChange }: { domain: DomainRow; initialTab: string; onClose: () => void; onBusyChange?: (busy: boolean) => void }) {
+    const { data: me } = useMe(); const qc = useQueryClient();
+    const location = useLocation(); const navigate = useNavigate(); const links = useDnsDomainLinks();
+    const [tab, setTab] = useState(initialTab); const [recordType, setRecordType] = useState(''); const [busy, setBusy] = useState(false);
+    const setPending = useCallback((value: boolean) => { setBusy(value); onBusyChange?.(value); }, [onBusyChange]);
+    const canManage = hasPermission(me, DNS_MANAGE_PERMISSIONS, null);
+    const group = typeof domain.group === 'number' ? domain.group : domain.group?.id ?? null;
+    // Catalog is read-only; manager prerequisites and legal contacts load only on deliberate actions.
+    const caps = useDnsCapabilities(group, { enabled: links.some(link => !['domains', 'records', 'certificates', 'purchases', 'registrant', 'credentials'].includes(link.key)) });
+    const customLinks = links.filter(link => !['domains', 'records', 'certificates', 'purchases', 'registrant', 'credentials'].includes(link.key) && (!link.permissions || hasPermission(me, link.permissions, null)) && (!link.when || caps.data && link.when(domain, caps.data)));
+    const go = (href: string) => { onClose(); navigate(href); };
+    const refresh = async () => { await DomainModel.invalidate(qc); };
     const credential = typeof domain.credential === 'object' ? domain.credential : null;
-    return <DetailView
-        icon="bi-globe2" title={domain.name} subtitle={providerLabel(domain.provider)}
-        chips={[{ text: domain.status, tone: fmt.inferTone(domain.status) }, ...(domain.verified ? [{ text: 'Verified', tone: 'success' as const }] : [])]}
-        sections={[
-            { key: 'overview', label: 'Overview', icon: 'bi-grid-1x2', render: () => <div className="dns-domain-overview"><div className="domains-overview-actions">{supportsDomainRecords(domain.provider) && <button className="btn btn-primary" onClick={() => openDestination(domainRecordsHref(location.pathname, domain.id))}>DNS Records <i className="bi bi-arrow-right" /></button>}{canManage && domain.provider === 'route53' && <button className="btn" onClick={() => void import('./DomainRegistrarSettings').then(({ showDomainRegistrarSettings }) => showDomainRegistrarSettings(domain))}>Registrar settings</button>}{hasPermission(me ?? null, DNS_VIEW_PERMISSIONS, null) && <button className="btn" onClick={() => openDestination(`${dnsAdminMount(location.pathname)}/edge/vhosts`)}>Serving <i className="bi bi-arrow-right" /></button>}</div><Eyebrow>Domain</Eyebrow><FlatRow label="Scope">{groupLabel}</FlatRow><FlatRow label="Expires">{fmt.date(domain.expires)}</FlatRow><FlatRow label="Auto-renew">{domain.auto_renew ? 'Enabled' : 'Disabled'}</FlatRow><FlatRow label="WHOIS privacy">{domain.privacy ? 'Enabled' : 'Disabled'}</FlatRow><details className="ops-details"><summary>Registration details</summary>{domain.hosted_zone_id && <FlatRow label="Hosted zone"><code>{domain.hosted_zone_id}</code></FlatRow>}<FlatRow label="Registered">{fmt.date(domain.registered_on)}</FlatRow><FlatRow label="Credential">{credential ? `${credential.name} · ${credential.is_active && credential.verified ? 'usable' : 'unavailable'}` : '—'}</FlatRow></details>{domain.last_error && <div className="dns-error">{redactRegistrarError(domain.last_error)}</div>}{domain.provider === 'godaddy' && <div className="dns-provider-note">DNS is managed here; purchase, renewal, privacy, and WHOIS remain in the GoDaddy account.</div>}{domain.provider === 'mojo' && <div className="dns-blocked">Mojo is certificate-only and cannot use generic DNS CRUD.</div>}{availableLinks.length > 0 && <><Eyebrow>Related</Eyebrow><div className="dns-domain-links">{availableLinks.filter((link) => link.key !== 'records' || supportsDomainRecords(domain.provider)).map((link) => <button className="btn" type="button" key={link.key} onClick={() => navigateLink(typeof link.route === 'function' ? link.route(domain) : link.route)}><i className={`bi ${link.icon}`} /> {link.label}</button>)}</div></>}</div> },
-            { key: 'validation', label: 'Advanced validation', icon: 'bi-diagram-2', render: () => <SharedValidationPanel domain={domain} /> },
-            { key: 'records', label: 'DNS Records', icon: 'bi-list-columns', render: () => <DnsRecordsPanel domain={domain} /> },
-            { key: 'certificates', label: 'Certificates', icon: 'bi-patch-check', render: () => <DomainCertificatesSection domain={domain} /> },
-        ]}
-        initialSection="overview" onClose={onClose}
-        contextMenu={canManage && shared.data?.capabilities.group_choices ? [{ label: 'Set up shared validation', icon: 'bi-diagram-2', onSelect: () => void openSharedValidation(domain) }] : []}
-    />;
+    const items = [
+        { key: 'overview', label: 'Overview', panel: <div className="domains-detail-panel">
+            {domain.last_error && <div className="form-alert" role="alert">{redactRegistrarError(domain.last_error)}</div>}
+            {domain.provider === 'godaddy' && <p className="dns-provider-note">Manage DNS here. Registration and renewals stay in your GoDaddy account.</p>}
+            {domain.provider === 'mojo' && <p className="dns-provider-note">Certificate-only domain. General DNS records are managed by its DNS provider.</p>}
+            {!supportsDomainRecords(domain.provider) && domain.provider !== 'mojo' && <p className="form-alert">This DNS provider is unavailable in this portal.</p>}
+            <FlatRow label="Scope"><span>{domainScopeLabel(domain.group)}</span>{canManage && me?.is_superuser === true && domain.group == null && <button className="btn btn-sm" onClick={() => void showDomainAssignment(domain)}>Assign to group</button>}</FlatRow>
+            <FlatRow label="Expires">{domain.expires ? fmt.date(domain.expires) : <span>Unknown <OperationsHelp label="domain expiry">A hosted zone does not prove that its registration never expires. Read live registration details or check its registrar.</OperationsHelp></span>}</FlatRow>
+            <FlatRow label="Ownership">{domain.verified ? 'Verified' : 'Not verified'}</FlatRow>
+            {domain.hosted_zone_id && <FlatRow label="Hosted zone"><code>{domain.hosted_zone_id}</code></FlatRow>}
+            {credential && <FlatRow label="Credential"><span>{credential.name} · {credential.is_active && credential.verified ? 'Verified' : 'Needs attention'}</span></FlatRow>}
+            <div className="domains-overview-actions"><button className="btn" onClick={() => go(`${dnsAdminMount(location.pathname)}/edge/vhosts`)}>Serving <i className="bi bi-arrow-right" /></button>{canManage && <span className="domains-task-help"><button className="btn" onClick={() => void openSharedValidation(domain)}>Shared validation</button><OperationsHelp label="shared validation">Connect shared wildcard validation or review controller trust for this domain.</OperationsHelp></span>}{customLinks.map(link => <button className="btn" key={link.key} onClick={() => go(`${dnsAdminMount(location.pathname)}/dns/${(typeof link.route === 'function' ? link.route(domain) : link.route).replace(/^\/?dns\//, '').replace(/^\//, '')}`)}>{link.label}</button>)}</div>
+        </div> },
+        ...(supportsDomainRecords(domain.provider) ? [{ key: 'records', label: 'DNS records', panel: <div className="domains-detail-panel"><DnsRecordsPanel domain={domain} recordType={recordType} onRecordTypeChange={setRecordType} onBusyChange={setPending} /></div> }] : []),
+        { key: 'certificates', label: 'Certificates', panel: <div className="domains-detail-panel"><DomainCertificatesSection domain={domain} /></div> },
+        ...(canManage && domain.provider !== 'mojo' ? [{ key: 'registration', label: 'Registration', panel: <div className="domains-detail-panel"><DomainRegistrationPanel domain={domain} onBusyChange={setPending} onChanged={refresh} /></div> }] : []),
+    ];
+    return <div className="domains-detail"><header className="domains-detail-header"><div><h2 className="modal-title">{domain.name}</h2><div className="domains-detail-subtitle"><span>{providerLabel(domain.provider)}</span><Badge tone={fmt.inferTone(domain.status)}>{domain.status}</Badge></div></div><button className="btn-icon" aria-label="Close domain" disabled={busy} onClick={onClose}><i className="bi bi-x-lg" /></button></header><Tabs ariaLabel="Domain details" activeKey={tab} onActiveKeyChange={setTab} items={items.map(item => ({ ...item, disabled: busy && item.key !== tab }))} /></div>;
 }

package/src/admin/dns/DomainOnboardingContent.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { hasPermission, useMe } from '../../client/runtime';
 import { toast } from '../../ui';
@@ -7,6 +7,8 @@ import { DNS_MANAGE_PERMISSIONS, DomainModel } from './models';
 import { normalizePurchaseDomain, redactRegistrarError } from './purchase-data';
 import { DomainPurchaseWizard } from './DomainPurchaseWizard';
 import { DomainRegisterExisting } from './DomainRegisterExisting';
+import { domainSession, requireDomainManager } from './domain-authority';
+import { OperationsHelp } from '../core/OperationsHelp';
 
 export type OnboardingMode = 'menu' | 'register' | 'purchase' | 'adopt';
 
@@ -16,6 +18,9 @@ export function DomainOnboardingDialog({ close, setBusyGate, initialMode = 'menu
     const [name, setName] = useState(''); const [review, setReview] = useState<string | null>(null);
     const [busy, setBusy] = useState(false); const [attempted, setAttempted] = useState(false); const [error, setError] = useState('');
     const inFlight = useRef(false);
+    const session = useRef(domainSession());
+    const mounted = useRef(true);
+    useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
     const canManage = hasPermission(me ?? null, DNS_MANAGE_PERMISSIONS, null);
     const prepareAdoption = () => {
         if (inFlight.current || attempted || me?.is_superuser !== true) return;
@@ -26,7 +31,7 @@ export function DomainOnboardingDialog({ close, setBusyGate, initialMode = 'menu
     const adopt = async () => {
         if (inFlight.current || attempted || !review || me?.is_superuser !== true || !canManage) return;
         inFlight.current = true; setBusy(true); setBusyGate(true); setAttempted(true); setError('');
-        try { const domain = await adoptHouseDomain({ domain: review }); await DomainModel.invalidate(queryClient); toast.success(`${domain.name} adopted at Platform scope`); close(); }
+        try { await requireDomainManager(session.current, true); const domain = await adoptHouseDomain({ domain: review }, () => { if (!mounted.current || domainSession() !== session.current) throw new Error('Session changed. Reopen this task.'); }); await DomainModel.invalidate(queryClient); if (!mounted.current || domainSession() !== session.current) return; toast.success(`${domain.name} adopted at Platform scope`); close(); }
         catch (reason) { await DomainModel.invalidate(queryClient); setError(`${redactRegistrarError(reason)} Review the domain inventory before another adoption.`); }
         finally { inFlight.current = false; setBusy(false); setReview(null); setBusyGate(false); }
     };
@@ -36,9 +41,9 @@ export function DomainOnboardingDialog({ close, setBusyGate, initialMode = 'menu
     if (mode === 'register') return <DomainRegisterExisting close={close} back={() => setMode('menu')} setBusyGate={setBusyGate} />;
     if (mode === 'adopt') {
         if (me.is_superuser !== true) return <div className="modal-pad domain-onboarding"><h2 className="modal-title">Platform superuser required</h2><button className="btn" onClick={close}>Close</button></div>;
-        return <div className="modal-pad domain-onboarding"><h2 className="modal-title">Adopt a House domain</h2><p className="dim">Adopt one existing public hosted zone at Platform scope. No account discovery, new zone, or tenant assignment.</p>{error && <div className="form-alert" role="alert">{error}</div>}
+        return <div className="modal-pad domain-onboarding"><h2 className="modal-title">Adopt Route 53 zone</h2><p className="dim">Connect an existing hosted zone to Platform. <OperationsHelp label="zone adoption">Enter one exact domain from this installation’s AWS account. This does not create a zone, buy a registration, or assign it to a group.</OperationsHelp></p>{error && <div className="form-alert" role="alert">{error}</div>}
             {review ? <div className="dns-quote-card"><h3>Review exact adoption</h3><div><span>Domain</span><code>{review}</code></div><div><span>Scope</span><b>Platform</b></div><div className="modal-actions"><button className="btn" disabled={busy} onClick={cancelReview}>Cancel review</button><button className="btn btn-primary" disabled={busy} onClick={() => void adopt()}>{busy ? 'Adopting…' : 'Confirm adoption'}</button></div></div> : <><label className="field"><span className="field-label">Existing House domain</span><input className="input" value={name} disabled={busy || attempted} onChange={(event) => setName(event.target.value)} /></label><div className="modal-actions"><button className="btn" disabled={busy} onClick={attempted ? close : () => setMode('menu')}>{attempted ? 'Close and review inventory' : 'Back'}</button><button className="btn btn-primary" disabled={busy || attempted || !name.trim()} onClick={prepareAdoption}>Review adoption</button></div></>}
         </div>;
     }
-    return <div className="modal-pad domain-onboarding"><h2 className="modal-title">Add a domain</h2><p className="dim">Choose one explicit workflow.</p><div className="dns-onboarding-options"><button className="panel panel-pad" onClick={() => setMode('register')}><i className="bi bi-globe2" /><b>Register existing</b><span>Prove ownership of one GoDaddy domain using a verified group credential.</span></button>{me.is_superuser === true && <button className="panel panel-pad" onClick={() => setMode('adopt')}><i className="bi bi-house-add" /><b>Adopt a House domain</b><span>Type an existing public zone name; keep it at Platform scope.</span></button>}<button className="panel panel-pad" onClick={() => setMode('purchase')}><i className="bi bi-cart-check" /><b>Buy domain</b><span>Search, quote, confirm once, and reconcile against the durable ledger.</span></button></div><div className="modal-actions"><button className="btn" onClick={close}>Cancel</button></div></div>;
+    return <div className="modal-pad domain-onboarding"><h2 className="modal-title">Add a domain</h2><div className="dns-onboarding-options"><button className="panel panel-pad" onClick={() => setMode('register')}><i className="bi bi-globe2" /><b>Connect GoDaddy domain</b><span>Manage DNS for a domain you already own.</span></button><button className="panel panel-pad" onClick={() => setMode('purchase')}><i className="bi bi-cart-check" /><b>Buy domain</b><span>Search available names and review the price.</span></button>{me.is_superuser === true && <button className="panel panel-pad" onClick={() => setMode('adopt')}><i className="bi bi-house-add" /><b>Adopt Route 53 zone</b><span>Connect an existing zone in this AWS account.</span></button>}</div><div className="modal-actions"><button className="btn" onClick={close}>Cancel</button></div></div>;
 }

package/src/admin/dns/DomainPurchaseDetail.tsx

@@ -1,11 +1,46 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { getAuthSessionRevision, getAuthSnapshot, hasPermission, subscribeAuth, useAuthSnapshot, useMe } from '../../client/runtime';
 import { Badge, FlatRow, fmt } from '../../ui';
+import { OperationsHelp } from '../core/OperationsHelp';
 import { fetchPurchaseDetail } from './api';
-import { redactRegistrarError } from './purchase-data';
-import type { DomainPurchaseRow } from './models';
+import { dnsAdminMount } from './domain-navigation';
+import { PURCHASE_MAY_HAVE_MOVED, redactRegistrarError } from './purchase-data';
+import { DNS_VIEW_PERMISSIONS, type DomainPurchaseRow } from './models';
 
-export function DomainPurchaseDetail({ id, close }: { id: number; close: () => void }) {
-    const [row, setRow] = useState<DomainPurchaseRow | null>(null); const [error, setError] = useState('');
-    useEffect(() => { let current = true; void fetchPurchaseDetail(id).then((value) => { if (current) setRow(value); }, (reason) => { if (current) setError(redactRegistrarError(reason)); }); return () => { current = false; setRow(null); setError(''); }; }, [id]);
-    return <div className="modal-pad"><div className="eyebrow">Domain purchase ledger</div><h2 className="modal-title">{row?.domain_name ?? `Purchase #${id}`}</h2>{!row && !error && <p className="dim">Loading ledger detail…</p>}{error && <div className="form-alert">{error}</div>}{row && <><div className="chip-row"><Badge tone={row.status === 'completed' ? 'success' : row.status === 'failed' ? 'danger' : 'warning'}>{row.status}</Badge></div><FlatRow label="Purchase"><code>#{row.id}</code></FlatRow><FlatRow label="Kind">{row.kind}</FlatRow><FlatRow label="Price">{row.price ?? '—'} {row.currency}</FlatRow><FlatRow label="Cost">{row.cost ?? '—'} {row.currency}</FlatRow><FlatRow label="Years">{row.years}</FlatRow><FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow><FlatRow label="Quote expiry">{fmt.datetime(row.quote_expires)}</FlatRow><FlatRow label="Operation"><code>{row.operation_id ?? 'Not recorded'}</code></FlatRow>{row.error && <div className="form-alert">{redactRegistrarError(row.error)}</div>}</>}<div className="modal-actions"><button className="btn" onClick={close}>Close</button></div></div>;
+export function DomainPurchaseDetail({ id, close, knownDomainId, privacyDowngraded = false, onNavigate }: { id: number; close: () => void; knownDomainId?: number; privacyDowngraded?: boolean; onNavigate?: () => void }) {
+    const { data: me } = useMe(); const auth = useAuthSnapshot();
+    const revision = useSyncExternalStore(subscribeAuth, getAuthSessionRevision, getAuthSessionRevision);
+    const canView = auth.authenticated && hasPermission(me ?? null, DNS_VIEW_PERMISSIONS, null);
+    const owner = JSON.stringify([id, auth.uid, revision, canView]); const latest = useRef(owner); latest.current = owner;
+    const [loaded, setLoaded] = useState<{ owner: string; row: DomainPurchaseRow } | null>(null);
+    const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const flight = useRef(false); const generation = useRef(0);
+    const location = useLocation(); const navigate = useNavigate(); const row = loaded?.owner === owner && canView ? loaded.row : null;
+    const refresh = useCallback(async () => {
+        if (!canView || flight.current || !Number.isInteger(id) || id <= 0) return;
+        const accepted = ++generation.current, uid = auth.uid; flight.current = true; setLoading(true); setError('');
+        const current = () => latest.current === owner && generation.current === accepted && getAuthSnapshot().uid === uid && getAuthSessionRevision() === revision;
+        try { const value = await fetchPurchaseDetail(id); if (!current()) return; if (value.id !== id) throw new Error('The ledger response did not match this purchase'); setLoaded({ owner, row: value }); }
+        catch (reason) { if (current()) setError(redactRegistrarError(reason)); }
+        finally { if (current()) { flight.current = false; setLoading(false); } }
+    }, [id, owner, canView, auth.uid, revision]);
+    useEffect(() => { flight.current = false; setLoaded(null); setError(''); setLoading(false); void refresh(); return () => { generation.current++; }; }, [refresh]);
+    const openDomain = () => {
+        if (!row || row.status !== 'completed') return;
+        if (knownDomainId && Number.isInteger(knownDomainId) && knownDomainId > 0) { const accepted = generation.current; void import('./DomainDetail').then(({ showDomainDetails }) => { if (generation.current === accepted && latest.current === owner && getAuthSnapshot().uid === auth.uid && getAuthSessionRevision() === revision) { close(); onNavigate?.(); return showDomainDetails(knownDomainId); } }); }
+        else { close(); onNavigate?.(); navigate(`${dnsAdminMount(location.pathname)}/dns/domains?search=${encodeURIComponent(row.domain_name)}`); }
+    };
+    return <div className="modal-pad dns-purchase-detail"><div className="eyebrow">Purchase #{id}</div><h2 className="modal-title">{row?.domain_name ?? 'Domain purchase'}</h2>
+        {!canView && <p className="dim" role="status">DNS viewing permission is required to inspect this purchase.</p>}
+        {loading && !row && <p className="dim" role="status">Loading purchase…</p>}{error && <div className="form-alert" role="alert">{row ? 'Refresh failed. Showing the previous result. ' : ''}{error}</div>}
+        {row && <><div className="chip-row"><Badge tone={row.status === 'completed' ? 'success' : row.status === 'failed' || row.status === 'expired' ? 'danger' : 'warning'}>{row.status}</Badge><OperationsHelp label="purchase ledger">This is the durable record of this exact purchase. Refresh only reads its status; it never submits another purchase. A submitted status can remain here while the registrar finishes registration.</OperationsHelp></div>
+            <FlatRow label="Price">{row.price ?? '—'} {row.currency} · {row.years} year{row.years === 1 ? '' : 's'}</FlatRow><FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow>
+            {row.status === 'quoted' && <FlatRow label="Quote expires">{fmt.datetime(row.quote_expires)}</FlatRow>}
+            {row.operation_id && <FlatRow label="Registrar operation"><code>{row.operation_id}</code></FlatRow>}
+            {row.error && <div className="form-alert">{redactRegistrarError(row.error)}</div>}
+            {row.status === 'submitted' && <p className="form-alert">{PURCHASE_MAY_HAVE_MOVED}</p>}
+            {privacyDowngraded && <p className="form-alert" role="alert">Registration proceeded without WHOIS privacy. Your registrant contact may be publicly visible.</p>}
+        </>}
+        <div className="modal-actions">{row?.status === 'completed' && <button className="btn" onClick={openDomain}>{knownDomainId ? 'View domain' : 'Find domain'}</button>}<button className="btn" disabled={!canView || loading} onClick={() => void refresh()}>{loading ? 'Refreshing…' : 'Refresh'}</button><button className="btn btn-primary" onClick={close}>Close</button></div>
+    </div>;
 }

package/src/admin/dns/DomainPurchaseWizard.tsx

@@ -1,112 +1,142 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { CollectionSelect, FormWizard, Badge, fmt, type FormWizardSection } from '../../ui';
+import { getAuthSessionRevision, getAuthSnapshot, hasPermission, subscribeAuth, useAuthSnapshot, useMe } from '../../client/runtime';
+import { CollectionSelect, FormWizard, Badge, fmt, modal, type FormWizardSection } from '../../ui';
+import { OperationsHelp } from '../core/OperationsHelp';
 import { DNS_GROUP_CHOICE_ENDPOINT, fetchDnsCapabilities, fetchPurchaseDetail, purchaseDomain, quoteDomain, searchRegistrarBatch } from './api';
-import { DomainModel, DomainPurchaseModel, type DnsGroupChoice, type DomainPurchaseRow, type RegistrarSearchRow } from './models';
+import { DNS_MANAGE_PERMISSIONS, DomainModel, DomainPurchaseModel, type DnsGroupChoice, type DomainPurchaseRow, type RegistrarSearchRow } from './models';
 import { normalizePurchaseDomain, normalizeTypedTlds, pollPurchaseLedger, PURCHASE_MAY_HAVE_MOVED, quoteIdentity, quoteMatches, redactRegistrarError, searchAvailabilityLabel, type QuoteIdentity } from './purchase-data';
+import { DomainPurchaseDetail } from './DomainPurchaseDetail';
+import { RegistrantContactPage } from './RegistrantContactPage';
 
 interface TransientQuote { readonly token: string; readonly identity: Readonly<QuoteIdentity> }
-
-export function DomainPurchaseWizard({ onDone, onBusyChange }: { onDone?: () => void; onBusyChange?: (busy: boolean) => void }) {
+interface WizardProps { onDone?: () => void; onBusyChange?: (busy: boolean) => void }
+export function DomainPurchaseWizard(props: WizardProps) {
+    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 [attempt, setAttempt] = useState<{ uid: string | null; revision: number; id: number } | null>(null);
+    useEffect(() => { setAttempt(value => value?.uid === auth.uid ? value : null); }, [auth.uid]);
+    const recordAttempt = useCallback((id: number) => setAttempt({ uid: auth.uid, revision, id }), [auth.uid, revision]);
+    if (!canManage) return <p className="dim" role="status">DNS management permission is required to buy a domain.</p>;
+    if (attempt?.uid === auth.uid && attempt.revision !== revision) return <PurchaseRecovery key={`${auth.uid}:${revision}`} id={attempt.id} onDone={props.onDone} />;
+    return <PurchaseWizard key={`${auth.uid}:${revision}`} {...props} uid={auth.uid} revision={revision} onAttempt={recordAttempt} />;
+}
+function PurchaseWizard({ onDone, onBusyChange, uid, revision, onAttempt }: WizardProps & { uid: string | null; revision: number; onAttempt: (id: number) => void }) {
     const queryClient = useQueryClient();
     const [group, setGroup] = useState<DnsGroupChoice | null>(null);
-    const [base, setBase] = useState('');
-    const [tlds, setTlds] = useState('com, net, org');
-    const [results, setResults] = useState<RegistrarSearchRow[]>([]);
-    const [selected, setSelected] = useState<RegistrarSearchRow | null>(null);
-    const [years, setYears] = useState(1);
-    const [typedDomain, setTypedDomain] = useState('');
-    const [receipt, setReceipt] = useState<DomainPurchaseRow | null>(null);
-    const [terminalMessage, setTerminalMessage] = useState('');
-    const quoteRef = useRef<TransientQuote | null>(null);
-    const [quoted, setQuoted] = useState<QuoteIdentity | null>(null);
-    const attempted = useRef(false);
-    const inFlight = useRef(false);
-    const generation = useRef(0);
+    const [step, setStep] = useState('search');
+    const [base, setBase] = useState(''); const [tlds, setTlds] = useState('com, net, org');
+    const [results, setResults] = useState<RegistrarSearchRow[]>([]); const [selected, setSelected] = useState<RegistrarSearchRow | null>(null);
+    const [typedDomain, setTypedDomain] = useState(''); const [receipt, setReceipt] = useState<DomainPurchaseRow | null>(null);
+    const [terminalMessage, setTerminalMessage] = useState(''); const [purchaseId, setPurchaseId] = useState<number | null>(null);
+    const [knownDomainId, setKnownDomainId] = useState<number>(); const [privacyDowngraded, setPrivacyDowngraded] = useState(false);
+    const [contactRevision, setContactRevision] = useState(0); const [missingContact, setMissingContact] = useState(false); const [contactNotice, setContactNotice] = useState('');
+    const [busy, setBusy] = useState(false); const [refreshing, setRefreshing] = useState(false);
+    const quoteRef = useRef<TransientQuote | null>(null); const [quoted, setQuoted] = useState<QuoteIdentity | null>(null);
+    const attempted = useRef(false); const inFlight = useRef(false); const generation = useRef(0); const alive = useRef(false);
+    const onBusy = useRef(onBusyChange); onBusy.current = onBusyChange;
+    const modalOwner = useRef<AbortController | null>(null);
+    const handleBusy = useCallback((value: boolean) => { inFlight.current = value; setBusy(value); onBusy.current?.(value); }, []);
+    const isCurrent = (accepted: number) => alive.current && generation.current === accepted && getAuthSnapshot().uid === uid && getAuthSessionRevision() === revision;
     const clearQuote = () => { quoteRef.current = null; setQuoted(null); setTypedDomain(''); };
-
-    useEffect(() => () => { generation.current += 1; quoteRef.current = null; }, []);
     useEffect(() => {
-        if (!quoted) return;
+        alive.current = true; const owner = new AbortController(); modalOwner.current = owner;
+        return () => { alive.current = false; generation.current++; quoteRef.current = null; owner.abort(); onBusy.current?.(false); };
+    }, []);
+    useEffect(() => {
+        if (!quoted || attempted.current) return;
         const delay = Math.max(0, Math.min(2_147_483_647, quoted.expires * 1000 - Date.now()));
-        const timer = window.setTimeout(() => { generation.current += 1; quoteRef.current = null; setQuoted(null); setTypedDomain(''); }, delay);
+        const timer = window.setTimeout(() => { if (!attempted.current) { generation.current++; clearQuote(); } }, delay);
         return () => window.clearTimeout(timer);
     }, [quoted]);
-    const changeUpstream = (change: () => void) => { if (attempted.current) return; generation.current += 1; clearQuote(); setResults([]); setSelected(null); change(); };
-
+    const changeUpstream = (change: () => void) => { if (attempted.current || inFlight.current) return; generation.current++; clearQuote(); setResults([]); setSelected(null); setMissingContact(false); setContactNotice(''); change(); };
+    const setupContact = async () => {
+        if (!group || inFlight.current || attempted.current) return;
+        const accepted = generation.current, target = { ...group }; let pending = false;
+        await modal.open(close => <RegistrantContactPage initialGroup={target} lockScope onClose={() => close(null)} onBusyChange={value => { pending = value; }} onSaved={() => { if (isCurrent(accepted)) { setMissingContact(false); setContactNotice('Contact saved. Continue to search.'); setContactRevision(value => value + 1); } close(null); }} />, { size: 'lg', signal: modalOwner.current?.signal, canDismiss: () => !pending });
+    };
+    const refresh = async () => {
+        if (!purchaseId || refreshing) return; const accepted = generation.current; setRefreshing(true);
+        try { const value = await fetchPurchaseDetail(purchaseId); if (!isCurrent(accepted)) return; if (value.id !== purchaseId) throw new Error('The ledger response did not match this purchase'); setReceipt(value); setTerminalMessage(value.status === 'completed' ? 'Registration completed.' : PURCHASE_MAY_HAVE_MOVED); }
+        catch (reason) { if (isCurrent(accepted)) setTerminalMessage(`${redactRegistrarError(reason)} ${PURCHASE_MAY_HAVE_MOVED}`); }
+        finally { if (isCurrent(accepted)) setRefreshing(false); }
+    };
     const sections = useMemo<FormWizardSection[]>(() => [
         {
-            key: 'search', label: 'Search', fields: [], description: 'Choose one authorized group, then enter a base label and your own TLD list. The backend—not this client—is the supported-TLD authority.',
+            key: 'search', label: 'Search', fields: [],
             content: <div className="dns-registrar-grid">
-                <CollectionSelect<DnsGroupChoice> endpoint={DNS_GROUP_CHOICE_ENDPOINT} value={group} onChange={(_id, row) => changeUpstream(() => setGroup(row ?? null))} label="Purchasing group" required placeholder="Search eligible groups…" maxItems={25} defaultParams={{ start: 0 }} />
-                <label className="field"><span className="field-label">Base name <em>*</em></span><input className="input" value={base} disabled={attempted.current} onChange={(event) => changeUpstream(() => setBase(event.target.value))} placeholder="example" /></label>
-                <label className="field"><span className="field-label">TLDs <em>*</em></span><input className="input" value={tlds} disabled={attempted.current} onChange={(event) => changeUpstream(() => setTlds(event.target.value))} placeholder="com, net" /><span className="field-help">Typed values only; no client-maintained supported list.</span></label>
+                <CollectionSelect<DnsGroupChoice> endpoint={DNS_GROUP_CHOICE_ENDPOINT} value={group} onChange={(_id, row) => changeUpstream(() => setGroup(row ?? null))} label="Purchasing group" required placeholder="Search eligible groups…" maxItems={25} defaultParams={{ start: 0 }} disabled={busy || attempted.current} />
+                <label className="field"><span className="field-label">Base name <em>*</em></span><input className="input" value={base} disabled={busy || attempted.current} onChange={event => changeUpstream(() => setBase(event.target.value))} placeholder="example" /></label>
+                <label className="field"><span className="field-label">TLDs <em>*</em> <OperationsHelp label="domain search">Enter endings to search, separated by commas, for example com, net. Availability and pricing are checked with the registrar.</OperationsHelp></span><input className="input" aria-label="TLDs" value={tlds} disabled={busy || attempted.current} onChange={event => changeUpstream(() => setTlds(event.target.value))} placeholder="com, net" /></label>
+                {missingContact && <div className="form-alert">Set up a registrant contact for {group?.name} before purchasing. <button type="button" className="btn" disabled={busy} onClick={() => void setupContact()}>Set up contact</button></div>}{contactNotice && <p role="status">{contactNotice}</p>}
             </div>,
             onNext: async () => {
-                if (!group) throw new Error('Choose a purchasing group');
-                const caps = await fetchDnsCapabilities(group.id);
+                if (!group) throw new Error('Choose a purchasing group'); const accepted = generation.current;
+                const caps = await fetchDnsCapabilities(group.id); if (!isCurrent(accepted)) throw new Error('The purchasing scope changed. Search again.');
                 if (!caps.purchase_enabled) throw new Error('Domain purchasing is disabled on this deployment');
-                if (!caps.registrant_contact_configured) throw new Error('This group has no usable registrant contact');
+                if (!caps.registrant_contact_configured) { setMissingContact(true); throw new Error('A registrant contact is required'); }
                 const label = base.trim().toLowerCase().replace(/^\.+|\.+$/g, '');
                 if (!/^[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/.test(label)) throw new Error('Enter one valid base label');
-                const typed = normalizeTypedTlds(tlds, caps.search_batch_limit);
-                const answer = await searchRegistrarBatch({ domain: label, tlds: typed });
+                const typed = normalizeTypedTlds(tlds, caps.search_batch_limit); const answer = await searchRegistrarBatch({ domain: label, tlds: typed });
+                if (!isCurrent(accepted)) throw new Error('The purchasing scope changed. Search again.');
                 if (!answer.results.length) throw new Error('The registry returned no search results');
-                setResults(answer.results); setSelected(answer.results.find((row) => row.available === true) ?? null);
+                setResults(answer.results); setSelected(answer.results.find(row => row.available === true) ?? null);
             },
         },
         {
-            key: 'quote', label: 'Choose & quote', fields: [], description: 'Availability is tri-state. Only an explicit Available answer can be quoted.',
-            content: <div className="dns-search-results">
-                {results.map((row) => <label key={row.name} className={`dns-search-result${selected?.name === row.name ? ' is-selected' : ''}`}>
-                    <input type="radio" name="domain-result" checked={selected?.name === row.name} disabled={row.available !== true || attempted.current} onChange={() => { clearQuote(); setSelected(row); }} />
-                    <span><code>{row.name}</code><small>{row.reason ?? `${row.price ?? '—'} ${row.currency ?? ''}`}</small></span>
-                    <Badge tone={row.available === true ? 'success' : row.available === false ? 'danger' : 'warning'}>{searchAvailabilityLabel(row)}</Badge>
-                </label>)}
-                <label className="field"><span className="field-label">Registration years</span><select className="input" value={years} disabled={attempted.current} onChange={(event) => { clearQuote(); setYears(Number(event.target.value)); }}>{Array.from({ length: 10 }, (_, index) => index + 1).map((value) => <option key={value} value={value}>{value}</option>)}</select></label>
-            </div>,
+            key: 'quote', label: 'Choose & quote', fields: [],
+            content: <div className="dns-search-results"><p className="dim">One-year registration <OperationsHelp label="registration term">Purchases in this portal are for one year. The registrar provides the final quote before you confirm.</OperationsHelp></p>{results.map(row => <label key={row.name} className={`dns-search-result${selected?.name === row.name ? ' is-selected' : ''}`}><input type="radio" name="domain-result" checked={selected?.name === row.name} disabled={row.available !== true || busy || attempted.current} onChange={() => { clearQuote(); setSelected(row); }} /><span><code>{row.name}</code><small>{row.reason ?? `${row.price ?? '—'} ${row.currency ?? ''}`}</small></span><Badge tone={row.available === true ? 'success' : row.available === false ? 'danger' : 'warning'}>{searchAvailabilityLabel(row)}</Badge></label>)}</div>,
             onNext: async () => {
                 if (!group || !selected || selected.available !== true || selected.price == null || !selected.currency) throw new Error('Choose an explicitly available domain');
-                const quote = await quoteDomain({ group: group.id, domain: normalizePurchaseDomain(selected.name), years });
+                const accepted = generation.current; const quote = await quoteDomain({ group: group.id, domain: normalizePurchaseDomain(selected.name), years: 1 }, () => { if (!isCurrent(accepted)) throw new Error('The purchasing scope changed. Request a new quote.'); });
+                if (!isCurrent(accepted)) throw new Error('The purchasing scope changed. Request a new quote.');
                 const identity = quoteIdentity(quote, group.id);
-                if (!quoteMatches(identity, { group: group.id, domain: selected.name, years, price: selected.price, currency: selected.currency })) throw new Error('Quote did not match the selected search result');
+                if (!Number.isInteger(identity.purchase) || identity.purchase <= 0 || !quote.token || typeof quote.privacy_supported !== 'boolean' || !quoteMatches(identity, { group: group.id, domain: selected.name, years: 1, price: selected.price, currency: selected.currency })) throw new Error('Quote did not match the selected one-year registration');
                 quoteRef.current = Object.freeze({ token: quote.token, identity: Object.freeze(identity) }); setQuoted(identity);
             },
         },
         {
-            key: 'confirm', label: 'Confirm purchase', fields: [], description: 'This is a real-money operation. The exact quote tuple is immutable and the one-use token exists only in this mounted wizard.',
-            content: quoted && <div className="dns-quote-card">
-                <div><span>Domain</span><code>{quoted.domain}</code></div><div><span>Term</span><b>{quoted.years} year{quoted.years === 1 ? '' : 's'}</b></div>
-                <div><span>Exact price</span><b>{quoted.price} {quoted.currency}</b></div><div><span>Expires</span><b>{fmt.datetime(quoted.expires)}</b></div>
-                <label className="field"><span className="field-label">Type {quoted.domain} to confirm <em>*</em></span><input className="input" value={typedDomain} disabled={attempted.current} autoComplete="off" onChange={(event) => setTypedDomain(event.target.value)} /></label>
-            </div>,
+            key: 'confirm', label: 'Confirm purchase', fields: [],
+            content: quoted ? <div className="dns-quote-card"><div><span>Domain</span><code>{quoted.domain}</code></div><div><span>Term</span><b>1 year</b></div><div><span>Exact price</span><b>{quoted.price} {quoted.currency}</b></div><div><span>Expires</span><b>{fmt.datetime(quoted.expires)}</b></div><div><span>WHOIS privacy</span><b>{quoted.privacy_supported ? 'Requested where supported' : 'Not available for this domain'}</b></div>{!quoted.privacy_supported && <p className="form-alert">Your registrant contact may be publicly visible. Confirm only if you accept registration without WHOIS privacy.</p>}<label className="field"><span className="field-label">Type {quoted.domain} to confirm <em>*</em> <OperationsHelp label="purchase confirmation">Confirming charges the exact quoted price for one year. The confirmation can be used only once. An uncertain response must be checked in the purchase ledger.</OperationsHelp></span><input className="input" aria-label={`Type ${quoted.domain} to confirm`} value={typedDomain} disabled={busy || attempted.current} autoComplete="off" onChange={event => setTypedDomain(event.target.value)} /></label></div> : <p className="form-alert" role="alert">Your quote expired. Go back to request a new quote.</p>,
             onNext: async () => {
-                if (inFlight.current || attempted.current) throw new Error('This quote has already been attempted');
-                const transient = quoteRef.current;
-                if (!transient || !group || !selected || selected.price == null || !selected.currency) throw new Error('The quote is missing or expired. Start over.');
-                if (!quoteMatches(transient.identity, { group: group.id, domain: selected.name, years, price: selected.price, currency: selected.currency })) { clearQuote(); throw new Error('The quote expired or its inputs changed. Start over.'); }
+                if (attempted.current) throw new Error('This quote has already been attempted'); const transient = quoteRef.current;
+                if (!transient || !group || !selected || selected.price == null || !selected.currency) throw new Error('The quote is missing or expired. Go back for a new quote.');
+                if (!quoteMatches(transient.identity, { group: group.id, domain: selected.name, years: 1, price: selected.price, currency: selected.currency })) { clearQuote(); throw new Error('The quote expired or its inputs changed. Go back for a new quote.'); }
                 if (typedDomain.trim().toLowerCase() !== transient.identity.domain) throw new Error(`Type ${transient.identity.domain} exactly`);
-                inFlight.current = true; attempted.current = true; const accepted = ++generation.current;
-                const token = transient.token; quoteRef.current = null;
+                attempted.current = true; const accepted = ++generation.current; const token = transient.token; quoteRef.current = null; setPurchaseId(transient.identity.purchase); onAttempt(transient.identity.purchase);
                 try {
-                    const acknowledgement = await purchaseDomain({ group: transient.identity.group, purchase: transient.identity.purchase, confirm_token: token, confirm_domain: transient.identity.domain, confirm_price: transient.identity.price });
-                    const settled = await pollPurchaseLedger({ purchase: acknowledgement.purchase, isCurrent: () => generation.current === accepted, fetch: fetchPurchaseDetail });
-                    if (!settled) setTerminalMessage(`Purchase acknowledgement was received, but bounded polling did not settle. ${PURCHASE_MAY_HAVE_MOVED}`);
-                    else { setReceipt(settled); setTerminalMessage(settled.status === 'completed' ? 'Registration completed.' : `${redactRegistrarError(settled.error)} ${PURCHASE_MAY_HAVE_MOVED}`); }
-                } catch (error) {
-                    setTerminalMessage(`${redactRegistrarError(error)} ${PURCHASE_MAY_HAVE_MOVED}`);
-                    try { setReceipt(await fetchPurchaseDetail(transient.identity.purchase)); } catch { /* detail stays local and optional */ }
-                } finally {
-                    await Promise.allSettled([DomainPurchaseModel.invalidate(queryClient), DomainModel.invalidate(queryClient)]);
-                    inFlight.current = false;
-                }
+                    const acknowledgement = await purchaseDomain({ group: transient.identity.group, purchase: transient.identity.purchase, confirm_token: token, confirm_domain: transient.identity.domain, confirm_price: transient.identity.price }, () => { if (!isCurrent(accepted)) throw new Error('The purchasing session changed. Review the exact purchase before continuing.'); });
+                    if (!isCurrent(accepted)) return;
+                    if (acknowledgement.purchase !== transient.identity.purchase || acknowledgement.name !== transient.identity.domain) throw new Error('The acknowledgement did not match this purchase');
+                    setKnownDomainId(acknowledgement.domain); setPrivacyDowngraded(acknowledgement.privacy_downgraded);
+                    const settled = await pollPurchaseLedger({ purchase: transient.identity.purchase, isCurrent: () => isCurrent(accepted), fetch: fetchPurchaseDetail });
+                    if (!isCurrent(accepted)) return;
+                    setReceipt(settled); setTerminalMessage(settled?.status === 'completed' ? 'Registration completed.' : PURCHASE_MAY_HAVE_MOVED);
+                } catch (reason) {
+                    if (!isCurrent(accepted)) return; setTerminalMessage(`${redactRegistrarError(reason)} ${PURCHASE_MAY_HAVE_MOVED}`);
+                    try { const value = await fetchPurchaseDetail(transient.identity.purchase); if (isCurrent(accepted) && value.id === transient.identity.purchase) setReceipt(value); } catch { /* Exact ledger remains available for deliberate Refresh. */ }
+                } finally { await Promise.allSettled([DomainPurchaseModel.invalidate(queryClient), DomainModel.invalidate(queryClient)]); }
             },
         },
         {
-            key: 'receipt', label: 'Ledger', fields: [], terminal: true,
-            content: <div className="dns-purchase-receipt"><h3>{receipt?.status === 'completed' ? 'Purchase complete' : 'Check the durable ledger'}</h3><p className={receipt?.status === 'completed' ? '' : 'form-alert'}>{terminalMessage}</p>{receipt && <><div><span>Purchase</span><code>#{receipt.id}</code></div><div><span>Domain</span><code>{receipt.domain_name}</code></div><div><span>Status</span><Badge tone={receipt.status === 'completed' ? 'success' : receipt.status === 'failed' ? 'danger' : 'warning'}>{receipt.status}</Badge></div></>}<div className="modal-actions"><button className="btn btn-primary" onClick={onDone}>Close</button></div></div>,
+            key: 'receipt', label: 'Purchase status', fields: [], terminal: true,
+            content: <div className="dns-purchase-receipt"><h3>{receipt?.status === 'completed' ? 'Purchase complete' : 'Check purchase status'}</h3><p className={receipt?.status === 'completed' ? '' : 'form-alert'}>{terminalMessage}</p>{privacyDowngraded && <p role="alert" className="form-alert">The registrar completed registration without WHOIS privacy. Your registrant contact may be publicly visible.</p>}<div><span>Purchase</span><code>#{purchaseId}</code></div><div><span>Domain</span><code>{receipt?.domain_name ?? quoted?.domain}</code></div>{receipt && <div><span>Status</span><Badge tone={receipt.status === 'completed' ? 'success' : receipt.status === 'failed' ? 'danger' : 'warning'}>{receipt.status}</Badge></div>}<div className="modal-actions"><button className="btn" disabled={refreshing} onClick={() => void refresh()}>{refreshing ? 'Refreshing…' : 'Refresh'}</button><button className="btn" disabled={!purchaseId} onClick={() => { if (purchaseId) void modal.open(close => <DomainPurchaseDetail id={purchaseId} onNavigate={onDone} knownDomainId={knownDomainId} privacyDowngraded={privacyDowngraded} close={() => close(null)} />, { size: 'md', signal: modalOwner.current?.signal }); }}>View purchase</button><button className="btn btn-primary" onClick={onDone}>Close</button></div></div>,
         },
-    ], [base, group, onDone, queryClient, quoted, receipt, results, selected, terminalMessage, tlds, typedDomain, years]);
+    ], [base, busy, contactNotice, group, knownDomainId, missingContact, onDone, privacyDowngraded, purchaseId, queryClient, quoted, receipt, refreshing, results, selected, terminalMessage, tlds, typedDomain]);
+    return <FormWizard mode="wizard" resetKey={contactRevision} sections={sections} onBusyChange={handleBusy} onCancel={onDone} onFinish={() => undefined} onStepChange={setStep} nextText={step === 'confirm' ? 'Confirm purchase' : 'Continue'} />;
+}
 
-    return <FormWizard mode="wizard" sections={sections} onBusyChange={onBusyChange} onCancel={onDone} onFinish={() => undefined} nextText="Continue" />;
+/** Only the attempted ID survives same-user session replacement; tokens and drafts do not. */
+function PurchaseRecovery({ id, onDone }: { id: number; onDone?: () => void }) {
+    const [row, setRow] = useState<DomainPurchaseRow | null>(null); const [busy, setBusy] = useState(false); const [error, setError] = useState('');
+    const flight = useRef(false); const owner = useRef<AbortController | null>(null);
+    useEffect(() => { const controller = new AbortController(); owner.current = controller; return () => controller.abort(); }, []);
+    const refresh = async () => {
+        if (flight.current) return; const signal = owner.current?.signal; flight.current = true; setBusy(true); setError('');
+        try { const value = await fetchPurchaseDetail(id); if (signal?.aborted) return; if (value.id !== id) throw new Error('The ledger response did not match this purchase'); setRow(value); }
+        catch (reason) { if (!signal?.aborted) setError(redactRegistrarError(reason)); }
+        finally { if (!signal?.aborted) { flight.current = false; setBusy(false); } }
+    };
+    return <div className="dns-purchase-receipt"><h3>Check purchase #{id}</h3><p className="form-alert" role="alert">Your session changed. Review this purchase before starting another.</p>{row && <p><code>{row.domain_name}</code> · {row.status}</p>}{error && <p className="form-alert" role="alert">{error}</p>}<div className="modal-actions"><button className="btn" disabled={busy} onClick={() => void refresh()}>{busy ? 'Refreshing…' : 'Refresh'}</button><button className="btn" onClick={() => void modal.open(close => <DomainPurchaseDetail id={id} onNavigate={onDone} close={() => close(null)} />, { size: 'md', signal: owner.current?.signal })}>View purchase</button><button className="btn btn-primary" onClick={onDone}>Close</button></div></div>;
 }

package/src/admin/dns/DomainPurchasesPage.tsx

@@ -12,5 +12,5 @@ const columns: Column<DomainPurchaseRow>[] = [
 const filters: FilterDef[] = [{ key: 'status', label: 'Status', type: 'multiselect', options: ['quoted', 'submitted', 'completed', 'failed', 'expired'].map((value) => ({ value, label: value })) }];
 export function DomainPurchasesPage() {
     const { data: me } = useMe(); const canManage = hasPermission(me ?? null, DNS_MANAGE_PERMISSIONS, null);
-    return <ModelTable model={DomainPurchaseModel} eyebrow="Infrastructure · DNS" title="Domain Purchases" searchable searchPlaceholder="Search domain or status" columns={columns} filters={filters} defaultParams={{ sort: '-created' }} persistState persistKey="admin:dns:purchases" onRowClick={(row) => void modal.detail((close) => <DomainPurchaseDetail id={row.id} close={() => close(null)} />)} {...(canManage ? { addLabel: 'Add domain', onAdd: () => void showDomainOnboarding() } : {})} />;
+    return <ModelTable model={DomainPurchaseModel} eyebrow="Infrastructure · DNS" title="Domain Purchases" searchable searchPlaceholder="Search domain or status" columns={columns} filters={filters} defaultParams={{ sort: '-created' }} persistState persistKey="admin:dns:purchases" onRowClick={(row) => void modal.open((close) => <DomainPurchaseDetail id={row.id} close={() => close(null)} />, { size: 'md' })} {...(canManage ? { addLabel: 'Add domain', onAdd: () => void showDomainOnboarding() } : {})} />;
 }