@promptbook/cli 0.113.0-8 → 0.114.0-0

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

@@ -0,0 +1,61 @@
+import { FolderKanbanIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+import type { AgentProjectInfo } from '../../utils/agentProjects/AgentProjectInfo';
+import { AgentProjectItem } from './AgentProjectItem';
+
+/**
+ * Props of the shared agent projects board.
+ *
+ * @private component of Agent Projects dashboards
+ */
+type AgentProjectsBoardProps = {
+    /**
+     * Permanent id of the agent owning the projects.
+     */
+    readonly agentPermanentId: string;
+
+    /**
+     * Projects rendered on the board.
+     */
+    readonly projects: ReadonlyArray<AgentProjectInfo>;
+
+    /**
+     * Optional controls rendered below each full project card.
+     */
+    readonly renderProjectFooter?: (project: AgentProjectInfo) => ReactNode;
+};
+
+/**
+ * Renders all projects of one agent as cards.
+ *
+ * The board is shared by the per-agent Projects dashboard and the admin all-projects dashboard.
+ *
+ * @private component of Agent Projects dashboards
+ */
+export function AgentProjectsBoard({ agentPermanentId, projects, renderProjectFooter }: AgentProjectsBoardProps) {
+    if (projects.length === 0) {
+        return (
+            <div className="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-6 py-10 text-center">
+                <FolderKanbanIcon className="mx-auto h-8 w-8 text-gray-300" aria-hidden />
+                <p className="mt-3 text-sm font-semibold text-gray-700">No projects yet</p>
+                <p className="mx-auto mt-1 max-w-md text-sm text-gray-500">
+                    Ask the agent in chat to build something — for example a website or a script — and it will create
+                    its first project here.
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+            {projects.map((project) => (
+                <AgentProjectItem
+                    key={project.projectName}
+                    agentPermanentId={agentPermanentId}
+                    project={project}
+                    footer={renderProjectFooter?.(project)}
+                />
+            ))}
+        </div>
+    );
+}

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

@@ -0,0 +1,137 @@
+'use client';
+
+import { useState } from 'react';
+import type { CloudflareDnsBatchRecordStatus } from '../../utils/cloudflare/CloudflareDnsBatchApplication';
+import type { DnsRecordSelection } from '../../utils/dnsRecords/DnsRecordInstruction';
+import type { DnsRecordBatchPlan } from '../../utils/dnsRecords/resolveDnsRecordBatchPlan';
+import { CloudflareDnsExcludedRecordsNote } from './CloudflareDnsExcludedRecordsNote';
+import { useCloudflareDnsRecordImport } from './useCloudflareDnsRecordImport';
+
+/**
+ * Cloudflare page where an administrator creates the API token for the import.
+ *
+ * @private used by the Cloudflare DNS setup wizard
+ */
+const CLOUDFLARE_API_TOKENS_URL = 'https://dash.cloudflare.com/profile/api-tokens';
+
+/**
+ * Colors of the per-record import results.
+ *
+ * @private used by the Cloudflare DNS setup wizard
+ */
+const CLOUDFLARE_DNS_IMPORT_STATUS_CLASS_NAMES: Record<CloudflareDnsBatchRecordStatus, string> = {
+    created: 'text-emerald-700',
+    updated: 'text-emerald-700',
+    unchanged: 'text-slate-600',
+    skipped: 'text-amber-700',
+    failed: 'text-red-700',
+};
+
+/**
+ * Writes every record of the DNS manual into Cloudflare with one API token.
+ *
+ * @private used by the Cloudflare DNS setup wizard
+ */
+export function CloudflareDnsApiTokenImportStep({
+    batchPlan,
+    domain,
+    recordSelection,
+}: {
+    /**
+     * Records which can be imported at once together with the excluded ones.
+     */
+    readonly batchPlan: DnsRecordBatchPlan;
+
+    /**
+     * Hostname whose DNS records are being configured.
+     */
+    readonly domain: string;
+
+    /**
+     * Whether all listed records or one listed alternative must be configured.
+     */
+    readonly recordSelection: DnsRecordSelection;
+}) {
+    const [apiToken, setApiToken] = useState('');
+    const { isImporting, application, errorMessage, importRecords } = useCloudflareDnsRecordImport({
+        domain,
+        recordSelection,
+        records: batchPlan.applicableRecords,
+    });
+    const recordCount = batchPlan.applicableRecords.length;
+
+    return (
+        <div className="space-y-3">
+            <p className="font-medium">Import all records with one click</p>
+            <p className="text-amber-900">
+                Paste a Cloudflare API token created from the <strong>Edit zone DNS</strong> template. The token is used
+                once to write all {recordCount} record{recordCount === 1 ? '' : 's'} into the Cloudflare zone of{' '}
+                <span className="font-mono">{domain}</span> and is never stored.
+            </p>
+            <a
+                href={CLOUDFLARE_API_TOKENS_URL}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex font-semibold text-amber-700 underline decoration-amber-400 underline-offset-2 hover:text-amber-900"
+            >
+                Create a Cloudflare API token
+            </a>
+
+            <form
+                className="flex flex-wrap items-end gap-2"
+                onSubmit={(event) => {
+                    event.preventDefault();
+                    void importRecords(apiToken);
+                }}
+            >
+                <label className="flex-1 space-y-1">
+                    <span className="block text-xs font-semibold uppercase tracking-wide text-amber-700">
+                        Cloudflare API token
+                    </span>
+                    <input
+                        type="password"
+                        value={apiToken}
+                        autoComplete="off"
+                        placeholder="Leave empty to use the token configured on this VPS"
+                        onChange={(event) => setApiToken(event.target.value)}
+                        className="w-full rounded-md border border-amber-200 bg-white px-3 py-2 font-mono text-xs text-slate-800"
+                    />
+                </label>
+                <button
+                    type="submit"
+                    disabled={isImporting}
+                    className="rounded-md bg-amber-700 px-3 py-2 text-xs font-semibold text-white shadow-sm transition hover:bg-amber-800 disabled:opacity-60"
+                >
+                    {isImporting ? 'Importing…' : `Import ${recordCount} record${recordCount === 1 ? '' : 's'}`}
+                </button>
+            </form>
+
+            {errorMessage ? (
+                <p className="whitespace-pre-wrap rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-800">
+                    {errorMessage}
+                </p>
+            ) : null}
+
+            {application ? (
+                <div className="space-y-1 rounded-md border border-amber-200 bg-white px-3 py-2 text-xs">
+                    <p className="font-semibold text-amber-900">Imported into the zone {application.zoneName}</p>
+                    <ul className="space-y-1">
+                        {application.results.map((result) => (
+                            <li key={`${result.type}-${result.name}-${result.value}`}>
+                                <span className="font-mono text-slate-800">
+                                    {result.type} {result.name}
+                                </span>{' '}
+                                <span className={CLOUDFLARE_DNS_IMPORT_STATUS_CLASS_NAMES[result.status]}>
+                                    {result.status}
+                                </span>{' '}
+                                &mdash; <span className="text-slate-600">{result.message}</span>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            ) : null}
+
+            <CloudflareDnsExcludedRecordsNote excludedRecords={batchPlan.excludedRecords} />
+        </div>
+    );
+}

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

@@ -0,0 +1,28 @@
+import type { DnsRecordSelection } from '../../utils/dnsRecords/DnsRecordInstruction';
+
+/**
+ * Explains how to verify the configured records after they were written to Cloudflare.
+ *
+ * @private used by the Cloudflare DNS setup wizard
+ */
+export function CloudflareDnsCheckStep({
+    recordSelection,
+}: {
+    /**
+     * Whether all listed records or one listed alternative must be configured.
+     */
+    readonly recordSelection: DnsRecordSelection;
+}) {
+    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' ? (
+                    <li>Remove conflicting A, AAAA, or CNAME records for the same hostname.</li>
+                ) : null}
+                <li>Wait for DNS propagation.</li>
+                <li>Refresh this page to check the DNS status again.</li>
+            </ol>
+        </div>
+    );
+}

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

@@ -0,0 +1,37 @@
+import type { ExcludedDnsRecordInstruction } from '../../utils/dnsRecords/resolveDnsRecordBatchPlan';
+
+/**
+ * Lists the records which are intentionally left out of a batch import.
+ *
+ * @private used by the Cloudflare DNS setup wizard
+ */
+export function CloudflareDnsExcludedRecordsNote({
+    excludedRecords,
+}: {
+    /**
+     * Records which have to be configured manually.
+     */
+    readonly excludedRecords: ReadonlyArray<ExcludedDnsRecordInstruction>;
+}) {
+    if (excludedRecords.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className="space-y-1 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900">
+            <p className="font-semibold">Not part of this import</p>
+            <ul className="list-disc space-y-1 pl-5">
+                {excludedRecords.map((excludedRecord) => (
+                    <li
+                        key={`${excludedRecord.record.type}-${excludedRecord.record.name}-${excludedRecord.record.value}`}
+                    >
+                        <span className="font-mono">
+                            {excludedRecord.record.type} {excludedRecord.record.name}
+                        </span>{' '}
+                        &mdash; {excludedRecord.reason}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

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

@@ -0,0 +1,75 @@
+import { isProxyableCloudflareDnsRecordType } from '../../utils/cloudflare/CloudflareApi';
+import type { DnsRecordInstruction, DnsRecordSelection } from '../../utils/dnsRecords/DnsRecordInstruction';
+
+/**
+ * Direct Cloudflare dashboard URL for the DNS records page.
+ *
+ * @private used by the Cloudflare DNS setup wizard
+ */
+const CLOUDFLARE_DNS_RECORDS_URL = 'https://dash.cloudflare.com/?to=/:account/:zone/dns/records';
+
+/**
+ * Explains how to add the records of the DNS manual by hand in the Cloudflare dashboard.
+ *
+ * @private used by the Cloudflare DNS setup wizard
+ */
+export function CloudflareDnsManualStep({
+    domain,
+    recordSelection,
+    records,
+}: {
+    /**
+     * Hostname whose DNS records are being configured.
+     */
+    readonly domain: string;
+
+    /**
+     * Whether all listed records or one listed alternative must be configured.
+     */
+    readonly recordSelection: DnsRecordSelection;
+
+    /**
+     * The canonical DNS records displayed by the parent instruction panel.
+     */
+    readonly records: ReadonlyArray<DnsRecordInstruction>;
+}) {
+    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.';
+
+    return (
+        <div className="space-y-2">
+            <p className="font-medium">Add the records one by one</p>
+            <ol className="list-decimal space-y-1 pl-5 text-amber-900">
+                <li>Sign in to Cloudflare.</li>
+                <li>
+                    Select the Cloudflare zone that contains <span className="font-mono">{domain}</span>, then open DNS,
+                    then Records.
+                </li>
+                <li>Select Add record.</li>
+                <li>{recordSelectionInstruction}</li>
+                <li>
+                    Copy its Type, Name, and Value from the table above. Cloudflare calls the Value field Content or
+                    Target, depending on the record type.
+                </li>
+                {isProxyStatusRelevant ? (
+                    <li>
+                        For A, AAAA, and CNAME records, set Proxy status to DNS only (the gray cloud). This lets this
+                        page verify that the hostname resolves directly to the VPS.
+                    </li>
+                ) : null}
+                <li>Select Save.</li>
+            </ol>
+            <a
+                href={CLOUDFLARE_DNS_RECORDS_URL}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex font-semibold text-amber-700 underline decoration-amber-400 underline-offset-2 hover:text-amber-900"
+            >
+                Open Cloudflare DNS records
+            </a>
+        </div>
+    );
+}

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

@@ -0,0 +1,88 @@
+'use client';
+
+import { useState } from 'react';
+import type { DnsRecordInstruction, DnsRecordSelection } from '../../utils/dnsRecords/DnsRecordInstruction';
+import { resolveDnsRecordBatchPlan } from '../../utils/dnsRecords/resolveDnsRecordBatchPlan';
+import { CloudflareDnsApiTokenImportStep } from './CloudflareDnsApiTokenImportStep';
+import { CloudflareDnsCheckStep } from './CloudflareDnsCheckStep';
+import { CloudflareDnsManualStep } from './CloudflareDnsManualStep';
+import { CloudflareDnsWizardStepNavigation } from './CloudflareDnsWizardStepNavigation';
+import { CLOUDFLARE_DNS_WIZARD_STEPS, type CloudflareDnsWizardStep } from './CloudflareDnsWizardSteps';
+import { CloudflareDnsZoneFileImportStep } from './CloudflareDnsZoneFileImportStep';
+
+/**
+ * Guided Cloudflare instructions displayed alongside the provider-neutral DNS record table.
+ *
+ * The record table remains the single source of truth for the values to configure. This wizard adds the two batch
+ * ways of configuring all of them at once - an API token import and a zone file import - and keeps the manual steps
+ * as a fallback.
+ *
+ * @private shared by the Agents Server DNS instruction views
+ */
+export function CloudflareDnsWizard({
+    domain,
+    recordSelection,
+    records,
+}: {
+    /**
+     * Hostname whose DNS records are being configured.
+     */
+    readonly domain: string;
+
+    /**
+     * Whether all listed records or one listed alternative must be configured.
+     */
+    readonly recordSelection: DnsRecordSelection;
+
+    /**
+     * The canonical DNS records displayed by the parent instruction panel.
+     */
+    readonly records: ReadonlyArray<DnsRecordInstruction>;
+}) {
+    const batchPlan = resolveDnsRecordBatchPlan({ records, recordSelection });
+    const isBatchImportAvailable = batchPlan.applicableRecords.length > 0;
+    const availableSteps = CLOUDFLARE_DNS_WIZARD_STEPS.filter((step) => isBatchImportAvailable || !step.isBatchStep);
+    const [currentStep, setCurrentStep] = useState<CloudflareDnsWizardStep>(
+        isBatchImportAvailable ? 'import-with-api-token' : 'add-manually',
+    );
+
+    return (
+        <section
+            aria-label="Cloudflare DNS setup"
+            className="space-y-4 rounded-lg border border-amber-200 bg-white/70 p-4"
+        >
+            <div className="space-y-1">
+                <h3 className="font-semibold">Cloudflare setup wizard</h3>
+                <p className="text-xs text-amber-800">
+                    {isBatchImportAvailable
+                        ? 'Add all records from this manual to Cloudflare at once, or add them one by one.'
+                        : 'Follow the steps below to add the records from this manual in Cloudflare.'}
+                </p>
+            </div>
+
+            <CloudflareDnsWizardStepNavigation
+                currentStep={currentStep}
+                onStepChange={setCurrentStep}
+                steps={availableSteps}
+            />
+
+            {currentStep === 'import-with-api-token' ? (
+                <CloudflareDnsApiTokenImportStep
+                    batchPlan={batchPlan}
+                    domain={domain}
+                    recordSelection={recordSelection}
+                />
+            ) : null}
+
+            {currentStep === 'import-zone-file' ? (
+                <CloudflareDnsZoneFileImportStep batchPlan={batchPlan} domain={domain} />
+            ) : null}
+
+            {currentStep === 'add-manually' ? (
+                <CloudflareDnsManualStep domain={domain} recordSelection={recordSelection} records={records} />
+            ) : null}
+
+            {currentStep === 'check-dns' ? <CloudflareDnsCheckStep recordSelection={recordSelection} /> : null}
+        </section>
+    );
+}

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

@@ -0,0 +1,53 @@
+'use client';
+
+import type { CLOUDFLARE_DNS_WIZARD_STEPS, CloudflareDnsWizardStep } from './CloudflareDnsWizardSteps';
+
+/**
+ * Renders the selectable progression for the Cloudflare DNS setup wizard.
+ *
+ * @private used by the Cloudflare DNS setup wizard
+ */
+export function CloudflareDnsWizardStepNavigation({
+    currentStep,
+    onStepChange,
+    steps,
+}: {
+    /**
+     * Step currently visible to the administrator.
+     */
+    readonly currentStep: CloudflareDnsWizardStep;
+
+    /**
+     * Updates the currently visible wizard step.
+     */
+    readonly onStepChange: (step: CloudflareDnsWizardStep) => void;
+
+    /**
+     * Steps available for the shown records.
+     */
+    readonly steps: typeof CLOUDFLARE_DNS_WIZARD_STEPS;
+}) {
+    return (
+        <div className="flex flex-wrap gap-2" aria-label="Cloudflare setup steps">
+            {steps.map((step) => {
+                const isCurrentStep = currentStep === step.id;
+
+                return (
+                    <button
+                        key={step.id}
+                        type="button"
+                        aria-current={isCurrentStep ? 'step' : undefined}
+                        onClick={() => onStepChange(step.id)}
+                        className={`rounded-md px-3 py-1.5 text-xs font-semibold transition ${
+                            isCurrentStep
+                                ? 'bg-amber-700 text-white shadow-sm'
+                                : 'border border-amber-200 bg-white text-amber-800 hover:bg-amber-100'
+                        }`}
+                    >
+                        {step.label}
+                    </button>
+                );
+            })}
+        </div>
+    );
+}

package/apps/agents-server/src/components/CloudflareDnsWizard/CloudflareDnsWizardSteps.ts

@@ -0,0 +1,36 @@
+/**
+ * Stable identifiers for the Cloudflare DNS setup wizard steps.
+ *
+ * @private used by the Cloudflare DNS setup wizard
+ */
+export type CloudflareDnsWizardStep = 'import-with-api-token' | 'import-zone-file' | 'add-manually' | 'check-dns';
+
+/**
+ * Labels and order of the Cloudflare DNS setup wizard steps.
+ *
+ * The two batch steps are alternatives which configure all records at once, the manual step stays available as a
+ * fallback for records which cannot be batched.
+ *
+ * @private used by the Cloudflare DNS setup wizard
+ */
+export const CLOUDFLARE_DNS_WIZARD_STEPS: ReadonlyArray<{
+    /**
+     * Stable step identifier.
+     */
+    readonly id: CloudflareDnsWizardStep;
+
+    /**
+     * Label of the step button.
+     */
+    readonly label: string;
+
+    /**
+     * Whether the step configures all records at once.
+     */
+    readonly isBatchStep: boolean;
+}> = [
+    { id: 'import-with-api-token', label: 'Import with API token', isBatchStep: true },
+    { id: 'import-zone-file', label: 'Import zone file', isBatchStep: true },
+    { id: 'add-manually', label: 'Add manually', isBatchStep: false },
+    { id: 'check-dns', label: 'Check DNS', isBatchStep: false },
+];

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

@@ -0,0 +1,109 @@
+'use client';
+
+import { useState } from 'react';
+import { createDnsZoneFileExport } from '../../utils/dnsRecords/createDnsZoneFileExport';
+import type { DnsRecordBatchPlan } from '../../utils/dnsRecords/resolveDnsRecordBatchPlan';
+import { CloudflareDnsExcludedRecordsNote } from './CloudflareDnsExcludedRecordsNote';
+
+/**
+ * Cloudflare help page for importing a zone file.
+ *
+ * @private used by the Cloudflare DNS setup wizard
+ */
+const CLOUDFLARE_ZONE_FILE_IMPORT_GUIDE_URL =
+    'https://developers.cloudflare.com/dns/manage-dns-records/how-to/import-and-export/';
+
+/**
+ * Exports all records of the DNS manual as one zone file which Cloudflare imports at once.
+ *
+ * @private used by the Cloudflare DNS setup wizard
+ */
+export function CloudflareDnsZoneFileImportStep({
+    batchPlan,
+    domain,
+}: {
+    /**
+     * Records which can be exported at once together with the excluded ones.
+     */
+    readonly batchPlan: DnsRecordBatchPlan;
+
+    /**
+     * Hostname whose DNS records are being configured.
+     */
+    readonly domain: string;
+}) {
+    const [isCopied, setIsCopied] = useState(false);
+    const zoneFile = createDnsZoneFileExport({ domain, records: batchPlan.applicableRecords });
+
+    /**
+     * Copies the generated zone file into the clipboard.
+     */
+    const handleCopyZoneFile = async () => {
+        try {
+            await navigator.clipboard.writeText(zoneFile);
+            setIsCopied(true);
+        } catch (error) {
+            console.error('Failed to copy the zone file:', error);
+        }
+    };
+
+    /**
+     * Downloads the generated zone file so that it can be uploaded to Cloudflare.
+     */
+    const handleDownloadZoneFile = () => {
+        const zoneFileUrl = URL.createObjectURL(new Blob([zoneFile], { type: 'text/plain' }));
+        const downloadLink = document.createElement('a');
+
+        downloadLink.href = zoneFileUrl;
+        downloadLink.download = `${domain}-dns-records.txt`;
+        downloadLink.click();
+        URL.revokeObjectURL(zoneFileUrl);
+    };
+
+    return (
+        <div className="space-y-3">
+            <p className="font-medium">Import all records as a zone file</p>
+            <ol className="list-decimal space-y-1 pl-5 text-amber-900">
+                <li>Download or copy the zone file below.</li>
+                <li>
+                    In Cloudflare open DNS, then Records, then <span className="font-semibold">Import and Export</span>.
+                </li>
+                <li>
+                    Select <span className="font-semibold">Import DNS records</span> and upload the file.
+                </li>
+                <li>Keep proxying turned off so that this page can verify the hostname.</li>
+            </ol>
+
+            <div className="flex flex-wrap gap-2">
+                <button
+                    type="button"
+                    onClick={() => void handleCopyZoneFile()}
+                    className="rounded-md bg-amber-700 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-amber-800"
+                >
+                    {isCopied ? 'Copied' : 'Copy zone file'}
+                </button>
+                <button
+                    type="button"
+                    onClick={handleDownloadZoneFile}
+                    className="rounded-md border border-amber-200 bg-white px-3 py-1.5 text-xs font-semibold text-amber-800 transition hover:bg-amber-100"
+                >
+                    Download zone file
+                </button>
+                <a
+                    href={CLOUDFLARE_ZONE_FILE_IMPORT_GUIDE_URL}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="inline-flex items-center font-semibold text-amber-700 underline decoration-amber-400 underline-offset-2 hover:text-amber-900"
+                >
+                    Cloudflare import guide
+                </a>
+            </div>
+
+            <pre className="overflow-auto rounded-md border border-amber-200 bg-white p-3 font-mono text-xs text-slate-800">
+                {zoneFile}
+            </pre>
+
+            <CloudflareDnsExcludedRecordsNote excludedRecords={batchPlan.excludedRecords} />
+        </div>
+    );
+}