@promptbook/cli 0.113.0-9 → 0.114.0-0

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

@@ -0,0 +1,24 @@
+import { TriangleAlertIcon } from 'lucide-react';
+import Link from 'next/link';
+
+/**
+ * Displays one concise administrator warning for a generated project domain with unresolved DNS.
+ *
+ * @private shared by Agent Projects administration views
+ */
+export function AgentProjectDnsWarning({ projectDomain }: { readonly projectDomain: string }) {
+    return (
+        <div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-amber-800">
+            <TriangleAlertIcon className="h-4 w-4 shrink-0 text-amber-600" aria-hidden />
+            <span>
+                DNS is not ready for <code className="font-mono">{projectDomain}</code>.
+            </span>
+            <Link
+                href="/superadmin/servers"
+                className="font-semibold text-amber-800 underline decoration-amber-400 underline-offset-2 hover:text-amber-950"
+            >
+                Review DNS setup
+            </Link>
+        </div>
+    );
+}

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

@@ -0,0 +1,190 @@
+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';
+
+/**
+ * Visual variants supported by project references.
+ */
+export type AgentProjectItemVariant = 'full' | 'small';
+
+/**
+ * Display-only project fields required by `<AgentProjectItem/>`.
+ */
+export type AgentProjectItemInfo = AgentProjectReferenceInfo;
+
+/**
+ * Props for one shared project reference item.
+ */
+type AgentProjectItemProps = {
+    /**
+     * Permanent id of the agent owning the project.
+     */
+    readonly agentPermanentId: string;
+
+    /**
+     * 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;
+
+    /**
+     * Displayed project metadata.
+     */
+    readonly project: AgentProjectItemInfo;
+
+    /**
+     * Visual item variant.
+     */
+    readonly variant?: AgentProjectItemVariant;
+
+    /**
+     * Optional CSS class overrides.
+     */
+    readonly className?: string;
+
+    /**
+     * Optional controls rendered below the full project card.
+     */
+    readonly footer?: ReactNode;
+};
+
+/**
+ * Renders a shared project reference in either list-card or compact-chip form.
+ *
+ * @param props - Project item props.
+ * @returns Project link item.
+ */
+export function AgentProjectItem({
+    agentPermanentId,
+    serverDomain = null,
+    currentServerDomain = null,
+    project,
+    variant = 'full',
+    className = '',
+    footer,
+}: AgentProjectItemProps) {
+    const href = buildAgentProjectProfileHrefForServer({
+        agentPermanentId,
+        projectName: project.projectName,
+        serverDomain,
+        currentServerDomain,
+    });
+
+    if (variant === 'small') {
+        return <SmallAgentProjectItem href={href} project={project} className={className} />;
+    }
+
+    return <FullAgentProjectItem href={href} project={project} className={className} footer={footer} />;
+}
+
+/**
+ * Props shared by concrete project item variants.
+ */
+type AgentProjectItemVariantProps = {
+    /**
+     * Target project profile href.
+     */
+    readonly href: string;
+
+    /**
+     * Displayed project metadata.
+     */
+    readonly project: AgentProjectItemInfo;
+
+    /**
+     * Optional CSS class overrides.
+     */
+    readonly className: string;
+
+    /**
+     * Optional controls rendered below the full project card.
+     */
+    readonly footer?: ReactNode;
+};
+
+/**
+ * Renders the full project card used by project grids.
+ *
+ * @param props - Project item variant props.
+ * @returns Full project link card.
+ */
+function FullAgentProjectItem({ href, project, 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>
+                <div className="min-w-0 flex-1">
+                    <h3 className="truncate text-base font-semibold text-gray-950 group-hover:text-blue-700">
+                        {project.displayName}
+                    </h3>
+                    {project.displayName !== project.projectName && (
+                        <p className="mt-0.5 truncate font-mono text-xs text-gray-400">{project.projectName}</p>
+                    )}
+                </div>
+                <span className="shrink-0 rounded-md bg-gray-100 px-2 py-1 font-mono text-xs text-gray-600">
+                    {formatResourceBytes(project.sizeBytes)}
+                </span>
+            </div>
+            {project.description && (
+                <p className="mt-3 line-clamp-3 text-sm leading-6 text-gray-600">{project.description}</p>
+            )}
+        </>
+    );
+
+    if (!isFooterVisible) {
+        return (
+            <Link
+                href={href}
+                className={`group flex h-full min-h-36 flex-col rounded-lg border border-gray-200 bg-white p-4 text-left shadow-sm transition hover:-translate-y-0.5 hover:border-blue-300 hover:shadow-md ${className}`}
+            >
+                {projectContent}
+            </Link>
+        );
+    }
+
+    return (
+        <div
+            className={`group flex h-full min-h-36 flex-col rounded-lg border border-gray-200 bg-white text-left shadow-sm transition hover:-translate-y-0.5 hover:border-blue-300 hover:shadow-md ${className}`}
+        >
+            <Link href={href} className="flex flex-1 flex-col p-4">
+                {projectContent}
+            </Link>
+            <div className="border-t border-gray-100 px-4 py-3">{footer}</div>
+        </div>
+    );
+}
+
+/**
+ * Renders the compact project reference used in dense views.
+ *
+ * @param props - Project item variant props.
+ * @returns Compact project link item.
+ */
+function SmallAgentProjectItem({ href, project, 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 />
+            <span className="min-w-0 flex-1">
+                <span className="block truncate text-sm font-semibold text-gray-900">{project.displayName}</span>
+                {project.description && (
+                    <span className="mt-0.5 block truncate text-xs text-gray-500">{project.description}</span>
+                )}
+            </span>
+            <span className="shrink-0 font-mono text-xs text-gray-500">{formatResourceBytes(project.sizeBytes)}</span>
+        </Link>
+    );
+}

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

@@ -0,0 +1,73 @@
+import { AgentProjectItem, type AgentProjectItemInfo } from './AgentProjectItem';
+
+export type { AgentProjectItemInfo } from './AgentProjectItem';
+
+/**
+ * Props for a compact list of project reference chips.
+ */
+type AgentProjectReferencesListProps = {
+    /**
+     * Permanent id of the agent owning the projects.
+     */
+    readonly agentPermanentId: string;
+
+    /**
+     * Public domain of the server owning the projects, when known.
+     */
+    readonly serverDomain?: string | null;
+
+    /**
+     * Public domain serving the current page, when known.
+     */
+    readonly currentServerDomain?: string | null;
+
+    /**
+     * Display-only project references.
+     */
+    readonly projects: ReadonlyArray<AgentProjectItemInfo>;
+
+    /**
+     * Optional CSS class for the list wrapper.
+     */
+    readonly className?: string;
+
+    /**
+     * Optional CSS class for each project item.
+     */
+    readonly itemClassName?: string;
+};
+
+/**
+ * Renders compact project references reused by chat, profile, and admin surfaces.
+ *
+ * @param props - Project reference list props.
+ * @returns Compact project reference list or `null` when empty.
+ */
+export function AgentProjectReferencesList({
+    agentPermanentId,
+    serverDomain = null,
+    currentServerDomain = null,
+    projects,
+    className = '',
+    itemClassName = '',
+}: AgentProjectReferencesListProps) {
+    if (projects.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className={`flex flex-wrap gap-2 ${className}`} aria-label="Projects">
+            {projects.map((project) => (
+                <AgentProjectItem
+                    key={project.projectName}
+                    agentPermanentId={agentPermanentId}
+                    serverDomain={serverDomain}
+                    currentServerDomain={currentServerDomain}
+                    project={project}
+                    variant="small"
+                    className={itemClassName}
+                />
+            ))}
+        </div>
+    );
+}

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

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Props of the shared project runtime status badge.
+ */
+type AgentProjectRuntimeStatusBadgeProps = {
+    /**
+     * Whether the runtime currently has an active listener.
+     */
+    readonly isRunning: boolean;
+
+    /**
+     * Badge text.
+     */
+    readonly children: ReactNode;
+};
+
+/**
+ * Renders a compact badge for project runtime status.
+ *
+ * @param props - Runtime status badge props.
+ * @returns Status badge.
+ */
+export function AgentProjectRuntimeStatusBadge({
+    isRunning,
+    children,
+}: AgentProjectRuntimeStatusBadgeProps) {
+    return (
+        <span
+            className={`inline-flex rounded-md px-2 py-1 text-xs font-semibold ${
+                isRunning ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-600'
+            }`}
+        >
+            {children}
+        </span>
+    );
+}

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>
+    );
+}