portal-mojo 0.1.0

package/src/admin/dns/DnsRecordsPanel.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react';
+import { modal, toast } from '../../ui';
+import { useCan } from '../../client';
+import { deleteDnsRecordSet, useDnsCapabilities, useDnsRecordCoordinator, useDnsRecords } from './api';
+import { DNS_RECORD_TYPES, diffRecordSet, isSpentAcmeChallenge, recordKey, recordWarnings, relativeRecordName, snapshotRecordOwner } from './dns-data';
+import { DnsRecordEditor } from './DnsRecordEditor';
+import { DNS_MANAGE_PERMISSIONS, type DnsRecordRow, type DomainRow } from './models';
+
+export interface DnsRecordsPanelProps { domain: DomainRow; recordType?: string; onRecordTypeChange?: (type: string) => void }
+const errorMessage = (error: unknown): string => error instanceof Error ? error.message : String(error);
+const groupId = (domain: DomainRow): number | null => typeof domain.group === 'number' ? domain.group : domain.group?.id ?? null;
+
+export function DnsRecordsPanel({ domain, recordType = '', onRecordTypeChange }: DnsRecordsPanelProps) {
+    const active = domain.status === 'active';
+    const generalProvider = ['route53', 'godaddy'].includes(domain.provider.toLowerCase());
+    const credential = typeof domain.credential === 'object' ? domain.credential : null;
+    const credentialUsable = domain.provider !== 'godaddy' || (!!credential && credential.is_active && credential.verified);
+    const eligible = active && generalProvider && credentialUsable;
+    const capabilities = useDnsCapabilities(groupId(domain), { enabled: eligible });
+    const records = useDnsRecords(domain.id, eligible && !capabilities.isError);
+    const { can: canManage } = useCan(DNS_MANAGE_PERMISSIONS);
+    const coordinate = useDnsRecordCoordinator(domain.id);
+    const providerKnown = capabilities.data?.providers.some((provider) => provider.name.toLowerCase() === domain.provider.toLowerCase()) ?? false;
+    const rows = records.data?.records ?? [];
+    const knownObserved = [...new Set(rows.map((record) => record.type.toUpperCase()))];
+    const choices = [...DNS_RECORD_TYPES.filter((type) => capabilities.data?.allowed_record_types.includes(type) || knownObserved.includes(type)), ...knownObserved.filter((type) => !DNS_RECORD_TYPES.includes(type as typeof DNS_RECORD_TYPES[number]))];
+    const visible = recordType ? rows.filter((record) => record.type.toUpperCase() === recordType.toUpperCase()) : rows;
+
+    if (!active) return <Blocked title="DNS changes are unavailable">This domain is {domain.status}. Live records are available only after activation completes.</Blocked>;
+    if (domain.provider === 'mojo') return <Blocked title="Certificate-only domain">Mojo domains mark delegated certificate coverage and do not support general DNS record management.</Blocked>;
+    if (!generalProvider) return <Blocked title="Unsupported DNS provider">The {domain.provider || 'unknown'} provider does not expose general DNS through this administration surface.</Blocked>;
+    if (!credentialUsable) return <Blocked title="Provider credential unavailable">This GoDaddy domain needs an active, verified provider credential. {credential?.is_active === false ? 'The linked credential is inactive.' : credential?.verified === false ? 'The linked credential is unverified.' : 'No usable credential is linked.'}</Blocked>;
+    if (capabilities.isLoading) return <div className="dns-state dim">Loading DNS capabilities…</div>;
+    if (capabilities.isError) return <Retry error={capabilities.error} retry={() => void capabilities.refetch()} />;
+    if (!providerKnown) return <Blocked title="Provider unavailable">This deployment did not advertise {domain.provider} in its DNS capabilities.</Blocked>;
+    if (records.isLoading) return <div className="dns-state dim">Reading the live provider zone…</div>;
+    if (records.isError) return <Retry error={records.error} retry={() => void records.refetch()} />;
+
+    const openEditor = (record?: DnsRecordRow) => {
+        void modal.open<boolean>((close) => <DnsRecordEditor domain={domain} capabilities={capabilities.data!} records={rows} record={record} onClose={(saved) => close(saved)} />, { size: 'lg' });
+    };
+    const remove = async (record: DnsRecordRow) => {
+        const opening = snapshotRecordOwner(rows, record.type, record.name);
+        const diff = diffRecordSet(record, null);
+        const warnings = recordWarnings({ provider: domain.provider, type: record.type, name: record.name, values: [], ttl: record.ttl, zone: domain.name, existingRecords: rows, before: record.record_values, deleting: true });
+        const ok = await modal.confirm({ title: 'Delete whole record set?', danger: true, confirmText: 'Delete set', message: <div className="dns-confirm"><p>Delete <code>{record.type} {record.name}</code>?</p><p>Every value will be removed:</p><ul>{diff.removed.map((value, index) => <li key={`${value}-${index}`}><code>{value}</code></li>)}</ul>{warnings.map((warning) => <p className="dns-warning" key={warning}>{warning}</p>)}</div> });
+        if (!ok) return;
+        try {
+            await coordinate({ opening, intended: null, write: () => deleteDnsRecordSet(domain.id, { type: record.type, name: record.name }) });
+            toast.success('DNS record set deleted');
+        } catch (error) {
+            const ambiguous = error != null && typeof error === 'object' && 'dnsLiveStateApplied' in error;
+            toast.error(`${errorMessage(error)}${ambiguous ? ' The refreshed live zone shows that the set is gone.' : ''}`);
+        }
+    };
+
+    return <div className="dns-records-panel">
+        <div className="dns-record-toolbar"><label className="field dns-record-filter"><span className="field-label">Record type</span><select className="input" value={recordType} onChange={(event) => onRecordTypeChange?.(event.target.value)}><option value="">All record types</option>{choices.map((type) => <option key={type} value={type}>{type}</option>)}</select></label><div className="dns-toolbar-actions"><button type="button" className="btn" onClick={() => void records.refetch()}><i className={`bi ${records.isFetching ? 'bi-arrow-repeat spin' : 'bi-arrow-clockwise'}`} /> Refresh</button>{canManage && <button type="button" className="btn btn-primary" onClick={() => openEditor()}><i className="bi bi-plus-lg" /> Add record set</button>}</div></div>
+        {domain.provider === 'godaddy' && <div className="dns-provider-note">GoDaddy DNS is managed here. Registrar purchase, renewal, privacy, and WHOIS remain in the provider account; refreshed TTLs have a 600-second floor and whole-set deletion is unavailable.</div>}
+        {visible.length === 0 ? <div className="dns-state dim">{rows.length ? 'No records match this type.' : 'The provider returned an empty zone.'}</div> : <div className="dns-table-wrap"><table className="tbl dns-record-table"><thead><tr><th>Type</th><th>Name</th><th>Values</th><th>TTL</th><th><span className="sr-only">Actions</span></th></tr></thead><tbody>{visible.map((record) => {
+            const type = record.type.toUpperCase();
+            const supported = !!capabilities.data?.allowed_record_types.map((entry) => entry.toUpperCase()).includes(type) && DNS_RECORD_TYPES.includes(type as typeof DNS_RECORD_TYPES[number]);
+            const spent = isSpentAcmeChallenge(domain.provider, record);
+            const mayDelete = canManage && supported && !spent && domain.provider === 'route53' && !(['NS', 'SOA'].includes(type) && relativeRecordName(record.name, domain.name) === '@');
+            return <tr key={recordKey(record)}><td><code>{type}</code>{spent && <span className="chip chip-muted dns-spent">spent</span>}</td><td><code>{relativeRecordName(record.name, domain.name)}</code></td><td><ul className="dns-record-values">{record.record_values.map((value, index) => <li key={`${value}-${index}`}><code>{value}</code></li>)}</ul></td><td>{record.ttl}s</td><td><div className="dns-row-actions">{canManage && supported && !spent && <button type="button" className="btn-icon" title="Edit complete set" onClick={() => openEditor(record)}><i className="bi bi-pencil" /></button>}{mayDelete && <button type="button" className="btn-icon text-bad" title="Delete complete set" onClick={() => void remove(record)}><i className="bi bi-trash" /></button>}</div></td></tr>;
+        })}</tbody></table></div>}
+    </div>;
+}
+
+function Blocked({ title, children }: { title: string; children: ReactNode }) { return <div className="dns-blocked"><i className="bi bi-shield-lock" /><div><strong>{title}</strong><p>{children}</p></div></div>; }
+function Retry({ error, retry }: { error: unknown; retry: () => void }) { return <div className="dns-error" role="alert"><strong>Could not read the live zone.</strong><p>{errorMessage(error)}</p><button type="button" className="btn" onClick={retry}>Retry</button></div>; }

package/src/admin/dns/DomainCertificatesSection.tsx

@@ -0,0 +1,40 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { hasPermission, useMe } from '../../client';
+import { Badge, fmt, modal, toast } from '../../ui';
+import { CertificateDetail } from './CertificateDetail';
+import { CertificateLifecyclePoller } from './CertificateLifecyclePoller';
+import { CertificateRequestDialog } from './CertificateRequestDialog';
+import { canInspectHouseCertificate, certificateStatusTone } from './certificate-data';
+import { CertificateModel, DNS_MANAGE_PERMISSIONS, type CertificateRow, type DomainRow } from './models';
+
+export function DomainCertificatesSection({ domain }: { domain: DomainRow }) {
+    const queryClient = useQueryClient();
+    const { data: me } = useMe();
+    const canManage = hasPermission(me ?? null, DNS_MANAGE_PERMISSIONS, null);
+    const query = CertificateModel.useList({ domain: domain.id, sort: '-created', start: 0, size: 25 });
+    const open = async (row: CertificateRow) => {
+        if (!canInspectHouseCertificate(domain, me?.is_superuser === true)) {
+            toast.error('This certificate cannot be inspected with the current session.');
+            return;
+        }
+        try {
+            await CertificateModel.fetchOne(queryClient, row.id);
+            await modal.detail((close) => <CertificateDetail id={row.id} domain={domain} onClose={() => close(null)} />);
+        } catch (reason) {
+            toast.error(reason instanceof Error ? reason.message : 'Certificate detail is unavailable');
+        }
+    };
+    const request = async () => {
+        await modal.open((close) => <CertificateRequestDialog close={close} domain={domain} />, { size: 'md' });
+    };
+    return <div className="dns-domain-certificates">
+        <div className="dns-cert-section-head"><div><div className="eyebrow">Certificates</div><p className="dim">Issued certificate custody and ACME renewal state for this domain.</p></div>{canManage && <button className="btn btn-primary" onClick={() => void request()}><i className="bi bi-patch-plus" /> Request</button>}</div>
+        {query.isPending ? <div className="dns-state dim">Loading certificates…</div> : query.error ? <div className="dns-errors">{query.error.message}</div> : !query.data?.rows.length ? <div className="dns-state dim">No certificates issued for this domain.</div> : <div className="dns-cert-list">
+            {query.data.rows.map((row) => <button type="button" className="dns-cert-card" key={row.id} onClick={() => void open(row)}>
+                <span><code>{row.common_name}</code><small>{row.sans.length} SAN{row.sans.length === 1 ? '' : 's'} · expires {fmt.date(row.not_after)}</small></span>
+                <Badge tone={certificateStatusTone(row.status)}>{row.status}</Badge>
+            </button>)}
+        </div>}
+        <CertificateLifecyclePoller domain={domain.id} />
+    </div>;
+}

package/src/admin/dns/DomainDetail.tsx

@@ -0,0 +1,41 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+import { hasPermission, useMe } from '../../client';
+import { DetailView, Eyebrow, FlatRow, fmt } from '../../ui';
+import { useDnsCapabilities } from './api';
+import { providerLabel } from './data';
+import { useDnsDomainLinks } from './domain-links';
+import { DnsRecordsPanel } from './DnsRecordsPanel';
+import { DomainCertificatesSection } from './DomainCertificatesSection';
+import { DomainModel } from './models';
+
+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();
+    const domain = query.data;
+    const group = typeof domain?.group === 'number' ? domain.group : domain?.group?.id ?? null;
+    const capabilities = useDnsCapabilities(group, { enabled: !!domain });
+    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 = typeof domain.group === 'object' ? domain.group?.name ?? 'Platform' : domain.group ?? 'Platform';
+    const credential = typeof domain.credential === 'object' ? domain.credential : null;
+    return <DetailView
+        icon="bi-globe2" title={domain.name} subtitle={`${providerLabel(domain.provider)}${domain.hosted_zone_id ? ` · ${domain.hosted_zone_id}` : ''}`}
+        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"><Eyebrow>Domain</Eyebrow><FlatRow label="Name"><code>{domain.name}</code></FlatRow><FlatRow label="Provider">{providerLabel(domain.provider)}</FlatRow><FlatRow label="Status">{domain.status}</FlatRow><FlatRow label="Group">{groupLabel}</FlatRow>{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="Expires">{fmt.date(domain.expires)}</FlatRow><FlatRow label="Verified">{domain.verified ? 'Yes' : 'No'}</FlatRow><FlatRow label="Auto-renew">{domain.auto_renew ? 'Enabled' : 'Disabled'}</FlatRow><FlatRow label="WHOIS privacy">{domain.privacy ? 'Enabled' : 'Disabled'}</FlatRow><FlatRow label="Credential">{credential ? `${credential.name} · ${credential.is_active && credential.verified ? 'usable' : 'unavailable'}` : '—'}</FlatRow>{domain.last_error && <div className="dns-error">{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.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: '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}
+    />;
+}

package/src/admin/dns/DomainOnboardingDialog.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useMe } from '../../client';
+import { modal, toast } from '../../ui';
+import { adoptHouseDomain } from './api';
+import { DomainModel } from './models';
+import { normalizePurchaseDomain, redactRegistrarError } from './purchase-data';
+import { DomainPurchaseWizard } from './DomainPurchaseWizard';
+
+function DomainOnboardingDialog({ close, setBusyGate }: { close: () => void; setBusyGate: (busy: boolean) => void }) {
+    const { data: me } = useMe(); const queryClient = useQueryClient();
+    const [mode, setMode] = useState<'menu' | 'purchase' | 'adopt'>('menu'); const [name, setName] = useState(''); const [busy, setBusy] = useState(false); const [error, setError] = useState('');
+    const adopt = async () => {
+        if (busy || me?.is_superuser !== true) return; setBusy(true); setBusyGate(true); setError('');
+        try { const domain = await adoptHouseDomain({ domain: normalizePurchaseDomain(name) }); await DomainModel.invalidate(queryClient); toast.success(`${domain.name} adopted at House scope`); close(); }
+        catch (reason) { setError(redactRegistrarError(reason)); }
+        finally { setBusy(false); setBusyGate(false); }
+    };
+    if (mode === 'purchase') return <div className="modal-pad"><h2 className="modal-title">Purchase a domain</h2><DomainPurchaseWizard onDone={close} onBusyChange={setBusyGate} /></div>;
+    if (mode === 'adopt') return <div className="modal-pad"><h2 className="modal-title">Adopt a House domain</h2><p className="dim">Manual, exact-name adoption only. This does not enumerate the House account and creates no tenant assignment.</p>{error && <div className="form-alert">{error}</div>}<label className="field"><span className="field-label">Existing House domain</span><input className="input" value={name} disabled={busy} onChange={(event) => setName(event.target.value)} /></label><div className="modal-actions"><button className="btn" disabled={busy} onClick={() => setMode('menu')}>Back</button><button className="btn btn-primary" disabled={busy || !name.trim()} onClick={() => void adopt()}>{busy ? 'Adopting…' : 'Adopt exact name'}</button></div></div>;
+    return <div className="modal-pad"><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('purchase')}><i className="bi bi-cart-check" /><b>Purchase a new domain</b><span>Search, quote, confirm once, and reconcile against the durable ledger.</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 name manually; no account discovery.</span></button>}</div><div className="modal-actions"><button className="btn" onClick={close}>Cancel</button></div></div>;
+}
+
+export function showDomainOnboarding(): Promise<unknown> {
+    let busy = false;
+    return modal.open((close) => <DomainOnboardingDialog close={() => close(null)} setBusyGate={(value) => { busy = value; }} />, { size: 'lg', canDismiss: () => !busy });
+}

package/src/admin/dns/DomainPurchaseDetail.tsx

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+import { Badge, FlatRow, fmt } from '../../ui';
+import { fetchPurchaseDetail } from './api';
+import { redactRegistrarError } from './purchase-data';
+import 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>;
+}

package/src/admin/dns/DomainPurchaseWizard.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { CollectionSelect, FormWizard, Badge, fmt, type FormWizardSection } from '../../ui';
+import { DNS_GROUP_CHOICE_ENDPOINT, fetchDnsCapabilities, fetchPurchaseDetail, purchaseDomain, quoteDomain, searchRegistrarBatch } from './api';
+import { 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';
+
+interface TransientQuote { readonly token: string; readonly identity: Readonly<QuoteIdentity> }
+
+export function DomainPurchaseWizard({ onDone, onBusyChange }: { onDone?: () => void; onBusyChange?: (busy: boolean) => 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 clearQuote = () => { quoteRef.current = null; setQuoted(null); setTypedDomain(''); };
+
+    useEffect(() => () => { generation.current += 1; quoteRef.current = null; }, []);
+    useEffect(() => {
+        if (!quoted) 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);
+        return () => window.clearTimeout(timer);
+    }, [quoted]);
+    const changeUpstream = (change: () => void) => { if (attempted.current) return; generation.current += 1; clearQuote(); setResults([]); setSelected(null); change(); };
+
+    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.',
+            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>
+            </div>,
+            onNext: async () => {
+                if (!group) throw new Error('Choose a purchasing group');
+                const caps = await fetchDnsCapabilities(group.id);
+                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');
+                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 });
+                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);
+            },
+        },
+        {
+            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>,
+            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 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');
+                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>,
+            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 (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;
+                try {
+                    const acknowledgement = await purchaseDomain({ group: transient.identity.group, purchase: transient.identity.purchase, confirm_token: token });
+                    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;
+                }
+            },
+        },
+        {
+            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>,
+        },
+    ], [base, group, onDone, queryClient, quoted, receipt, results, selected, terminalMessage, tlds, typedDomain, years]);
+
+    return <FormWizard mode="wizard" sections={sections} onBusyChange={onBusyChange} onCancel={onDone} onFinish={() => undefined} nextText="Continue" />;
+}

package/src/admin/dns/DomainPurchasesPage.tsx

@@ -0,0 +1,16 @@
+import { useMe, hasPermission } from '../../client';
+import { Badge, ModelTable, modal, type Column, type FilterDef } from '../../ui';
+import { DomainPurchaseDetail } from './DomainPurchaseDetail';
+import { showDomainOnboarding } from './DomainOnboardingDialog';
+import { DNS_MANAGE_PERMISSIONS, DomainPurchaseModel, type DomainPurchaseRow } from './models';
+
+const columns: Column<DomainPurchaseRow>[] = [
+    { key: 'domain_name', label: 'Domain', hideable: false, render: (row) => <code>{row.domain_name}</code> },
+    { key: 'status', label: 'Status', render: (row) => <Badge tone={row.status === 'completed' ? 'success' : row.status === 'failed' || row.status === 'expired' ? 'danger' : 'warning'}>{row.status}</Badge> },
+    { key: 'price', label: 'Price', align: 'end', render: (row) => `${row.price ?? '—'} ${row.currency}` },
+];
+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() } : {})} />;
+}

package/src/admin/dns/DomainsPage.tsx

@@ -0,0 +1,27 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { Badge, ModelTable, fmt, modal, type Column, type FilterDef } from '../../ui';
+import { DomainDetail } from './DomainDetail';
+import { DomainModel, type DomainRow } from './models';
+import { providerLabel } from './data';
+
+const columns: Column<DomainRow>[] = [
+    { key: 'name', label: 'Domain', sortable: true, hideable: false, render: (row) => <code>{row.name}</code> },
+    { key: 'provider', label: 'Provider', sortable: true, render: (row) => providerLabel(row.provider) },
+    { key: 'status', label: 'Status', sortable: true, render: (row) => <Badge tone={fmt.inferTone(row.status)}>{row.status}</Badge> },
+    { key: 'group', label: 'Group', render: (row) => typeof row.group === 'object' ? row.group?.name ?? 'Platform' : row.group ?? 'Platform' },
+    { key: 'expires', label: 'Expires', sortable: true, render: (row) => fmt.date(row.expires) },
+    { key: 'created', label: 'Created', sortable: true, render: (row) => fmt.date(row.created) },
+];
+const filters: FilterDef[] = [
+    { key: 'provider', label: 'Provider', type: 'select', options: [{ value: 'route53', label: 'Route 53' }, { value: 'godaddy', label: 'GoDaddy' }, { value: 'mojo', label: 'Mojo certificate-only' }] },
+    { key: 'status', label: 'Status', type: 'select', options: ['pending', 'registering', 'active'].map((value) => ({ value, label: value })) },
+];
+
+export function DomainsPage() {
+    const queryClient = useQueryClient();
+    const open = async (row: DomainRow) => {
+        await DomainModel.fetchOne(queryClient, row.id);
+        await modal.detail((close) => <DomainDetail id={row.id} onClose={() => close(null)} />);
+    };
+    return <ModelTable<DomainRow> model={DomainModel} eyebrow="Infrastructure · DNS" title="Domains" searchable searchPlaceholder="Search domain names" columns={columns} filters={filters} defaultParams={{ sort: 'name' }} columnChooser persistState persistKey="admin:dns:domains" onRowClick={(row) => void open(row)} />;
+}