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/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/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..640e37e4 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>> = {};
@@ -520,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;
@@ -794,6 +811,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/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/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/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 19cec93e..227f6039 100644
--- a/frontend/src/utils/interpolation.ts
+++ b/frontend/src/utils/interpolation.ts
@@ -1,8 +1,22 @@
 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;
+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,
@@ -16,15 +30,14 @@ 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 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 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;
 
     const serverProjLat = dr.serverLat + dLatServer;
     const serverProjLon = dr.serverLon + dLonServer;
@@ -34,13 +47,14 @@ 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 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;
 
     const clientProjLat = dr.blendLat + dLatClient;
     const clientProjLon = dr.blendLon + dLonClient;
@@ -50,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)
@@ -77,7 +111,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/**"],