Adding a build stamp to better confirm deployments

Author: simonwarchol

src/components/main.tsx

@@ -6,6 +6,7 @@ import { StoryTitleBar } from "@/components/authoring/StoryTitleBar";
 import { MinervaLibraryPage } from "@/components/library/MinervaLibraryPage";
 import { PlaybackRouter } from "@/components/playback/PlaybackRouter";
 import { StoryReturnToLibraryBridge } from "@/components/StoryReturnToLibraryBridge";
+import { BuildStamp } from "@/components/shared/BuildStamp";
 import { FileHandler } from "@/components/shared/FileHandler";
 import type { LoadedSourceSummary, ValidObj } from "@/components/shared/Upload";
 import { Upload } from "@/components/shared/Upload";
@@ -1651,18 +1652,24 @@ const Main = (props: Props) => {
 
   if (props.demo_dicom_web || props.demo_url || hasAuthorShellSupport()) {
     return (
-      <StoryPersistenceRoot>
-        <LibraryOrAuthor {...props} />
-      </StoryPersistenceRoot>
+      <>
+        <StoryPersistenceRoot>
+          <LibraryOrAuthor {...props} />
+        </StoryPersistenceRoot>
+        <BuildStamp />
+      </>
     );
   } else {
     return (
-      <div>
-        <p>
-          Minerva needs a secure context (HTTPS or localhost). Serve this app
-          over HTTPS and reload.
-        </p>
-      </div>
+      <>
+        <div>
+          <p>
+            Minerva needs a secure context (HTTPS or localhost). Serve this app
+            over HTTPS and reload.
+          </p>
+        </div>
+        <BuildStamp />
+      </>
     );
   }
 };

src/components/shared/BuildStamp.tsx

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+const Stamp = styled.div`
+  position: fixed;
+  right: max(10px, env(safe-area-inset-right));
+  bottom: max(8px, env(safe-area-inset-bottom));
+  z-index: 99999;
+  pointer-events: none;
+  font-size: 10px;
+  line-height: 1.25;
+  font-weight: 400;
+  letter-spacing: 0.015em;
+  opacity: 0.28;
+  color: rgba(238, 238, 238, 0.85);
+`;
+
+function utcShort(iso: string): string | null {
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return null;
+  return new Date(t).toISOString().replace("T", " ").slice(0, 16);
+}
+
+/** Unobtrusive UTC build time so deployed previews are easy to tell apart from `main`/production. */
+const BuildStamp = () => {
+  const label = utcShort(
+    typeof __BUILD_TIME_ISO__ === "string" ? __BUILD_TIME_ISO__ : "",
+  );
+  if (!label) return null;
+  return (
+    <Stamp aria-hidden title={__BUILD_TIME_ISO__}>
+      Updated {label} UTC
+    </Stamp>
+  );
+};
+
+export { BuildStamp };

src/declaration.d.ts

@@ -9,6 +9,8 @@ declare module "deck.gl" {
 import "wicg-file-system-access";
 declare var showOpenFilePicker: ShowOpenFilePicker;
 declare global {
+  /** Set in `vite.config.js` via `define` on each bundle (dev restart / `vite build`). */
+  const __BUILD_TIME_ISO__: string;
   namespace Handle {
     type File = FileSystemFileHandle;
     type Dir = FileSystemDirectoryHandle;

vite.config.js

@@ -6,7 +6,14 @@ import { standardCssModules } from "vite-plugin-standard-css-modules";
 import { viteStaticCopy } from "vite-plugin-static-copy";
 import svgr from "vite-plugin-svgr";
 
+/** ISO UTC time baked into each bundle; override in CI with `VITE_APP_BUILD_TIME` (ISO-8601). */
+const BUILD_TIME_ISO =
+  process.env.VITE_APP_BUILD_TIME ?? new Date().toISOString();
+
 export default defineConfig({
+  define: {
+    __BUILD_TIME_ISO__: JSON.stringify(BUILD_TIME_ISO),
+  },
   assetsInclude: ["**/*.wasm"],
   worker: {
     format: "es",