Batch route search into two requests and gate old web versions

package.json

@@ -1,7 +1,7 @@
 {
   "name": "beacon-web",
   "private": true,
-  "version": "2.0.2",
+  "version": "2.0.3",
   "license": "AGPL-3.0-or-later",
   "type": "module",
   "scripts": {

src/App.tsx

@@ -16,6 +16,7 @@ import { ThemeProvider } from "./hooks/useTheme";
 import { useIsMobile } from "./hooks/useMediaQuery";
 import { AppShell } from "./components/AppShell";
 import { SplashScreen } from "./components/SplashScreen";
+import { VersionGate } from "./components/VersionGate";
 import { PacketList } from "./features/packets/PacketList";
 import { PacketAnalyzerDrawer } from "./features/packets/PacketAnalyzerDrawer";
 import { NodeTable } from "./features/nodes/NodeTable";
@@ -374,6 +375,7 @@ export function App() {
       <QueryClientProvider client={queryClient}>
         <ThemeProvider>
           <SplashScreen />
+          <VersionGate />
           <AppInner />
         </ThemeProvider>
       </QueryClientProvider>

src/api/client.ts

@@ -113,6 +113,17 @@ export function getPacketDetail(packetHash: string): Promise<PacketDetail> {
   return request(`/packets/${packetHash}`);
 }
 
+// /info: the oldest client versions this server accepts (null = no requirement) and its own version.
+export interface ServerInfo {
+  minAppVersion: string | null;
+  minWebVersion: string | null;
+  serverVersion: string;
+}
+
+export function getServerInfo(): Promise<ServerInfo> {
+  return request("/info");
+}
+
 export function getIatas(): Promise<IataCode[]> {
   return request("/iatas");
 }
@@ -215,21 +226,21 @@ export function getRouteEvidence(iata: string, pathKey: string, params: { range?
   return request(`/routes/${encodeURIComponent(iata)}/${encodeURIComponent(pathKey)}/observations`, params, signal);
 }
 
-// Search known routes for a path between two node hash prefixes within a single IATA. All three params
-// are required by the server.
-export function searchKnownRoutes(iata: string, from: string, to: string): Promise<KnownRoute[]> {
-  return request("/routes/search", { iata, from, to });
+// Route search between two node hash prefixes. iatas narrows the search; omitted means every IATA.
+// /routes/search returns routes within one IATA, /routes/cross routes that cross between two.
+const iataList = (iatas: string[] | undefined) => (iatas?.length ? iatas.join(",") : undefined);
+
+export function searchKnownRoutes(iatas: string[] | undefined, from: string, to: string, signal?: AbortSignal): Promise<KnownRoute[]> {
+  return request("/routes/search", { iatas: iataList(iatas), from, to }, signal);
 }
 
-// Search routes that cross IATA boundaries, from a hash in one IATA to a hash in another. All four
-// params are required by the server.
 export function searchCrossIATARoutes(
+  iatas: string[] | undefined,
   fromHash: string,
-  fromIata: string,
   toHash: string,
-  toIata: string,
+  signal?: AbortSignal,
 ): Promise<CrossIATARoute[]> {
-  return request("/routes/cross", { fromHash, fromIata, toHash, toIata });
+  return request("/routes/cross", { iatas: iataList(iatas), fromHash, toHash }, signal);
 }
 
 // Trace tags. /traces returns a bare array of per-tag summaries (ordered newest-heard first, cursor is

src/components/VersionGate.tsx

@@ -0,0 +1,44 @@
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { getServerInfo } from "../api/client";
+import { isBelowVersion } from "../lib/version";
+import { BeaconLogo } from "./BeaconLogo";
+
+// Blocks the app when the server needs a newer Beacon Web. Any failure to read /info lets it through.
+export function VersionGate({ currentVersion = __APP_VERSION__ }: { currentVersion?: string }) {
+  const { t } = useTranslation();
+  const { data } = useQuery({
+    queryKey: ["server-info"],
+    queryFn: getServerInfo,
+    retry: false,
+    staleTime: 60_000, // also throttles the refetch on focus
+    refetchOnWindowFocus: true,
+  });
+
+  const min = data?.minWebVersion;
+  if (!isBelowVersion(currentVersion, min)) return null;
+
+  return (
+    <div
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="version-gate-message"
+      className="fixed inset-0 z-[10000] flex items-center justify-center bg-bg-base px-4"
+    >
+      <div className="flex flex-col items-center gap-5 max-w-md text-center">
+        <BeaconLogo size={64} className="text-primary" />
+        <p id="version-gate-message" className="font-mono text-sm text-text-normal leading-relaxed">
+          {t("versionGate.message", { min, current: currentVersion })}
+        </p>
+        <button
+          type="button"
+          autoFocus
+          onClick={() => window.location.reload()}
+          className="h-8 text-xs font-mono px-4 rounded-sm border border-primary-dim bg-primary/6 text-primary hover:bg-primary/15 cursor-pointer transition-colors"
+        >
+          {t("versionGate.reload")}
+        </button>
+      </div>
+    </div>
+  );
+}