Fix panel chunk re-split after lazy service clients

src/App.ts

@@ -224,18 +224,23 @@ export class App {
 
     if (this.mapModulesInitialized) return;
     this.mapModulesInitialized = true;
-    this.countryIntel.init();
-    // Unblock any WebMCP tool invocations that arrived during startup, even if
-    // the deferred map has not loaded yet.
-    this.resolveUiReady();
-    if (this.pendingMobileGeoCoords && this.state.map) {
-      this.state.map.setCenter(this.pendingMobileGeoCoords.lat, this.pendingMobileGeoCoords.lon, 6);
-      this.pendingMobileGeoCoords = null;
-    }
-    this.state.countryBriefPage?.onStateChange?.(() => {
-      this.eventHandlers.syncUrlState();
-    });
-    this.handleDeepLinks();
+    void this.countryIntel.init()
+      .catch((err) => {
+        console.error('[CountryIntel] init failed:', err);
+      })
+      .then(() => {
+        // Unblock any WebMCP tool invocations that arrived during startup, even if
+        // the deferred map has not loaded yet.
+        this.resolveUiReady();
+        if (this.pendingMobileGeoCoords && this.state.map) {
+          this.state.map.setCenter(this.pendingMobileGeoCoords.lat, this.pendingMobileGeoCoords.lon, 6);
+          this.pendingMobileGeoCoords = null;
+        }
+        this.state.countryBriefPage?.onStateChange?.(() => {
+          this.eventHandlers.syncUrlState();
+        });
+        this.handleDeepLinks();
+      });
   }
 
   private getCachedBootstrapUpdatedAt(): number | null {
@@ -1290,7 +1295,7 @@ export class App {
     // Phase 3: UI setup methods
     this.eventHandlers.startHeaderClock();
     this.eventHandlers.setupPlaybackControl();
-    this.eventHandlers.setupStatusPanel();
+    await this.eventHandlers.setupStatusPanel();
     this.eventHandlers.setupPizzIntIndicator();
     this.eventHandlers.setupLlmStatusIndicator();
     this.eventHandlers.setupExportPanel();

src/app/country-intel.ts

@@ -9,7 +9,6 @@ import type {
   CountryDeepDiveMilitarySummary,
   CountryDeepDiveSignalDetails,
 } from '@/components/CountryBriefPanel';
-import { CountryDeepDivePanel } from '@/components/CountryDeepDivePanel';
 import { reverseGeocode } from '@/utils/reverse-geocode';
 import { effectivePubDateMs } from '@/services/feed-date';
 import {
@@ -86,8 +85,8 @@ export class CountryIntelManager implements AppModule {
     this.ctx = ctx;
   }
 
-  init(): void {
-    this.setupCountryIntel();
+  async init(): Promise<void> {
+    await this.setupCountryIntel();
     this.frameworkUnsubscribe = subscribeFrameworkChange('country-brief', () => {
       const page = this.ctx.countryBriefPage;
       if (!page?.isVisible()) return;
@@ -124,8 +123,10 @@ export class CountryIntelManager implements AppModule {
     this.authUnsubscribe = null;
   }
 
-  private setupCountryIntel(): void {
+  private async setupCountryIntel(): Promise<void> {
     if (!this.ctx.map) return;
+    const { CountryDeepDivePanel } = await import('@/components/CountryDeepDivePanel');
+    if (!this.ctx.map || this.ctx.isDestroyed) return;
     this.ctx.countryBriefPage = new CountryDeepDivePanel(this.ctx.map);
     this.ctx.countryBriefPage.setShareStoryHandler((code, name) => {
       this.ctx.countryBriefPage?.hide();

src/app/event-handlers.ts

@@ -11,11 +11,10 @@ import type { PositionSample } from '@/services/aviation';
 import type { ClusteredEvent } from '@/types';
 import type { DashboardSnapshot } from '@/services/storage';
 import { PlaybackControl } from '@/components/PlaybackControl';
-import { StatusPanel } from '@/components/StatusPanel';
 import { PizzIntIndicator } from '@/components/PizzIntIndicator';
 import { LlmStatusIndicator } from '@/components/LlmStatusIndicator';
-import { CIIPanel } from '@/components/CIIPanel';
-import { PredictionPanel } from '@/components/PredictionPanel';
+import type { CIIPanel } from '@/components/CIIPanel';
+import type { PredictionPanel } from '@/components/PredictionPanel';
 import {
   buildMapUrl,
   debounce,
@@ -1021,7 +1020,9 @@ export class EventHandlerManager implements AppModule {
     this.clockIntervalId = setInterval(tick, 1000);
   }
 
-  setupStatusPanel(): void {
+  async setupStatusPanel(): Promise<void> {
+    const { StatusPanel } = await import('@/components/StatusPanel');
+    if (this.ctx.isDestroyed) return;
     this.ctx.statusPanel = new StatusPanel();
   }
 

src/app/search-manager.ts

@@ -4,7 +4,7 @@ import type { NewsItem, MapLayers } from '@/types';
 import type { MapView } from '@/components/MapContainer';
 import type { Command } from '@/config/commands';
 import { SearchModal } from '@/components/SearchModal';
-import { CIIPanel } from '@/components/CIIPanel';
+import type { CIIPanel } from '@/components/CIIPanel';
 import { SITE_VARIANT, STORAGE_KEYS } from '@/config';
 import { getAllowedLayerKeys, isLayerExecutable } from '@/config/map-layer-definitions';
 import type { MapRenderer } from '@/config/map-layer-definitions';

src/components/BigMacPanel.ts

@@ -2,11 +2,11 @@ import { Panel } from './Panel';
 import { t } from '@/services/i18n';
 import { escapeHtml, unsafeRawHtml } from '@/utils/sanitize';
 import { getHydratedData } from '@/services/bootstrap';
-import { getRpcBaseUrl } from '@/services/rpc-client';
+import { createLazyClient, getRpcBaseUrl, rpcFetch } from '@/services/rpc-client';
 import { EconomicServiceClient } from '@/generated/client/worldmonitor/economic/v1/service_client';
 import type { ListBigMacPricesResponse } from '@/generated/client/worldmonitor/economic/v1/service_client';
 
-const client = new EconomicServiceClient(getRpcBaseUrl(), { fetch: (...args: Parameters<typeof fetch>) => globalThis.fetch(...args) });
+const getEconomicClient = createLazyClient(() => new EconomicServiceClient(getRpcBaseUrl(), { fetch: rpcFetch }));
 
 export class BigMacPanel extends Panel {
   constructor() {
@@ -19,13 +19,13 @@ export class BigMacPanel extends Panel {
       if (hydrated?.countries?.length) {
         if (!this.element?.isConnected) return;
         this.renderIndex(hydrated);
-        void client.listBigMacPrices({}).then(data => {
+        void getEconomicClient().listBigMacPrices({}).then(data => {
           if (!this.element?.isConnected || !data.countries?.length) return;
           this.renderIndex(data);
         }).catch(() => {});
         return;
       }
-      const data = await client.listBigMacPrices({});
+      const data = await getEconomicClient().listBigMacPrices({});
       if (!this.element?.isConnected) return;
       this.renderIndex(data);
     } catch (err) {

src/components/ClimateNewsPanel.ts

@@ -2,11 +2,11 @@ import { Panel } from './Panel';
 import { t } from '@/services/i18n';
 import { joinSafeHtml, safeHtml, safeUrlAttr, type SafeHtml } from '@/utils/sanitize';
 import { getHydratedData } from '@/services/bootstrap';
-import { getRpcBaseUrl } from '@/services/rpc-client';
+import { createLazyClient, getRpcBaseUrl, rpcFetch } from '@/services/rpc-client';
 import { ClimateServiceClient } from '@/generated/client/worldmonitor/climate/v1/service_client';
 import type { ListClimateNewsResponse, ClimateNewsItem } from '@/generated/client/worldmonitor/climate/v1/service_client';
 
-const client = new ClimateServiceClient(getRpcBaseUrl(), { fetch: (...args: Parameters<typeof fetch>) => globalThis.fetch(...args) });
+const getClimateClient = createLazyClient(() => new ClimateServiceClient(getRpcBaseUrl(), { fetch: rpcFetch }));
 
 function formatTimeAgo(epochMs: number): string {
   const diffMs = Date.now() - epochMs;
@@ -52,13 +52,13 @@ export class ClimateNewsPanel extends Panel {
       if (hydrated?.items?.length) {
         if (!this.element?.isConnected) return;
         this.renderNewsList(hydrated);
-        void client.listClimateNews({}).then(data => {
+        void getClimateClient().listClimateNews({}).then(data => {
           if (!this.element?.isConnected || !data.items?.length) return;
           this.renderNewsList(data);
         }).catch(() => {});
         return;
       }
-      const data = await client.listClimateNews({});
+      const data = await getClimateClient().listClimateNews({});
       if (!this.element?.isConnected) return;
       this.renderNewsList(data);
     } catch (err) {

src/components/DeductionPanel.ts

@@ -1,5 +1,5 @@
-import { Panel } from './Panel';
-import { getRpcBaseUrl } from '@/services/rpc-client';
+import { Panel } from './Panel';
+import { createLazyClient, getRpcBaseUrl } from '@/services/rpc-client';
 import { premiumFetch } from '@/services/premium-fetch';
 import { IntelligenceServiceClient } from '@/generated/client/worldmonitor/intelligence/v1/service_client';
 import { h, replaceChildren, setTrustedHtml, trustedHtml } from '@/utils/dom-utils';
@@ -12,7 +12,7 @@ import { hasPremiumAccess } from '@/services/panel-gating';
 import { FrameworkSelector } from './FrameworkSelector';
 
 // deduct-situation + list-market-implications are premium-gated.
-const client = new IntelligenceServiceClient(getRpcBaseUrl(), { fetch: premiumFetch });
+const getIntelligenceClient = createLazyClient(() => new IntelligenceServiceClient(getRpcBaseUrl(), { fetch: premiumFetch }));
 
 const COOLDOWN_MS = 5_000;
 
@@ -247,7 +247,7 @@ export class DeductionPanel extends Panel {
         );
 
         try {
-            const resp = await client.deductSituation({
+            const resp = await getIntelligenceClient().deductSituation({
                 query,
                 geoContext,
                 framework: fw?.systemPromptAppend ?? '',

src/components/EnergyDisruptionsPanel.ts

@@ -1,6 +1,6 @@
 import { Panel } from './Panel';
 import { escapeHtml, unsafeRawHtml } from '@/utils/sanitize';
-import { getRpcBaseUrl } from '@/services/rpc-client';
+import { createLazyClient, getRpcBaseUrl, rpcFetch } from '@/services/rpc-client';
 import { attributionFooterHtml, ATTRIBUTION_FOOTER_CSS } from '@/utils/attribution-footer';
 import { SupplyChainServiceClient } from '@/generated/client/worldmonitor/supply_chain/v1/service_client';
 import type {
@@ -14,9 +14,9 @@ import {
   type DisruptionStatus,
 } from '@/shared/disruption-timeline';
 
-const client = new SupplyChainServiceClient(getRpcBaseUrl(), {
-  fetch: (...args: Parameters<typeof fetch>) => globalThis.fetch(...args),
-});
+const getSupplyChainClient = createLazyClient(() => new SupplyChainServiceClient(getRpcBaseUrl(), {
+  fetch: rpcFetch,
+}));
 
 // One glyph per event type so readers can scan the timeline by nature of
 // disruption. Kept terse — the type string itself is shown next to the glyph.
@@ -127,7 +127,7 @@ export class EnergyDisruptionsPanel extends Panel {
 
   public async fetchData(): Promise<void> {
     try {
-      const live = await client.listEnergyDisruptions({
+      const live = await getSupplyChainClient().listEnergyDisruptions({
         assetId: '',
         assetType: '',
         ongoingOnly: false,

src/components/EnergyRiskOverviewPanel.ts

@@ -20,16 +20,16 @@
 
 import { Panel } from './Panel';
 import { escapeHtml, unsafeRawHtml } from '@/utils/sanitize';
-import { getRpcBaseUrl } from '@/services/rpc-client';
+import { createLazyClient, getRpcBaseUrl, rpcFetch } from '@/services/rpc-client';
 import { fetchHormuzTracker, type HormuzTrackerData } from '@/services/hormuz-tracker';
 import { getEuGasStorageData } from '@/services/economic';
 import { fetchCommodityQuotes } from '@/services/market';
 import { SupplyChainServiceClient } from '@/generated/client/worldmonitor/supply_chain/v1/service_client';
 import { buildOverviewState, type OverviewState } from './_energy-risk-overview-state';
 
-const supplyChain = new SupplyChainServiceClient(getRpcBaseUrl(), {
-  fetch: (...args: Parameters<typeof fetch>) => globalThis.fetch(...args),
-});
+const getSupplyChainClient = createLazyClient(() => new SupplyChainServiceClient(getRpcBaseUrl(), {
+  fetch: rpcFetch,
+}));
 
 const BRENT_SYMBOL = 'BZ=F';
 const BRENT_META = [{ symbol: BRENT_SYMBOL, name: 'Brent Crude', display: 'BRENT' }];
@@ -111,7 +111,7 @@ export class EnergyRiskOverviewPanel extends Panel {
       // a Greptile P2 finding (over-fetch); buildOverviewState's count
       // calculation handles either response (the redundant client-side
       // filter remains as defense-in-depth in the state builder).
-      supplyChain.listEnergyDisruptions({ assetId: '', assetType: '', ongoingOnly: true }),
+      getSupplyChainClient().listEnergyDisruptions({ assetId: '', assetType: '', ongoingOnly: true }),
     ]);
     this.state = buildOverviewState(hormuz, euGas, brent, disruptions, Date.now());
 

src/components/FaoFoodPriceIndexPanel.ts

@@ -2,11 +2,11 @@ import { Panel } from './Panel';
 import { t } from '@/services/i18n';
 import { escapeHtml, unsafeRawHtml } from '@/utils/sanitize';
 import { getHydratedData } from '@/services/bootstrap';
-import { getRpcBaseUrl } from '@/services/rpc-client';
+import { createLazyClient, getRpcBaseUrl, rpcFetch } from '@/services/rpc-client';
 import { EconomicServiceClient } from '@/generated/client/worldmonitor/economic/v1/service_client';
 import type { GetFaoFoodPriceIndexResponse, FaoFoodPricePoint } from '@/generated/client/worldmonitor/economic/v1/service_client';
 
-const client = new EconomicServiceClient(getRpcBaseUrl(), { fetch: (...args: Parameters<typeof fetch>) => globalThis.fetch(...args) });
+const getEconomicClient = createLazyClient(() => new EconomicServiceClient(getRpcBaseUrl(), { fetch: rpcFetch }));
 
 const SVG_W = 480;
 const SVG_H = 140;
@@ -106,13 +106,13 @@ export class FaoFoodPriceIndexPanel extends Panel {
       if (hydrated?.points?.length) {
         if (!this.element?.isConnected) return;
         this.renderChart(hydrated);
-        void client.getFaoFoodPriceIndex({}).then(data => {
+        void getEconomicClient().getFaoFoodPriceIndex({}).then(data => {
           if (!this.element?.isConnected || !data.points?.length) return;
           this.renderChart(data);
         }).catch(() => {});
         return;
       }
-      const data = await client.getFaoFoodPriceIndex({});
+      const data = await getEconomicClient().getFaoFoodPriceIndex({});
       if (!this.element?.isConnected) return;
       this.renderChart(data);
     } catch (err) {

src/components/FuelPricesPanel.ts

@@ -2,11 +2,11 @@ import { Panel } from './Panel';
 import { t } from '@/services/i18n';
 import { escapeHtml, unsafeRawHtml } from '@/utils/sanitize';
 import { getHydratedData } from '@/services/bootstrap';
-import { getRpcBaseUrl } from '@/services/rpc-client';
+import { createLazyClient, getRpcBaseUrl, rpcFetch } from '@/services/rpc-client';
 import { EconomicServiceClient } from '@/generated/client/worldmonitor/economic/v1/service_client';
 import type { ListFuelPricesResponse } from '@/generated/client/worldmonitor/economic/v1/service_client';
 
-const client = new EconomicServiceClient(getRpcBaseUrl(), { fetch: (...args: Parameters<typeof fetch>) => globalThis.fetch(...args) });
+const getEconomicClient = createLazyClient(() => new EconomicServiceClient(getRpcBaseUrl(), { fetch: rpcFetch }));
 
 export class FuelPricesPanel extends Panel {
   constructor() {
@@ -19,13 +19,13 @@ export class FuelPricesPanel extends Panel {
       if (hydrated?.countries?.length) {
         if (!this.element?.isConnected) return;
         this.renderIndex(hydrated);
-        void client.listFuelPrices({}).then(data => {
+        void getEconomicClient().listFuelPrices({}).then(data => {
           if (!this.element?.isConnected || !data.countries?.length) return;
           this.renderIndex(data);
         }).catch(() => {});
         return;
       }
-      const data = await client.listFuelPrices({});
+      const data = await getEconomicClient().listFuelPrices({});
       if (!this.element?.isConnected) return;
       this.renderIndex(data);
     } catch (err) {

src/components/FuelShortagePanel.ts

@@ -1,6 +1,6 @@
 import { Panel } from './Panel';
 import { escapeHtml, sanitizeUrl, unsafeRawHtml } from '@/utils/sanitize';
-import { getRpcBaseUrl } from '@/services/rpc-client';
+import { createLazyClient, getRpcBaseUrl, rpcFetch } from '@/services/rpc-client';
 import { attributionFooterHtml, ATTRIBUTION_FOOTER_CSS } from '@/utils/attribution-footer';
 import { SupplyChainServiceClient } from '@/generated/client/worldmonitor/supply_chain/v1/service_client';
 import type {
@@ -19,9 +19,9 @@ import {
   type RawFuelShortageRegistry,
 } from '@/shared/fuel-shortage-registry-store';
 
-const client = new SupplyChainServiceClient(getRpcBaseUrl(), {
-  fetch: (...args: Parameters<typeof fetch>) => globalThis.fetch(...args),
-});
+const getSupplyChainClient = createLazyClient(() => new SupplyChainServiceClient(getRpcBaseUrl(), {
+  fetch: rpcFetch,
+}));
 
 const SEVERITY_COLOR: Record<string, string> = {
   confirmed: '#e74c3c',
@@ -161,7 +161,7 @@ export class FuelShortagePanel extends Panel {
       if (hydrated) {
         this.data = hydrated;
         this.render();
-        void client.listFuelShortages({ country: '', product: '', severity: '' }).then(live => {
+        void getSupplyChainClient().listFuelShortages({ country: '', product: '', severity: '' }).then(live => {
           if (!this.element?.isConnected || !live?.shortages?.length) return;
           this.data = live;
           this.render();
@@ -176,7 +176,7 @@ export class FuelShortagePanel extends Panel {
         return;
       }
 
-      const live = await client.listFuelShortages({ country: '', product: '', severity: '' });
+      const live = await getSupplyChainClient().listFuelShortages({ country: '', product: '', severity: '' });
       if (!this.element?.isConnected) return;
       if (live.upstreamUnavailable || !live.shortages?.length) {
         this.showError('Fuel shortage registry unavailable', () => void this.fetchData());
@@ -203,7 +203,7 @@ export class FuelShortagePanel extends Panel {
     this.detailLoading = true;
     this.render();
     try {
-      const d = await client.getFuelShortageDetail({ shortageId });
+      const d = await getSupplyChainClient().getFuelShortageDetail({ shortageId });
       if (!this.element?.isConnected || this.selectedId !== shortageId) return;
       this.detail = d;
       this.detailLoading = false;

src/components/GroceryBasketPanel.ts

@@ -2,11 +2,11 @@ import { Panel } from './Panel';
 import { t } from '@/services/i18n';
 import { escapeHtml, unsafeRawHtml } from '@/utils/sanitize';
 import { getHydratedData } from '@/services/bootstrap';
-import { getRpcBaseUrl } from '@/services/rpc-client';
+import { createLazyClient, getRpcBaseUrl, rpcFetch } from '@/services/rpc-client';
 import { EconomicServiceClient } from '@/generated/client/worldmonitor/economic/v1/service_client';
 import type { ListGroceryBasketPricesResponse } from '@/generated/client/worldmonitor/economic/v1/service_client';
 
-const client = new EconomicServiceClient(getRpcBaseUrl(), { fetch: (...args: Parameters<typeof fetch>) => globalThis.fetch(...args) });
+const getEconomicClient = createLazyClient(() => new EconomicServiceClient(getRpcBaseUrl(), { fetch: rpcFetch }));
 
 export class GroceryBasketPanel extends Panel {
   constructor() {
@@ -19,13 +19,13 @@ export class GroceryBasketPanel extends Panel {
       if (hydrated?.countries?.length) {
         if (!this.element?.isConnected) return;
         this.renderBasket(hydrated);
-        void client.listGroceryBasketPrices({}).then(data => {
+        void getEconomicClient().listGroceryBasketPrices({}).then(data => {
           if (!this.element?.isConnected || !data.countries?.length) return;
           this.renderBasket(data);
         }).catch(() => {});
         return;
       }
-      const data = await client.listGroceryBasketPrices({});
+      const data = await getEconomicClient().listGroceryBasketPrices({});
       if (!this.element?.isConnected) return;
       this.renderBasket(data);
     } catch (err) {