chore: show compatibility headers when shift clicking version

Author: Miodec

frontend/src/ts/ape/adapters/ts-rest-adapter.ts

@@ -15,6 +15,8 @@ import * as Notifications from "../../elements/notifications";
 
 let bannerShownThisSession = false;
 
+export let lastSeenServerCompatibility: number | undefined;
+
 function timeoutSignal(ms: number): AbortSignal {
   const ctrl = new AbortController();
   setTimeout(() => ctrl.abort(new Error("request timed out")), ms);
@@ -52,6 +54,11 @@ function buildApi(timeout: number): (args: ApiFetcherArgs) => Promise<{
       const compatibilityCheckHeader = response.headers.get(
         COMPATIBILITY_CHECK_HEADER
       );
+
+      if (compatibilityCheckHeader !== null) {
+        lastSeenServerCompatibility = parseInt(compatibilityCheckHeader);
+      }
+
       if (compatibilityCheckHeader !== null && !bannerShownThisSession) {
         const backendCheck = parseInt(compatibilityCheckHeader);
         if (backendCheck !== COMPATIBILITY_CHECK) {

frontend/src/ts/event-handlers/footer.ts

@@ -7,6 +7,8 @@ import * as SupportPopup from "../modals/support";
 import * as ContactModal from "../modals/contact";
 import * as VersionHistoryModal from "../modals/version-history";
 import { envConfig } from "../constants/env-config";
+import { COMPATIBILITY_CHECK } from "@monkeytype/contracts";
+import { lastSeenServerCompatibility } from "../ape/adapters/ts-rest-adapter";
 
 document
   .querySelector("footer #commandLineMobileButton")
@@ -28,7 +30,17 @@ document
   ?.addEventListener("click", (e) => {
     const event = e as MouseEvent;
     if (event.shiftKey) {
-      alert(envConfig.clientVersion);
+      alert(
+        JSON.stringify(
+          {
+            clientVersion: envConfig.clientVersion,
+            clientCompatibility: COMPATIBILITY_CHECK,
+            lastSeenServerCompatibility,
+          },
+          null,
+          2
+        )
+      );
     } else {
       VersionHistoryModal.show();
     }