@bygghammar/cms-platform 0.92.2 → 0.94.0

package/src/backoffice/VersionView.tsx

@@ -1,6 +1,13 @@
-import { Package } from "lucide-react";
-import { useEffect, useState } from "react";
+import { Check, Copy, Package, RefreshCw } from "lucide-react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 
+import type { ModuleInventoryRow } from "../admin/module-inventory";
+import {
+  summarizeUpdates,
+  type PackageReport,
+  type UpdateStatus,
+  type VersionReport,
+} from "../admin/version-report";
 import { SCHEMA_BASELINE, SCHEMA_MIGRATIONS, type SchemaDrift } from "../server/schema-drift";
 
 /** Build metadata injected at compile time by the host. */
@@ -27,6 +34,32 @@ export type VersionDeps = {
   packageName?: string;
   /** Schema comparison against the packaged baseline, when the host supplies it. */
   drift?: SchemaDrift;
+  /**
+   * The release/package report, from hosts that build one with
+   * `buildVersionReport`. Without it the screen shows what `build` and
+   * `releases` say and marks the rest as not reported.
+   */
+  report?: VersionReport | null;
+  /** One row per module (see `moduleInventory`). Omitted: no module section. */
+  modules?: readonly ModuleInventoryRow[];
+  /** The version read failed and there is no earlier answer to show. */
+  error?: boolean;
+  /**
+   * The most recent request for this information (a "Check again" or a
+   * re-read) failed while an earlier answer is on screen. The screen keeps
+   * that answer but marks it as not re-verified.
+   */
+  latestCheckFailed?: boolean;
+  onRetry?: () => void;
+  /** Ask the server to check the registry again (it applies its own minimum interval). */
+  onRefresh?: () => void;
+  refreshing?: boolean;
+  /** Shown as "<siteName> release". */
+  siteName?: string;
+  /** Link target for "change modules in Site settings". */
+  settingsHref?: string;
+  /** Renders a link; the route passes the router's `Link`. Defaults to `<a>`. */
+  renderLink?: (props: { href: string; className: string; children: ReactNode }) => ReactNode;
 };
 
 function fmt(value: string | null | undefined) {
@@ -36,6 +69,13 @@ function fmt(value: string | null | undefined) {
   return d.toLocaleString("sv-SE", { timeZone: "UTC", hour12: false }) + " UTC";
 }
 
+function fmtDate(value: string | null | undefined) {
+  if (!value) return null;
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return null;
+  return d.toLocaleDateString("sv-SE", { timeZone: "UTC" });
+}
+
 function formatUtc(date: Date) {
   return date.toLocaleString("sv-SE", { timeZone: "UTC", hour12: false }) + " UTC";
 }
@@ -51,49 +91,694 @@ function useUtcClock() {
   return now;
 }
 
-/** Host-agnostic CMS & platform version screen. */
+const LABEL = "text-[0.7rem] uppercase tracking-[0.22em] text-ink/50";
+const CARD = "border border-ink/10 bg-white p-5";
+const MODULE_COLUMNS = "lg:grid-cols-[minmax(0,1.1fr)_10rem_minmax(0,1.9fr)]";
+const PILL =
+  "inline-flex items-center whitespace-nowrap rounded-full px-3 py-1 text-[0.7rem] uppercase tracking-[0.16em]";
+
+const STATUS_TEXT: Record<UpdateStatus, string> = {
+  "up-to-date": "Up to date",
+  "update-available": "Update available",
+  "prerelease-current": "Prerelease installed",
+  "check-unavailable": "Update check unavailable",
+  "not-published": "Not in registry",
+  "ahead-of-registry": "Ahead of registry",
+  "installed-unknown": "Installed version unknown",
+  "installed-invalid": "Unrecognised version",
+};
+
+const STATUS_TONE: Record<UpdateStatus, string> = {
+  "up-to-date": "bg-sea/10 text-sea",
+  "update-available": "bg-amber-100 text-amber-900",
+  "prerelease-current": "bg-ink/5 text-ink/75",
+  "check-unavailable": "bg-ink/5 text-ink/60",
+  "not-published": "bg-amber-100 text-amber-900",
+  "ahead-of-registry": "bg-amber-100 text-amber-900",
+  "installed-unknown": "bg-amber-100 text-amber-900",
+  "installed-invalid": "bg-amber-100 text-amber-900",
+};
+
+function StatusBadge({ status }: { status: UpdateStatus }) {
+  return <span className={`${PILL} ${STATUS_TONE[status]}`}>{STATUS_TEXT[status]}</span>;
+}
+
+const REGISTRY_ERROR_TEXT: Record<string, string> = {
+  timeout: "the registry did not answer in time",
+  network: "the registry could not be reached",
+  http: "the registry returned an error",
+  "not-found": "the registry does not list this package",
+  malformed: "the registry answer was not usable",
+  "too-large": "the registry answer was too large",
+  "not-allowed": "this package is not on the update-check allowlist",
+};
+
+/** A short label/value pair; the label stays readable on every width. */
+function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="min-w-0">
+      <dt className={LABEL}>{label}</dt>
+      <dd className="mt-1.5 min-w-0 break-words text-sm text-ink">{children}</dd>
+    </div>
+  );
+}
+
+function Mono({ children }: { children: ReactNode }) {
+  return <span className="font-mono [overflow-wrap:anywhere]">{children}</span>;
+}
+
+function Muted({ children }: { children: ReactNode }) {
+  return <span className="mt-1 block text-xs text-ink/55">{children}</span>;
+}
+
+function CopyButton({ value, label }: { value: string; label: string }) {
+  const [state, setState] = useState<"idle" | "copied" | "failed">("idle");
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+  const copy = async () => {
+    try {
+      if (!navigator.clipboard?.writeText) throw new Error("no clipboard");
+      await navigator.clipboard.writeText(value);
+      setState("copied");
+    } catch {
+      setState("failed");
+    }
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setState("idle"), 2500);
+  };
+  return (
+    <span className="inline-flex items-center gap-2">
+      <button
+        type="button"
+        onClick={() => void copy()}
+        aria-label={label}
+        className="inline-flex min-h-9 items-center gap-1.5 border border-ink/15 px-3 py-1.5 text-xs text-ink/75 hover:border-sea hover:text-sea focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sea"
+      >
+        {state === "copied" ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+        {state === "copied" ? "Copied" : "Copy"}
+      </button>
+      <span role="status" aria-live="polite" className="text-xs text-ink/55">
+        {state === "failed" ? "Copy is not available here — select the full value instead." : ""}
+      </span>
+    </span>
+  );
+}
+
+function ReleaseValue({ report }: { report: VersionReport | null | undefined }) {
+  const release = report?.release;
+  if (!release?.value) {
+    return (
+      <>
+        <span className="font-serif text-lg text-ink">Unknown</span>
+        <Muted>
+          {!report
+            ? "This site's server does not report its release identity."
+            : release?.unrecognized
+              ? `The runtime release value (${release.source}) is not in a recognised format, so it is not shown.`
+              : "This deployment did not report a release identity (APP_VERSION is not set)."}
+        </Muted>
+      </>
+    );
+  }
+  const short = release.kind === "commit" ? release.value.slice(0, 8) : release.value;
+  return (
+    <>
+      <span className="font-mono text-lg text-ink" title={release.value}>
+        {short}
+      </span>
+      {release.kind === "commit" && (
+        <span className="mt-2 block">
+          <span className="sr-only">Full commit: </span>
+          <code className="block font-mono text-xs text-ink/60 [overflow-wrap:anywhere]">
+            {release.value}
+          </code>
+        </span>
+      )}
+      <span className="mt-3 flex flex-wrap items-center gap-2">
+        <CopyButton
+          value={release.value}
+          label={release.kind === "commit" ? "Copy full release commit" : "Copy release identity"}
+        />
+      </span>
+      <Muted>
+        From the runtime <span className="font-mono">{release.source}</span>, the value the health
+        check reports.
+      </Muted>
+    </>
+  );
+}
+
+function PackageVersions({ pkg }: { pkg: PackageReport }) {
+  const u = pkg.update;
+  const installedDate = fmtDate(u.installedPublishedAt);
+  return (
+    <>
+      <Mono>{pkg.installed ?? "Unknown"}</Mono>
+      <Muted>
+        {installedDate
+          ? `Published ${installedDate}`
+          : pkg.registry.state === "unavailable"
+            ? "Publication date not available"
+            : "No publication date in the registry"}
+        {u.installedTags.length > 0 && ` · tag ${u.installedTags.join(", ")}`}
+        {u.installedDeprecated && " · deprecated"}
+      </Muted>
+    </>
+  );
+}
+
+function LatestVersion({ pkg }: { pkg: PackageReport }) {
+  const u = pkg.update;
+  const channel =
+    u.channel?.kind === "prerelease" ? `${u.channel.line} prerelease line` : "stable releases";
+  if (!u.latestInChannel) {
+    return (
+      <>
+        <span className="text-ink/60">—</span>
+        <Muted>
+          {u.status === "check-unavailable" || u.status === "installed-unknown"
+            ? "Not checked"
+            : `Nothing published in ${channel}`}
+        </Muted>
+      </>
+    );
+  }
+  const date = fmtDate(u.latestInChannel.publishedAt);
+  return (
+    <>
+      <Mono>{u.latestInChannel.version}</Mono>
+      <Muted>
+        Newest in {channel}
+        {date ? `, published ${date}` : ""}
+      </Muted>
+      {u.newerStable && (
+        <Muted>
+          Stable <span className="font-mono">{u.newerStable.version}</span> is also published
+          {fmtDate(u.newerStable.publishedAt) ? ` (${fmtDate(u.newerStable.publishedAt)})` : ""}.
+        </Muted>
+      )}
+    </>
+  );
+}
+
+function registryReason(error: string | null): string {
+  return error ? (REGISTRY_ERROR_TEXT[error] ?? "the check failed") : "";
+}
+
+function registryNote(pkg: PackageReport): string | null {
+  const r = pkg.registry;
+  if (r.state === "unavailable") {
+    return r.error ? `Update check unavailable: ${registryReason(r.error)}.` : null;
+  }
+  if (r.state === "stale") {
+    return r.error
+      ? `Latest check failed at ${fmt(r.lastAttemptAt)}: ${registryReason(r.error)}. Showing registry data cached from ${fmt(r.lastSuccessAt)}, not re-verified.`
+      : `Showing registry data cached from ${fmt(r.lastSuccessAt)}, not re-verified.`;
+  }
+  return null;
+}
+
+const ENABLED_TEXT = {
+  enabled: "Enabled",
+  disabled: "Disabled",
+  checking: "Checking…",
+  unavailable: "Status unavailable",
+} as const;
+
+const ENABLED_TONE = {
+  enabled: "bg-sea/10 text-sea",
+  disabled: "bg-ink/5 text-ink/60",
+  checking: "bg-ink/5 text-ink/50",
+  unavailable: "bg-amber-100 text-amber-900",
+} as const;
+
+function UpdateSummaryBanner({
+  report,
+  error,
+  latestCheckFailed,
+  onRefresh,
+  refreshing,
+}: {
+  report: VersionReport | null | undefined;
+  error?: boolean;
+  latestCheckFailed?: boolean;
+  onRefresh?: () => void;
+  refreshing?: boolean;
+}) {
+  const summary = report ? summarizeUpdates(report.packages) : null;
+  // Not verified: the latest request failed, or the registry answers on screen
+  // are cached because their latest check failed. The verdict below is then the
+  // one from the last successful check, and is labelled as such.
+  const registryFailed = !!summary && summary.kind !== "unavailable" && !summary.verified;
+  const unverified = !!summary && (registryFailed || !!latestCheckFailed);
+  // Claims about successful registry checks use only registry success times.
+  // A package whose latest attempt failed is either cached (it succeeded
+  // before) or has never been checked successfully; the two are worded apart.
+  const packages = report?.packages ?? [];
+  const succeeded = packages.filter((p) => p.registry.lastSuccessAt !== null);
+  const neverSucceeded = packages.filter((p) => p.registry.lastSuccessAt === null);
+  const cachedAfterFailure = packages.filter(
+    (p) => p.registry.state === "stale" && p.registry.error !== null,
+  );
+  const firstTimeFailed = neverSucceeded.filter((p) => p.registry.error !== null);
+  const names = (list: readonly PackageReport[]) => list.map((p) => p.name).join(", ");
+  const oldestSuccess = (list: readonly PackageReport[]) =>
+    list.length
+      ? list.map((p) => p.registry.lastSuccessAt as string).reduce((a, b) => (a < b ? a : b))
+      : null;
+  const registrySentence =
+    packages.length > 0 && succeeded.length === packages.length
+      ? `Its last successful registry check was ${fmt(summary?.checkedAt)}.`
+      : succeeded.length > 0
+        ? `Its last successful registry check was ${fmt(oldestSuccess(succeeded))} for ${names(succeeded)}; ${names(neverSucceeded)} had no successful registry check.`
+        : "It contained no successful registry check.";
+  let headline: string;
+  let detail: string;
+  if (!summary) {
+    headline = error ? "Version information could not be loaded" : "Update check unavailable";
+    detail = error
+      ? "The installed versions and update status could not be read right now."
+      : "This site's server does not report package updates.";
+  } else if (summary.kind === "updates-available") {
+    headline =
+      summary.updates.length === 1
+        ? "1 package update available"
+        : `${summary.updates.length} package updates available`;
+    detail = `For ${summary.updates.join(", ")}. Updates are installed through a reviewed release, not from this screen.`;
+  } else if (summary.kind === "attention") {
+    headline = "Check the installed versions";
+    detail = `The registry cannot confirm ${summary.attention.join(", ")}.`;
+  } else if (summary.kind === "unavailable") {
+    headline = "Update check unavailable";
+    detail = "Installed versions are shown below; the public registry could not be compared.";
+  } else if (summary.kind === "partial") {
+    headline = "Partly checked";
+    detail = `No update found, but ${summary.unavailable.join(", ")} could not be checked.`;
+  } else {
+    headline = unverified ? "Up to date at the last successful check" : "Up to date";
+    detail = "Every installed first-party package is the newest in its channel.";
+  }
+  if (summary && summary.prereleases.length > 0) {
+    detail += ` Prerelease installed: ${summary.prereleases.join(", ")}.`;
+  }
+  const tone =
+    summary?.kind === "up-to-date" && !unverified
+      ? "border-sea/30"
+      : summary?.kind === "updates-available" || summary?.kind === "attention" || error || unverified
+        ? "border-amber-300 bg-amber-50"
+        : "border-ink/10";
+  const nextAt = report?.nextCheckAllowedAt ? Date.parse(report.nextCheckAllowedAt) : null;
+
+  return (
+    <section aria-labelledby="version-summary" className={`mt-8 border bg-white p-5 ${tone}`}>
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="min-w-0 sm:flex-1">
+          <h3 id="version-summary" className="font-serif text-lg text-ink">
+            {headline}
+          </h3>
+          <p className="mt-1 text-sm text-ink/70">{detail}</p>
+          {latestCheckFailed && report && (
+            <p role="alert" className="mt-3 border-l-2 border-amber-400 pl-3 text-sm text-ink">
+              The latest check could not be completed, for example because the session expired
+              or the connection failed. The information below is from the answer prepared at{" "}
+              {fmt(report.generatedAt)} and has not been re-verified. {registrySentence} Try Check
+              again, or reload the page to sign in again.
+            </p>
+          )}
+          {registryFailed && cachedAfterFailure.length > 0 && (
+            <p role="status" className="mt-3 border-l-2 border-amber-400 pl-3 text-sm text-ink">
+              The latest registry check failed for {names(cachedAfterFailure)}. Showing cached
+              registry data from the last successful check ({fmt(oldestSuccess(cachedAfterFailure))});
+              it has not been re-verified.
+            </p>
+          )}
+          {registryFailed && firstTimeFailed.length > 0 && (
+            <p role="status" className="mt-3 border-l-2 border-amber-400 pl-3 text-sm text-ink">
+              No successful registry check yet for {names(firstTimeFailed)};{" "}
+              {firstTimeFailed.length === 1
+                ? "its installed version is"
+                : "their installed versions are"}{" "}
+              shown without a registry comparison.
+            </p>
+          )}
+          {summary && (
+            <p className="mt-2 text-xs text-ink/55">
+              {packages.length > 0 && succeeded.length === packages.length
+                ? `Last successful registry check ${fmt(summary.checkedAt)}.`
+                : succeeded.length > 0
+                  ? `Last successful registry check: ${succeeded
+                      .map((p) => `${p.name} ${fmt(p.registry.lastSuccessAt)}`)
+                      .join("; ")}. No successful check yet for ${names(neverSucceeded)}.`
+                  : "No successful registry check yet."}
+            </p>
+          )}
+        </div>
+        {onRefresh && report && (
+          <button
+            type="button"
+            onClick={onRefresh}
+            disabled={refreshing}
+            className="inline-flex min-h-10 shrink-0 items-center gap-2 self-start border border-ink/15 bg-white px-4 py-2 text-sm text-ink hover:border-sea hover:text-sea disabled:cursor-not-allowed disabled:opacity-60 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sea"
+          >
+            <RefreshCw className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
+            {refreshing ? "Checking…" : "Check again"}
+          </button>
+        )}
+      </div>
+      {onRefresh && report && nextAt !== null && (
+        <p className="mt-2 text-xs text-ink/50">
+          The registry is asked at most once a minute per package; a check before{" "}
+          {fmt(report.nextCheckAllowedAt)} reuses the last answer.
+        </p>
+      )}
+    </section>
+  );
+}
+
+function ModuleRows({
+  modules,
+  settingsHref,
+  renderLink,
+}: {
+  modules: readonly ModuleInventoryRow[];
+  settingsHref?: string;
+  renderLink: NonNullable<VersionDeps["renderLink"]>;
+}) {
+  const anyStale = modules.some((m) => m.enabledStale);
+  const anyUnavailable = modules.some((m) => m.enabled === "unavailable");
+  return (
+    <section aria-labelledby="version-modules" className="mt-12">
+      <h3 id="version-modules" className="font-serif text-lg text-ink">
+        Modules and packages
+      </h3>
+      <p className="mt-1 text-sm text-ink/60">
+        Every module in this CMS, on or off. Switching a module off hides it but keeps its code
+        installed.{" "}
+        {settingsHref
+          ? renderLink({
+              href: settingsHref,
+              className: "text-sea underline-offset-2 hover:underline",
+              children: "Turn modules on or off in Site settings.",
+            })
+          : "Turn modules on or off in Site settings."}
+      </p>
+      {anyUnavailable && (
+        <p role="status" className="mt-3 border border-amber-300 bg-amber-50 p-3 text-sm text-ink/80">
+          The saved module settings could not be read, so whether each module is on is not shown.
+        </p>
+      )}
+      {anyStale && (
+        <p role="status" className="mt-3 text-sm text-ink/60">
+          Module status is from the last successful settings read; a newer read failed.
+        </p>
+      )}
+      <div className="mt-4 border border-ink/10 bg-white">
+        <div
+          aria-hidden="true"
+          className={`hidden border-b border-ink/10 px-5 py-3 lg:grid ${MODULE_COLUMNS} ${LABEL}`}
+        >
+          <span>Module</span>
+          <span>Status</span>
+          <span>Source and updates</span>
+        </div>
+        <ul aria-label="Modules">
+          {modules.map((m) => {
+            const cms = m.cmsVersion ? `CMS ${m.cmsVersion}` : "the CMS package";
+            return (
+              <li
+                key={m.key}
+                className={`grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4 gap-y-2 border-b border-ink/5 px-5 py-4 last:border-0 lg:items-center ${MODULE_COLUMNS}`}
+              >
+                <div className="min-w-0">
+                  <h4 className="font-serif text-base text-ink">{m.label}</h4>
+                  {m.description && <p className="mt-0.5 text-xs text-ink/55">{m.description}</p>}
+                </div>
+                <div className="justify-self-end lg:justify-self-start">
+                  <span className={`${PILL} ${ENABLED_TONE[m.enabled]}`}>
+                    <span className="sr-only">Status: </span>
+                    {ENABLED_TEXT[m.enabled]}
+                  </span>
+                </div>
+                <div className="col-span-2 min-w-0 text-sm text-ink lg:col-span-1">
+                  <span className="block">Included in {cms}</span>
+                  {!m.packageName && (
+                    <span className="mt-0.5 block text-xs text-ink/55">
+                      Updates with CMS · no separate version
+                    </span>
+                  )}
+                  {m.packageName && !m.package && (
+                    <span className="mt-0.5 block text-xs text-ink/55">
+                      Built on <Mono>{m.packageName}</Mono> — version not reported by this server
+                    </span>
+                  )}
+                  {m.packageName && m.package && (
+                    <>
+                      <span className="mt-0.5 block">
+                        Built on <Mono>{m.packageName}</Mono>
+                      </span>
+                      <span className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1">
+                        <span>
+                          Installed <Mono>{m.package.installed ?? "unknown"}</Mono>
+                        </span>
+                        <StatusBadge status={m.package.update.status} />
+                        {m.package.registry.state === "stale" && (
+                          <span className={`${PILL} bg-amber-100 text-amber-900`}>
+                            Not re-verified
+                          </span>
+                        )}
+                      </span>
+                      <span className="mt-1 block text-xs text-ink/55">
+                        {m.package.requiredByCms ? (
+                          <>
+                            {cms} requires <Mono>{m.package.requiredByCms}</Mono>.{" "}
+                          </>
+                        ) : null}
+                        Update this package only together with a reviewed CMS release.
+                      </span>
+                    </>
+                  )}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </section>
+  );
+}
+
+function PackageRows({ packages }: { packages: readonly PackageReport[] }) {
+  return (
+    <section aria-labelledby="version-packages" className="mt-12">
+      <h3 id="version-packages" className="font-serif text-lg text-ink">
+        Installed packages
+      </h3>
+      <p className="mt-1 text-sm text-ink/60">
+        Exact versions in this build, compared with the public npm registry. Release installs are
+        compared with stable releases; a prerelease with its own prerelease line.
+      </p>
+      <ul className="mt-4 grid gap-3" aria-label="Installed packages">
+        {packages.map((p) => {
+          const note = registryNote(p);
+          return (
+            <li key={p.name} className={CARD}>
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <h4 className="min-w-0 font-mono text-sm text-ink [overflow-wrap:anywhere]">
+                  {p.name}
+                </h4>
+                <span className="flex flex-wrap gap-2">
+                  <StatusBadge status={p.update.status} />
+                  {p.registry.state === "stale" && (
+                    <span className={`${PILL} bg-amber-100 text-amber-900`}>Not re-verified</span>
+                  )}
+                </span>
+              </div>
+              <p className="mt-1 text-xs text-ink/55">
+                {p.role === "cms" ? "CMS package" : "Module package"}
+              </p>
+              <dl className="mt-4 grid gap-4 sm:grid-cols-3">
+                <Field label="Installed">
+                  <PackageVersions pkg={p} />
+                </Field>
+                <Field label="Declared">
+                  {p.declared ? <Mono>{p.declared}</Mono> : <span className="text-ink/60">—</span>}
+                  <Muted>In the site's package manifest</Muted>
+                  {p.requiredByCms && (
+                    <Muted>
+                      CMS requires <Mono>{p.requiredByCms}</Mono>
+                    </Muted>
+                  )}
+                </Field>
+                <Field label="Latest">
+                  <LatestVersion pkg={p} />
+                </Field>
+              </dl>
+              {note && <p className="mt-3 text-xs text-ink/60">{note}</p>}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}
+
+const defaultLink: NonNullable<VersionDeps["renderLink"]> = ({ href, className, children }) => (
+  <a href={href} className={className}>
+    {children}
+  </a>
+);
+
+/** Host-agnostic version, package and module screen. */
 export function VersionView({ deps }: { deps: VersionDeps }) {
-  const { build, releases, loading, packageName = "@bygghammar/cms-platform" } = deps;
+  const { build, releases, loading, packageName = "@bygghammar/cms-platform", report } = deps;
   const now = useUtcClock();
+  const renderLink = deps.renderLink ?? defaultLink;
+  const cmsPackage = report?.packages.find((p) => p.role === "cms") ?? null;
+  const cmsVersion = cmsPackage?.installed ?? build?.platformVersion ?? null;
+  const cmsDeclared = cmsPackage?.declared ?? build?.platformRange ?? null;
+  const builtAt = report ? report.builtAt : (build?.buildTime ?? null);
+  const history =
+    report?.releaseHistory ??
+    releases.map((r) => ({ ...r, prerelease: /-/.test(r.version), current: !!r.current }));
 
   return (
-    <div className="p-8 md:p-12 w-full max-w-4xl">
+    <div className="w-full max-w-4xl p-6 sm:p-8 md:p-12">
       <div className="flex items-center gap-3">
-        <Package className="size-5 text-ink/70" />
-        <h2 className="font-serif text-xl text-ink">CMS &amp; platform version</h2>
+        <Package className="size-5 shrink-0 text-ink/70" />
+        <h2 className="font-serif text-xl text-ink">Version &amp; modules</h2>
       </div>
       <p className="mt-2 text-sm text-ink/60">
-        Which build of this site is live and which release of the shared CMS platform package it
-        runs on.
+        Which release of this site is live, which CMS and module packages it runs, and whether
+        newer versions are published.
       </p>
 
       {loading ? (
-        <p className="mt-8 text-sm text-ink/50">Loading…</p>
+        <p className="mt-8 text-sm text-ink/50" role="status">
+          Loading version information…
+        </p>
       ) : (
         <>
-          <dl className="mt-8 grid gap-4 sm:grid-cols-2">
-            {[
-              { label: "CMS build", value: build?.appVersion ?? "—" },
-              { label: "Built at", value: fmt(build?.buildTime) },
-              { label: "Platform package", value: build?.platformVersion ?? "—" },
-              { label: "Declared range", value: build?.platformRange ?? "—" },
-              { label: "Current time", value: now ? formatUtc(now) : "—" },
-              { label: "Schema baseline", value: SCHEMA_BASELINE || "—" },
-              {
-                label: "Canonical migrations",
-                value: deps.drift
-                  ? `${deps.drift.appliedCount} applied / ${deps.drift.expectedCount} expected`
-                  : String(SCHEMA_MIGRATIONS.length),
-              },
-            ].map((row) => (
-              <div key={row.label} className="border border-ink/10 bg-white p-5">
-                <dt className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/50">
-                  {row.label}
+          <UpdateSummaryBanner
+            report={report}
+            error={deps.error}
+            latestCheckFailed={deps.latestCheckFailed}
+            onRefresh={deps.onRefresh}
+            refreshing={deps.refreshing}
+          />
+          {deps.error && deps.onRetry && (
+            <button
+              type="button"
+              onClick={deps.onRetry}
+              className="mt-3 inline-flex min-h-10 items-center border border-ink/15 bg-white px-4 py-2 text-sm text-ink hover:border-sea hover:text-sea focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sea"
+            >
+              Try again
+            </button>
+          )}
+
+          <section aria-labelledby="version-release" className="mt-10">
+            <h3 id="version-release" className="font-serif text-lg text-ink">
+              Release
+            </h3>
+            <dl className="mt-4 grid gap-4 sm:grid-cols-2">
+              <div className={`${CARD} sm:col-span-2`}>
+                <dt className={LABEL}>{deps.siteName ? `${deps.siteName} release` : "Site release"}</dt>
+                <dd className="mt-2 min-w-0">
+                  <ReleaseValue report={report} />
+                </dd>
+              </div>
+              <div className={CARD}>
+                <dt className={LABEL}>Environment</dt>
+                <dd className="mt-2 text-sm text-ink">
+                  {report?.environment.name ? (
+                    <Mono>{report.environment.name}</Mono>
+                  ) : (
+                    <span className="text-ink/60">Not set</span>
+                  )}
+                  {report?.environment.origin && (
+                    <Muted>
+                      Serving <Mono>{report.environment.origin}</Mono>
+                    </Muted>
+                  )}
+                </dd>
+              </div>
+              <div className={CARD}>
+                <dt className={LABEL}>CMS package</dt>
+                <dd className="mt-2 text-sm text-ink">
+                  <Mono>{cmsVersion ?? "Unknown"}</Mono>
+                  {cmsDeclared && (
+                    <Muted>
+                      Declared <Mono>{cmsDeclared}</Mono>
+                    </Muted>
+                  )}
+                </dd>
+              </div>
+              <div className={CARD}>
+                <dt className={LABEL}>Built at</dt>
+                <dd className="mt-2 text-sm text-ink">
+                  <Mono>{builtAt ? fmt(builtAt) : "Unknown"}</Mono>
+                  <Muted>When the server bundle was built — not when it went live.</Muted>
+                </dd>
+              </div>
+              <div className={CARD}>
+                <dt className={LABEL}>Deployed at</dt>
+                <dd className="mt-2 text-sm text-ink">
+                  {report?.deployedAt ? (
+                    <Mono>{fmt(report.deployedAt)}</Mono>
+                  ) : (
+                    <>
+                      <span className="text-ink/60">Not recorded</span>
+                      <Muted>This deployment does not record when it went live.</Muted>
+                    </>
+                  )}
+                </dd>
+              </div>
+              <div className={CARD}>
+                <dt className={LABEL}>Current time</dt>
+                <dd className="mt-2 font-mono text-sm text-ink">{now ? formatUtc(now) : "—"}</dd>
+              </div>
+            </dl>
+          </section>
+
+          {report && <PackageRows packages={report.packages} />}
+
+          {deps.modules && (
+            <ModuleRows
+              modules={deps.modules}
+              settingsHref={deps.settingsHref}
+              renderLink={renderLink}
+            />
+          )}
+
+          <section aria-labelledby="version-schema" className="mt-12">
+            <h3 id="version-schema" className="font-serif text-lg text-ink">
+              Database schema
+            </h3>
+            <dl className="mt-4 grid gap-4 sm:grid-cols-2">
+              <div className={CARD}>
+                <dt className={LABEL}>Packaged schema baseline</dt>
+                <dd className="mt-2 font-mono text-sm text-ink [overflow-wrap:anywhere]">
+                  {SCHEMA_BASELINE || "—"}
+                </dd>
+              </div>
+              <div className={CARD}>
+                <dt className={LABEL}>
+                  {deps.drift ? "Canonical migrations" : "Canonical migrations in package"}
                 </dt>
-                <dd className="mt-2 font-mono text-sm text-ink">{row.value}</dd>
+                <dd className="mt-2 font-mono text-sm text-ink">
+                  {deps.drift
+                    ? `${deps.drift.appliedCount} applied / ${deps.drift.expectedCount} expected`
+                    : String(SCHEMA_MIGRATIONS.length)}
+                </dd>
               </div>
-            ))}
-          </dl>
+            </dl>
+            {!deps.drift && (
+              <p className="mt-2 text-xs text-ink/55">
+                From the installed CMS package. This is not a check of the live database.
+              </p>
+            )}
+          </section>
 
           {deps.drift && !deps.drift.inSync && (
             <div className="mt-8 border border-amber-300 bg-amber-50 p-5 text-sm">
@@ -115,42 +800,38 @@ export function VersionView({ deps }: { deps: VersionDeps }) {
             </div>
           )}
 
-          <h3 className="mt-12 font-serif text-lg text-ink">Latest platform releases</h3>
-          <p className="mt-1 text-sm text-ink/60">
-            The three most recent published versions of {packageName} with their publish dates.
-          </p>
-          <div className="mt-4 border border-ink/10 bg-white">
-            {releases.length === 0 ? (
-              <p className="p-5 text-sm text-ink/50">Release history unavailable right now.</p>
-            ) : (
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="border-b border-ink/10 text-left text-[0.7rem] uppercase tracking-[0.18em] text-ink/50">
-                    <th className="px-5 py-3">Version</th>
-                    <th className="px-5 py-3">Published</th>
-                    <th className="px-5 py-3">Status</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {releases.map((r) => (
-                    <tr key={r.version} className="border-b border-ink/5 last:border-0">
-                      <td className="px-5 py-3 font-mono text-ink">{r.version}</td>
-                      <td className="px-5 py-3 text-ink/70">{fmt(r.publishedAt)}</td>
-                      <td className="px-5 py-3">
-                        {r.current ? (
-                          <span className="inline-flex items-center rounded-full bg-sea/10 px-3 py-1 text-[0.7rem] uppercase tracking-[0.16em] text-sea">
-                            In use
-                          </span>
-                        ) : (
-                          <span className="text-ink/40">—</span>
-                        )}
-                      </td>
-                    </tr>
+          <section aria-labelledby="version-history" className="mt-12">
+            <h3 id="version-history" className="font-serif text-lg text-ink">
+              Recent CMS releases
+            </h3>
+            <p className="mt-1 text-sm text-ink/60">
+              The most recent publications of <Mono>{packageName}</Mono>, newest first, with their
+              publish dates.
+            </p>
+            <div className="mt-4 border border-ink/10 bg-white">
+              {history.length === 0 ? (
+                <p className="p-5 text-sm text-ink/50">Release history unavailable right now.</p>
+              ) : (
+                <ul aria-label="Recent CMS releases">
+                  {history.map((r) => (
+                    <li
+                      key={r.version}
+                      className="flex flex-wrap items-center gap-x-4 gap-y-1 border-b border-ink/5 px-5 py-3 text-sm last:border-0"
+                    >
+                      <span className="min-w-[7rem] font-mono text-ink [overflow-wrap:anywhere]">
+                        {r.version}
+                      </span>
+                      <span className="text-ink/70">{fmt(r.publishedAt)}</span>
+                      <span className="flex flex-wrap gap-2 sm:ml-auto">
+                        {r.prerelease && <span className={`${PILL} bg-ink/5 text-ink/60`}>Prerelease</span>}
+                        {r.current && <span className={`${PILL} bg-sea/10 text-sea`}>In use</span>}
+                      </span>
+                    </li>
                   ))}
-                </tbody>
-              </table>
-            )}
-          </div>
+                </ul>
+              )}
+            </div>
+          </section>
         </>
       )}
     </div>