@promptbook/cli 0.114.0-2 → 0.114.0-20

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/AgentProjects/resolveLatestCompletedAgentMessageKey.ts

@@ -0,0 +1,32 @@
+import type { ChatMessage } from '@promptbook-local/types';
+
+/**
+ * Resolves a key identifying the newest finished agent answer in one chat.
+ *
+ * A finished agent turn is the only moment when the agent can have created a project, so this key is the
+ * signal telling the chat to reload its project references. Messages which are still being generated are
+ * ignored on purpose — their content keeps changing while the progress card updates, which says nothing
+ * about the projects on the server.
+ *
+ * @param messages - Messages currently rendered in the chat.
+ * @returns Key of the newest finished agent message, or `null` when the agent has answered nothing yet.
+ */
+export function resolveLatestCompletedAgentMessageKey(messages: ReadonlyArray<ChatMessage> | undefined): string | null {
+    if (!messages) {
+        return null;
+    }
+
+    for (let messageIndex = messages.length - 1; messageIndex >= 0; messageIndex--) {
+        const message = messages[messageIndex];
+
+        if (message === undefined || message.sender === 'USER' || message.isComplete === false) {
+            continue;
+        }
+
+        // Note: Messages of chats which do not persist ids are identified by their position, which still
+        //       moves forward with every new answer
+        return message.id === undefined ? `#${messageIndex}` : String(message.id);
+    }
+
+    return null;
+}

package/apps/agents-server/src/components/AgentProjects/useAgentProjectMarkdownReferences.ts

@@ -0,0 +1,306 @@
+'use client';
+
+import type { ChatMessage, MarkdownInlineReference } from '@promptbook-local/types';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { $refreshAgentProjectChatReferencesAction } from '../../app/agents/[agentName]/projectReferenceActions';
+import {
+    $startAgentProjectRuntimeAction,
+    $stopAgentProjectRuntimeAction,
+} from '../../app/agents/[agentName]/projectRuntimeActions';
+import type { AgentProjectReferenceInfo } from '../../utils/agentProjects/AgentProjectReferenceInfo';
+import type { AgentProjectRuntimeActionResult } from '../../utils/agentProjects/AgentProjectRuntimeActionResult';
+import {
+    createAgentProjectMarkdownReferences,
+    type AgentProjectMarkdownReferenceInfo,
+} from '../../utils/agentProjects/createAgentProjectMarkdownReferences';
+import { notifyError } from '../Notifications/notifications';
+import { resolveLatestCompletedAgentMessageKey } from './resolveLatestCompletedAgentMessageKey';
+
+/**
+ * Options used to build interactive project references for an Agents Server chat.
+ */
+type UseAgentProjectMarkdownReferencesOptions = {
+    /**
+     * Permanent id of the agent owning the projects.
+     */
+    readonly agentPermanentId: string;
+
+    /**
+     * Initial browser-safe project references loaded by the server page.
+     */
+    readonly projects: ReadonlyArray<AgentProjectReferenceInfo>;
+
+    /**
+     * Messages currently rendered in the chat.
+     *
+     * They are watched only to notice that the agent finished an answer, which is when a project it just
+     * created must become a chip without waiting for a page reload.
+     */
+    readonly messages?: ReadonlyArray<ChatMessage>;
+};
+
+/**
+ * Creates interactive project chips and keeps their runtime state current after menu actions.
+ *
+ * @param options - Owning agent and initial projects.
+ * @returns Markdown references consumed by the shared chat renderer.
+ */
+export function useAgentProjectMarkdownReferences(
+    options: UseAgentProjectMarkdownReferencesOptions,
+): ReadonlyArray<MarkdownInlineReference> {
+    const { agentPermanentId, projects, messages } = options;
+    const [currentProjects, setCurrentProjects] = useState<ReadonlyArray<AgentProjectReferenceInfo>>(projects);
+    const previousProjectsRef = useRef(projects);
+
+    useEffect(() => {
+        if (areAgentProjectReferencesEqual(previousProjectsRef.current, projects)) {
+            return;
+        }
+
+        previousProjectsRef.current = projects;
+        setCurrentProjects(projects);
+    }, [projects]);
+
+    useRefreshedAgentProjectReferences({
+        agentPermanentId,
+        currentProjects,
+        messages,
+        setCurrentProjects,
+    });
+
+    /**
+     * Merges one action result into the local project reference state.
+     */
+    const updateProjectRuntimeState = useCallback(
+        (projectName: string, result: AgentProjectRuntimeActionResult): void => {
+            setCurrentProjects((currentProjectReferences) =>
+                currentProjectReferences.map((project) =>
+                    project.projectName === projectName
+                        ? {
+                              ...project,
+                              isRunning: result.isRunning,
+                              projectUrl: result.projectUrl || project.projectUrl || null,
+                          }
+                        : project,
+                ),
+            );
+        },
+        [],
+    );
+
+    /**
+     * Starts or stops one project from its chip menu.
+     */
+    const changeProjectRuntime = useCallback(
+        async (project: AgentProjectMarkdownReferenceInfo, isRunning: boolean): Promise<void> => {
+            try {
+                const result = isRunning
+                    ? await $startAgentProjectRuntimeAction(agentPermanentId, project.projectName)
+                    : await $stopAgentProjectRuntimeAction(agentPermanentId, project.projectName);
+
+                updateProjectRuntimeState(project.projectName, result);
+
+                if (isRunning && !result.isRunning) {
+                    notifyError(`Project \`${project.displayName}\` did not start.`);
+                }
+            } catch (error) {
+                const actionName = isRunning ? 'start' : 'stop';
+                notifyError(resolveProjectRuntimeErrorMessage(error, `Failed to ${actionName} the project.`), {
+                    details: error,
+                });
+            }
+        },
+        [agentPermanentId, updateProjectRuntimeState],
+    );
+
+    /**
+     * Starts a stopped project and transfers an already-opened browser tab to its public URL.
+     */
+    const openProject = useCallback(
+        async (project: AgentProjectMarkdownReferenceInfo): Promise<void> => {
+            const projectWindow = window.open('about:blank', '_blank');
+
+            if (!projectWindow) {
+                notifyError('The browser blocked the new project tab.');
+                return;
+            }
+
+            projectWindow.opener = null;
+
+            try {
+                const result = await $startAgentProjectRuntimeAction(agentPermanentId, project.projectName);
+                updateProjectRuntimeState(project.projectName, result);
+
+                if (!result.isRunning || !result.projectUrl) {
+                    projectWindow.close();
+                    notifyError(`Project \`${project.displayName}\` did not start.`);
+                    return;
+                }
+
+                projectWindow.location.href = result.projectUrl;
+            } catch (error) {
+                projectWindow.close();
+                notifyError(resolveProjectRuntimeErrorMessage(error, 'Failed to start and open the project.'), {
+                    details: error,
+                });
+            }
+        },
+        [agentPermanentId, updateProjectRuntimeState],
+    );
+
+    return useMemo(
+        () =>
+            createAgentProjectMarkdownReferences({
+                agentPermanentId,
+                projects: currentProjects,
+                onOpenProject: openProject,
+                onChangeProjectRuntime: changeProjectRuntime,
+            }),
+        [agentPermanentId, changeProjectRuntime, currentProjects, openProject],
+    );
+}
+
+/**
+ * Options of the refresh keeping chat project references current while the chat stays open.
+ *
+ * @private type of `useAgentProjectMarkdownReferences`
+ */
+type UseRefreshedAgentProjectReferencesOptions = {
+    /**
+     * Permanent id of the agent owning the projects.
+     */
+    readonly agentPermanentId: string;
+
+    /**
+     * Project references the chat currently renders.
+     */
+    readonly currentProjects: ReadonlyArray<AgentProjectReferenceInfo>;
+
+    /**
+     * Messages currently rendered in the chat.
+     */
+    readonly messages: ReadonlyArray<ChatMessage> | undefined;
+
+    /**
+     * Replaces the project references the chat renders.
+     */
+    readonly setCurrentProjects: (projects: ReadonlyArray<AgentProjectReferenceInfo>) => void;
+};
+
+/**
+ * Reloads the project references after each finished agent answer which could have created a project.
+ *
+ * The server renders a chat with the projects existing at that moment, so an agent creating a project
+ * during the conversation would otherwise reference it as a plain link until the page is reloaded. The
+ * messages already present when the chat thread opens arrive together with their projects and never
+ * trigger a reload, and the server skips rebuilding the references while the agent owns the very same
+ * projects.
+ *
+ * @param options - Owning agent, current references, and the messages the chat renders.
+ *
+ * @private function of `useAgentProjectMarkdownReferences`
+ */
+function useRefreshedAgentProjectReferences({
+    agentPermanentId,
+    currentProjects,
+    messages,
+    setCurrentProjects,
+}: UseRefreshedAgentProjectReferencesOptions): void {
+    const currentProjectsRef = useRef(currentProjects);
+    const isLatestCompletedAgentMessageKeyKnownRef = useRef(false);
+    const refreshedAgentMessageKeyRef = useRef<string | null>(null);
+    const hasRenderedChatMessages = messages !== undefined && messages.length > 0;
+    const latestCompletedAgentMessageKey = resolveLatestCompletedAgentMessageKey(messages);
+
+    useEffect(() => {
+        currentProjectsRef.current = currentProjects;
+    }, [currentProjects]);
+
+    useEffect(() => {
+        if (!hasRenderedChatMessages) {
+            // Note: An empty thread is also the state of a chat whose history is still being loaded
+            return undefined;
+        }
+
+        if (!isLatestCompletedAgentMessageKeyKnownRef.current) {
+            // Note: The messages rendered when the chat opens were listed together with the server projects
+            isLatestCompletedAgentMessageKeyKnownRef.current = true;
+            refreshedAgentMessageKeyRef.current = latestCompletedAgentMessageKey;
+            return undefined;
+        }
+
+        if (refreshedAgentMessageKeyRef.current === latestCompletedAgentMessageKey) {
+            return undefined;
+        }
+
+        refreshedAgentMessageKeyRef.current = latestCompletedAgentMessageKey;
+        let isDisposed = false;
+
+        void (async () => {
+            const knownProjectNames = currentProjectsRef.current.map((project) => project.projectName);
+
+            try {
+                const refreshedProjects = await $refreshAgentProjectChatReferencesAction(
+                    agentPermanentId,
+                    knownProjectNames,
+                );
+
+                if (isDisposed || refreshedProjects === null) {
+                    return;
+                }
+
+                setCurrentProjects(refreshedProjects);
+            } catch (error) {
+                // Note: A chat stays usable without fresh projects, the chip then appears after the next answer
+                console.error('[agents-server:agent-projects] Failed to refresh chat project references', {
+                    agentPermanentId,
+                    error,
+                });
+            }
+        })();
+
+        return () => {
+            isDisposed = true;
+        };
+    }, [agentPermanentId, hasRenderedChatMessages, latestCompletedAgentMessageKey, setCurrentProjects]);
+}
+
+/**
+ * Selects a useful server-action error message without assuming a particular serialized error type.
+ *
+ * @param error - Unknown action failure.
+ * @param fallbackMessage - Message used when the action exposes no details.
+ * @returns User-facing error message.
+ */
+function resolveProjectRuntimeErrorMessage(error: unknown, fallbackMessage: string): string {
+    return error instanceof Error && error.message.trim() ? error.message : fallbackMessage;
+}
+
+/**
+ * Compares the project fields which affect a rendered chat reference.
+ *
+ * @param firstProjects - Previously received project references.
+ * @param secondProjects - Newly received project references.
+ * @returns Whether both collections render and behave identically in project chips.
+ */
+function areAgentProjectReferencesEqual(
+    firstProjects: ReadonlyArray<AgentProjectReferenceInfo>,
+    secondProjects: ReadonlyArray<AgentProjectReferenceInfo>,
+): boolean {
+    return (
+        firstProjects.length === secondProjects.length &&
+        firstProjects.every((firstProject, projectIndex) => {
+            const secondProject = secondProjects[projectIndex];
+
+            return (
+                secondProject !== undefined &&
+                firstProject.projectName === secondProject.projectName &&
+                firstProject.displayName === secondProject.displayName &&
+                firstProject.description === secondProject.description &&
+                firstProject.faviconRelativePath === secondProject.faviconRelativePath &&
+                firstProject.isRunning === secondProject.isRunning &&
+                firstProject.projectUrl === secondProject.projectUrl
+            );
+        })
+    );
+}

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">