@promptbook/cli 0.114.0-4 → 0.114.0-6

package/apps/agents-server/src/app/api/admin/dns-records/cloudflare/route.ts

@@ -2,8 +2,9 @@ import { NextResponse } from 'next/server';
 import { spaceTrim } from 'spacetrim';
 import { NotFoundError } from '../../../../../../../../src/errors/NotFoundError';
 import { applyCloudflareDnsRecordInstructions } from '../../../../../utils/cloudflare/applyCloudflareDnsRecordInstructions';
-import type { DnsRecordInstruction, DnsRecordSelection } from '../../../../../utils/dnsRecords/DnsRecordInstruction';
-import { resolveDnsRecordBatchPlan } from '../../../../../utils/dnsRecords/resolveDnsRecordBatchPlan';
+import type { DnsRecordGroup } from '../../../../../utils/dnsRecords/DnsRecordInstruction';
+import { countDnsRecordGroupRecords } from '../../../../../utils/dnsRecords/dnsRecordGroups';
+import { resolveDnsRecordBatchPlanForGroups } from '../../../../../utils/dnsRecords/resolveDnsRecordBatchPlan';
 import { isUserAdmin } from '../../../../../utils/isUserAdmin';
 import { isUserGlobalAdmin } from '../../../../../utils/isUserGlobalAdmin';
 
@@ -22,14 +23,9 @@ type CloudflareDnsWizardRequestBody = {
     readonly domain?: string;
 
     /**
-     * Whether all shown records or one shown alternative has to be configured.
+     * Record groups shown in the DNS manual, each one with its own all-or-one rule.
      */
-    readonly recordSelection?: DnsRecordSelection;
-
-    /**
-     * DNS records shown in the DNS manual.
-     */
-    readonly records?: ReadonlyArray<DnsRecordInstruction>;
+    readonly recordGroups?: ReadonlyArray<DnsRecordGroup>;
 };
 
 /**
@@ -45,13 +41,13 @@ export async function POST(request: Request) {
 
     const body = ((await request.json().catch(() => null)) || {}) as CloudflareDnsWizardRequestBody;
     const domain = (body.domain || '').trim();
-    const records = body.records || [];
+    const recordGroups = normalizeCloudflareDnsWizardRecordGroups(body.recordGroups);
 
-    if (!domain || records.length === 0) {
+    if (!domain || countDnsRecordGroupRecords(recordGroups) === 0) {
         return NextResponse.json(
             {
                 error: spaceTrim(`
-                    Both \`domain\` and \`records\` are required to import DNS records into Cloudflare.
+                    Both \`domain\` and \`recordGroups\` are required to import DNS records into Cloudflare.
                 `),
             },
             { status: 400 },
@@ -79,10 +75,7 @@ export async function POST(request: Request) {
 
     // Note: The batch plan is resolved again on the server, so that placeholder values and record alternatives can
     //       never be written into Cloudflare even when the browser sends them.
-    const { applicableRecords } = resolveDnsRecordBatchPlan({
-        records,
-        recordSelection: body.recordSelection === 'one' ? 'one' : 'all',
-    });
+    const { applicableRecords } = resolveDnsRecordBatchPlanForGroups(recordGroups);
 
     if (applicableRecords.length === 0) {
         return NextResponse.json(
@@ -114,3 +107,20 @@ export async function POST(request: Request) {
         );
     }
 }
+
+/**
+ * Normalizes the record groups sent by the browser into trustworthy server-side groups.
+ *
+ * @param recordGroups - Record groups of the request body.
+ * @returns Record groups whose all-or-one rule is always one of the supported values.
+ *
+ * @private function of `POST`
+ */
+function normalizeCloudflareDnsWizardRecordGroups(
+    recordGroups: ReadonlyArray<DnsRecordGroup> | undefined,
+): ReadonlyArray<DnsRecordGroup> {
+    return (recordGroups || []).map((recordGroup) => ({
+        recordSelection: recordGroup.recordSelection === 'one' ? 'one' : 'all',
+        records: recordGroup.records || [],
+    }));
+}

package/apps/agents-server/src/app/api/emails/incoming/stalwart/route.ts

@@ -5,6 +5,7 @@ import { ParseError } from '../../../../../../../../src/errors/ParseError';
 import { spaceTrim } from '../../../../../../../../src/utils/organization/spaceTrim';
 import type { StalwartMtaHookPayload } from '../../../../../message-providers/email/stalwart/StalwartMtaHookPayload';
 import { parseInboundStalwartEmail } from '../../../../../message-providers/email/stalwart/parseInboundStalwartEmail';
+import { $provideServer } from '../../../../../tools/$provideServer';
 import { processInboundAgentEmail } from '../../../../../utils/email/processInboundAgentEmail';
 import { NextRequest, NextResponse } from 'next/server';
 
@@ -16,6 +17,12 @@ export async function POST(request: NextRequest) {
         verifyStalwartMtaHookAuthorization(request.headers.get('authorization'));
         const payload = (await request.json()) as StalwartMtaHookPayload;
         const parsedEmail = await parseInboundStalwartEmail(payload);
+
+        // Note: `request.nextUrl` describes the internal listener this process was reached on, so behind
+        //       the VPS reverse proxy its hostname is `localhost` and never the mail domain. The server
+        //       registry is the single source of truth which already decides the database namespace of
+        //       this request, so the mail domain and the worker origin are taken from it as well.
+        const { publicUrl } = await $provideServer();
         const result = await processInboundAgentEmail({
             email: parsedEmail.email,
             envelope: {
@@ -23,8 +30,8 @@ export async function POST(request: NextRequest) {
                 recipients: parsedEmail.envelopeRecipients,
                 queueId: parsedEmail.queueId,
             },
-            domain: request.nextUrl.hostname,
-            origin: request.nextUrl.origin,
+            domain: publicUrl.hostname,
+            origin: publicUrl.origin,
         });
 
         return NextResponse.json({

package/apps/agents-server/src/app/superadmin/servers/ServersRegistryTable.tsx

@@ -2,10 +2,10 @@
 
 import { Fragment } from 'react';
 import { ArrowRightLeft, Bot, ExternalLink, Loader2, Mail, RefreshCcw, Save } from 'lucide-react';
-import { AgentProjectDnsInstructions } from '../../../components/AgentProjectDnsInstructions/AgentProjectDnsInstructions';
 import { DnsRecordsInstructions } from '../../../components/DnsRecordsInstructions/DnsRecordsInstructions';
 import { useServerLanguage } from '../../../components/ServerLanguage/ServerLanguageProvider';
 import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { createServerDnsRecordsSections } from '../../../utils/dnsRecords/createServerDnsRecordsSections';
 import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
 import { AdminSortableTableHeaderCell } from '../../admin/_components/AdminSortableTableHeaderCell';
 import { useAdminTableSorting } from '../../admin/_components/adminTableSorting';
@@ -244,6 +244,7 @@ function ServersRegistryTableRow(props: ServersRegistryTableRowProps) {
     const hasProjectDnsIssue = projectDomains.some((projectDomain) =>
         isManagedServerDnsDiagnosticIssue(projectDomain.dnsDiagnostic),
     );
+    const generatedProjectDomain = projectDomains.find((projectDomain) => !projectDomain.customDomain)?.domain ?? null;
     const columnCount = isStandaloneVps ? 6 : 8;
 
     return (
@@ -341,10 +342,10 @@ function ServersRegistryTableRow(props: ServersRegistryTableRowProps) {
                         <a
                             href={`https://${server.domain}/admin/email-server`}
                             className={`${SECONDARY_BUTTON_CLASS_NAME} px-2 py-1 text-xs`}
-                            title={`MX, SPF, DKIM, and DMARC instructions for ${server.domain}`}
+                            title={`Agent addresses and the generated DKIM zone of ${server.domain}`}
                         >
                             <Mail className="h-3.5 w-3.5" />
-                            Mail DNS
+                            Email server
                         </a>
                         <button
                             type="button"
@@ -390,57 +391,54 @@ function ServersRegistryTableRow(props: ServersRegistryTableRowProps) {
             </tr>
             <tr className="bg-sky-50/50">
                 <td colSpan={columnCount} className="px-4 py-4">
-                    <ProjectDomainsPanel
-                        projectDomains={projectDomains}
-                        publicIpAddress={dnsDiagnostic?.publicIpAddress}
-                        serverDomain={server.domain}
-                    />
+                    <ProjectDomainsPanel projectDomains={projectDomains} />
                 </td>
             </tr>
-            {hasDnsIssue && dnsDiagnostic ? (
-                <tr className="bg-amber-50/70">
-                    <td colSpan={columnCount} className="px-4 py-4">
-                        <DnsRecordsInstructions
-                            description={dnsDiagnostic.summary}
-                            domain={server.domain}
-                            recordSelection="one"
-                            records={dnsDiagnostic.expectedRecords}
-                            providerGuides={dnsDiagnostic.providerGuides}
-                            resolvedAddresses={dnsDiagnostic.resolvedAddresses}
-                            title={
+            <tr className="bg-amber-50/70">
+                <td colSpan={columnCount} className="px-4 py-4">
+                    <DnsRecordsInstructions
+                        description="Everything this server needs at its DNS provider - its own domain, the generated project domains, and its email. Add all of them at once with the Cloudflare wizard below."
+                        domain={server.domain}
+                        providerGuides={dnsDiagnostic?.providerGuides}
+                        sections={createServerDnsRecordsSections({
+                            serverDomain: server.domain,
+                            dnsDiagnostic,
+                            isProjectDnsIssue: hasProjectDnsIssue,
+                            projectDomain: generatedProjectDomain,
+                        })}
+                        title={
+                            hasDnsIssue || hasProjectDnsIssue ? (
                                 <>
                                     DNS setup needs attention for <span className="font-mono">{server.domain}</span>
                                 </>
-                            }
-                        />
-                    </td>
-                </tr>
-            ) : null}
+                            ) : (
+                                <>
+                                    DNS setup for <span className="font-mono">{server.domain}</span>
+                                </>
+                            )
+                        }
+                    />
+                </td>
+            </tr>
         </>
     );
 }
 
 /**
- * Renders assigned project domains and preventive DNS guidance for one server.
+ * Renders the project domains assigned to one server.
+ *
+ * Their DNS setup intentionally lives in the one shared DNS manual of the server instead of in this listing.
  */
 function ProjectDomainsPanel({
-    publicIpAddress,
     projectDomains,
-    serverDomain,
 }: {
-    readonly publicIpAddress: string | null | undefined;
     readonly projectDomains: NonNullable<ManagedServerRow['projectDomains']>;
-    readonly serverDomain: string;
 }) {
     const projectDomainSorting = useAdminTableSorting<ProjectDomainRow, ProjectDomainsTableSortField>({
         rows: projectDomains,
         defaultSortBy: 'projectName',
         resolveSortValue: resolveProjectDomainSortValue,
     });
-    const generatedProjectDomain = projectDomains.find((projectDomain) => !projectDomain.customDomain)?.domain ?? null;
-    const hasProjectDnsIssue = projectDomains.some((projectDomain) =>
-        isManagedServerDnsDiagnosticIssue(projectDomain.dnsDiagnostic),
-    );
 
     return (
         <div className="space-y-3 rounded-lg border border-sky-200 bg-sky-50 px-4 py-4 text-sm text-sky-950">
@@ -535,12 +533,6 @@ function ProjectDomainsPanel({
                     </table>
                 </div>
             )}
-            <AgentProjectDnsInstructions
-                isDnsIssue={hasProjectDnsIssue}
-                projectDomain={generatedProjectDomain}
-                publicIpAddress={publicIpAddress}
-                serverDomain={serverDomain}
-            />
         </div>
     );
 }

package/apps/agents-server/src/components/AgentProfile/AgentProfile.tsx

@@ -1,4 +1,6 @@
 'use client';
+import { spaceTrim } from 'spacetrim';
+
 
 import { colorToDataUrl } from '@promptbook-local/color';
 import { AgentBasicInformation, string_agent_permanent_id, string_url } from '@promptbook-local/types';
@@ -104,6 +106,13 @@ export function AgentProfile(props: AgentProfileProps) {
     // Dynamic Font Loading
     const fontString = meta.font;
     const primaryFontFamily = fontString ? (fontString.split(',')[0] || '').trim().replace(/['"]/g, '') : '';
+    const PRIMARY_FONT_IMPORT_STYLES = primaryFontFamily
+        ? spaceTrim(
+              (block) => `
+                  @import url('https://fonts.googleapis.com/css2?family=${block(encodeURIComponent(primaryFontFamily))}:wght@400;600;700&display=swap');
+              `,
+          )
+        : '';
     let fontStyle: React.CSSProperties = {};
 
     if (fontString) {
@@ -120,9 +129,7 @@ export function AgentProfile(props: AgentProfileProps) {
     return (
         <>
             {primaryFontFamily && (
-                <style jsx global>{`
-                    @import url('https://fonts.googleapis.com/css2?family=${encodeURIComponent(primaryFontFamily)}:wght@400;600;700&display=swap');
-                `}</style>
+                <style jsx global>{PRIMARY_FONT_IMPORT_STYLES}</style>
             )}
 
             {/* Full-screen background with agent color */}

package/apps/agents-server/src/components/AgentProjects/AgentProjectIcon.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import type { AgentProjectReferenceInfo } from '../../utils/agentProjects/AgentProjectReferenceInfo';
+import { buildAgentProjectFileHrefForServer } from '../../utils/agentProjects/agentProjectHrefs';
+import { createAgentProjectInitials } from '../../utils/agentProjects/createAgentProjectInitials';
+
+/**
+ * Sizes at which one project icon is shown.
+ */
+export type AgentProjectIconSize = 'small' | 'card' | 'header';
+
+/**
+ * Project fields required to render the icon of one project.
+ */
+export type AgentProjectIconInfo = Pick<AgentProjectReferenceInfo, 'projectName' | 'faviconRelativePath'>;
+
+/**
+ * Classes of the icon container, of the favicon and of the initials per icon size.
+ */
+const AGENT_PROJECT_ICON_CLASS_NAMES_BY_SIZE: Record<
+    AgentProjectIconSize,
+    {
+        /**
+         * Classes of the icon container.
+         */
+        readonly container: string;
+
+        /**
+         * Classes of the rendered favicon.
+         */
+        readonly favicon: string;
+
+        /**
+         * Classes of the rendered initials.
+         */
+        readonly initials: string;
+    }
+> = {
+    small: { container: 'h-5 w-5 rounded-md', favicon: 'p-0.5', initials: 'text-[0.5rem] tracking-tight' },
+    card: { container: 'h-11 w-11 rounded-lg', favicon: 'p-1.5', initials: 'text-sm' },
+    header: { container: 'h-9 w-9 rounded-lg', favicon: 'p-1', initials: 'text-xs' },
+};
+
+/**
+ * Props for one project icon.
+ */
+type AgentProjectIconProps = {
+    /**
+     * Permanent id of the agent owning the project.
+     */
+    readonly agentPermanentId: string;
+
+    /**
+     * Project the icon belongs to.
+     */
+    readonly project: AgentProjectIconInfo;
+
+    /**
+     * Public domain of the server owning the project, when known.
+     */
+    readonly serverDomain?: string | null;
+
+    /**
+     * Public domain serving the current page, when known.
+     */
+    readonly currentServerDomain?: string | null;
+
+    /**
+     * Size at which the icon is shown.
+     */
+    readonly size: AgentProjectIconSize;
+
+    /**
+     * Optional CSS class overrides.
+     */
+    readonly className?: string;
+};
+
+/**
+ * Renders the visual identity of one project — its favicon, or its initials as the fallback.
+ *
+ * The favicon is served from the project folder, which requires a signed-in visitor, so the
+ * initials are shown whenever the favicon is missing or cannot be loaded.
+ *
+ * @private component of Agent Projects dashboards
+ */
+export function AgentProjectIcon({
+    agentPermanentId,
+    project,
+    serverDomain = null,
+    currentServerDomain = null,
+    size,
+    className = '',
+}: AgentProjectIconProps) {
+    const [isFaviconBroken, setIsFaviconBroken] = useState(false);
+    const faviconImageRef = useRef<HTMLImageElement | null>(null);
+    const iconClassNames = AGENT_PROJECT_ICON_CLASS_NAMES_BY_SIZE[size];
+    const faviconHref = !project.faviconRelativePath
+        ? null
+        : buildAgentProjectFileHrefForServer({
+              agentPermanentId,
+              projectName: project.projectName,
+              fileRelativePath: project.faviconRelativePath,
+              serverDomain,
+              currentServerDomain,
+          });
+
+    useEffect(() => {
+        // Note: A favicon rendered on the server can already fail before this component is hydrated,
+        //       which loses its `error` event — an image which finished loading with no pixels is broken.
+        const faviconImage = faviconImageRef.current;
+        setIsFaviconBroken(faviconImage?.complete === true && faviconImage.naturalWidth === 0);
+    }, [faviconHref]);
+
+    return (
+        <span
+            className={`flex shrink-0 items-center justify-center overflow-hidden border border-blue-100 bg-blue-50 text-blue-700 ${iconClassNames.container} ${className}`}
+            aria-hidden
+        >
+            {faviconHref !== null && !isFaviconBroken ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                    ref={faviconImageRef}
+                    src={faviconHref}
+                    alt=""
+                    className={`h-full w-full object-contain ${iconClassNames.favicon}`}
+                    onError={() => setIsFaviconBroken(true)}
+                />
+            ) : (
+                <span className={`font-bold leading-none ${iconClassNames.initials}`}>
+                    {createAgentProjectInitials(project.projectName)}
+                </span>
+            )}
+        </span>
+    );
+}

package/apps/agents-server/src/components/AgentProjects/AgentProjectItem.tsx

@@ -1,9 +1,9 @@
-import { FolderKanbanIcon } from 'lucide-react';
 import Link from 'next/link';
 import type { ReactNode } from 'react';
 import type { AgentProjectReferenceInfo } from '../../utils/agentProjects/AgentProjectReferenceInfo';
 import { buildAgentProjectProfileHrefForServer } from '../../utils/agentProjects/agentProjectHrefs';
 import { formatResourceBytes } from '../../utils/resourceMonitor/formatResourceMonitorValue';
+import { AgentProjectIcon } from './AgentProjectIcon';
 
 /**
  * Visual variants supported by project references.
@@ -76,12 +76,22 @@ export function AgentProjectItem({
         serverDomain,
         currentServerDomain,
     });
+    const icon = (
+        <AgentProjectIcon
+            agentPermanentId={agentPermanentId}
+            project={project}
+            serverDomain={serverDomain}
+            currentServerDomain={currentServerDomain}
+            size={variant === 'small' ? 'small' : 'card'}
+            className={variant === 'small' ? 'mt-0.5' : ''}
+        />
+    );
 
     if (variant === 'small') {
-        return <SmallAgentProjectItem href={href} project={project} className={className} />;
+        return <SmallAgentProjectItem href={href} project={project} icon={icon} className={className} />;
     }
 
-    return <FullAgentProjectItem href={href} project={project} className={className} footer={footer} />;
+    return <FullAgentProjectItem href={href} project={project} icon={icon} className={className} footer={footer} />;
 }
 
 /**
@@ -98,6 +108,11 @@ type AgentProjectItemVariantProps = {
      */
     readonly project: AgentProjectItemInfo;
 
+    /**
+     * Rendered project icon.
+     */
+    readonly icon: ReactNode;
+
     /**
      * Optional CSS class overrides.
      */
@@ -115,16 +130,17 @@ type AgentProjectItemVariantProps = {
  * @param props - Project item variant props.
  * @returns Full project link card.
  */
-function FullAgentProjectItem({ href, project, className, footer }: AgentProjectItemVariantProps) {
+function FullAgentProjectItem({ href, project, icon, className, footer }: AgentProjectItemVariantProps) {
     const isFooterVisible = footer !== undefined && footer !== null;
     const projectContent = (
         <>
             <div className="flex items-start gap-3">
-                <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-blue-100 bg-blue-50 text-blue-700">
-                    <FolderKanbanIcon className="h-5 w-5" aria-hidden />
-                </div>
+                {icon}
                 <div className="min-w-0 flex-1">
-                    <h3 className="truncate text-base font-semibold text-gray-950 group-hover:text-blue-700">
+                    <h3
+                        className="line-clamp-2 text-base font-semibold text-gray-950 group-hover:text-blue-700"
+                        title={project.displayName}
+                    >
                         {project.displayName}
                     </h3>
                     {project.displayName !== project.projectName && (
@@ -170,14 +186,14 @@ function FullAgentProjectItem({ href, project, className, footer }: AgentProject
  * @param props - Project item variant props.
  * @returns Compact project link item.
  */
-function SmallAgentProjectItem({ href, project, className }: AgentProjectItemVariantProps) {
+function SmallAgentProjectItem({ href, project, icon, className }: AgentProjectItemVariantProps) {
     return (
         <Link
             href={href}
             title={project.description || project.displayName}
             className={`inline-flex max-w-full items-start gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-left shadow-sm transition hover:border-blue-300 hover:bg-blue-50/50 ${className}`}
         >
-            <FolderKanbanIcon className="mt-0.5 h-4 w-4 shrink-0 text-blue-600" aria-hidden />
+            {icon}
             <span className="min-w-0 flex-1">
                 <span className="block truncate text-sm font-semibold text-gray-900">{project.displayName}</span>
                 {project.description && (

package/apps/agents-server/src/components/CloudflareDnsWizard/CloudflareDnsApiTokenImportStep.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import type { CloudflareDnsBatchRecordStatus } from '../../utils/cloudflare/CloudflareDnsBatchApplication';
-import type { DnsRecordSelection } from '../../utils/dnsRecords/DnsRecordInstruction';
+import type { DnsRecordGroup } from '../../utils/dnsRecords/DnsRecordInstruction';
 import type { DnsRecordBatchPlan } from '../../utils/dnsRecords/resolveDnsRecordBatchPlan';
 import { CloudflareDnsExcludedRecordsNote } from './CloudflareDnsExcludedRecordsNote';
 import { useCloudflareDnsRecordImport } from './useCloudflareDnsRecordImport';
@@ -35,7 +35,7 @@ const CLOUDFLARE_DNS_IMPORT_STATUS_CLASS_NAMES: Record<CloudflareDnsBatchRecordS
 export function CloudflareDnsApiTokenImportStep({
     batchPlan,
     domain,
-    recordSelection,
+    recordGroups,
 }: {
     /**
      * Records which can be imported at once together with the excluded ones.
@@ -48,15 +48,14 @@ export function CloudflareDnsApiTokenImportStep({
     readonly domain: string;
 
     /**
-     * Whether all listed records or one listed alternative must be configured.
+     * All record groups displayed by the DNS manual.
      */
-    readonly recordSelection: DnsRecordSelection;
+    readonly recordGroups: ReadonlyArray<DnsRecordGroup>;
 }) {
     const [apiToken, setApiToken] = useState('');
     const { isImporting, application, errorMessage, importRecords } = useCloudflareDnsRecordImport({
         domain,
-        recordSelection,
-        records: batchPlan.applicableRecords,
+        recordGroups,
     });
     const recordCount = batchPlan.applicableRecords.length;
 

package/apps/agents-server/src/components/CloudflareDnsWizard/CloudflareDnsCheckStep.tsx

@@ -1,4 +1,5 @@
-import type { DnsRecordSelection } from '../../utils/dnsRecords/DnsRecordInstruction';
+import type { DnsRecordGroup } from '../../utils/dnsRecords/DnsRecordInstruction';
+import { hasAlternativeDnsRecordGroup } from '../../utils/dnsRecords/dnsRecordGroups';
 
 /**
  * Explains how to verify the configured records after they were written to Cloudflare.
@@ -6,18 +7,18 @@ import type { DnsRecordSelection } from '../../utils/dnsRecords/DnsRecordInstruc
  * @private used by the Cloudflare DNS setup wizard
  */
 export function CloudflareDnsCheckStep({
-    recordSelection,
+    recordGroups,
 }: {
     /**
-     * Whether all listed records or one listed alternative must be configured.
+     * All record groups displayed by the DNS manual.
      */
-    readonly recordSelection: DnsRecordSelection;
+    readonly recordGroups: ReadonlyArray<DnsRecordGroup>;
 }) {
     return (
         <div className="space-y-2">
             <p className="font-medium">Check the result</p>
             <ol className="list-decimal space-y-1 pl-5 text-amber-900">
-                {recordSelection === 'one' ? (
+                {hasAlternativeDnsRecordGroup(recordGroups) ? (
                     <li>Remove conflicting A, AAAA, or CNAME records for the same hostname.</li>
                 ) : null}
                 <li>Wait for DNS propagation.</li>

package/apps/agents-server/src/components/CloudflareDnsWizard/CloudflareDnsManualStep.tsx

@@ -1,5 +1,6 @@
 import { isProxyableCloudflareDnsRecordType } from '../../utils/cloudflare/CloudflareApi';
-import type { DnsRecordInstruction, DnsRecordSelection } from '../../utils/dnsRecords/DnsRecordInstruction';
+import type { DnsRecordGroup } from '../../utils/dnsRecords/DnsRecordInstruction';
+import { countDnsRecordGroupRecords, isEveryDnsRecordGroupAlternative } from '../../utils/dnsRecords/dnsRecordGroups';
 
 /**
  * Direct Cloudflare dashboard URL for the DNS records page.
@@ -15,8 +16,7 @@ const CLOUDFLARE_DNS_RECORDS_URL = 'https://dash.cloudflare.com/?to=/:account/:z
  */
 export function CloudflareDnsManualStep({
     domain,
-    recordSelection,
-    records,
+    recordGroups,
 }: {
     /**
      * Hostname whose DNS records are being configured.
@@ -24,20 +24,16 @@ export function CloudflareDnsManualStep({
     readonly domain: string;
 
     /**
-     * Whether all listed records or one listed alternative must be configured.
+     * All record groups displayed by the DNS manual.
      */
-    readonly recordSelection: DnsRecordSelection;
-
-    /**
-     * The canonical DNS records displayed by the parent instruction panel.
-     */
-    readonly records: ReadonlyArray<DnsRecordInstruction>;
+    readonly recordGroups: ReadonlyArray<DnsRecordGroup>;
 }) {
+    const records = recordGroups.flatMap((recordGroup) => recordGroup.records);
     const isProxyStatusRelevant = records.some((record) => isProxyableCloudflareDnsRecordType(record.type));
-    const recordSelectionInstruction =
-        recordSelection === 'all'
-            ? `Repeat this for all ${records.length} record${records.length === 1 ? '' : 's'} shown above.`
-            : 'Choose one of the record alternatives shown above.';
+    const recordCount = countDnsRecordGroupRecords(recordGroups);
+    const recordSelectionInstruction = isEveryDnsRecordGroupAlternative(recordGroups)
+        ? 'Choose one of the record alternatives shown above.'
+        : `Repeat this for all ${recordCount} record${recordCount === 1 ? '' : 's'} shown above.`;
 
     return (
         <div className="space-y-2">