@promptbook/cli 0.113.0-1 → 0.113.0-11

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

@@ -1,246 +1,28 @@
 'use client';
 
-import {
-    CheckCircle2,
-    ChevronDown,
-    ChevronUp,
-    ClipboardCopy,
-    Download,
-    FileDown,
-    GitCommit,
-    Loader2,
-    RefreshCcw,
-    Rocket,
-    Server,
-    Settings2,
-    TriangleAlert,
-} from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { AdminXtermTerminal } from '../../../components/AdminTerminal/AdminXtermTerminal';
+import { RefreshCcw } from 'lucide-react';
 import { Card } from '../../../components/Homepage/Card';
 import { useServerLanguage } from '../../../components/ServerLanguage/ServerLanguageProvider';
-import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
-import { downloadBlob, parseFilenameFromContentDisposition } from '../../../utils/download/browserFileDownload';
-import { createServerLanguageMoment } from '../../../utils/localization/createServerLanguageMoment';
-import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
-import { CustomCommitPicker, type CustomCommitPickerCandidate } from './CustomCommitPicker';
-
-/**
- * Browser-safe environment option returned by the update API.
- */
-type UpdateEnvironmentOption = {
-    readonly id: string;
-    readonly branch: string;
-    readonly label: string;
-    readonly description: string;
-    readonly isCustom: boolean;
-};
-
-/**
- * Browser-safe latest update-job snapshot.
- */
-type UpdateJobSnapshot = {
-    readonly status: 'idle' | 'running' | 'succeeded' | 'failed';
-    readonly pid: number | null;
-    readonly targetBranch: string | null;
-    readonly targetEnvironment: UpdateEnvironmentOption;
-    readonly currentStep: string | null;
-    readonly currentCommitSha: string | null;
-    readonly targetCommitSha: string | null;
-    readonly errorMessage: string | null;
-    readonly startedAt: string | null;
-    readonly finishedAt: string | null;
-    readonly isStale: boolean;
-    readonly logTail: string | null;
-    readonly logFilePath: string | null;
-};
-
-/**
- * Browser-safe summary of one commit between the deployed checkout and the latest remote commit.
- */
-type UpdatePendingCommit = {
-    readonly commitSha: string;
-    readonly shortCommitSha: string;
-    readonly subject: string;
-    readonly authoredAt: string | null;
-};
-
-/**
- * Browser-safe self-update overview returned by the super-admin API.
- */
-type UpdateOverview = {
-    readonly isAvailable: boolean;
-    readonly unavailableReason: string | null;
-    readonly environments: ReadonlyArray<UpdateEnvironmentOption>;
-    readonly currentEnvironment: UpdateEnvironmentOption;
-    readonly repositoryDirectory: string | null;
-    readonly currentCommitSha: string | null;
-    readonly currentCommitShortSha: string | null;
-    readonly currentCommitMessage: string | null;
-    readonly currentCommitDate: string | null;
-    readonly latestRemoteCommitSha: string | null;
-    readonly latestRemoteCommitShortSha: string | null;
-    readonly latestRemoteCommitDate: string | null;
-    readonly latestRemoteCommitMessage: string | null;
-    readonly commitsBehindCount: number | null;
-    readonly pendingCommits: ReadonlyArray<UpdatePendingCommit>;
-    readonly isUpdateAvailable: boolean;
-    readonly originRepositoryUrl: string;
-    readonly isOriginRepositoryDefault: boolean;
-    readonly defaultOriginRepositoryUrl: string;
-    readonly job: UpdateJobSnapshot;
-    readonly error?: string;
-};
-
-/**
- * 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';
+import { AutomaticSelfUpdateConfigurationCard } from './AutomaticSelfUpdateConfigurationCard';
+import { CurrentDeploymentCard } from './CurrentDeploymentCard';
+import { InstalledVersionsCard } from './InstalledVersionsCard';
+import { PendingCommitsCard } from './PendingCommitsCard';
+import { TargetEnvironmentCard } from './TargetEnvironmentCard';
+import { UpdateJobCard } from './UpdateJobCard';
+import { useUpdateClientState } from './useUpdateClientState';
+import { UPDATE_PAGE_CARD_CLASS_NAME } from './updatePageCardClassName';
 
 /**
  * Client UI for standalone VPS branch-aware self-updates.
  */
 export function UpdateClient() {
     const { language } = useServerLanguage();
-    const [overview, setOverview] = useState<UpdateOverview | null>(null);
-    const [selectedEnvironmentId, setSelectedEnvironmentId] = useState<string>('');
-    const [customRef, setCustomRef] = useState<string>('');
-    const [customCandidate, setCustomCandidate] = useState<CustomCommitPickerCandidate | null>(null);
-    const [originRepositoryUrlOverride, setOriginRepositoryUrlOverride] = useState<string>('');
-    const [isAdvancedExpanded, setIsAdvancedExpanded] = useState<boolean>(false);
-    const [isLoading, setIsLoading] = useState(true);
-    const [isStartingUpdate, setIsStartingUpdate] = useState(false);
-    const [errorMessage, setErrorMessage] = useState<string | null>(null);
-    const [successMessage, setSuccessMessage] = useState<string | null>(null);
-
-    const loadOverview = useCallback(
-        async (options?: { readonly isSilent?: boolean; readonly isRestartExpected?: boolean }): Promise<void> => {
-            try {
-                if (!options?.isSilent) {
-                    setIsLoading(true);
-                }
-                setErrorMessage(null);
-
-                const response = await fetch('/api/admin/update', { cache: 'no-store' });
-                const payload = (await response.json()) as UpdateOverview;
-
-                if (!response.ok) {
-                    throw new Error(payload.error || 'Failed to load the update overview.');
-                }
-
-                setOverview(payload);
-                setSelectedEnvironmentId(
-                    (currentSelectedEnvironmentId) => currentSelectedEnvironmentId || payload.currentEnvironment.id,
-                );
-                setOriginRepositoryUrlOverride((currentValue) => currentValue || payload.originRepositoryUrl);
-                if (payload.job.status === 'succeeded') {
-                    setSuccessMessage(getUpdateJobSuccessMessage(payload.job));
-                } else if (payload.job.status === 'failed') {
-                    setSuccessMessage(null);
-                }
-            } catch (error) {
-                if (options?.isRestartExpected) {
-                    return;
-                }
-
-                setErrorMessage(error instanceof Error ? error.message : 'Failed to load the update overview.');
-            } finally {
-                if (!options?.isSilent) {
-                    setIsLoading(false);
-                }
-            }
-        },
-        [],
-    );
-
-    useEffect(() => {
-        void loadOverview();
-    }, [loadOverview]);
-
-    useEffect(() => {
-        if (overview?.job.status !== 'running') {
-            return;
-        }
-
-        const interval = window.setInterval(() => {
-            void loadOverview({ isSilent: true, isRestartExpected: true });
-        }, 4000);
-
-        return () => {
-            window.clearInterval(interval);
-        };
-    }, [loadOverview, overview?.job.status]);
-
-    const selectedEnvironment = useMemo(
-        () =>
-            overview?.environments.find((environment) => environment.id === selectedEnvironmentId) ||
-            overview?.currentEnvironment ||
-            null,
-        [overview, selectedEnvironmentId],
-    );
-    const isCustomEnvironmentSelected = selectedEnvironment?.isCustom === true;
-    const isEnvironmentSwitchRequired =
-        Boolean(selectedEnvironment) && selectedEnvironment?.id !== overview?.currentEnvironment.id;
-    const isUpdateRunning = overview?.job.status === 'running';
-    const updateTerminalId = `standalone-vps-update:${overview?.job.startedAt || overview?.job.finishedAt || overview?.job.status || 'loading'}`;
-    const updateTerminalEmptyState =
-        isLoading && !overview ? 'Loading update log...' : 'No persisted update log output yet.';
-    const isCustomRefRelease = isCustomEnvironmentSelected ? customCandidate?.isReleaseTag === true : true;
-    const isCustomRefMissing = isCustomEnvironmentSelected && !customRef.trim();
-    const isOriginOverrideChanged =
-        overview !== null && originRepositoryUrlOverride.trim() !== overview.originRepositoryUrl;
-
-    async function startUpdate(): Promise<void> {
-        if (!selectedEnvironment) {
-            return;
-        }
-
-        try {
-            setIsStartingUpdate(true);
-            setErrorMessage(null);
-            setSuccessMessage(null);
-
-            const response = await fetch('/api/admin/update', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    environment: selectedEnvironment.id,
-                    customRef: isCustomEnvironmentSelected ? customRef.trim() : null,
-                    originRepositoryUrl: isOriginOverrideChanged ? originRepositoryUrlOverride.trim() : null,
-                }),
-            });
-            const payload = (await response.json()) as UpdateOverview;
-
-            if (!response.ok) {
-                throw new Error(payload.error || 'Failed to start the update.');
-            }
-
-            setOverview(payload);
-            setSuccessMessage(
-                isCustomEnvironmentSelected
-                    ? `Started the standalone VPS update to custom ref ${customRef.trim()}.`
-                    : isEnvironmentSwitchRequired
-                      ? `Switched to ${selectedEnvironment.label} and started the standalone VPS update.`
-                      : 'Standalone VPS update started.',
-            );
-        } catch (error) {
-            setErrorMessage(error instanceof Error ? error.message : 'Failed to start the update.');
-        } finally {
-            setIsStartingUpdate(false);
-        }
-    }
+    const state = useUpdateClientState();
 
     return (
-        <div className="container mx-auto space-y-6 px-4 py-8">
+        <div className="container mx-auto min-w-0 space-y-6 px-4 py-8">
             <div className="mt-20 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
-                <div>
+                <div className="min-w-0">
                     <h1 className="text-3xl font-light text-gray-900">Update</h1>
                     <p className="mt-1 max-w-3xl text-sm text-gray-500">
                         Switch the standalone VPS between Live, Preview, Production, LTS, or a custom ref, and update
@@ -250,676 +32,51 @@ export function UpdateClient() {
 
                 <button
                     type="button"
-                    onClick={() => void loadOverview()}
-                    disabled={isLoading || isStartingUpdate}
-                    className="inline-flex items-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"
+                    onClick={() => void state.loadOverview()}
+                    disabled={state.isLoading || state.isStartingUpdate}
+                    className="inline-flex shrink-0 items-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"
                 >
-                    <RefreshCcw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+                    <RefreshCcw className={`h-4 w-4 ${state.isLoading ? 'animate-spin' : ''}`} />
                     Refresh
                 </button>
             </div>
 
-            {errorMessage && (
+            {state.errorMessage && (
                 <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
-                    {errorMessage}
+                    {state.errorMessage}
                 </div>
             )}
-            {successMessage && (
+            {state.successMessage && (
                 <div className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
-                    {successMessage}
+                    {state.successMessage}
                 </div>
             )}
 
-            {!overview?.isAvailable && overview?.unavailableReason && (
+            {!state.overview?.isAvailable && state.overview?.unavailableReason && (
                 <div className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
-                    {overview.unavailableReason}
+                    {state.overview.unavailableReason}
                 </div>
             )}
 
-            <div className="grid gap-4 lg:grid-cols-[1.4fr_1fr]">
-                <Card className="hover:border-gray-200 hover:shadow-md">
-                    <CurrentDeploymentCard overview={overview} language={language} />
+            <div className="grid min-w-0 items-start gap-4 lg:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
+                <Card className={UPDATE_PAGE_CARD_CLASS_NAME}>
+                    <CurrentDeploymentCard overview={state.overview} language={language} />
                 </Card>
 
-                <Card className="hover:border-gray-200 hover:shadow-md">
-                    <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>
-
-                        <div className="grid gap-3">
-                            {overview?.environments.map((environment) => {
-                                const isSelected = environment.id === selectedEnvironment?.id;
-                                const isCurrent = environment.id === overview.currentEnvironment.id;
-
-                                return (
-                                    <button
-                                        key={environment.id}
-                                        type="button"
-                                        onClick={() => setSelectedEnvironmentId(environment.id)}
-                                        disabled={isUpdateRunning || isStartingUpdate}
-                                        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>
-                                );
-                            })}
-                        </div>
-
-                        {isCustomEnvironmentSelected && overview?.isAvailable && (
-                            <div className="space-y-3 rounded-xl border border-blue-200 bg-blue-50/40 p-4">
-                                <CustomCommitPicker
-                                    language={language}
-                                    selectedRef={customRef}
-                                    onSelectRef={(nextRef, matchedCandidate) => {
-                                        setCustomRef(nextRef);
-                                        setCustomCandidate(matchedCandidate);
-                                    }}
-                                    isDisabled={isUpdateRunning || isStartingUpdate}
-                                />
-
-                                {customRef.trim() && !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>
-                        )}
-
-                        <AdvancedOriginRepositoryPanel
-                            originRepositoryUrlOverride={originRepositoryUrlOverride}
-                            onChange={setOriginRepositoryUrlOverride}
-                            overview={overview}
-                            isExpanded={isAdvancedExpanded}
-                            onToggleExpanded={() => setIsAdvancedExpanded((current) => !current)}
-                            isDisabled={isUpdateRunning || isStartingUpdate}
-                        />
-
-                        <button
-                            type="button"
-                            onClick={() => void startUpdate()}
-                            disabled={
-                                !overview?.isAvailable ||
-                                !selectedEnvironment ||
-                                isUpdateRunning ||
-                                isStartingUpdate ||
-                                isCustomRefMissing ||
-                                (!isCustomEnvironmentSelected &&
-                                    !isEnvironmentSwitchRequired &&
-                                    !overview?.isUpdateAvailable &&
-                                    !isOriginOverrideChanged)
-                            }
-                            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"
-                        >
-                            {isStartingUpdate || isUpdateRunning ? (
-                                <Loader2 className="h-4 w-4 animate-spin" />
-                            ) : isCustomEnvironmentSelected ? (
-                                <Rocket className="h-4 w-4" />
-                            ) : isEnvironmentSwitchRequired ? (
-                                <Rocket className="h-4 w-4" />
-                            ) : (
-                                <Download className="h-4 w-4" />
-                            )}
-                            {isCustomEnvironmentSelected
-                                ? `Update to ${customRef.trim() || 'custom ref'}`
-                                : isEnvironmentSwitchRequired
-                                  ? `Switch to ${selectedEnvironment?.label || 'selected environment'} and update`
-                                  : 'Update to latest commit'}
-                        </button>
-                    </div>
-                </Card>
-            </div>
+                <div className="min-w-0 space-y-4">
+                    <Card className={UPDATE_PAGE_CARD_CLASS_NAME}>
+                        <TargetEnvironmentCard state={state} language={language} />
+                    </Card>
 
-            <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-center sm:justify-between">
-                        <div>
-                            <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>
-                        <span
-                            className={`inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-wide ${
-                                overview?.job.status === 'running'
-                                    ? 'border-blue-200 bg-blue-50 text-blue-700'
-                                    : overview?.job.status === 'failed'
-                                      ? 'border-rose-200 bg-rose-50 text-rose-700'
-                                      : overview?.job.status === 'succeeded'
-                                        ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
-                                        : 'border-slate-200 bg-slate-50 text-slate-500'
-                            }`}
-                        >
-                            {overview?.job.status || 'idle'}
-                        </span>
-                    </div>
-
-                    <dl className="grid gap-4 text-sm text-slate-600 md:grid-cols-2 xl:grid-cols-4">
-                        <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">Target</dt>
-                            <dd className="mt-1 text-slate-900">
-                                {overview?.job.targetEnvironment.label || 'Production'}
-                            </dd>
-                        </div>
-                        <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">Step</dt>
-                            <dd className="mt-1 text-slate-900">{overview?.job.currentStep || 'Idle'}</dd>
-                        </div>
-                        <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">Started</dt>
-                            <dd className="mt-1 text-slate-900">
-                                {formatHumanReadableTimestamp(overview?.job.startedAt, language)}
-                            </dd>
-                        </div>
-                        <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">Finished</dt>
-                            <dd className="mt-1 text-slate-900">
-                                {formatHumanReadableTimestamp(overview?.job.finishedAt, language)}
-                            </dd>
-                        </div>
-                    </dl>
-
-                    {overview?.job.status === 'succeeded' && (
-                        <div className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
-                            {getUpdateJobSuccessMessage(overview.job)}
-                        </div>
-                    )}
-                    {overview?.job.status === 'failed' && (
-                        <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
-                            {getUpdateJobFailureMessage(overview.job)}
-                        </div>
-                    )}
-                    {overview?.job.logFilePath && (
-                        <div className="text-xs text-slate-500">
-                            Installer log:
-                            <span className="ml-2 font-mono text-slate-700">{overview.job.logFilePath}</span>
-                        </div>
-                    )}
-                    {overview?.job.status === 'failed' && <UpdateJobLogActions />}
-                    <AdminXtermTerminal
-                        terminalId={updateTerminalId}
-                        output={overview?.job.logTail || ''}
-                        emptyState={updateTerminalEmptyState}
-                        isReadOnly
-                        isPlainTextOutput
-                        ariaLabel="Standalone VPS update log"
-                    />
-                </div>
-            </Card>
-
-            <PendingCommitsCard overview={overview} language={language} />
-        </div>
-    );
-}
-
-/**
- * Current-deployment metrics card, including the new commits-behind and time-behind info.
- *
- * @private internal component of `<UpdateClient/>`
- */
-function CurrentDeploymentCard({
-    overview,
-    language,
-}: {
-    readonly overview: UpdateOverview | null;
-    readonly language: ServerLanguageCode;
-}) {
-    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>
+                    <Card className={UPDATE_PAGE_CARD_CLASS_NAME}>
+                        <AutomaticSelfUpdateConfigurationCard state={state} />
+                    </Card>
                 </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>
-            )}
+            <UpdateJobCard state={state} language={language} />
+            <PendingCommitsCard overview={state.overview} language={language} />
+            <InstalledVersionsCard state={state} language={language} />
         </div>
     );
 }
-
-/**
- * Renders one commit as subject, hash and authored date.
- *
- * @private internal component of `<UpdateClient/>`
- */
-function CommitSummaryCard({
-    label,
-    commitSha,
-    shortCommitSha,
-    subject,
-    authoredAt,
-    language,
-}: {
-    readonly label: string;
-    readonly commitSha: string | null;
-    readonly shortCommitSha: string | null;
-    readonly subject: string | null;
-    readonly authoredAt: string | null;
-    readonly language: ServerLanguageCode;
-}) {
-    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>
-    );
-}
-
-/**
- * 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/>`
- */
-function PendingCommitsCard({
-    overview,
-    language,
-}: {
-    readonly overview: UpdateOverview | null;
-    readonly language: ServerLanguageCode;
-}) {
-    if (!overview || overview.pendingCommits.length === 0) {
-        return null;
-    }
-
-    const commitsBehindLabel =
-        overview.commitsBehindCount !== null && overview.commitsBehindCount > 0
-            ? `${overview.commitsBehindCount} commit${overview.commitsBehindCount === 1 ? '' : 's'} behind`
-            : `${overview.pendingCommits.length} commit${overview.pendingCommits.length === 1 ? '' : 's'} pending`;
-    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>
-    );
-}
-
-/**
- * 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 `<UpdateClient/>`
- */
-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>
-    );
-}
-
-/**
- * Collapsible advanced panel for overriding the upstream repository URL.
- *
- * @private internal component of `<UpdateClient/>`
- */
-function AdvancedOriginRepositoryPanel({
-    originRepositoryUrlOverride,
-    onChange,
-    overview,
-    isExpanded,
-    onToggleExpanded,
-    isDisabled,
-}: {
-    readonly originRepositoryUrlOverride: string;
-    readonly onChange: (nextValue: string) => void;
-    readonly overview: UpdateOverview | null;
-    readonly isExpanded: boolean;
-    readonly onToggleExpanded: () => void;
-    readonly isDisabled: boolean;
-}) {
-    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>
-    );
-}
-
-/**
- * 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.
- */
-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}`;
-}
-
-/**
- * Builds the localized time-behind portion of the deployment drift label (e.g. `3 days behind`).
- *
- * @param overview - Current overview snapshot.
- * @param language - Active UI language for moment localization.
- * @returns Time-behind label or empty string when either side of the comparison is missing.
- */
-function buildDeploymentTimeBehindLabel(overview: UpdateOverview | null, language: ServerLanguageCode): string {
-    if (!overview?.currentCommitDate || !overview.latestRemoteCommitDate) {
-        return '';
-    }
-
-    const currentMoment = createServerLanguageMoment(overview.currentCommitDate, language);
-    const latestMoment = createServerLanguageMoment(overview.latestRemoteCommitDate, language);
-    if (!currentMoment.isValid() || !latestMoment.isValid()) {
-        return '';
-    }
-
-    return `${currentMoment.from(latestMoment, true)} behind`;
-}
-
-/**
- * Builds the success message for a finished standalone VPS update.
- *
- * @param job - Completed update job snapshot.
- * @returns Human-readable success message.
- */
-function getUpdateJobSuccessMessage(job: UpdateJobSnapshot): string {
-    return job.currentStep || 'Standalone VPS update finished successfully.';
-}
-
-/**
- * Builds the failure message for a failed standalone VPS update.
- *
- * @param job - Failed update job snapshot.
- * @returns Human-readable failure message.
- */
-function getUpdateJobFailureMessage(job: UpdateJobSnapshot): string {
-    return job.errorMessage || 'The standalone VPS update failed. Review the installer log for details.';
-}
-
-/**
- * Formats optional timestamps for the status cards using `moment.js` with the active UI language.
- *
- * @param value - ISO timestamp or `null`.
- * @param language - Active UI language code.
- * @returns Localized human-friendly timestamp or fallback text.
- */
-function formatHumanReadableTimestamp(value: string | null | undefined, language: ServerLanguageCode): string {
-    return formatServerLanguageHumanReadableDate(value, language, {
-        fallbackLabel: 'Not available',
-        isExactDateIncluded: true,
-    });
-}