@promptbook/cli 0.113.0-5 → 0.113.0-8

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

@@ -0,0 +1,76 @@
+'use client';
+
+import { ChevronDown, ChevronUp, Settings2 } from 'lucide-react';
+import type { UpdateOverview } from './UpdateOverview';
+
+/**
+ * Props for the advanced upstream repository settings panel.
+ *
+ * @private type of `<AdvancedOriginRepositoryPanel/>`
+ */
+type AdvancedOriginRepositoryPanelProps = {
+    readonly originRepositoryUrlOverride: string;
+    readonly onChange: (nextValue: string) => void;
+    readonly overview: UpdateOverview | null;
+    readonly isExpanded: boolean;
+    readonly onToggleExpanded: () => void;
+    readonly isDisabled: boolean;
+};
+
+/**
+ * Collapsible advanced panel for overriding the upstream repository URL.
+ *
+ * @private internal component of `<UpdateClient/>`
+ */
+export function AdvancedOriginRepositoryPanel({
+    originRepositoryUrlOverride,
+    onChange,
+    overview,
+    isExpanded,
+    onToggleExpanded,
+    isDisabled,
+}: AdvancedOriginRepositoryPanelProps) {
+    return (
+        <div className="rounded-xl border border-slate-200 bg-white">
+            <button
+                type="button"
+                onClick={onToggleExpanded}
+                className="flex w-full items-center justify-between gap-3 px-4 py-3 text-sm font-semibold text-slate-700"
+            >
+                <span className="inline-flex items-center gap-2">
+                    <Settings2 className="h-4 w-4" />
+                    Advanced
+                </span>
+                {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+            </button>
+            {isExpanded && (
+                <div className="space-y-3 border-t border-slate-100 px-4 py-3 text-sm text-slate-600">
+                    <label className="block">
+                        <span className="text-xs font-semibold uppercase tracking-wide text-slate-500">
+                            Upstream repository URL
+                        </span>
+                        <input
+                            type="url"
+                            value={originRepositoryUrlOverride}
+                            onChange={(event) => onChange(event.target.value)}
+                            disabled={isDisabled}
+                            placeholder={overview?.defaultOriginRepositoryUrl || ''}
+                            className="mt-1 w-full rounded-md border border-slate-300 bg-white px-3 py-2 font-mono text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-60"
+                        />
+                    </label>
+                    <p className="text-xs text-slate-500">
+                        Defaults to <span className="font-mono">{overview?.defaultOriginRepositoryUrl}</span>. Only
+                        change this if you self-host a fork of the original Promptbook repository — the new value is
+                        persisted in the standalone VPS <code>.env</code>.
+                    </p>
+                    {overview && !overview.isOriginRepositoryDefault && (
+                        <div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800">
+                            <strong>Custom origin active:</strong> updates currently pull from{' '}
+                            <span className="font-mono">{overview.originRepositoryUrl}</span>.
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,160 @@
+'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 text-blue-600" />
+                <div>
+                    <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="font-mono">{overview?.currentEnvironment.branch || 'production'}</span>.
+                    </p>
+                </div>
+            </div>
+
+            <dl className="grid gap-4 text-sm text-slate-600 sm:grid-cols-2">
+                <div className="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 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="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 items-center gap-2 text-slate-900">
+                        {overview?.isUpdateAvailable ? (
+                            <>
+                                <TriangleAlert className="h-4 w-4 text-amber-500" />
+                                {driftLabel}
+                            </>
+                        ) : (
+                            <>
+                                <CheckCircle2 className="h-4 w-4 text-emerald-600" />
+                                Up to date
+                            </>
+                        )}
+                    </dd>
+                </div>
+            </dl>
+
+            {overview?.repositoryDirectory && (
+                <div className="text-xs text-slate-500">
+                    Managed repository:
+                    <span className="ml-2 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="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 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/PendingCommitsCard.tsx

@@ -0,0 +1,86 @@
+'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';
+
+/**
+ * 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="hover:border-gray-200 hover:shadow-md">
+            <div className="space-y-4">
+                <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+                    <div className="flex items-start gap-3">
+                        <GitCommit className="mt-0.5 h-5 w-5 text-amber-500" />
+                        <div>
+                            <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="font-mono">{overview.currentEnvironment.branch}</span>.
+                            </p>
+                        </div>
+                    </div>
+                    <div className="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="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`;
+}

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

@@ -0,0 +1,331 @@
+'use client';
+
+import { Download, Loader2, Rocket, TriangleAlert } from 'lucide-react';
+import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { AdvancedOriginRepositoryPanel } from './AdvancedOriginRepositoryPanel';
+import { CustomCommitPicker } from './CustomCommitPicker';
+import type { UpdateEnvironmentOption } from './UpdateOverview';
+import type { UpdateClientState } from './useUpdateClientState';
+
+/**
+ * Props for the target environment card.
+ *
+ * @private type of `<TargetEnvironmentCard/>`
+ */
+type TargetEnvironmentCardProps = {
+    readonly state: UpdateClientState;
+    readonly language: ServerLanguageCode;
+};
+
+/**
+ * Props for the environment option list.
+ *
+ * @private type of `<TargetEnvironmentCard/>`
+ */
+type EnvironmentOptionListProps = {
+    readonly environments: ReadonlyArray<UpdateEnvironmentOption>;
+    readonly currentEnvironmentId: string | null;
+    readonly selectedEnvironmentId: string | null;
+    readonly isDisabled: boolean;
+    readonly onSelectEnvironment: (environmentId: string) => void;
+};
+
+/**
+ * Props for one environment option button.
+ *
+ * @private type of `<TargetEnvironmentCard/>`
+ */
+type EnvironmentOptionButtonProps = {
+    readonly environment: UpdateEnvironmentOption;
+    readonly isSelected: boolean;
+    readonly isCurrent: boolean;
+    readonly isDisabled: boolean;
+    readonly onSelectEnvironment: (environmentId: string) => void;
+};
+
+/**
+ * Props for the custom ref selection panel.
+ *
+ * @private type of `<TargetEnvironmentCard/>`
+ */
+type CustomRefPanelProps = {
+    readonly state: UpdateClientState;
+    readonly language: ServerLanguageCode;
+    readonly isControlsDisabled: boolean;
+};
+
+/**
+ * Props for the primary update start button.
+ *
+ * @private type of `<TargetEnvironmentCard/>`
+ */
+type UpdateStartButtonProps = {
+    readonly state: UpdateClientState;
+};
+
+/**
+ * Visual mode used by the primary update start button icon.
+ *
+ * @private type of `<TargetEnvironmentCard/>`
+ */
+type UpdateStartButtonMode = 'loading' | 'rocket' | 'download';
+
+/**
+ * Target environment picker and update trigger controls.
+ *
+ * @private internal component of `<UpdateClient/>`
+ */
+export function TargetEnvironmentCard({ state, language }: TargetEnvironmentCardProps) {
+    const isControlsDisabled = state.isUpdateRunning || state.isStartingUpdate;
+
+    return (
+        <div className="space-y-4">
+            <div>
+                <h2 className="text-lg font-semibold text-slate-900">Target environment</h2>
+                <p className="mt-1 text-sm text-slate-500">
+                    Selecting another environment automatically updates the server to the latest commit on that branch.
+                </p>
+            </div>
+
+            <EnvironmentOptionList
+                environments={state.overview?.environments ?? []}
+                currentEnvironmentId={state.overview?.currentEnvironment.id ?? null}
+                selectedEnvironmentId={state.selectedEnvironment?.id ?? null}
+                isDisabled={isControlsDisabled}
+                onSelectEnvironment={state.selectEnvironment}
+            />
+
+            <CustomRefPanel state={state} language={language} isControlsDisabled={isControlsDisabled} />
+
+            <AdvancedOriginRepositoryPanel
+                originRepositoryUrlOverride={state.originRepositoryUrlOverride}
+                onChange={state.changeOriginRepositoryUrlOverride}
+                overview={state.overview}
+                isExpanded={state.isAdvancedExpanded}
+                onToggleExpanded={state.toggleAdvanced}
+                isDisabled={isControlsDisabled}
+            />
+
+            <UpdateStartButton state={state} />
+        </div>
+    );
+}
+
+/**
+ * Renders all update environment choices.
+ *
+ * @private internal component of `<TargetEnvironmentCard/>`
+ */
+function EnvironmentOptionList({
+    environments,
+    currentEnvironmentId,
+    selectedEnvironmentId,
+    isDisabled,
+    onSelectEnvironment,
+}: EnvironmentOptionListProps) {
+    return (
+        <div className="grid gap-3">
+            {environments.map((environment) => (
+                <EnvironmentOptionButton
+                    key={environment.id}
+                    environment={environment}
+                    isSelected={environment.id === selectedEnvironmentId}
+                    isCurrent={environment.id === currentEnvironmentId}
+                    isDisabled={isDisabled}
+                    onSelectEnvironment={onSelectEnvironment}
+                />
+            ))}
+        </div>
+    );
+}
+
+/**
+ * Renders one selectable update environment.
+ *
+ * @private internal component of `<TargetEnvironmentCard/>`
+ */
+function EnvironmentOptionButton({
+    environment,
+    isSelected,
+    isCurrent,
+    isDisabled,
+    onSelectEnvironment,
+}: EnvironmentOptionButtonProps) {
+    return (
+        <button
+            type="button"
+            onClick={() => onSelectEnvironment(environment.id)}
+            disabled={isDisabled}
+            className={`rounded-2xl border px-4 py-4 text-left transition ${
+                isSelected
+                    ? 'border-blue-300 bg-blue-50 text-blue-900 shadow-sm'
+                    : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:shadow-sm'
+            } disabled:cursor-not-allowed disabled:opacity-60`}
+        >
+            <div className="flex items-center justify-between gap-3">
+                <div className="text-sm font-semibold">{environment.label}</div>
+                {isCurrent && (
+                    <span className="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-emerald-700">
+                        Current
+                    </span>
+                )}
+            </div>
+            {environment.branch && <div className="mt-1 font-mono text-xs">{environment.branch}</div>}
+            <div className="mt-2 text-sm opacity-80">{environment.description}</div>
+        </button>
+    );
+}
+
+/**
+ * Shows the custom commit/tag/branch picker for the custom target environment.
+ *
+ * @private internal component of `<TargetEnvironmentCard/>`
+ */
+function CustomRefPanel({ state, language, isControlsDisabled }: CustomRefPanelProps) {
+    if (!state.isCustomEnvironmentSelected) {
+        return null;
+    }
+
+    if (!state.overview?.isAvailable) {
+        return null;
+    }
+
+    return (
+        <div className="space-y-3 rounded-xl border border-blue-200 bg-blue-50/40 p-4">
+            <CustomCommitPicker
+                language={language}
+                selectedRef={state.customRef}
+                onSelectRef={state.selectCustomRef}
+                isDisabled={isControlsDisabled}
+            />
+
+            {state.customRef.trim() && !state.isCustomRefRelease && (
+                <div className="flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800">
+                    <TriangleAlert className="mt-0.5 h-4 w-4 shrink-0" />
+                    <div>
+                        <strong>Heads up:</strong> the selected ref is not a release tag, so it may be unstable and was
+                        not validated by the regular release pipeline.
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+/**
+ * Primary button for starting an update using the selected target.
+ *
+ * @private internal component of `<TargetEnvironmentCard/>`
+ */
+function UpdateStartButton({ state }: UpdateStartButtonProps) {
+    const buttonMode = getUpdateStartButtonMode(state);
+
+    return (
+        <button
+            type="button"
+            onClick={() => void state.startUpdate()}
+            disabled={isUpdateStartDisabled(state)}
+            className="inline-flex w-full items-center justify-center gap-2 rounded-md bg-blue-600 px-4 py-3 text-sm font-semibold text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60"
+        >
+            <UpdateStartButtonIcon buttonMode={buttonMode} />
+            {getUpdateStartButtonLabel(state)}
+        </button>
+    );
+}
+
+/**
+ * Renders the icon for the update start button.
+ *
+ * @private internal component of `<TargetEnvironmentCard/>`
+ */
+function UpdateStartButtonIcon({ buttonMode }: { readonly buttonMode: UpdateStartButtonMode }) {
+    if (buttonMode === 'loading') {
+        return <Loader2 className="h-4 w-4 animate-spin" />;
+    }
+
+    if (buttonMode === 'rocket') {
+        return <Rocket className="h-4 w-4" />;
+    }
+
+    return <Download className="h-4 w-4" />;
+}
+
+/**
+ * Resolves whether the primary update button should be disabled.
+ *
+ * @param state - Current update client state.
+ * @returns `true` when the update cannot be started from the current selection.
+ *
+ * @private function of `<TargetEnvironmentCard/>`
+ */
+function isUpdateStartDisabled(state: UpdateClientState): boolean {
+    if (!state.overview?.isAvailable) {
+        return true;
+    }
+
+    if (!state.selectedEnvironment) {
+        return true;
+    }
+
+    if (state.isUpdateRunning || state.isStartingUpdate) {
+        return true;
+    }
+
+    if (state.isCustomRefMissing) {
+        return true;
+    }
+
+    if (state.isCustomEnvironmentSelected) {
+        return false;
+    }
+
+    if (state.isEnvironmentSwitchRequired) {
+        return false;
+    }
+
+    if (state.overview.isUpdateAvailable) {
+        return false;
+    }
+
+    return !state.isOriginRepositoryUrlOverrideChanged;
+}
+
+/**
+ * Resolves which icon should be shown by the update start button.
+ *
+ * @param state - Current update client state.
+ * @returns Button icon mode.
+ *
+ * @private function of `<TargetEnvironmentCard/>`
+ */
+function getUpdateStartButtonMode(state: UpdateClientState): UpdateStartButtonMode {
+    if (state.isStartingUpdate || state.isUpdateRunning) {
+        return 'loading';
+    }
+
+    if (state.isCustomEnvironmentSelected || state.isEnvironmentSwitchRequired) {
+        return 'rocket';
+    }
+
+    return 'download';
+}
+
+/**
+ * Builds the primary update button label from the current target selection.
+ *
+ * @param state - Current update client state.
+ * @returns Human-readable button label.
+ *
+ * @private function of `<TargetEnvironmentCard/>`
+ */
+function getUpdateStartButtonLabel(state: UpdateClientState): string {
+    if (state.isCustomEnvironmentSelected) {
+        return `Update to ${state.customRef.trim() || 'custom ref'}`;
+    }
+
+    if (state.isEnvironmentSwitchRequired) {
+        return `Switch to ${state.selectedEnvironment?.label || 'selected environment'} and update`;
+    }
+
+    return 'Update to latest commit';
+}