portal-mojo 0.1.0

package/src/admin/dns/CertificateDetail.tsx

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { hasPermission, useMe } from '../../client';
+import { Badge, DetailView, Eyebrow, FlatRow, fmt, modal, toast } from '../../ui';
+import { revokeCertificate, useAcmeDelegations, useDnsCapabilities } from './api';
+import {
+    canInspectHouseCertificate, certificateStatusTone, deriveCertificateRenewalHealth,
+} from './certificate-data';
+import { CertificateModel, DNS_MANAGE_PERMISSIONS, type CertificateRow, type DomainRow } from './models';
+
+function healthLabel(row: CertificateRow): string {
+    const health = deriveCertificateRenewalHealth(row);
+    if (health === 'due') return 'Renewal due';
+    if (health === 'renewal-error') return 'Renewal error';
+    if (health === 'healthy') return 'Renewal scheduled';
+    return health.charAt(0).toUpperCase() + health.slice(1);
+}
+
+function AllowedCertificateDetail({ id, domain, onClose }: { id: number; domain: DomainRow; onClose: () => void }) {
+    const queryClient = useQueryClient();
+    const query = CertificateModel.useOne(id);
+    const { data: me } = useMe();
+    const groupId = typeof domain.group === 'number' ? domain.group : domain.group?.id ?? null;
+    const capabilities = useDnsCapabilities(groupId);
+    const delegations = useAcmeDelegations(domain.id);
+    const [revoking, setRevoking] = useState(false);
+    const certificate = query.data;
+    if (query.isPending) return <div className="modal-pad dim">Loading certificate…</div>;
+    if (!certificate || query.error) return <div className="modal-pad text-bad">{query.error?.message ?? 'Certificate not found'}</div>;
+    const health = deriveCertificateRenewalHealth(certificate);
+    const canManage = hasPermission(me ?? null, DNS_MANAGE_PERMISSIONS, null);
+
+    const revoke = async () => {
+        if (revoking) return;
+        const confirmed = await modal.confirm({
+            title: 'Revoke certificate',
+            message: <>Revoke the certificate for <code>{certificate.common_name}</code>? Hosts may continue serving it until they sync a replacement. This cannot be undone.</>,
+            confirmText: 'Revoke', danger: true,
+        });
+        if (!confirmed) return;
+        setRevoking(true);
+        try {
+            await revokeCertificate(queryClient, certificate.id);
+            toast.success('Certificate revoked');
+        } catch (reason) {
+            toast.error(reason instanceof Error ? reason.message : 'Certificate revocation failed');
+        } finally {
+            setRevoking(false);
+        }
+    };
+
+    const delegation = (delegations.data ?? [])[0] ?? null;
+    const expiryTone = certificate.days_remaining != null && certificate.days_remaining < 14 ? 'danger'
+        : certificate.days_remaining != null && certificate.days_remaining < (capabilities.data?.cert_renew_days ?? 30) ? 'warning'
+            : 'success';
+    return <DetailView<CertificateRow>
+        icon="bi-patch-check"
+        title={certificate.common_name || `Certificate ${certificate.id}`}
+        subtitle={certificate.issuer ?? 'Issued over ACME DNS-01'}
+        chips={[
+            { text: certificate.status, tone: certificateStatusTone(certificate.status) },
+            ...(certificate.days_remaining == null ? [] : [{ text: `${certificate.days_remaining} days left`, tone: expiryTone as 'success' | 'warning' | 'danger' }]),
+        ]}
+        sections={[
+            { key: 'overview', label: 'Overview', icon: 'bi-grid-1x2', render: () => <div className="dns-cert-detail-section">
+                <Eyebrow>Certificate</Eyebrow>
+                <FlatRow label="Common name"><code>{certificate.common_name}</code></FlatRow>
+                <FlatRow label="Status"><Badge tone={certificateStatusTone(certificate.status)}>{certificate.status}</Badge></FlatRow>
+                <FlatRow label="Domain"><code>{domain.name}</code></FlatRow>
+                <FlatRow label="Issuer">{certificate.issuer ?? '—'}</FlatRow>
+                <FlatRow label="Serial"><code>{certificate.serial ?? '—'}</code></FlatRow>
+                <FlatRow label="Attempts">{certificate.attempts}</FlatRow>
+                {certificate.last_error && <div className="dns-errors"><strong>Last operation error</strong><span>{certificate.last_error}</span></div>}
+            </div> },
+            { key: 'names', label: 'Names', icon: 'bi-tags', render: () => <div className="dns-cert-detail-section">
+                <Eyebrow>Subject alternative names</Eyebrow>
+                {certificate.sans.length ? <ul className="dns-cert-names">{certificate.sans.map((name) => <li key={name}><code>{name}</code></li>)}</ul> : <p className="dim">No names are recorded yet; issuance may still be starting.</p>}
+            </div> },
+            { key: 'renewal', label: 'Renewal', icon: 'bi-arrow-repeat', render: () => <div className="dns-cert-detail-section">
+                <Eyebrow>Validity and renewal</Eyebrow>
+                <FlatRow label="Not before">{fmt.date(certificate.not_before)}</FlatRow>
+                <FlatRow label="Not after">{fmt.date(certificate.not_after)}</FlatRow>
+                <FlatRow label="Renew after">{fmt.date(certificate.renew_after)}</FlatRow>
+                <FlatRow label="Health">{healthLabel(certificate)}</FlatRow>
+                {health === 'due' && <div className="dns-provider-note">Renewal is due according to the backend-authored <code>renew_after</code> timestamp. The page watches the bounded lifecycle transition.</div>}
+                <Eyebrow>Certificate custody</Eyebrow>
+                <p className="dim">Serving hosts sync certificate material themselves after the backend broadcasts an update. Private keys are never loaded into this Admin client or its caches.</p>
+                {capabilities.data?.acme.staging && <p className="dns-warning">The deployment currently targets the ACME staging directory. That current setting does not prove how this existing certificate was issued.</p>}
+            </div> },
+            { key: 'delegation', label: 'Delegation', icon: 'bi-diagram-2', render: () => <div className="dns-cert-detail-section">
+                <Eyebrow>DNS-01 routing</Eyebrow>
+                {delegations.isPending ? <p className="dim">Loading delegation status…</p> : delegation ? <>
+                    <FlatRow label="State"><Badge tone={delegation.state === 'verified' ? 'success' : delegation.state === 'broken' ? 'danger' : 'warning'}>{delegation.state}</Badge></FlatRow>
+                    <FlatRow label="Source"><code>{delegation.source ?? '—'}</code></FlatRow>
+                    <FlatRow label="Target"><code>{delegation.target ?? '—'}</code></FlatRow>
+                    {delegation.last_error_code && <FlatRow label="Error code"><code>{delegation.last_error_code}</code></FlatRow>}
+                    {delegation.verified_at && delegation.state === 'broken' && <div className="dns-errors">This delegation is sticky after verification. Repair it; issuance will not fall back to direct provider DNS.</div>}
+                </> : <p className="dim">No delegated ACME route is attached; provider DNS is used directly.</p>}
+            </div> },
+        ]}
+        initialSection="overview"
+        contextMenu={canManage && certificate.status === 'active' ? [{ label: revoking ? 'Revoking…' : 'Revoke certificate', icon: 'bi-x-octagon', danger: true, onSelect: () => void revoke() }] : []}
+        menuContext={certificate}
+        onClose={onClose}
+    />;
+}
+
+/** Fail closed without explaining whether a denied id belongs to the house. */
+export function CertificateDetail({ id, domain, onClose }: { id: number; domain: DomainRow; onClose: () => void }) {
+    const { data: me } = useMe();
+    if (!canInspectHouseCertificate(domain, me?.is_superuser === true)) {
+        return <div className="modal-pad"><h2 className="modal-title">Certificate unavailable</h2><p className="dim">This certificate cannot be inspected with the current session.</p><div className="modal-actions"><button className="btn" onClick={onClose}>Close</button></div></div>;
+    }
+    return <AllowedCertificateDetail id={id} domain={domain} onClose={onClose} />;
+}

package/src/admin/dns/CertificateLifecyclePoller.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useRef, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import type { MojoList } from '../../client';
+import { CertificateModel, type CertificateRow } from './models';
+import { deriveCertificateRenewalHealth } from './certificate-data';
+
+export const CERTIFICATE_POLL_INTERVAL_MS = 10_000;
+export const CERTIFICATE_POLL_MAX_TICKS = 36;
+
+interface Operation {
+    kind: 'issuance' | 'renewal';
+    ticks: number;
+    sawIssuing: boolean;
+    baseline: Pick<CertificateRow, 'attempts' | 'modified' | 'not_after' | 'renew_after' | 'last_error'>;
+}
+
+function domainId(row: CertificateRow): number {
+    return typeof row.domain === 'number' ? row.domain : row.domain.id;
+}
+
+export function certificateNeedsLifecyclePolling(row: CertificateRow, nowSeconds = Date.now() / 1000): boolean {
+    const health = deriveCertificateRenewalHealth(row, nowSeconds);
+    return health === 'pending' || health === 'issuing' || health === 'due';
+}
+
+function cachedCertificates(value: unknown): CertificateRow[] {
+    if (value == null || typeof value !== 'object') return [];
+    if ('rows' in value && Array.isArray((value as MojoList<CertificateRow>).rows)) {
+        return (value as MojoList<CertificateRow>).rows;
+    }
+    if ('id' in value && typeof (value as CertificateRow).id === 'number') return [value as CertificateRow];
+    return [];
+}
+
+/**
+ * One bounded timer for one mounted certificate surface. New issuance polls
+ * pending/issuing rows. Due renewal remembers the active baseline and follows
+ * the active -> issuing -> changed-active/error transition. An already-active
+ * renewal error is terminal and never starts ordinary polling.
+ */
+export function CertificateLifecyclePoller({ domain, intervalMs = CERTIFICATE_POLL_INTERVAL_MS, maxTicks = CERTIFICATE_POLL_MAX_TICKS }: {
+    domain?: number;
+    intervalMs?: number;
+    maxTicks?: number;
+}) {
+    const queryClient = useQueryClient();
+    const operations = useRef(new Map<number, Operation>());
+    const settled = useRef(new Set<number>());
+    const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const [version, setVersion] = useState(0);
+
+    useEffect(() => queryClient.getQueryCache().subscribe((event) => {
+        if (event.query.queryKey[0] === CertificateModel.endpoint) setVersion((value) => value + 1);
+    }), [queryClient]);
+
+    useEffect(() => {
+        const rowsById = new Map<number, CertificateRow>();
+        for (const [, value] of queryClient.getQueriesData({ queryKey: CertificateModel.keys.root })) {
+            for (const row of cachedCertificates(value)) {
+                if (domain == null || domainId(row) === domain) rowsById.set(row.id, row);
+            }
+        }
+
+        for (const [id, operation] of operations.current) {
+            const row = rowsById.get(id);
+            if (!row || operation.ticks >= maxTicks) {
+                operations.current.delete(id);
+                settled.current.add(id);
+                continue;
+            }
+            if (operation.kind === 'issuance') {
+                if (row.status !== 'pending' && row.status !== 'issuing') {
+                    operations.current.delete(id);
+                    settled.current.add(id);
+                }
+                continue;
+            }
+            if (row.status === 'issuing') {
+                operation.sawIssuing = true;
+                continue;
+            }
+            if (row.status !== 'active') {
+                operations.current.delete(id);
+                settled.current.add(id);
+                continue;
+            }
+            const observable = row.attempts !== operation.baseline.attempts
+                || row.not_after !== operation.baseline.not_after
+                || row.renew_after !== operation.baseline.renew_after
+                || row.last_error !== operation.baseline.last_error;
+            if (row.last_error || (observable && (operation.sawIssuing || row.attempts > operation.baseline.attempts))) {
+                operations.current.delete(id);
+                settled.current.add(id);
+            }
+        }
+
+        for (const row of rowsById.values()) {
+            if (settled.current.has(row.id) || operations.current.has(row.id)) continue;
+            const health = deriveCertificateRenewalHealth(row);
+            if (health === 'pending' || health === 'issuing') {
+                operations.current.set(row.id, {
+                    kind: 'issuance', ticks: 0, sawIssuing: row.status === 'issuing',
+                    baseline: { attempts: row.attempts, modified: row.modified, not_after: row.not_after, renew_after: row.renew_after, last_error: row.last_error },
+                });
+            } else if (health === 'due') {
+                operations.current.set(row.id, {
+                    kind: 'renewal', ticks: 0, sawIssuing: false,
+                    baseline: { attempts: row.attempts, modified: row.modified, not_after: row.not_after, renew_after: row.renew_after, last_error: row.last_error },
+                });
+            }
+        }
+
+        if (operations.current.size === 0) {
+            if (timer.current) clearTimeout(timer.current);
+            timer.current = null;
+            return;
+        }
+        if (timer.current) return;
+        timer.current = setTimeout(() => {
+            timer.current = null;
+            for (const operation of operations.current.values()) operation.ticks += 1;
+            const tracked = [...operations.current.keys()].map((id) => CertificateModel.fetchOne(queryClient, id));
+            void Promise.allSettled([
+                ...tracked,
+                queryClient.refetchQueries({
+                    type: 'active',
+                    predicate: (query) => query.queryKey[0] === CertificateModel.endpoint,
+                }),
+            ]).finally(() => setVersion((value) => value + 1));
+        }, Math.max(250, intervalMs));
+    }, [domain, intervalMs, maxTicks, queryClient, version]);
+
+    useEffect(() => () => {
+        if (timer.current) clearTimeout(timer.current);
+        timer.current = null;
+        operations.current.clear();
+        settled.current.clear();
+    }, []);
+
+    return null;
+}

package/src/admin/dns/CertificateRequestDialog.tsx

@@ -0,0 +1,103 @@
+import { useMemo, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { TagInput, toast } from '../../ui';
+import { requestCertificate, useAcmeDelegations, useDnsCapabilities } from './api';
+import { deriveCertificateReadiness, validateCertificateNames } from './certificate-data';
+import { DnsCredentialModel, DomainModel, type CertificateRow, type DomainRow } from './models';
+
+function relationId(value: DomainRow['credential']): number | null {
+    if (typeof value === 'number') return value;
+    return value?.id ?? null;
+}
+
+export function CertificateRequestDialog({ close, domain: fixedDomain }: {
+    close: (value: CertificateRow | null) => void;
+    domain?: DomainRow;
+}) {
+    const queryClient = useQueryClient();
+    const domains = DomainModel.useList({ status: 'active', size: 200, sort: 'name' }, { enabled: fixedDomain == null });
+    const [domainId, setDomainId] = useState<number | null>(fixedDomain?.id ?? null);
+    const domainQuery = DomainModel.useOne(domainId);
+    const domain = domainQuery.data ?? (fixedDomain?.id === domainId ? fixedDomain : undefined);
+    const groupId = typeof domain?.group === 'number' ? domain.group : domain?.group?.id ?? null;
+    const capabilities = useDnsCapabilities(groupId, { enabled: domain != null });
+    const delegations = useAcmeDelegations(domain?.id ?? null, domain != null);
+    const credentialId = domain ? relationId(domain.credential) : null;
+    const credential = DnsCredentialModel.useOne(credentialId);
+    const [namesCsv, setNamesCsv] = useState('');
+    const [names, setNames] = useState<string[]>([]);
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const validation = useMemo(
+        () => domain ? validateCertificateNames(domain.name, names) : { names: [], errors: [] },
+        [domain, names],
+    );
+    const readiness = domain && capabilities.data && !delegations.isPending
+        ? deriveCertificateReadiness({
+            domain,
+            capabilities: capabilities.data,
+            delegations: delegations.data ?? [],
+            credential: credential.data ?? (typeof domain.credential === 'object' ? domain.credential : null),
+        })
+        : null;
+    const loadingReadiness = domainId != null && (domainQuery.isPending || capabilities.isPending || delegations.isPending || (credentialId != null && credential.isPending));
+
+    const submit = async (event: React.FormEvent) => {
+        event.preventDefault();
+        if (!domain || !readiness?.ready || validation.errors.length || submitting) return;
+        setSubmitting(true);
+        setError(null);
+        try {
+            const row = await requestCertificate(queryClient, domain.id, names.length ? validation.names : undefined);
+            toast.success('Certificate requested — issuance continues in the background.');
+            close(row);
+        } catch (reason) {
+            setError(reason instanceof Error ? reason.message : 'Certificate request failed');
+        } finally {
+            setSubmitting(false);
+        }
+    };
+
+    return <form className="modal-pad dns-cert-request" onSubmit={(event) => void submit(event)}>
+        <h2 className="modal-title">Request certificate</h2>
+        <p className="dim">Issue over ACME DNS-01. The request returns immediately; lifecycle status updates in the certificate inventory.</p>
+        {fixedDomain ? <div className="field"><span className="field-label">Domain</span><code>{fixedDomain.name}</code></div> : <label className="field">
+            <span className="field-label">Domain</span>
+            <select className="input" required value={domainId ?? ''} onChange={(event) => { setDomainId(event.target.value ? Number(event.target.value) : null); setNamesCsv(''); setNames([]); setError(null); }}>
+                <option value="">Select an active domain…</option>
+                {(domains.data?.rows ?? []).map((row) => <option key={row.id} value={row.id}>{row.name}</option>)}
+            </select>
+        </label>}
+        <label className="field">
+            <span className="field-label">Names</span>
+            <TagInput
+                name="certificate_names"
+                value={namesCsv}
+                onChange={(csv, next) => { setNamesCsv(csv); setNames(next); setError(null); }}
+                placeholder={domain ? `${domain.name}, *.${domain.name}` : 'Choose a domain first'}
+                maxTags={100}
+                maxLength={253}
+                disabled={!domain || submitting}
+            />
+            <span className="field-help">Leave empty for the domain apex plus its wildcard. Every SAN must stay inside the selected zone.</span>
+        </label>
+        {!!validation.errors.length && <div className="dns-errors" role="alert">{validation.errors.map((message) => <div key={message}>{message}</div>)}</div>}
+        {loadingReadiness && <div className="dns-cert-readiness dim"><i className="bi bi-arrow-repeat spin" /> Checking issuance readiness…</div>}
+        {readiness && <div className={`dns-cert-readiness${readiness.ready ? ' is-ready' : ' is-blocked'}`}>
+            <strong>{readiness.label}</strong>
+            {readiness.reason && <span>{readiness.reason}</span>}
+        </div>}
+        {capabilities.data?.acme.staging && <div className="dns-provider-note">
+            <strong>Current ACME configuration: staging.</strong> New certificates are not publicly trusted. This flag is current configuration, not historical provenance for existing certificates.
+        </div>}
+        {capabilities.error && <div className="dns-errors">{capabilities.error.message}</div>}
+        {error && <div className="dns-errors" role="alert">{error}</div>}
+        <div className="modal-actions">
+            <button className="btn" type="button" disabled={submitting} onClick={() => close(null)}>Cancel</button>
+            <button className="btn btn-primary" type="submit" disabled={!domain || !readiness?.ready || validation.errors.length > 0 || submitting}>
+                {submitting ? 'Requesting…' : 'Request certificate'}
+            </button>
+        </div>
+    </form>;
+}

package/src/admin/dns/CertificatesPage.tsx

@@ -0,0 +1,85 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { hasPermission, useMe } from '../../client';
+import { Badge, ModelTable, fmt, modal, toast, type Column, type FilterDef } from '../../ui';
+import { useDnsCapabilities } from './api';
+import { CertificateDetail } from './CertificateDetail';
+import { CertificateLifecyclePoller } from './CertificateLifecyclePoller';
+import { CertificateRequestDialog } from './CertificateRequestDialog';
+import {
+    canInspectHouseCertificate, certificateStatusTone, deriveCertificateRenewalHealth,
+} from './certificate-data';
+import {
+    CertificateModel, DNS_MANAGE_PERMISSIONS, DomainModel,
+    type CertificateRow,
+} from './models';
+
+function domainId(row: CertificateRow): number {
+    return typeof row.domain === 'number' ? row.domain : row.domain.id;
+}
+
+function renewalLabel(row: CertificateRow): string {
+    const health = deriveCertificateRenewalHealth(row);
+    if (health === 'healthy') return fmt.date(row.renew_after);
+    if (health === 'due') return 'Due now';
+    if (health === 'renewal-error') return 'Error';
+    return health === 'unknown' ? '—' : health;
+}
+
+const columns: Column<CertificateRow>[] = [
+    { key: 'common_name', label: 'Common name', sortable: true, hideable: false, render: (row) => <code>{row.common_name || `Certificate ${row.id}`}</code> },
+    { key: 'status', label: 'Status', sortable: true, render: (row) => <Badge tone={certificateStatusTone(row.status)}>{row.status}</Badge> },
+    { key: 'sans', label: 'SANs', align: 'end', render: (row) => row.sans.length },
+    { key: 'issuer', label: 'Issuer', render: (row) => row.issuer ?? '—' },
+    { key: 'not_after', label: 'Expires', sortable: true, render: (row) => fmt.date(row.not_after) },
+    { key: 'renew_after', label: 'Renewal', sortable: true, render: (row) => <span className={deriveCertificateRenewalHealth(row) === 'renewal-error' ? 'text-bad' : deriveCertificateRenewalHealth(row) === 'due' ? 'text-warn' : undefined}>{renewalLabel(row)}</span> },
+    { key: 'domain', label: 'Domain', render: (row) => typeof row.domain === 'number' ? `#${row.domain}` : <code>{row.domain.name}</code> },
+];
+
+const filters: FilterDef[] = [
+    { key: 'status', label: 'Status', type: 'multiselect', options: ['pending', 'issuing', 'active', 'failed', 'revoked'].map((value) => ({ value, label: value })) },
+    { key: 'domain', label: 'Domain id', type: 'number', lookup: 'exact' },
+];
+
+export function CertificatesPage() {
+    const queryClient = useQueryClient();
+    const { data: me } = useMe();
+    const capabilities = useDnsCapabilities(null);
+    const canManage = hasPermission(me ?? null, DNS_MANAGE_PERMISSIONS, null);
+    const openCertificate = async (row: CertificateRow) => {
+        try {
+            const domain = await DomainModel.fetchOne(queryClient, domainId(row));
+            if (!canInspectHouseCertificate(domain, me?.is_superuser === true)) {
+                toast.error('This certificate cannot be inspected with the current session.');
+                return;
+            }
+            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} />, { size: 'md' });
+    };
+    return <div className="dns-certificates-page">
+        {capabilities.data?.acme.configured === false && <div className="dns-cert-banner is-blocked"><i className="bi bi-exclamation-triangle" /><span><strong>ACME is not configured.</strong> Existing lifecycle state remains visible, but new certificate requests are unavailable.</span></div>}
+        {capabilities.data?.acme.staging === true && <div className="dns-cert-banner"><i className="bi bi-cone-striped" /><span><strong>Current ACME configuration uses staging.</strong> New certificates are not publicly trusted. Existing rows do not record historical staging provenance.</span></div>}
+        {capabilities.error && <div className="dns-cert-banner is-blocked"><i className="bi bi-exclamation-triangle" /><span>{capabilities.error.message}</span></div>}
+        <ModelTable<CertificateRow>
+            model={CertificateModel}
+            eyebrow="Infrastructure · DNS"
+            title="Certificates"
+            searchable
+            searchPlaceholder="Search common name or status"
+            columns={columns}
+            filters={filters}
+            defaultParams={{ sort: '-created' }}
+            columnChooser
+            persistState
+            persistKey="admin:dns:certificates"
+            onRowClick={(row) => void openCertificate(row)}
+            {...(canManage && capabilities.data?.acme.configured !== false ? { addLabel: 'Request certificate', onAdd: () => void request() } : {})}
+        />
+        <CertificateLifecyclePoller />
+    </div>;
+}

package/src/admin/dns/DnsRecordEditor.tsx

@@ -0,0 +1,110 @@
+import { useMemo, useState, type ClipboardEvent } from 'react';
+import { modal, toast } from '../../ui';
+import { upsertDnsRecord, useDnsRecordCoordinator } from './api';
+import {
+    DNS_RECORD_TYPES, autofixFieldValue, blankRecordValue, diffRecordSet, formatRecordValue,
+    parseRecordValue, recordWarnings, snapshotRecordOwner, specFor, toFqdn, validateRecordSet,
+    type DnsCorrection, type StructuredRecordValue,
+} from './dns-data';
+import type { DnsCapabilities, DnsRecordRow, DomainRow } from './models';
+
+export interface DnsRecordEditorProps {
+    domain: DomainRow;
+    capabilities: DnsCapabilities;
+    records: readonly DnsRecordRow[];
+    record?: DnsRecordRow;
+    onClose: (saved: boolean) => void;
+}
+
+function errorMessage(error: unknown): string { return error instanceof Error ? error.message : String(error); }
+
+export function DnsRecordEditor({ domain, capabilities, records, record, onClose }: DnsRecordEditorProps) {
+    const supported = DNS_RECORD_TYPES.filter((type) => capabilities.allowed_record_types.map((entry) => entry.toUpperCase()).includes(type));
+    const [type, setType] = useState(record?.type.toUpperCase() ?? supported[0] ?? 'A');
+    const [name, setName] = useState(record ? record.name : '@');
+    const [ttl, setTtl] = useState(String(record?.ttl ?? 300));
+    const [rows, setRows] = useState<StructuredRecordValue[]>(() => record?.record_values.map((value) => parseRecordValue(record.type, value)) ?? [blankRecordValue(type)]);
+    const [corrections, setCorrections] = useState<DnsCorrection[]>([]);
+    const [requestError, setRequestError] = useState<string | null>(null);
+    const [stale, setStale] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const coordinate = useDnsRecordCoordinator(domain.id);
+    const fqdn = toFqdn(name, domain.name);
+    const currentSpec = specFor(type);
+    const values = rows.map((row) => formatRecordValue(type, row));
+    const desired: DnsRecordRow = { type, name: fqdn, record_values: values, ttl: Number(ttl) };
+    const validation = validateRecordSet({ type, name, values, ttl, zone: domain.name, existingRecords: records, caps: capabilities, original: record ?? null });
+    const pendingCorrection = autofixFieldValue('hostname', name).value !== name
+        || rows.some((row) => currentSpec?.fields.some((field) => field.kind !== 'text' && autofixFieldValue(field.kind, row[field.key]).value !== (row[field.key] ?? '')));
+    const diff = diffRecordSet(record ?? null, desired);
+    const unchanged = !!record && diff.added.length === 0 && diff.removed.length === 0 && diff.ttl.before === diff.ttl.after;
+    const opening = useMemo(() => snapshotRecordOwner(records, record?.type ?? type, record?.name ?? fqdn), [records, record, type, fqdn]);
+
+    const correctValue = (rowIndex: number, fieldKey: string, raw: string) => {
+        const field = currentSpec?.fields.find((entry) => entry.key === fieldKey);
+        if (!field) return;
+        const result = autofixFieldValue(field.kind, raw, fieldKey, rowIndex);
+        setRows((current) => current.map((entry, index) => index === rowIndex ? { ...entry, [fieldKey]: result.value } : entry));
+        if (result.corrections.length) setCorrections((current) => [...current, ...result.corrections]);
+    };
+    const handlePaste = (event: ClipboardEvent<HTMLInputElement>, rowIndex: number, fieldKey: string) => {
+        const raw = event.clipboardData.getData('text');
+        const field = currentSpec?.fields.find((entry) => entry.key === fieldKey);
+        if (!field) return;
+        event.preventDefault();
+        const result = autofixFieldValue(field.kind, raw, fieldKey, rowIndex);
+        setRows((current) => current.map((entry, index) => index === rowIndex ? { ...entry, [fieldKey]: result.value } : entry));
+        if (result.corrections.length) setCorrections((current) => [...current, ...result.corrections]);
+    };
+    const changeType = (next: string) => { setType(next); setRows([blankRecordValue(next)]); setCorrections([]); setRequestError(null); };
+    const applyFix = (errorIndex: number) => {
+        const fix = validation.errors[errorIndex]?.fix;
+        if (fix?.action === 'change-type' && fix.type && !record) changeType(fix.type);
+        if (fix?.action === 'set-name' && fix.name) setName(fix.name);
+    };
+    const save = async () => {
+        setRequestError(null);
+        const checked = validateRecordSet({ type, name, values, ttl, zone: domain.name, existingRecords: records, caps: capabilities, original: record ?? null });
+        if (!checked.ok || pendingCorrection) return;
+        const warnings = recordWarnings({ provider: domain.provider, type, name, values, ttl, zone: domain.name, existingRecords: records, before: record?.record_values ?? [] });
+        const confirmed = await modal.confirm({
+            title: record ? 'Replace complete record set?' : 'Create record set?',
+            confirmText: record ? 'Replace set' : 'Create set',
+            message: <div className="dns-confirm"><p><code>{type} {fqdn}</code></p>{diff.ttl.before !== diff.ttl.after && <p>TTL: {diff.ttl.before ?? 'new'} → {diff.ttl.after}</p>}<DiffList label="Unchanged" values={diff.unchanged} /><DiffList label="Remove" values={diff.removed} tone="bad" /><DiffList label="Add" values={diff.added} tone="ok" />{domain.provider === 'godaddy' && Number(ttl) < 600 && <p className="dns-warning">GoDaddy will refresh this TTL at its 600-second provider floor.</p>}{warnings.map((warning) => <p className="dns-warning" key={warning}>{warning}</p>)}</div>,
+            danger: diff.removed.length > 0,
+        });
+        if (!confirmed) return;
+        setSaving(true);
+        try {
+            await coordinate({ opening, intended: desired, write: () => upsertDnsRecord(domain.id, desired) });
+            toast.success(record ? 'DNS record set updated' : 'DNS record set created');
+            onClose(true);
+        } catch (error) {
+            if (error instanceof Error && error.name === 'DnsStaleSnapshotError') setStale(true);
+            const ambiguous = error != null && typeof error === 'object' && 'dnsLiveStateApplied' in error;
+            setRequestError(`${errorMessage(error)}${ambiguous ? ' The refreshed live zone already reflects the requested state.' : ''}`);
+        } finally { setSaving(false); }
+    };
+
+    return <div className="modal-pad dns-editor">
+        <h2 className="modal-title">{record ? 'Edit DNS record set' : 'Add DNS record set'}</h2>
+        <p className="dim">Writes replace the complete <code>(type, name)</code> set. Existing identity is immutable.</p>
+        {corrections.length > 0 && <div className="dns-corrections"><strong>Applied corrections</strong>{corrections.map((entry, index) => <div key={`${entry.field}-${index}`}><span>{entry.message}:</span> <code>{entry.before || '∅'}</code> → <code>{entry.after || '∅'}</code></div>)}</div>}
+        {requestError && <div className="dns-error" role="alert">{requestError}</div>}
+        <div className="dns-editor-grid">
+            <label className="field"><span className="field-label">Type</span><select className="input" value={type} disabled={!!record} onChange={(event) => changeType(event.target.value)}>{supported.map((entry) => <option key={entry}>{entry}</option>)}</select></label>
+            <label className="field dns-name-field"><span className="field-label">Name</span><input className="input" value={name} disabled={!!record} onChange={(event) => setName(event.target.value)} onBlur={(event) => { const result = autofixFieldValue('hostname', event.target.value, 'name'); setName(result.value || '@'); setCorrections((current) => [...current, ...result.corrections]); }} /></label>
+            <label className="field"><span className="field-label">TTL</span><input className="input" inputMode="numeric" value={ttl} onChange={(event) => setTtl(event.target.value)} /></label>
+        </div>
+        <div className="dns-fqdn">Normalized owner: <code>{fqdn || '—'}</code></div>
+        <div className="dns-values"><div className="field-label">{currentSpec?.valuesLabel ?? 'Values'}</div>{rows.map((row, rowIndex) => <div className="dns-value-row" key={rowIndex}>{currentSpec?.fields.map((field) => field.kind === 'enum' ? <label className="field" key={field.key}><span className="field-label">{field.label}</span><select className="input" value={row[field.key] ?? ''} onChange={(event) => setRows((current) => current.map((entry, index) => index === rowIndex ? { ...entry, [field.key]: event.target.value } : entry))}>{field.options?.map((option) => <option key={option}>{option}</option>)}</select></label> : <label className="field" key={field.key}><span className="field-label">{field.label}</span><input className="input" style={field.width ? { width: field.width } : undefined} value={row[field.key] ?? ''} onChange={(event) => setRows((current) => current.map((entry, index) => index === rowIndex ? { ...entry, [field.key]: event.target.value } : entry))} onPaste={(event) => handlePaste(event, rowIndex, field.key)} onBlur={(event) => correctValue(rowIndex, field.key, event.target.value)} /></label>)}{currentSpec?.multi && rows.length > 1 && <button className="btn-icon" type="button" title="Remove value" onClick={() => setRows((current) => current.filter((_, index) => index !== rowIndex))}><i className="bi bi-x-lg" /></button>}</div>)}{currentSpec?.multi && <button className="btn" type="button" onClick={() => setRows((current) => [...current, blankRecordValue(type)])}><i className="bi bi-plus-lg" /> Add value</button>}</div>
+        {validation.errors.length > 0 && <div className="dns-errors" role="alert">{validation.errors.map((error, index) => <div key={`${error.field}-${error.index}-${index}`}>{error.message}{error.fix && (!record || error.fix.action !== 'change-type') && <button type="button" className="btn-link" onClick={() => applyFix(index)}>{error.fix.label}</button>}</div>)}</div>}
+        {pendingCorrection && <div className="dns-errors" role="alert">Paste or leave the changed field to review and acknowledge its correction before saving.</div>}
+        <div className="modal-actions"><button type="button" className="btn" onClick={() => onClose(false)}>Cancel</button><button type="button" className="btn btn-primary" disabled={saving || stale || !validation.ok || pendingCorrection || unchanged} onClick={() => void save()}>{saving ? 'Checking live zone…' : record ? 'Review replacement' : 'Review creation'}</button></div>
+    </div>;
+}
+
+function DiffList({ label, values, tone }: { label: string; values: readonly string[]; tone?: 'bad' | 'ok' }) {
+    if (!values.length) return null;
+    return <div className={tone ? `text-${tone}` : undefined}><strong>{label}</strong><ul>{values.map((value, index) => <li key={`${value}-${index}`}><code>{value}</code></li>)}</ul></div>;
+}

package/src/admin/dns/DnsRecordsPage.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { CollectionSelect } from '../../ui';
+import { DnsRecordsPanel } from './DnsRecordsPanel';
+import { DomainModel, type DomainRow } from './models';
+
+export function DnsRecordsPage() {
+    const [params, setParams] = useSearchParams();
+    const rawDomain = params.get('domain');
+    const parsed = rawDomain != null && /^[1-9]\d*$/.test(rawDomain) ? Number(rawDomain) : null;
+    const invalidSyntax = rawDomain != null && parsed == null;
+    const first = DomainModel.useList({ status: 'active', sort: 'name', size: 1 }, { enabled: rawDomain == null });
+    const selected = DomainModel.useOne(parsed);
+    const recordType = params.get('record_type') ?? '';
+    const update = (key: 'domain' | 'record_type', value: string | number | null) => {
+        const next = new URLSearchParams(params);
+        if (value == null || value === '') next.delete(key); else next.set(key, String(value));
+        setParams(next, { replace: true });
+    };
+    useEffect(() => {
+        if (rawDomain != null || !first.data?.rows[0]) return;
+        update('domain', first.data.rows[0].id);
+    }, [rawDomain, first.data]);
+    const domain = selected.data;
+    return <div className="dns-records-page">
+        <div className="panel panel-pad dns-records-picker"><div><div className="eyebrow">Infrastructure · DNS</div><h1>DNS Records</h1><p className="dim">Live provider record sets. Writes always replace a complete type/name set.</p></div><CollectionSelect<DomainRow> model={DomainModel} label="Active domain" value={parsed} onChange={(id) => update('domain', id)} defaultParams={{ status: 'active', sort: 'name' }} placeholder="Search active domains…" maxItems={50} /></div>
+        {rawDomain == null && first.isPending && <div className="panel panel-pad dim">Finding the first active domain…</div>}
+        {rawDomain == null && first.isError && <div className="panel panel-pad text-bad">{first.error.message}</div>}
+        {rawDomain == null && first.data && first.data.rows.length === 0 && <div className="panel panel-pad dim">No active DNS domains are available.</div>}
+        {invalidSyntax && <div className="panel panel-pad text-bad">The deep-linked domain id is invalid. Choose an active domain explicitly.</div>}
+        {parsed != null && selected.isPending && <div className="panel panel-pad dim">Loading the selected domain…</div>}
+        {parsed != null && selected.isError && <div className="panel panel-pad text-bad">{selected.error.message}. The selection was preserved; no fallback domain was chosen.</div>}
+        {domain && domain.status !== 'active' && <div className="panel panel-pad text-bad">{domain.name} is {domain.status}, not active. The selection was preserved; choose another domain explicitly.</div>}
+        {domain?.status === 'active' && <div className="panel panel-pad"><DnsRecordsPanel domain={domain} recordType={recordType} onRecordTypeChange={(value) => update('record_type', value)} /></div>}
+    </div>;
+}