@promptbook/cli 0.113.0-1 → 0.113.0-11

package/apps/agents-server/src/app/admin/update/UpdateDatabaseMigrationsPanel.tsx

@@ -0,0 +1,305 @@
+'use client';
+
+import type {
+    UpdateDatabaseMigrationPrefixSummary,
+    UpdateDatabaseMigrationSnapshot,
+    UpdateDatabaseMigrationStatus,
+} from './UpdateOverview';
+
+/**
+ * Props for the self-update database migrations panel.
+ *
+ * @private type of `<UpdateDatabaseMigrationsPanel/>`
+ */
+type UpdateDatabaseMigrationsPanelProps = {
+    readonly databaseMigrations: UpdateDatabaseMigrationSnapshot | null;
+    readonly isJobIdle: boolean;
+};
+
+/**
+ * Props for one database migration metric.
+ *
+ * @private type of `<UpdateDatabaseMigrationsPanel/>`
+ */
+type DatabaseMigrationMetricProps = {
+    readonly label: string;
+    readonly value: string;
+};
+
+/**
+ * Renders database migration status recorded during the latest self-update job.
+ *
+ * @private internal component of `<UpdateJobCard/>`
+ */
+export function UpdateDatabaseMigrationsPanel({
+    databaseMigrations,
+    isJobIdle,
+}: UpdateDatabaseMigrationsPanelProps) {
+    const status = databaseMigrations?.status ?? 'pending';
+    const appliedCount = getAppliedDatabaseMigrationCount(databaseMigrations);
+    const processedPrefixCount = getProcessedDatabaseMigrationPrefixCount(databaseMigrations);
+
+    return (
+        <section className="min-w-0 rounded-xl border border-slate-200 bg-slate-50/70 px-4 py-4">
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+                <div className="min-w-0">
+                    <h3 className="text-sm font-semibold text-slate-900">Database migrations</h3>
+                    <p className="mt-1 text-sm text-slate-600">
+                        {formatDatabaseMigrationStatusMessage(databaseMigrations, isJobIdle)}
+                    </p>
+                </div>
+                <DatabaseMigrationStatusBadge status={status} />
+            </div>
+
+            <dl className="mt-4 grid min-w-0 gap-3 text-sm text-slate-600 md:grid-cols-3">
+                <DatabaseMigrationMetric
+                    label="Applied"
+                    value={appliedCount === null ? 'Not recorded' : String(appliedCount)}
+                />
+                <DatabaseMigrationMetric
+                    label="Prefixes"
+                    value={processedPrefixCount === null ? 'Not recorded' : String(processedPrefixCount)}
+                />
+                <DatabaseMigrationMetric
+                    label="Migration files"
+                    value={
+                        databaseMigrations === null || databaseMigrations.totalMigrationFiles === null
+                            ? 'Not recorded'
+                            : String(databaseMigrations.totalMigrationFiles)
+                    }
+                />
+            </dl>
+
+            {databaseMigrations?.summaryFilePath && (
+                <div className="mt-3 text-xs text-slate-500">
+                    Migration summary:
+                    <span className="ml-2 break-all font-mono text-slate-700">
+                        {databaseMigrations.summaryFilePath}
+                    </span>
+                </div>
+            )}
+
+            {databaseMigrations && databaseMigrations.perPrefix.length > 0 && (
+                <div className="mt-4 space-y-2">
+                    {databaseMigrations.perPrefix.map((prefixSummary, index) => (
+                        <DatabaseMigrationPrefixSummaryRow
+                            key={`${prefixSummary.prefix}:${index}`}
+                            prefixSummary={prefixSummary}
+                        />
+                    ))}
+                </div>
+            )}
+        </section>
+    );
+}
+
+/**
+ * Renders one database migration metric.
+ *
+ * @private internal component of `<UpdateDatabaseMigrationsPanel/>`
+ */
+function DatabaseMigrationMetric({ label, value }: DatabaseMigrationMetricProps) {
+    return (
+        <div className="min-w-0 rounded-xl border border-slate-200 bg-white px-4 py-3">
+            <dt className="text-xs font-semibold uppercase tracking-wide text-slate-500">{label}</dt>
+            <dd className="mt-1 break-words text-slate-900">{value}</dd>
+        </div>
+    );
+}
+
+/**
+ * Renders one prefix row inside the database migration panel.
+ *
+ * @private internal component of `<UpdateDatabaseMigrationsPanel/>`
+ */
+function DatabaseMigrationPrefixSummaryRow({
+    prefixSummary,
+}: {
+    readonly prefixSummary: UpdateDatabaseMigrationPrefixSummary;
+}) {
+    const isAppliedMigrationFileListVisible = prefixSummary.appliedMigrationFiles.length > 0;
+
+    return (
+        <div className="min-w-0 rounded-lg border border-slate-200 bg-white px-3 py-2">
+            <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+                <span className="break-all font-mono text-xs text-slate-700">
+                    {formatDatabaseMigrationPrefix(prefixSummary.prefix)}
+                </span>
+                <span className="shrink-0 text-xs font-semibold text-slate-500">
+                    {formatCountWithNoun(prefixSummary.appliedCount, 'migration file', 'migration files')} applied
+                </span>
+            </div>
+            {isAppliedMigrationFileListVisible && (
+                <ul className="mt-2 space-y-1">
+                    {prefixSummary.appliedMigrationFiles.map((migrationFile) => (
+                        <li key={migrationFile} className="break-all font-mono text-xs text-slate-600">
+                            {migrationFile}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}
+
+/**
+ * Renders the database migration status badge.
+ *
+ * @private internal component of `<UpdateDatabaseMigrationsPanel/>`
+ */
+function DatabaseMigrationStatusBadge({ status }: { readonly status: UpdateDatabaseMigrationStatus }) {
+    return (
+        <span
+            className={`inline-flex shrink-0 items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-wide ${getDatabaseMigrationStatusClassName(
+                status,
+            )}`}
+        >
+            {status}
+        </span>
+    );
+}
+
+/**
+ * Formats the database migration status message.
+ *
+ * @param databaseMigrations - Migration snapshot recorded on the job.
+ * @param isJobIdle - Whether no update job has been started yet.
+ * @returns Human-readable status message.
+ */
+function formatDatabaseMigrationStatusMessage(
+    databaseMigrations: UpdateDatabaseMigrationSnapshot | null,
+    isJobIdle: boolean,
+): string {
+    if (isJobIdle) {
+        return 'No self-update database migration run has been recorded yet.';
+    }
+
+    if (!databaseMigrations) {
+        return 'Database migration details are not available for this update.';
+    }
+
+    const appliedCount = getAppliedDatabaseMigrationCount(databaseMigrations) ?? 0;
+    const processedPrefixCount = getProcessedDatabaseMigrationPrefixCount(databaseMigrations) ?? 0;
+
+    if (databaseMigrations.status === 'running') {
+        return 'Agents Server database migrations are running.';
+    }
+
+    if (databaseMigrations.status === 'succeeded') {
+        if (appliedCount === 0) {
+            return `Checked ${formatNullableMigrationFileCount(databaseMigrations.totalMigrationFiles)} across ${formatCountWithNoun(
+                processedPrefixCount,
+                'prefix',
+                'prefixes',
+            )}. No pending migrations were applied.`;
+        }
+
+        return `Applied ${formatCountWithNoun(appliedCount, 'migration file', 'migration files')} across ${formatCountWithNoun(
+            processedPrefixCount,
+            'prefix',
+            'prefixes',
+        )}.`;
+    }
+
+    if (databaseMigrations.status === 'failed') {
+        return databaseMigrations.errorMessage || 'Agents Server database migrations failed during self-update.';
+    }
+
+    if (databaseMigrations.status === 'skipped') {
+        return databaseMigrations.errorMessage || 'PostgreSQL database migrations were skipped for this update.';
+    }
+
+    if (databaseMigrations.status === 'unknown') {
+        return 'Database migration details were not recorded for this update job.';
+    }
+
+    return 'Waiting for the database migration step.';
+}
+
+/**
+ * Counts applied migration files across all prefixes.
+ *
+ * @param databaseMigrations - Migration snapshot recorded on the job.
+ * @returns Applied migration count or `null` when no snapshot is available.
+ */
+function getAppliedDatabaseMigrationCount(databaseMigrations: UpdateDatabaseMigrationSnapshot | null): number | null {
+    if (!databaseMigrations) {
+        return null;
+    }
+
+    return databaseMigrations.perPrefix.reduce((total, prefixSummary) => total + prefixSummary.appliedCount, 0);
+}
+
+/**
+ * Counts processed prefixes from the migration snapshot.
+ *
+ * @param databaseMigrations - Migration snapshot recorded on the job.
+ * @returns Prefix count or `null` when no snapshot is available.
+ */
+function getProcessedDatabaseMigrationPrefixCount(
+    databaseMigrations: UpdateDatabaseMigrationSnapshot | null,
+): number | null {
+    if (!databaseMigrations) {
+        return null;
+    }
+
+    return databaseMigrations.processedPrefixes.length || databaseMigrations.perPrefix.length;
+}
+
+/**
+ * Formats one migration prefix for display.
+ *
+ * @param prefix - Raw table prefix.
+ * @returns Display label.
+ */
+function formatDatabaseMigrationPrefix(prefix: string): string {
+    return prefix || '<default>';
+}
+
+/**
+ * Formats a nullable migration file count for a sentence.
+ *
+ * @param value - Count or `null`.
+ * @returns Count string or fallback text.
+ */
+function formatNullableMigrationFileCount(value: number | null): string {
+    return value === null ? 'the available migration files' : formatCountWithNoun(value, 'migration file', 'migration files');
+}
+
+/**
+ * Formats a count together with its singular/plural noun.
+ *
+ * @param count - Numeric count.
+ * @param singularNoun - Noun used when count is one.
+ * @param pluralNoun - Noun used otherwise.
+ * @returns Count with noun.
+ */
+function formatCountWithNoun(count: number, singularNoun: string, pluralNoun: string): string {
+    return `${count} ${count === 1 ? singularNoun : pluralNoun}`;
+}
+
+/**
+ * Resolves status badge styling for database migration status.
+ *
+ * @param status - Current database migration status.
+ * @returns Tailwind class list for the status badge.
+ */
+function getDatabaseMigrationStatusClassName(status: UpdateDatabaseMigrationStatus): string {
+    if (status === 'running') {
+        return 'border-blue-200 bg-blue-50 text-blue-700';
+    }
+
+    if (status === 'failed') {
+        return 'border-rose-200 bg-rose-50 text-rose-700';
+    }
+
+    if (status === 'succeeded') {
+        return 'border-emerald-200 bg-emerald-50 text-emerald-700';
+    }
+
+    if (status === 'skipped') {
+        return 'border-amber-200 bg-amber-50 text-amber-700';
+    }
+
+    return 'border-slate-200 bg-white text-slate-500';
+}

package/apps/agents-server/src/app/admin/update/UpdateJobCard.tsx

@@ -0,0 +1,350 @@
+'use client';
+
+import { ClipboardCopy, FileDown, Loader2 } from 'lucide-react';
+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 { downloadBlob, parseFilenameFromContentDisposition } from '../../../utils/download/browserFileDownload';
+import { formatHumanReadableTimestamp } from './formatHumanReadableTimestamp';
+import { getUpdateJobFailureMessage } from './getUpdateJobFailureMessage';
+import { getUpdateJobSuccessMessage } from './getUpdateJobSuccessMessage';
+import { UpdateDatabaseMigrationsPanel } from './UpdateDatabaseMigrationsPanel';
+import type { UpdateJobSnapshot } from './UpdateOverview';
+import type { UpdateClientState } from './useUpdateClientState';
+import { UPDATE_PAGE_CARD_CLASS_NAME } from './updatePageCardClassName';
+
+/**
+ * Duration (ms) of the transient "Copied!" / "Saved!" feedback shown next to log action buttons.
+ */
+const UPDATE_LOG_ACTION_FEEDBACK_DURATION_MS = 2500;
+
+/**
+ * Default download filename used when the server does not provide one via `Content-Disposition`.
+ */
+const DEFAULT_UPDATE_LOG_DOWNLOAD_FILENAME = 'self-update.log';
+
+/**
+ * Props for the update job card.
+ *
+ * @private type of `<UpdateJobCard/>`
+ */
+type UpdateJobCardProps = {
+    readonly state: UpdateClientState;
+    readonly language: ServerLanguageCode;
+};
+
+/**
+ * Props for one update job metric.
+ *
+ * @private type of `<UpdateJobCard/>`
+ */
+type UpdateJobMetricProps = {
+    readonly label: string;
+    readonly value: string;
+};
+
+/**
+ * Update job status value rendered by the job badge.
+ *
+ * @private type of `<UpdateJobCard/>`
+ */
+type UpdateJobStatus = UpdateJobSnapshot['status'];
+
+/**
+ * Shows the latest standalone VPS update job status and persisted log tail.
+ *
+ * @private internal component of `<UpdateClient/>`
+ */
+export function UpdateJobCard({ state, language }: UpdateJobCardProps) {
+    const job = state.overview?.job ?? null;
+    const jobStatus = job?.status ?? 'idle';
+
+    return (
+        <Card className={UPDATE_PAGE_CARD_CLASS_NAME}>
+            <div className="min-w-0 space-y-4">
+                <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="min-w-0">
+                        <h2 className="text-lg font-semibold text-slate-900">Update job</h2>
+                        <p className="mt-1 text-sm text-slate-500">
+                            The update runs in the background so the browser request can finish cleanly before pm2
+                            restarts the server.
+                        </p>
+                    </div>
+                    <UpdateJobStatusBadge status={jobStatus} />
+                </div>
+
+                <UpdateJobSummaryGrid job={job} language={language} />
+                <UpdateJobStatusMessage job={job} />
+                <UpdateDatabaseMigrationsPanel
+                    databaseMigrations={job?.databaseMigrations ?? null}
+                    isJobIdle={jobStatus === 'idle'}
+                />
+
+                {job?.logFilePath && (
+                    <div className="text-xs text-slate-500">
+                        Installer log:
+                        <span className="ml-2 break-all font-mono text-slate-700">{job.logFilePath}</span>
+                    </div>
+                )}
+                {job?.status === 'failed' && <UpdateJobLogActions />}
+                <AdminXtermTerminal
+                    terminalId={state.updateTerminalId}
+                    output={job?.logTail || ''}
+                    emptyState={state.updateTerminalEmptyState}
+                    isReadOnly
+                    isPlainTextOutput
+                    ariaLabel="Standalone VPS update log"
+                />
+            </div>
+        </Card>
+    );
+}
+
+/**
+ * Renders the current update job status badge.
+ *
+ * @private internal component of `<UpdateJobCard/>`
+ */
+function UpdateJobStatusBadge({ status }: { readonly status: UpdateJobStatus }) {
+    return (
+        <span
+            className={`inline-flex shrink-0 items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-wide ${getUpdateJobStatusClassName(
+                status,
+            )}`}
+        >
+            {status}
+        </span>
+    );
+}
+
+/**
+ * Renders the fixed update job metric grid.
+ *
+ * @private internal component of `<UpdateJobCard/>`
+ */
+function UpdateJobSummaryGrid({
+    job,
+    language,
+}: {
+    readonly job: UpdateJobSnapshot | null;
+    readonly language: ServerLanguageCode;
+}) {
+    return (
+        <dl className="grid min-w-0 gap-4 text-sm text-slate-600 md:grid-cols-2 xl:grid-cols-5">
+            <UpdateJobMetric label="Target" value={job?.targetEnvironment.label || 'Production'} />
+            <UpdateJobMetric label="Trigger" value={formatUpdateJobTrigger(job)} />
+            <UpdateJobMetric label="Step" value={job?.currentStep || 'Idle'} />
+            <UpdateJobMetric label="Started" value={formatHumanReadableTimestamp(job?.startedAt, language)} />
+            <UpdateJobMetric label="Finished" value={formatHumanReadableTimestamp(job?.finishedAt, language)} />
+        </dl>
+    );
+}
+
+/**
+ * Formats the update job trigger for the summary grid.
+ *
+ * @param job - Latest job snapshot.
+ * @returns Human-readable trigger label.
+ */
+function formatUpdateJobTrigger(job: UpdateJobSnapshot | null): string {
+    if (!job || job.status === 'idle') {
+        return 'Manual';
+    }
+
+    return job.trigger === 'automatic' ? 'Automatic' : 'Manual';
+}
+
+/**
+ * Renders one update job metric.
+ *
+ * @private internal component of `<UpdateJobCard/>`
+ */
+function UpdateJobMetric({ label, value }: UpdateJobMetricProps) {
+    return (
+        <div className="min-w-0 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
+            <dt className="text-xs font-semibold uppercase tracking-wide text-slate-500">{label}</dt>
+            <dd className="mt-1 break-words text-slate-900">{value}</dd>
+        </div>
+    );
+}
+
+/**
+ * Renders the job completion or failure message.
+ *
+ * @private internal component of `<UpdateJobCard/>`
+ */
+function UpdateJobStatusMessage({ job }: { readonly job: UpdateJobSnapshot | null }) {
+    if (job?.status === 'succeeded') {
+        return (
+            <div className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
+                {getUpdateJobSuccessMessage(job)}
+            </div>
+        );
+    }
+
+    if (job?.status === 'failed') {
+        return (
+            <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+                {getUpdateJobFailureMessage(job)}
+            </div>
+        );
+    }
+
+    return null;
+}
+
+/**
+ * Renders the copy / download actions for the persisted standalone VPS self-update log file.
+ *
+ * Shown when the latest update job failed so the super admin can quickly share the full log with the developers.
+ *
+ * @private internal component of `<UpdateJobCard/>`
+ */
+function UpdateJobLogActions() {
+    const [actionFeedback, setActionFeedback] = useState<string | null>(null);
+    const [actionErrorMessage, setActionErrorMessage] = useState<string | null>(null);
+    const [isCopying, setIsCopying] = useState(false);
+    const [isDownloading, setIsDownloading] = useState(false);
+    const feedbackTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    useEffect(() => {
+        return () => {
+            if (feedbackTimeoutRef.current !== null) {
+                clearTimeout(feedbackTimeoutRef.current);
+                feedbackTimeoutRef.current = null;
+            }
+        };
+    }, []);
+
+    function showActionFeedback(feedbackMessage: string): void {
+        if (feedbackTimeoutRef.current !== null) {
+            clearTimeout(feedbackTimeoutRef.current);
+        }
+        setActionFeedback(feedbackMessage);
+        setActionErrorMessage(null);
+        feedbackTimeoutRef.current = setTimeout(() => {
+            setActionFeedback(null);
+            feedbackTimeoutRef.current = null;
+        }, UPDATE_LOG_ACTION_FEEDBACK_DURATION_MS);
+    }
+
+    async function fetchUpdateLogResponse(): Promise<Response> {
+        const response = await fetch('/api/admin/update/log', { cache: 'no-store' });
+        if (!response.ok) {
+            const errorPayload = (await response.json().catch(() => null)) as { readonly error?: string } | null;
+            throw new Error(errorPayload?.error || 'Failed to load the self-update log file.');
+        }
+        return response;
+    }
+
+    async function handleCopyLog(): Promise<void> {
+        if (isCopying || isDownloading) {
+            return;
+        }
+
+        try {
+            setIsCopying(true);
+            setActionErrorMessage(null);
+            if (!navigator.clipboard?.writeText) {
+                throw new Error('The browser clipboard API is unavailable in this context.');
+            }
+            const response = await fetchUpdateLogResponse();
+            const logContent = await response.text();
+            await navigator.clipboard.writeText(logContent);
+            showActionFeedback('Self-update log copied to clipboard.');
+        } catch (error) {
+            setActionErrorMessage(error instanceof Error ? error.message : 'Failed to copy the self-update log.');
+        } finally {
+            setIsCopying(false);
+        }
+    }
+
+    async function handleDownloadLog(): Promise<void> {
+        if (isCopying || isDownloading) {
+            return;
+        }
+
+        try {
+            setIsDownloading(true);
+            setActionErrorMessage(null);
+            const response = await fetchUpdateLogResponse();
+            const logFilename =
+                parseFilenameFromContentDisposition(response.headers.get('Content-Disposition')) ||
+                DEFAULT_UPDATE_LOG_DOWNLOAD_FILENAME;
+            const logBlob = await response.blob();
+            downloadBlob(logBlob, logFilename);
+            showActionFeedback(`Saved self-update log as ${logFilename}.`);
+        } catch (error) {
+            setActionErrorMessage(error instanceof Error ? error.message : 'Failed to download the self-update log.');
+        } finally {
+            setIsDownloading(false);
+        }
+    }
+
+    return (
+        <div className="flex flex-wrap items-center gap-3 rounded-xl border border-rose-200 bg-rose-50/40 px-4 py-3 text-sm text-rose-700">
+            <span className="font-medium">Share the log with the developers:</span>
+            <button
+                type="button"
+                onClick={() => void handleCopyLog()}
+                disabled={isCopying || isDownloading}
+                className="inline-flex items-center gap-2 rounded-md border border-rose-200 bg-white px-3 py-1.5 text-xs font-semibold text-rose-700 hover:bg-rose-100 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+                {isCopying ? (
+                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                ) : (
+                    <ClipboardCopy className="h-3.5 w-3.5" />
+                )}
+                Copy log
+            </button>
+            <button
+                type="button"
+                onClick={() => void handleDownloadLog()}
+                disabled={isCopying || isDownloading}
+                className="inline-flex items-center gap-2 rounded-md border border-rose-200 bg-white px-3 py-1.5 text-xs font-semibold text-rose-700 hover:bg-rose-100 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+                {isDownloading ? (
+                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                ) : (
+                    <FileDown className="h-3.5 w-3.5" />
+                )}
+                Download log
+            </button>
+            {actionFeedback && (
+                <span className="text-xs text-rose-600" role="status" aria-live="polite">
+                    {actionFeedback}
+                </span>
+            )}
+            {actionErrorMessage && (
+                <span className="text-xs text-rose-700" role="alert">
+                    {actionErrorMessage}
+                </span>
+            )}
+        </div>
+    );
+}
+
+/**
+ * Resolves status badge styling for the update job status.
+ *
+ * @param status - Current update job status.
+ * @returns Tailwind class list for the status badge.
+ *
+ * @private function of `<UpdateJobCard/>`
+ */
+function getUpdateJobStatusClassName(status: UpdateJobStatus): string {
+    if (status === 'running') {
+        return 'border-blue-200 bg-blue-50 text-blue-700';
+    }
+
+    if (status === 'failed') {
+        return 'border-rose-200 bg-rose-50 text-rose-700';
+    }
+
+    if (status === 'succeeded') {
+        return 'border-emerald-200 bg-emerald-50 text-emerald-700';
+    }
+
+    return 'border-slate-200 bg-slate-50 text-slate-500';
+}