From f32c30d57e1cca73b0f89bb490967f0d25cbd533 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 12 Jun 2026 12:45:36 +0000
Subject: [PATCH 1/2] perf(frontend): cache static deck.gl layers, code-split
 heavy views, vendor chunking

Rendering:
- Add LayerCache: static layer groups (infra, airspace, weather, GDELT,
  clusters, ...) are memoized across rAF ticks and return identical Layer
  instances while inputs are unchanged, so deck.gl skips diffing and GPU
  attribute regeneration for them; only entity/satellite/trail layers
  rebuild per frame
- Quantize pulse animations (aurora, jamming, FIRMS, dark vessels, holding
  patterns, kiwi node) to 10 Hz ticks instead of per-frame updateTriggers
- Memoize terminator polygon per minute (was recomputed + reallocated 60x/s)
- StarField: globalAlpha instead of per-star rgba string formatting
- interpolation: hoist spherical-math constants out of the per-entity path

Loading:
- Lazy-load TacticalMap, OrbitalMap, IntelGlobe, DashboardView and
  RadioTerminal behind Suspense boundaries
- vite manualChunks: deck.gl, maplibre, mapbox, echarts and react split into
  cacheable on-demand vendor chunks; isolate Vite's preload helper so the
  entry no longer transitively preloads vendors
- Map library CSS moved into the adapters so only the selected engine's
  stylesheet is downloaded
- Consolidate Google Fonts into index.html; drop render-blocking CSS @import

Verified: lint, typecheck, 272/272 unit tests, production build chunk graph
(entry preloads only preload-helper + react-vendor).

https://claude.ai/code/session_01BksbmT1NKcWRSiPA9FUh6B
---
 ...06-12-frontend-performance-optimization.md | 125 ++++
 frontend/index.html                           |   9 +-
 frontend/src/App.tsx                          |  41 +-
 frontend/src/components/map/IntelGlobe.tsx    |   1 -
 .../src/components/map/MapLibreAdapter.tsx    |   3 +
 frontend/src/components/map/MapboxAdapter.tsx |   3 +
 frontend/src/components/map/OrbitalMap.tsx    |   2 -
 frontend/src/components/map/StarField.tsx     |   8 +-
 frontend/src/components/map/TacticalMap.tsx   |   2 -
 .../src/components/map/TerminatorLayer.tsx    |  13 +-
 frontend/src/hooks/useAnimationLoop.ts        |   9 +
 frontend/src/index.css                        |   3 +-
 frontend/src/layers/composition.ts            | 640 ++++++++++++------
 frontend/src/layers/layerCache.ts             |  39 ++
 frontend/src/utils/interpolation.ts           |  20 +-
 frontend/vite.config.ts                       |  45 ++
 16 files changed, 729 insertions(+), 234 deletions(-)
 create mode 100644 agent_docs/tasks/2026-06-12-frontend-performance-optimization.md
 create mode 100644 frontend/src/layers/layerCache.ts

diff --git a/agent_docs/tasks/2026-06-12-frontend-performance-optimization.md b/agent_docs/tasks/2026-06-12-frontend-performance-optimization.md
new file mode 100644
index 00000000..558e9ce9
--- /dev/null
+++ b/agent_docs/tasks/2026-06-12-frontend-performance-optimization.md
@@ -0,0 +1,125 @@
+# Frontend Performance Optimization — Rendering Pipeline & Initial Load
+
+## Issue
+
+The 3D globe views were saturating browser main threads, and initial page load
+shipped the entire application in one bundle:
+
+1. **Per-frame layer rebuilding.** The `useAnimationLoop` rAF loop calls
+   `composeAllLayers()` at 60 fps, constructing ~40–50 new deck.gl `Layer`
+   instances every frame — including static groups (cables, towers, airspace,
+   NWS alerts, GDELT, clusters, …) whose source data only changes every
+   30 s–15 min. Several builders also created **new `data` arrays per frame**
+   (e.g. `historySegments.filter(...)`), which forces deck.gl to regenerate
+   and re-upload GPU attribute buffers on every frame.
+2. **Terminator recompute.** `getTerminatorLayer()` recomputed a 360-point
+   night-side polygon and allocated a fresh GeoJSON object on every call
+   (60×/sec from the rAF loop, plus SituationGlobe's update effect) — a new
+   `data` reference each frame, so deck.gl re-uploaded it continuously.
+3. **Pulse animations at 60 Hz.** Pulsing layers (aurora, jamming, FIRMS,
+   dark vessels, holding patterns, kiwi node) threaded raw `Date.now()`
+   through `updateTriggers`, recomputing color attributes every frame.
+4. **Monolithic bundle.** `vite.config.ts` had no chunking strategy; App.tsx
+   eagerly imported TacticalMap/OrbitalMap/IntelGlobe/DashboardView/
+   RadioTerminal, so deck.gl (~1 MB), maplibre (~1 MB), mapbox (~1.7 MB) and
+   their CSS all landed in the initial load. Both map libraries' CSS was
+   imported unconditionally. Google Fonts were also loaded via a
+   render-blocking `@import` inside the bundled CSS.
+
+## Solution
+
+**Rendering**
+- New `frontend/src/layers/layerCache.ts` — a small `LayerCache` keyed
+  memoizer (`Object.is` over a deps array, same contract as React hooks).
+  `composeAllLayers()` now wraps every *static* layer group in
+  `cache.get(key, deps, build)`, so unchanged groups return the **identical
+  Layer instances** frame-to-frame and deck.gl skips diffing/attribute work
+  for them entirely. Dynamic groups (entities, satellites, trails) still
+  rebuild per frame — their positions genuinely change every frame.
+- Each `useAnimationLoop` instance owns its own `LayerCache` (deck.gl Layer
+  objects hold per-overlay internal state and must not be shared).
+- Pulse animations are quantized to a 10 Hz tick (`now - (now % 100)`):
+  visually identical shimmer, but pulsing groups are now cache hits for ~6
+  consecutive frames instead of recomputing at 60 fps.
+- `TerminatorLayer` memoizes the computed polygon per minute, giving all
+  callers a stable `data` reference.
+- `StarField` varies `ctx.globalAlpha` instead of formatting a new
+  `rgba(...)` string per star per frame (~320 string allocations/frame).
+- `interpolation.ts` hoists the spherical-math constants
+  (`R_EARTH`, `DEG_PER_RAD`, `RAD_PER_DEG`) out of the per-entity hot path.
+
+**Loading**
+- `vite.config.ts`: function-form `manualChunks` splitting `deck-gl`
+  (+luma/loaders/math.gl), `maplibre`, `mapbox`, `echarts`(+zrender), and
+  `react-vendor` into their own cacheable chunks. Vite's virtual
+  preload-helper is isolated into its own chunk — otherwise Rollup parks it
+  inside a vendor chunk and the entry transitively preloads that vendor
+  (this is also why the object form of `manualChunks` was not used).
+- `App.tsx`: TacticalMap, OrbitalMap, IntelGlobe, DashboardView and
+  RadioTerminal are now `lazy()`-loaded through a `lazyView()` helper that
+  bakes in a Suspense boundary, so the view-switch JSX needed no changes.
+- Map library CSS moved into the adapters: `MapboxAdapter` imports only
+  `mapbox-gl.css`, `MapLibreAdapter` only `maplibre-gl.css` — the unused
+  library's CSS is never downloaded.
+- Google Fonts consolidated into a single `index.html` `<link>` (resolves in
+  parallel via preconnect); removed the render-blocking `@import` from
+  `src/index.css`.
+
+## Changes
+
+- `frontend/src/layers/layerCache.ts` — **new**: keyed frame-to-frame layer memoizer.
+- `frontend/src/layers/composition.ts` — all static layer groups wrapped in
+  `LayerCache.get()`; pulse `now` quantized to 10 Hz; history-track data
+  arrays no longer re-filtered per frame.
+- `frontend/src/hooks/useAnimationLoop.ts` — owns a per-overlay `LayerCache`,
+  passes it to `composeAllLayers`.
+- `frontend/src/components/map/TerminatorLayer.tsx` — terminator GeoJSON
+  memoized per minute (stable data reference).
+- `frontend/src/components/map/StarField.tsx` — globalAlpha instead of
+  per-star rgba string formatting.
+- `frontend/src/utils/interpolation.ts` — hoisted trig constants.
+- `frontend/src/App.tsx` — `lazyView()` helper; 5 heavy views code-split.
+- `frontend/src/components/map/{TacticalMap,OrbitalMap,IntelGlobe}.tsx` —
+  removed unconditional map-library CSS imports.
+- `frontend/src/components/map/{MapboxAdapter,MapLibreAdapter}.tsx` — each
+  imports only its own library's CSS.
+- `frontend/vite.config.ts` — manualChunks vendor splitting + preload-helper
+  isolation; `chunkSizeWarningLimit: 1600`.
+- `frontend/index.html` / `frontend/src/index.css` — font loading
+  consolidated, render-blocking `@import` removed.
+
+## Verification
+
+- `pnpm run lint` — clean (0 warnings).
+- `pnpm run typecheck` — clean.
+- `pnpm run test` — 272/272 passed (20 files).
+- `pnpm run build` — verified the chunk graph in `dist/`:
+  - Entry modulepreloads only `preload-helper` (~1 kB) + `react-vendor`
+    (192 kB / 60 kB gzip).
+  - `deck-gl` (1.03 MB), `maplibre` (1.07 MB), `mapbox` (1.72 MB),
+    `echarts` (1.14 MB) are separate chunks fetched only when the views
+    that need them mount; mapbox vs maplibre loads only the selected adapter
+    (CSS included: `mapbox-*.css` 41 kB vs `maplibre-*.css` 70 kB now split).
+
+## Benefits
+
+- **Frame time**: per-frame work in the rAF loop drops from rebuilding
+  ~40–50 layers (plus terminator geometry + several full GPU attribute
+  re-uploads) to rebuilding only the genuinely dynamic entity/satellite/trail
+  layers — static groups are reference-equal cache hits deck.gl skips
+  outright. Pulse-animated groups recompute at 10 Hz instead of 60 Hz.
+- **Initial load**: eager JS shrinks from ~5–6 MB of vendor code to ~200 kB
+  preloaded (entry + react-vendor); the login screen renders without
+  downloading any map/chart engine. Vendor chunks are stable across app
+  releases, so returning clients hit the HTTP cache.
+- **Latency**: fonts no longer render-block behind the CSS bundle; only one
+  map engine (and its CSS) is ever downloaded per session.
+
+## Follow-ups (not in this change)
+
+- `public/world-countries.json` is 14 MB of uncompressed GeoJSON fetched at
+  runtime; simplifying geometry (e.g. mapshaper at ~1–5 % retention) or
+  serving TopoJSON would cut multi-second map start times on slow links.
+- Entity interpolation (`processEntityFrame`) is still O(n) on the main
+  thread per frame; offloading to the existing TAK worker is the next big
+  rendering win if entity counts grow past ~5k.
diff --git a/frontend/index.html b/frontend/index.html
index b4d51c64..29df7f23 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -23,11 +23,16 @@
     />
     <meta property="og:type" content="website" />
     <link rel="icon" type="image/png" href="/favicon.png" />
-    <!-- Importing JetBrains Mono from Google Fonts (or similar mono) -->
+    <!--
+      All Google Fonts load from here (one combined request) rather than via
+      @import inside the bundled CSS — a CSS @import chains a render-blocking
+      fetch behind the stylesheet download; this link resolves in parallel
+      with the JS modules thanks to the preconnect hints.
+    -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap"
       rel="stylesheet"
     />
     <style>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index faffda16..6be38683 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,19 +1,14 @@
 import type { FeatureCollection } from "geojson";
 import { AlertTriangle, CheckCircle2, ExternalLink, Globe, Loader2, Plane, Radar, Ship, X, XCircle } from "lucide-react";
-import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useRef, useState, type ComponentProps, type ComponentType } from "react";
 import { getSetupStatus } from "./api/auth";
 import { fetchMissionH3Risk, type RiskSeverity } from "./api/h3Risk";
-import RadioTerminal from "./components/js8call/RadioTerminal";
 import { IntelSidebar } from "./components/layouts/IntelSidebar";
 import { MainHud } from "./components/layouts/MainHud";
 import { OrbitalSidebarLeft } from "./components/layouts/OrbitalSidebarLeft";
 import { SidebarLeft } from "./components/layouts/SidebarLeft";
 import { SidebarRight } from "./components/layouts/SidebarRight";
 import { TopBar } from "./components/layouts/TopBar";
-import { IntelGlobe } from "./components/map/IntelGlobe";
-import { OrbitalMap } from "./components/map/OrbitalMap";
-import TacticalMap from "./components/map/TacticalMap";
-import { DashboardView } from "./components/views/DashboardView";
 import { LoginView } from "./components/views/LoginView";
 import { AIAnalystPanel } from "./components/widgets/AIAnalystPanel";
 import { AnalysisFormatter } from "./components/widgets/AnalysisFormatter";
@@ -55,6 +50,40 @@ interface IntelArticleContent {
 const StatsDashboardView = lazy(() => import('./components/views/StatsDashboardView'));
 const LinkageAuditView = lazy(() => import('./components/views/LinkageAuditView'));
 
+// ── Code-split heavy views ──────────────────────────────────────────────────
+// The map/globe views pull in deck.gl + maplibre/mapbox (multi-MB chunks) and
+// the radio terminal pulls its own widget tree. Loading them on demand keeps
+// the login screen and app shell out from under that cost. Each wrapper
+// carries its own Suspense boundary so the view-switch JSX stays untouched.
+function lazyView<T extends ComponentType<any>>(
+  importer: () => Promise<{ default: T }>,
+) {
+  const LazyComp = lazy(importer);
+  return function LazyViewBoundary(props: ComponentProps<T>) {
+    return (
+      <Suspense fallback={<div className="absolute inset-0 bg-[#050505]" />}>
+        <LazyComp {...props} />
+      </Suspense>
+    );
+  };
+}
+
+const TacticalMap = lazyView(() => import("./components/map/TacticalMap"));
+const OrbitalMap = lazyView(() =>
+  import("./components/map/OrbitalMap").then((m) => ({ default: m.OrbitalMap })),
+);
+const IntelGlobe = lazyView(() =>
+  import("./components/map/IntelGlobe").then((m) => ({ default: m.IntelGlobe })),
+);
+const DashboardView = lazyView(() =>
+  import("./components/views/DashboardView").then((m) => ({
+    default: m.DashboardView,
+  })),
+);
+const RadioTerminal = lazyView(
+  () => import("./components/js8call/RadioTerminal"),
+);
+
 function AuthenticatedApp() {
 
   type RegionalRiskResponse = {
diff --git a/frontend/src/components/map/IntelGlobe.tsx b/frontend/src/components/map/IntelGlobe.tsx
index 5e0a37dd..a31f7ff5 100644
--- a/frontend/src/components/map/IntelGlobe.tsx
+++ b/frontend/src/components/map/IntelGlobe.tsx
@@ -15,7 +15,6 @@
  */
 import { MapboxOverlay } from "@deck.gl/mapbox";
 import type { FeatureCollection } from "geojson";
-import "maplibre-gl/dist/maplibre-gl.css";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { fetchH3Risk, type H3RiskCellData } from "../../api/h3Risk";
 import { buildH3RiskLayer } from "../../layers/buildH3RiskLayer";
diff --git a/frontend/src/components/map/MapLibreAdapter.tsx b/frontend/src/components/map/MapLibreAdapter.tsx
index 51f56d04..2578341b 100644
--- a/frontend/src/components/map/MapLibreAdapter.tsx
+++ b/frontend/src/components/map/MapLibreAdapter.tsx
@@ -1,4 +1,7 @@
 import { MapboxOverlay } from "@deck.gl/mapbox";
+// CSS lives with the adapter so only the selected map library's styles are
+// loaded — the lazy chunk for the unused adapter (and its CSS) never downloads.
+import "maplibre-gl/dist/maplibre-gl.css";
 import type { CustomLayerInterface, StyleSpecification } from "maplibre-gl";
 import { forwardRef, useEffect, useRef } from "react";
 import {
diff --git a/frontend/src/components/map/MapboxAdapter.tsx b/frontend/src/components/map/MapboxAdapter.tsx
index e0f652f2..2d6db4f3 100644
--- a/frontend/src/components/map/MapboxAdapter.tsx
+++ b/frontend/src/components/map/MapboxAdapter.tsx
@@ -1,4 +1,7 @@
 import { MapboxOverlay } from "@deck.gl/mapbox";
+// CSS lives with the adapter so only the selected map library's styles are
+// loaded — the lazy chunk for the unused adapter (and its CSS) never downloads.
+import "mapbox-gl/dist/mapbox-gl.css";
 import type { StyleSpecification } from "mapbox-gl";
 import { forwardRef, useEffect, useMemo, useRef } from "react";
 import {
diff --git a/frontend/src/components/map/OrbitalMap.tsx b/frontend/src/components/map/OrbitalMap.tsx
index 2fc5d902..5df2f77f 100644
--- a/frontend/src/components/map/OrbitalMap.tsx
+++ b/frontend/src/components/map/OrbitalMap.tsx
@@ -9,8 +9,6 @@ import React, {
 import type { MapRef } from "react-map-gl/maplibre";
 
 import type { FeatureCollection } from "geojson";
-import "maplibre-gl/dist/maplibre-gl.css";
-import "mapbox-gl/dist/mapbox-gl.css";
 import { CoTEntity, JS8Station, MissionProps, RFSite, GroundTrackPoint, SatNOGSStation } from "../../types";
 import { MapTooltip } from "./MapTooltip";
 import { MapContextMenu } from "./MapContextMenu";
diff --git a/frontend/src/components/map/StarField.tsx b/frontend/src/components/map/StarField.tsx
index e9daca8c..08ccf6b3 100644
--- a/frontend/src/components/map/StarField.tsx
+++ b/frontend/src/components/map/StarField.tsx
@@ -52,15 +52,17 @@ export function StarField({ active, contained = false }: StarFieldProps) {
 
       ctx.clearRect(0, 0, W, H);
 
-      // Draw stars with subtle twinkling
+      // Draw stars with subtle twinkling — vary globalAlpha instead of
+      // formatting a new rgba() string per star per frame
+      ctx.fillStyle = '#ffffff';
       for (const star of stars) {
         const t = Math.sin(frame * star.twinkleSpeed + star.twinklePhase);
-        const opacity = star.baseOpacity * (0.65 + 0.35 * t);
-        ctx.fillStyle = `rgba(255, 255, 255, ${opacity.toFixed(3)})`;
+        ctx.globalAlpha = star.baseOpacity * (0.65 + 0.35 * t);
         ctx.beginPath();
         ctx.arc(star.x * W, star.y * H, star.size, 0, Math.PI * 2);
         ctx.fill();
       }
+      ctx.globalAlpha = 1;
 
       frame++;
       animId = requestAnimationFrame(render);
diff --git a/frontend/src/components/map/TacticalMap.tsx b/frontend/src/components/map/TacticalMap.tsx
index 584eecd4..7d43e705 100644
--- a/frontend/src/components/map/TacticalMap.tsx
+++ b/frontend/src/components/map/TacticalMap.tsx
@@ -1,6 +1,4 @@
 import type { FeatureCollection } from "geojson";
-import "mapbox-gl/dist/mapbox-gl.css";
-import "maplibre-gl/dist/maplibre-gl.css";
 import React, {
   MutableRefObject,
   Suspense,
diff --git a/frontend/src/components/map/TerminatorLayer.tsx b/frontend/src/components/map/TerminatorLayer.tsx
index 858fe85c..e1a0f435 100644
--- a/frontend/src/components/map/TerminatorLayer.tsx
+++ b/frontend/src/components/map/TerminatorLayer.tsx
@@ -103,13 +103,24 @@ function computeTerminator(date: Date) {
   } as TerminatorGeoJson;
 }
 
+// The terminator only moves meaningfully once per minute, but this function is
+// called from per-frame layer composition. Memoize the (360-point) polygon so
+// repeat calls within the same minute return the identical GeoJSON object —
+// a stable `data` reference also lets deck.gl skip re-uploading attributes.
+let cachedMinute = 0;
+let cachedGeoJson: TerminatorGeoJson | null = null;
+
 export function getTerminatorLayer(visible: boolean) {
   // We use Date.now() rounded to nearest minute to avoid constant re-renders
   // For a pure layer creator function, we calculate the current terminator
   const now = new Date();
   now.setSeconds(0, 0);
 
-  const terminatorGeoJson = computeTerminator(now);
+  if (!cachedGeoJson || cachedMinute !== now.getTime()) {
+    cachedMinute = now.getTime();
+    cachedGeoJson = computeTerminator(now);
+  }
+  const terminatorGeoJson = cachedGeoJson;
 
   return new GeoJsonLayer({
     id: 'terminator-layer',
diff --git a/frontend/src/hooks/useAnimationLoop.ts b/frontend/src/hooks/useAnimationLoop.ts
index 18039385..c6eaee25 100644
--- a/frontend/src/hooks/useAnimationLoop.ts
+++ b/frontend/src/hooks/useAnimationLoop.ts
@@ -13,6 +13,7 @@ import { fetchClusters, ClusterInfo } from "../api/clusters";
 import { latLngToCell } from "h3-js";
 import { H3CellData } from "../layers/buildH3CoverageLayer";
 import { composeAllLayers } from "../layers/composition";
+import { LayerCache } from "../layers/layerCache";
 import {
 
   CoTEntity,
@@ -348,6 +349,13 @@ export function useAnimationLoop({
   const js8StationsArrayRef = useRef<import("../types").JS8Station[]>([]);
   const js8StationsSizeRef = useRef<number>(0);
 
+  // Per-overlay layer memoization: static layer groups (infra, airspace,
+  // weather, …) are only rebuilt when their inputs change instead of on
+  // every rAF tick. Must be per-hook-instance — Layer objects hold internal
+  // state tied to a single deck overlay.
+  const layerCacheRef = useRef<LayerCache | null>(null);
+  if (!layerCacheRef.current) layerCacheRef.current = new LayerCache();
+
   const countryOutageMap = React.useMemo(() => {
     if (!outagesData || !outagesData.features) return {};
     const map: Record<string, Record<string, unknown>> = {};
@@ -794,6 +802,7 @@ export function useAnimationLoop({
         clausalChainsData: clausalChainsDataRef.current,
         firmsData: firmsDataRef.current,
         darkVesselData: darkVesselDataRef.current,
+        cache: layerCacheRef.current ?? undefined,
       });
 
       if (mapLoadedRef.current && overlayRef.current?.setProps) {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8e5c858f..6698cc2d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,4 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
+/* Google Fonts (Space Grotesk, Inter, JetBrains Mono) are loaded from
+   index.html — an @import here would render-block behind the bundled CSS. */
 @import "tailwindcss";
 
 /* Load the JS theme config (colors, fonts, etc.) */
diff --git a/frontend/src/layers/composition.ts b/frontend/src/layers/composition.ts
index f66c2c5d..0ba7f9d6 100644
--- a/frontend/src/layers/composition.ts
+++ b/frontend/src/layers/composition.ts
@@ -30,6 +30,7 @@ import { buildRFLayers } from "./buildRFLayers";
 import { buildTowerLayer } from "./buildTowerLayer";
 import { buildTrailLayers } from "./buildTrailLayers";
 import { getOrbitalLayers } from "./OrbitalLayer";
+import { LayerCache } from "./layerCache";
 
 import type { GroundTrackPoint, ISSPosition, SatNOGSStation } from "../types";
 import type { H3CellData } from "./buildH3CoverageLayer";
@@ -114,6 +115,13 @@ interface LayerCompositionOptions {
   firmsData?: FeatureCollection | null;
   /** Dark vessel candidates (AIS-gap cross-reference) GeoJSON */
   darkVesselData?: FeatureCollection | null;
+  /**
+   * Frame-to-frame layer memoization. Pass a per-overlay instance so layer
+   * groups whose inputs are unchanged return the identical Layer instances
+   * (deck.gl then skips diffing and attribute regeneration for them).
+   * Omitting it disables caching (every group rebuilds on every call).
+   */
+  cache?: LayerCache;
 }
 
 export function composeAllLayers(options: LayerCompositionOptions) {
@@ -170,60 +178,121 @@ export function composeAllLayers(options: LayerCompositionOptions) {
     darkVesselData,
   } = options;
 
+  const cache = options.cache ?? new LayerCache();
+
+  // Pulse/glow animations tick at 10 Hz instead of every frame. The shimmer
+  // stays visually smooth, but the pulsing groups become cache hits for ~6
+  // consecutive frames instead of recomputing their color attributes at 60 fps.
+  const pulseNow = now - (now % 100);
+
   // JS8 station layers
-  let js8Layers: Layer[] = [];
-  if (js8Stations.length > 0 && ownGrid) {
-    const [ownLat, ownLon] = maidenheadToLatLon(ownGrid);
-    const selectedJS8Callsign =
-      currentSelected?.type === "js8" ? currentSelected.callsign : null;
-    js8Layers = buildJS8Layers(
+  const js8Layers = cache.get(
+    "js8",
+    [
       js8Stations,
-      ownLat,
-      ownLon,
+      ownGrid,
       globeMode,
-      selectedJS8Callsign,
+      currentSelected,
       onEntitySelect,
       setHoveredEntity,
       setHoverPosition,
       zoom,
-    );
-  }
+    ],
+    () => {
+      if (js8Stations.length === 0 || !ownGrid) return [];
+      const [ownLat, ownLon] = maidenheadToLatLon(ownGrid);
+      const selectedJS8Callsign =
+        currentSelected?.type === "js8" ? currentSelected.callsign : null;
+      return buildJS8Layers(
+        js8Stations,
+        ownLat,
+        ownLon,
+        globeMode,
+        selectedJS8Callsign,
+        onEntitySelect,
+        setHoveredEntity,
+        setHoverPosition,
+        zoom,
+      );
+    },
+  );
 
   // Repeater infrastructure layers
-  let repeaterLayers: Layer[] = [];
-  if (filters?.showRepeaters && rfSites.length > 0) {
-    repeaterLayers = buildRFLayers(
+  const repeaterLayers = cache.get(
+    "repeaters",
+    [
+      filters?.showRepeaters,
       rfSites,
       globeMode,
       onEntitySelect,
       setHoveredEntity,
       setHoverPosition,
-    );
-  }
+    ],
+    () =>
+      filters?.showRepeaters && rfSites.length > 0
+        ? buildRFLayers(
+            rfSites,
+            globeMode,
+            onEntitySelect,
+            setHoveredEntity,
+            setHoverPosition,
+          )
+        : [],
+  );
 
   // Submarine Cables & Stations Layers (+ PeeringDB IXPs/Facilities)
-  const { outages: outageLayers, assets: infraAssetLayers } = buildInfraLayers(
+  // Built once per input change; the outage and asset groups are spread at
+  // different z-positions, so they are cached under separate keys sharing
+  // one memoized build.
+  const infraDeps = [
     cablesData,
     stationsData,
     outagesData,
-    filters || null,
+    filters,
     setHoveredInfra,
     setSelectedInfra,
     currentSelected,
     globeMode,
     worldCountriesData,
     countryOutageMap,
-    ixpData ?? null,
-    facilityData ?? null,
-    dnsRootData ?? [],
+    ixpData,
+    facilityData,
+    dnsRootData,
+  ];
+  let infraResult: { outages: Layer[]; assets: Layer[] } | null = null;
+  const buildInfra = () =>
+    (infraResult ??= buildInfraLayers(
+      cablesData,
+      stationsData,
+      outagesData,
+      filters || null,
+      setHoveredInfra,
+      setSelectedInfra,
+      currentSelected,
+      globeMode,
+      worldCountriesData,
+      countryOutageMap,
+      ixpData ?? null,
+      facilityData ?? null,
+      dnsRootData ?? [],
+    ));
+  const outageLayers = cache.get(
+    "infra-outages",
+    infraDeps,
+    () => buildInfra().outages,
+  );
+  const infraAssetLayers = cache.get(
+    "infra-assets",
+    infraDeps,
+    () => buildInfra().assets,
   );
 
   // KiwiSDR node marker layer
-  const kiwiLayers: Layer[] = [];
-  if (kiwiNode && kiwiNode.lat !== 0 && kiwiNode.lon !== 0) {
-    const pulse = (Math.sin(now / 400) + 1) / 2;
+  const kiwiLayers = cache.get("kiwi-node", [kiwiNode, pulseNow], () => {
+    if (!kiwiNode || kiwiNode.lat === 0 || kiwiNode.lon === 0) return [];
+    const pulse = (Math.sin(pulseNow / 400) + 1) / 2;
 
-    kiwiLayers.push(
+    return [
       new ScatterplotLayer({
         id: "kiwi-node-core",
         data: [kiwiNode],
@@ -240,10 +309,8 @@ export function composeAllLayers(options: LayerCompositionOptions) {
         lineWidthUnits: "meters",
         pickable: true,
       }),
-    );
 
-    // Kiwi Node Label (re-enabled as requested by user - HUD style)
-    kiwiLayers.push(
+      // Kiwi Node Label (re-enabled as requested by user - HUD style)
       new TextLayer({
         id: "kiwi-node-label",
         data: [kiwiNode],
@@ -267,126 +334,254 @@ export function composeAllLayers(options: LayerCompositionOptions) {
         pickable: false,
         lineHeight: 1.2,
       }),
-    );
-  }
+    ];
+  });
 
   return [
-    ...buildH3CoverageLayer(h3Cells, !!filters?.showH3Coverage),
-    ...buildH3RiskLayer(h3RiskCells, !!filters?.showH3Risk),
-    getTerminatorLayer(!!filters?.showTerminator),
+    ...cache.get("h3-coverage", [h3Cells, filters?.showH3Coverage], () =>
+      buildH3CoverageLayer(h3Cells, !!filters?.showH3Coverage),
+    ),
+    ...cache.get("h3-risk", [h3RiskCells, filters?.showH3Risk], () =>
+      buildH3RiskLayer(h3RiskCells, !!filters?.showH3Risk),
+    ),
+    // Terminator geometry only changes once per minute
+    ...cache.get(
+      "terminator",
+      [filters?.showTerminator, Math.floor(now / 60_000)],
+      () => [getTerminatorLayer(!!filters?.showTerminator)],
+    ),
     // Aurora oval sits below infra/entity layers — large translucent area fill
-    ...buildAuroraLayer(auroraData, !!filters?.showAurora, globeMode, now),
+    ...cache.get(
+      "aurora",
+      [auroraData, filters?.showAurora, globeMode, pulseNow],
+      () => buildAuroraLayer(auroraData, !!filters?.showAurora, globeMode, pulseNow),
+    ),
     // Regional Shading Tier: Internet Outages
     ...outageLayers,
     // Regional Shading Tier: NWS Alerts
     // Keep NWS above outages so polygon picking is not masked in 2D.
-    ...buildNWSAlertsLayer(
-      nwsAlertsData ?? null,
-      !!filters?.showNWSAlerts,
-      globeMode,
-      setHoveredInfra,
-      setSelectedInfra,
+    ...cache.get(
+      "nws-alerts",
+      [
+        nwsAlertsData,
+        filters?.showNWSAlerts,
+        globeMode,
+        setHoveredInfra,
+        setSelectedInfra,
+      ],
+      () =>
+        buildNWSAlertsLayer(
+          nwsAlertsData ?? null,
+          !!filters?.showNWSAlerts,
+          globeMode,
+          setHoveredInfra,
+          setSelectedInfra,
+        ),
     ),
     // Tactical Zones Tier: OpenAIP global airspace zones
-    ...buildAirspaceLayer({
-      data: airspaceZonesData ?? null,
-      enabled: !!filters?.showAirspaceZones,
-      globeMode,
-      onHover: setHoveredInfra,
-      onSelect: setSelectedInfra,
-      enabledTypes: filters?.airspaceZoneTypes as string[] | undefined,
-    }),
+    ...cache.get(
+      "airspace",
+      [
+        airspaceZonesData,
+        filters?.showAirspaceZones,
+        globeMode,
+        setHoveredInfra,
+        setSelectedInfra,
+        filters?.airspaceZoneTypes,
+      ],
+      () =>
+        buildAirspaceLayer({
+          data: airspaceZonesData ?? null,
+          enabled: !!filters?.showAirspaceZones,
+          globeMode,
+          onHover: setHoveredInfra,
+          onSelect: setSelectedInfra,
+          enabledTypes: filters?.airspaceZoneTypes as string[] | undefined,
+        }),
+    ),
     // Fixed Infrastructure Assets Tier
     ...infraAssetLayers,
     // NDBC Ocean Buoys — Maritime Layer Group (Z-order 8–11)
-    ...buildNDBCLayer(
-      buoyData ?? null,
-      !!filters?.showBuoys,
-      globeMode,
-      setHoveredInfra,
-      setSelectedInfra,
+    ...cache.get(
+      "ndbc-buoys",
+      [buoyData, filters?.showBuoys, globeMode, setHoveredInfra, setSelectedInfra],
+      () =>
+        buildNDBCLayer(
+          buoyData ?? null,
+          !!filters?.showBuoys,
+          globeMode,
+          setHoveredInfra,
+          setSelectedInfra,
+        ),
     ),
     // Jamming zones sit above infra but below entity chevrons
-    ...buildJammingLayer(
-      jammingData,
-      !!filters?.showJamming,
-      globeMode,
-      now,
-      setHoveredEntity,
-      setHoverPosition,
-      onEntitySelect,
+    ...cache.get(
+      "jamming",
+      [
+        jammingData,
+        filters?.showJamming,
+        globeMode,
+        pulseNow,
+        setHoveredEntity,
+        setHoverPosition,
+        onEntitySelect,
+      ],
+      () =>
+        buildJammingLayer(
+          jammingData,
+          !!filters?.showJamming,
+          globeMode,
+          pulseNow,
+          setHoveredEntity,
+          setHoverPosition,
+          onEntitySelect,
+        ),
     ),
     // Dark vessel candidates — Tier 5 Dynamic (depthBias -108, above jamming)
-    ...buildDarkVesselLayer(
-      darkVesselData ?? null,
-      !!filters?.showDarkVessels,
-      globeMode,
-      now,
-      setHoveredInfra,
-      setSelectedInfra,
+    ...cache.get(
+      "dark-vessels",
+      [
+        darkVesselData,
+        filters?.showDarkVessels,
+        globeMode,
+        pulseNow,
+        setHoveredInfra,
+        setSelectedInfra,
+      ],
+      () =>
+        buildDarkVesselLayer(
+          darkVesselData ?? null,
+          !!filters?.showDarkVessels,
+          globeMode,
+          pulseNow,
+          setHoveredInfra,
+          setSelectedInfra,
+        ),
     ),
     // NASA FIRMS thermal hotspots — Tier 4 Infra Assets (depthBias -92)
-    ...buildFIRMSLayer(
-      firmsData ?? null,
-      !!filters?.showFIRMS,
-      globeMode,
-      now,
-      setHoveredInfra,
-      setSelectedInfra,
+    ...cache.get(
+      "firms",
+      [
+        firmsData,
+        filters?.showFIRMS,
+        globeMode,
+        pulseNow,
+        setHoveredInfra,
+        setSelectedInfra,
+      ],
+      () =>
+        buildFIRMSLayer(
+          firmsData ?? null,
+          !!filters?.showFIRMS,
+          globeMode,
+          pulseNow,
+          setHoveredInfra,
+          setSelectedInfra,
+        ),
     ),
     // Cluster octagons sit above jamming so they are visible through the circular halos
-    ...buildClusterLayer(clusterData ?? [], !!filters?.showClusters, globeMode, setHoveredEntity, setHoverPosition, onEntitySelect),
+    ...cache.get(
+      "clusters",
+      [
+        clusterData,
+        filters?.showClusters,
+        globeMode,
+        setHoveredEntity,
+        setHoverPosition,
+        onEntitySelect,
+      ],
+      () =>
+        buildClusterLayer(
+          clusterData ?? [],
+          !!filters?.showClusters,
+          globeMode,
+          setHoveredEntity,
+          setHoverPosition,
+          onEntitySelect,
+        ),
+    ),
     // GDELT geolocated news events — sit above infra/jamming, below entity chevrons
     // Auto-enabled when a mission area is active (shows all events in AOT)
-    ...buildGdeltLayer(
-      gdeltData,
-      !!filters?.showGdelt,
-      globeMode,
-      gdeltToneThreshold,
-      filters?.showGdeltLabels === true,
-      (entity, pos) => {
-        setHoveredEntity(entity);
-        setHoverPosition(pos);
-      },
-      (g) => {
-        // Transform GDELT point into a virtual entity for the sidebar
-        onEntitySelect({
-          uid: `gdelt-${g.event_id}`,
-          type: "gdelt",
-          callsign: g.name,
-          lat: g.lat,
-          lon: g.lon,
-          altitude: 0,
-          course: 0,
-          speed: 0,
-          lastSeen: Date.now(),
-          detail: g as any,
-          trail: [],
-          uidHash: 0,
-        });
-      },
+    ...cache.get(
+      "gdelt",
+      [
+        gdeltData,
+        filters?.showGdelt,
+        globeMode,
+        gdeltToneThreshold,
+        filters?.showGdeltLabels,
+        setHoveredEntity,
+        setHoverPosition,
+        onEntitySelect,
+      ],
+      () =>
+        buildGdeltLayer(
+          gdeltData,
+          !!filters?.showGdelt,
+          globeMode,
+          gdeltToneThreshold,
+          filters?.showGdeltLabels === true,
+          (entity, pos) => {
+            setHoveredEntity(entity);
+            setHoverPosition(pos);
+          },
+          (g) => {
+            // Transform GDELT point into a virtual entity for the sidebar
+            onEntitySelect({
+              uid: `gdelt-${g.event_id}`,
+              type: "gdelt",
+              callsign: g.name,
+              lat: g.lat,
+              lon: g.lon,
+              altitude: 0,
+              course: 0,
+              speed: 0,
+              lastSeen: Date.now(),
+              detail: g as any,
+              trail: [],
+              uidHash: 0,
+            });
+          },
+        ),
     ),
     // Clausal chain narrative traces — sits above GDELT events, below ISS/orbital
-    ...buildClausalChainLayer(
-      clausalChainsData || null,
-      filters?.showClausalChains === true,
-      globeMode,
-      (entity, pos) => {
-        setHoveredEntity(entity);
-        setHoverPosition(pos);
-      },
-      onEntitySelect,
+    ...cache.get(
+      "clausal-chains",
+      [
+        clausalChainsData,
+        filters?.showClausalChains,
+        globeMode,
+        setHoveredEntity,
+        setHoverPosition,
+        onEntitySelect,
+      ],
+      () =>
+        buildClausalChainLayer(
+          clausalChainsData || null,
+          filters?.showClausalChains === true,
+          globeMode,
+          (entity, pos) => {
+            setHoveredEntity(entity);
+            setHoverPosition(pos);
+          },
+          onEntitySelect,
+        ),
     ),
     // ISS real-time tracker — Navigation/Orbital group (Z-order 15–17)
-    ...(filters?.showISS !== false
-      ? buildISSLayer({
-          position: issPosition ?? null,
-          track: issTrack ?? [],
-          globeMode,
-          onHover: setHoveredInfra,
-          onSelect: setSelectedInfra,
-        })
-      : []),
+    ...cache.get(
+      "iss",
+      [issPosition, issTrack, globeMode, filters?.showISS, setHoveredInfra, setSelectedInfra],
+      () =>
+        filters?.showISS !== false
+          ? buildISSLayer({
+              position: issPosition ?? null,
+              track: issTrack ?? [],
+              globeMode,
+              onHover: setHoveredInfra,
+              onSelect: setSelectedInfra,
+            })
+          : [],
+    ),
     ...getOrbitalLayers({
       satellites: filteredSatellites,
       selectedEntity: currentSelected,
@@ -407,87 +602,103 @@ export function composeAllLayers(options: LayerCompositionOptions) {
         }
       },
     }),
-    ...buildAOTLayers(
-      aotShapes,
-      filters,
-      globeMode,
-      observer,
-      currentMission
-        ? {
-            lat: currentMission.lat,
-            lon: currentMission.lon,
-            radiusKm: (Number(filters?.rfRadius) || 300) * 1.852,
-          }
-        : null,
+    ...cache.get(
+      "aot",
+      [aotShapes, filters, globeMode, observer, currentMission],
+      () =>
+        buildAOTLayers(
+          aotShapes,
+          filters,
+          globeMode,
+          observer,
+          currentMission
+            ? {
+                lat: currentMission.lat,
+                lon: currentMission.lon,
+                radiusKm: (Number(filters?.rfRadius) || 300) * 1.852,
+              }
+            : null,
+        ),
     ),
     ...repeaterLayers,
     ...kiwiLayers,
-    ...buildTowerLayer(
-      towersData || [],
-      filters?.showTowers === true,
-      globeMode,
-      setHoveredInfra,
-      setSelectedInfra,
+    ...cache.get(
+      "towers",
+      [towersData, filters?.showTowers, globeMode, setHoveredInfra, setSelectedInfra],
+      () =>
+        buildTowerLayer(
+          towersData || [],
+          filters?.showTowers === true,
+          globeMode,
+          setHoveredInfra,
+          setSelectedInfra,
+        ),
     ),
     // Historical flight path (solid coverage segments + ghost gap segments)
-    ...(historySegments && historySegments.length > 0
-      ? [
-          new PathLayer({
-            id: "history-track-solid",
-            data: historySegments.filter((s) => !s.isGap),
-            getPath: (d: HistorySegment) => d.path,
-            getColor: [0, 255, 65, 160],
-            getWidth: 2,
-            widthUnits: "pixels",
-            jointRounded: true,
-            capRounded: true,
-            pickable: false,
-          }),
-          new PathLayer({
-            id: "history-track-gap",
-            data: historySegments.filter((s) => s.isGap),
-            getPath: (d: HistorySegment) => d.path,
-            getColor: [251, 191, 36, 80],
-            getWidth: 1,
-            widthUnits: "pixels",
-            dashJustified: true,
-            getDashArray: [4, 4],
-            extensions: [],
-            pickable: false,
-          }),
-          // Start dot (oldest point) and end dot (current / newest)
-          new ScatterplotLayer({
-            id: "history-track-endpoints",
-            data: (() => {
-              const solid = historySegments.filter((s) => !s.isGap);
-              if (solid.length === 0) return [];
-              const firstSeg = solid[0];
-              const lastSeg = solid[solid.length - 1];
-              return [
-                {
-                  pos: firstSeg.path[0],
-                  color: [0, 255, 65, 220] as [number, number, number, number],
-                },
-                {
-                  pos: lastSeg.path[lastSeg.path.length - 1],
-                  color: [255, 200, 0, 220] as [number, number, number, number],
-                },
-              ];
-            })(),
-            getPosition: (d: {
-              pos: [number, number, number];
-              color: [number, number, number, number];
-            }) => d.pos,
-            getFillColor: (d: {
-              pos: [number, number, number];
-              color: [number, number, number, number];
-            }) => d.color,
-            getRadius: 5,
-            radiusUnits: "pixels",
-            pickable: false,
-          }),
-        ]
-      : []),
+    ...cache.get("history-track", [historySegments], () => {
+      if (!historySegments || historySegments.length === 0) return [];
+      const solid = historySegments.filter((s) => !s.isGap);
+      const firstSeg = solid[0];
+      const lastSeg = solid[solid.length - 1];
+      return [
+        new PathLayer({
+          id: "history-track-solid",
+          data: solid,
+          getPath: (d: HistorySegment) => d.path,
+          getColor: [0, 255, 65, 160],
+          getWidth: 2,
+          widthUnits: "pixels",
+          jointRounded: true,
+          capRounded: true,
+          pickable: false,
+        }),
+        new PathLayer({
+          id: "history-track-gap",
+          data: historySegments.filter((s) => s.isGap),
+          getPath: (d: HistorySegment) => d.path,
+          getColor: [251, 191, 36, 80],
+          getWidth: 1,
+          widthUnits: "pixels",
+          dashJustified: true,
+          getDashArray: [4, 4],
+          extensions: [],
+          pickable: false,
+        }),
+        // Start dot (oldest point) and end dot (current / newest)
+        new ScatterplotLayer({
+          id: "history-track-endpoints",
+          data:
+            solid.length === 0
+              ? []
+              : [
+                  {
+                    pos: firstSeg.path[0],
+                    color: [0, 255, 65, 220] as [number, number, number, number],
+                  },
+                  {
+                    pos: lastSeg.path[lastSeg.path.length - 1],
+                    color: [255, 200, 0, 220] as [
+                      number,
+                      number,
+                      number,
+                      number,
+                    ],
+                  },
+                ],
+          getPosition: (d: {
+            pos: [number, number, number];
+            color: [number, number, number, number];
+          }) => d.pos,
+          getFillColor: (d: {
+            pos: [number, number, number];
+            color: [number, number, number, number];
+          }) => d.color,
+          getRadius: 5,
+          radiusUnits: "pixels",
+          pickable: false,
+        }),
+      ];
+    }),
     ...buildTrailLayers(
       interpolatedEntities,
       currentSelected,
@@ -495,16 +706,29 @@ export function composeAllLayers(options: LayerCompositionOptions) {
       historyTails,
     ),
     // Aviation Holding Patterns - Pulsed Amber tactical zones
-    ...buildHoldingPatternLayer(
-      holdingPatternData || null,
-      filters?.showHoldingPatterns !== false,
-      globeMode,
-      now,
-      (entity, pos) => {
-        setHoveredEntity(entity);
-        setHoverPosition(pos);
-      },
-      onEntitySelect,
+    ...cache.get(
+      "holding-patterns",
+      [
+        holdingPatternData,
+        filters?.showHoldingPatterns,
+        globeMode,
+        pulseNow,
+        setHoveredEntity,
+        setHoverPosition,
+        onEntitySelect,
+      ],
+      () =>
+        buildHoldingPatternLayer(
+          holdingPatternData || null,
+          filters?.showHoldingPatterns !== false,
+          globeMode,
+          pulseNow,
+          (entity, pos) => {
+            setHoveredEntity(entity);
+            setHoverPosition(pos);
+          },
+          onEntitySelect,
+        ),
     ),
     ...buildEntityLayers(
       interpolatedEntities,
diff --git a/frontend/src/layers/layerCache.ts b/frontend/src/layers/layerCache.ts
new file mode 100644
index 00000000..03859586
--- /dev/null
+++ b/frontend/src/layers/layerCache.ts
@@ -0,0 +1,39 @@
+import type { Layer } from "@deck.gl/core";
+
+/**
+ * Frame-to-frame memoization for deck.gl layer groups.
+ *
+ * The animation loop re-composes the full layer stack on every rAF tick, but
+ * most groups (infrastructure, airspace, weather, GDELT, …) depend on data
+ * that changes on second-to-minute cadences. Returning the *same* Layer
+ * instances while inputs are unchanged lets deck.gl skip layer matching and
+ * prop diffing for those groups entirely — and avoids regenerating and
+ * re-uploading their GPU attribute buffers every frame.
+ *
+ * Each deck overlay must own its own LayerCache instance (Layer instances
+ * hold per-deck internal state and must not be shared across overlays).
+ */
+export class LayerCache {
+  private cache = new Map<
+    string,
+    { deps: readonly unknown[]; layers: Layer[] }
+  >();
+
+  /**
+   * Return the cached layers for `key` if every entry in `deps` is identical
+   * (Object.is) to the previous call; otherwise run `build` and cache it.
+   */
+  get(key: string, deps: readonly unknown[], build: () => Layer[]): Layer[] {
+    const hit = this.cache.get(key);
+    if (
+      hit &&
+      hit.deps.length === deps.length &&
+      hit.deps.every((d, i) => Object.is(d, deps[i]))
+    ) {
+      return hit.layers;
+    }
+    const layers = build();
+    this.cache.set(key, { deps, layers });
+    return layers;
+  }
+}
diff --git a/frontend/src/utils/interpolation.ts b/frontend/src/utils/interpolation.ts
index 19cec93e..c381db92 100644
--- a/frontend/src/utils/interpolation.ts
+++ b/frontend/src/utils/interpolation.ts
@@ -1,5 +1,10 @@
 import { CoTEntity, DRState, VisualState } from "../types";
 
+const R_EARTH = 6371000;
+const DEG_PER_RAD = 180 / Math.PI;
+const RAD_PER_DEG = Math.PI / 180;
+const TWO_PI = 2 * Math.PI;
+
 /**
  * Projective Velocity Blending (PVB)
  * Smooths jitter and predicts position between low-frequency updates.
@@ -21,10 +26,9 @@ export function interpolatePVB(
     const dtSec = timeSinceUpdate / 1000;
 
     // 1. Server Projection (Where it should be now based on latest report)
-    const R = 6371000;
     const distServer = dr.serverSpeed * dtSec;
-    const dLatServer = ((distServer * Math.cos(dr.serverCourseRad)) / R) * (180 / Math.PI);
-    const dLonServer = ((distServer * Math.sin(dr.serverCourseRad)) / (R * Math.cos((dr.serverLat * Math.PI) / 180))) * (180 / Math.PI);
+    const dLatServer = ((distServer * Math.cos(dr.serverCourseRad)) / R_EARTH) * DEG_PER_RAD;
+    const dLonServer = ((distServer * Math.sin(dr.serverCourseRad)) / (R_EARTH * Math.cos(dr.serverLat * RAD_PER_DEG))) * DEG_PER_RAD;
 
     const serverProjLat = dr.serverLat + dLatServer;
     const serverProjLon = dr.serverLon + dLonServer;
@@ -34,13 +38,13 @@ export function interpolatePVB(
 
     // Angle blending (taking shortest path)
     let dAngle = dr.serverCourseRad - dr.blendCourseRad;
-    while (dAngle <= -Math.PI) dAngle += 2 * Math.PI;
-    while (dAngle > Math.PI) dAngle -= 2 * Math.PI;
+    while (dAngle <= -Math.PI) dAngle += TWO_PI;
+    while (dAngle > Math.PI) dAngle -= TWO_PI;
     const blendCourse = dr.blendCourseRad + dAngle * alpha;
 
     const distClient = blendSpeed * dtSec;
-    const dLatClient = ((distClient * Math.cos(blendCourse)) / R) * (180 / Math.PI);
-    const dLonClient = ((distClient * Math.sin(blendCourse)) / (R * Math.cos((dr.blendLat * Math.PI) / 180))) * (180 / Math.PI);
+    const dLatClient = ((distClient * Math.cos(blendCourse)) / R_EARTH) * DEG_PER_RAD;
+    const dLonClient = ((distClient * Math.sin(blendCourse)) / (R_EARTH * Math.cos(dr.blendLat * RAD_PER_DEG))) * DEG_PER_RAD;
 
     const clientProjLat = dr.blendLat + dLatClient;
     const clientProjLon = dr.blendLon + dLonClient;
@@ -77,7 +81,7 @@ export function interpolatePVB(
     lat: newVisual.lat,
     altitude: newVisual.alt,
     course: dr
-      ? ((dr.blendCourseRad * 180) / Math.PI + 360) % 360
+      ? (dr.blendCourseRad * DEG_PER_RAD + 360) % 360
       : entity.course,
   };
 
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 8172a90a..3e9bd89b 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -5,6 +5,51 @@ import { defineConfig } from "vite";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  build: {
+    rollupOptions: {
+      output: {
+        // Split the heavyweight vendors into their own chunks. Each chunk is
+        // only fetched when a module that needs it loads (the map views, the
+        // stats dashboard, …), and vendor chunks stay byte-identical across
+        // app releases so browsers keep them cached.
+        //
+        // Function form (not the object form) so that ONLY these packages'
+        // own modules land in the vendor chunks — the object form hoists
+        // shared helper modules into them, which silently makes the entry
+        // chunk depend on (and eagerly preload) the multi-MB vendors.
+        manualChunks(id: string) {
+          // Vite's dynamic-import preload helper is a virtual module shared
+          // by every code-split chunk; isolate it so Rollup can't park it
+          // inside a vendor chunk and drag that vendor into the entry.
+          if (id.includes("vite/preload-helper")) return "preload-helper";
+          if (!id.includes("node_modules")) return;
+          if (id.includes("echarts") || id.includes("zrender")) {
+            return "echarts";
+          }
+          if (id.includes("maplibre-gl")) return "maplibre";
+          if (id.includes("mapbox-gl")) return "mapbox";
+          if (
+            id.includes("@deck.gl") ||
+            id.includes("@luma.gl") ||
+            id.includes("@loaders.gl") ||
+            id.includes("@math.gl")
+          ) {
+            return "deck-gl";
+          }
+          if (
+            id.includes("/react-dom/") ||
+            id.includes("/react/") ||
+            id.includes("/scheduler/")
+          ) {
+            return "react-vendor";
+          }
+        },
+      },
+    },
+    // deck.gl and the map engines are inherently large single libraries;
+    // raise the warning threshold so CI noise reflects real regressions.
+    chunkSizeWarningLimit: 1600,
+  },
   test: {
     // Exclude Playwright E2E specs — those run via `pnpm exec playwright test`
     exclude: ["e2e/**", "node_modules/**"],

From 14437bc16c41fc4bef6c6ae815ffc4ddc62e5dcb Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 12 Jun 2026 17:53:17 +0000
Subject: [PATCH 2/2] fix(frontend): epoch-anchored satellite dead reckoning,
 eliminate catch-up surge

Satellites loaded, drifted slowly, then periodically surged across the
globe in unison. Three root causes, three fixes:

- Anchor dead reckoning to the position's source epoch (entity.time)
  instead of receive time. Sweep chunking + Kafka + WS delivery make
  positions 1-10s old on arrival; receive-time anchors rendered every
  satellite persistently behind reality until the next sweep corrected it.
  DRState now carries serverTime (position epoch, projection anchor) and
  blendTime (receive time, blend-progress anchor). New entities seed
  blendTime = serverTime so they appear at their true current position
  immediately. Guarded against clock skew / wrong units via drAnchorTime().
- Teleport guard in interpolatePVB: gaps beyond max(2 deg, speed x
  interval x 3) snap in one frame instead of racing the visual across the
  map; raw (unwrapped) lon delta so antimeridian crossings snap rather
  than smoothing the long way around.
- Frame-stall reset in useAnimationLoop: after a >1s frame gap (hidden
  tab, GC, shader compilation) clear visualState so visuals re-seed at
  their targets in one clean snap instead of a global catch-up surge.

Also: satellites now reject out-of-order/duplicate sweeps (same
lastSourceTime guard the aircraft/ship path had) and seed
expectedInterval at the real 15s sweep cadence.

Verified: lint, typecheck, 278/278 tests (6 new covering epoch anchoring
and the teleport guard), production build.

https://claude.ai/code/session_01BksbmT1NKcWRSiPA9FUh6B
---
 .../2026-06-12-satellite-position-jump-fix.md |  85 ++++++++++++
 frontend/src/hooks/useAnimationLoop.ts        |  11 +-
 frontend/src/hooks/useEntityWorker.ts         |  54 +++++++-
 frontend/src/types.ts                         |   3 +
 frontend/src/utils/interpolation.test.ts      | 123 ++++++++++++++++++
 frontend/src/utils/interpolation.ts           |  52 ++++++--
 6 files changed, 310 insertions(+), 18 deletions(-)
 create mode 100644 agent_docs/tasks/2026-06-12-satellite-position-jump-fix.md

diff --git a/agent_docs/tasks/2026-06-12-satellite-position-jump-fix.md b/agent_docs/tasks/2026-06-12-satellite-position-jump-fix.md
new file mode 100644
index 00000000..50df84cd
--- /dev/null
+++ b/agent_docs/tasks/2026-06-12-satellite-position-jump-fix.md
@@ -0,0 +1,85 @@
+# Satellite Position Jump Fix — Epoch-Anchored Dead Reckoning
+
+## Issue
+
+Satellites in globe view loaded, drifted slowly along their orbits, then
+periodically **all surged across the globe at once** and settled in new
+positions. Reported as a follow-up to the frontend performance task.
+
+Root cause analysis (full pipeline traced: `space_pulse` SGP4 sweep →
+Kafka → broadcast WS → TAK worker → `useEntityWorker` → `interpolatePVB`):
+
+1. **Receive-time anchoring.** Each satellite message carries `time` (the
+   SGP4 propagation epoch, ms), but `useEntityWorker` stamped
+   `serverTime: Date.now()` — the *receive* time. The 15 s sweep is published
+   in throttled chunks and flows through Kafka/WS, so positions are 1–10 s
+   old on arrival; satellites rendered persistently behind their true
+   positions and each new sweep "corrected" them forward.
+2. **Wall-clock targets + exponential chase.** `interpolatePVB` eases the
+   visual toward a target that advances in wall-clock time — even while no
+   frames render. During the initial-load main-thread stall (the layer
+   rebuild problem fixed in the same PR), targets marched on; when the frame
+   rate recovered, every visual closed its accumulated gap at ~70 %/frame —
+   the synchronized constellation-wide surge.
+3. Minor: first-update `expectedInterval` was seeded at 5 s vs the real 15 s
+   sweep cadence, and satellites had no out-of-order message rejection.
+
+## Solution
+
+1. **Epoch-anchored DR** — `DRState` now has two time anchors:
+   - `serverTime` = the position's source epoch (`entity.time`, guarded by
+     `drAnchorTime()` against clock skew / wrong units: values outside
+     `(now − 120 s, now]` fall back to receive time);
+   - `blendTime` = receive time, used for blend progress (alpha) and the
+     client continuation projection.
+   The server projection runs from the epoch, so stale-on-arrival positions
+   are extrapolated to "now" immediately. New satellites (no prior visual)
+   seed `blendTime = serverTime`, so they *appear* at their true current
+   position rather than easing forward from the stale one.
+2. **Teleport guard** in `interpolatePVB`: if the visual→target gap exceeds
+   `max(2°, speed × expectedInterval × 3)` the visual snaps in one frame
+   instead of racing across the map. The longitude delta is deliberately
+   unwrapped so antimeridian crossings snap to the far side rather than
+   smoothing the long way around the globe.
+3. **Frame-stall reset** in `useAnimationLoop`: if the raw inter-frame gap
+   exceeds 1 s (hidden tab, GC, shader compilation), `visualState` is
+   cleared so the next frame re-seeds every visual directly at its target —
+   one clean snap instead of a global catch-up surge.
+4. Satellites now reject out-of-order/duplicate sweeps
+   (`lastSourceTime >= entity.time`, same guard the aircraft/ship path had)
+   and seed `expectedInterval` at the real 15 s sweep cadence.
+
+## Changes
+
+- `frontend/src/types.ts` — `DRState.blendTime` added; `serverTime`
+  documented as the position epoch.
+- `frontend/src/utils/interpolation.ts` — dual-anchor projection
+  (`serverTime` for server projection, `blendTime` for alpha + client
+  projection); teleport guard with speed-scaled threshold.
+- `frontend/src/hooks/useEntityWorker.ts` — `drAnchorTime()` helper; both
+  the satellite and aircraft/ship branches anchor to `entity.time`;
+  satellite branch gains out-of-order rejection + `lastSourceTime`; new
+  entities seed `blendTime = serverTime`.
+- `frontend/src/hooks/useAnimationLoop.ts` — clear `visualState` after a
+  > 1 s frame gap.
+- `frontend/src/utils/interpolation.test.ts` — fixture updated for
+  `blendTime`; 6 new tests covering epoch anchoring (immediate placement,
+  epoch-vs-receive projection) and the teleport guard (snap above
+  threshold, smooth below, speed-scaled threshold, antimeridian snap).
+
+## Verification
+
+- `pnpm run lint` — clean (0 warnings).
+- `pnpm run typecheck` — clean (the new required `DRState.blendTime` field
+  forced review of every construction site).
+- `pnpm run test` — 278/278 passed (272 existing + 6 new).
+- `pnpm run build` — production build succeeds.
+
+## Benefits
+
+- Satellites appear at their true current position immediately and then
+  follow their path smoothly — no more constellation-wide fast-forward
+  after load, tab switches, or main-thread stalls.
+- Pipeline latency no longer translates into persistent display lag for any
+  entity type (aircraft/ships benefit from the same epoch anchoring).
+- Out-of-order satellite sweeps can no longer drag positions backwards.
diff --git a/frontend/src/hooks/useAnimationLoop.ts b/frontend/src/hooks/useAnimationLoop.ts
index c6eaee25..640e37e4 100644
--- a/frontend/src/hooks/useAnimationLoop.ts
+++ b/frontend/src/hooks/useAnimationLoop.ts
@@ -528,9 +528,18 @@ export function useAnimationLoop({
     const animate = () => {
       const entities = entitiesRef.current;
       const now = Date.now();
-      const dt = Math.min(now - lastFrameTimeRef.current, 100);
+      const rawDt = now - lastFrameTimeRef.current;
+      const dt = Math.min(rawDt, 100);
       lastFrameTimeRef.current = now;
 
+      // After a long frame stall (hidden tab, heavy GC, shader compilation)
+      // every entity's projected target has moved on while the visuals stayed
+      // frozen. Drop the visual states so this frame re-seeds them directly
+      // at their targets — one clean snap instead of a global catch-up surge.
+      if (rawDt > 1000) {
+        visualStateRef.current.clear();
+      }
+
       const _filters = filtersRef.current;
       const _replayMode = replayModeRef.current;
       const _onEntityLiveUpdate = onEntityLiveUpdateRef.current;
diff --git a/frontend/src/hooks/useEntityWorker.ts b/frontend/src/hooks/useEntityWorker.ts
index bdc252f8..2288c3c0 100644
--- a/frontend/src/hooks/useEntityWorker.ts
+++ b/frontend/src/hooks/useEntityWorker.ts
@@ -15,6 +15,24 @@ const SEA_ENTITY_CACHE_KEY = "tracks:sea:recent";
 const SEA_ENTITY_CACHE_TTL_MS = 5 * 60 * 1000;
 const SEA_ENTITY_CACHE_WRITE_INTERVAL_MS = 10 * 1000;
 
+/**
+ * Dead-reckoning anchor for an update: the position's source epoch when the
+ * message carries a plausible one, else the receive time. Pipeline latency
+ * (sweep chunking, Kafka, WS delivery) makes positions seconds old on
+ * arrival; anchoring to receive time renders entities persistently behind
+ * their true position until the next update "corrects" them with a jump.
+ * Values outside (now − 120 s, now] are treated as clock skew / wrong units
+ * and fall back to receive time.
+ */
+function drAnchorTime(sourceTime: number | undefined, now: number): number {
+  return typeof sourceTime === "number" &&
+    Number.isFinite(sourceTime) &&
+    sourceTime <= now &&
+    sourceTime > now - 120_000
+    ? sourceTime
+    : now;
+}
+
 type CachedSeaEntity = {
   uid: string;
   lat: number;
@@ -236,6 +254,17 @@ export function useEntityWorker({
         const existingSat = satellitesRef.current.get(entity.uid);
         const isNewSat = !existingSat && !knownUidsRef.current.has(entity.uid);
 
+        // Reject out-of-order / duplicate sweeps — with epoch-anchored dead
+        // reckoning a stale message would drag the anchor (and the rendered
+        // satellite) backwards along its orbit.
+        if (
+          existingSat?.lastSourceTime &&
+          entity.time &&
+          existingSat.lastSourceTime >= entity.time
+        ) {
+          return;
+        }
+
         const norad_id =
           entity.detail?.norad_id ?? entity.detail?.classification?.norad_id;
         const category =
@@ -296,6 +325,7 @@ export function useEntityWorker({
           },
           lastSeen: Date.now(),
           time: entity.time,
+          lastSourceTime: entity.time || existingSat?.lastSourceTime,
           trail,
           smoothedTrail: getSmoothedTrail(trail, existingSat),
           uidHash: existingSat ? existingSat.uidHash : uidToHash(entity.uid),
@@ -303,12 +333,16 @@ export function useEntityWorker({
         };
 
         const now = Date.now();
+        const sourceTime = drAnchorTime(entity.time, now);
         const existingDr = drStateRef.current.get(entity.uid);
         const visual = visualStateRef.current.get(entity.uid);
         const blendLat = visual ? visual.lat : newLat;
         const blendLon = visual ? visual.lon : newLon;
-        const lastServerTime = existingDr ? existingDr.serverTime : now - 5000;
-        const timeSinceLast = Math.max(now - lastServerTime, 4000);
+        // space_pulse propagates a full SGP4 sweep every ~15 s
+        const lastServerTime = existingDr
+          ? existingDr.serverTime
+          : sourceTime - 15_000;
+        const timeSinceLast = Math.max(sourceTime - lastServerTime, 4000);
 
         drStateRef.current.set(entity.uid, {
           serverLat: newLat,
@@ -316,7 +350,7 @@ export function useEntityWorker({
           serverSpeed: entity.detail?.track?.speed || 0,
           serverCourseRad:
             ((entity.detail?.track?.course || 0) * Math.PI) / 180,
-          serverTime: now,
+          serverTime: sourceTime,
           blendLat,
           blendLon,
           blendSpeed: existingDr
@@ -325,6 +359,10 @@ export function useEntityWorker({
           blendCourseRad: existingDr
             ? existingDr.serverCourseRad
             : ((entity.detail?.track?.course || 0) * Math.PI) / 180,
+          // A satellite with no prior visual should appear at its
+          // epoch-projected (true current) position immediately, not ease
+          // forward from the stale epoch position over the next interval.
+          blendTime: visual ? now : sourceTime,
           expectedInterval: timeSinceLast,
         });
 
@@ -415,8 +453,11 @@ export function useEntityWorker({
         | import("../types").VesselClassification
         | undefined;
 
-      const lastServerTime = existingDr ? existingDr.serverTime : now - 1000;
-      const timeSinceLast = Math.max(now - lastServerTime, 800);
+      const sourceTime = drAnchorTime(entity.time, now);
+      const lastServerTime = existingDr
+        ? existingDr.serverTime
+        : sourceTime - 1000;
+      const timeSinceLast = Math.max(sourceTime - lastServerTime, 800);
 
       drStateRef.current.set(entity.uid, {
         serverLat: newLat,
@@ -424,7 +465,7 @@ export function useEntityWorker({
         serverSpeed: entity.detail?.track?.speed || 0,
         serverCourseRad:
           ((entity.detail?.track?.course || 0) * Math.PI) / 180,
-        serverTime: now,
+        serverTime: sourceTime,
         blendLat,
         blendLon,
         blendSpeed: existingDr
@@ -433,6 +474,7 @@ export function useEntityWorker({
         blendCourseRad: existingDr
           ? existingDr.serverCourseRad
           : ((entity.detail?.track?.course || 0) * Math.PI) / 180,
+        blendTime: visual ? now : sourceTime,
         expectedInterval: timeSinceLast,
       });
 
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 8083f7bc..f4269522 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -408,11 +408,14 @@ export interface DRState {
   serverLon: number;
   serverSpeed: number;
   serverCourseRad: number;
+  /** Epoch (ms) the position was computed/measured at — NOT receive time. */
   serverTime: number;
   blendLat: number;
   blendLon: number;
   blendSpeed: number;
   blendCourseRad: number;
+  /** Epoch (ms) the blend state was captured (when the update was received). */
+  blendTime: number;
   expectedInterval: number;
 }
 
diff --git a/frontend/src/utils/interpolation.test.ts b/frontend/src/utils/interpolation.test.ts
index ee0dd9ec..299ca0f7 100644
--- a/frontend/src/utils/interpolation.test.ts
+++ b/frontend/src/utils/interpolation.test.ts
@@ -29,6 +29,7 @@ const makeDR = (overrides: Partial<DRState> = {}): DRState => ({
   blendLon: -74.0,
   blendSpeed: 0,
   blendCourseRad: 0,
+  blendTime: Date.now() - 1000,
   expectedInterval: 5000,
   ...overrides,
 });
@@ -200,3 +201,125 @@ describe("interpolatePVB — DR present, speed > 0.5", () => {
     expect(newVisualHuge.lon).toBeCloseTo(newVisual33.lon, 8);
   });
 });
+
+// ─── Epoch-anchored server projection ─────────────────────────────────────────
+
+describe("interpolatePVB — epoch anchoring (serverTime vs blendTime)", () => {
+  it("places a brand-new satellite at its epoch-projected position immediately", () => {
+    const now = Date.now();
+    // Position epoch is 10 s old (pipeline latency); satellite moves north
+    // at LEO speed. blendTime === serverTime (no prior visual on screen).
+    const speed = 7500; // m/s
+    const entity = makeEntity({ lat: 0, lon: 0, altitude: 500000, speed });
+    const dr = makeDR({
+      serverLat: 0,
+      serverLon: 0,
+      serverSpeed: speed,
+      serverCourseRad: 0, // North
+      serverTime: now - 10_000,
+      blendLat: 0,
+      blendLon: 0,
+      blendSpeed: speed,
+      blendCourseRad: 0,
+      blendTime: now - 10_000,
+      expectedInterval: 15000,
+    });
+
+    const { visual } = interpolatePVB(entity, dr, undefined, now, 16, 0.45);
+
+    // 7500 m/s * 10 s = 75 km north ≈ 0.674° latitude
+    const expectedLat = (speed * 10) / 111320;
+    expect(visual.lat).toBeCloseTo(expectedLat, 2);
+    expect(visual.lon).toBeCloseTo(0, 4);
+  });
+
+  it("projects the server position from its epoch, not from receive time", () => {
+    const now = Date.now();
+    // Update received 1 s ago (blendTime), but the position itself was
+    // computed 6 s ago (serverTime). The server projection must cover the
+    // full 6 s of motion.
+    const speed = 1000; // m/s
+    const entity = makeEntity({ lat: 0, lon: 0, altitude: 10000, speed });
+    const dr = makeDR({
+      serverLat: 0,
+      serverLon: 0,
+      serverSpeed: speed,
+      serverCourseRad: 0,
+      serverTime: now - 6_000,
+      blendLat: 0,
+      blendLon: 0,
+      blendSpeed: speed,
+      blendCourseRad: 0,
+      blendTime: now - 1_000,
+      expectedInterval: 1000, // alpha saturates → target = server projection
+    });
+
+    const { visual } = interpolatePVB(entity, dr, undefined, now, 16);
+
+    // alpha = 1 → target = serverProj = 1000 m/s * 6 s = 6 km ≈ 0.0539°
+    const expectedLat = (speed * 6) / 111320;
+    expect(visual.lat).toBeCloseTo(expectedLat, 3);
+  });
+});
+
+// ─── Teleport guard (snap instead of surge) ──────────────────────────────────
+
+describe("interpolatePVB — teleport guard", () => {
+  it("snaps to the target in one frame when the gap exceeds the threshold", () => {
+    // Stationary entity (threshold floor 2°) whose target jumped 5°.
+    const entity = makeEntity({ lat: 5.0, lon: 0.0, altitude: 0, speed: 0 });
+    const visual = makeVisual({ lat: 0.0, lon: 0.0, alt: 0 });
+
+    const { visual: newVisual } = interpolatePVB(entity, undefined, visual, Date.now(), 16.67);
+
+    // Without the guard, smoothing would land at ~1.25; the guard snaps to 5.
+    expect(newVisual.lat).toBe(5.0);
+    expect(newVisual.lon).toBe(0.0);
+  });
+
+  it("keeps smoothing when the gap is below the threshold", () => {
+    const entity = makeEntity({ lat: 0.3, lon: 0.0, altitude: 0, speed: 0 });
+    const visual = makeVisual({ lat: 0.0, lon: 0.0, alt: 0 });
+
+    const { visual: newVisual } = interpolatePVB(entity, undefined, visual, Date.now(), 16.67);
+
+    // baseAlpha 0.25 → 0 + 0.3 * 0.25 = 0.075 (no snap)
+    expect(newVisual.lat).toBeCloseTo(0.075, 4);
+  });
+
+  it("scales the threshold with entity speed so fast satellites don't snap on normal corrections", () => {
+    const now = Date.now();
+    // LEO satellite: threshold = 7500 m/s * 15 s * 3 / 111320 ≈ 3.03°.
+    // A 2° correction must smooth, not snap.
+    const speed = 7500;
+    const entity = makeEntity({ lat: 2.0, lon: 0.0, altitude: 500000, speed });
+    const dr = makeDR({
+      serverLat: 2.0,
+      serverLon: 0,
+      serverSpeed: 0, // zero-speed projections → target stays at (2, 0)
+      serverTime: now,
+      blendLat: 2.0,
+      blendLon: 0,
+      blendSpeed: 0,
+      blendTime: now,
+      expectedInterval: 15000,
+    });
+    const visual = makeVisual({ lat: 0.0, lon: 0.0, alt: 500000 });
+
+    const { visual: newVisual } = interpolatePVB(entity, dr, visual, now, 16.67, 0.45);
+
+    // Smoothed (0 < lat < 2), not snapped to exactly 2
+    expect(newVisual.lat).toBeGreaterThan(0);
+    expect(newVisual.lat).toBeLessThan(2.0);
+  });
+
+  it("snaps across the antimeridian instead of smoothing the long way around", () => {
+    const entity = makeEntity({ lat: 0, lon: -179.9, altitude: 0, speed: 0 });
+    const visual = makeVisual({ lat: 0, lon: 179.9, alt: 0 });
+
+    const { visual: newVisual } = interpolatePVB(entity, undefined, visual, Date.now(), 16.67);
+
+    // Raw lon delta is 359.8° > threshold → snap to the far side directly.
+    expect(newVisual.lon).toBe(-179.9);
+  });
+});
diff --git a/frontend/src/utils/interpolation.ts b/frontend/src/utils/interpolation.ts
index c381db92..227f6039 100644
--- a/frontend/src/utils/interpolation.ts
+++ b/frontend/src/utils/interpolation.ts
@@ -4,10 +4,19 @@ const R_EARTH = 6371000;
 const DEG_PER_RAD = 180 / Math.PI;
 const RAD_PER_DEG = Math.PI / 180;
 const TWO_PI = 2 * Math.PI;
+const METERS_PER_DEG = 111320;
 
 /**
  * Projective Velocity Blending (PVB)
  * Smooths jitter and predicts position between low-frequency updates.
+ *
+ * Two distinct time anchors:
+ *  - dr.serverTime — the epoch the position was computed/measured at. The
+ *    server projection runs from here, so data that arrives seconds late
+ *    (sweep chunking, Kafka, WS) is immediately extrapolated to "now"
+ *    instead of being rendered persistently behind its true position.
+ *  - dr.blendTime — when the update was received. Blend progress (alpha)
+ *    and the client-side continuation projection run from here.
  */
 export function interpolatePVB(
   entity: CoTEntity,
@@ -21,12 +30,12 @@ export function interpolatePVB(
   let targetLon = entity.lon;
 
   if (dr && entity.speed > 0.5) {
-    const timeSinceUpdate = now - dr.serverTime;
+    const timeSinceUpdate = Math.max(now - dr.blendTime, 0);
     const alpha = Math.min(Math.max(timeSinceUpdate / dr.expectedInterval, 0), 1);
-    const dtSec = timeSinceUpdate / 1000;
 
     // 1. Server Projection (Where it should be now based on latest report)
-    const distServer = dr.serverSpeed * dtSec;
+    const dtServerSec = Math.max(now - dr.serverTime, 0) / 1000;
+    const distServer = dr.serverSpeed * dtServerSec;
     const dLatServer = ((distServer * Math.cos(dr.serverCourseRad)) / R_EARTH) * DEG_PER_RAD;
     const dLonServer = ((distServer * Math.sin(dr.serverCourseRad)) / (R_EARTH * Math.cos(dr.serverLat * RAD_PER_DEG))) * DEG_PER_RAD;
 
@@ -42,7 +51,8 @@ export function interpolatePVB(
     while (dAngle > Math.PI) dAngle -= TWO_PI;
     const blendCourse = dr.blendCourseRad + dAngle * alpha;
 
-    const distClient = blendSpeed * dtSec;
+    const dtClientSec = timeSinceUpdate / 1000;
+    const distClient = blendSpeed * dtClientSec;
     const dLatClient = ((distClient * Math.cos(blendCourse)) / R_EARTH) * DEG_PER_RAD;
     const dLonClient = ((distClient * Math.sin(blendCourse)) / (R_EARTH * Math.cos(dr.blendLat * RAD_PER_DEG))) * DEG_PER_RAD;
 
@@ -54,16 +64,36 @@ export function interpolatePVB(
     targetLon = clientProjLon + (serverProjLon - clientProjLon) * alpha;
   }
 
-  const newVisual = visual 
-    ? { ...visual } 
+  const newVisual = visual
+    ? { ...visual }
     : { lat: targetLat, lon: targetLon, alt: entity.altitude };
 
   if (visual) {
-    const smoothDt = Math.min(dt, 33);
-    const smoothFactor = 1 - Math.pow(1 - baseAlpha, smoothDt / 16.67);
-    newVisual.lat = visual.lat + (targetLat - visual.lat) * smoothFactor;
-    newVisual.lon = visual.lon + (targetLon - visual.lon) * smoothFactor;
-    newVisual.alt = visual.alt + (entity.altitude - visual.alt) * smoothFactor;
+    // Teleport guard: if the target has moved further than this entity could
+    // plausibly traverse in ~3 update intervals (stale anchor replaced after
+    // a stall, source correction, antimeridian crossing), snap in a single
+    // frame instead of racing the visual across the map. The raw longitude
+    // delta is deliberately NOT wrapped: an antimeridian crossing should snap
+    // to the other side, never smooth the long way around the globe.
+    const intervalSec = (dr?.expectedInterval ?? 5000) / 1000;
+    const snapThresholdDeg = Math.max(
+      2,
+      ((entity.speed || 0) * intervalSec * 3) / METERS_PER_DEG,
+    );
+    if (
+      Math.abs(targetLat - visual.lat) > snapThresholdDeg ||
+      Math.abs(targetLon - visual.lon) > snapThresholdDeg
+    ) {
+      newVisual.lat = targetLat;
+      newVisual.lon = targetLon;
+      newVisual.alt = entity.altitude;
+    } else {
+      const smoothDt = Math.min(dt, 33);
+      const smoothFactor = 1 - Math.pow(1 - baseAlpha, smoothDt / 16.67);
+      newVisual.lat = visual.lat + (targetLat - visual.lat) * smoothFactor;
+      newVisual.lon = visual.lon + (targetLon - visual.lon) * smoothFactor;
+      newVisual.alt = visual.alt + (entity.altitude - visual.alt) * smoothFactor;
+    }
   }
 
   // Clamp to target if very close (prevent micro-jitter)