@promptbook/cli 0.113.0-9 → 0.114.0-0

package/apps/agents-server/src/app/{admin → superadmin}/update/UpdateJobCard.tsx

@@ -1,10 +1,12 @@
 'use client';
 
-import { ClipboardCopy, FileDown, Loader2 } from 'lucide-react';
+import { ArrowUpRight, ClipboardCopy, FileDown, Loader2 } from 'lucide-react';
+import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
 import { AdminXtermTerminal } from '../../../components/AdminTerminal/AdminXtermTerminal';
 import { Card } from '../../../components/Homepage/Card';
 import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { buildAdminChatTaskDetailHref, buildVpsSelfUpdateAdminChatTaskId } from '../../../utils/adminChatTaskLinks';
 import { downloadBlob, parseFilenameFromContentDisposition } from '../../../utils/download/browserFileDownload';
 import { formatHumanReadableTimestamp } from './formatHumanReadableTimestamp';
 import { getUpdateJobFailureMessage } from './getUpdateJobFailureMessage';
@@ -71,7 +73,19 @@ export function UpdateJobCard({ state, language }: UpdateJobCardProps) {
                             restarts the server.
                         </p>
                     </div>
-                    <UpdateJobStatusBadge status={jobStatus} />
+                    <div className="flex flex-wrap items-center gap-3">
+                        {job?.jobId && jobStatus !== 'idle' ? (
+                            <Link
+                                href={buildAdminChatTaskDetailHref(buildVpsSelfUpdateAdminChatTaskId(job.jobId))}
+                                className="inline-flex items-center gap-1 rounded-md border border-blue-200 bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-700 hover:bg-blue-100"
+                                title="Open this self-update in the task manager"
+                            >
+                                <ArrowUpRight className="h-3.5 w-3.5" />
+                                View task
+                            </Link>
+                        ) : null}
+                        <UpdateJobStatusBadge status={jobStatus} />
+                    </div>
                 </div>
 
                 <UpdateJobSummaryGrid job={job} language={language} />

package/apps/agents-server/src/app/superadmin/update/updatePageCardClassName.ts

@@ -0,0 +1,6 @@
+/**
+ * Shared card styling for `/superadmin/update` cards that should size to their content inside stacked grids.
+ *
+ * @private constant of `/superadmin/update`
+ */
+export const UPDATE_PAGE_CARD_CLASS_NAME = '!h-auto min-w-0 hover:border-gray-200 hover:shadow-md';

package/apps/agents-server/src/app/system/user-wallet/UserWalletClient.tsx

@@ -40,7 +40,11 @@ export function UserWalletClient(props: UserWalletClientProps) {
 
     return (
         <div className="container mx-auto p-8 max-w-6xl">
-            <h1 className="text-3xl font-bold mb-8">User Wallet</h1>
+            <h1 className="text-3xl font-bold mb-2">Agent Wallet</h1>
+            <p className="text-sm text-gray-600 mb-8">
+                Every agent has its own wallet giving it access to external resources — login credentials, logged-in
+                sessions, access tokens, and its persistent browser profile.
+            </p>
 
             {state.error && (
                 <div className="mb-6 rounded-md border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700">

package/apps/agents-server/src/app/system/user-wallet/UserWalletDraft.ts

@@ -161,6 +161,14 @@ export function validateUserWalletDraft(draft: UserWalletDraft): string | null {
         return 'Secret is required.';
     }
 
+    if (draft.recordType === 'BROWSER_PROFILE' && !draft.secret.trim()) {
+        return 'Browser profile directory path is required.';
+    }
+
+    if (draft.recordType === 'BROWSER_PROFILE' && draft.isGlobal) {
+        return 'Browser profile records must be scoped to one agent.';
+    }
+
     try {
         parseWalletJsonSchemaFromTextarea(draft.jsonSchemaText);
     } catch (validationError) {
@@ -187,7 +195,7 @@ export function createUserWalletRecordRequestPayload(
         jsonSchema,
         username: draft.recordType === 'USERNAME_PASSWORD' ? draft.username : undefined,
         password: draft.recordType === 'USERNAME_PASSWORD' ? draft.password : undefined,
-        secret: draft.recordType === 'ACCESS_TOKEN' ? draft.secret : undefined,
+        secret: draft.recordType === 'ACCESS_TOKEN' || draft.recordType === 'BROWSER_PROFILE' ? draft.secret : undefined,
         cookies: draft.recordType === 'SESSION_COOKIE' ? draft.cookies : undefined,
         isUserScoped: draft.isUserScoped,
         isGlobal: draft.isGlobal,

package/apps/agents-server/src/app/system/user-wallet/UserWalletRecordFormFields.tsx

@@ -56,6 +56,7 @@ export function UserWalletRecordFormFields({
                     </option>
                     <option value="USERNAME_PASSWORD">Username + Password</option>
                     <option value="SESSION_COOKIE">Session Cookie</option>
+                    <option value="BROWSER_PROFILE">Browser Profile</option>
                 </select>
                 <input
                     value={draft.service}
@@ -172,6 +173,18 @@ function UserWalletCredentialFields(props: {
         );
     }
 
+    if (props.draft.recordType === 'BROWSER_PROFILE') {
+        // The profile itself lives on the server filesystem - the wallet stores only the link to it
+        return (
+            <input
+                value={props.draft.secret}
+                onChange={(event) => props.updateDraft('secret', event.target.value)}
+                placeholder="Filesystem path to the agent browser-profile directory"
+                className="w-full rounded-md border border-gray-300 px-3 py-2 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+        );
+    }
+
     return (
         <SecretTextarea
             value={props.draft.secret}

package/apps/agents-server/src/app/system/user-wallet/UserWalletRecordValue.tsx

@@ -44,6 +44,18 @@ export function UserWalletRecordValue({ record }: UserWalletRecordValueProps) {
         );
     }
 
+    if (record.recordType === 'BROWSER_PROFILE') {
+        // The profile directory link is not a secret - only the profile files on the server are sensitive
+        return (
+            <div
+                className="rounded-md border border-gray-200 bg-gray-50 px-2 py-1 font-mono text-xs text-gray-700 break-all"
+                aria-label="Agent browser-profile directory"
+            >
+                {record.secret || '-'}
+            </div>
+        );
+    }
+
     return (
         <SecretTextarea
             value={record.secret || ''}

package/apps/agents-server/src/app/system/user-wallet/page.tsx

@@ -5,7 +5,10 @@ import { UserWalletClient } from './UserWalletClient';
 import type { UserWalletAgentOption } from './UserWalletAgentOption';
 
 /**
- * User wallet management page.
+ * Agent wallet management page.
+ *
+ * Note: The route stays `/system/user-wallet` for backwards compatibility, but the wallet records
+ * belong to agents - every agent has its own wallet.
  */
 export default async function UserWalletPage() {
     const currentUser = await getCurrentUser();

package/apps/agents-server/src/components/AdminTerminal/AdminTerminalCard.tsx

@@ -105,6 +105,11 @@ type AdminTerminalCardProps<TSession extends AdminTerminalSession> = {
      */
     readonly outputEmptyState: string;
 
+    /**
+     * Whether the terminal output area should be mounted.
+     */
+    readonly isOutputVisible?: boolean;
+
     /**
      * Optional shortcut buttons that send raw terminal input.
      */
@@ -136,6 +141,7 @@ export function AdminTerminalCard<TSession extends AdminTerminalSession>({
     stopLabel,
     outputLabel,
     outputEmptyState,
+    isOutputVisible = true,
     quickActions = [],
     children,
 }: AdminTerminalCardProps<TSession>) {
@@ -175,32 +181,34 @@ export function AdminTerminalCard<TSession extends AdminTerminalSession>({
 
                 {children}
 
-                <div className="space-y-2">
-                    <div className="flex flex-wrap items-center justify-between gap-3">
-                        <h3 className="text-sm font-semibold text-slate-700">{outputLabel}</h3>
-                        {session ? (
-                            <span className="text-xs text-slate-500">
-                                {session.isRunning
-                                    ? 'Running'
-                                    : session.exitCode === 0
-                                      ? 'Finished successfully'
-                                      : 'Finished with an error'}
-                            </span>
-                        ) : (
-                            <span className="text-xs text-slate-500">No session started yet.</span>
-                        )}
+                {isOutputVisible ? (
+                    <div className="space-y-2">
+                        <div className="flex flex-wrap items-center justify-between gap-3">
+                            <h3 className="text-sm font-semibold text-slate-700">{outputLabel}</h3>
+                            {session ? (
+                                <span className="text-xs text-slate-500">
+                                    {session.isRunning
+                                        ? 'Running'
+                                        : session.exitCode === 0
+                                          ? 'Finished successfully'
+                                          : 'Finished with an error'}
+                                </span>
+                            ) : (
+                                <span className="text-xs text-slate-500">No session started yet.</span>
+                            )}
+                        </div>
+                        <AdminXtermTerminal
+                            terminalId={session?.id || `${title}:empty`}
+                            output={session?.output || ''}
+                            emptyState={outputEmptyState}
+                            isRunning={Boolean(session?.isRunning)}
+                            ariaLabel={outputLabel}
+                            onData={onSend}
+                        />
                     </div>
-                    <AdminXtermTerminal
-                        terminalId={session?.id || `${title}:empty`}
-                        output={session?.output || ''}
-                        emptyState={outputEmptyState}
-                        isRunning={Boolean(session?.isRunning)}
-                        ariaLabel={outputLabel}
-                        onData={onSend}
-                    />
-                </div>
+                ) : null}
 
-                {quickActions.length > 0 ? (
+                {isOutputVisible && quickActions.length > 0 ? (
                     <div className="flex flex-wrap gap-3">
                         {quickActions.map((quickAction) => (
                             <button

package/apps/agents-server/src/components/AdminTerminal/useAdminTerminalSession.ts

@@ -107,6 +107,22 @@ type UseAdminTerminalSessionOptions = {
     readonly isAutoStartEnabled?: boolean;
 };
 
+/**
+ * Appends terminal-stream query parameters while preserving parameters already present on a base path.
+ *
+ * @param basePath - Terminal API path, possibly with routing parameters.
+ * @param params - Additional query parameters.
+ * @returns The complete terminal API path.
+ */
+function appendTerminalQueryParameters(basePath: string, params: URLSearchParams): string {
+    const query = params.toString();
+    if (!query) {
+        return basePath;
+    }
+
+    return `${basePath}${basePath.includes('?') ? '&' : '?'}${query}`;
+}
+
 /**
  * Shared browser hook for admin pages that start, stream, write to, and stop one terminal session.
  *
@@ -158,7 +174,12 @@ export function useAdminTerminalSession<TSession extends AdminTerminalSession>(
             return;
         }
 
-        const eventSource = new EventSource(`${options.basePath}?sessionId=${encodeURIComponent(sessionId)}&stream=1`);
+        const eventSource = new EventSource(
+            appendTerminalQueryParameters(
+                options.basePath,
+                new URLSearchParams({ sessionId, stream: '1' }),
+            ),
+        );
 
         const handleSnapshot = (event: MessageEvent<string>) => {
             const payload = JSON.parse(event.data) as TSession;

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

@@ -83,6 +83,10 @@ export type AgentContextMenuBaseProps = {
      * Folder context for navigating to the agent's folder, when available.
      */
     readonly folderContext?: AgentFolderContext | null;
+    /**
+     * Whether the projects view link should be shown.
+     */
+    readonly isProjectsViewVisible?: boolean;
     /**
      * Whether the current user is an admin.
      */

package/apps/agents-server/src/components/AgentContextMenu/useAgentContextMenuActions.ts

@@ -6,6 +6,7 @@ import { useCallback, useMemo } from 'react';
 import { getAgentLinks } from '../../app/agents/[agentName]/agentLinks';
 import { deleteAgent } from '../../app/recycle-bin/actions';
 import { DEFAULT_AGENT_VISIBILITY, type AgentVisibility } from '../../utils/agentVisibility';
+import { downloadAgentBook } from '../../utils/agentBook/downloadAgentBook';
 import { promptCloneAgent } from '../AgentCloning/cloneAgent';
 import { useAgentNaming } from '../AgentNaming/AgentNamingContext';
 import { showAlert, showConfirm, showPrompt, showVisibilityDialog } from '../AsyncDialogs/asyncDialogs';
@@ -70,6 +71,7 @@ type UseAgentContextMenuActionsResult = {
     readonly editBookLink: AgentContextMenuLink;
     readonly handleCloneAgent: () => Promise<void>;
     readonly handleDeleteAgent: () => Promise<void>;
+    readonly handleDownloadAgentBook: () => Promise<void>;
     readonly handleRenameAgent: () => Promise<void>;
     readonly handleRequestVisibilityUpdate: () => Promise<void>;
     readonly handleUpdateUrl: () => Promise<void>;
@@ -445,6 +447,33 @@ function useAgentContextMenuCloneAction(actionContext: AgentContextMenuActionCon
     }, [agentIdentifier, displayName, formatText, onRequestClose, router]);
 }
 
+/**
+ * Creates the stored-book download action handler for the menu.
+ *
+ * @param actionContext - Shared action context.
+ * @returns Stable stored-book download handler.
+ *
+ * @private function of useAgentContextMenuItems
+ */
+function useAgentContextMenuDownloadBookAction(actionContext: AgentContextMenuActionContext): () => Promise<void> {
+    const { agentIdentifier, displayName, formatText } = actionContext;
+
+    return useCallback(async () => {
+        try {
+            await downloadAgentBook({
+                agentIdentifier,
+                filenameAgentName: displayName,
+            });
+        } catch (error) {
+            console.error('Failed to download agent book:', error);
+            await showAgentContextMenuAlert(
+                formatText('Download failed'),
+                resolveAgentContextMenuErrorMessage(error, formatText('Failed to download agent book.')),
+            );
+        }
+    }, [agentIdentifier, displayName, formatText]);
+}
+
 /**
  * Persists a new visibility value for the current agent.
  *
@@ -557,6 +586,7 @@ export function useAgentContextMenuActions(
     const handleDeleteAgent = useAgentContextMenuDeleteAction(actionContext);
     const handleRenameAgent = useAgentContextMenuRenameAction(actionContext);
     const handleCloneAgent = useAgentContextMenuCloneAction(actionContext);
+    const handleDownloadAgentBook = useAgentContextMenuDownloadBookAction(actionContext);
     const { handleRequestVisibilityUpdate, shouldShowVisibilityAction } = useAgentContextMenuVisibilityActions(
         actionContext,
         props.isAuthenticated ?? props.isAdmin ?? false,
@@ -566,6 +596,7 @@ export function useAgentContextMenuActions(
         editBookLink,
         handleCloneAgent,
         handleDeleteAgent,
+        handleDownloadAgentBook,
         handleRenameAgent,
         handleRequestVisibilityUpdate,
         handleUpdateUrl,

package/apps/agents-server/src/components/AgentContextMenu/useAgentContextMenuItems.ts

@@ -7,7 +7,9 @@ import {
     CopyPlusIcon,
     DownloadIcon,
     ExternalLinkIcon,
+    FileDownIcon,
     FileTextIcon,
+    FolderKanbanIcon,
     FolderOpenIcon,
     MailIcon,
     MessageCircleQuestionIcon,
@@ -20,6 +22,7 @@ import {
     SquareSplitHorizontalIcon,
     TrashIcon,
 } from 'lucide-react';
+import { buildAgentProjectsDashboardHref } from '../../utils/agentProjects/agentProjectHrefs';
 import { buildFreshAgentChatHref } from '../../utils/agentRouting/agentRouteHrefs';
 import { useAgentNaming } from '../AgentNaming/AgentNamingContext';
 import type { ContextMenuItem, ContextMenuLinkItem } from '../ContextMenu/ContextMenuPanel';
@@ -192,17 +195,22 @@ function createSharingMenuItems(
  * Creates navigation items for opening the current agent in related views.
  *
  * @param agentIdentifier - Current permanent id or routed agent name.
+ * @param handleDownloadAgentBook - Stored `.book` download action handler.
  * @param editBookLink - Generated edit-book link metadata.
  * @param folderContext - Optional folder navigation context.
  * @param formatText - Agent-aware text formatter.
+ * @param isAuthenticated - Whether logged-in-only workspace links should render.
+ * @param isProjectsViewVisible - Whether the projects view link should render.
  * @returns Navigation and workspace menu items.
  */
 function createWorkspaceMenuItems(
     agentIdentifier: string,
+    handleDownloadAgentBook: () => Promise<void>,
     editBookLink: AgentContextMenuNavigationLink,
     folderContext: AgentContextMenuBaseProps['folderContext'],
     formatText: FormatAgentContextMenuText,
     isAuthenticated: boolean,
+    isProjectsViewVisible: boolean,
 ): ContextMenuItem[] {
     const menuItems: ContextMenuItem[] = [];
 
@@ -230,6 +238,15 @@ function createWorkspaceMenuItems(
         },
     );
 
+    if (isProjectsViewVisible) {
+        menuItems.push({
+            type: 'link',
+            href: buildAgentProjectsDashboardHref(agentIdentifier),
+            icon: FolderKanbanIcon,
+            label: formatText('Projects'),
+        });
+    }
+
     if (isAuthenticated) {
         menuItems.push(
             {
@@ -244,6 +261,13 @@ function createWorkspaceMenuItems(
                 icon: editBookLink.icon,
                 label: editBookLink.title,
             },
+            {
+                type: 'action',
+                icon: FileDownIcon,
+                label: formatText('Download .book'),
+                onClick: handleDownloadAgentBook,
+                closeOnClick: true,
+            },
         );
     }
 
@@ -405,6 +429,7 @@ export function useAgentContextMenuItems(props: AgentContextMenuBaseProps): Cont
         isInstalled = false,
         onInstallApp,
         fromDirectoryListing,
+        isProjectsViewVisible = false,
     } = props;
 
     const { isExperimentalPwaAppEnabled } = useMetadataFlags();
@@ -416,6 +441,7 @@ export function useAgentContextMenuItems(props: AgentContextMenuBaseProps): Cont
         editBookLink,
         handleCloneAgent,
         handleDeleteAgent,
+        handleDownloadAgentBook,
         handleRenameAgent,
         handleRequestVisibilityUpdate,
         handleUpdateUrl,
@@ -426,10 +452,12 @@ export function useAgentContextMenuItems(props: AgentContextMenuBaseProps): Cont
     } = useAgentContextMenuActions(props, formatText);
     const workspaceMenuItems = createWorkspaceMenuItems(
         agentIdentifier,
+        handleDownloadAgentBook,
         editBookLink,
         folderContext,
         formatText,
         isAuthenticated,
+        isProjectsViewVisible,
     );
     const managementMenuItems = createManagementMenuItems(
         formatText,

package/apps/agents-server/src/components/AgentNaming/legacyAgentTextTranslations.cs.yaml

@@ -48,6 +48,8 @@
 "Do you want to permanently delete this chat?": "Chcete tento chat trvale smazat?"
 "Drag agent": "Přetáhnout agenta"
 "Drag folder": "Přetáhnout složku"
+"Download .book": "Stáhnout .book"
+"Download failed": "Stažení selhalo"
 "Edit Book": "Upravit"
 "Edit the agent's knowledge book.": "Upravte znalostní book agenta."
 "Embed the agent chat widget directly into your React application.": "Vložte widget chatu agenta přímo do vaší React aplikace."
@@ -68,6 +70,7 @@
 "Failed to rename agent.": "Nepodařilo se přejmenovat agenta."
 "Failed to restore agent": "Nepodařilo se obnovit agenta"
 "Failed to restore agent.": "Nepodařilo se obnovit agenta."
+"Failed to download agent book.": "Book agenta se nepodařilo stáhnout."
 "Failed to update agent visibility": "Nepodařilo se aktualizovat viditelnost agenta"
 "Failed to update agent visibility.": "Nepodařilo se aktualizovat viditelnost agenta."
 "Federated agents": "Federovaní agenti"
@@ -106,6 +109,7 @@
 "Previous versions of this agent.": "Předchozí verze tohoto agenta."
 "Private": "Soukromý"
 "Private mode is on. Chat history, memories, and learning are disabled.": "Soukromý režim je zapnutý. Historie chatu, paměť i učení jsou vypnuté."
+"Projects": "Projekty"
 "Queued": "Ve frontě"
 "Promptbook Agent Embed": "Vložení Promptbook agenta"
 "Rename": "Přejmenovat"
@@ -131,6 +135,7 @@
 "Show less": "Zobrazit méně"
 "Show more": "Zobrazit více"
 "Showing chat history for agent": "Zobrazuji historii chatů pro agenta"
+"Showing chat history for user": "Zobrazuji historii chatů pro uživatele"
 "Showing feedback for agent": "Zobrazuji zpětnou vazbu pro agenta"
 "Source": "Zdroj"
 "The agent you are looking for does not exist, but you can create your own!": "Agent, kterého hledáte, neexistuje, ale můžete si vytvořit vlastního!"
@@ -350,6 +355,8 @@
 "Chat view": "Chatový pohled"
 "Loading history…": "Načítám historii…"
 "No chat history found.": "Nebyla nalezena žádná historie chatu."
+"Pick an agent to filter by chat thread": "Vyberte agenta pro filtrování podle vlákna chatu"
+"Select a chat thread to view the conversation": "Vyberte vlákno chatu pro zobrazení konverzace"
 "Role": "Role"
 "Preview": "Náhled"
 "View": "Zobrazení"

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

@@ -0,0 +1,182 @@
+'use client';
+
+import { useId, useState } from 'react';
+import { DnsProviderGuides } from '../DnsProviderGuides/DnsProviderGuides';
+import { createAgentProjectDnsRecord } from '../../utils/agentProjects/createAgentProjectDnsRecords';
+
+/**
+ * Displays DNS setup instructions for generated agent project domains.
+ *
+ * The two tab groups intentionally represent independent choices: one domain
+ * coverage and one record type. Exactly one record from the selected
+ * combination should be configured at the DNS provider.
+ */
+export function AgentProjectDnsInstructions({
+    isDnsIssue = false,
+    projectDomain,
+    publicIpAddress,
+    serverDomain,
+}: {
+    /**
+     * Whether at least one generated project domain currently fails DNS verification.
+     */
+    readonly isDnsIssue?: boolean;
+
+    /**
+     * Example generated project domain used by the single-project variant.
+     */
+    readonly projectDomain: string;
+
+    /**
+     * Public VPS IP address, when known by the server.
+     */
+    readonly publicIpAddress: string | null | undefined;
+
+    /**
+     * Base server domain used by generated project domains.
+     */
+    readonly serverDomain: string;
+}) {
+    const [isWildcardDomain, setIsWildcardDomain] = useState(true);
+    const [isCnameRecord, setIsCnameRecord] = useState(true);
+    const instructionId = useId();
+    const selectedRecord = createAgentProjectDnsRecord({
+        isCnameRecord,
+        isWildcardDomain,
+        projectDomain,
+        publicIpAddress,
+        serverDomain,
+    });
+    const selectedDomainDescription = isWildcardDomain
+        ? `This covers all generated project domains under ${serverDomain}.`
+        : `This covers one project, for example ${projectDomain}. Repeat it for each project that needs a public URL.`;
+
+    return (
+        <section className="space-y-4 rounded-lg border border-indigo-200 bg-indigo-50 px-4 py-4 text-sm text-indigo-950">
+            <div className="space-y-1">
+                <h4 className="font-semibold">Project DNS setup</h4>
+                <p>
+                    Project URLs use a subdomain of <code>{serverDomain}</code>. Configure exactly one of the
+                    following setups; do not add both the single-project and wildcard records, or both A and CNAME
+                    records for the same hostname.
+                </p>
+            </div>
+
+            {isDnsIssue ? (
+                <p className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-amber-900">
+                    One or more generated project domains do not resolve to this VPS yet. The recommended wildcard
+                    CNAME setup is selected below.
+                </p>
+            ) : null}
+
+            <div className="grid gap-4 md:grid-cols-2">
+                <DnsInstructionTabGroup
+                    label="Domain coverage"
+                    tabs={[
+                        { label: 'Single project', value: false },
+                        { label: 'Wildcard (all projects, recommended)', value: true },
+                    ]}
+                    selectedValue={isWildcardDomain}
+                    onSelect={setIsWildcardDomain}
+                    idPrefix={`${instructionId}-domain`}
+                />
+                <DnsInstructionTabGroup
+                    label="Record type"
+                    tabs={[
+                        { label: 'A record (VPS IP)', value: false },
+                        { label: 'CNAME record (server domain, recommended)', value: true },
+                    ]}
+                    selectedValue={isCnameRecord}
+                    onSelect={setIsCnameRecord}
+                    idPrefix={`${instructionId}-record`}
+                />
+            </div>
+
+            <p className="text-indigo-900">{selectedDomainDescription}</p>
+
+            <div className="overflow-x-auto rounded-lg border border-indigo-200 bg-white">
+                <table className="min-w-full divide-y divide-indigo-100 text-xs">
+                    <thead className="bg-indigo-100/60 text-indigo-900">
+                        <tr>
+                            <th className="px-3 py-2 text-left font-semibold">Type</th>
+                            <th className="px-3 py-2 text-left font-semibold">Name</th>
+                            <th className="px-3 py-2 text-left font-semibold">Value</th>
+                            <th className="px-3 py-2 text-left font-semibold">When to use</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td className="px-3 py-2 font-mono font-semibold text-indigo-950">
+                                {selectedRecord.type}
+                            </td>
+                            <td className="px-3 py-2 font-mono text-slate-800">{selectedRecord.name}</td>
+                            <td className="px-3 py-2 font-mono text-slate-800">{selectedRecord.value}</td>
+                            <td className="px-3 py-2 text-indigo-900">{selectedRecord.note}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <div className="space-y-2">
+                <p className="font-medium">How to set it up</p>
+                <ol className="list-decimal space-y-1 pl-5 text-indigo-900">
+                    <li>Open the DNS settings for the domain.</li>
+                    <li>Add the single record shown above.</li>
+                    <li>Remove conflicting A, AAAA, or CNAME records for the same hostname.</li>
+                    <li>Wait for DNS propagation, then open the project URL again.</li>
+                </ol>
+            </div>
+
+            <div className="space-y-2">
+                <p className="font-medium">Provider guides</p>
+                <DnsProviderGuides linkClassName="font-semibold text-indigo-700 underline decoration-indigo-400 underline-offset-2 hover:text-indigo-900" />
+            </div>
+        </section>
+    );
+}
+
+/**
+ * Renders one accessible two-option tab group used by the DNS instruction panel.
+ */
+function DnsInstructionTabGroup<TValue extends boolean>({
+    idPrefix,
+    label,
+    onSelect,
+    selectedValue,
+    tabs,
+}: {
+    readonly idPrefix: string;
+    readonly label: string;
+    readonly onSelect: (value: TValue) => void;
+    readonly selectedValue: TValue;
+    readonly tabs: ReadonlyArray<{ readonly label: string; readonly value: TValue }>;
+}) {
+    return (
+        <div>
+            <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-indigo-700">{label}</p>
+            <div className="flex rounded-md border border-indigo-200 bg-white p-1" role="tablist" aria-label={label}>
+                {tabs.map((tab) => {
+                    const isSelected = tab.value === selectedValue;
+
+                    return (
+                        <button
+                            key={tab.label}
+                            id={`${idPrefix}-${tab.value ? 'alternative' : 'primary'}`}
+                            type="button"
+                            role="tab"
+                            aria-selected={isSelected}
+                            onClick={() => onSelect(tab.value)}
+                            className={`flex-1 rounded px-2 py-2 text-xs font-semibold transition ${
+                                isSelected
+                                    ? 'bg-indigo-600 text-white shadow-sm'
+                                    : 'text-indigo-700 hover:bg-indigo-50 hover:text-indigo-950'
+                            }`}
+                        >
+                            {tab.label}
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}