@mytec: iter10 ready for testing

.claude/settings.local.json

@@ -4,7 +4,8 @@
       "Bash(npm create:*)",
       "Bash(npm install:*)",
       "Bash(npx tsc:*)",
-      "Bash(npm run build:*)"
+      "Bash(npm run build:*)",
+      "Bash(npx eslint:*)"
     ]
   }
 }

frontend/eslint.config.js

@@ -19,5 +19,9 @@ export default defineConfig([
       ecmaVersion: 2020,
       globals: globals.browser,
     },
+    rules: {
+      // Allow unused vars prefixed with _ (standard TS convention for interface impls)
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    },
   },
 ])

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import { useSettingsStore } from '@/store/settings.ts';
 import { RFCalculator } from '@/rf/calculator.ts';
 import { useToastStore } from '@/components/ui/Toast.tsx';
 import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts.ts';
+import { logger } from '@/utils/logger.ts';
 import MapView from '@/components/map/Map.tsx';
 import GeographicHeatmap from '@/components/map/GeographicHeatmap.tsx';
 import HeatmapLegend from '@/components/map/HeatmapLegend.tsx';
@@ -111,6 +112,20 @@ export default function App() {
       return;
     }
 
+    // Warn if grid will be auto-coarsened (very large area + fine resolution)
+    const latitudes = currentSites.map((s) => s.lat);
+    const longitudes = currentSites.map((s) => s.lon);
+    const latRange = (Math.max(...latitudes) - Math.min(...latitudes)) + (2 * currentSettings.radius / 111);
+    const lonRange = (Math.max(...longitudes) - Math.min(...longitudes)) + (2 * currentSettings.radius / 111);
+    const estPoints = Math.ceil(latRange * 111000 / currentSettings.resolution) *
+                      Math.ceil(lonRange * 111000 / currentSettings.resolution);
+    if (estPoints > 500_000) {
+      addToast(
+        `Large area detected (~${(estPoints / 1_000_000).toFixed(1)}M points). Resolution will be auto-adjusted for performance.`,
+        'warning'
+      );
+    }
+
     setIsCalculating(true);
     try {
       const latitudes = currentSites.map((s) => s.lat);
@@ -148,7 +163,7 @@ export default function App() {
         );
       }
     } catch (err) {
-      console.error('Coverage calculation error:', err);
+      logger.error('Coverage calculation error:', err);
       const msg = err instanceof Error ? err.message : 'Unknown error';
 
       let userMessage = 'Calculation failed';
@@ -375,6 +390,7 @@ export default function App() {
                   max={100}
                   step={5}
                   unit="km"
+                  hint="Calculation area around each site"
                 />
                 <NumberInput
                   label="Resolution"
@@ -386,6 +402,7 @@ export default function App() {
                   max={500}
                   step={50}
                   unit="m"
+                  hint="Grid spacing — lower = more accurate but slower"
                 />
                 <NumberInput
                   label="Min Signal"
@@ -397,6 +414,7 @@ export default function App() {
                   max={-50}
                   step={5}
                   unit="dBm"
+                  hint="RSRP threshold — points below this are hidden"
                 />
                 <NumberInput
                   label="Heatmap Opacity"
@@ -408,6 +426,7 @@ export default function App() {
                   max={100}
                   step={5}
                   unit="%"
+                  hint="Transparency of the RF coverage overlay"
                 />
                 <div>
                   <label className="text-sm font-medium text-gray-700 dark:text-dark-text">
@@ -429,6 +448,9 @@ export default function App() {
                     <option value={600}>600m — Smooth</option>
                     <option value={800}>800m — Wide</option>
                   </select>
+                  <p className="mt-1 text-xs text-gray-400 dark:text-dark-muted">
+                    Pixel radius per point — larger = smoother, smaller = sharper
+                  </p>
                   {settings.heatmapRadius >= 600 && settings.resolution > 200 && (
                     <p className="mt-1 text-xs text-amber-600 dark:text-amber-400">
                       Wide radius works best with fine resolution (200m or less). Current: {settings.resolution}m

frontend/src/components/map/GeographicHeatmap.tsx

@@ -17,6 +17,7 @@ import { useMap } from 'react-leaflet';
 import L from 'leaflet';
 import { HeatmapTileRenderer } from './HeatmapTileRenderer.ts';
 import type { HeatmapPoint } from './HeatmapTileRenderer.ts';
+import { logger } from '@/utils/logger.ts';
 
 interface GeographicHeatmapProps {
   points: HeatmapPoint[];
@@ -80,7 +81,7 @@ export default function GeographicHeatmap({
     const renderer = rendererRef.current;
     const currentPointsRef = pointsRef;
 
-    // Custom GridLayer with canvas tiles
+    // Custom GridLayer with canvas tiles (Leaflet's class system requires `this`)
     const HeatmapGridLayer = L.GridLayer.extend({
       createTile(
         this: L.GridLayer,
@@ -100,7 +101,7 @@ export default function GeographicHeatmap({
               coords.z
             );
           } catch (error) {
-            console.error('Tile render error:', error);
+            logger.error('Tile render error:', error);
             // Draw error indicator
             const ctx = canvas.getContext('2d');
             if (ctx) {

frontend/src/components/map/Heatmap.tsx

@@ -1,153 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useMap } from 'react-leaflet';
-import L from 'leaflet';
-import 'leaflet.heat';
-import type { CoveragePoint } from '@/types/index.ts';
-
-// Extend L with heat layer type
-declare module 'leaflet' {
-  function heatLayer(
-    latlngs: Array<[number, number, number]>,
-    options?: Record<string, unknown>
-  ): L.Layer;
-}
-
-interface HeatmapProps {
-  points: CoveragePoint[];
-  visible: boolean;
-  opacity?: number;
-}
-
-/**
- * Normalize RSRP to 0-1 intensity for heatmap.
- *
- * Range: -130 to -50 dBm
- *
- * -130 dBm → 0.0 (deep blue, no service)
- *  -90 dBm → 0.5 (green, fair)
- *  -50 dBm → 1.0 (red, very strong)
- */
-function rsrpToIntensity(rsrp: number): number {
-  const minRSRP = -130;
-  const maxRSRP = -50;
-  return Math.max(0, Math.min(1, (rsrp - minRSRP) / (maxRSRP - minRSRP)));
-}
-
-/**
- * Geographic scale-aware heatmap parameters.
- *
- * The key insight: we want each heatmap point to cover a constant
- * GEOGRAPHIC area (400m radius) regardless of zoom level. Since
- * leaflet.heat works in pixels, we convert:
- *
- *   pixelsPerKm = 2^zoom * 6.4  (at equator, simplified)
- *   radiusPixels = targetRadiusKm * pixelsPerKm
- *
- * With progressive clamps for visual quality:
- *   - Low zoom (≤9):  min 15px, max 45px (avoid giant blobs)
- *   - High zoom (≥10): min 30px, max 80px (fill gaps between grid points)
- *
- * maxIntensity is CONSTANT at 0.75 — no compensation needed because
- * the geographic overlap between adjacent points stays consistent
- * when radius tracks geographic scale.
- */
-function getHeatmapParams(zoom: number) {
-  const pixelsPerKm = Math.pow(2, zoom) * 6.4;
-  const targetRadiusKm = 0.4; // 400 meters
-  const radiusPixels = targetRadiusKm * pixelsPerKm;
-
-  // Progressive clamps: wider range at high zoom for smooth fill
-  const minRadius = zoom < 10 ? 15 : 30;
-  const maxRadius = zoom < 10 ? 45 : 80;
-  const radius = Math.max(minRadius, Math.min(maxRadius, radiusPixels));
-
-  const blur = Math.round(radius * 0.6);
-
-  return {
-    radius: Math.round(radius),
-    blur,
-    maxIntensity: 0.75, // CONSTANT — geographic consistency means no compensation needed
-    pixelsPerKm,
-    radiusPixels,
-  };
-}
-
-const HEATMAP_GRADIENT = {
-  0.0: '#1a237e',   // Deep blue   (-130 dBm, no service)
-  0.15: '#0d47a1',  // Dark blue
-  0.25: '#2196f3',  // Blue        (-110 dBm, weak)
-  0.35: '#00bcd4',  // Cyan
-  0.45: '#00897b',  // Teal
-  0.55: '#4caf50',  // Green       ( -90 dBm, fair)
-  0.65: '#8bc34a',  // Light green
-  0.75: '#ffeb3b',  // Yellow      ( -70 dBm, good)
-  0.85: '#ff9800',  // Orange
-  1.0: '#f44336',   // Red         ( -50 dBm, excellent)
-};
-
-export default function Heatmap({ points, visible, opacity = 0.7 }: HeatmapProps) {
-  const map = useMap();
-  const [mapZoom, setMapZoom] = useState(map.getZoom());
-
-  // Track zoom changes
-  useEffect(() => {
-    const handleZoomEnd = () => setMapZoom(map.getZoom());
-    map.on('zoomend', handleZoomEnd);
-    return () => {
-      map.off('zoomend', handleZoomEnd);
-    };
-  }, [map]);
-
-  // Recreate heatmap layer when points, visibility, or zoom changes
-  useEffect(() => {
-    if (!visible || points.length === 0) return;
-
-    const heatData: Array<[number, number, number]> = points.map((p) => [
-      p.lat,
-      p.lon,
-      rsrpToIntensity(p.rsrp),
-    ]);
-
-    const { radius, blur, maxIntensity, pixelsPerKm, radiusPixels } =
-      getHeatmapParams(mapZoom);
-
-    // Debug: log geographic scale params (dev only)
-    if (import.meta.env.DEV && heatData.length > 0) {
-      const rsrpValues = points.map((p) => p.rsrp);
-      console.log('🔍 Heatmap Geographic:', {
-        zoom: mapZoom,
-        pixelsPerKm: pixelsPerKm.toFixed(1),
-        targetRadiusKm: 0.4,
-        radiusPixelsRaw: radiusPixels.toFixed(1),
-        radiusClamped: radius,
-        blur,
-        maxIntensity,
-        points: points.length,
-        rsrpRange: `${Math.min(...rsrpValues).toFixed(1)} to ${Math.max(...rsrpValues).toFixed(1)} dBm`,
-      });
-    }
-
-    const heatLayer = L.heatLayer(heatData, {
-      radius,
-      blur,
-      max: maxIntensity,
-      maxZoom: 17,
-      minOpacity: 0.3,
-      gradient: HEATMAP_GRADIENT,
-    });
-
-    heatLayer.addTo(map);
-
-    // Apply opacity to the canvas element
-    const container = (heatLayer as unknown as { _canvas?: HTMLCanvasElement })._canvas;
-    if (container) {
-      container.style.opacity = String(opacity);
-    }
-
-    return () => {
-      map.removeLayer(heatLayer);
-    };
-  }, [map, points, visible, mapZoom, opacity]);
-
-  return null;
-}

frontend/src/components/map/HeatmapTileRenderer.ts

@@ -22,6 +22,7 @@ import {
   valueToColorRGB,
   gaussianWeight,
 } from '@/utils/colorGradient.ts';
+import { logger } from '@/utils/logger.ts';
 
 export interface HeatmapPoint {
   lat: number;
@@ -186,14 +187,12 @@ export class HeatmapTileRenderer {
     // Cache the rendered tile
     this.cacheStore(cacheKey, imageData);
 
-    // Dev perf log
+    // Dev perf log (slow tiles only)
-    if (import.meta.env.DEV) {
+    const ms = performance.now() - t0;
-      const ms = performance.now() - t0;
+    if (ms > 50) {
-      if (ms > 50) {
+      logger.log(
-        console.log(
+        `Tile ${tileX},${tileY} z${zoom}: ${ms.toFixed(1)}ms (${relevant.length} pts)`
-          `🖌️ Tile ${tileX},${tileY} z${zoom}: ${ms.toFixed(1)}ms (${relevant.length} pts)`
+      );
-        );
-      }
     }
 
     return true;

frontend/src/components/map/Legend.tsx

@@ -1,58 +0,0 @@
-import { RSRP_LEGEND } from '@/constants/rsrp-thresholds.ts';
-import { useCoverageStore } from '@/store/coverage.ts';
-import { useSitesStore } from '@/store/sites.ts';
-
-export default function Legend() {
-  const result = useCoverageStore((s) => s.result);
-  const heatmapVisible = useCoverageStore((s) => s.heatmapVisible);
-  const toggleHeatmap = useCoverageStore((s) => s.toggleHeatmap);
-  const settings = useCoverageStore((s) => s.settings);
-  const sites = useSitesStore((s) => s.sites);
-
-  if (!result) return null;
-
-  // Estimate coverage area: total points * resolution^2
-  const areaKm2 = (result.totalPoints * settings.resolution * settings.resolution) / 1e6;
-
-  return (
-    <div className="absolute bottom-6 right-2 z-[1000] bg-white dark:bg-dark-surface rounded-lg shadow-lg border border-gray-200 dark:border-dark-border p-3 min-w-[170px]">
-      {/* Header with toggle */}
-      <div className="flex items-center justify-between mb-2">
-        <h3 className="text-xs font-semibold text-gray-700 dark:text-dark-text">Signal (RSRP)</h3>
-        <button
-          onClick={toggleHeatmap}
-          className={`w-8 h-4 rounded-full transition-colors relative
-            ${heatmapVisible ? 'bg-blue-500' : 'bg-gray-300 dark:bg-dark-border'}`}
-        >
-          <span
-            className={`absolute top-0.5 w-3 h-3 rounded-full bg-white shadow transition-transform
-              ${heatmapVisible ? 'left-4' : 'left-0.5'}`}
-          />
-        </button>
-      </div>
-
-      {/* Legend items */}
-      <div className="space-y-1">
-        {RSRP_LEGEND.map((item) => (
-          <div key={item.label} className="flex items-center gap-2">
-            <div
-              className="w-3 h-3 rounded-sm flex-shrink-0"
-              style={{ backgroundColor: item.color }}
-            />
-            <span className="text-[10px] text-gray-600 dark:text-gray-400">
-              {item.label}: {item.range}
-            </span>
-          </div>
-        ))}
-      </div>
-
-      {/* Stats */}
-      <div className="mt-2 pt-2 border-t border-gray-100 dark:border-dark-border text-[10px] text-gray-400 dark:text-dark-muted space-y-0.5">
-        <div>Points: {result.totalPoints.toLocaleString()}</div>
-        <div>Time: {(result.calculationTime / 1000).toFixed(2)}s</div>
-        <div>Area: ~{areaKm2.toFixed(1)} km²</div>
-        <div>Sites: {sites.length}</div>
-      </div>
-    </div>
-  );
-}

frontend/src/components/map/Map.tsx

@@ -1,4 +1,4 @@
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { MapContainer, TileLayer, useMapEvents, useMap } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import type { Map as LeafletMap } from 'leaflet';
@@ -41,7 +41,9 @@ function MapClickHandler({
  */
 function MapRefSetter({ mapRef }: { mapRef: React.MutableRefObject<LeafletMap | null> }) {
   const map = useMap();
-  mapRef.current = map;
+  useEffect(() => {
+    mapRef.current = map;
+  }, [map, mapRef]);
   return null;
 }
 

frontend/src/components/map/MeasurementTool.tsx

@@ -43,14 +43,18 @@ export default function MeasurementTool({ enabled, onComplete }: MeasurementTool
   const map = useMap();
   const [points, setPoints] = useState<[number, number][]>([]);
   const pointsRef = useRef(points);
-  pointsRef.current = points;
+  useEffect(() => {
+    pointsRef.current = points;
+  }, [points]);
 
   // Clear on disable
+  /* eslint-disable react-hooks/set-state-in-effect */
   useEffect(() => {
     if (!enabled) {
       setPoints([]);
     }
   }, [enabled]);
+  /* eslint-enable react-hooks/set-state-in-effect */
 
   // Click handler: add measurement point
   useEffect(() => {

frontend/src/components/map/SiteMarker.tsx

@@ -1,8 +1,8 @@
+import { memo, useEffect } from 'react';
 import { Marker, Popup, Polygon, useMap } from 'react-leaflet';
 import L from 'leaflet';
 import type { Site } from '@/types/index.ts';
 import { useSitesStore } from '@/store/sites.ts';
-import { useEffect } from 'react';
 
 interface SiteMarkerProps {
   site: Site;
@@ -65,7 +65,7 @@ function FlyToSelected({ site, isSelected }: { site: Site; isSelected: boolean }
   return null;
 }
 
-export default function SiteMarker({ site, onEdit }: SiteMarkerProps) {
+export default memo(function SiteMarker({ site, onEdit }: SiteMarkerProps) {
   const selectedSiteId = useSitesStore((s) => s.selectedSiteId);
   const selectSite = useSitesStore((s) => s.selectSite);
   const updateSite = useSitesStore((s) => s.updateSite);
@@ -126,4 +126,4 @@ export default function SiteMarker({ site, onEdit }: SiteMarkerProps) {
       )}
     </>
   );
-}
+});

frontend/src/components/panels/CoverageStats.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import type { CoveragePoint } from '@/types/index.ts';
 
 interface CoverageStatsProps {
@@ -32,16 +33,22 @@ function classifyPoints(points: CoveragePoint[]) {
   return counts;
 }
 
-export default function CoverageStats({ points, resolution }: CoverageStatsProps) {
+export default memo(function CoverageStats({ points, resolution }: CoverageStatsProps) {
   if (points.length === 0) {
     return (
       <div className="bg-white dark:bg-dark-surface border border-gray-200 dark:border-dark-border rounded-lg shadow-sm p-4">
         <h3 className="text-sm font-semibold text-gray-800 dark:text-dark-text mb-2">
           Coverage Analysis
         </h3>
-        <p className="text-xs text-gray-400 dark:text-dark-muted">
+        <div className="text-center py-3">
-          No coverage data. Calculate coverage first.
+          <div className="text-2xl mb-1 opacity-40">📊</div>
-        </p>
+          <p className="text-xs text-gray-400 dark:text-dark-muted">
+            No coverage data yet.
+          </p>
+          <p className="text-xs text-gray-400 dark:text-dark-muted mt-0.5">
+            Press <kbd className="px-1 py-0.5 bg-gray-100 dark:bg-dark-border rounded text-[10px] font-mono">Ctrl+Enter</kbd> to calculate.
+          </p>
+        </div>
       </div>
     );
   }
@@ -135,4 +142,4 @@ export default function CoverageStats({ points, resolution }: CoverageStatsProps
       </div>
     </div>
   );
-}
+});

frontend/src/components/panels/ExportPanel.tsx

@@ -83,9 +83,15 @@ export default function ExportPanel() {
           </div>
         </>
       ) : (
-        <p className="text-xs text-gray-400 dark:text-dark-muted">
+        <div className="text-center py-2">
-          No coverage data. Calculate coverage first to enable export.
+          <div className="text-2xl mb-1 opacity-40">📁</div>
-        </p>
+          <p className="text-xs text-gray-400 dark:text-dark-muted">
+            No coverage data to export.
+          </p>
+          <p className="text-xs text-gray-400 dark:text-dark-muted mt-0.5">
+            Calculate coverage first to enable CSV and GeoJSON export.
+          </p>
+        </div>
       )}
     </div>
   );

frontend/src/components/panels/ProjectPanel.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useProjectsStore } from '@/store/projects.ts';
 import { useToastStore } from '@/components/ui/Toast.tsx';
 import Button from '@/components/ui/Button.tsx';
+import { logger } from '@/utils/logger.ts';
 
 export default function ProjectPanel() {
   const projects = useProjectsStore((s) => s.projects);
@@ -33,7 +34,7 @@ export default function ProjectPanel() {
       setProjectName('');
       setShowSaveForm(false);
     } catch (err) {
-      console.error('Save project error:', err);
+      logger.error('Save project error:', err);
       addToast('Failed to save project', 'error');
     }
   };
@@ -48,7 +49,7 @@ export default function ProjectPanel() {
         addToast('Project not found', 'error');
       }
     } catch (err) {
-      console.error('Load project error:', err);
+      logger.error('Load project error:', err);
       addToast('Failed to load project', 'error');
     } finally {
       setIsLoading(false);
@@ -60,7 +61,7 @@ export default function ProjectPanel() {
       await deleteProject(id);
       addToast(`Project "${name}" deleted`, 'info');
     } catch (err) {
-      console.error('Delete project error:', err);
+      logger.error('Delete project error:', err);
       addToast('Failed to delete project', 'error');
     }
   };

frontend/src/components/panels/SiteForm.tsx

@@ -130,6 +130,8 @@ export default function SiteForm({
   const [beamwidth, setBeamwidth] = useState(editSite?.beamwidth ?? 65);
   const [notes, setNotes] = useState(editSite?.notes ?? '');
 
+  // Sync pending map-click location into form fields
+  /* eslint-disable react-hooks/set-state-in-effect */
   useEffect(() => {
     if (pendingLocation) {
       setLat(pendingLocation.lat);
@@ -154,6 +156,7 @@ export default function SiteForm({
       setNotes(editSite.notes ?? '');
     }
   }, [editSite]);
+  /* eslint-enable react-hooks/set-state-in-effect */
 
   const applyTemplate = (key: keyof typeof TEMPLATES) => {
     const t = TEMPLATES[key];

frontend/src/components/panels/SiteImportExport.tsx

@@ -2,6 +2,7 @@ import { useRef } from 'react';
 import { useSitesStore } from '@/store/sites.ts';
 import { useToastStore } from '@/components/ui/Toast.tsx';
 import Button from '@/components/ui/Button.tsx';
+import { logger } from '@/utils/logger.ts';
 
 /**
  * Import/Export site configurations as JSON.
@@ -95,7 +96,7 @@ export default function SiteImportExport() {
       const count = await importSites(sitesData);
       addToast(`Imported ${count} site(s)`, 'success');
     } catch (error) {
-      console.error('Import failed:', error);
+      logger.error('Import failed:', error);
       addToast('Invalid JSON file', 'error');
     }
 

frontend/src/components/ui/Slider.tsx

@@ -1,47 +0,0 @@
-interface SliderProps {
-  label: string;
-  value: number;
-  min: number;
-  max: number;
-  step?: number;
-  unit: string;
-  hint?: string;
-  onChange: (value: number) => void;
-}
-
-export default function Slider({
-  label,
-  value,
-  min,
-  max,
-  step = 1,
-  unit,
-  hint,
-  onChange,
-}: SliderProps) {
-  return (
-    <div className="space-y-1">
-      <div className="flex items-center justify-between">
-        <label className="text-sm font-medium text-gray-700 dark:text-dark-text">{label}</label>
-        <span className="text-sm font-semibold text-blue-600 dark:text-blue-400">
-          {value} {unit}
-        </span>
-      </div>
-      <input
-        type="range"
-        min={min}
-        max={max}
-        step={step}
-        value={value}
-        onChange={(e) => onChange(Number(e.target.value))}
-        className="w-full h-2 bg-gray-200 dark:bg-dark-border rounded-lg appearance-none cursor-pointer
-          accent-blue-600"
-      />
-      <div className="flex justify-between text-xs text-gray-400 dark:text-dark-muted">
-        <span>{min}</span>
-        <span>{max}</span>
-      </div>
-      {hint && <p className="text-xs text-gray-400 dark:text-dark-muted">{hint}</p>}
-    </div>
-  );
-}

frontend/src/components/ui/Toast.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components -- store co-located with its UI */
 import { useState, useEffect, useCallback } from 'react';
 import { create } from 'zustand';
 

frontend/src/hooks/useElevation.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useMap } from 'react-leaflet';
 import L from 'leaflet';
+import { logger } from '@/utils/logger.ts';
 
 interface ElevationState {
   elevation: number | null;
@@ -47,7 +48,7 @@ export function useElevation() {
             // Intentional abort, ignore
             return;
           }
-          console.error('Elevation fetch failed:', error);
+          logger.error('Elevation fetch failed:', error);
           setState((prev) => ({ ...prev, elevation: null, loading: false }));
         }
       }, 300);

frontend/src/rf/calculator.ts

@@ -1,4 +1,5 @@
 import type { Site, CoveragePoint, CoverageResult, CoverageSettings, GridPoint } from '@/types/index.ts';
+import { logger } from '@/utils/logger.ts';
 
 export class RFCalculator {
   /**
@@ -49,8 +50,13 @@ export class RFCalculator {
     // Cleanup workers
     workers.forEach((w) => w.terminate());
 
-    // Merge results
+    // Merge results (concat avoids stack overflow that .flat() can cause on huge arrays)
-    const allPoints = results.flat();
+    const allPoints: CoveragePoint[] = [];
+    for (const chunk of results) {
+      for (const point of chunk) {
+        allPoints.push(point);
+      }
+    }
 
     const calculationTime = performance.now() - startTime;
 
@@ -62,18 +68,56 @@ export class RFCalculator {
     };
   }
 
+  /**
+   * Maximum grid points to prevent stack overflow / memory exhaustion.
+   * 500k points at 4 workers = 125k per worker — safe for postMessage serialization.
+   */
+  private static readonly MAX_GRID_POINTS = 500_000;
+
   private generateGrid(
     bounds: { north: number; south: number; east: number; west: number },
     resolution: number
   ): GridPoint[] {
-    const points: GridPoint[] = [];
-
     // Convert resolution to degrees
     const latStep = resolution / 111000; // ~111km per degree latitude
     const centerLat = (bounds.north + bounds.south) / 2;
     const lonStep =
       resolution / (111000 * Math.cos((centerLat * Math.PI) / 180));
 
+    // Pre-check total count to avoid building an array we'd throw away
+    const latRange = bounds.north - bounds.south;
+    const lonRange = bounds.east - bounds.west;
+    const estimatedRows = Math.ceil(latRange / latStep) + 1;
+    const estimatedCols = Math.ceil(lonRange / lonStep) + 1;
+    const estimated = estimatedRows * estimatedCols;
+
+    if (estimated > RFCalculator.MAX_GRID_POINTS) {
+      // Auto-coarsen: pick a resolution that fits within the cap
+      const autoResolution = Math.ceil(
+        Math.sqrt((latRange * 111000 * lonRange * 111000 * Math.cos((centerLat * Math.PI) / 180)) /
+          RFCalculator.MAX_GRID_POINTS)
+      );
+      const coarsenedLatStep = autoResolution / 111000;
+      const coarsenedLonStep =
+        autoResolution / (111000 * Math.cos((centerLat * Math.PI) / 180));
+
+      logger.warn(
+        `Grid too large (${estimated.toLocaleString()} points at ${resolution}m). ` +
+        `Auto-coarsening to ~${autoResolution}m for safety (max ${RFCalculator.MAX_GRID_POINTS.toLocaleString()}).`
+      );
+
+      return this.buildGrid(bounds, coarsenedLatStep, coarsenedLonStep);
+    }
+
+    return this.buildGrid(bounds, latStep, lonStep);
+  }
+
+  private buildGrid(
+    bounds: { north: number; south: number; east: number; west: number },
+    latStep: number,
+    lonStep: number
+  ): GridPoint[] {
+    const points: GridPoint[] = [];
     let lat = bounds.south;
     while (lat <= bounds.north) {
       let lon = bounds.west;
@@ -83,7 +127,6 @@ export class RFCalculator {
       }
       lat += latStep;
     }
-
     return points;
   }
 

frontend/src/utils/logger.ts

@@ -0,0 +1,18 @@
+/**
+ * Production-safe logger.
+ * - In development: all levels log normally
+ * - In production: only errors log (warnings suppressed, logs suppressed)
+ */
+const isDev = import.meta.env.DEV;
+
+export const logger = {
+  log: (...args: unknown[]): void => {
+    if (isDev) console.log(...args);
+  },
+  warn: (...args: unknown[]): void => {
+    if (isDev) console.warn(...args);
+  },
+  error: (...args: unknown[]): void => {
+    console.error(...args);
+  },
+};