@promptbook/cli 0.113.0-0 → 0.113.0-10

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

@@ -0,0 +1,90 @@
+'use client';
+
+import { CalendarClock, Loader2, Save } from 'lucide-react';
+import { CronJobConfiguration } from '../../../components/CronJobConfiguration/CronJobConfiguration';
+import type { UpdateClientState } from './useUpdateClientState';
+
+/**
+ * Props for the automatic self-update configuration card.
+ *
+ * @private type of `<AutomaticSelfUpdateConfigurationCard/>`
+ */
+type AutomaticSelfUpdateConfigurationCardProps = {
+    readonly state: UpdateClientState;
+};
+
+/**
+ * Branch-aware automatic self-update configuration persisted into the VPS `.env` file.
+ *
+ * @private internal component of `<UpdateClient/>`
+ */
+export function AutomaticSelfUpdateConfigurationCard({ state }: AutomaticSelfUpdateConfigurationCardProps) {
+    const isDisabled = state.isLoading || state.isSavingAutomaticConfiguration || state.isUpdateRunning;
+    const environments = (state.overview?.environments ?? []).filter((environment) => !environment.isCustom);
+
+    return (
+        <div className="min-w-0 space-y-4">
+            <div className="flex min-w-0 items-start justify-between gap-3">
+                <div className="min-w-0">
+                    <h2 className="text-lg font-semibold text-slate-900">Automatic self-update</h2>
+                    <p className="mt-1 text-sm text-slate-500">
+                        Scheduled checks use the selected branch and the cron interval stored in the VPS{' '}
+                        <code>.env</code>.
+                    </p>
+                </div>
+                <CalendarClock className="mt-1 h-5 w-5 shrink-0 text-slate-400" />
+            </div>
+
+            <label className="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-medium text-slate-800">
+                <input
+                    type="checkbox"
+                    checked={state.automaticConfigurationDraft.isEnabled}
+                    onChange={(event) => state.changeAutomaticUpdateEnabled(event.target.checked)}
+                    disabled={isDisabled}
+                    className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-60"
+                />
+                Enable automatic updates
+            </label>
+
+            <div className="grid min-w-0 gap-3">
+                <label className="block min-w-0 text-sm font-medium text-slate-700">
+                    Branch
+                    <select
+                        value={state.automaticConfigurationDraft.environmentId}
+                        onChange={(event) => state.selectAutomaticUpdateEnvironment(event.target.value)}
+                        disabled={isDisabled}
+                        className="mt-1 w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500"
+                    >
+                        {environments.map((environment) => (
+                            <option key={environment.id} value={environment.id}>
+                                {environment.label} ({environment.branch})
+                            </option>
+                        ))}
+                    </select>
+                </label>
+
+                <CronJobConfiguration
+                    label="Cron interval"
+                    value={state.automaticConfigurationDraft.cronExpression}
+                    onChange={state.changeAutomaticUpdateCronExpression}
+                    isDisabled={isDisabled}
+                    helperText="Pick a common schedule or edit the cron expression directly."
+                />
+            </div>
+
+            <button
+                type="button"
+                onClick={() => void state.saveAutomaticConfiguration()}
+                disabled={isDisabled || !state.isAutomaticConfigurationChanged}
+                className="inline-flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+                {state.isSavingAutomaticConfiguration ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                    <Save className="h-4 w-4" />
+                )}
+                Save automatic configuration
+            </button>
+        </div>
+    );
+}

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

@@ -0,0 +1,162 @@
+'use client';
+
+import { CheckCircle2, Server, TriangleAlert } from 'lucide-react';
+import { useMemo } from 'react';
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { buildDeploymentTimeBehindLabel } from './buildDeploymentTimeBehindLabel';
+import { formatHumanReadableTimestamp } from './formatHumanReadableTimestamp';
+import type { UpdateOverview } from './UpdateOverview';
+
+/**
+ * Props for the current deployment summary card.
+ *
+ * @private type of `<CurrentDeploymentCard/>`
+ */
+type CurrentDeploymentCardProps = {
+    readonly overview: UpdateOverview | null;
+    readonly language: ServerLanguageCode;
+};
+
+/**
+ * Props for rendering one commit summary.
+ *
+ * @private type of `<CurrentDeploymentCard/>`
+ */
+type CommitSummaryCardProps = {
+    readonly label: string;
+    readonly commitSha: string | null;
+    readonly shortCommitSha: string | null;
+    readonly subject: string | null;
+    readonly authoredAt: string | null;
+    readonly language: ServerLanguageCode;
+};
+
+/**
+ * Current-deployment metrics card, including the new commits-behind and time-behind info.
+ *
+ * @private internal component of `<UpdateClient/>`
+ */
+export function CurrentDeploymentCard({ overview, language }: CurrentDeploymentCardProps) {
+    const driftLabel = useMemo(() => buildDeploymentDriftLabel(overview, language), [overview, language]);
+
+    return (
+        <div className="space-y-4">
+            <div className="flex items-start gap-3">
+                <Server className="mt-0.5 h-5 w-5 shrink-0 text-blue-600" />
+                <div className="min-w-0">
+                    <h2 className="text-lg font-semibold text-slate-900">Current deployment</h2>
+                    <p className="mt-1 text-sm text-slate-500">
+                        The server currently tracks the{' '}
+                        <span className="font-medium">{overview?.currentEnvironment.label || 'Production'}</span>{' '}
+                        environment on branch{' '}
+                        <span className="break-all font-mono">
+                            {overview?.currentEnvironment.branch || 'production'}.
+                        </span>
+                    </p>
+                </div>
+            </div>
+
+            <dl className="grid min-w-0 gap-4 text-sm text-slate-600 sm:grid-cols-2">
+                <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">Branch</dt>
+                    <dd className="mt-1 break-all font-mono text-slate-900">
+                        {overview?.currentEnvironment.branch || 'production'}
+                    </dd>
+                </div>
+                <CommitSummaryCard
+                    label="Deployed commit"
+                    commitSha={overview?.currentCommitSha ?? null}
+                    shortCommitSha={overview?.currentCommitShortSha ?? null}
+                    subject={overview?.currentCommitMessage ?? null}
+                    authoredAt={overview?.currentCommitDate ?? null}
+                    language={language}
+                />
+                <CommitSummaryCard
+                    label="Latest remote commit"
+                    commitSha={overview?.latestRemoteCommitSha ?? null}
+                    shortCommitSha={overview?.latestRemoteCommitShortSha ?? null}
+                    subject={overview?.latestRemoteCommitMessage ?? null}
+                    authoredAt={overview?.latestRemoteCommitDate ?? null}
+                    language={language}
+                />
+                <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">
+                        Update availability
+                    </dt>
+                    <dd className="mt-1 flex min-w-0 items-center gap-2 break-words text-slate-900">
+                        {overview?.isUpdateAvailable ? (
+                            <>
+                                <TriangleAlert className="h-4 w-4 shrink-0 text-amber-500" />
+                                {driftLabel}
+                            </>
+                        ) : (
+                            <>
+                                <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-600" />
+                                Up to date
+                            </>
+                        )}
+                    </dd>
+                </div>
+            </dl>
+
+            {overview?.repositoryDirectory && (
+                <div className="text-xs text-slate-500">
+                    Managed repository:
+                    <span className="ml-2 break-all font-mono text-slate-700">{overview.repositoryDirectory}</span>
+                </div>
+            )}
+        </div>
+    );
+}
+
+/**
+ * Renders one commit as subject, hash and authored date.
+ *
+ * @private internal component of `<CurrentDeploymentCard/>`
+ */
+function CommitSummaryCard({
+    label,
+    commitSha,
+    shortCommitSha,
+    subject,
+    authoredAt,
+    language,
+}: CommitSummaryCardProps) {
+    const commitHashLabel = commitSha || shortCommitSha || 'Unknown hash';
+
+    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">{subject || 'Unknown commit subject'}</dd>
+            <div className="mt-2 break-all font-mono text-xs text-slate-600">{commitHashLabel}</div>
+            <div className="mt-1 text-xs text-slate-500">{formatHumanReadableTimestamp(authoredAt, language)}</div>
+        </div>
+    );
+}
+
+/**
+ * Builds the "behind by …" label combining commits-behind and time-behind info.
+ *
+ * @param overview - Current overview snapshot.
+ * @param language - Active UI language for moment localization.
+ * @returns Human-readable label or fallback text.
+ *
+ * @private function of `<CurrentDeploymentCard/>`
+ */
+function buildDeploymentDriftLabel(overview: UpdateOverview | null, language: ServerLanguageCode): string {
+    if (!overview) {
+        return 'New commit available';
+    }
+
+    const commitsBehindLabel =
+        overview.commitsBehindCount !== null && overview.commitsBehindCount > 0
+            ? `${overview.commitsBehindCount} commit${overview.commitsBehindCount === 1 ? '' : 's'} behind`
+            : 'New commit available';
+
+    const timeBehindLabel = buildDeploymentTimeBehindLabel(overview, language);
+    if (!timeBehindLabel) {
+        return commitsBehindLabel;
+    }
+
+    return `${commitsBehindLabel} · ${timeBehindLabel}`;
+}

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

@@ -121,9 +121,9 @@ export function CustomCommitPicker({ language, selectedRef, onSelectRef, isDisab
     );
 
     return (
-        <div className="space-y-3">
-            <div className="grid gap-3 sm:grid-cols-[1fr_auto_auto]">
-                <label className="relative block">
+        <div className="min-w-0 space-y-3">
+            <div className="grid min-w-0 gap-3 sm:grid-cols-[minmax(0,1fr)_auto_auto]">
+                <label className="relative block min-w-0">
                     <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                     <input
                         type="search"
@@ -152,8 +152,8 @@ export function CustomCommitPicker({ language, selectedRef, onSelectRef, isDisab
                 />
             </div>
 
-            <div className="flex items-center justify-between gap-3">
-                <label className="flex-1 text-xs text-slate-500">
+            <div className="flex min-w-0 items-center justify-between gap-3">
+                <label className="min-w-0 flex-1 text-xs text-slate-500">
                     <span className="block font-semibold uppercase tracking-wide">Or paste a ref directly</span>
                     <input
                         type="text"
@@ -168,7 +168,7 @@ export function CustomCommitPicker({ language, selectedRef, onSelectRef, isDisab
                     type="button"
                     onClick={() => void loadCandidates()}
                     disabled={isDisabled || isLoading}
-                    className="self-end inline-flex items-center gap-2 rounded-md border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-60"
+                    className="inline-flex shrink-0 items-center gap-2 self-end rounded-md border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-60"
                 >
                     <RefreshCcw className={`h-3.5 w-3.5 ${isLoading ? 'animate-spin' : ''}`} />
                     Refresh
@@ -181,7 +181,7 @@ export function CustomCommitPicker({ language, selectedRef, onSelectRef, isDisab
                 </div>
             )}
 
-            <div className="max-h-96 overflow-y-auto rounded-xl border border-slate-200 bg-white">
+            <div className="max-h-96 min-w-0 overflow-y-auto rounded-xl border border-slate-200 bg-white">
                 {isLoading && candidates.length === 0 ? (
                     <div className="flex items-center justify-center gap-2 px-4 py-6 text-sm text-slate-500">
                         <Loader2 className="h-4 w-4 animate-spin" />
@@ -215,7 +215,7 @@ export function CustomCommitPicker({ language, selectedRef, onSelectRef, isDisab
                                                 : 'hover:bg-slate-50'
                                         } disabled:cursor-not-allowed disabled:opacity-60`}
                                     >
-                                        <div className="flex items-center gap-2">
+                                        <div className="flex min-w-0 flex-wrap items-center gap-2">
                                             <span className="font-mono text-xs text-slate-500">
                                                 {candidate.shortCommitSha}
                                             </span>
@@ -228,7 +228,7 @@ export function CustomCommitPicker({ language, selectedRef, onSelectRef, isDisab
                                             {candidate.tags.map((tag) => (
                                                 <span
                                                     key={`tag-${tag}`}
-                                                    className="inline-flex rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-mono text-amber-800"
+                                                    className="inline-flex min-w-0 break-all rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-mono text-amber-800"
                                                 >
                                                     {tag}
                                                 </span>
@@ -236,7 +236,7 @@ export function CustomCommitPicker({ language, selectedRef, onSelectRef, isDisab
                                             {candidate.branches.map((branch) => (
                                                 <span
                                                     key={`branch-${branch}`}
-                                                    className="inline-flex rounded-full border border-sky-200 bg-sky-50 px-2 py-0.5 text-[10px] font-mono text-sky-800"
+                                                    className="inline-flex min-w-0 break-all rounded-full border border-sky-200 bg-sky-50 px-2 py-0.5 text-[10px] font-mono text-sky-800"
                                                 >
                                                     {branch}
                                                 </span>

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

@@ -0,0 +1,112 @@
+'use client';
+
+import { HardDrive, Loader2, Trash2 } from 'lucide-react';
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { Card } from '../../../components/Homepage/Card';
+import { formatHumanReadableTimestamp } from './formatHumanReadableTimestamp';
+import type { UpdateClientState } from './useUpdateClientState';
+import { UPDATE_PAGE_CARD_CLASS_NAME } from './updatePageCardClassName';
+
+/**
+ * Props for the installed versions card.
+ *
+ * @private type of `<InstalledVersionsCard/>`
+ */
+type InstalledVersionsCardProps = {
+    readonly state: UpdateClientState;
+    readonly language: ServerLanguageCode;
+};
+
+/**
+ * Lists the Agents Server versions installed in the releases directory, marks the currently deployed
+ * one, and lets the super admin delete old versions manually to free disk space.
+ *
+ * @private internal component of `<UpdateClient/>`
+ */
+export function InstalledVersionsCard({ state, language }: InstalledVersionsCardProps) {
+    const { overview } = state;
+
+    if (!overview || overview.installedVersions.length === 0) {
+        return null;
+    }
+
+    return (
+        <Card className={UPDATE_PAGE_CARD_CLASS_NAME}>
+            <div className="min-w-0 space-y-4">
+                <div className="flex min-w-0 items-start gap-3">
+                    <HardDrive className="mt-0.5 h-5 w-5 shrink-0 text-slate-500" />
+                    <div className="min-w-0">
+                        <h2 className="text-lg font-semibold text-slate-900">Installed versions</h2>
+                        <p className="mt-1 text-sm text-slate-500">
+                            Every version keeps its own multi-gigabyte checkout on disk. Old versions beyond the{' '}
+                            {overview.garbageCollectionKeepVersionsCount} most recent (configurable via the{' '}
+                            <span className="break-all font-mono">AGENTS_SERVER_GC_KEEP_VERSIONS</span> environment
+                            variable) are garbage-collected automatically during each self-update, and you can also
+                            delete old versions manually here.
+                        </p>
+                    </div>
+                </div>
+
+                <ul className="divide-y divide-slate-100 rounded-xl border border-slate-200 bg-white">
+                    {overview.installedVersions.map((installedVersion) => (
+                        <li
+                            key={installedVersion.name}
+                            className="flex min-w-0 items-center justify-between gap-3 px-4 py-3"
+                        >
+                            <div className="min-w-0">
+                                <div className="flex min-w-0 flex-wrap items-center gap-2">
+                                    <span className="break-all font-mono text-sm text-slate-900">
+                                        {installedVersion.name}
+                                    </span>
+                                    {installedVersion.isCurrent && (
+                                        <span className="shrink-0 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-700">
+                                            Current
+                                        </span>
+                                    )}
+                                </div>
+                                <div className="mt-1 break-all font-mono text-xs text-slate-500">
+                                    {installedVersion.directoryPath}
+                                </div>
+                                <div className="mt-1 text-xs text-slate-500">
+                                    {formatHumanReadableTimestamp(installedVersion.modifiedAt, language)}
+                                </div>
+                            </div>
+
+                            {!installedVersion.isCurrent && (
+                                <button
+                                    type="button"
+                                    onClick={() => void confirmAndDeleteInstalledVersion(state, installedVersion.name)}
+                                    disabled={state.isUpdateRunning || state.deletingVersionName !== null}
+                                    className="inline-flex shrink-0 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-50 disabled:cursor-not-allowed disabled:opacity-60"
+                                >
+                                    {state.deletingVersionName === installedVersion.name ? (
+                                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                                    ) : (
+                                        <Trash2 className="h-3.5 w-3.5" />
+                                    )}
+                                    Delete
+                                </button>
+                            )}
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </Card>
+    );
+}
+
+/**
+ * Asks for confirmation before deleting one old installed version.
+ *
+ * @param state - Update client state with the delete action.
+ * @param versionName - Release directory name to delete.
+ *
+ * @private function of `<InstalledVersionsCard/>`
+ */
+async function confirmAndDeleteInstalledVersion(state: UpdateClientState, versionName: string): Promise<void> {
+    if (!window.confirm(`Delete the installed Agents Server version ${versionName}? This cannot be undone.`)) {
+        return;
+    }
+
+    await state.deleteInstalledVersion(versionName);
+}

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

@@ -0,0 +1,87 @@
+'use client';
+
+import { GitCommit } from 'lucide-react';
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { Card } from '../../../components/Homepage/Card';
+import { buildDeploymentTimeBehindLabel } from './buildDeploymentTimeBehindLabel';
+import { formatHumanReadableTimestamp } from './formatHumanReadableTimestamp';
+import type { UpdateOverview } from './UpdateOverview';
+import { UPDATE_PAGE_CARD_CLASS_NAME } from './updatePageCardClassName';
+
+/**
+ * Props for the pending commits card.
+ *
+ * @private type of `<PendingCommitsCard/>`
+ */
+type PendingCommitsCardProps = {
+    readonly overview: UpdateOverview | null;
+    readonly language: ServerLanguageCode;
+};
+
+/**
+ * Lists the commits between the deployed checkout and the latest remote commit so the super admin can review what
+ * exactly is about to be installed before triggering the self-update.
+ *
+ * @private internal component of `<UpdateClient/>`
+ */
+export function PendingCommitsCard({ overview, language }: PendingCommitsCardProps) {
+    if (!overview || overview.pendingCommits.length === 0) {
+        return null;
+    }
+
+    const commitsBehindLabel = getPendingCommitsCountLabel(overview);
+    const timeBehindLabel = buildDeploymentTimeBehindLabel(overview, language);
+
+    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-start sm:justify-between">
+                    <div className="flex min-w-0 items-start gap-3">
+                        <GitCommit className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
+                        <div className="min-w-0">
+                            <h2 className="text-lg font-semibold text-slate-900">Pending commits</h2>
+                            <p className="mt-1 text-sm text-slate-500">
+                                Commits between the currently deployed checkout and the latest commit on{' '}
+                                <span className="break-all font-mono">{overview.currentEnvironment.branch}</span>.
+                            </p>
+                        </div>
+                    </div>
+                    <div className="shrink-0 text-xs font-semibold uppercase tracking-wide text-slate-500 sm:text-right">
+                        <div>{commitsBehindLabel}</div>
+                        {timeBehindLabel && <div className="mt-1 normal-case text-slate-400">{timeBehindLabel}</div>}
+                    </div>
+                </div>
+
+                <ul className="divide-y divide-slate-100 rounded-xl border border-slate-200 bg-white">
+                    {overview.pendingCommits.map((pendingCommit) => (
+                        <li key={pendingCommit.commitSha} className="px-4 py-3">
+                            <div className="break-words text-sm text-slate-900">{pendingCommit.subject}</div>
+                            <div className="mt-1 break-all font-mono text-xs text-slate-500">
+                                {pendingCommit.commitSha || pendingCommit.shortCommitSha}
+                            </div>
+                            <div className="mt-1 text-xs text-slate-500">
+                                {formatHumanReadableTimestamp(pendingCommit.authoredAt, language)}
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </Card>
+    );
+}
+
+/**
+ * Builds the pending-commit count label shown in the card header.
+ *
+ * @param overview - Current overview snapshot.
+ * @returns Human-readable count label.
+ *
+ * @private function of `<PendingCommitsCard/>`
+ */
+function getPendingCommitsCountLabel(overview: UpdateOverview): string {
+    if (overview.commitsBehindCount !== null && overview.commitsBehindCount > 0) {
+        return `${overview.commitsBehindCount} commit${overview.commitsBehindCount === 1 ? '' : 's'} behind`;
+    }
+
+    return `${overview.pendingCommits.length} commit${overview.pendingCommits.length === 1 ? '' : 's'} pending`;
+}