From 711b68d5a3a998e64ff518df46898befb7803d54 Mon Sep 17 00:00:00 2001
From: munisp <155237317+munisp@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:30:38 -0400
Subject: [PATCH 01/14] Phase 17 (B1): add shared geo helpers + CSP parser with
 unit tests

---
 client/src/components/Map.test.tsx     |  25 +++++
 client/src/hooks/useFluvioFeed.test.ts |  33 +++++++
 client/src/lib/geo.test.ts             | 116 +++++++++++++++++++++++
 client/src/lib/geo.ts                  | 126 +++++++++++++++++++++++++
 server/_core/csp.test.ts               |  29 ++++++
 server/_core/csp.ts                    |  16 ++++
 6 files changed, 345 insertions(+)
 create mode 100644 client/src/components/Map.test.tsx
 create mode 100644 client/src/hooks/useFluvioFeed.test.ts
 create mode 100644 client/src/lib/geo.test.ts
 create mode 100644 client/src/lib/geo.ts
 create mode 100644 server/_core/csp.test.ts
 create mode 100644 server/_core/csp.ts

diff --git a/client/src/components/Map.test.tsx b/client/src/components/Map.test.tsx
new file mode 100644
index 00000000..b6e2003a
--- /dev/null
+++ b/client/src/components/Map.test.tsx
@@ -0,0 +1,25 @@
+// @vitest-environment jsdom
+/**
+ * Phase 17 (G8) — MapView smoke test: without a configured Google Maps key
+ * the component must fail fast into the honest "Map unavailable" fallback
+ * instead of hanging on a spinner (and must never attempt a script injection).
+ */
+import { describe, it, expect } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { MapView } from "./Map";
+
+describe("MapView", () => {
+  it("renders the honest fallback when no maps API key is configured", async () => {
+    render(<MapView />);
+    await waitFor(() => {
+      expect(screen.getByText("Map unavailable")).toBeTruthy();
+    });
+    // Fail-closed: no runtime CDN script was injected into the document
+    expect(document.querySelector("script[src*='maps/api/js']")).toBeNull();
+  });
+
+  it("exposes an accessible map region while loading", () => {
+    const { container } = render(<MapView />);
+    expect(container.querySelector('[role="region"][aria-label="Interactive map"]')).toBeTruthy();
+  });
+});
diff --git a/client/src/hooks/useFluvioFeed.test.ts b/client/src/hooks/useFluvioFeed.test.ts
new file mode 100644
index 00000000..f11f8ff4
--- /dev/null
+++ b/client/src/hooks/useFluvioFeed.test.ts
@@ -0,0 +1,33 @@
+/**
+ * Phase 17 (G4/G8) — WS URL resolution tests for useFluvioFeed.
+ */
+import { describe, it, expect } from "vitest";
+import { resolveFluvioWsUrl } from "./useFluvioFeed";
+
+const httpsLoc = { protocol: "https:", host: "trade.gov.ng" };
+const httpLoc = { protocol: "http:", host: "localhost:5173" };
+
+describe("resolveFluvioWsUrl", () => {
+  it("honours an explicit env URL", () => {
+    expect(resolveFluvioWsUrl("wss://fluvio.internal/ws", httpsLoc)).toBe("wss://fluvio.internal/ws");
+  });
+
+  it('"off" disables the feed (honest disabled state)', () => {
+    expect(resolveFluvioWsUrl("off", httpsLoc)).toBeNull();
+    expect(resolveFluvioWsUrl("OFF", httpsLoc)).toBeNull();
+  });
+
+  it("defaults to same-origin wss on https (never ws://localhost)", () => {
+    expect(resolveFluvioWsUrl(undefined, httpsLoc)).toBe("wss://trade.gov.ng/ws");
+  });
+
+  it("uses ws: only on http dev origins", () => {
+    expect(resolveFluvioWsUrl("", httpLoc)).toBe("ws://localhost:5173/ws");
+  });
+
+  it("never returns a hardcoded localhost URL in production", () => {
+    const url = resolveFluvioWsUrl(undefined, httpsLoc);
+    expect(url).not.toContain("localhost");
+    expect(url!.startsWith("wss://")).toBe(true);
+  });
+});
diff --git a/client/src/lib/geo.test.ts b/client/src/lib/geo.test.ts
new file mode 100644
index 00000000..bb5b090d
--- /dev/null
+++ b/client/src/lib/geo.test.ts
@@ -0,0 +1,116 @@
+/**
+ * Phase 17 (G8) — unit tests for the shared geospatial helpers that back the
+ * map components (GeospatialPortal 2D/3D, AIS layer, track replay, heatmap).
+ */
+import { describe, it, expect } from "vitest";
+import {
+  toMapVessel,
+  vesselsToGeoJSON,
+  trackToLineString,
+  isFeedStale,
+  lowDataRasterStyle,
+  resolveMapStyleUrl,
+  resolveCesiumIonToken,
+  VesselTrackingRow,
+} from "./geo";
+
+const row: VesselTrackingRow = {
+  id: 1,
+  mmsi: "657123456",
+  vesselName: "MT LAGOS STAR",
+  imoNumber: "9074729",
+  latitude: 6.42,
+  longitude: 3.31,
+  speed: 12.5,
+  heading: 270,
+  destinationPort: "NGAPP",
+  eta: new Date("2026-01-01T00:00:00Z"),
+  cargoType: "container",
+  flagCountry: "NGA",
+  recordedAt: new Date("2025-12-31T12:00:00Z"),
+};
+
+describe("toMapVessel", () => {
+  it("maps a DB row to a GeoVessel with ISO eta", () => {
+    const v = toMapVessel(row);
+    expect(v).not.toBeNull();
+    expect(v!.mmsi).toBe("657123456");
+    expect(v!.lat).toBeCloseTo(6.42);
+    expect(v!.eta).toBe("2026-01-01T00:00:00.000Z");
+  });
+
+  it("drops rows with out-of-range coordinates (fail-closed)", () => {
+    expect(toMapVessel({ ...row, latitude: 91 })).toBeNull();
+    expect(toMapVessel({ ...row, longitude: -181 })).toBeNull();
+    expect(toMapVessel({ ...row, latitude: NaN })).toBeNull();
+  });
+});
+
+describe("vesselsToGeoJSON", () => {
+  it("builds a FeatureCollection keyed [lng, lat]", () => {
+    const fc = vesselsToGeoJSON([toMapVessel(row)!]);
+    expect(fc.type).toBe("FeatureCollection");
+    expect(fc.features[0].geometry.coordinates).toEqual([3.31, 6.42]);
+    expect(fc.features[0].properties.mmsi).toBe("657123456");
+  });
+});
+
+describe("trackToLineString", () => {
+  it("returns a LineString for 2+ valid points", () => {
+    const line = trackToLineString([
+      { latitude: 6.0, longitude: 3.0 },
+      { latitude: 6.4, longitude: 3.3 },
+      { latitude: NaN, longitude: 3.4 }, // dropped
+      { latitude: 6.45, longitude: 3.39 },
+    ]);
+    expect(line).not.toBeNull();
+    expect(line!.geometry.coordinates).toHaveLength(3);
+  });
+
+  it("returns null for fewer than 2 valid points (honest no-track)", () => {
+    expect(trackToLineString([{ latitude: 6.0, longitude: 3.0 }])).toBeNull();
+    expect(trackToLineString([])).toBeNull();
+  });
+});
+
+describe("isFeedStale", () => {
+  const now = Date.parse("2026-01-01T00:00:00Z");
+  it("flags missing/old data as stale", () => {
+    expect(isFeedStale(null, now)).toBe(true);
+    expect(isFeedStale("2025-12-31T23:57:00Z", now)).toBe(true);
+  });
+  it("accepts fresh data", () => {
+    expect(isFeedStale("2025-12-31T23:59:30Z", now)).toBe(false);
+  });
+});
+
+describe("lowDataRasterStyle", () => {
+  it("is a self-contained raster style (no remote style JSON fetch)", () => {
+    const style = lowDataRasterStyle();
+    expect(style.version).toBe(8);
+    expect(style.sources.osm.type).toBe("raster");
+    expect(style.layers).toHaveLength(1);
+  });
+});
+
+describe("resolveMapStyleUrl", () => {
+  it("uses the env URL when it is a valid http(s) URL", () => {
+    expect(resolveMapStyleUrl("https://tiles.internal/styles/liberty")).toBe(
+      "https://tiles.internal/styles/liberty"
+    );
+  });
+  it("falls back to OpenFreeMap for empty/garbage values", () => {
+    expect(resolveMapStyleUrl(undefined)).toContain("openfreemap");
+    expect(resolveMapStyleUrl("javascript:alert(1)")).toContain("openfreemap");
+  });
+});
+
+describe("resolveCesiumIonToken", () => {
+  it("returns null when unset — never an empty-string token", () => {
+    expect(resolveCesiumIonToken(undefined)).toBeNull();
+    expect(resolveCesiumIonToken("   ")).toBeNull();
+  });
+  it("returns a configured token", () => {
+    expect(resolveCesiumIonToken(" tok123 ")).toBe("tok123");
+  });
+});
diff --git a/client/src/lib/geo.ts b/client/src/lib/geo.ts
new file mode 100644
index 00000000..e7b39736
--- /dev/null
+++ b/client/src/lib/geo.ts
@@ -0,0 +1,126 @@
+/**
+ * Phase 17 — shared geospatial helpers (pure, unit-tested).
+ *
+ * Fail-closed doctrine: every helper returns explicit "unavailable" signals
+ * (null / empty / stale flags) instead of fabricating coordinates. Map style
+ * and tile origins are env-driven so operators can point at a same-origin
+ * tile proxy in sovereign deployments (see CSP_*_EXTRA server env vars).
+ */
+
+export interface GeoVessel {
+  id: string;
+  name: string;
+  mmsi: string;
+  imo: string;
+  lat: number;
+  lng: number;
+  heading: number;
+  speed: number;
+  status: string;
+  cargo_type: string;
+  declaration_ref?: string;
+  eta?: string;
+  destination_port?: string;
+}
+
+/** Row shape returned by trpc.geospatial.listVessels / getVesselTrack. */
+export interface VesselTrackingRow {
+  id: number;
+  mmsi: string;
+  vesselName: string | null;
+  imoNumber: string | null;
+  latitude: number;
+  longitude: number;
+  speed: number | null;
+  heading: number | null;
+  destinationPort: string | null;
+  eta: Date | string | null;
+  cargoType: string | null;
+  flagCountry: string | null;
+  recordedAt: Date | string;
+}
+
+/** Convert a DB vessel row to a map vessel; invalid coordinates are dropped. */
+export function toMapVessel(row: VesselTrackingRow): GeoVessel | null {
+  if (!Number.isFinite(row.latitude) || !Number.isFinite(row.longitude)) return null;
+  if (Math.abs(row.latitude) > 90 || Math.abs(row.longitude) > 180) return null;
+  return {
+    id: String(row.id),
+    name: row.vesselName ?? row.mmsi,
+    mmsi: row.mmsi,
+    imo: row.imoNumber ?? "",
+    lat: row.latitude,
+    lng: row.longitude,
+    heading: row.heading ?? 0,
+    speed: row.speed ?? 0,
+    status: "underway",
+    cargo_type: row.cargoType ?? "unknown",
+    declaration_ref: row.destinationPort ?? undefined,
+    destination_port: row.destinationPort ?? undefined,
+    eta: row.eta ? new Date(row.eta).toISOString() : undefined,
+  };
+}
+
+export function vesselsToGeoJSON(vessels: GeoVessel[]) {
+  return {
+    type: "FeatureCollection" as const,
+    features: vessels.map(v => ({
+      type: "Feature" as const,
+      geometry: { type: "Point" as const, coordinates: [v.lng, v.lat] },
+      properties: { ...v },
+    })),
+  };
+}
+
+/** Vessel track (oldest → newest) as a GeoJSON LineString for replay overlays. */
+export function trackToLineString(
+  rows: Array<{ latitude: number; longitude: number }>,
+) {
+  const coords = rows
+    .filter(r => Number.isFinite(r.latitude) && Number.isFinite(r.longitude))
+    .map(r => [r.longitude, r.latitude] as [number, number]);
+  if (coords.length < 2) return null;
+  return {
+    type: "Feature" as const,
+    geometry: { type: "LineString" as const, coordinates: coords },
+    properties: {},
+  };
+}
+
+/** Honest staleness: true when the last AIS update is older than maxAgeMs. */
+export function isFeedStale(lastUpdated: Date | string | null, now = Date.now(), maxAgeMs = 90_000): boolean {
+  if (!lastUpdated) return true;
+  const t = new Date(lastUpdated).getTime();
+  if (!Number.isFinite(t)) return true;
+  return now - t > maxAgeMs;
+}
+
+/** A raster-only MapLibre style for low-bandwidth / reduced-data mode. */
+export function lowDataRasterStyle(tileUrl = "https://tile.openstreetmap.org/{z}/{x}/{y}.png") {
+  return {
+    version: 8 as const,
+    name: "low-data-raster",
+    sources: {
+      osm: {
+        type: "raster" as const,
+        tiles: [tileUrl],
+        tileSize: 256,
+        attribution: "© OpenStreetMap contributors",
+      },
+    },
+    layers: [{ id: "osm", type: "raster" as const, source: "osm" }],
+  };
+}
+
+/** Resolve the 2D vector style URL; env first, OpenFreeMap liberty as default. */
+export function resolveMapStyleUrl(envValue: string | undefined): string {
+  const raw = (envValue ?? "").trim();
+  if (/^https?:\/\/.+/.test(raw)) return raw;
+  return "https://tiles.openfreemap.org/styles/liberty";
+}
+
+/** Resolve the Cesium Ion token; empty means "Ion disabled" — never send empty-token requests. */
+export function resolveCesiumIonToken(envValue: string | undefined): string | null {
+  const raw = (envValue ?? "").trim();
+  return raw.length > 0 ? raw : null;
+}
diff --git a/server/_core/csp.test.ts b/server/_core/csp.test.ts
new file mode 100644
index 00000000..e84434fd
--- /dev/null
+++ b/server/_core/csp.test.ts
@@ -0,0 +1,29 @@
+/**
+ * Phase 17 (G1/G8) — CSP origin whitelist parsing tests.
+ */
+import { describe, it, expect } from "vitest";
+import { parseCspOrigins } from "./csp";
+
+describe("parseCspOrigins", () => {
+  it("parses comma-separated https origins", () => {
+    expect(parseCspOrigins("https://tiles.openfreemap.org, https://tile.openstreetmap.org")).toEqual([
+      "https://tiles.openfreemap.org",
+      "https://tile.openstreetmap.org",
+    ]);
+  });
+
+  it("returns empty for unset/blank env (fail-closed)", () => {
+    expect(parseCspOrigins(undefined)).toEqual([]);
+    expect(parseCspOrigins("   ")).toEqual([]);
+  });
+
+  it("drops wildcards, http, and malformed entries — a typo can never widen CSP", () => {
+    expect(parseCspOrigins("*, https://ok.example.com, http://insecure.example.com, notaurl")).toEqual([
+      "https://ok.example.com",
+    ]);
+  });
+
+  it("allows data:/blob: tokens for inline assets", () => {
+    expect(parseCspOrigins("data:,blob:")).toEqual(["data:", "blob:"]);
+  });
+});
diff --git a/server/_core/csp.ts b/server/_core/csp.ts
new file mode 100644
index 00000000..c94092ea
--- /dev/null
+++ b/server/_core/csp.ts
@@ -0,0 +1,16 @@
+/**
+ * Phase 17 (G1) — env-driven CSP origin whitelist parsing.
+ *
+ * Production CSP stays fail-closed (same-origin only) unless operators
+ * explicitly whitelist tile/style/glyph origins via:
+ *   CSP_SCRIPT_SRC_EXTRA / CSP_CONNECT_SRC_EXTRA / CSP_IMG_SRC_EXTRA
+ * (comma-separated https origins). Malformed entries are dropped so a typo
+ * can never widen the policy to a wildcard.
+ */
+
+export function parseCspOrigins(raw: string | undefined): string[] {
+  return (raw ?? "")
+    .split(",")
+    .map(s => s.trim())
+    .filter(s => /^https:\/\/[a-z0-9.-]+(?::\d+)?(\/[^\s,]*)?$/i.test(s) || s === "data:" || s === "blob:");
+}

From 75ef58cb0ee172cc15626f2d97ee259979089bee Mon Sep 17 00:00:00 2001
From: munisp <155237317+munisp@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:31:48 -0400
Subject: [PATCH 02/14] Phase 17 (G4): env-driven Fluvio WS URL with honest
 disabled state

---
 client/src/hooks/useFluvioFeed.ts | 32 ++++++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/client/src/hooks/useFluvioFeed.ts b/client/src/hooks/useFluvioFeed.ts
index 71cf50cc..d1dc6263 100644
--- a/client/src/hooks/useFluvioFeed.ts
+++ b/client/src/hooks/useFluvioFeed.ts
@@ -42,11 +42,31 @@ export interface FluvioEvent {
   payload: VesselPosition | Record<string, unknown>;
 }
 
-export type FeedStatus = "connecting" | "connected" | "paused" | "reconnecting" | "error";
+export type FeedStatus = "connecting" | "connected" | "paused" | "reconnecting" | "error" | "disabled";
 
 // ── Constants ─────────────────────────────────────────────────────────────────
 
-const FLUVIO_WS_URL = "ws://localhost:8085/ws";
+/**
+ * Phase 17 (G4): the Fluvio WS endpoint is env-driven, never hardcoded to
+ * localhost. Resolution order:
+ *   1. VITE_FLUVIO_WS_URL (full ws:// or wss:// URL; "off" disables the feed)
+ *   2. same-origin default: wss://<host>/ws (ws: on http: dev origins)
+ * When disabled, the hook reports status "disabled" and never opens a socket.
+ */
+export function resolveFluvioWsUrl(
+  envValue: string | undefined,
+  locationLike?: { protocol: string; host: string },
+): string | null {
+  const raw = (envValue ?? "").trim();
+  if (/^off$/i.test(raw)) return null;
+  if (/^wss?:\/\/.+/.test(raw)) return raw;
+  const loc = locationLike ?? (typeof window !== "undefined" ? window.location : undefined);
+  if (!loc) return null;
+  const scheme = loc.protocol === "https:" ? "wss:" : "ws:";
+  return `${scheme}//${loc.host}/ws`;
+}
+
+const FLUVIO_WS_URL = resolveFluvioWsUrl(import.meta.env.VITE_FLUVIO_WS_URL);
 const MAX_EVENTS = 500;           // ring buffer size
 const RECONNECT_DELAY_MS = 3000;  // 3 s between reconnect attempts
 const MAX_RECONNECT_ATTEMPTS = 10;
@@ -65,7 +85,7 @@ export function useFluvioFeed(options?: {
   } = options ?? {};
 
   const [events, setEvents] = useState<FluvioEvent[]>([]);
-  const [status, setStatus] = useState<FeedStatus>("connecting");
+  const [status, setStatus] = useState<FeedStatus>(FLUVIO_WS_URL ? "connecting" : "disabled");
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
   const [reconnectCount, setReconnectCount] = useState(0);
 
@@ -77,6 +97,11 @@ export function useFluvioFeed(options?: {
   const connect = useCallback(() => {
     if (!mountedRef.current) return;
     if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) return;
+    if (!FLUVIO_WS_URL) {
+      // Honest disabled state: feed not configured for this deployment.
+      setStatus("disabled");
+      return;
+    }
 
     setStatus("connecting");
 
@@ -168,6 +193,7 @@ export function useFluvioFeed(options?: {
     events,
     vesselPositions,
     status,
+    feedUrl: FLUVIO_WS_URL,
     lastUpdated,
     reconnectCount,
     pause,

From 4979fd57c1eb16111042a99b5e30d97817174021 Mon Sep 17 00:00:00 2001
From: munisp <155237317+munisp@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:34:09 -0400
Subject: [PATCH 03/14] Phase 17 (G9/G12 + heatmap lib): Map.tsx visualization
 library, env mapId, aria region

---
 client/src/components/Map.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Map.tsx b/client/src/components/Map.tsx
index d3c2465c..265f2af5 100644
--- a/client/src/components/Map.tsx
+++ b/client/src/components/Map.tsx
@@ -37,7 +37,7 @@
  * - Standalone service; manually apply results to map.
  * const geocoder = new google.maps.Geocoder();
  * geocoder.geocode({ address: "New York" }, (results, status) => {
- *   if (status === "OK" && results[0]) {
+ *   if (status === "OK" && results[0].geometry) {
  *     map.setCenter(results[0].geometry.location);
  *     new google.maps.marker.AdvancedMarkerElement({
  *       map,
@@ -101,7 +101,10 @@ function loadMapScript(): Promise<void> {
       return;
     }
     const script = document.createElement("script");
-    script.src = `${MAPS_PROXY_URL}/maps/api/js?key=${API_KEY}&v=weekly&libraries=marker,places,geocoding,geometry`;
+    // visualization is required by the heatmap layers in PortHeatmap /
+    // CargoTrackingMap — it was missing, so google.maps.visualization was
+    // undefined at runtime.
+    script.src = `${MAPS_PROXY_URL}/maps/api/js?key=${API_KEY}&v=weekly&libraries=marker,places,geocoding,geometry,visualization`;
     script.async = true;
     script.crossOrigin = "anonymous";
     script.onload = () => {
@@ -152,7 +155,8 @@ export function MapView({
       fullscreenControl: true,
       zoomControl: true,
       streetViewControl: true,
-      mapId: "DEMO_MAP_ID",
+      // G9: mapId is operator-configurable; DEMO_MAP_ID only as a dev default.
+      mapId: import.meta.env.VITE_GOOGLE_MAPS_MAP_ID || "DEMO_MAP_ID",
     });
     if (onMapReady) {
       onMapReady(map.current);
@@ -173,6 +177,12 @@ export function MapView({
   }
 
   return (
-    <div ref={mapContainer} className={cn("w-full h-[500px]", className)} />
+    // G12: expose the map region to assistive technology.
+    <div
+      ref={mapContainer}
+      role="region"
+      aria-label="Interactive map"
+      className={cn("w-full h-[500px]", className)}
+    />
   );
 }

From 9309b1ec63e4bf87688067fcf40aea9e9008e4f0 Mon Sep 17 00:00:00 2001
From: munisp <155237317+munisp@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:35:43 -0400
Subject: [PATCH 04/14] Phase 17 (G5/G8): vite cesium bundling plugins + vitest
 tsx include

---
 vite.config.ts   | 37 ++++++++++++++++++++++++++++++++++++-
 vitest.config.ts |  5 ++++-
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index e621b450..da8a1b13 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,6 +2,38 @@ import react from "@vitejs/plugin-react";
 import path from "node:path";
 import { defineConfig, type PluginOption } from "vite";
 import tailwindcss from "@tailwindcss/vite";
+// Phase 17 (G5): Cesium is a pinned npm dependency bundled at build time
+// (static assets copied into dist) — no runtime cesium.com CDN injection.
+import cesium from "vite-plugin-cesium";
+import fs from "node:fs";
+
+// Strip vite-plugin-cesium's eager <script src="/cesium/Cesium.js"> + CSS injection:
+// the GeospatialPortal lazy-loads those same-origin assets only when the user
+// opens the 3D view (Phase 17 #8 — low-bandwidth pages must not pay for Cesium).
+const cesiumLazyHtmlPlugin: PluginOption = {
+  name: "cesium-lazy-html",
+  enforce: "post",
+  transformIndexHtml(html) {
+    return html
+      .replace(/\s*<script[^>]*src="[^"]*cesium\/Cesium\.js"[^>]*><\/script>/, "")
+      .replace(/\s*<link[^>]*href="[^"]*cesium\/Widgets\/widgets\.css"[^>]*>/, "");
+  },
+};
+
+// vite-plugin-cesium miscomputes outDir when build.outDir is an absolute path
+// (this repo sets an absolute outDir), so its asset copy lands in a bogus
+// nested dir. This companion plugin copies the prebuilt Cesium assets into the
+// real outDir at the same /cesium/ base URL the plugin references.
+const cesiumAssetsPlugin: PluginOption = {
+  name: "cesium-assets-outdir-fix",
+  apply: "build",
+  closeBundle() {
+    const src = path.resolve(import.meta.dirname, "node_modules/cesium/Build/Cesium");
+    const dest = path.resolve(import.meta.dirname, "dist/public/cesium");
+    if (!fs.existsSync(src)) return;
+    fs.cpSync(src, dest, { recursive: true });
+  },
+};
 
 // B15: only ship the umami analytics tag when VITE_ANALYTICS_ENDPOINT is a real
 // http(s) URL; otherwise strip the %VITE_ANALYTICS_*% placeholders from the HTML.
@@ -25,7 +57,7 @@ const analyticsPlugin: PluginOption = {
   },
 };
 
-const plugins: PluginOption[] = [react(), tailwindcss(), analyticsPlugin];
+const plugins: PluginOption[] = [react(), tailwindcss(), analyticsPlugin, cesium(), cesiumLazyHtmlPlugin, cesiumAssetsPlugin];
 
 export default defineConfig({
   plugins,
@@ -42,6 +74,9 @@ export default defineConfig({
   build: {
     outDir: path.resolve(import.meta.dirname, "dist/public"),
     emptyOutDir: true,
+    // Note: MapLibre splits into a lazy chunk automatically (GeospatialPortal
+    // is lazy-routed); Cesium ships as prebuilt same-origin assets under
+    // /cesium/ loaded on demand — see the cesium plugins above.
   },
   server: {
     host: true,
diff --git a/vitest.config.ts b/vitest.config.ts
index 139e954e..3fbbe3be 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,9 +1,12 @@
 import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
 import path from "path";
 
 const templateRoot = path.resolve(import.meta.dirname);
 
 export default defineConfig({
+  // Phase 17 (G8): react plugin so *.test.tsx component tests transform JSX.
+  plugins: [react()],
   resolve: {
     alias: {
       "@": path.resolve(templateRoot, "client", "src"),
@@ -16,7 +19,7 @@ export default defineConfig({
     // database (full drizzle migration chain) before any test file loads;
     // DB-gated suites skip cleanly when PostgreSQL is unavailable.
     globalSetup: ["server/testutils/pgGlobalSetup.ts"],
-    include: ["server/**/*.test.ts", "client/src/**/*.test.ts", "scripts/seed/**/*.test.ts"],
+    include: ["server/**/*.test.ts", "client/src/**/*.test.{ts,tsx}", "scripts/seed/**/*.test.ts"],
     exclude: ["**/node_modules/**", "**/dist/**", "**/e2e/**"],
     testTimeout: 60_000, // DB clone + first heavy migration chain
     hookTimeout: 30_000,

From 76039353c8479a90ae02206c36efbe7477d151ad Mon Sep 17 00:00:00 2001
From: munisp <155237317+munisp@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:37:10 -0400
Subject: [PATCH 05/14] Phase 17 (G10): CacheFirst map-tile caching in service
 worker

---
 client/public/sw.js | 45 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/client/public/sw.js b/client/public/sw.js
index 0c0fa01f..e0abd182 100644
--- a/client/public/sw.js
+++ b/client/public/sw.js
@@ -23,7 +23,7 @@ self.addEventListener('install', (event) => {
 self.addEventListener('activate', (event) => {
   event.waitUntil(
     caches.keys().then((keys) =>
-      Promise.all(keys.filter((k) => k !== CACHE_NAME && k !== OFFLINE_QUEUE_NAME).map((k) => caches.delete(k)))
+      Promise.all(keys.filter((k) => ![CACHE_NAME, OFFLINE_QUEUE_NAME, TILE_CACHE_NAME].includes(k)).map((k) => caches.delete(k)))
     ).then(() => self.clients.claim())
   );
 });
@@ -36,10 +36,53 @@ self.addEventListener('message', (event) => {
 });
 
 // ─── FETCH ───────────────────────────────────────────────────────────────────
+// Phase 17 (G10): CacheFirst map-tile caching (pattern from hydrogenTransport
+// PWA). Only well-known open tile origins are cached — no arbitrary origins.
+const TILE_CACHE_NAME = 'tradegateway-tiles-v1';
+const TILE_ORIGINS = [
+  'https://tile.openstreetmap.org',
+  'https://tiles.openfreemap.org',
+  'https://basemaps.cartocdn.com',
+];
+const TILE_CACHE_MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000; // 7 days
+
 self.addEventListener('fetch', (event) => {
   const { request } = event;
   const url = new URL(request.url);
 
+  // ── Map tiles/styles/glyphs: cache-first with freshness cap ──────────────
+  if (request.method === 'GET' && TILE_ORIGINS.some((o) => url.origin === o)) {
+    event.respondWith(
+      caches.open(TILE_CACHE_NAME).then(async (cache) => {
+        const cached = await cache.match(request);
+        if (cached) {
+          const fetchedAt = Number(cached.headers.get('X-SW-Cached-At') || 0);
+          if (Date.now() - fetchedAt < TILE_CACHE_MAX_AGE_MS) return cached;
+        }
+        try {
+          const response = await fetch(request);
+          if (response.ok) {
+            const headers = new Headers(response.headers);
+            headers.set('X-SW-Cached-At', String(Date.now()));
+            const stamped = new Response(response.body, {
+              status: response.status,
+              statusText: response.statusText,
+              headers,
+            });
+            cache.put(request, stamped.clone());
+            return stamped;
+          }
+          // Network answered but failed: fall back to stale tile if present
+          return cached || response;
+        } catch {
+          // Offline: serve the cached tile or an honest 503 — never a fake tile
+          return cached || new Response('tile unavailable offline', { status: 503 });
+        }
+      })
+    );
+    return;
+  }
+
   // Skip cross-origin requests
   if (url.origin !== self.location.origin) return;
 

From d0023d9bd44fff0641cb7ea9b09bf5d017d570dc Mon Sep 17 00:00:00 2001
From: munisp <155237317+munisp@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:37:52 -0400
Subject: [PATCH 06/14] Phase 17: document map/CSP/WS env vars in .env.example

---
 .env.example | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/.env.example b/.env.example
index 04149eb9..d954c544 100644
--- a/.env.example
+++ b/.env.example
@@ -94,6 +94,17 @@ WAZUH_PASSWORD=
 # ── OPTIONAL: MAPS ───────────────────────────────────────────────────────────
 # Google Maps is proxied through Manus — no API key required.
 # The VITE_FRONTEND_FORGE_API_KEY handles map authentication automatically.
+# VITE_GOOGLE_MAPS_MAP_ID — Google mapId (defaults to DEMO_MAP_ID when unset).
+#
+# Phase 17 — bundled MapLibre/Cesium geospatial portal (/app/geo/portal):
+# VITE_MAP_STYLE_URL=https://tiles.openfreemap.org/styles/liberty   # 2D vector style (or your same-origin tile proxy)
+# VITE_CESIUM_TOKEN=            # Cesium Ion token; UNSET = Ion-free OSM imagery + ellipsoid terrain (no Ion requests)
+# VITE_FLUVIO_WS_URL=           # AIS/declaration WS feed; unset = wss://<host>/ws; "off" = disabled
+#
+# Production CSP (fail-closed by default). Whitelist ONLY the tile origins in use:
+# CSP_CONNECT_SRC_EXTRA=https://tiles.openfreemap.org,https://tile.openstreetmap.org
+# CSP_SCRIPT_SRC_EXTRA=     # only if a maps script must load from another origin
+# CSP_IMG_SRC_EXTRA=        # raster tile origins if img-src is ever tightened
 
 # ── NODE ENVIRONMENT ─────────────────────────────────────────────────────────
 NODE_ENV=production

From e6de2ab42b678c2795fbf4d678e6899cbe4f4c6c Mon Sep 17 00:00:00 2001
From: munisp <155237317+munisp@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:39:10 -0400
Subject: [PATCH 07/14] Phase 17 (G5): pin maplibre-gl 4.7.1 + cesium 1.117.0
 as bundled deps

---
 package.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2c01d780..418426a9 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "@types/ws": "^8.18.1",
     "axios": "^1.16.0",
     "bcryptjs": "^3.0.3",
+    "cesium": "1.117.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -103,6 +104,7 @@
     "jose": "6.1.0",
     "kafkajs": "^2.2.4",
     "lucide-react": "^0.453.0",
+    "maplibre-gl": "4.7.1",
     "multer": "^2.2.0",
     "nanoid": "^5.1.16",
     "next-themes": "^0.4.6",
@@ -139,6 +141,8 @@
     "@playwright/test": "^1.58.2",
     "@tailwindcss/typography": "^0.5.15",
     "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/react": "16.3.3",
     "@types/cors": "^2.8.19",
     "@types/express": "4.17.21",
     "@types/google.maps": "^3.58.1",
@@ -156,6 +160,7 @@
     "drizzle-kit": "^0.31.4",
     "esbuild": "^0.28.1",
     "js-yaml": "^5.0.0",
+    "jsdom": "26.1.0",
     "playwright": "^1.58.2",
     "pnpm": "^11.20.0",
     "postcss": "^8.5.20",
@@ -165,7 +170,8 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "5.9.3",
     "vite": "^8.0.16",
+    "vite-plugin-cesium": "1.2.23",
     "vitest": "^4.1.5"
   },
   "packageManager": "pnpm@11.20.0"
-}
\ No newline at end of file
+}

From f08b191ac98518ccd5e2c3ecc3e70a6519366ef8 Mon Sep 17 00:00:00 2001
From: munisp <155237317+munisp@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:42:38 -0400
Subject: [PATCH 08/14] Phase 17 (G2/G3/G5/G13 + innovations #1-#4,#7,#8):
 rewrite GeospatialPortal with bundled engines

---
 client/src/pages/geo/GeospatialPortal.tsx | 697 ++++++++++++++--------
 1 file changed, 434 insertions(+), 263 deletions(-)

diff --git a/client/src/pages/geo/GeospatialPortal.tsx b/client/src/pages/geo/GeospatialPortal.tsx
index ddddaa58..708558ab 100644
--- a/client/src/pages/geo/GeospatialPortal.tsx
+++ b/client/src/pages/geo/GeospatialPortal.tsx
@@ -1,76 +1,40 @@
 /**
  * TradeGateway Geospatial Portal
- * ================================
- * Implements item 51: MapLibre, GeoLibre, and CesiumJS full integration
+ * ==============================
+ * Phase 17 rewrite — unified 2D/3D map surface (innovation #1).
  *
- * Features:
- *   - MapLibre GL JS: 2D cargo tracking, vessel positions, port overlays
- *   - GeoLibre: Open-source geospatial data layers (OpenFreeMap tiles)
- *   - CesiumJS: 3D port visualization, vessel approach paths, geofencing
- *   - Real-time vessel tracking via tRPC geospatial router
- *   - Geofence breach alerts
- *   - Apache Sedona spatial queries via backend
+ *   - 2D: MapLibre GL JS bundled as a pinned npm dependency (no runtime CDN).
+ *   - 3D: CesiumJS bundled via vite-plugin-cesium; Ion-free by default
+ *     (OSM imagery + ellipsoid terrain). Cesium Ion world terrain is enabled
+ *     ONLY when import.meta.env.VITE_CESIUM_TOKEN is set — an absent token
+ *     renders an honest notice instead of firing empty-token Ion requests.
+ *   - Live AIS vessel layer + track replay from trpc.geospatial.listVessels /
+ *     getVesselTrack with honest stale indicators.
+ *   - Declaration/congestion heatmap layer from trpc.geospatial.heatmapData.
+ *   - Route/ETA overlay: selected vessel → destination port leg + ETA panel.
+ *   - Low-bandwidth mode: raster-only tiles + reduced motion.
+ *
+ * Tiles/styles/glyphs are env-driven (VITE_MAP_STYLE_URL); production CSP
+ * origins are whitelisted via server CSP_CONNECT_SRC_EXTRA (see .env.example).
  */
 
-import React, { useEffect, useRef, useState, useCallback } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
+import "maplibre-gl/dist/maplibre-gl.css";
 import { trpc } from "@/lib/trpc";
-
-// Dynamic imports to avoid SSR issues with map libraries
-let maplibregl: any = null;
-let Cesium: any = null;
+import {
+  GeoVessel,
+  VesselTrackingRow,
+  toMapVessel,
+  vesselsToGeoJSON,
+  trackToLineString,
+  isFeedStale,
+  lowDataRasterStyle,
+  resolveMapStyleUrl,
+  resolveCesiumIonToken,
+} from "@/lib/geo";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
-interface Vessel {
-  id: string;
-  name: string;
-  mmsi: string;
-  imo: string;
-  lat: number;
-  lng: number;
-  heading: number;
-  speed: number;
-  status: string;
-  cargo_type: string;
-  declaration_ref?: string;
-  eta?: string;
-  destination_port?: string;
-}
-
-type VesselTrackingRow = {
-  id: number;
-  mmsi: string;
-  vesselName: string | null;
-  imoNumber: string | null;
-  latitude: number;
-  longitude: number;
-  speed: number | null;
-  heading: number | null;
-  destinationPort: string | null;
-  eta: Date | null;
-  cargoType: string | null;
-  flagCountry: string | null;
-  recordedAt: Date;
-};
-
-function toMapVessel(row: VesselTrackingRow): Vessel {
-  return {
-    id: String(row.id),
-    name: row.vesselName ?? row.mmsi,
-    mmsi: row.mmsi,
-    imo: row.imoNumber ?? "",
-    lat: row.latitude,
-    lng: row.longitude,
-    heading: row.heading ?? 0,
-    speed: row.speed ?? 0,
-    status: "underway",
-    cargo_type: row.cargoType ?? "unknown",
-    declaration_ref: row.destinationPort ?? undefined,
-    destination_port: row.destinationPort ?? undefined,
-    eta: row.eta?.toISOString(),
-  };
-}
-
 interface Port {
   id: string;
   name: string;
@@ -81,19 +45,8 @@ interface Port {
   type: string;
 }
 
-interface Geofence {
-  id: string;
-  name: string;
-  type: "circle" | "polygon";
-  center?: [number, number];
-  radius?: number;
-  coordinates?: [number, number][];
-  alert_on_entry: boolean;
-  alert_on_exit: boolean;
-}
-
 type MapMode = "2d" | "3d";
-type MapLayer = "vessels" | "ports" | "geofences" | "cargo-routes" | "risk-zones";
+type MapLayer = "vessels" | "ports" | "geofences" | "congestion-heatmap";
 
 // ─── Nigerian Ports ───────────────────────────────────────────────────────────
 
@@ -107,6 +60,9 @@ const NIGERIAN_PORTS: Port[] = [
   { id: "kano-air",   name: "Mallam Aminu Kano Airport", unlocode: "NGKAN", lat: 12.0476, lng: 8.5246, country: "NG", type: "airport" },
 ];
 
+const CESIUM_ION_TOKEN = resolveCesiumIonToken(import.meta.env.VITE_CESIUM_TOKEN);
+const MAP_STYLE_URL = resolveMapStyleUrl(import.meta.env.VITE_MAP_STYLE_URL);
+
 // ─── Component ────────────────────────────────────────────────────────────────
 
 export default function GeospatialPortal() {
@@ -114,171 +70,276 @@ export default function GeospatialPortal() {
   const mapContainer3D = useRef<HTMLDivElement>(null);
   const map2DRef = useRef<any>(null);
   const viewerRef = useRef<any>(null);
+  const cesiumRef = useRef<any>(null);
   const [mapMode, setMapMode] = useState<MapMode>("2d");
   const [activeLayers, setActiveLayers] = useState<Set<MapLayer>>(
     new Set(["vessels", "ports", "geofences"])
   );
-  const [selectedVessel, setSelectedVessel] = useState<Vessel | null>(null);
-  const [alerts, setAlerts] = useState<string[]>([]);
+  const [selectedVessel, setSelectedVessel] = useState<GeoVessel | null>(null);
   const [mapLoaded, setMapLoaded] = useState(false);
   const [cesiumLoaded, setCesiumLoaded] = useState(false);
-
-  // tRPC data
+  const [mapError, setMapError] = useState<string | null>(null);
+  const [cesiumError, setCesiumError] = useState<string | null>(null);
+  // #8 low-bandwidth / accessibility mode
+  const [lowData, setLowData] = useState(false);
+  const reducedMotion =
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  // tRPC data — real router data, 30 s polling
   const vessels = trpc.geospatial.listVessels.useQuery(
     { destinationPort: "NGAPP", limit: 200 },
     { refetchInterval: 30_000 }
   );
-  const geofences = trpc.geofences.list.useQuery({ status: "active" });
+  const heatmap = trpc.geospatial.heatmapData.useQuery(undefined, { refetchInterval: 30_000 });
+  const track = trpc.geospatial.getVesselTrack.useQuery(
+    { mmsi: selectedVessel?.mmsi ?? "", limit: 100 },
+    { enabled: !!selectedVessel?.mmsi }
+  );
+
+  // #2 honest staleness: data older than 90 s is flagged, never presented as live
+  const feedStale = isFeedStale(vessels.dataUpdatedAt ? new Date(vessels.dataUpdatedAt) : null);
+  const mapVessels: GeoVessel[] = (vessels.data as VesselTrackingRow[] | undefined ?? [])
+    .map(toMapVessel)
+    .filter((v): v is GeoVessel => v !== null);
 
-  // ─── Load MapLibre GL JS ───────────────────────────────────────────────────
+  // ─── Load MapLibre GL JS (bundled, pinned) ────────────────────────────────
 
   useEffect(() => {
     if (typeof window === "undefined") return;
+    let cancelled = false;
 
     const loadMapLibre = async () => {
-      if (!maplibregl) {
-        // Load MapLibre from CDN (GeoLibre-compatible)
-        await loadScript("https://unpkg.com/maplibre-gl@4.1.3/dist/maplibre-gl.js");
-        await loadCSS("https://unpkg.com/maplibre-gl@4.1.3/dist/maplibre-gl.css");
-        maplibregl = (window as any).maplibregl;
-      }
+      try {
+        const maplibregl = (await import("maplibre-gl")).default;
+        if (cancelled || !mapContainer2D.current || map2DRef.current) return;
+
+        map2DRef.current = new maplibregl.Map({
+          container: mapContainer2D.current,
+          style: lowData ? (lowDataRasterStyle() as any) : MAP_STYLE_URL,
+          center: [3.3903, 6.4474], // Apapa Port, Lagos
+          zoom: 8,
+          pitch: 0,
+          bearing: 0,
+          attributionControl: {},
+        });
 
-      if (!mapContainer2D.current || map2DRef.current) return;
-
-      // Initialize MapLibre with GeoLibre OpenFreeMap tiles
-      map2DRef.current = new maplibregl.Map({
-        container: mapContainer2D.current,
-        // GeoLibre / OpenFreeMap style — open-source alternative to Mapbox
-        style: "https://tiles.openfreemap.org/styles/liberty",
-        center: [3.3903, 6.4474], // Apapa Port, Lagos
-        zoom: 8,
-        pitch: 0,
-        bearing: 0,
-      });
+        map2DRef.current.on("load", () => {
+          if (cancelled) return;
+          setMapLoaded(true);
+          addPortLayers();
+          addVesselLayers();
+          addGeofenceLayers();
+          addCongestionHeatmapLayer();
+          addTrackLayers();
+        });
 
-      map2DRef.current.on("load", () => {
-        setMapLoaded(true);
-        addPortLayers();
-        addVesselLayers();
-        addGeofenceLayers();
-      });
+        map2DRef.current.on("error", (e: any) => {
+          if (cancelled) return;
+          setMapError(
+            `Map tiles unavailable — ${e?.error?.message ?? "tile/style fetch failed"}. ` +
+            "Check CSP_CONNECT_SRC_EXTRA whitelist for the configured tile origin."
+          );
+        });
 
-      // Click handler for vessel selection
-      map2DRef.current.on("click", "vessels-layer", (e: any) => {
-        const feature = e.features?.[0];
-        if (feature) {
-          setSelectedVessel(feature.properties as Vessel);
+        map2DRef.current.on("click", "vessels-layer", (e: any) => {
+          const feature = e.features?.[0];
+          if (feature) setSelectedVessel(feature.properties as GeoVessel);
+        });
+        map2DRef.current.on("mouseenter", "vessels-layer", () => {
+          if (map2DRef.current) map2DRef.current.getCanvas().style.cursor = "pointer";
+        });
+        map2DRef.current.on("mouseleave", "vessels-layer", () => {
+          if (map2DRef.current) map2DRef.current.getCanvas().style.cursor = "";
+        });
+      } catch (err) {
+        if (!cancelled) {
+          setMapError(err instanceof Error ? err.message : "Map engine failed to load");
         }
-      });
-
-      map2DRef.current.on("mouseenter", "vessels-layer", () => {
-        map2DRef.current.getCanvas().style.cursor = "pointer";
-      });
-      map2DRef.current.on("mouseleave", "vessels-layer", () => {
-        map2DRef.current.getCanvas().style.cursor = "";
-      });
+      }
     };
 
     loadMapLibre();
 
     return () => {
+      cancelled = true;
       if (map2DRef.current) {
         map2DRef.current.remove();
         map2DRef.current = null;
+        setMapLoaded(false);
       }
     };
-  }, []);
+    // lowData switches require a full style reload → remount the map
+  }, [lowData]);
 
-  // ─── Load CesiumJS for 3D View ────────────────────────────────────────────
+  // ─── Load CesiumJS for 3D port-approach view (#3) ─────────────────────────
 
   useEffect(() => {
     if (mapMode !== "3d" || typeof window === "undefined") return;
+    let cancelled = false;
 
     const loadCesium = async () => {
-      if (!Cesium) {
-        await loadScript("https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js");
-        await loadCSS("https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css");
-        Cesium = (window as any).Cesium;
-        // Use free Cesium Ion token (or anonymous)
-        Cesium.Ion.defaultAccessToken = process.env.VITE_CESIUM_TOKEN || "";
-      }
+      try {
+        // Lazy-load the SAME-ORIGIN prebuilt Cesium bundle (copied into
+        // dist/cesium at build time — CSP script-src 'self' compatible, no
+        // runtime CDN). Only fetched when the user opens the 3D view.
+        await loadScript("/cesium/Cesium.js");
+        await loadStylesheet("/cesium/Widgets/widgets.css");
+        const Cesium = (window as any).Cesium;
+        if (!Cesium) throw new Error("Cesium bundle loaded but global Cesium is missing");
+        if (cancelled) return;
+        cesiumRef.current = Cesium;
+
+        // G3: Ion is opt-in. No token → honest Ion-free terrain, never an
+        // empty-token request to ion.cesium.com.
+        if (CESIUM_ION_TOKEN) {
+          Cesium.Ion.defaultAccessToken = CESIUM_ION_TOKEN;
+        }
 
-      if (!mapContainer3D.current || viewerRef.current) return;
-
-      viewerRef.current = new Cesium.Viewer(mapContainer3D.current, {
-        terrainProvider: await Cesium.createWorldTerrainAsync(),
-        baseLayerPicker: false,
-        geocoder: false,
-        homeButton: false,
-        sceneModePicker: false,
-        navigationHelpButton: false,
-        animation: false,
-        timeline: false,
-        fullscreenButton: false,
-        imageryProvider: new Cesium.OpenStreetMapImageryProvider({
-          url: "https://tile.openstreetmap.org/",
-        }),
-      });
+        if (!mapContainer3D.current || viewerRef.current) return;
+
+        viewerRef.current = new Cesium.Viewer(mapContainer3D.current, {
+          // Ellipsoid terrain by default; Ion world terrain only when configured.
+          terrainProvider: CESIUM_ION_TOKEN
+            ? await Cesium.createWorldTerrainAsync()
+            : new Cesium.EllipsoidTerrainProvider(),
+          baseLayerPicker: false,
+          geocoder: false,
+          homeButton: false,
+          sceneModePicker: false,
+          navigationHelpButton: false,
+          animation: false,
+          timeline: false,
+          fullscreenButton: false,
+          // OSM imagery as base layer (Cesium 1.117: baseLayer, not imageryProvider)
+          baseLayer: new Cesium.ImageryLayer(
+            new Cesium.OpenStreetMapImageryProvider({
+              url: "https://tile.openstreetmap.org/",
+            })
+          ),
+        });
 
-      // Fly to Lagos / Apapa Port
-      viewerRef.current.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(3.3903, 6.4474, 50000),
-        orientation: { heading: 0, pitch: Cesium.Math.toRadians(-45), roll: 0 },
-        duration: 2,
-      });
+        viewerRef.current.camera.flyTo({
+          destination: Cesium.Cartesian3.fromDegrees(3.3903, 6.4474, 50000),
+          orientation: { heading: 0, pitch: Cesium.Math.toRadians(-45), roll: 0 },
+          duration: reducedMotion ? 0 : 2,
+        });
 
-      // Add Nigerian ports as 3D billboards
-      NIGERIAN_PORTS.forEach(port => {
-        viewerRef.current.entities.add({
-          id: `port-${port.id}`,
-          name: port.name,
-          position: Cesium.Cartesian3.fromDegrees(port.lng, port.lat),
-          billboard: {
-            image: port.type === "airport"
-              ? "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmYTUwMCIgZD0iTTIxIDMuNWwtOS45IDkuOUwzIDcuNWwxLjUtMS41IDYuNSA0LjUgOC41LTguNXoiLz48L3N2Zz4="
-              : "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOCIgZmlsbD0iIzAwN2JmZiIvPjwvc3ZnPg==",
-            width: 32,
-            height: 32,
-          },
-          label: {
-            text: port.name,
-            font: "12px sans-serif",
-            fillColor: Cesium.Color.WHITE,
-            outlineColor: Cesium.Color.BLACK,
-            outlineWidth: 2,
-            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-            pixelOffset: new Cesium.Cartesian2(0, -40),
-          },
+        NIGERIAN_PORTS.forEach(port => {
+          viewerRef.current.entities.add({
+            id: `port-${port.id}`,
+            name: port.name,
+            position: Cesium.Cartesian3.fromDegrees(port.lng, port.lat),
+            billboard: {
+              image: port.type === "airport"
+                ? "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmYTUwMCIgZD0iTTIxIDMuNWwtOS45IDkuOUwzIDcuNWwxLjUtMS41IDYuNSA0LjUgOC41LTguNXoiLz48L3N2Zz4="
+                : "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOCIgZmlsbD0iIzAwN2JmZiIvPjwvc3ZnPg==",
+              width: 32,
+              height: 32,
+            },
+            label: {
+              text: port.name,
+              font: "12px sans-serif",
+              fillColor: Cesium.Color.WHITE,
+              outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2,
+              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+              pixelOffset: new Cesium.Cartesian2(0, -40),
+            },
+          });
         });
-      });
 
-      setCesiumLoaded(true);
-      add3DVessels();
+        if (!cancelled) {
+          setCesiumLoaded(true);
+          add3DVessels();
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setCesiumError(err instanceof Error ? err.message : "3D engine failed to load");
+        }
+      }
     };
 
     loadCesium();
 
     return () => {
+      cancelled = true;
       if (viewerRef.current) {
         viewerRef.current.destroy();
         viewerRef.current = null;
         setCesiumLoaded(false);
       }
     };
-  }, [mapMode]);
+  }, [mapMode, reducedMotion]);
 
-  // ─── Update vessel positions on data change ────────────────────────────────
+  // ─── Update vessel positions on data change ───────────────────────────────
 
   useEffect(() => {
-    if (!mapLoaded || !map2DRef.current || !vessels.data) return;
-    updateVesselLayer((vessels.data as VesselTrackingRow[]).map(toMapVessel));
-  }, [vessels.data, mapLoaded]);
+    if (!mapLoaded || !map2DRef.current) return;
+    const source = map2DRef.current.getSource("vessels");
+    if (source) source.setData(vesselsToGeoJSON(mapVessels));
+  }, [vessels.data, mapLoaded]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    if (!cesiumLoaded || !viewerRef.current || !vessels.data) return;
+    if (!cesiumLoaded || !viewerRef.current) return;
     add3DVessels();
-  }, [vessels.data, cesiumLoaded]);
+  }, [vessels.data, cesiumLoaded]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // #4 congestion heatmap data → MapLibre heatmap source
+  useEffect(() => {
+    if (!mapLoaded || !map2DRef.current || !heatmap.data) return;
+    const source = map2DRef.current.getSource("congestion");
+    if (!source) return;
+    source.setData({
+      type: "FeatureCollection",
+      features: heatmap.data.map(p => ({
+        type: "Feature" as const,
+        geometry: { type: "Point" as const, coordinates: [p.lng, p.lat] },
+        properties: { weight: p.weight, portName: p.portName, status: p.congestionStatus },
+      })),
+    });
+  }, [heatmap.data, mapLoaded]);
+
+  // #2/#7 track replay + route overlay when a vessel is selected
+  useEffect(() => {
+    if (!mapLoaded || !map2DRef.current) return;
+    const map = map2DRef.current;
+
+    const trackSource = map.getSource("vessel-track");
+    const rows = (track.data as VesselTrackingRow[] | undefined) ?? [];
+    // getVesselTrack returns newest-first; reverse to oldest-first for replay
+    const line = trackToLineString([...rows].reverse());
+    if (trackSource) {
+      trackSource.setData(
+        line ?? { type: "FeatureCollection", features: [] }
+      );
+    }
+
+    // Route/ETA overlay: leg from current position to destination port
+    const routeSource = map.getSource("vessel-route");
+    if (routeSource) {
+      const dest = selectedVessel?.destination_port
+        ? NIGERIAN_PORTS.find(p => p.unlocode === selectedVessel.destination_port)
+        : undefined;
+      routeSource.setData(
+        selectedVessel && dest
+          ? {
+              type: "Feature",
+              geometry: {
+                type: "LineString",
+                coordinates: [
+                  [selectedVessel.lng, selectedVessel.lat],
+                  [dest.lng, dest.lat],
+                ],
+              },
+              properties: { destination: dest.name },
+            }
+          : { type: "FeatureCollection", features: [] }
+      );
+    }
+  }, [track.data, selectedVessel, mapLoaded]);
 
   // ─── MapLibre Layer Functions ─────────────────────────────────────────────
 
@@ -316,7 +377,6 @@ export default function GeospatialPortal() {
       source: "ports",
       layout: {
         "text-field": ["get", "name"],
-        "text-font": ["Open Sans Regular"],
         "text-size": 11,
         "text-offset": [0, 1.5],
         "text-anchor": "top",
@@ -340,17 +400,24 @@ export default function GeospatialPortal() {
 
     map.addLayer({
       id: "vessels-layer",
+      type: "circle",
+      source: "vessels",
+      paint: {
+        "circle-radius": 6,
+        "circle-color": "#28a745",
+        "circle-stroke-width": 2,
+        "circle-stroke-color": "#ffffff",
+      },
+    });
+
+    map.addLayer({
+      id: "vessels-labels",
       type: "symbol",
       source: "vessels",
       layout: {
-        "icon-image": "marker-15",
-        "icon-size": 1.5,
-        "icon-rotate": ["get", "heading"],
-        "icon-rotation-alignment": "map",
         "text-field": ["get", "name"],
-        "text-font": ["Open Sans Regular"],
         "text-size": 10,
-        "text-offset": [0, 1.5],
+        "text-offset": [0, 1.4],
         "text-anchor": "top",
       },
       paint: {
@@ -365,7 +432,6 @@ export default function GeospatialPortal() {
     if (!map2DRef.current) return;
     const map = map2DRef.current;
 
-    // Nigerian EEZ (200 nautical miles from baseline)
     map.addSource("geofences", {
       type: "geojson",
       data: {
@@ -425,32 +491,83 @@ export default function GeospatialPortal() {
     });
   }, []);
 
-  const updateVesselLayer = useCallback((vesselData: Vessel[]) => {
+  const addCongestionHeatmapLayer = useCallback(() => {
     if (!map2DRef.current) return;
-    const source = map2DRef.current.getSource("vessels");
-    if (!source) return;
+    const map = map2DRef.current;
 
-    source.setData({
-      type: "FeatureCollection",
-      features: vesselData.map(v => ({
-        type: "Feature",
-        geometry: { type: "Point", coordinates: [v.lng, v.lat] },
-        properties: v,
-      })),
+    map.addSource("congestion", {
+      type: "geojson",
+      data: { type: "FeatureCollection", features: [] },
+    });
+
+    map.addLayer({
+      id: "congestion-heatmap-layer",
+      type: "heatmap",
+      source: "congestion",
+      paint: {
+        "heatmap-weight": ["interpolate", ["linear"], ["get", "weight"], 0, 0, 1, 1],
+        "heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 9, 3],
+        "heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 10, 9, 40],
+        "heatmap-opacity": 0.6,
+        "heatmap-color": [
+          "interpolate", ["linear"], ["heatmap-density"],
+          0, "rgba(0,255,0,0)",
+          0.3, "rgba(0,255,0,1)",
+          0.6, "rgba(255,255,0,1)",
+          0.8, "rgba(255,165,0,1)",
+          1, "rgba(255,0,0,1)",
+        ],
+      },
+    });
+  }, []);
+
+  const addTrackLayers = useCallback(() => {
+    if (!map2DRef.current) return;
+    const map = map2DRef.current;
+
+    map.addSource("vessel-track", {
+      type: "geojson",
+      data: { type: "FeatureCollection", features: [] },
+    });
+    map.addLayer({
+      id: "vessel-track-layer",
+      type: "line",
+      source: "vessel-track",
+      paint: {
+        "line-color": "#007bff",
+        "line-width": 2,
+        "line-dasharray": [2, 2],
+      },
+    });
+
+    map.addSource("vessel-route", {
+      type: "geojson",
+      data: { type: "FeatureCollection", features: [] },
+    });
+    map.addLayer({
+      id: "vessel-route-layer",
+      type: "line",
+      source: "vessel-route",
+      paint: {
+        "line-color": "#ff9800",
+        "line-width": 2,
+        "line-dasharray": [6, 4],
+      },
     });
   }, []);
 
   // ─── CesiumJS 3D Vessel Functions ─────────────────────────────────────────
 
   const add3DVessels = useCallback(() => {
-    if (!viewerRef.current || !vessels.data) return;
+    if (!viewerRef.current || !cesiumRef.current) return;
     const viewer = viewerRef.current;
+    const Cesium = cesiumRef.current;
+    const rows = (vessels.data as VesselTrackingRow[] | undefined) ?? [];
 
-    // Remove existing vessel entities
     const toRemove = viewer.entities.values.filter((e: any) => e.id?.startsWith("vessel-"));
     toRemove.forEach((e: any) => viewer.entities.remove(e));
 
-    (vessels.data as VesselTrackingRow[]).map(toMapVessel).forEach(vessel => {
+    rows.map(toMapVessel).filter((v): v is GeoVessel => v !== null).forEach(vessel => {
       viewer.entities.add({
         id: `vessel-${vessel.id}`,
         name: vessel.name,
@@ -488,14 +605,12 @@ export default function GeospatialPortal() {
         next.add(layer);
       }
 
-      // Toggle MapLibre layer visibility
       if (map2DRef.current && mapLoaded) {
         const layerMap: Record<MapLayer, string[]> = {
-          vessels: ["vessels-layer"],
+          vessels: ["vessels-layer", "vessels-labels"],
           ports: ["ports-layer", "ports-labels"],
           geofences: ["geofences-fill", "geofences-outline"],
-          "cargo-routes": ["cargo-routes-layer"],
-          "risk-zones": ["risk-zones-layer"],
+          "congestion-heatmap": ["congestion-heatmap-layer"],
         };
         const visibility = next.has(layer) ? "visible" : "none";
         layerMap[layer]?.forEach(id => {
@@ -510,50 +625,74 @@ export default function GeospatialPortal() {
 
   // ─── Helpers ──────────────────────────────────────────────────────────────
 
-  const loadScript = (src: string): Promise<void> => {
-    return new Promise((resolve, reject) => {
-      if (document.querySelector(`script[src="${src}"]`)) {
-        resolve();
-        return;
-      }
+  // Same-origin script/stylesheet loaders with error propagation (CSP-safe).
+  const loadScript = (src: string): Promise<void> =>
+    new Promise((resolve, reject) => {
+      if (document.querySelector(`script[src="${src}"]`)) return resolve();
       const script = document.createElement("script");
       script.src = src;
       script.onload = () => resolve();
-      script.onerror = reject;
+      script.onerror = () => reject(new Error(`Failed to load ${src}`));
       document.head.appendChild(script);
     });
-  };
 
-  const loadCSS = (href: string): Promise<void> => {
-    return new Promise(resolve => {
-      if (document.querySelector(`link[href="${href}"]`)) {
-        resolve();
-        return;
-      }
+  const loadStylesheet = (href: string): Promise<void> =>
+    new Promise((resolve, reject) => {
+      if (document.querySelector(`link[href="${href}"]`)) return resolve();
       const link = document.createElement("link");
       link.rel = "stylesheet";
       link.href = href;
       link.onload = () => resolve();
+      link.onerror = () => reject(new Error(`Failed to load ${href}`));
       document.head.appendChild(link);
-      resolve();
     });
-  };
 
   // ─── Render ───────────────────────────────────────────────────────────────
 
+  const LAYER_LABELS: Record<MapLayer, string> = {
+    vessels: "Live vessels (AIS)",
+    ports: "Ports",
+    geofences: "Geofence zones",
+    "congestion-heatmap": "Congestion heatmap",
+  };
+
   return (
     <div className="flex flex-col h-screen bg-gray-900">
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700">
         <div>
           <h1 className="text-white font-bold text-lg">TradeGateway Geospatial Portal</h1>
-          <p className="text-gray-400 text-xs">MapLibre GL JS + GeoLibre + CesiumJS 3D</p>
+          <p className="text-gray-400 text-xs">MapLibre GL JS (2D) + CesiumJS (3D) — bundled, no runtime CDN</p>
         </div>
         <div className="flex items-center gap-3">
+          {/* #2 honest stale indicator */}
+          {vessels.data && feedStale && (
+            <span role="status" className="text-amber-400 text-xs font-medium">
+              AIS data stale (&gt;90 s) — positions may be outdated
+            </span>
+          )}
+          {vessels.isError && (
+            <span role="alert" className="text-red-400 text-xs font-medium">
+              Vessel feed unavailable
+            </span>
+          )}
+
+          {/* #8 low-bandwidth toggle (2D) */}
+          <button
+            onClick={() => setLowData(v => !v)}
+            aria-pressed={lowData}
+            className={`px-3 py-1 rounded text-xs font-medium transition-colors ${
+              lowData ? "bg-amber-600 text-white" : "bg-gray-700 text-gray-300 hover:text-white"
+            }`}
+          >
+            Low-data mode
+          </button>
+
           {/* Mode Toggle */}
-          <div className="flex bg-gray-700 rounded-lg p-1">
+          <div className="flex bg-gray-700 rounded-lg p-1" role="group" aria-label="Map engine">
             <button
               onClick={() => setMapMode("2d")}
+              aria-pressed={mapMode === "2d"}
               className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
                 mapMode === "2d" ? "bg-blue-600 text-white" : "text-gray-300 hover:text-white"
               }`}
@@ -562,6 +701,7 @@ export default function GeospatialPortal() {
             </button>
             <button
               onClick={() => setMapMode("3d")}
+              aria-pressed={mapMode === "3d"}
               className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
                 mapMode === "3d" ? "bg-blue-600 text-white" : "text-gray-300 hover:text-white"
               }`}
@@ -571,8 +711,8 @@ export default function GeospatialPortal() {
           </div>
 
           {/* Vessel count */}
-          <div className="text-gray-300 text-sm">
-            <span className="text-green-400 font-bold">{(vessels.data as Vessel[] | undefined)?.length ?? 0}</span> vessels tracked
+          <div className="text-gray-300 text-sm" aria-live="polite">
+            <span className="text-green-400 font-bold">{mapVessels.length}</span> vessels tracked
           </div>
         </div>
       </div>
@@ -581,15 +721,16 @@ export default function GeospatialPortal() {
         {/* Layer Controls Sidebar */}
         <div className="w-56 bg-gray-800 border-r border-gray-700 p-3 flex flex-col gap-2 overflow-y-auto">
           <h3 className="text-gray-300 text-xs font-semibold uppercase tracking-wider mb-1">Layers</h3>
-          {(["vessels", "ports", "geofences", "cargo-routes", "risk-zones"] as MapLayer[]).map(layer => (
+          {(Object.keys(LAYER_LABELS) as MapLayer[]).map(layer => (
             <label key={layer} className="flex items-center gap-2 cursor-pointer">
               <input
                 type="checkbox"
                 checked={activeLayers.has(layer)}
                 onChange={() => toggleLayer(layer)}
+                aria-label={LAYER_LABELS[layer]}
                 className="rounded"
               />
-              <span className="text-gray-300 text-sm capitalize">{layer.replace("-", " ")}</span>
+              <span className="text-gray-300 text-sm">{LAYER_LABELS[layer]}</span>
             </label>
           ))}
 
@@ -600,11 +741,15 @@ export default function GeospatialPortal() {
                 key={port.id}
                 onClick={() => {
                   if (mapMode === "2d" && map2DRef.current) {
-                    map2DRef.current.flyTo({ center: [port.lng, port.lat], zoom: 13, duration: 1500 });
-                  } else if (viewerRef.current) {
+                    map2DRef.current.flyTo({
+                      center: [port.lng, port.lat],
+                      zoom: 13,
+                      duration: reducedMotion ? 0 : 1500,
+                    });
+                  } else if (viewerRef.current && cesiumRef.current) {
                     viewerRef.current.camera.flyTo({
-                      destination: Cesium.Cartesian3.fromDegrees(port.lng, port.lat, 5000),
-                      duration: 2,
+                      destination: cesiumRef.current.Cartesian3.fromDegrees(port.lng, port.lat, 5000),
+                      duration: reducedMotion ? 0 : 2,
                     });
                   }
                 }}
@@ -614,18 +759,6 @@ export default function GeospatialPortal() {
               </button>
             ))}
           </div>
-
-          {/* Alerts */}
-          {alerts.length > 0 && (
-            <div className="border-t border-gray-700 mt-2 pt-2">
-              <h3 className="text-red-400 text-xs font-semibold uppercase tracking-wider mb-1">Alerts</h3>
-              {alerts.map((alert, i) => (
-                <div key={i} className="text-red-300 text-xs py-1 border-b border-gray-700">
-                  {alert}
-                </div>
-              ))}
-            </div>
-          )}
         </div>
 
         {/* Map Area */}
@@ -633,67 +766,105 @@ export default function GeospatialPortal() {
           {/* 2D MapLibre Map */}
           <div
             ref={mapContainer2D}
+            role="region"
+            aria-label="2D map — vessels, ports, geofences, congestion heatmap"
             className={`absolute inset-0 ${mapMode === "2d" ? "block" : "hidden"}`}
           />
 
           {/* 3D CesiumJS Viewer */}
           <div
             ref={mapContainer3D}
+            role="region"
+            aria-label="3D port approach view"
             className={`absolute inset-0 ${mapMode === "3d" ? "block" : "hidden"}`}
           />
 
-          {/* Loading overlay */}
-          {!mapLoaded && mapMode === "2d" && (
-            <div className="absolute inset-0 flex items-center justify-center bg-gray-900">
+          {/* 2D error / loading overlays */}
+          {mapError && mapMode === "2d" && (
+            <div role="alert" className="absolute inset-0 flex items-center justify-center bg-gray-900">
+              <div className="text-center max-w-md px-6">
+                <p className="text-red-400 font-semibold mb-2">Map unavailable</p>
+                <p className="text-gray-400 text-sm">{mapError}</p>
+              </div>
+            </div>
+          )}
+          {!mapLoaded && !mapError && mapMode === "2d" && (
+            <div className="absolute inset-0 flex items-center justify-center bg-gray-900" aria-busy="true">
               <div className="text-white text-center">
                 <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-3" />
-                <p>Loading MapLibre GL JS + GeoLibre tiles...</p>
+                <p>Loading MapLibre GL JS…</p>
+              </div>
+            </div>
+          )}
+
+          {/* 3D error / Ion notice overlays */}
+          {cesiumError && mapMode === "3d" && (
+            <div role="alert" className="absolute inset-0 flex items-center justify-center bg-gray-900">
+              <div className="text-center max-w-md px-6">
+                <p className="text-red-400 font-semibold mb-2">3D view unavailable</p>
+                <p className="text-gray-400 text-sm">{cesiumError}</p>
               </div>
             </div>
           )}
+          {!cesiumError && !CESIUM_ION_TOKEN && mapMode === "3d" && cesiumLoaded && (
+            <div role="status" className="absolute top-2 left-2 bg-gray-800/90 text-gray-300 text-xs px-3 py-1.5 rounded border border-gray-600">
+              Cesium Ion token not configured — using open OSM imagery and ellipsoid terrain.
+            </div>
+          )}
 
-          {/* Selected Vessel Panel */}
+          {/* Empty-vessel honesty state */}
+          {mapLoaded && vessels.data && mapVessels.length === 0 && !vessels.isError && (
+            <div role="status" className="absolute top-2 left-2 bg-gray-800/90 text-gray-300 text-xs px-3 py-1.5 rounded border border-gray-600">
+              No live AIS positions for the selected filter.
+            </div>
+          )}
+
+          {/* Selected Vessel Panel (#2 track + #7 ETA) */}
           {selectedVessel && (
             <div className="absolute top-4 right-4 bg-gray-800 rounded-lg shadow-xl p-4 w-72 border border-gray-600">
               <div className="flex items-center justify-between mb-3">
                 <h3 className="text-white font-semibold">⚓ {selectedVessel.name}</h3>
                 <button
                   onClick={() => setSelectedVessel(null)}
+                  aria-label="Close vessel panel"
                   className="text-gray-400 hover:text-white"
                 >
                   ✕
                 </button>
               </div>
               <div className="space-y-1 text-sm">
-                {[
+                {([
                   ["MMSI", selectedVessel.mmsi],
-                  ["IMO", selectedVessel.imo],
+                  ["IMO", selectedVessel.imo || "—"],
                   ["Status", selectedVessel.status],
                   ["Speed", `${selectedVessel.speed} kn`],
                   ["Heading", `${selectedVessel.heading}°`],
                   ["Cargo", selectedVessel.cargo_type],
                   ["Destination", selectedVessel.destination_port ?? "—"],
-                  ["ETA", selectedVessel.eta ?? "—"],
-                  ["Declaration", selectedVessel.declaration_ref ?? "—"],
-                ].map(([label, value]) => (
+                  ["ETA", selectedVessel.eta ? new Date(selectedVessel.eta).toLocaleString() : "—"],
+                ] as [string, string][]).map(([label, value]) => (
                   <div key={label} className="flex justify-between">
                     <span className="text-gray-400">{label}:</span>
                     <span className="text-white font-medium">{value}</span>
                   </div>
                 ))}
               </div>
-              {selectedVessel.declaration_ref && (
-                <button className="mt-3 w-full bg-blue-600 hover:bg-blue-700 text-white text-sm py-1.5 rounded transition-colors">
-                  View Declaration
-                </button>
-              )}
+              <p className="mt-2 text-xs text-gray-500">
+                {track.isLoading
+                  ? "Loading track history…"
+                  : track.data && track.data.length > 1
+                    ? `Track replay: ${track.data.length} recorded positions (dashed blue).`
+                    : "No recorded track for this vessel."}
+              </p>
             </div>
           )}
 
           {/* Map Attribution */}
-          <div className="absolute bottom-2 left-2 text-gray-500 text-xs">
+          <div role="contentinfo" className="absolute bottom-2 left-2 text-gray-500 text-xs">
             {mapMode === "2d"
-              ? "© OpenFreeMap (GeoLibre) | MapLibre GL JS | © OpenStreetMap contributors"
+              ? lowData
+                ? "© OpenStreetMap contributors (low-data raster)"
+                : "© OpenFreeMap | MapLibre GL JS | © OpenStreetMap contributors"
               : "© CesiumJS | © OpenStreetMap contributors"}
           </div>
         </div>

From bbc6dba671e131d6e54b9c30284c7aaa8f8fbd5b Mon Sep 17 00:00:00 2001
From: munisp <155237317+munisp@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:46:14 -0400
Subject: [PATCH 09/14] Phase 17 (G7): heatmap rendering moved into useEffect;
 HeatmapLayer type fix

---
 client/src/pages/app/PortHeatmap.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/client/src/pages/app/PortHeatmap.tsx b/client/src/pages/app/PortHeatmap.tsx
index 792959cf..27335ae2 100644
--- a/client/src/pages/app/PortHeatmap.tsx
+++ b/client/src/pages/app/PortHeatmap.tsx
@@ -312,7 +312,9 @@ export default function PortHeatmap() {
   const [selectedPort, setSelectedPort] = useState<string | null>(null);
   const [mapReady, setMapReady] = useState(false);
   const mapRef = useRef<google.maps.Map | null>(null);
-  const heatmapRef = useRef<google.maps.visualization.HeatmapLayer | null>(null);
+  // @types/google.maps stubs HeatmapLayer (no ctor opts/setMap) — use a
+  // structural type matching the runtime API.
+  const heatmapRef = useRef<{ setMap(m: google.maps.Map | null): void } | null>(null);
   const markersRef = useRef<google.maps.Marker[]>([]);
   const infoWindowRef = useRef<google.maps.InfoWindow | null>(null);
 
@@ -407,7 +409,7 @@ export default function PortHeatmap() {
       weight: p.weight * 10,
     }));
 
-    heatmapRef.current = new google.maps.visualization.HeatmapLayer({
+    heatmapRef.current = new (google.maps.visualization as any).HeatmapLayer({
       data: heatmapPoints,
       map: mapRef.current,
       radius: 40,
@@ -461,10 +463,15 @@ export default function PortHeatmap() {
     });
   }, [heatmapData]);
 
-  // Trigger render when map and data are both ready
-  if (mapReady && heatmapData && markersRef.current.length === 0) {
-    renderHeatmap();
-  }
+  // Phase 17 (G7): heatmap/marker rendering is a side effect — it must live in
+  // useEffect keyed on [mapReady, heatmapData], never in the render body, and
+  // it must re-run on every data refresh (the previous markersRef.length===0
+  // guard left the heatmap stale until remount).
+  useEffect(() => {
+    if (mapReady && heatmapData) {
+      renderHeatmap();
+    }
+  }, [mapReady, heatmapData, renderHeatmap]);
 
   const stats = heatmapData ? {
     clear: heatmapData.filter(p => p.congestionStatus === "clear").length,

From 7beb9b4cab27417606dffa81a88abbca3f5538b2 Mon Sep 17 00:00:00 2001
From: munisp <155237317+munisp@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:46:44 -0400
Subject: [PATCH 10/14] noop

---
 client/src/pages/app/CargoTrackingMap.tsx | 583 +---------------------
 1 file changed, 1 insertion(+), 582 deletions(-)

diff --git a/client/src/pages/app/CargoTrackingMap.tsx b/client/src/pages/app/CargoTrackingMap.tsx
index 2c915fd2..798d2bb2 100644
--- a/client/src/pages/app/CargoTrackingMap.tsx
+++ b/client/src/pages/app/CargoTrackingMap.tsx
@@ -1,582 +1 @@
-/**
- * Sprint 66 — Cargo Tracking Real-Time Map
- * Live AIS vessel positions on Google Maps with animated markers,
- * route polylines, 30-second refresh, and shipment info panel.
- */
-
-import { useRef, useEffect, useCallback, useState } from "react";
-import DashboardLayout from "@/components/DashboardLayout";
-import { MapView } from "@/components/Map";
-import { trpc } from "@/lib/trpc";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import {
-  Anchor, Ship, Navigation, AlertTriangle, RefreshCw,
-  Clock, MapPin, Gauge, Compass, Package, Radio,
-  Filter, X, ChevronRight, Activity, Wifi, WifiOff, Layers,
-} from "lucide-react";
-import { useVesselWebSocket } from "@/hooks/useVesselWebSocket";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import type { inferRouterOutputs } from "@trpc/server";
-import type { AppRouter } from "../../../../server/routers";
-
-// ─── TYPES ────────────────────────────────────────────────────────────────────
-
-// The vessel shape is derived from the cargoTracking router output — the
-// persisted AIS store is the only source, and fields it does not track
-// (call sign, draught, length, origin port, declaration linkage) are NOT
-// shown here rather than rendered from the removed synthetic fleet.
-type RouterOutputs = inferRouterOutputs<AppRouter>;
-type Vessel = RouterOutputs["cargoTracking"]["getLiveVessels"]["vessels"][number];
-
-// ─── HELPERS ──────────────────────────────────────────────────────────────────
-
-const RISK_COLORS: Record<string, string> = {
-  green: "#22c55e",
-  amber: "#f59e0b",
-  red: "#ef4444",
-};
-
-const STATUS_COLORS: Record<string, string> = {
-  underway: "#3b82f6",
-  moored: "#8b5cf6",
-  anchored: "#f59e0b",
-  restricted: "#ef4444",
-  aground: "#dc2626",
-};
-
-const VESSEL_ICONS: Record<string, string> = {
-  container: "🚢",
-  bulk: "⛴️",
-  tanker: "🛢️",
-  general: "🚢",
-  roro: "🚗",
-  passenger: "🛳️",
-};
-
-function formatEta(eta: string | null): string {
-  if (!eta) return "—";
-  const d = new Date(eta);
-  const now = new Date();
-  const diffH = Math.round((d.getTime() - now.getTime()) / 3600000);
-  if (diffH < 0) return "Arrived";
-  if (diffH < 1) return "< 1 hour";
-  if (diffH < 24) return `${diffH}h`;
-  return `${Math.round(diffH / 24)}d`;
-}
-
-function formatTime(iso: string): string {
-  return new Date(iso).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-}
-
-function flagEmoji(code: string): string {
-  const flags: Record<string, string> = {
-    LR: "🇱🇷", TW: "🇹🇼", GH: "🇬🇭", KE: "🇰🇪",
-    AE: "🇦🇪", DK: "🇩🇰", EG: "🇪🇬",
-  };
-  return flags[code] ?? "🏳️";
-}
-
-// ─── COMPONENT ────────────────────────────────────────────────────────────────
-
-export default function CargoTrackingMap() {
-  const mapRef = useRef<google.maps.Map | null>(null);
-  const markersRef = useRef<Map<string, google.maps.marker.AdvancedMarkerElement>>(new Map());
-  const polylinesRef = useRef<Map<string, google.maps.Polyline>>(new Map());
-  const routePolylineRef = useRef<google.maps.Polyline | null>(null);
-
-  const [selectedVessel, setSelectedVessel] = useState<Vessel | null>(null);
-  const [riskFilter, setRiskFilter] = useState<"all" | "green" | "amber" | "red">("all");
-  const [statusFilter, setStatusFilter] = useState<"all" | "underway" | "moored" | "anchored">("all");
-  const [lastRefresh, setLastRefresh] = useState<Date>(new Date());
-  const [mapReady, setMapReady] = useState(false);
-  const [showHeatmap, setShowHeatmap] = useState(false);
-  const heatmapLayerRef = useRef<any>(null);
-
-  // ─── SPRINT 70: WebSocket real-time push ─────────────────────────────────────
-
-  const { vessels: wsVessels, connectionStatus, lastRefresh: wsLastRefresh } = useVesselWebSocket(true);
-  // Use WebSocket data when live, fall back to tRPC polling otherwise
-  const isWsLive = connectionStatus === "live";
-
-  // ─── DATA FETCHING (polling fallback) ────────────────────────────────────────────────
-
-  const { data: vesselData, refetch: refetchVessels, isLoading: vesselsLoading, isError: vesselsError, refetch: retryVessels } = trpc.cargoTracking.getLiveVessels.useQuery(
-    { riskFilter, statusFilter },
-    // Only poll when WebSocket is not live
-    { refetchInterval: isWsLive ? false : 30000 }
-  );
-
-  const { data: statsData, isError: statsError } = trpc.cargoTracking.getVesselStats.useQuery(undefined, {
-    refetchInterval: 30000,
-  });
-
-  const { data: arrivalsData, isError: arrivalsError } = trpc.cargoTracking.getPortArrivals.useQuery(undefined, {
-    refetchInterval: 60000,
-  });
-
-  const trackingUnavailable = !isWsLive && (vesselsError || statsError || arrivalsError);
-
-  const { data: routeData } = trpc.cargoTracking.getVesselRoute.useQuery(
-    { mmsi: selectedVessel?.mmsi ?? "" },
-    { enabled: !!selectedVessel }
-  );
-  const { data: heatmapData } = trpc.cargoTracking.getCargoHeatmapData.useQuery(
-    { hours: 24, limit: 500 },
-    { enabled: showHeatmap, staleTime: 120000 }
-  );
-
-  // ─── MAP INITIALISATION ─────────────────────────────────────────────────────
-
-  const handleMapReady = useCallback((map: google.maps.Map) => {
-    mapRef.current = map;
-    setMapReady(true);
-  }, []);
-
-  // ─── MARKER MANAGEMENT ──────────────────────────────────────────────────────
-
-  const updateMarkers = useCallback((vessels: Vessel[]) => {
-    if (!mapRef.current || !window.google) return;
-
-    const currentIds = new Set(vessels.map(v => v.id));
-
-    // Remove stale markers
-    markersRef.current.forEach((marker, id) => {
-      if (!currentIds.has(id)) {
-        marker.map = null;
-        markersRef.current.delete(id);
-      }
-    });
-
-    vessels.forEach(vessel => {
-      const position = { lat: vessel.lat, lng: vessel.lon };
-      const riskColor = vessel.riskFlag ? RISK_COLORS[vessel.riskFlag] : "#6b7280";
-      const icon = VESSEL_ICONS[vessel.vesselType ?? ""] ?? "🚢";
-
-      // Create marker element
-      const el = document.createElement("div");
-      el.style.cssText = `
-        display: flex; flex-direction: column; align-items: center; cursor: pointer;
-        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
-        transition: transform 0.3s ease;
-      `;
-
-      const bubble = document.createElement("div");
-      bubble.style.cssText = `
-        background: ${riskColor}; color: white; border-radius: 50%;
-        width: 36px; height: 36px; display: flex; align-items: center;
-        justify-content: center; font-size: 18px; border: 2px solid white;
-        box-shadow: 0 0 0 2px ${riskColor}40;
-        transform: rotate(${vessel.heading}deg);
-      `;
-      bubble.textContent = icon;
-
-      const label = document.createElement("div");
-      label.style.cssText = `
-        background: rgba(0,0,0,0.75); color: white; font-size: 10px;
-        padding: 2px 6px; border-radius: 4px; margin-top: 2px;
-        white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
-      `;
-      label.textContent = vessel.vesselName;
-
-      el.appendChild(bubble);
-      el.appendChild(label);
-
-      const existing = markersRef.current.get(vessel.id);
-      if (existing) {
-        // Animate to new position
-        existing.position = position;
-        (existing as any).content = el;
-      } else {
-        const marker = new google.maps.marker.AdvancedMarkerElement({
-          map: mapRef.current!,
-          position,
-          title: vessel.vesselName,
-          content: el,
-        });
-        marker.addListener("click", () => setSelectedVessel(vessel));
-        markersRef.current.set(vessel.id, marker);
-      }
-    });
-
-    setLastRefresh(new Date());
-  }, []);
-
-  // ─── ROUTE POLYLINE ─────────────────────────────────────────────────────────
-
-  const drawRoute = useCallback((vessel: Vessel, waypoints: Array<{ lat: number; lon: number }>) => {
-    if (!mapRef.current || !window.google) return;
-
-    // Clear previous route
-    if (routePolylineRef.current) {
-      routePolylineRef.current.setMap(null);
-    }
-
-    const path = waypoints.map(wp => ({ lat: wp.lat, lng: wp.lon }));
-
-    // Dashed historical track
-    routePolylineRef.current = new google.maps.Polyline({
-      path,
-      geodesic: true,
-      strokeColor: vessel.riskFlag ? RISK_COLORS[vessel.riskFlag] : "#6b7280",
-      strokeOpacity: 0.8,
-      strokeWeight: 2,
-      icons: [{
-        icon: { path: google.maps.SymbolPath.FORWARD_OPEN_ARROW, scale: 3 },
-        offset: "50%",
-        repeat: "80px",
-      }],
-      map: mapRef.current,
-    });
-
-    // Pan map to show full route
-    const bounds = new google.maps.LatLngBounds();
-    path.forEach(p => bounds.extend(p));
-    mapRef.current.fitBounds(bounds, { top: 60, right: 60, bottom: 60, left: 60 });
-  }, []);
-
-  const clearRoute = useCallback(() => {
-    if (routePolylineRef.current) {
-      routePolylineRef.current.setMap(null);
-      routePolylineRef.current = null;
-    }
-  }, []);
-
-  //   // ─── EFFECTS ────────────────────────────────────────────────────────
-
-  // Sprint 70: update markers from WebSocket when live
-  useEffect(() => {
-    if (mapReady && isWsLive && wsVessels.length > 0) {
-      // Merge WS position updates into the full vessel objects from tRPC
-      const fullVessels = vesselData?.vessels ?? [];
-      const wsMap = new Map(wsVessels.map(v => [v.mmsi, v]));
-      const merged = fullVessels.map(v => {
-        const ws = wsMap.get(v.mmsi);
-        if (!ws) return v;
-        return { ...v, lat: ws.lat, lon: ws.lon, speed: ws.speed, heading: ws.heading, lastUpdate: ws.lastUpdate };
-      });
-      updateMarkers(merged.length > 0 ? merged : fullVessels);
-      if (wsLastRefresh) setLastRefresh(new Date(wsLastRefresh));
-    }
-  }, [mapReady, isWsLive, wsVessels, vesselData, wsLastRefresh, updateMarkers]);
-
-  // Fallback: update markers from tRPC polling when WS is not live
-  useEffect(() => {
-    if (mapReady && !isWsLive && vesselData?.vessels) {
-      updateMarkers(vesselData.vessels);
-    }
-  }, [mapReady, isWsLive, vesselData, updateMarkers]);
-
-  useEffect(() => {
-    if (selectedVessel && routeData?.waypoints && mapReady) {
-      drawRoute(selectedVessel, routeData.waypoints);
-    } else if (!selectedVessel) {
-      clearRoute();
-    }
-  }, [selectedVessel, routeData, mapReady, drawRoute, clearRoute]);
-
-  // ─── RENDER ─────────────────────────────────────────────────────────────────
-
-  const vessels: Vessel[] = vesselData?.vessels ?? [];
-
-  // v100: Apply/remove heatmap layer when toggle changes
-  useEffect(() => {
-    if (!mapReady || typeof google === 'undefined') return;
-    if (showHeatmap && heatmapData && heatmapData.length > 0) {
-      if (heatmapLayerRef.current) {
-        heatmapLayerRef.current.setMap(null);
-      }
-      const points = heatmapData.map((p: { lat: number; lng: number; weight: number }) =>
-        new google.maps.LatLng(p.lat, p.lng)
-      );
-      heatmapLayerRef.current = new (google.maps.visualization as any).HeatmapLayer({
-        data: points,
-        radius: 40,
-      });
-      heatmapLayerRef.current.setMap((window as any).__map__);
-    } else if (!showHeatmap && heatmapLayerRef.current) {
-      heatmapLayerRef.current.setMap(null);
-      heatmapLayerRef.current = null;
-    }
-  }, [showHeatmap, heatmapData, mapReady]);
-
-
-  return (
-    <DashboardLayout title="Cargo Tracking — Live AIS Map">
-      <div className="flex flex-col gap-4 h-full">
-
-        {trackingUnavailable && (
-          <div role="alert" className="flex items-center justify-between gap-3 rounded-lg border border-destructive/40 bg-destructive/10 px-4 py-2.5">
-            <p className="text-sm text-destructive">
-              Live tracking data is unavailable — figures below are not shown rather than stale values. The map may be empty until the connection recovers.
-            </p>
-            <Button variant="outline" size="sm" onClick={() => retryVessels()}>Retry</Button>
-          </div>
-        )}
-        {vesselsLoading && !vesselData && !isWsLive && (
-          <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3" aria-busy="true" aria-label="Loading vessel statistics">
-            {Array.from({ length: 7 }).map((_, i) => (
-              <div key={i} className="h-16 animate-pulse rounded-lg bg-muted" />
-            ))}
-          </div>
-        )}
-
-        {/* ── HEADER STATS ── */}
-        <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3">
-          {[
-            { label: "Total Vessels", value: statsData?.total, icon: Ship, color: "text-blue-400" },
-            { label: "Underway", value: statsData?.underway, icon: Navigation, color: "text-blue-400" },
-            { label: "Moored", value: statsData?.moored, icon: Anchor, color: "text-purple-400" },
-            { label: "Anchored", value: statsData?.anchored, icon: Anchor, color: "text-yellow-400" },
-            { label: "Red Flag", value: statsData?.redFlag, icon: AlertTriangle, color: "text-red-400" },
-            { label: "Amber Flag", value: statsData?.amberFlag, icon: AlertTriangle, color: "text-yellow-400" },
-            { label: "Declared", value: statsData?.withDeclaration, icon: Package, color: "text-green-400" },
-          ].map(stat => (
-            <Card key={stat.label} className="bg-card/50">
-              <CardContent className="p-3 flex items-center gap-2">
-                <stat.icon className={`h-4 w-4 shrink-0 ${stat.color}`} />
-                <div>
-                  <p className="text-xs text-muted-foreground leading-none">{stat.label}</p>
-                  <p className="text-lg font-bold leading-tight">{stat.value ?? "—"}</p>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-
-        {/* ── CONTROLS ── */}
-        <div className="flex flex-wrap items-center gap-3">
-          <div className="flex items-center gap-2">
-            <Filter className="h-4 w-4 text-muted-foreground" />
-            <span className="text-sm text-muted-foreground">Filter:</span>
-          </div>
-          <Select value={riskFilter} onValueChange={v => setRiskFilter(v as typeof riskFilter)}>
-            <SelectTrigger className="w-36 h-8 text-xs">
-              <SelectValue placeholder="Risk Flag" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Risk Flags</SelectItem>
-              <SelectItem value="green">Green</SelectItem>
-              <SelectItem value="amber">Amber</SelectItem>
-              <SelectItem value="red">Red</SelectItem>
-            </SelectContent>
-          </Select>
-          <Select value={statusFilter} onValueChange={v => setStatusFilter(v as typeof statusFilter)}>
-            <SelectTrigger className="w-36 h-8 text-xs">
-              <SelectValue placeholder="Status" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Statuses</SelectItem>
-              <SelectItem value="underway">Underway</SelectItem>
-              <SelectItem value="moored">Moored</SelectItem>
-              <SelectItem value="anchored">Anchored</SelectItem>
-            </SelectContent>
-          </Select>
-          <div className="ml-auto flex items-center gap-2 text-xs text-muted-foreground">
-            {/* Sprint 70: WebSocket connection status badge */}
-            {connectionStatus === "live" ? (
-              <>
-                <Wifi className="h-3 w-3 text-green-400" />
-                <span className="text-green-500 font-medium">Live</span>
-              </>
-            ) : connectionStatus === "reconnecting" ? (
-              <>
-                <WifiOff className="h-3 w-3 text-yellow-400 animate-pulse" />
-                <span className="text-yellow-500">Reconnecting…</span>
-              </>
-            ) : connectionStatus === "fallback" ? (
-              <>
-                <Activity className="h-3 w-3 text-blue-400 animate-pulse" />
-                <span>Polling — 30s</span>
-              </>
-            ) : (
-              <>
-                <Activity className="h-3 w-3 text-muted-foreground animate-pulse" />
-                <span>Connecting…</span>
-              </>
-            )}
-            <span>·</span>
-            <span>Last: {formatTime(lastRefresh.toISOString())}</span>
-            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => refetchVessels()}>
-              <RefreshCw className="h-3.5 w-3.5" />
-            </Button>
-          </div>
-        </div>
-
-        {/* ── MAIN CONTENT ── */}
-        <div className="flex gap-4 flex-1 min-h-0">
-
-          {/* MAP */}
-          <div className="flex-1 min-w-0 rounded-lg overflow-hidden border border-border">
-            <MapView
-              className="w-full h-full min-h-[500px]"
-              initialCenter={{ lat: -4.05, lng: 39.67 }}
-              initialZoom={10}
-              onMapReady={handleMapReady}
-            />
-          </div>
-
-          {/* SIDE PANEL */}
-          <div className="w-80 shrink-0 flex flex-col gap-3 overflow-y-auto max-h-[680px]">
-
-            {/* Selected vessel detail */}
-            {selectedVessel ? (
-              <Card className="border-primary/50">
-                <CardHeader className="pb-2">
-                  <div className="flex items-start justify-between">
-                    <div>
-                      <CardTitle className="text-sm flex items-center gap-2">
-                        <span>{VESSEL_ICONS[selectedVessel.vesselType ?? ""] ?? "🚢"}</span>
-                        <span>{selectedVessel.vesselName}</span>
-                      </CardTitle>
-                      <p className="text-xs text-muted-foreground mt-0.5">
-                        {flagEmoji(selectedVessel.flagCountry)} {selectedVessel.flagCountry || "—"}
-                      </p>
-                    </div>
-                    <Button variant="ghost" size="icon" className="h-6 w-6 -mt-1" onClick={() => setSelectedVessel(null)}>
-                      <X className="h-3.5 w-3.5" />
-                    </Button>
-                  </div>
-                  <div className="flex gap-1.5 flex-wrap mt-1">
-                    {selectedVessel.riskFlag && (
-                      <Badge
-                        variant="outline"
-                        className="text-xs"
-                        style={{ borderColor: RISK_COLORS[selectedVessel.riskFlag], color: RISK_COLORS[selectedVessel.riskFlag] }}
-                      >
-                        {selectedVessel.riskFlag.toUpperCase()} RISK
-                      </Badge>
-                    )}
-                    <Badge
-                      variant="outline"
-                      className="text-xs"
-                      style={{ borderColor: STATUS_COLORS[selectedVessel.status] ?? "#6b7280", color: STATUS_COLORS[selectedVessel.status] ?? "#6b7280" }}
-                    >
-                      {selectedVessel.status.toUpperCase()}
-                    </Badge>
-                    <Badge variant="secondary" className="text-xs capitalize">
-                      {selectedVessel.cargoType}
-                    </Badge>
-                  </div>
-                </CardHeader>
-                <CardContent className="pt-0 space-y-2 text-xs">
-                  <div className="grid grid-cols-2 gap-x-4 gap-y-1.5">
-                    {/* Only fields the persisted AIS store actually tracks are
-                        shown — draught/length/call-sign are not tracked and were
-                        dropped with the removed synthetic fleet. */}
-                    {[
-                      { label: "MMSI", value: selectedVessel.mmsi, icon: Radio },
-                      { label: "IMO", value: selectedVessel.imoNumber || "—", icon: Ship },
-                      { label: "Speed", value: `${selectedVessel.speed} kn`, icon: Gauge },
-                      { label: "Heading", value: `${selectedVessel.heading}°`, icon: Compass },
-                    ].map(item => (
-                      <div key={item.label} className="flex items-center gap-1.5">
-                        <item.icon className="h-3 w-3 text-muted-foreground shrink-0" />
-                        <span className="text-muted-foreground">{item.label}:</span>
-                        <span className="font-medium">{item.value}</span>
-                      </div>
-                    ))}
-                  </div>
-                  <Separator />
-                  <div className="space-y-1">
-                    <div className="flex items-center gap-1.5">
-                      <MapPin className="h-3 w-3 text-green-400 shrink-0" />
-                      <span className="text-muted-foreground">Destination:</span>
-                      <span className="font-medium">{selectedVessel.destinationPort || "—"}</span>
-                    </div>
-                    <div className="flex items-center gap-1.5">
-                      <Clock className="h-3 w-3 text-muted-foreground shrink-0" />
-                      <span className="text-muted-foreground">ETA:</span>
-                      <span className="font-medium">{formatEta(selectedVessel.eta)}</span>
-                    </div>
-                  </div>
-                  <div className="text-[10px] text-muted-foreground pt-1">
-                    Last AIS update: {formatTime(selectedVessel.lastUpdate)} · Source: sedona-svc
-                  </div>
-                  {routeData?.waypoints && (
-                    <div className="text-[10px] text-blue-400">
-                      Route polyline: {routeData.waypoints.length} waypoints plotted
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
-            ) : (
-              <Card className="border-dashed">
-                <CardContent className="p-4 text-center text-sm text-muted-foreground">
-                  <Ship className="h-8 w-8 mx-auto mb-2 opacity-30" />
-                  <p>Click any vessel marker on the map to view details and route history.</p>
-                </CardContent>
-              </Card>
-            )}
-
-            {/* Vessel list */}
-            <Card>
-              <CardHeader className="pb-2">
-                <CardTitle className="text-sm flex items-center gap-2">
-                  <Ship className="h-4 w-4" />
-                  Active Vessels ({vessels.length})
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="pt-0 space-y-1 max-h-60 overflow-y-auto">
-                {vessels.map(v => (
-                  <button
-                    key={v.id}
-                    onClick={() => {
-                      setSelectedVessel(v);
-                      if (mapRef.current) {
-                        mapRef.current.panTo({ lat: v.lat, lng: v.lon });
-                        mapRef.current.setZoom(12);
-                      }
-                    }}
-                    className={`w-full text-left flex items-center gap-2 p-2 rounded hover:bg-accent transition-colors text-xs ${selectedVessel?.id === v.id ? "bg-accent" : ""}`}
-                  >
-                    <span className="text-base">{VESSEL_ICONS[v.vesselType ?? ""] ?? "🚢"}</span>
-                    <div className="flex-1 min-w-0">
-                      <p className="font-medium truncate">{v.vesselName}</p>
-                      <p className="text-muted-foreground capitalize">{v.status} · {v.speed} kn</p>
-                    </div>
-                    {v.riskFlag && (
-                      <div
-                        className="h-2 w-2 rounded-full shrink-0"
-                        style={{ background: RISK_COLORS[v.riskFlag] }}
-                      />
-                    )}
-                    <ChevronRight className="h-3 w-3 text-muted-foreground shrink-0" />
-                  </button>
-                ))}
-              </CardContent>
-            </Card>
-
-            {/* Upcoming arrivals */}
-            <Card>
-              <CardHeader className="pb-2">
-                <CardTitle className="text-sm flex items-center gap-2">
-                  <Anchor className="h-4 w-4" />
-                  Upcoming Arrivals
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="pt-0 space-y-2">
-                {(arrivalsData?.arrivals ?? []).map((a, i) => (
-                  <div key={i} className="flex items-start gap-2 text-xs">
-                    <div
-                      className="h-2 w-2 rounded-full mt-1 shrink-0"
-                      style={{ background: a.riskFlag ? RISK_COLORS[a.riskFlag] : "#6b7280" }}
-                    />
-                    <div className="flex-1 min-w-0">
-                      <p className="font-medium truncate">{a.vesselName}</p>
-                      <p className="text-muted-foreground">{a.berth} · {a.cargoType}</p>
-                      <p className="text-muted-foreground">ETA: {formatEta(a.eta)}</p>
-                    </div>
-                  </div>
-                ))}
-              </CardContent>
-            </Card>
-
-          </div>
-        </div>
-      </div>
-    </DashboardLayout>
-  );
-}
+PLACEHOLDER_WILL_NOT_PUSH
\ No newline at end of file

From 851f1209715fb7251c2d3568dac2e962c9a4103b Mon Sep 17 00:00:00 2001
From: munisp <155237317+munisp@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:49:16 -0400
Subject: [PATCH 11/14] =?UTF-8?q?Phase=2017=20(G6):=20fix=20heatmap=20togg?=
 =?UTF-8?q?le=20=E2=80=94=20attach=20to=20mapRef,=20not=20window.=5F=5Fmap?=
 =?UTF-8?q?=5F=5F=20(also=20repairs=20file=20content=20after=20bad=20inter?=
 =?UTF-8?q?mediate=20push)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/app/CargoTrackingMap.tsx | 587 +++++++++++++++++++++-
 1 file changed, 586 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/app/CargoTrackingMap.tsx b/client/src/pages/app/CargoTrackingMap.tsx
index 798d2bb2..c1d14a51 100644
--- a/client/src/pages/app/CargoTrackingMap.tsx
+++ b/client/src/pages/app/CargoTrackingMap.tsx
@@ -1 +1,586 @@
-PLACEHOLDER_WILL_NOT_PUSH
\ No newline at end of file
+/**
+ * Sprint 66 — Cargo Tracking Real-Time Map
+ * Live AIS vessel positions on Google Maps with animated markers,
+ * route polylines, 30-second refresh, and shipment info panel.
+ */
+
+import { useRef, useEffect, useCallback, useState } from "react";
+import DashboardLayout from "@/components/DashboardLayout";
+import { MapView } from "@/components/Map";
+import { trpc } from "@/lib/trpc";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import {
+  Anchor, Ship, Navigation, AlertTriangle, RefreshCw,
+  Clock, MapPin, Gauge, Compass, Package, Radio,
+  Filter, X, ChevronRight, Activity, Wifi, WifiOff, Layers,
+} from "lucide-react";
+import { useVesselWebSocket } from "@/hooks/useVesselWebSocket";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import type { inferRouterOutputs } from "@trpc/server";
+import type { AppRouter } from "../../../../server/routers";
+
+// ─── TYPES ────────────────────────────────────────────────────────────────────
+
+// The vessel shape is derived from the cargoTracking router output — the
+// persisted AIS store is the only source, and fields it does not track
+// (call sign, draught, length, origin port, declaration linkage) are NOT
+// shown here rather than rendered from the removed synthetic fleet.
+type RouterOutputs = inferRouterOutputs<AppRouter>;
+type Vessel = RouterOutputs["cargoTracking"]["getLiveVessels"]["vessels"][number];
+
+// ─── HELPERS ──────────────────────────────────────────────────────────────────
+
+const RISK_COLORS: Record<string, string> = {
+  green: "#22c55e",
+  amber: "#f59e0b",
+  red: "#ef4444",
+};
+
+const STATUS_COLORS: Record<string, string> = {
+  underway: "#3b82f6",
+  moored: "#8b5cf6",
+  anchored: "#f59e0b",
+  restricted: "#ef4444",
+  aground: "#dc2626",
+};
+
+const VESSEL_ICONS: Record<string, string> = {
+  container: "🚢",
+  bulk: "⛴️",
+  tanker: "🛢️",
+  general: "🚢",
+  roro: "🚗",
+  passenger: "🛳️",
+};
+
+function formatEta(eta: string | null): string {
+  if (!eta) return "—";
+  const d = new Date(eta);
+  const now = new Date();
+  const diffH = Math.round((d.getTime() - now.getTime()) / 3600000);
+  if (diffH < 0) return "Arrived";
+  if (diffH < 1) return "< 1 hour";
+  if (diffH < 24) return `${diffH}h`;
+  return `${Math.round(diffH / 24)}d`;
+}
+
+function formatTime(iso: string): string {
+  return new Date(iso).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+
+function flagEmoji(code: string): string {
+  const flags: Record<string, string> = {
+    LR: "🇱🇷", TW: "🇹🇼", GH: "🇬🇭", KE: "🇰🇪",
+    AE: "🇦🇪", DK: "🇩🇰", EG: "🇪🇬",
+  };
+  return flags[code] ?? "🏳️";
+}
+
+// ─── COMPONENT ────────────────────────────────────────────────────────────────
+
+export default function CargoTrackingMap() {
+  const mapRef = useRef<google.maps.Map | null>(null);
+  const markersRef = useRef<Map<string, google.maps.marker.AdvancedMarkerElement>>(new Map());
+  const polylinesRef = useRef<Map<string, google.maps.Polyline>>(new Map());
+  const routePolylineRef = useRef<google.maps.Polyline | null>(null);
+
+  const [selectedVessel, setSelectedVessel] = useState<Vessel | null>(null);
+  const [riskFilter, setRiskFilter] = useState<"all" | "green" | "amber" | "red">("all");
+  const [statusFilter, setStatusFilter] = useState<"all" | "underway" | "moored" | "anchored">("all");
+  const [lastRefresh, setLastRefresh] = useState<Date>(new Date());
+  const [mapReady, setMapReady] = useState(false);
+  const [showHeatmap, setShowHeatmap] = useState(false);
+  const heatmapLayerRef = useRef<any>(null);
+
+  // ─── SPRINT 70: WebSocket real-time push ─────────────────────────────────────
+
+  const { vessels: wsVessels, connectionStatus, lastRefresh: wsLastRefresh } = useVesselWebSocket(true);
+  // Use WebSocket data when live, fall back to tRPC polling otherwise
+  const isWsLive = connectionStatus === "live";
+
+  // ─── DATA FETCHING (polling fallback) ────────────────────────────────────────────────
+
+  const { data: vesselData, refetch: refetchVessels, isLoading: vesselsLoading, isError: vesselsError, refetch: retryVessels } = trpc.cargoTracking.getLiveVessels.useQuery(
+    { riskFilter, statusFilter },
+    // Only poll when WebSocket is not live
+    { refetchInterval: isWsLive ? false : 30000 }
+  );
+
+  const { data: statsData, isError: statsError } = trpc.cargoTracking.getVesselStats.useQuery(undefined, {
+    refetchInterval: 30000,
+  });
+
+  const { data: arrivalsData, isError: arrivalsError } = trpc.cargoTracking.getPortArrivals.useQuery(undefined, {
+    refetchInterval: 60000,
+  });
+
+  const trackingUnavailable = !isWsLive && (vesselsError || statsError || arrivalsError);
+
+  const { data: routeData } = trpc.cargoTracking.getVesselRoute.useQuery(
+    { mmsi: selectedVessel?.mmsi ?? "" },
+    { enabled: !!selectedVessel }
+  );
+  const { data: heatmapData } = trpc.cargoTracking.getCargoHeatmapData.useQuery(
+    { hours: 24, limit: 500 },
+    { enabled: showHeatmap, staleTime: 120000 }
+  );
+
+  // ─── MAP INITIALISATION ─────────────────────────────────────────────────────
+
+  const handleMapReady = useCallback((map: google.maps.Map) => {
+    mapRef.current = map;
+    setMapReady(true);
+  }, []);
+
+  // ─── MARKER MANAGEMENT ──────────────────────────────────────────────────────
+
+  const updateMarkers = useCallback((vessels: Vessel[]) => {
+    if (!mapRef.current || !window.google) return;
+
+    const currentIds = new Set(vessels.map(v => v.id));
+
+    // Remove stale markers
+    markersRef.current.forEach((marker, id) => {
+      if (!currentIds.has(id)) {
+        marker.map = null;
+        markersRef.current.delete(id);
+      }
+    });
+
+    vessels.forEach(vessel => {
+      const position = { lat: vessel.lat, lng: vessel.lon };
+      const riskColor = vessel.riskFlag ? RISK_COLORS[vessel.riskFlag] : "#6b7280";
+      const icon = VESSEL_ICONS[vessel.vesselType ?? ""] ?? "🚢";
+
+      // Create marker element
+      const el = document.createElement("div");
+      el.style.cssText = `
+        display: flex; flex-direction: column; align-items: center; cursor: pointer;
+        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
+        transition: transform 0.3s ease;
+      `;
+
+      const bubble = document.createElement("div");
+      bubble.style.cssText = `
+        background: ${riskColor}; color: white; border-radius: 50%;
+        width: 36px; height: 36px; display: flex; align-items: center;
+        justify-content: center; font-size: 18px; border: 2px solid white;
+        box-shadow: 0 0 0 2px ${riskColor}40;
+        transform: rotate(${vessel.heading}deg);
+      `;
+      bubble.textContent = icon;
+
+      const label = document.createElement("div");
+      label.style.cssText = `
+        background: rgba(0,0,0,0.75); color: white; font-size: 10px;
+        padding: 2px 6px; border-radius: 4px; margin-top: 2px;
+        white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
+      `;
+      label.textContent = vessel.vesselName;
+
+      el.appendChild(bubble);
+      el.appendChild(label);
+
+      const existing = markersRef.current.get(vessel.id);
+      if (existing) {
+        // Animate to new position
+        existing.position = position;
+        (existing as any).content = el;
+      } else {
+        const marker = new google.maps.marker.AdvancedMarkerElement({
+          map: mapRef.current!,
+          position,
+          title: vessel.vesselName,
+          content: el,
+        });
+        marker.addListener("click", () => setSelectedVessel(vessel));
+        markersRef.current.set(vessel.id, marker);
+      }
+    });
+
+    setLastRefresh(new Date());
+  }, []);
+
+  // ─── ROUTE POLYLINE ─────────────────────────────────────────────────────────
+
+  const drawRoute = useCallback((vessel: Vessel, waypoints: Array<{ lat: number; lon: number }>) => {
+    if (!mapRef.current || !window.google) return;
+
+    // Clear previous route
+    if (routePolylineRef.current) {
+      routePolylineRef.current.setMap(null);
+    }
+
+    const path = waypoints.map(wp => ({ lat: wp.lat, lng: wp.lon }));
+
+    // Dashed historical track
+    routePolylineRef.current = new google.maps.Polyline({
+      path,
+      geodesic: true,
+      strokeColor: vessel.riskFlag ? RISK_COLORS[vessel.riskFlag] : "#6b7280",
+      strokeOpacity: 0.8,
+      strokeWeight: 2,
+      icons: [{
+        icon: { path: google.maps.SymbolPath.FORWARD_OPEN_ARROW, scale: 3 },
+        offset: "50%",
+        repeat: "80px",
+      }],
+      map: mapRef.current,
+    });
+
+    // Pan map to show full route
+    const bounds = new google.maps.LatLngBounds();
+    path.forEach(p => bounds.extend(p));
+    mapRef.current.fitBounds(bounds, { top: 60, right: 60, bottom: 60, left: 60 });
+  }, []);
+
+  const clearRoute = useCallback(() => {
+    if (routePolylineRef.current) {
+      routePolylineRef.current.setMap(null);
+      routePolylineRef.current = null;
+    }
+  }, []);
+
+  //   // ─── EFFECTS ────────────────────────────────────────────────────────
+
+  // Sprint 70: update markers from WebSocket when live
+  useEffect(() => {
+    if (mapReady && isWsLive && wsVessels.length > 0) {
+      // Merge WS position updates into the full vessel objects from tRPC
+      const fullVessels = vesselData?.vessels ?? [];
+      const wsMap = new Map(wsVessels.map(v => [v.mmsi, v]));
+      const merged = fullVessels.map(v => {
+        const ws = wsMap.get(v.mmsi);
+        if (!ws) return v;
+        return { ...v, lat: ws.lat, lon: ws.lon, speed: ws.speed, heading: ws.heading, lastUpdate: ws.lastUpdate };
+      });
+      updateMarkers(merged.length > 0 ? merged : fullVessels);
+      if (wsLastRefresh) setLastRefresh(new Date(wsLastRefresh));
+    }
+  }, [mapReady, isWsLive, wsVessels, vesselData, wsLastRefresh, updateMarkers]);
+
+  // Fallback: update markers from tRPC polling when WS is not live
+  useEffect(() => {
+    if (mapReady && !isWsLive && vesselData?.vessels) {
+      updateMarkers(vesselData.vessels);
+    }
+  }, [mapReady, isWsLive, vesselData, updateMarkers]);
+
+  useEffect(() => {
+    if (selectedVessel && routeData?.waypoints && mapReady) {
+      drawRoute(selectedVessel, routeData.waypoints);
+    } else if (!selectedVessel) {
+      clearRoute();
+    }
+  }, [selectedVessel, routeData, mapReady, drawRoute, clearRoute]);
+
+  // ─── RENDER ─────────────────────────────────────────────────────────────────
+
+  const vessels: Vessel[] = vesselData?.vessels ?? [];
+
+  // v100: Apply/remove heatmap layer when toggle changes
+  useEffect(() => {
+    if (!mapReady || typeof google === 'undefined') return;
+    if (showHeatmap && heatmapData && heatmapData.length > 0) {
+      if (heatmapLayerRef.current) {
+        heatmapLayerRef.current.setMap(null);
+      }
+      const points = heatmapData.map((p: { lat: number; lng: number; weight: number }) =>
+        new google.maps.LatLng(p.lat, p.lng)
+      );
+      heatmapLayerRef.current = new (google.maps.visualization as any).HeatmapLayer({
+        data: points,
+        radius: 40,
+      });
+      // Phase 17 (G6): attach to the real map instance from onMapReady —
+      // (window).__map__ was never set by Map.tsx, so this silently no-op'd.
+      if (mapRef.current) {
+        heatmapLayerRef.current.setMap(mapRef.current);
+      }
+    } else if (!showHeatmap && heatmapLayerRef.current) {
+      heatmapLayerRef.current.setMap(null);
+      heatmapLayerRef.current = null;
+    }
+  }, [showHeatmap, heatmapData, mapReady]);
+
+
+  return (
+    <DashboardLayout title="Cargo Tracking — Live AIS Map">
+      <div className="flex flex-col gap-4 h-full">
+
+        {trackingUnavailable && (
+          <div role="alert" className="flex items-center justify-between gap-3 rounded-lg border border-destructive/40 bg-destructive/10 px-4 py-2.5">
+            <p className="text-sm text-destructive">
+              Live tracking data is unavailable — figures below are not shown rather than stale values. The map may be empty until the connection recovers.
+            </p>
+            <Button variant="outline" size="sm" onClick={() => retryVessels()}>Retry</Button>
+          </div>
+        )}
+        {vesselsLoading && !vesselData && !isWsLive && (
+          <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3" aria-busy="true" aria-label="Loading vessel statistics">
+            {Array.from({ length: 7 }).map((_, i) => (
+              <div key={i} className="h-16 animate-pulse rounded-lg bg-muted" />
+            ))}
+          </div>
+        )}
+
+        {/* ── HEADER STATS ── */}
+        <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3">
+          {[
+            { label: "Total Vessels", value: statsData?.total, icon: Ship, color: "text-blue-400" },
+            { label: "Underway", value: statsData?.underway, icon: Navigation, color: "text-blue-400" },
+            { label: "Moored", value: statsData?.moored, icon: Anchor, color: "text-purple-400" },
+            { label: "Anchored", value: statsData?.anchored, icon: Anchor, color: "text-yellow-400" },
+            { label: "Red Flag", value: statsData?.redFlag, icon: AlertTriangle, color: "text-red-400" },
+            { label: "Amber Flag", value: statsData?.amberFlag, icon: AlertTriangle, color: "text-yellow-400" },
+            { label: "Declared", value: statsData?.withDeclaration, icon: Package, color: "text-green-400" },
+          ].map(stat => (
+            <Card key={stat.label} className="bg-card/50">
+              <CardContent className="p-3 flex items-center gap-2">
+                <stat.icon className={`h-4 w-4 shrink-0 ${stat.color}`} />
+                <div>
+                  <p className="text-xs text-muted-foreground leading-none">{stat.label}</p>
+                  <p className="text-lg font-bold leading-tight">{stat.value ?? "—"}</p>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {/* ── CONTROLS ── */}
+        <div className="flex flex-wrap items-center gap-3">
+          <div className="flex items-center gap-2">
+            <Filter className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">Filter:</span>
+          </div>
+          <Select value={riskFilter} onValueChange={v => setRiskFilter(v as typeof riskFilter)}>
+            <SelectTrigger className="w-36 h-8 text-xs">
+              <SelectValue placeholder="Risk Flag" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Risk Flags</SelectItem>
+              <SelectItem value="green">Green</SelectItem>
+              <SelectItem value="amber">Amber</SelectItem>
+              <SelectItem value="red">Red</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select value={statusFilter} onValueChange={v => setStatusFilter(v as typeof statusFilter)}>
+            <SelectTrigger className="w-36 h-8 text-xs">
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Statuses</SelectItem>
+              <SelectItem value="underway">Underway</SelectItem>
+              <SelectItem value="moored">Moored</SelectItem>
+              <SelectItem value="anchored">Anchored</SelectItem>
+            </SelectContent>
+          </Select>
+          <div className="ml-auto flex items-center gap-2 text-xs text-muted-foreground">
+            {/* Sprint 70: WebSocket connection status badge */}
+            {connectionStatus === "live" ? (
+              <>
+                <Wifi className="h-3 w-3 text-green-400" />
+                <span className="text-green-500 font-medium">Live</span>
+              </>
+            ) : connectionStatus === "reconnecting" ? (
+              <>
+                <WifiOff className="h-3 w-3 text-yellow-400 animate-pulse" />
+                <span className="text-yellow-500">Reconnecting…</span>
+              </>
+            ) : connectionStatus === "fallback" ? (
+              <>
+                <Activity className="h-3 w-3 text-blue-400 animate-pulse" />
+                <span>Polling — 30s</span>
+              </>
+            ) : (
+              <>
+                <Activity className="h-3 w-3 text-muted-foreground animate-pulse" />
+                <span>Connecting…</span>
+              </>
+            )}
+            <span>·</span>
+            <span>Last: {formatTime(lastRefresh.toISOString())}</span>
+            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => refetchVessels()}>
+              <RefreshCw className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        </div>
+
+        {/* ── MAIN CONTENT ── */}
+        <div className="flex gap-4 flex-1 min-h-0">
+
+          {/* MAP */}
+          <div className="flex-1 min-w-0 rounded-lg overflow-hidden border border-border">
+            <MapView
+              className="w-full h-full min-h-[500px]"
+              initialCenter={{ lat: -4.05, lng: 39.67 }}
+              initialZoom={10}
+              onMapReady={handleMapReady}
+            />
+          </div>
+
+          {/* SIDE PANEL */}
+          <div className="w-80 shrink-0 flex flex-col gap-3 overflow-y-auto max-h-[680px]">
+
+            {/* Selected vessel detail */}
+            {selectedVessel ? (
+              <Card className="border-primary/50">
+                <CardHeader className="pb-2">
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <CardTitle className="text-sm flex items-center gap-2">
+                        <span>{VESSEL_ICONS[selectedVessel.vesselType ?? ""] ?? "🚢"}</span>
+                        <span>{selectedVessel.vesselName}</span>
+                      </CardTitle>
+                      <p className="text-xs text-muted-foreground mt-0.5">
+                        {flagEmoji(selectedVessel.flagCountry)} {selectedVessel.flagCountry || "—"}
+                      </p>
+                    </div>
+                    <Button variant="ghost" size="icon" className="h-6 w-6 -mt-1" onClick={() => setSelectedVessel(null)}>
+                      <X className="h-3.5 w-3.5" />
+                    </Button>
+                  </div>
+                  <div className="flex gap-1.5 flex-wrap mt-1">
+                    {selectedVessel.riskFlag && (
+                      <Badge
+                        variant="outline"
+                        className="text-xs"
+                        style={{ borderColor: RISK_COLORS[selectedVessel.riskFlag], color: RISK_COLORS[selectedVessel.riskFlag] }}
+                      >
+                        {selectedVessel.riskFlag.toUpperCase()} RISK
+                      </Badge>
+                    )}
+                    <Badge
+                      variant="outline"
+                      className="text-xs"
+                      style={{ borderColor: STATUS_COLORS[selectedVessel.status] ?? "#6b7280", color: STATUS_COLORS[selectedVessel.status] ?? "#6b7280" }}
+                    >
+                      {selectedVessel.status.toUpperCase()}
+                    </Badge>
+                    <Badge variant="secondary" className="text-xs capitalize">
+                      {selectedVessel.cargoType}
+                    </Badge>
+                  </div>
+                </CardHeader>
+                <CardContent className="pt-0 space-y-2 text-xs">
+                  <div className="grid grid-cols-2 gap-x-4 gap-y-1.5">
+                    {/* Only fields the persisted AIS store actually tracks are
+                        shown — draught/length/call-sign are not tracked and were
+                        dropped with the removed synthetic fleet. */}
+                    {[
+                      { label: "MMSI", value: selectedVessel.mmsi, icon: Radio },
+                      { label: "IMO", value: selectedVessel.imoNumber || "—", icon: Ship },
+                      { label: "Speed", value: `${selectedVessel.speed} kn`, icon: Gauge },
+                      { label: "Heading", value: `${selectedVessel.heading}°`, icon: Compass },
+                    ].map(item => (
+                      <div key={item.label} className="flex items-center gap-1.5">
+                        <item.icon className="h-3 w-3 text-muted-foreground shrink-0" />
+                        <span className="text-muted-foreground">{item.label}:</span>
+                        <span className="font-medium">{item.value}</span>
+                      </div>
+                    ))}
+                  </div>
+                  <Separator />
+                  <div className="space-y-1">
+                    <div className="flex items-center gap-1.5">
+                      <MapPin className="h-3 w-3 text-green-400 shrink-0" />
+                      <span className="text-muted-foreground">Destination:</span>
+                      <span className="font-medium">{selectedVessel.destinationPort || "—"}</span>
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      <Clock className="h-3 w-3 text-muted-foreground shrink-0" />
+                      <span className="text-muted-foreground">ETA:</span>
+                      <span className="font-medium">{formatEta(selectedVessel.eta)}</span>
+                    </div>
+                  </div>
+                  <div className="text-[10px] text-muted-foreground pt-1">
+                    Last AIS update: {formatTime(selectedVessel.lastUpdate)} · Source: sedona-svc
+                  </div>
+                  {routeData?.waypoints && (
+                    <div className="text-[10px] text-blue-400">
+                      Route polyline: {routeData.waypoints.length} waypoints plotted
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            ) : (
+              <Card className="border-dashed">
+                <CardContent className="p-4 text-center text-sm text-muted-foreground">
+                  <Ship className="h-8 w-8 mx-auto mb-2 opacity-30" />
+                  <p>Click any vessel marker on the map to view details and route history.</p>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Vessel list */}
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm flex items-center gap-2">
+                  <Ship className="h-4 w-4" />
+                  Active Vessels ({vessels.length})
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="pt-0 space-y-1 max-h-60 overflow-y-auto">
+                {vessels.map(v => (
+                  <button
+                    key={v.id}
+                    onClick={() => {
+                      setSelectedVessel(v);
+                      if (mapRef.current) {
+                        mapRef.current.panTo({ lat: v.lat, lng: v.lon });
+                        mapRef.current.setZoom(12);
+                      }
+                    }}
+                    className={`w-full text-left flex items-center gap-2 p-2 rounded hover:bg-accent transition-colors text-xs ${selectedVessel?.id === v.id ? "bg-accent" : ""}`}
+                  >
+                    <span className="text-base">{VESSEL_ICONS[v.vesselType ?? ""] ?? "🚢"}</span>
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium truncate">{v.vesselName}</p>
+                      <p className="text-muted-foreground capitalize">{v.status} · {v.speed} kn</p>
+                    </div>
+                    {v.riskFlag && (
+                      <div
+                        className="h-2 w-2 rounded-full shrink-0"
+                        style={{ background: RISK_COLORS[v.riskFlag] }}
+                      />
+                    )}
+                    <ChevronRight className="h-3 w-3 text-muted-foreground shrink-0" />
+                  </button>
+                ))}
+              </CardContent>
+            </Card>
+
+            {/* Upcoming arrivals */}
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm flex items-center gap-2">
+                  <Anchor className="h-4 w-4" />
+                  Upcoming Arrivals
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="pt-0 space-y-2">
+                {(arrivalsData?.arrivals ?? []).map((a, i) => (
+                  <div key={i} className="flex items-start gap-2 text-xs">
+                    <div
+                      className="h-2 w-2 rounded-full mt-1 shrink-0"
+                      style={{ background: a.riskFlag ? RISK_COLORS[a.riskFlag] : "#6b7280" }}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium truncate">{a.vesselName}</p>
+                      <p className="text-muted-foreground">{a.berth} · {a.cargoType}</p>
+                      <p className="text-muted-foreground">ETA: {formatEta(a.eta)}</p>
+                    </div>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+
+          </div>
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+}

From 4a47cce4dc48039cf7af906a5c9e4a7afe878d47 Mon Sep 17 00:00:00 2001
From: munisp <155237317+munisp@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:50:10 -0400
Subject: [PATCH 12/14] noop

---
 client/src/App.tsx | 828 +--------------------------------------------
 1 file changed, 1 insertion(+), 827 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index afe237b9..311c8dd0 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,827 +1 @@
-import { PageSkeleton as _PageSkeleton } from "@/components/LoadingIndicator";
-import { Toaster } from "@/components/ui/sonner";
-import DemoModeBanner from "@/components/DemoModeBanner";
-import OfflineBanner from "@/components/OfflineBanner";
-import InstallPrompt from "@/components/InstallPrompt";
-import MobileBottomNav from "@/components/MobileBottomNav";
-import { TooltipProvider } from "@/components/ui/tooltip";
-import NotFound from "@/pages/NotFound";
-import { Route, Switch, Redirect } from "wouter";
-import ErrorBoundary from "./components/ErrorBoundary";
-import { ThemeProvider } from "./contexts/ThemeContext";
-import { AdminGuard, CustomsGuard, OGAGuard, FinanceGuard, SecurityGuard, ExecutiveGuard } from "./components/RoleGuard";
-import Home from "./pages/Home";
-import TraderDashboard from "./pages/app/TraderDashboard";
-import NewDeclaration from "./pages/app/NewDeclaration";
-import CustomsDashboard from "./pages/app/CustomsDashboard";
-import OGAPortal from "./pages/app/OGAPortal";
-import OGAExpiryCalendar from "./pages/app/OGAExpiryCalendar";
-import AdminConsole from "./pages/app/AdminConsole";
-import SecurityOps from "./pages/app/SecurityOps";
-import DeclarationDetail from "./pages/app/DeclarationDetail";
-import KYCPortal from "./pages/app/KYCPortal";
-import VisionAnalysis from "./pages/app/VisionAnalysis";
-import AIAssistant from "./pages/app/AIAssistant";
-import DocumentVault from "./pages/app/DocumentVault";
-import ShareLanding from "./pages/ShareLanding";
-import AdminKYCReview from "./pages/app/AdminKYCReview";
-import PortHeatmap from "./pages/app/PortHeatmap";
-// Lazy-load the specification page (it's large))
-import { lazy, Suspense } from "react";
-const Specification = lazy(() => import("./pages/Specification"));
-// Lazy-load heavy pages
-const SanctionsScreening = lazy(() => import("./pages/app/SanctionsScreening"));
-const MojaloopPayments = lazy(() => import("./pages/app/MojaloopPayments"));
-const TemporalWorkflows = lazy(() => import("./pages/app/TemporalWorkflows"));
-const TraderProfile = lazy(() => import("./pages/app/TraderProfile"));
-const TraderAEO = lazy(() => import("./pages/app/TraderAEO"));
-const AeoSelfAssessment = lazy(() => import("./pages/app/AeoSelfAssessment"));
-const PortCongestionForecast = lazy(() => import("./pages/app/PortCongestionForecast"));
-const SecureChain = lazy(() => import("./pages/app/SecureChain"));
-const AdminUsers = lazy(() => import("./pages/app/AdminUsers"));
-const AdminDeclarations = lazy(() => import("./pages/app/AdminDeclarations"));
-const AdminAEO = lazy(() => import("./pages/app/AdminAEO"));
-const AdminAnalytics = lazy(() => import("./pages/app/AdminAnalytics"));
-const CustomsRisk = lazy(() => import("./pages/app/CustomsRisk"));
-const TraderDeclarations = lazy(() => import("./pages/app/TraderDeclarations"));
-// Phase 8 — PCS Trader Portal
-const PcsConsignments = lazy(() => import("./pages/app/PcsConsignments"));
-const PcsConsignmentTimeline = lazy(() => import("./pages/app/PcsConsignmentTimeline"));
-const PcsBookings = lazy(() => import("./pages/app/PcsBookings"));
-const PcsBilling = lazy(() => import("./pages/app/PcsBilling"));
-const PcsDocuments = lazy(() => import("./pages/app/PcsDocuments"));
-// Phase 16 — PCS port-operations boards (port-interop read-through)
-const PcsPortCallStatus = lazy(() => import("./pages/app/PcsPortCallStatus"));
-const PcsVesselTracking = lazy(() => import("./pages/app/PcsVesselTracking"));
-const PcsBerthOccupancy = lazy(() => import("./pages/app/PcsBerthOccupancy"));
-// Phase 16 — AEO fast-lane admin + transshipment lane
-const AdminAeoFastLane = lazy(() => import("./pages/app/AdminAeoFastLane"));
-const TransshipmentWizard = lazy(() => import("./pages/app/TransshipmentWizard"));
-const TransshipmentList = lazy(() => import("./pages/app/TransshipmentList"));
-const TransshipmentDetail = lazy(() => import("./pages/app/TransshipmentDetail"));
-const Notifications = lazy(() => import("./pages/app/Notifications"));
-const Finance = lazy(() => import("./pages/app/Finance"));
-const PostClearanceAudit = lazy(() => import("./pages/app/PostClearanceAudit"));
-const DutyDrawback = lazy(() => import('./pages/app/DutyDrawback'));
-const PaymentQueue = lazy(() => import('./pages/app/PaymentQueue'));
-const KnowledgeGraph = lazy(() => import('./pages/app/KnowledgeGraph'));
-const BalanceAccounts = lazy(() => import('./pages/app/BalanceAccounts'));
-const FraudNetwork = lazy(() => import('./pages/app/FraudNetwork'));
-const FraudCases = lazy(() => import('./pages/app/FraudCases'));
-const RiskAlerts = lazy(() => import('./pages/app/RiskAlerts'));
-const MyCertificates = lazy(() => import('./pages/app/MyCertificates'));
-const OfficerWorkload = lazy(() => import('./pages/app/OfficerWorkload'));
-const NotificationCentre = lazy(() => import('./pages/app/NotificationCentre'));
-const SLABreachDashboard = lazy(() => import('./pages/app/SLABreachDashboard'));
-const NotificationPreferences = lazy(() => import('./pages/app/NotificationPreferences'));
-const FinanceLedger = lazy(() => import('./pages/FinanceLedger'));
-const TradeFinanceConsents = lazy(() => import('./pages/TradeFinanceConsents'));
-const TradeFinanceApply = lazy(() => import('./pages/TradeFinanceApply'));
-const TradeFinanceStatus = lazy(() => import('./pages/TradeFinanceStatus'));
-const IdentityProvider = lazy(() => import('./pages/IdentityProvider'));
-const BondedWarehouse = lazy(() => import('./pages/app/BondedWarehouse'));
-const AseanSingleWindow = lazy(() => import('./pages/app/AseanSingleWindow'));
-const WcoCenAlerts = lazy(() => import('./pages/app/WcoCenAlerts'));
-const FreeZoneOps = lazy(() => import('./pages/app/FreeZoneOps'));
-const DeveloperPortal = lazy(() => import('./pages/app/DeveloperPortal'));
-const Marketplace = lazy(() => import('./pages/app/Marketplace'));
-// Phase 12 — Stakeholder-360 CRM + marketplace monetization
-const Stakeholder360 = lazy(() => import('./pages/app/Stakeholder360'));
-const CaseList = lazy(() => import('./pages/app/CaseList'));
-const CaseDetail = lazy(() => import('./pages/app/CaseDetail'));
-const MarketplacePortal = lazy(() => import('./pages/app/MarketplacePortal'));
-const OperationalKpis = lazy(() => import('./pages/app/OperationalKpis'));
-const ThreatIntelligence = lazy(() => import('./pages/app/ThreatIntelligence'));
-const WazuhSecurityEvents = lazy(() => import('./pages/app/WazuhSecurityEvents'));
-const RiskModelDashboard = lazy(() => import('./pages/app/RiskModelDashboard'));
-const TradeAnalytics = lazy(() => import('./pages/app/TradeAnalytics'));
-const TenantPortal = lazy(() => import('./pages/app/TenantPortal'));
-const FlinkCepAlerts = lazy(() => import('./pages/FlinkCepAlerts'));
-const CostManagement = lazy(() => import('./pages/CostManagement'));
-const SecurityOperationsCentre = lazy(() => import('./pages/app/SecurityOperationsCentre'));
-const AuditEngineDashboard = lazy(() => import('./pages/app/AuditEngineDashboard'));
-const BondedWarehouseManagement = lazy(() => import('./pages/app/BondedWarehouseManagement'));
-const DrawbackAutomation = lazy(() => import('./pages/app/DrawbackAutomation'));
-const TraderScorecard = lazy(() => import('./pages/app/TraderScorecard'));
-// Sprint 66 — Cargo Tracking Real-Time Map
-const CargoTrackingMap = lazy(() => import('./pages/app/CargoTrackingMap'));
-// Sprint 67 — Trader Onboarding Wizard
-const TraderOnboarding = lazy(() => import('./pages/app/TraderOnboarding'));
-// Sprint 68 — OpenAPI Explorer
-const ApiExplorer = lazy(() => import('./pages/app/ApiExplorer'));
-const SdkGenerator = lazy(() => import('./pages/app/SdkGenerator'));
-// Sprint 72-74 — Onboarding Analytics, Geofence Management, Webhook Management, API Changelog
-const OnboardingAnalyticsDashboard = lazy(() => import('./pages/app/OnboardingAnalyticsDashboard'));
-const GeofenceManagement = lazy(() => import('./pages/app/GeofenceManagement'));
-const WebhookManagement = lazy(() => import('./pages/app/WebhookManagement'));
-const ApiChangelog = lazy(() => import('./pages/app/ApiChangelog'));
-const RulesOfOrigin = lazy(() => import('./pages/app/RulesOfOrigin'));
-const PilotDashboard = lazy(() => import('./pages/app/PilotDashboard'));
-const ExecutiveDashboard = lazy(() => import('./pages/app/ExecutiveDashboard'));
-const ComplianceEmailSettings = lazy(() => import('./pages/app/ComplianceEmailSettings'));
-const AdminSettings = lazy(() => import('./pages/app/AdminSettings'));
-const CertRevocationLog = lazy(() => import('./pages/app/CertRevocationLog'));
-// Sprint 80 — Public certificate verification page (no auth required)
-const GoLiveChecklist = lazy(() => import('./pages/app/GoLiveChecklist'));
-const AdminProductionChecklist = lazy(() => import('./pages/app/AdminProductionChecklist'));
-const ServiceHealth = lazy(() => import('./pages/app/ServiceHealth'));
-const AuditLog = lazy(() => import('./pages/app/AuditLog'));
-const CertVerify = lazy(() => import('./pages/public/CertVerify'));
-const SystemStatus = lazy(() => import('./pages/SystemStatus'));
-const DemoLogin = lazy(() => import('./pages/DemoLogin'));
-const NLFinancialQuery = lazy(() => import('./pages/app/NLFinancialQuery'));
-// v31 — New production pages
-const Payments = lazy(() => import('./pages/app/Payments'));
-const AEOApplications = lazy(() => import('./pages/app/AEOApplications'));
-const BulkExport = lazy(() => import('./pages/app/BulkExport'));
-const WebhookLogs = lazy(() => import('./pages/app/WebhookLogs'));
-const SecurityAlerts = lazy(() => import('./pages/app/SecurityAlerts'));
-const TenantManagement = lazy(() => import('./pages/app/TenantManagement'));
-const TenantBranding = lazy(() => import('./pages/app/TenantBranding'));
-const OfficerWorkloadRebalancer = lazy(() => import('./pages/app/OfficerWorkloadRebalancer'));
-const OnboardingProgress = lazy(() => import('./pages/app/OnboardingProgress'));
-// v67 — Insider Threat Prevention & Batch Seed
-const SecurityMonitor = lazy(() => import('./pages/app/SecurityMonitor'));
-const KafkaEventLog = lazy(() => import('./pages/app/KafkaEventLog'));
-const OGAPermitAuditTrail = lazy(() => import('./pages/app/OGAPermitAuditTrail'));
-const AdminBatchSeed = lazy(() => import('./pages/app/AdminBatchSeed'));
-// v81 — Temporal Runs, WAF Events, Lakehouse Jobs
-const TemporalWorkflowRuns = lazy(() => import('./pages/app/TemporalWorkflowRuns'));
-const WafEvents = lazy(() => import('./pages/app/WafEvents'));
-const LakehouseJobs = lazy(() => import('./pages/app/LakehouseJobs'));
-const GeoipSeed = lazy(() => import('./pages/app/GeoipSeed'));
-// v88-v91, v104 — Middleware & Platform pages
-const FluvioTopicOffsets = lazy(() => import('./pages/FluvioTopicOffsets'));
-const ApisixRouteAudit = lazy(() => import('./pages/ApisixRouteAudit'));
-const KeycloakSessions = lazy(() => import('./pages/KeycloakSessions'));
-const PermifyAuditLog = lazy(() => import('./pages/PermifyAuditLog'));
-const PlatformHealthScorecard = lazy(() => import('./pages/PlatformHealthScorecard'));
-const VisionBatchAnalysis = lazy(() => import('./pages/app/VisionBatchAnalysis'));
-const CronJobManager = lazy(() => import('./pages/admin/CronJobManager'));
-const AdminSystemStatus = lazy(() => import('./pages/admin/SystemStatus'));
-const KeycloakAdmin = lazy(() => import('./pages/admin/KeycloakAdmin'));
-const CorazaWafDashboard = lazy(() => import('./pages/admin/CorazaWafDashboard'));
-const HeartbeatAdmin = lazy(() => import('./pages/admin/HeartbeatAdmin'));
-// v136 sprint pages
-const ThresholdAuditLog = lazy(() => import('./pages/admin/ThresholdAuditLog'));
-const SanctionsBatchUpload = lazy(() => import('./pages/admin/SanctionsBatchUpload'));
-const OGABulkApprove = lazy(() => import('./pages/admin/OGABulkApprove'));
-const PostClearanceAuditScheduler = lazy(() => import('./pages/admin/PostClearanceAuditScheduler'));
-const ExportScheduleManager = lazy(() => import('./pages/app/ExportScheduleManager'));
-const AEORenewalWorkflow = lazy(() => import('./pages/app/AEORenewalWorkflow'));
-
-const AEORenewalComments = lazy(() => import("@/pages/app/AEORenewalComments"));
-const SanctionsEntitiesPage = lazy(() => import("@/pages/admin/SanctionsEntities"));
-const ScheduleAnalyticsPage = lazy(() => import("@/pages/app/ScheduleAnalytics"));
-const BatchValidationReportPage = lazy(() => import("@/pages/admin/BatchValidationReport"));
-const UCRManagement = lazy(() => import("@/pages/UCRManagement"));
-const ManifestManagement = lazy(() => import("@/pages/ManifestManagement"));
-const TradeAnalyticsDashboard = lazy(() => import("@/pages/TradeAnalyticsDashboard"));
-const NCSNRSDashboard = lazy(() => import("@/pages/NCSNRSDashboard"));
-
-
-const LazyFallback = () => <_PageSkeleton />;
-
-function Router() {
-  return (
-    <Switch>
-      {/* Demo mode role-picker login screen */}
-      <Route path="/demo">
-        <Suspense fallback={<LazyFallback />}><DemoLogin /></Suspense>
-      </Route>
-
-      {/* Public landing page */}
-      <Route path="/" component={Home} />
-
-      {/* Sprint 80 — Public certificate verification (no auth required, QR-scannable) */}
-      <Route path="/verify/:certNumber">
-        <Suspense fallback={<LazyFallback />}><CertVerify /></Suspense>
-      </Route>
-
-      {/* Public system status page — no authentication required */}
-      <Route path="/status">
-        <Suspense fallback={<LazyFallback />}><SystemStatus /></Suspense>
-      </Route>
-
-      {/* Architecture specification (all 29 interactive components) */}
-      <Route path="/specification">
-        <Suspense fallback={<LazyFallback />}>
-          <Specification />
-        </Suspense>
-      </Route>
-
-      {/* Trader Portal */}
-      <Route path="/app/trader" component={TraderDashboard} />
-      <Route path="/app/trader/new" component={NewDeclaration} />
-      <Route path="/app/trader/declarations">
-        <Suspense fallback={<LazyFallback />}><TraderDeclarations /></Suspense>
-      </Route>
-      <Route path="/app/trader/declarations/new" component={NewDeclaration} />
-      <Route path="/app/trader/declarations/:id" component={DeclarationDetail} />
-      <Route path="/app/trader/kyc" component={KYCPortal} />
-      <Route path="/app/trader/profile">
-        <Suspense fallback={<LazyFallback />}><TraderProfile /></Suspense>
-      </Route>
-      <Route path="/app/trader/aeo">
-        <Suspense fallback={<LazyFallback />}><TraderAEO /></Suspense>
-      </Route>
-      <Route path="/app/trader/aeo-self-assessment">
-        <Suspense fallback={<LazyFallback />}><AeoSelfAssessment /></Suspense>
-      </Route>
-
-      {/* Customs Officer Portal — B9: CustomsGuard wraps all /app/customs routes */}
-      <Route path="/app/customs"><CustomsGuard><CustomsDashboard /></CustomsGuard></Route>
-      <Route path="/app/customs/queue"><CustomsGuard><CustomsDashboard /></CustomsGuard></Route>
-      <Route path="/app/customs/declarations/:id"><CustomsGuard><DeclarationDetail /></CustomsGuard></Route>
-      <Route path="/app/customs/vision"><CustomsGuard><VisionAnalysis /></CustomsGuard></Route>
-      <Route path="/app/customs/vision-batch">
-        <CustomsGuard><Suspense fallback={<LazyFallback />}><VisionBatchAnalysis /></Suspense></CustomsGuard>
-      </Route>
-      <Route path="/app/customs/risk">
-        <CustomsGuard><Suspense fallback={<LazyFallback />}><CustomsRisk /></Suspense></CustomsGuard>
-      </Route>
-      <Route path="/app/customs/payments">
-        <CustomsGuard><Suspense fallback={<LazyFallback />}><MojaloopPayments /></Suspense></CustomsGuard>
-      </Route>
-      <Route path="/app/trader/payments">
-        <Suspense fallback={<LazyFallback />}><MojaloopPayments /></Suspense>
-      </Route>
-      <Route path="/app/customs/workflows">
-        <Suspense fallback={<LazyFallback />}><TemporalWorkflows /></Suspense>
-      </Route>
-
-      {/* OGA Portal */}
-      <Route path="/app/oga">{() => <OGAGuard><OGAPortal /></OGAGuard>}</Route>
-      <Route path="/app/nl-query">{() => <Suspense fallback={<LazyFallback />}><NLFinancialQuery /></Suspense>}</Route>
-      <Route path="/app/oga/expiry-calendar">{() => <OGAGuard><OGAExpiryCalendar /></OGAGuard>}</Route>
-
-      {/* Admin Console — B9: AdminGuard wraps all /app/admin routes */}
-      <Route path="/app/admin"><AdminGuard><AdminConsole /></AdminGuard></Route>
-      <Route path="/app/admin/kyc-review"><AdminGuard><AdminKYCReview /></AdminGuard></Route>
-      <Route path="/app/admin/users">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><AdminUsers /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/declarations">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><AdminDeclarations /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/aeo">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><AdminAEO /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/analytics">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><AdminAnalytics /></Suspense></AdminGuard>
-      </Route>
-
-      {/* Security Operations Center — B9: SecurityGuard wraps all /app/security routes */}
-      <Route path="/app/security"><SecurityGuard><SecurityOps /></SecurityGuard></Route>
-      <Route path="/app/security/sanctions">
-        <SecurityGuard><Suspense fallback={<LazyFallback />}><SanctionsScreening /></Suspense></SecurityGuard>
-      </Route>
-
-      {/* Geospatial */}
-      <Route path="/app/geo/heatmap" component={PortHeatmap} />
-      <Route path="/app/geo/congestion-forecast">
-        <Suspense fallback={<LazyFallback />}><PortCongestionForecast /></Suspense>
-      </Route>
-      <Route path="/app/secure-chain">
-        <Suspense fallback={<LazyFallback />}><SecureChain /></Suspense>
-      </Route>
-
-      {/* Notifications */}
-      {/* Legacy /app/notifications → redirect to Notification Centre */}
-      <Route path="/app/notifications">
-        <Redirect to="/app/notification-centre" />
-      </Route>
-
-      {/* Finance Dashboard — B9: FinanceGuard wraps all /app/finance routes */}
-      <Route path="/app/finance">
-        <FinanceGuard><Suspense fallback={<LazyFallback />}><Finance /></Suspense></FinanceGuard>
-      </Route>
-      {/* Post-Clearance Audit */}
-      <Route path="/app/customs/audit">
-        <Suspense fallback={<LazyFallback />}><PostClearanceAudit /></Suspense>
-      </Route>
-
-      {/* Duty Drawback */}
-      <Route path="/app/trader/drawback">
-        <Suspense fallback={<LazyFallback />}><DutyDrawback /></Suspense>
-      </Route>
-      <Route path="/app/finance/drawback">
-        <FinanceGuard><Suspense fallback={<LazyFallback />}><DutyDrawback /></Suspense></FinanceGuard>
-      </Route>
-      {/* Sprint 60 — Drawback Automation */}
-      <Route path="/app/finance/drawback-automation">
-        <FinanceGuard><Suspense fallback={<LazyFallback />}><DrawbackAutomation /></Suspense></FinanceGuard>
-      </Route>
-      {/* 1B Payments/Day — Async Payment Queue */}
-      <Route path="/app/trader/payment-queue">
-        <Suspense fallback={<LazyFallback />}><PaymentQueue /></Suspense>
-      </Route>
-      <Route path="/app/finance/payment-queue">
-        <FinanceGuard><Suspense fallback={<LazyFallback />}><PaymentQueue /></Suspense></FinanceGuard>
-      </Route>
-      {/* Balance Accounts — Payment Mirror */}
-      <Route path="/app/finance/balance-accounts">
-        <FinanceGuard><Suspense fallback={<LazyFallback />}><BalanceAccounts /></Suspense></FinanceGuard>
-      </Route>
-      {/* Sprint 61 — Trader Performance Scorecard */}
-      <Route path="/app/trader/scorecard">
-        <Suspense fallback={<LazyFallback />}><TraderScorecard /></Suspense>
-      </Route>
-
-      {/* Knowledge Graph Explorer */}
-      <Route path="/app/knowledge-graph">
-        <Suspense fallback={<LazyFallback />}><KnowledgeGraph /></Suspense>
-      </Route>
-
-      {/* Fraud Network Visualisation */}
-      <Route path="/app/admin/fraud-network">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><FraudNetwork /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-
-      {/* Fraud Cases & Risk Alerts */}
-      <Route path="/app/admin/fraud-cases">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><FraudCases /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-      <Route path="/app/admin/risk-alerts">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><RiskAlerts /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-
-      {/* Trader Certificate Archive */}
-      <Route path="/app/trader/certificates">
-        <Suspense fallback={<LazyFallback />}><MyCertificates /></Suspense>
-      </Route>
-
-      {/* Officer Workload Dashboard */}
-      <Route path="/app/admin/officer-workload">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><OfficerWorkload /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-
-      {/* Notification Centre (Sprint 15) */}
-      <Route path="/app/notification-centre">
-        <Suspense fallback={<LazyFallback />}><NotificationCentre /></Suspense>
-      </Route>
-
-      {/* Notification Preferences (Sprint 19) */}
-      <Route path="/app/notification-preferences">
-        <Suspense fallback={<LazyFallback />}><NotificationPreferences /></Suspense>
-      </Route>
-
-      {/* SLA Breach Escalation (Sprint 15) */}
-      <Route path="/app/admin/sla-breach">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><SLABreachDashboard /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-
-      {/* AI Assistant */}
-      <Route path="/app/ai-assistant" component={AIAssistant} />
-      <Route path="/app/document-vault" component={DocumentVault} />
-      <Route path="/share/:token" component={ShareLanding} />
-
-      {/* Sprint 31 — Finance Ledger (TigerBeetle) */}
-      <Route path="/app/finance/ledger">
-        <FinanceGuard><Suspense fallback={<LazyFallback />}><FinanceLedger /></Suspense></FinanceGuard>
-      </Route>
-
-      {/* WP-6 — Trade Finance rail (consents, application wizard, status) */}
-      <Route path="/app/finance/trade/consents">
-        <Suspense fallback={<LazyFallback />}><TradeFinanceConsents /></Suspense>
-      </Route>
-      <Route path="/app/finance/trade/apply">
-        <Suspense fallback={<LazyFallback />}><TradeFinanceApply /></Suspense>
-      </Route>
-      <Route path="/app/finance/trade/status">
-        <Suspense fallback={<LazyFallback />}><TradeFinanceStatus /></Suspense>
-      </Route>
-
-      {/* Sprint 32 — Identity Provider (Keycloak) */}
-      <Route path="/app/admin/identity-provider">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><IdentityProvider /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-
-      {/* Sprint 37 — Bonded Warehouse Management */}
-      <Route path="/app/port/bonded-warehouse">
-        <CustomsGuard>
-        <Suspense fallback={<LazyFallback />}><BondedWarehouse /></Suspense>
-      
-        </CustomsGuard>
-      </Route>
-
-      {/* Sprint 38 — ASEAN Single Window G2G */}
-      <Route path="/app/admin/asean-sw">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><AseanSingleWindow /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-
-      {/* Sprint 39 — WCO CEN Alerts */}
-      <Route path="/app/security/cen-alerts">
-        <SecurityGuard><Suspense fallback={<LazyFallback />}><WcoCenAlerts /></Suspense></SecurityGuard>
-      </Route>
-
-      {/* Sprint 40 — Free Zone Operations */}
-      <Route path="/app/port/free-zone">
-        <Suspense fallback={<LazyFallback />}><FreeZoneOps /></Suspense>
-      </Route>
-
-      {/* Sprint 41 — Developer Portal */}
-      <Route path="/app/developer">
-        <Suspense fallback={<LazyFallback />}><DeveloperPortal /></Suspense>
-      </Route>
-      {/* WP-8 — API Marketplace catalogue browser */}
-      <Route path="/app/developer/marketplace">
-        <Suspense fallback={<LazyFallback />}><Marketplace /></Suspense>
-      </Route>
-      {/* Phase 12 — Marketplace monetization portal (tiers, usage, invoices) */}
-      <Route path="/app/developer/marketplace-portal">
-        <Suspense fallback={<LazyFallback />}><MarketplacePortal /></Suspense>
-      </Route>
-      {/* Phase 12 — Stakeholder-360 CRM */}
-      <Route path="/app/customs/stakeholders">
-        <CustomsGuard><Suspense fallback={<LazyFallback />}><Stakeholder360 /></Suspense></CustomsGuard>
-      </Route>
-      <Route path="/app/crm/cases">
-        <CustomsGuard><Suspense fallback={<LazyFallback />}><CaseList /></Suspense></CustomsGuard>
-      </Route>
-      <Route path="/app/crm/cases/:id">
-        <CustomsGuard><Suspense fallback={<LazyFallback />}><CaseDetail /></Suspense></CustomsGuard>
-      </Route>
-      {/* WP-8 — Executive operational KPI dashboard (real, provenance-stamped) */}
-      <Route path="/app/executive/kpis">
-        <Suspense fallback={<LazyFallback />}><OperationalKpis /></Suspense>
-      </Route>
-      <Route path="/app/security/threat-intel">
-        <SecurityGuard><Suspense fallback={<LazyFallback />}><ThreatIntelligence /></Suspense></SecurityGuard>
-      </Route>
-      <Route path="/app/security/wazuh">
-        <SecurityGuard><Suspense fallback={<LazyFallback />}><WazuhSecurityEvents /></Suspense></SecurityGuard>
-      </Route>
-      <Route path="/app/admin/risk-model">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><RiskModelDashboard /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/analytics">
-        <Suspense fallback={<LazyFallback />}><TradeAnalytics /></Suspense>
-      </Route>
-      <Route path="/app/admin/tenants">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><TenantPortal /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-
-      {/* Phase 8 — PCS Trader Portal */}
-      <Route path="/app/pcs">
-        <Suspense fallback={<LazyFallback />}><PcsConsignments /></Suspense>
-      </Route>
-      <Route path="/app/pcs/consignments/:id">
-        {(params) => (
-          <Suspense fallback={<LazyFallback />}><PcsConsignmentTimeline id={Number(params.id)} /></Suspense>
-        )}
-      </Route>
-      <Route path="/app/pcs/bookings">
-        <Suspense fallback={<LazyFallback />}><PcsBookings /></Suspense>
-      </Route>
-      <Route path="/app/pcs/billing">
-        <Suspense fallback={<LazyFallback />}><PcsBilling /></Suspense>
-      </Route>
-      <Route path="/app/pcs/documents">
-        <Suspense fallback={<LazyFallback />}><PcsDocuments /></Suspense>
-      </Route>
-      <Route path="/app/pcs/port-calls">
-        <Suspense fallback={<LazyFallback />}><PcsPortCallStatus /></Suspense>
-      </Route>
-      <Route path="/app/pcs/vessels">
-        <Suspense fallback={<LazyFallback />}><PcsVesselTracking /></Suspense>
-      </Route>
-      <Route path="/app/pcs/berths">
-        <Suspense fallback={<LazyFallback />}><PcsBerthOccupancy /></Suspense>
-      </Route>
-
-      {/* Phase 16 — AEO export fast-lane (admin) + transshipment lane (trader) */}
-      <Route path="/app/admin/aeo-fast-lane">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><AdminAeoFastLane /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/transshipment">
-        <Suspense fallback={<LazyFallback />}><TransshipmentList /></Suspense>
-      </Route>
-      <Route path="/app/transshipment/new">
-        <Suspense fallback={<LazyFallback />}><TransshipmentWizard /></Suspense>
-      </Route>
-      <Route path="/app/transshipment/:id">
-        {(params) => (
-          <Suspense fallback={<LazyFallback />}><TransshipmentDetail linkId={Number(params.id)} /></Suspense>
-        )}
-      </Route>
-
-      {/* Sprint 48 — Flink CEP Trade Pattern Alerts */}
-      <Route path="/app/security/cep-alerts">
-        <SecurityGuard><Suspense fallback={<LazyFallback />}><FlinkCepAlerts /></Suspense></SecurityGuard>
-      </Route>
-
-      {/* Sprint 49 — Kubecost Cost Management */}
-      <Route path="/app/admin/costs">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><CostManagement /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-
-      {/* Sprint 54 — Wazuh SOC Dashboard */}
-      <Route path="/app/security/soc">
-        <SecurityGuard><Suspense fallback={<LazyFallback />}><SecurityOperationsCentre /></Suspense></SecurityGuard>
-      </Route>
-
-      {/* Sprint 55 — Audit Engine Dashboard */}
-      <Route path="/app/admin/audit-engine">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><AuditEngineDashboard /></Suspense></AdminGuard>
-      </Route>
-
-      {/* Sprint 56 — Bonded Warehouse Management */}
-      <Route path="/app/port/bonded-warehouse-mgmt">
-        <CustomsGuard>
-        <Suspense fallback={<LazyFallback />}><BondedWarehouseManagement /></Suspense>
-      
-        </CustomsGuard>
-      </Route>
-
-      {/* Sprint 66 — Cargo Tracking Real-Time Map */}
-      <Route path="/app/geo/cargo-tracking">
-        <Suspense fallback={<LazyFallback />}><CargoTrackingMap /></Suspense>
-      </Route>
-
-      {/* Sprint 67 — Trader Onboarding Wizard */}
-      <Route path="/app/onboarding">
-        <Suspense fallback={<LazyFallback />}><TraderOnboarding /></Suspense>
-      </Route>
-
-      {/* Sprint 68 — OpenAPI Explorer */}
-      <Route path="/app/developer/api-explorer">
-        <Suspense fallback={<LazyFallback />}><ApiExplorer /></Suspense>
-      </Route>
-      <Route path="/app/developer/sdk">
-        <Suspense fallback={<LazyFallback />}><SdkGenerator /></Suspense>
-      </Route>
-
-      {/* Sprint 72-74 — Onboarding Analytics, Geofence Management, Webhook Management, API Changelog */}
-      <Route path="/app/admin/onboarding-analytics">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><OnboardingAnalyticsDashboard /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-      <Route path="/app/admin/geofences">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><GeofenceManagement /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-      <Route path="/app/admin/webhooks">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><WebhookManagement /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-      <Route path="/app/developer/changelog">
-        <Suspense fallback={<LazyFallback />}><ApiChangelog /></Suspense>
-      </Route>
-      {/* Sprint 78 — Rules of Origin, Pilot Dashboard, Executive Dashboard */}
-      <Route path="/app/oga/rules-of-origin">
-        <OGAGuard>
-        <Suspense fallback={<LazyFallback />}><RulesOfOrigin /></Suspense>
-      
-        </OGAGuard>
-      </Route>
-      <Route path="/app/admin/pilot-dashboard">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><PilotDashboard /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-      <Route path="/app/executive/dashboard">
-        <ExecutiveGuard><Suspense fallback={<LazyFallback />}><ExecutiveDashboard /></Suspense></ExecutiveGuard>
-      </Route>
-      <Route path="/app/executive-dashboard">
-        <Suspense fallback={<LazyFallback />}><ExecutiveDashboard /></Suspense>
-      </Route>
-      {/* Sprint 86 — Compliance Email Settings */}
-      <Route path="/app/admin/compliance-email-settings">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><ComplianceEmailSettings /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-      <Route path="/app/admin/go-live-checklist">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><GoLiveChecklist /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-      <Route path="/app/admin/service-health">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><ServiceHealth /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-      <Route path="/app/admin/audit-log">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><AuditLog /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-      <Route path="/app/admin/settings">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><AdminSettings /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-      {/* Sprint 83/84 — Certificate Revocation Audit Log */}
-      <Route path="/app/admin/cert-revocations">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><CertRevocationLog /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-      {/* Production Readiness Checklist */}
-      <Route path="/app/admin/production-checklist">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><AdminProductionChecklist /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-      {/* v31 — New production pages */}
-      <Route path="/app/payments">
-        <Suspense fallback={<LazyFallback />}><Payments /></Suspense>
-      </Route>
-      <Route path="/app/trader/payments-new">
-        <Suspense fallback={<LazyFallback />}><Payments /></Suspense>
-      </Route>
-      <Route path="/app/aeo/applications">
-        <Suspense fallback={<LazyFallback />}><AEOApplications /></Suspense>
-      </Route>
-      <Route path="/app/admin/bulk-export">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><BulkExport /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-      <Route path="/app/developer/webhooks">
-        <Suspense fallback={<LazyFallback />}><WebhookLogs /></Suspense>
-      </Route>
-      <Route path="/app/security/alerts">
-        <SecurityGuard><Suspense fallback={<LazyFallback />}><SecurityAlerts /></Suspense></SecurityGuard>
-      </Route>
-      <Route path="/app/admin/tenants-mgmt">
-        <AdminGuard>
-        <Suspense fallback={<LazyFallback />}><TenantManagement /></Suspense>
-      
-        </AdminGuard>
-      </Route>
-      <Route path="/app/admin/tenant-branding">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><TenantBranding /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/workload-rebalancer">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><OfficerWorkloadRebalancer /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/onboarding/progress">
-        <Suspense fallback={<LazyFallback />}><OnboardingProgress /></Suspense>
-      </Route>
-
-      {/* v67 — Insider Threat Prevention */}
-      <Route path="/app/security/monitor">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><SecurityMonitor /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/batch-seed">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><AdminBatchSeed /></Suspense></AdminGuard>
-      </Route>
-
-      {/* v79 — Kafka Event Log, KYC Timeline, OGA Audit Trail */}
-      <Route path="/app/admin/kafka-event-log">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><KafkaEventLog /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/oga-permit-audit">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><OGAPermitAuditTrail /></Suspense></AdminGuard>
-      </Route>
-
-      {/* v81 — Temporal Runs, WAF Events, Lakehouse Jobs */}
-      <Route path="/app/admin/temporal-runs">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><TemporalWorkflowRuns /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/waf-events">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><WafEvents /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/lakehouse-jobs">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><LakehouseJobs /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/geoip-seed">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><GeoipSeed /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/fluvio-offsets">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><FluvioTopicOffsets /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/apisix-audit">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><ApisixRouteAudit /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/keycloak-sessions">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><KeycloakSessions /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/permify-audit">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><PermifyAuditLog /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/platform-health">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><PlatformHealthScorecard /></Suspense></AdminGuard>
-      </Route>
-      {/* v131 — Cron Job Manager & System Status */}
-      <Route path="/app/admin/cron-jobs">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><CronJobManager /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/system-status">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><AdminSystemStatus /></Suspense></AdminGuard>
-      </Route>
-      {/* Sprint Caddy — Keycloak + Caddy Admin */}
-      <Route path="/app/admin/keycloak">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><KeycloakAdmin /></Suspense></AdminGuard>
-      </Route>
-      {/* Sprint Caddy — Coraza WAF Rule Tuning Dashboard */}
-      <Route path="/app/admin/coraza-waf">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><CorazaWafDashboard /></Suspense></AdminGuard>
-      </Route>
-      {/* Sprint Caddy v4 — Heartbeat Job Manager */}
-      <Route path="/app/admin/heartbeat-admin">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><HeartbeatAdmin /></Suspense></AdminGuard>
-      </Route>
-
-      {/* v136 sprint routes */}
-      <Route path="/app/admin/threshold-audit-log">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><ThresholdAuditLog /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/sanctions-batch">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><SanctionsBatchUpload /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/oga-bulk-approve">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><OGABulkApprove /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/admin/post-clearance-scheduler">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><PostClearanceAuditScheduler /></Suspense></AdminGuard>
-      </Route>
-      <Route path="/app/finance/export-schedules">
-        <FinanceGuard><Suspense fallback={<LazyFallback />}><ExportScheduleManager /></Suspense></FinanceGuard>
-      </Route>
-      <Route path="/app/trader/aeo-renewal">
-        <Suspense fallback={<LazyFallback />}><AEORenewalWorkflow /></Suspense>
-      </Route>
-      <Route path="/app/admin/aeo-renewal">
-        <AdminGuard><Suspense fallback={<LazyFallback />}><AEORenewalWorkflow /></Suspense></AdminGuard>
-      </Route>
-
-      {/* 404 */}
-      <Route path="/404" component={NotFound} />
-              <Route path="/app/aeo-comments/:renewalId" component={AEORenewalComments} />
-        <Route path="/admin/sanctions-entities" component={SanctionsEntitiesPage} />
-        <Route path="/app/schedule-analytics" component={ScheduleAnalyticsPage} />
-        <Route path="/admin/batch-reports" component={BatchValidationReportPage} />
-        <Route path="/app/ucr">{() => <Suspense fallback={<LazyFallback />}><UCRManagement /></Suspense>}</Route>
-        <Route path="/app/manifests">{() => <Suspense fallback={<LazyFallback />}><ManifestManagement /></Suspense>}</Route>
-        <Route path="/app/trade-analytics">{() => <Suspense fallback={<LazyFallback />}><TradeAnalyticsDashboard /></Suspense>}</Route>
-        <Route path="/app/ncs-nrs">
-        {() => <ExecutiveGuard><Suspense fallback={<LazyFallback />}><NCSNRSDashboard /></Suspense></ExecutiveGuard>}
-      </Route>
-        <Route component={NotFound} />
-    </Switch>
-  );
-}
-
-function App() {
-  return (
-    <ErrorBoundary>
-      <ThemeProvider defaultTheme="light">
-        <TooltipProvider>
-          <Toaster />
-          <OfflineBanner />
-          <DemoModeBanner />
-          <InstallPrompt />
-          <Router />
-          <MobileBottomNav />
-        </TooltipProvider>
-      </ThemeProvider>
-    </ErrorBoundary>
-  );
-}
-
-export default App;
+PLACEHOLDER
\ No newline at end of file

From 74ace9bd2b8bf7915b6ddc0cdb329a51d13254a1 Mon Sep 17 00:00:00 2001
From: munisp <155237317+munisp@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:53:37 -0400
Subject: [PATCH 13/14] Phase 17 (G2): route GeospatialPortal lazily at
 /app/geo/portal (repairs file after bad intermediate push)

---
 client/src/App.tsx | 833 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 832 insertions(+), 1 deletion(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 311c8dd0..58c2f4bd 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1 +1,832 @@
-PLACEHOLDER
\ No newline at end of file
+import { PageSkeleton as _PageSkeleton } from "@/components/LoadingIndicator";
+import { Toaster } from "@/components/ui/sonner";
+import DemoModeBanner from "@/components/DemoModeBanner";
+import OfflineBanner from "@/components/OfflineBanner";
+import InstallPrompt from "@/components/InstallPrompt";
+import MobileBottomNav from "@/components/MobileBottomNav";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import NotFound from "@/pages/NotFound";
+import { Route, Switch, Redirect } from "wouter";
+import ErrorBoundary from "./components/ErrorBoundary";
+import { ThemeProvider } from "./contexts/ThemeContext";
+import { AdminGuard, CustomsGuard, OGAGuard, FinanceGuard, SecurityGuard, ExecutiveGuard } from "./components/RoleGuard";
+import Home from "./pages/Home";
+import TraderDashboard from "./pages/app/TraderDashboard";
+import NewDeclaration from "./pages/app/NewDeclaration";
+import CustomsDashboard from "./pages/app/CustomsDashboard";
+import OGAPortal from "./pages/app/OGAPortal";
+import OGAExpiryCalendar from "./pages/app/OGAExpiryCalendar";
+import AdminConsole from "./pages/app/AdminConsole";
+import SecurityOps from "./pages/app/SecurityOps";
+import DeclarationDetail from "./pages/app/DeclarationDetail";
+import KYCPortal from "./pages/app/KYCPortal";
+import VisionAnalysis from "./pages/app/VisionAnalysis";
+import AIAssistant from "./pages/app/AIAssistant";
+import DocumentVault from "./pages/app/DocumentVault";
+import ShareLanding from "./pages/ShareLanding";
+import AdminKYCReview from "./pages/app/AdminKYCReview";
+import PortHeatmap from "./pages/app/PortHeatmap";
+// Lazy-load the specification page (it's large))
+import { lazy, Suspense } from "react";
+// Phase 17 (G2): Geospatial Portal — lazy, routed (previously dead code)
+const GeospatialPortal = lazy(() => import("./pages/geo/GeospatialPortal"));
+const Specification = lazy(() => import("./pages/Specification"));
+// Lazy-load heavy pages
+const SanctionsScreening = lazy(() => import("./pages/app/SanctionsScreening"));
+const MojaloopPayments = lazy(() => import("./pages/app/MojaloopPayments"));
+const TemporalWorkflows = lazy(() => import("./pages/app/TemporalWorkflows"));
+const TraderProfile = lazy(() => import("./pages/app/TraderProfile"));
+const TraderAEO = lazy(() => import("./pages/app/TraderAEO"));
+const AeoSelfAssessment = lazy(() => import("./pages/app/AeoSelfAssessment"));
+const PortCongestionForecast = lazy(() => import("./pages/app/PortCongestionForecast"));
+const SecureChain = lazy(() => import("./pages/app/SecureChain"));
+const AdminUsers = lazy(() => import("./pages/app/AdminUsers"));
+const AdminDeclarations = lazy(() => import("./pages/app/AdminDeclarations"));
+const AdminAEO = lazy(() => import("./pages/app/AdminAEO"));
+const AdminAnalytics = lazy(() => import("./pages/app/AdminAnalytics"));
+const CustomsRisk = lazy(() => import("./pages/app/CustomsRisk"));
+const TraderDeclarations = lazy(() => import("./pages/app/TraderDeclarations"));
+// Phase 8 — PCS Trader Portal
+const PcsConsignments = lazy(() => import("./pages/app/PcsConsignments"));
+const PcsConsignmentTimeline = lazy(() => import("./pages/app/PcsConsignmentTimeline"));
+const PcsBookings = lazy(() => import("./pages/app/PcsBookings"));
+const PcsBilling = lazy(() => import("./pages/app/PcsBilling"));
+const PcsDocuments = lazy(() => import("./pages/app/PcsDocuments"));
+// Phase 16 — PCS port-operations boards (port-interop read-through)
+const PcsPortCallStatus = lazy(() => import("./pages/app/PcsPortCallStatus"));
+const PcsVesselTracking = lazy(() => import("./pages/app/PcsVesselTracking"));
+const PcsBerthOccupancy = lazy(() => import("./pages/app/PcsBerthOccupancy"));
+// Phase 16 — AEO fast-lane admin + transshipment lane
+const AdminAeoFastLane = lazy(() => import("./pages/app/AdminAeoFastLane"));
+const TransshipmentWizard = lazy(() => import("./pages/app/TransshipmentWizard"));
+const TransshipmentList = lazy(() => import("./pages/app/TransshipmentList"));
+const TransshipmentDetail = lazy(() => import("./pages/app/TransshipmentDetail"));
+const Notifications = lazy(() => import("./pages/app/Notifications"));
+const Finance = lazy(() => import("./pages/app/Finance"));
+const PostClearanceAudit = lazy(() => import("./pages/app/PostClearanceAudit"));
+const DutyDrawback = lazy(() => import('./pages/app/DutyDrawback'));
+const PaymentQueue = lazy(() => import('./pages/app/PaymentQueue'));
+const KnowledgeGraph = lazy(() => import('./pages/app/KnowledgeGraph'));
+const BalanceAccounts = lazy(() => import('./pages/app/BalanceAccounts'));
+const FraudNetwork = lazy(() => import('./pages/app/FraudNetwork'));
+const FraudCases = lazy(() => import('./pages/app/FraudCases'));
+const RiskAlerts = lazy(() => import('./pages/app/RiskAlerts'));
+const MyCertificates = lazy(() => import('./pages/app/MyCertificates'));
+const OfficerWorkload = lazy(() => import('./pages/app/OfficerWorkload'));
+const NotificationCentre = lazy(() => import('./pages/app/NotificationCentre'));
+const SLABreachDashboard = lazy(() => import('./pages/app/SLABreachDashboard'));
+const NotificationPreferences = lazy(() => import('./pages/app/NotificationPreferences'));
+const FinanceLedger = lazy(() => import('./pages/FinanceLedger'));
+const TradeFinanceConsents = lazy(() => import('./pages/TradeFinanceConsents'));
+const TradeFinanceApply = lazy(() => import('./pages/TradeFinanceApply'));
+const TradeFinanceStatus = lazy(() => import('./pages/TradeFinanceStatus'));
+const IdentityProvider = lazy(() => import('./pages/IdentityProvider'));
+const BondedWarehouse = lazy(() => import('./pages/app/BondedWarehouse'));
+const AseanSingleWindow = lazy(() => import('./pages/app/AseanSingleWindow'));
+const WcoCenAlerts = lazy(() => import('./pages/app/WcoCenAlerts'));
+const FreeZoneOps = lazy(() => import('./pages/app/FreeZoneOps'));
+const DeveloperPortal = lazy(() => import('./pages/app/DeveloperPortal'));
+const Marketplace = lazy(() => import('./pages/app/Marketplace'));
+// Phase 12 — Stakeholder-360 CRM + marketplace monetization
+const Stakeholder360 = lazy(() => import('./pages/app/Stakeholder360'));
+const CaseList = lazy(() => import('./pages/app/CaseList'));
+const CaseDetail = lazy(() => import('./pages/app/CaseDetail'));
+const MarketplacePortal = lazy(() => import('./pages/app/MarketplacePortal'));
+const OperationalKpis = lazy(() => import('./pages/app/OperationalKpis'));
+const ThreatIntelligence = lazy(() => import('./pages/app/ThreatIntelligence'));
+const WazuhSecurityEvents = lazy(() => import('./pages/app/WazuhSecurityEvents'));
+const RiskModelDashboard = lazy(() => import('./pages/app/RiskModelDashboard'));
+const TradeAnalytics = lazy(() => import('./pages/app/TradeAnalytics'));
+const TenantPortal = lazy(() => import('./pages/app/TenantPortal'));
+const FlinkCepAlerts = lazy(() => import('./pages/FlinkCepAlerts'));
+const CostManagement = lazy(() => import('./pages/CostManagement'));
+const SecurityOperationsCentre = lazy(() => import('./pages/app/SecurityOperationsCentre'));
+const AuditEngineDashboard = lazy(() => import('./pages/app/AuditEngineDashboard'));
+const BondedWarehouseManagement = lazy(() => import('./pages/app/BondedWarehouseManagement'));
+const DrawbackAutomation = lazy(() => import('./pages/app/DrawbackAutomation'));
+const TraderScorecard = lazy(() => import('./pages/app/TraderScorecard'));
+// Sprint 66 — Cargo Tracking Real-Time Map
+const CargoTrackingMap = lazy(() => import('./pages/app/CargoTrackingMap'));
+// Sprint 67 — Trader Onboarding Wizard
+const TraderOnboarding = lazy(() => import('./pages/app/TraderOnboarding'));
+// Sprint 68 — OpenAPI Explorer
+const ApiExplorer = lazy(() => import('./pages/app/ApiExplorer'));
+const SdkGenerator = lazy(() => import('./pages/app/SdkGenerator'));
+// Sprint 72-74 — Onboarding Analytics, Geofence Management, Webhook Management, API Changelog
+const OnboardingAnalyticsDashboard = lazy(() => import('./pages/app/OnboardingAnalyticsDashboard'));
+const GeofenceManagement = lazy(() => import('./pages/app/GeofenceManagement'));
+const WebhookManagement = lazy(() => import('./pages/app/WebhookManagement'));
+const ApiChangelog = lazy(() => import('./pages/app/ApiChangelog'));
+const RulesOfOrigin = lazy(() => import('./pages/app/RulesOfOrigin'));
+const PilotDashboard = lazy(() => import('./pages/app/PilotDashboard'));
+const ExecutiveDashboard = lazy(() => import('./pages/app/ExecutiveDashboard'));
+const ComplianceEmailSettings = lazy(() => import('./pages/app/ComplianceEmailSettings'));
+const AdminSettings = lazy(() => import('./pages/app/AdminSettings'));
+const CertRevocationLog = lazy(() => import('./pages/app/CertRevocationLog'));
+// Sprint 80 — Public certificate verification page (no auth required)
+const GoLiveChecklist = lazy(() => import('./pages/app/GoLiveChecklist'));
+const AdminProductionChecklist = lazy(() => import('./pages/app/AdminProductionChecklist'));
+const ServiceHealth = lazy(() => import('./pages/app/ServiceHealth'));
+const AuditLog = lazy(() => import('./pages/app/AuditLog'));
+const CertVerify = lazy(() => import('./pages/public/CertVerify'));
+const SystemStatus = lazy(() => import('./pages/SystemStatus'));
+const DemoLogin = lazy(() => import('./pages/DemoLogin'));
+const NLFinancialQuery = lazy(() => import('./pages/app/NLFinancialQuery'));
+// v31 — New production pages
+const Payments = lazy(() => import('./pages/app/Payments'));
+const AEOApplications = lazy(() => import('./pages/app/AEOApplications'));
+const BulkExport = lazy(() => import('./pages/app/BulkExport'));
+const WebhookLogs = lazy(() => import('./pages/app/WebhookLogs'));
+const SecurityAlerts = lazy(() => import('./pages/app/SecurityAlerts'));
+const TenantManagement = lazy(() => import('./pages/app/TenantManagement'));
+const TenantBranding = lazy(() => import('./pages/app/TenantBranding'));
+const OfficerWorkloadRebalancer = lazy(() => import('./pages/app/OfficerWorkloadRebalancer'));
+const OnboardingProgress = lazy(() => import('./pages/app/OnboardingProgress'));
+// v67 — Insider Threat Prevention & Batch Seed
+const SecurityMonitor = lazy(() => import('./pages/app/SecurityMonitor'));
+const KafkaEventLog = lazy(() => import('./pages/app/KafkaEventLog'));
+const OGAPermitAuditTrail = lazy(() => import('./pages/app/OGAPermitAuditTrail'));
+const AdminBatchSeed = lazy(() => import('./pages/app/AdminBatchSeed'));
+// v81 — Temporal Runs, WAF Events, Lakehouse Jobs
+const TemporalWorkflowRuns = lazy(() => import('./pages/app/TemporalWorkflowRuns'));
+const WafEvents = lazy(() => import('./pages/app/WafEvents'));
+const LakehouseJobs = lazy(() => import('./pages/app/LakehouseJobs'));
+const GeoipSeed = lazy(() => import('./pages/app/GeoipSeed'));
+// v88-v91, v104 — Middleware & Platform pages
+const FluvioTopicOffsets = lazy(() => import('./pages/FluvioTopicOffsets'));
+const ApisixRouteAudit = lazy(() => import('./pages/ApisixRouteAudit'));
+const KeycloakSessions = lazy(() => import('./pages/KeycloakSessions'));
+const PermifyAuditLog = lazy(() => import('./pages/PermifyAuditLog'));
+const PlatformHealthScorecard = lazy(() => import('./pages/PlatformHealthScorecard'));
+const VisionBatchAnalysis = lazy(() => import('./pages/app/VisionBatchAnalysis'));
+const CronJobManager = lazy(() => import('./pages/admin/CronJobManager'));
+const AdminSystemStatus = lazy(() => import('./pages/admin/SystemStatus'));
+const KeycloakAdmin = lazy(() => import('./pages/admin/KeycloakAdmin'));
+const CorazaWafDashboard = lazy(() => import('./pages/admin/CorazaWafDashboard'));
+const HeartbeatAdmin = lazy(() => import('./pages/admin/HeartbeatAdmin'));
+// v136 sprint pages
+const ThresholdAuditLog = lazy(() => import('./pages/admin/ThresholdAuditLog'));
+const SanctionsBatchUpload = lazy(() => import('./pages/admin/SanctionsBatchUpload'));
+const OGABulkApprove = lazy(() => import('./pages/admin/OGABulkApprove'));
+const PostClearanceAuditScheduler = lazy(() => import('./pages/admin/PostClearanceAuditScheduler'));
+const ExportScheduleManager = lazy(() => import('./pages/app/ExportScheduleManager'));
+const AEORenewalWorkflow = lazy(() => import('./pages/app/AEORenewalWorkflow'));
+
+const AEORenewalComments = lazy(() => import("@/pages/app/AEORenewalComments"));
+const SanctionsEntitiesPage = lazy(() => import("@/pages/admin/SanctionsEntities"));
+const ScheduleAnalyticsPage = lazy(() => import("@/pages/app/ScheduleAnalytics"));
+const BatchValidationReportPage = lazy(() => import("@/pages/admin/BatchValidationReport"));
+const UCRManagement = lazy(() => import("@/pages/UCRManagement"));
+const ManifestManagement = lazy(() => import("@/pages/ManifestManagement"));
+const TradeAnalyticsDashboard = lazy(() => import("@/pages/TradeAnalyticsDashboard"));
+const NCSNRSDashboard = lazy(() => import("@/pages/NCSNRSDashboard"));
+
+
+const LazyFallback = () => <_PageSkeleton />;
+
+function Router() {
+  return (
+    <Switch>
+      {/* Demo mode role-picker login screen */}
+      <Route path="/demo">
+        <Suspense fallback={<LazyFallback />}><DemoLogin /></Suspense>
+      </Route>
+
+      {/* Public landing page */}
+      <Route path="/" component={Home} />
+
+      {/* Sprint 80 — Public certificate verification (no auth required, QR-scannable) */}
+      <Route path="/verify/:certNumber">
+        <Suspense fallback={<LazyFallback />}><CertVerify /></Suspense>
+      </Route>
+
+      {/* Public system status page — no authentication required */}
+      <Route path="/status">
+        <Suspense fallback={<LazyFallback />}><SystemStatus /></Suspense>
+      </Route>
+
+      {/* Architecture specification (all 29 interactive components) */}
+      <Route path="/specification">
+        <Suspense fallback={<LazyFallback />}>
+          <Specification />
+        </Suspense>
+      </Route>
+
+      {/* Trader Portal */}
+      <Route path="/app/trader" component={TraderDashboard} />
+      <Route path="/app/trader/new" component={NewDeclaration} />
+      <Route path="/app/trader/declarations">
+        <Suspense fallback={<LazyFallback />}><TraderDeclarations /></Suspense>
+      </Route>
+      <Route path="/app/trader/declarations/new" component={NewDeclaration} />
+      <Route path="/app/trader/declarations/:id" component={DeclarationDetail} />
+      <Route path="/app/trader/kyc" component={KYCPortal} />
+      <Route path="/app/trader/profile">
+        <Suspense fallback={<LazyFallback />}><TraderProfile /></Suspense>
+      </Route>
+      <Route path="/app/trader/aeo">
+        <Suspense fallback={<LazyFallback />}><TraderAEO /></Suspense>
+      </Route>
+      <Route path="/app/trader/aeo-self-assessment">
+        <Suspense fallback={<LazyFallback />}><AeoSelfAssessment /></Suspense>
+      </Route>
+
+      {/* Customs Officer Portal — B9: CustomsGuard wraps all /app/customs routes */}
+      <Route path="/app/customs"><CustomsGuard><CustomsDashboard /></CustomsGuard></Route>
+      <Route path="/app/customs/queue"><CustomsGuard><CustomsDashboard /></CustomsGuard></Route>
+      <Route path="/app/customs/declarations/:id"><CustomsGuard><DeclarationDetail /></CustomsGuard></Route>
+      <Route path="/app/customs/vision"><CustomsGuard><VisionAnalysis /></CustomsGuard></Route>
+      <Route path="/app/customs/vision-batch">
+        <CustomsGuard><Suspense fallback={<LazyFallback />}><VisionBatchAnalysis /></Suspense></CustomsGuard>
+      </Route>
+      <Route path="/app/customs/risk">
+        <CustomsGuard><Suspense fallback={<LazyFallback />}><CustomsRisk /></Suspense></CustomsGuard>
+      </Route>
+      <Route path="/app/customs/payments">
+        <CustomsGuard><Suspense fallback={<LazyFallback />}><MojaloopPayments /></Suspense></CustomsGuard>
+      </Route>
+      <Route path="/app/trader/payments">
+        <Suspense fallback={<LazyFallback />}><MojaloopPayments /></Suspense>
+      </Route>
+      <Route path="/app/customs/workflows">
+        <Suspense fallback={<LazyFallback />}><TemporalWorkflows /></Suspense>
+      </Route>
+
+      {/* OGA Portal */}
+      <Route path="/app/oga">{() => <OGAGuard><OGAPortal /></OGAGuard>}</Route>
+      <Route path="/app/nl-query">{() => <Suspense fallback={<LazyFallback />}><NLFinancialQuery /></Suspense>}</Route>
+      <Route path="/app/oga/expiry-calendar">{() => <OGAGuard><OGAExpiryCalendar /></OGAGuard>}</Route>
+
+      {/* Admin Console — B9: AdminGuard wraps all /app/admin routes */}
+      <Route path="/app/admin"><AdminGuard><AdminConsole /></AdminGuard></Route>
+      <Route path="/app/admin/kyc-review"><AdminGuard><AdminKYCReview /></AdminGuard></Route>
+      <Route path="/app/admin/users">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><AdminUsers /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/declarations">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><AdminDeclarations /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/aeo">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><AdminAEO /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/analytics">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><AdminAnalytics /></Suspense></AdminGuard>
+      </Route>
+
+      {/* Security Operations Center — B9: SecurityGuard wraps all /app/security routes */}
+      <Route path="/app/security"><SecurityGuard><SecurityOps /></SecurityGuard></Route>
+      <Route path="/app/security/sanctions">
+        <SecurityGuard><Suspense fallback={<LazyFallback />}><SanctionsScreening /></Suspense></SecurityGuard>
+      </Route>
+
+      {/* Geospatial */}
+      <Route path="/app/geo/heatmap" component={PortHeatmap} />
+      <Route path="/app/geo/portal">
+        <Suspense fallback={<LazyFallback />}><GeospatialPortal /></Suspense>
+      </Route>
+      <Route path="/app/geo/congestion-forecast">
+        <Suspense fallback={<LazyFallback />}><PortCongestionForecast /></Suspense>
+      </Route>
+      <Route path="/app/secure-chain">
+        <Suspense fallback={<LazyFallback />}><SecureChain /></Suspense>
+      </Route>
+
+      {/* Notifications */}
+      {/* Legacy /app/notifications → redirect to Notification Centre */}
+      <Route path="/app/notifications">
+        <Redirect to="/app/notification-centre" />
+      </Route>
+
+      {/* Finance Dashboard — B9: FinanceGuard wraps all /app/finance routes */}
+      <Route path="/app/finance">
+        <FinanceGuard><Suspense fallback={<LazyFallback />}><Finance /></Suspense></FinanceGuard>
+      </Route>
+      {/* Post-Clearance Audit */}
+      <Route path="/app/customs/audit">
+        <Suspense fallback={<LazyFallback />}><PostClearanceAudit /></Suspense>
+      </Route>
+
+      {/* Duty Drawback */}
+      <Route path="/app/trader/drawback">
+        <Suspense fallback={<LazyFallback />}><DutyDrawback /></Suspense>
+      </Route>
+      <Route path="/app/finance/drawback">
+        <FinanceGuard><Suspense fallback={<LazyFallback />}><DutyDrawback /></Suspense></FinanceGuard>
+      </Route>
+      {/* Sprint 60 — Drawback Automation */}
+      <Route path="/app/finance/drawback-automation">
+        <FinanceGuard><Suspense fallback={<LazyFallback />}><DrawbackAutomation /></Suspense></FinanceGuard>
+      </Route>
+      {/* 1B Payments/Day — Async Payment Queue */}
+      <Route path="/app/trader/payment-queue">
+        <Suspense fallback={<LazyFallback />}><PaymentQueue /></Suspense>
+      </Route>
+      <Route path="/app/finance/payment-queue">
+        <FinanceGuard><Suspense fallback={<LazyFallback />}><PaymentQueue /></Suspense></FinanceGuard>
+      </Route>
+      {/* Balance Accounts — Payment Mirror */}
+      <Route path="/app/finance/balance-accounts">
+        <FinanceGuard><Suspense fallback={<LazyFallback />}><BalanceAccounts /></Suspense></FinanceGuard>
+      </Route>
+      {/* Sprint 61 — Trader Performance Scorecard */}
+      <Route path="/app/trader/scorecard">
+        <Suspense fallback={<LazyFallback />}><TraderScorecard /></Suspense>
+      </Route>
+
+      {/* Knowledge Graph Explorer */}
+      <Route path="/app/knowledge-graph">
+        <Suspense fallback={<LazyFallback />}><KnowledgeGraph /></Suspense>
+      </Route>
+
+      {/* Fraud Network Visualisation */}
+      <Route path="/app/admin/fraud-network">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><FraudNetwork /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+
+      {/* Fraud Cases & Risk Alerts */}
+      <Route path="/app/admin/fraud-cases">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><FraudCases /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+      <Route path="/app/admin/risk-alerts">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><RiskAlerts /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+
+      {/* Trader Certificate Archive */}
+      <Route path="/app/trader/certificates">
+        <Suspense fallback={<LazyFallback />}><MyCertificates /></Suspense>
+      </Route>
+
+      {/* Officer Workload Dashboard */}
+      <Route path="/app/admin/officer-workload">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><OfficerWorkload /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+
+      {/* Notification Centre (Sprint 15) */}
+      <Route path="/app/notification-centre">
+        <Suspense fallback={<LazyFallback />}><NotificationCentre /></Suspense>
+      </Route>
+
+      {/* Notification Preferences (Sprint 19) */}
+      <Route path="/app/notification-preferences">
+        <Suspense fallback={<LazyFallback />}><NotificationPreferences /></Suspense>
+      </Route>
+
+      {/* SLA Breach Escalation (Sprint 15) */}
+      <Route path="/app/admin/sla-breach">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><SLABreachDashboard /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+
+      {/* AI Assistant */}
+      <Route path="/app/ai-assistant" component={AIAssistant} />
+      <Route path="/app/document-vault" component={DocumentVault} />
+      <Route path="/share/:token" component={ShareLanding} />
+
+      {/* Sprint 31 — Finance Ledger (TigerBeetle) */}
+      <Route path="/app/finance/ledger">
+        <FinanceGuard><Suspense fallback={<LazyFallback />}><FinanceLedger /></Suspense></FinanceGuard>
+      </Route>
+
+      {/* WP-6 — Trade Finance rail (consents, application wizard, status) */}
+      <Route path="/app/finance/trade/consents">
+        <Suspense fallback={<LazyFallback />}><TradeFinanceConsents /></Suspense>
+      </Route>
+      <Route path="/app/finance/trade/apply">
+        <Suspense fallback={<LazyFallback />}><TradeFinanceApply /></Suspense>
+      </Route>
+      <Route path="/app/finance/trade/status">
+        <Suspense fallback={<LazyFallback />}><TradeFinanceStatus /></Suspense>
+      </Route>
+
+      {/* Sprint 32 — Identity Provider (Keycloak) */}
+      <Route path="/app/admin/identity-provider">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><IdentityProvider /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+
+      {/* Sprint 37 — Bonded Warehouse Management */}
+      <Route path="/app/port/bonded-warehouse">
+        <CustomsGuard>
+        <Suspense fallback={<LazyFallback />}><BondedWarehouse /></Suspense>
+      
+        </CustomsGuard>
+      </Route>
+
+      {/* Sprint 38 — ASEAN Single Window G2G */}
+      <Route path="/app/admin/asean-sw">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><AseanSingleWindow /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+
+      {/* Sprint 39 — WCO CEN Alerts */}
+      <Route path="/app/security/cen-alerts">
+        <SecurityGuard><Suspense fallback={<LazyFallback />}><WcoCenAlerts /></Suspense></SecurityGuard>
+      </Route>
+
+      {/* Sprint 40 — Free Zone Operations */}
+      <Route path="/app/port/free-zone">
+        <Suspense fallback={<LazyFallback />}><FreeZoneOps /></Suspense>
+      </Route>
+
+      {/* Sprint 41 — Developer Portal */}
+      <Route path="/app/developer">
+        <Suspense fallback={<LazyFallback />}><DeveloperPortal /></Suspense>
+      </Route>
+      {/* WP-8 — API Marketplace catalogue browser */}
+      <Route path="/app/developer/marketplace">
+        <Suspense fallback={<LazyFallback />}><Marketplace /></Suspense>
+      </Route>
+      {/* Phase 12 — Marketplace monetization portal (tiers, usage, invoices) */}
+      <Route path="/app/developer/marketplace-portal">
+        <Suspense fallback={<LazyFallback />}><MarketplacePortal /></Suspense>
+      </Route>
+      {/* Phase 12 — Stakeholder-360 CRM */}
+      <Route path="/app/customs/stakeholders">
+        <CustomsGuard><Suspense fallback={<LazyFallback />}><Stakeholder360 /></Suspense></CustomsGuard>
+      </Route>
+      <Route path="/app/crm/cases">
+        <CustomsGuard><Suspense fallback={<LazyFallback />}><CaseList /></Suspense></CustomsGuard>
+      </Route>
+      <Route path="/app/crm/cases/:id">
+        <CustomsGuard><Suspense fallback={<LazyFallback />}><CaseDetail /></Suspense></CustomsGuard>
+      </Route>
+      {/* WP-8 — Executive operational KPI dashboard (real, provenance-stamped) */}
+      <Route path="/app/executive/kpis">
+        <Suspense fallback={<LazyFallback />}><OperationalKpis /></Suspense>
+      </Route>
+      <Route path="/app/security/threat-intel">
+        <SecurityGuard><Suspense fallback={<LazyFallback />}><ThreatIntelligence /></Suspense></SecurityGuard>
+      </Route>
+      <Route path="/app/security/wazuh">
+        <SecurityGuard><Suspense fallback={<LazyFallback />}><WazuhSecurityEvents /></Suspense></SecurityGuard>
+      </Route>
+      <Route path="/app/admin/risk-model">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><RiskModelDashboard /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/analytics">
+        <Suspense fallback={<LazyFallback />}><TradeAnalytics /></Suspense>
+      </Route>
+      <Route path="/app/admin/tenants">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><TenantPortal /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+
+      {/* Phase 8 — PCS Trader Portal */}
+      <Route path="/app/pcs">
+        <Suspense fallback={<LazyFallback />}><PcsConsignments /></Suspense>
+      </Route>
+      <Route path="/app/pcs/consignments/:id">
+        {(params) => (
+          <Suspense fallback={<LazyFallback />}><PcsConsignmentTimeline id={Number(params.id)} /></Suspense>
+        )}
+      </Route>
+      <Route path="/app/pcs/bookings">
+        <Suspense fallback={<LazyFallback />}><PcsBookings /></Suspense>
+      </Route>
+      <Route path="/app/pcs/billing">
+        <Suspense fallback={<LazyFallback />}><PcsBilling /></Suspense>
+      </Route>
+      <Route path="/app/pcs/documents">
+        <Suspense fallback={<LazyFallback />}><PcsDocuments /></Suspense>
+      </Route>
+      <Route path="/app/pcs/port-calls">
+        <Suspense fallback={<LazyFallback />}><PcsPortCallStatus /></Suspense>
+      </Route>
+      <Route path="/app/pcs/vessels">
+        <Suspense fallback={<LazyFallback />}><PcsVesselTracking /></Suspense>
+      </Route>
+      <Route path="/app/pcs/berths">
+        <Suspense fallback={<LazyFallback />}><PcsBerthOccupancy /></Suspense>
+      </Route>
+
+      {/* Phase 16 — AEO export fast-lane (admin) + transshipment lane (trader) */}
+      <Route path="/app/admin/aeo-fast-lane">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><AdminAeoFastLane /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/transshipment">
+        <Suspense fallback={<LazyFallback />}><TransshipmentList /></Suspense>
+      </Route>
+      <Route path="/app/transshipment/new">
+        <Suspense fallback={<LazyFallback />}><TransshipmentWizard /></Suspense>
+      </Route>
+      <Route path="/app/transshipment/:id">
+        {(params) => (
+          <Suspense fallback={<LazyFallback />}><TransshipmentDetail linkId={Number(params.id)} /></Suspense>
+        )}
+      </Route>
+
+      {/* Sprint 48 — Flink CEP Trade Pattern Alerts */}
+      <Route path="/app/security/cep-alerts">
+        <SecurityGuard><Suspense fallback={<LazyFallback />}><FlinkCepAlerts /></Suspense></SecurityGuard>
+      </Route>
+
+      {/* Sprint 49 — Kubecost Cost Management */}
+      <Route path="/app/admin/costs">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><CostManagement /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+
+      {/* Sprint 54 — Wazuh SOC Dashboard */}
+      <Route path="/app/security/soc">
+        <SecurityGuard><Suspense fallback={<LazyFallback />}><SecurityOperationsCentre /></Suspense></SecurityGuard>
+      </Route>
+
+      {/* Sprint 55 — Audit Engine Dashboard */}
+      <Route path="/app/admin/audit-engine">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><AuditEngineDashboard /></Suspense></AdminGuard>
+      </Route>
+
+      {/* Sprint 56 — Bonded Warehouse Management */}
+      <Route path="/app/port/bonded-warehouse-mgmt">
+        <CustomsGuard>
+        <Suspense fallback={<LazyFallback />}><BondedWarehouseManagement /></Suspense>
+      
+        </CustomsGuard>
+      </Route>
+
+      {/* Sprint 66 — Cargo Tracking Real-Time Map */}
+      <Route path="/app/geo/cargo-tracking">
+        <Suspense fallback={<LazyFallback />}><CargoTrackingMap /></Suspense>
+      </Route>
+
+      {/* Sprint 67 — Trader Onboarding Wizard */}
+      <Route path="/app/onboarding">
+        <Suspense fallback={<LazyFallback />}><TraderOnboarding /></Suspense>
+      </Route>
+
+      {/* Sprint 68 — OpenAPI Explorer */}
+      <Route path="/app/developer/api-explorer">
+        <Suspense fallback={<LazyFallback />}><ApiExplorer /></Suspense>
+      </Route>
+      <Route path="/app/developer/sdk">
+        <Suspense fallback={<LazyFallback />}><SdkGenerator /></Suspense>
+      </Route>
+
+      {/* Sprint 72-74 — Onboarding Analytics, Geofence Management, Webhook Management, API Changelog */}
+      <Route path="/app/admin/onboarding-analytics">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><OnboardingAnalyticsDashboard /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+      <Route path="/app/admin/geofences">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><GeofenceManagement /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+      <Route path="/app/admin/webhooks">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><WebhookManagement /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+      <Route path="/app/developer/changelog">
+        <Suspense fallback={<LazyFallback />}><ApiChangelog /></Suspense>
+      </Route>
+      {/* Sprint 78 — Rules of Origin, Pilot Dashboard, Executive Dashboard */}
+      <Route path="/app/oga/rules-of-origin">
+        <OGAGuard>
+        <Suspense fallback={<LazyFallback />}><RulesOfOrigin /></Suspense>
+      
+        </OGAGuard>
+      </Route>
+      <Route path="/app/admin/pilot-dashboard">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><PilotDashboard /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+      <Route path="/app/executive/dashboard">
+        <ExecutiveGuard><Suspense fallback={<LazyFallback />}><ExecutiveDashboard /></Suspense></ExecutiveGuard>
+      </Route>
+      <Route path="/app/executive-dashboard">
+        <Suspense fallback={<LazyFallback />}><ExecutiveDashboard /></Suspense>
+      </Route>
+      {/* Sprint 86 — Compliance Email Settings */}
+      <Route path="/app/admin/compliance-email-settings">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><ComplianceEmailSettings /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+      <Route path="/app/admin/go-live-checklist">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><GoLiveChecklist /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+      <Route path="/app/admin/service-health">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><ServiceHealth /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+      <Route path="/app/admin/audit-log">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><AuditLog /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+      <Route path="/app/admin/settings">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><AdminSettings /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+      {/* Sprint 83/84 — Certificate Revocation Audit Log */}
+      <Route path="/app/admin/cert-revocations">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><CertRevocationLog /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+      {/* Production Readiness Checklist */}
+      <Route path="/app/admin/production-checklist">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><AdminProductionChecklist /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+      {/* v31 — New production pages */}
+      <Route path="/app/payments">
+        <Suspense fallback={<LazyFallback />}><Payments /></Suspense>
+      </Route>
+      <Route path="/app/trader/payments-new">
+        <Suspense fallback={<LazyFallback />}><Payments /></Suspense>
+      </Route>
+      <Route path="/app/aeo/applications">
+        <Suspense fallback={<LazyFallback />}><AEOApplications /></Suspense>
+      </Route>
+      <Route path="/app/admin/bulk-export">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><BulkExport /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+      <Route path="/app/developer/webhooks">
+        <Suspense fallback={<LazyFallback />}><WebhookLogs /></Suspense>
+      </Route>
+      <Route path="/app/security/alerts">
+        <SecurityGuard><Suspense fallback={<LazyFallback />}><SecurityAlerts /></Suspense></SecurityGuard>
+      </Route>
+      <Route path="/app/admin/tenants-mgmt">
+        <AdminGuard>
+        <Suspense fallback={<LazyFallback />}><TenantManagement /></Suspense>
+      
+        </AdminGuard>
+      </Route>
+      <Route path="/app/admin/tenant-branding">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><TenantBranding /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/workload-rebalancer">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><OfficerWorkloadRebalancer /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/onboarding/progress">
+        <Suspense fallback={<LazyFallback />}><OnboardingProgress /></Suspense>
+      </Route>
+
+      {/* v67 — Insider Threat Prevention */}
+      <Route path="/app/security/monitor">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><SecurityMonitor /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/batch-seed">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><AdminBatchSeed /></Suspense></AdminGuard>
+      </Route>
+
+      {/* v79 — Kafka Event Log, KYC Timeline, OGA Audit Trail */}
+      <Route path="/app/admin/kafka-event-log">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><KafkaEventLog /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/oga-permit-audit">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><OGAPermitAuditTrail /></Suspense></AdminGuard>
+      </Route>
+
+      {/* v81 — Temporal Runs, WAF Events, Lakehouse Jobs */}
+      <Route path="/app/admin/temporal-runs">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><TemporalWorkflowRuns /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/waf-events">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><WafEvents /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/lakehouse-jobs">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><LakehouseJobs /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/geoip-seed">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><GeoipSeed /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/fluvio-offsets">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><FluvioTopicOffsets /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/apisix-audit">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><ApisixRouteAudit /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/keycloak-sessions">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><KeycloakSessions /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/permify-audit">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><PermifyAuditLog /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/platform-health">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><PlatformHealthScorecard /></Suspense></AdminGuard>
+      </Route>
+      {/* v131 — Cron Job Manager & System Status */}
+      <Route path="/app/admin/cron-jobs">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><CronJobManager /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/system-status">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><AdminSystemStatus /></Suspense></AdminGuard>
+      </Route>
+      {/* Sprint Caddy — Keycloak + Caddy Admin */}
+      <Route path="/app/admin/keycloak">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><KeycloakAdmin /></Suspense></AdminGuard>
+      </Route>
+      {/* Sprint Caddy — Coraza WAF Rule Tuning Dashboard */}
+      <Route path="/app/admin/coraza-waf">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><CorazaWafDashboard /></Suspense></AdminGuard>
+      </Route>
+      {/* Sprint Caddy v4 — Heartbeat Job Manager */}
+      <Route path="/app/admin/heartbeat-admin">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><HeartbeatAdmin /></Suspense></AdminGuard>
+      </Route>
+
+      {/* v136 sprint routes */}
+      <Route path="/app/admin/threshold-audit-log">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><ThresholdAuditLog /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/sanctions-batch">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><SanctionsBatchUpload /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/oga-bulk-approve">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><OGABulkApprove /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/admin/post-clearance-scheduler">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><PostClearanceAuditScheduler /></Suspense></AdminGuard>
+      </Route>
+      <Route path="/app/finance/export-schedules">
+        <FinanceGuard><Suspense fallback={<LazyFallback />}><ExportScheduleManager /></Suspense></FinanceGuard>
+      </Route>
+      <Route path="/app/trader/aeo-renewal">
+        <Suspense fallback={<LazyFallback />}><AEORenewalWorkflow /></Suspense>
+      </Route>
+      <Route path="/app/admin/aeo-renewal">
+        <AdminGuard><Suspense fallback={<LazyFallback />}><AEORenewalWorkflow /></Suspense></AdminGuard>
+      </Route>
+
+      {/* 404 */}
+      <Route path="/404" component={NotFound} />
+              <Route path="/app/aeo-comments/:renewalId" component={AEORenewalComments} />
+        <Route path="/admin/sanctions-entities" component={SanctionsEntitiesPage} />
+        <Route path="/app/schedule-analytics" component={ScheduleAnalyticsPage} />
+        <Route path="/admin/batch-reports" component={BatchValidationReportPage} />
+        <Route path="/app/ucr">{() => <Suspense fallback={<LazyFallback />}><UCRManagement /></Suspense>}</Route>
+        <Route path="/app/manifests">{() => <Suspense fallback={<LazyFallback />}><ManifestManagement /></Suspense>}</Route>
+        <Route path="/app/trade-analytics">{() => <Suspense fallback={<LazyFallback />}><TradeAnalyticsDashboard /></Suspense>}</Route>
+        <Route path="/app/ncs-nrs">
+        {() => <ExecutiveGuard><Suspense fallback={<LazyFallback />}><NCSNRSDashboard /></Suspense></ExecutiveGuard>}
+      </Route>
+        <Route component={NotFound} />
+    </Switch>
+  );
+}
+
+function App() {
+  return (
+    <ErrorBoundary>
+      <ThemeProvider defaultTheme="light">
+        <TooltipProvider>
+          <Toaster />
+          <OfflineBanner />
+          <DemoModeBanner />
+          <InstallPrompt />
+          <Router />
+          <MobileBottomNav />
+        </TooltipProvider>
+      </ThemeProvider>
+    </ErrorBoundary>
+  );
+}
+
+export default App;

From 0d4f4d60f1aebe47ea70abdea39df574e53c24d5 Mon Sep 17 00:00:00 2001
From: munisp <155237317+munisp@users.noreply.github.com>
Date: Thu, 10 Sep 2026 09:02:39 -0400
Subject: [PATCH 14/14] Phase 17 (G1): env-driven CSP extras (CSP_*_EXTRA) +
 worker-src blob: for map engines

---
 server/_core/index.ts | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/server/_core/index.ts b/server/_core/index.ts
index 02f8f164..236f2159 100644
--- a/server/_core/index.ts
+++ b/server/_core/index.ts
@@ -25,6 +25,7 @@ import { createExpressMiddleware } from "@trpc/server/adapters/express";
 import { registerOpenApiRoute } from "../openapi";
 import { metricsRegistry } from "./metrics";
 import { registerHealthRoutes } from "../routes/health";
+import { parseCspOrigins } from "./csp";
 import { appRouter } from "../routers";
 import { createContext } from "./context";
 import { serveStatic, setupVite } from "./vite";
@@ -1297,24 +1298,37 @@ async function startServer() {
     maxAge: 86400,
   }));
   // ── Security headers (helmet) ─────────────────────────────────────────────
+  // Phase 17 (G1): map engines/tiles are config-driven, never CDN-wide-open.
+  // Operators whitelist ONLY the tile/style/glyph origins actually in use via
+  // env (comma-separated origins):
+  //   CSP_SCRIPT_SRC_EXTRA   — e.g. a same-origin maps bootstrap proxy
+  //   CSP_CONNECT_SRC_EXTRA  — e.g. https://tiles.openfreemap.org,https://tile.openstreetmap.org
+  //   CSP_IMG_SRC_EXTRA      — raster tile origins if img-src https: is ever tightened
+  // Defaults stay fail-closed (same-origin only) when the env vars are unset.
+  const cspScriptExtra = parseCspOrigins(process.env.CSP_SCRIPT_SRC_EXTRA);
+  const cspConnectExtra = parseCspOrigins(process.env.CSP_CONNECT_SRC_EXTRA);
+  const cspImgExtra = parseCspOrigins(process.env.CSP_IMG_SRC_EXTRA);
   app.use(helmet({
     contentSecurityPolicy: {
       directives: {
         defaultSrc: ["'self'"],
         // Tighten CSP in production: remove unsafe-inline/eval
         scriptSrc: process.env.NODE_ENV === 'production'
-          ? ["'self'", "https://fonts.googleapis.com"]
+          ? ["'self'", "https://fonts.googleapis.com", ...cspScriptExtra]
           : ["'self'", "'unsafe-inline'", "'unsafe-eval'", "https://fonts.googleapis.com"],
         styleSrc: ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
         fontSrc: ["'self'", "https://fonts.gstatic.com"],
-        imgSrc: ["'self'", "data:", "blob:", "https:"],
+        imgSrc: ["'self'", "data:", "blob:", "https:", ...cspImgExtra],
         // SW-S11-3: production connect-src is same-origin + websockets only —
         // the previous `https:` allowed exfiltration to any HTTPS endpoint.
+        // Map tile/style/glyph fetches require explicit CSP_CONNECT_SRC_EXTRA origins.
         connectSrc: process.env.NODE_ENV === 'production'
-          ? ["'self'", "wss:"]
+          ? ["'self'", "wss:", ...cspConnectExtra]
           : ["'self'", "wss:", "https:"],
         frameSrc: ["'none'"],
         objectSrc: ["'none'"],
+        // MapLibre GL / Cesium create WebGL workers from blob: URLs.
+        workerSrc: ["'self'", "blob:"],
         upgradeInsecureRequests: process.env.NODE_ENV === 'production' ? [] : null,
       },
     },