From 83c48bf3e75dc53cb389df42a0e8c0fc2f822084 Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Sun, 13 Sep 2026 09:12:06 -0400
Subject: [PATCH] Radio sonde + auto mode

---
 client/src/components/MapView.vue | 967 ++++++++++++++++++++++++------
 client/src/services/adsb.ts       | 421 ++++++++-----
 client/src/services/ais.ts        | 301 +++++++---
 client/src/services/sats.ts       | 454 +++++++++-----
 server/src/radiosonde.mjs         |  54 ++
 server/src/server.mjs             |   5 +-
 6 files changed, 1624 insertions(+), 578 deletions(-)
 create mode 100644 server/src/radiosonde.mjs

diff --git a/client/src/components/MapView.vue b/client/src/components/MapView.vue
index 479daf1..e373ad3 100644
--- a/client/src/components/MapView.vue
+++ b/client/src/components/MapView.vue
@@ -1,88 +1,216 @@
 <script setup lang="ts">
-import { AirTrafficLayer } from '@/services/adsb.ts'
-import { AISLayer } from '@/services/ais.ts'
-import { api } from '@/services/api.ts'
-import { RangeLayer } from '@/services/range.ts'
+import {AirTrafficLayer} from '@/services/adsb.ts';
+import {AISLayer} from '@/services/ais.ts';
+import {api} from '@/services/api.ts';
+import {RangeLayer} from '@/services/range.ts';
 import {SatsLayer} from '@/services/sats.ts';
-import VectorTileLayer from 'ol/layer/VectorTile'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
-import Map from 'ol/Map'
-import View from 'ol/View'
-import TileLayer from 'ol/layer/Tile'
-import VectorLayer from 'ol/layer/Vector'
-import VectorSource from 'ol/source/Vector'
-import XYZ from 'ol/source/XYZ'
-import Feature from 'ol/Feature'
-import Point from 'ol/geom/Point'
-import CircleGeom from 'ol/geom/Circle'
-import { defaults as defaultInteractions } from 'ol/interaction'
-import { fromLonLat, toLonLat } from 'ol/proj'
-import { Style, Fill, Stroke, Circle as CircleStyle } from 'ol/style'
-import { applyStyle } from 'ol-mapbox-style'
-import { Aurora } from '@/services/aurora.ts'
-import 'ol/ol.css'
+import VectorTileLayer from 'ol/layer/VectorTile';
+import {onMounted, onUnmounted, ref, watch} from 'vue';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import XYZ from 'ol/source/XYZ';
+import Feature from 'ol/Feature';
+import Point from 'ol/geom/Point';
+import CircleGeom from 'ol/geom/Circle';
+import {defaults as defaultInteractions} from 'ol/interaction';
+import {fromLonLat, toLonLat} from 'ol/proj';
+import {Style, Fill, Stroke, Circle as CircleStyle} from 'ol/style';
+import {applyStyle} from 'ol-mapbox-style';
+import {Aurora} from '@/services/aurora.ts';
+import 'ol/ol.css';
 
-const current = ref({ latitude: 0, longitude: 0 })
-const props = defineProps<{ dark: boolean }>()
-const mapEl = ref<HTMLDivElement>()
-const showOverlays = ref(false)
+const current = ref({latitude: 0, longitude: 0});
+const props = defineProps<{dark: boolean}>();
+const mapEl = ref<HTMLDivElement>();
+const showOverlays = ref(false);
+const openMenu = ref<string | null>(null);
+const NM = 1852;
+const showWind = ref(false);
+const windSrc = ref('');
 
-const NM = 1852
+const OVERLAY_GROUPS = [
+	{
+		id: 'traffic',
+		label: 'Traffic',
+		icon: '✈️',
+		items: [
+			{id: 'aircraft', label: 'Aircraft', icon: '✈️'},
+			{id: 'marine', label: 'Marine', icon: '🚢'},
+			{id: 'satellites', label: 'Satellites', icon: '🛰️'},
+		],
+	},
+	{
+		id: 'weather',
+		label: 'Weather',
+		icon: '🌦️',
+		items: [
+			{id: 'aurora', label: 'Aurora', icon: '🌌'},
+			{id: 'rain', label: 'Rain', icon: '🌧️'},
+			{id: 'wind', label: 'Wind', icon: '💨'},
+		],
+	},
+];
 
-const showWind = ref(false)
-const windSrc = ref('')
+const DEFAULT_OVERLAYS = ['aircraft', 'marine', 'satellites', 'rain'];
+const activeOverlays = ref<Set<string>>(new Set(DEFAULT_OVERLAYS));
+const overlayLayers: {[key: string]: any} = {};
 
-const OVERLAYS = [
-	{ id: 'traffic', label: 'Traffic', icon: '✈️' },
-	{ id: 'sats', label: 'Sats', icon: '🛰️' },
-	{ id: 'rain', label: 'Rain', icon: '🌧️' },
-	{ id: 'aurora', label: 'Aurora', icon: '🌌' },
-	{ id: 'wind', label: 'Wind', icon: '💨' },
-]
+const MAP_STATE_KEY = 'situation-center-map-state';
+const MAP_LAYERS_KEY = 'situation-center-map-layers';
+const AUTO_MODE_KEY = 'situation-center-auto-mode';
 
-const activeOverlays = ref<Set<string>>(new Set(['traffic', 'sats', 'rain']))
-const overlayLayers: { [key: string]: any } = {}
+const AUTO_CHECK_MS = 2_000;
+const AUTO_DISTANCE_MARGIN = 0.75;
 
-let map: Map
-let stationLayer: VectorLayer<VectorSource>
-let radarInterval: ReturnType<typeof setInterval>
-let airTraffic: AirTrafficLayer
-let aisLayer: AISLayer
-let range: RangeLayer
-let sats: SatsLayer
-let aurora: Aurora
+const AUTO_CATEGORIES = ['aircraft', 'marine', 'satellites'] as const;
+
+type AutoCategory = typeof AUTO_CATEGORIES[number];
+
+interface AutoObject {
+	category: AutoCategory;
+	id: string;
+	discoveredAt: number;
+	priority: boolean;
+}
+
+let map: Map;
+let stationLayer: VectorLayer<VectorSource>;
+let radarInterval: ReturnType<typeof setInterval>;
+let autoInterval: ReturnType<typeof setInterval>;
+let airTraffic: AirTrafficLayer;
+let aisLayer: AISLayer;
+let range: RangeLayer;
+let sats: SatsLayer;
+let aurora: Aurora;
+
+const autoMode = ref(false);
+const autoCategory = ref<AutoCategory | null>(null);
+const autoTarget = ref<any>(null);
+
+let autoTargetKey: string | null = null;
+let autoKnown: Record<string, AutoObject> = {};
+let autoLastKeys = new Set<string>();
+
+function loadMapState() {
+	try {
+		const raw = localStorage.getItem(MAP_STATE_KEY);
+		if (!raw) return null;
+
+		const state = JSON.parse(raw);
+
+		if (
+			typeof state.latitude !== 'number' ||
+			typeof state.longitude !== 'number' ||
+			typeof state.zoom !== 'number'
+		) return null;
+
+		return state;
+	} catch {
+		return null;
+	}
+}
+
+function saveMapState() {
+	if (!map) return;
+
+	try {
+		const view = map.getView();
+		const center = view.getCenter();
+		if (!center) return;
+
+		const [longitude, latitude] = toLonLat(center);
+		const zoom = view.getZoom();
+		if (typeof zoom !== 'number') return;
+
+		localStorage.setItem(MAP_STATE_KEY, JSON.stringify({
+			latitude,
+			longitude,
+			zoom,
+		}));
+	} catch {
+		// Ignore localStorage failures.
+	}
+}
+
+function loadLayers() {
+	try {
+		const raw = localStorage.getItem(MAP_LAYERS_KEY);
+		if (!raw) return new Set(DEFAULT_OVERLAYS);
+
+		const layers = JSON.parse(raw);
+		if (!Array.isArray(layers)) return new Set(DEFAULT_OVERLAYS);
+
+		const validLayers = OVERLAY_GROUPS.flatMap(group => group.items.map(item => item.id));
+
+		return new Set(
+			layers.filter((id: unknown): id is string =>
+				typeof id === 'string' && validLayers.includes(id),
+			),
+		);
+	} catch {
+		return new Set(DEFAULT_OVERLAYS);
+	}
+}
+
+function saveLayers() {
+	try {
+		localStorage.setItem(MAP_LAYERS_KEY, JSON.stringify([...activeOverlays.value]));
+	} catch {
+		// Ignore localStorage failures.
+	}
+}
+
+function loadAutoMode() {
+	try {
+		return localStorage.getItem(AUTO_MODE_KEY) === 'true';
+	} catch {
+		return false;
+	}
+}
+
+function saveAutoMode() {
+	try {
+		localStorage.setItem(AUTO_MODE_KEY, String(autoMode.value));
+	} catch {
+		// Ignore localStorage failures.
+	}
+}
 
 function buildWindSrc(lat: number, lon: number, zoom: number) {
-	return `https://embed.windy.com/embed2.html?lat=${lat.toFixed(4)}&lon=${lon.toFixed(4)}&detailLat=${lat.toFixed(4)}&detailLon=${lon.toFixed(4)}&zoom=${Math.round(zoom)}&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=kt&metricTemp=%C2%B0C&radarRange=-1`
+	return `https://embed.windy.com/embed2.html?lat=${lat.toFixed(4)}&lon=${lon.toFixed(4)}&detailLat=${lat.toFixed(4)}&detailLon=${lon.toFixed(4)}&zoom=${Math.round(zoom)}&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=kt&metricTemp=%C2%B0C&radarRange=-1`;
 }
 
 function syncWindSrc() {
-	const view = map.getView()
-	const center: any = toLonLat(view.getCenter()!)
-	windSrc.value = buildWindSrc(center[1], center[0], view.getZoom() ?? 8)
+	const view = map.getView();
+	const center: any = toLonLat(view.getCenter()!);
+	windSrc.value = buildWindSrc(center[1], center[0], view.getZoom() ?? 8);
 }
 
 function showWindOverlay() {
-	syncWindSrc()
-	showWind.value = true
-	map.getInteractions().forEach(i => i.setActive(false))
+	syncWindSrc();
+	showWind.value = true;
+	map.getInteractions().forEach(i => i.setActive(false));
 }
 
 function hideWindOverlay() {
-	showWind.value = false
-	map.getInteractions().forEach(i => i.setActive(true))
+	showWind.value = false;
+	map.getInteractions().forEach(i => i.setActive(true));
 }
 
 async function fetchRadarUrl(): Promise<string | null> {
 	try {
-		const res = await fetch('https://api.rainviewer.com/public/weather-maps.json')
-		const data = await res.json()
-		const past = data.radar?.past ?? []
-		const latest = past[past.length - 1]
-		if (!latest) return null
-		return `https://tilecache.rainviewer.com${latest.path}/256/{z}/{x}/{y}/2/1_1.png`
+		const res = await fetch('https://api.rainviewer.com/public/weather-maps.json');
+		const data = await res.json();
+		const past = data.radar?.past ?? [];
+		const latest = past[past.length - 1];
+		if (!latest) return null;
+
+		return `https://tilecache.rainviewer.com${latest.path}/256/{z}/{x}/{y}/2/1_1.png`;
 	} catch {
-		return null
+		return null;
 	}
 }
 
@@ -92,153 +220,496 @@ function buildRainLayer(url: string): TileLayer<XYZ> {
 			url,
 			maxZoom: 7,
 			tileLoadFunction: (tile: any, src: string) => {
-				const img = tile.getImage()
-				img.onerror = () => tile.setState(3)
-				img.src = src
+				const img = tile.getImage();
+				img.onerror = () => tile.setState(3);
+				img.src = src;
 			},
 		}),
 		opacity: 0.2,
 		zIndex: 5,
-	})
+	});
 }
 
 async function refreshRain() {
-	const url = await fetchRadarUrl()
-	if (!url) return
+	const url = await fetchRadarUrl();
+	if (!url) return;
 
-	if (overlayLayers['rain']) map.removeLayer(overlayLayers['rain'])
-	if (!activeOverlays.value.has('rain')) return
+	if (overlayLayers['rain']) {
+		map.removeLayer(overlayLayers['rain']);
+		delete overlayLayers['rain'];
+	}
 
-	const layer = buildRainLayer(url)
-	overlayLayers['rain'] = layer
-	map.addLayer(layer)
+	if (!activeOverlays.value.has('rain')) return;
+
+	const layer = buildRainLayer(url);
+	overlayLayers['rain'] = layer;
+	map.addLayer(layer);
 }
 
 function toggleOverlay(id: string) {
-	if (id === 'traffic') {
-		if (activeOverlays.value.has('traffic')) {
-			activeOverlays.value.delete('traffic');
-			aisLayer.hide()
-			airTraffic.hide()
-			range.hide()
+	if (id === 'aircraft') {
+		if (activeOverlays.value.has('aircraft')) {
+			activeOverlays.value.delete('aircraft');
+			airTraffic.hide();
+			range.hide();
 		} else {
-			activeOverlays.value.add('traffic');
-			aisLayer.show()
-			airTraffic.show()
-			range.show()
+			activeOverlays.value.add('aircraft');
+			airTraffic.show();
+			range.show();
+		}
+	} else if (id === 'marine') {
+		if (activeOverlays.value.has('marine')) {
+			activeOverlays.value.delete('marine');
+			aisLayer.hide();
+		} else {
+			activeOverlays.value.add('marine');
+			aisLayer.show();
+		}
+	} else if (id === 'satellites') {
+		if (activeOverlays.value.has('satellites')) {
+			activeOverlays.value.delete('satellites');
+			sats.hide();
+		} else {
+			activeOverlays.value.add('satellites');
+			sats.show();
 		}
 	} else if (id === 'aurora') {
 		if (activeOverlays.value.has('aurora')) {
-			activeOverlays.value.delete('aurora')
-			aurora.hide()
+			activeOverlays.value.delete('aurora');
+			aurora.hide();
 		} else {
-			activeOverlays.value.add('aurora')
-			aurora.show()
-		}
-	} else if (id === 'sats') {
-		if (activeOverlays.value.has('sats')) {
-			activeOverlays.value.delete('sats')
-			sats.hide()
-		} else {
-			activeOverlays.value.add('sats')
-			sats.show()
+			activeOverlays.value.add('aurora');
+			aurora.show();
 		}
 	} else if (id === 'wind') {
 		if (activeOverlays.value.has('wind')) {
-			activeOverlays.value.delete('wind')
-			hideWindOverlay()
+			activeOverlays.value.delete('wind');
+			hideWindOverlay();
 		} else {
-			activeOverlays.value.add('wind')
-			showWindOverlay()
+			activeOverlays.value.add('wind');
+			showWindOverlay();
 		}
 	} else if (id === 'rain') {
 		if (activeOverlays.value.has('rain')) {
-			activeOverlays.value.delete('rain')
-			if (overlayLayers['rain']) { map.removeLayer(overlayLayers['rain']); delete overlayLayers['rain'] }
+			activeOverlays.value.delete('rain');
+
+			if (overlayLayers['rain']) {
+				map.removeLayer(overlayLayers['rain']);
+				delete overlayLayers['rain'];
+			}
 		} else {
-			activeOverlays.value.add('rain')
-			refreshRain()
+			activeOverlays.value.add('rain');
+			refreshRain();
 		}
 	}
+
+	saveLayers();
+}
+
+function toggleMenu(id: string) {
+	openMenu.value = openMenu.value === id ? null : id;
 }
 
 function buildBaseLayer(dark: boolean) {
-	const layer = new VectorTileLayer({ declutter: true })
-	applyStyle(layer, dark ? '/dark-theme.json' : '/light-theme.json')
-	return layer
+	const layer = new VectorTileLayer({declutter: true});
+	applyStyle(layer, dark ? '/dark-theme.json' : '/light-theme.json');
+	return layer;
 }
 
 function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer<VectorSource> {
-	const center = fromLonLat([lon, lat])
-	const source = new VectorSource()
-	const ringStroke = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.35)'
+	const center = fromLonLat([lon, lat]);
+	const source = new VectorSource();
+	const ringStroke = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.35)';
 
 	for (const nm of [50, 100, 150, 200]) {
-		const ring = new Feature(new CircleGeom(center, nm * NM))
+		const ring = new Feature(new CircleGeom(center, nm * NM));
+
 		ring.setStyle(new Style({
-			stroke: new Stroke({ color: ringStroke, width: 1, lineDash: [6, 4] }),
-			fill: new Fill({ color: 'transparent' }),
-		}))
-		source.addFeature(ring)
+			stroke: new Stroke({
+				color: ringStroke,
+				width: 1,
+				lineDash: [6, 4],
+			}),
+			fill: new Fill({color: 'transparent'}),
+		}));
+
+		source.addFeature(ring);
 	}
 
-	const dot = new Feature(new Point(center))
+	const dot = new Feature(new Point(center));
+
 	dot.setStyle(new Style({
 		image: new CircleStyle({
 			radius: 7,
-			fill: new Fill({ color: dark ? '#ffffff' : '#000000' }),
-			stroke: new Stroke({ color: dark ? '#000000' : '#ffffff', width: 2 }),
+			fill: new Fill({color: dark ? '#ffffff' : '#000000'}),
+			stroke: new Stroke({
+				color: dark ? '#000000' : '#ffffff',
+				width: 2,
+			}),
 		}),
-	}))
-	source.addFeature(dot)
+	}));
 
-	return new VectorLayer({ source, zIndex: 20 })
+	source.addFeature(dot);
+
+	return new VectorLayer({source, zIndex: 20});
+}
+
+function restoreOverlayState() {
+	if (activeOverlays.value.has('aircraft')) {
+		airTraffic.show();
+		range.show();
+	} else {
+		airTraffic.hide();
+		range.hide();
+	}
+
+	if (activeOverlays.value.has('marine')) aisLayer.show();
+	else aisLayer.hide();
+
+	if (activeOverlays.value.has('satellites')) sats.show();
+	else sats.hide();
+
+	if (activeOverlays.value.has('aurora')) aurora.show();
+	else aurora.hide();
+
+	if (activeOverlays.value.has('wind')) showWindOverlay();
+	if (activeOverlays.value.has('rain')) refreshRain();
+}
+
+function getAutoLayer(category: AutoCategory) {
+	if (category === 'aircraft') return airTraffic;
+	if (category === 'marine') return aisLayer;
+	return sats;
+}
+
+function getAutoId(category: AutoCategory, target: any): string {
+	if (category === 'aircraft') return String(target.icao);
+	if (category === 'marine') return String(target.mmsi);
+	return String(target.satellite);
+}
+
+function getAutoTarget(category: AutoCategory, id: string) {
+	if (category === 'aircraft') return airTraffic.getById(id);
+	if (category === 'marine') return aisLayer.getById(id);
+	return sats.getById(id);
+}
+
+function getAutoPosition(category: AutoCategory, target: any): [number, number] | null {
+	if (category === 'aircraft') return target.latitude != null && target.longitude != null
+		? [target.longitude, target.latitude]
+		: null;
+
+	if (category === 'marine') return target.lat != null && target.lon != null
+		? [target.lon, target.lat]
+		: null;
+
+	return target.latitude != null && target.longitude != null
+		? [target.longitude, target.latitude]
+		: null;
+}
+
+function getAutoZoom(category: AutoCategory): number {
+	if (category === 'aircraft') return 10;
+	if (category === 'marine') return 12;
+	return 6;
+}
+
+function focusAutoTarget(category: AutoCategory, target: any, animate = true) {
+	const position = getAutoPosition(category, target);
+	if (!position) return;
+
+	const center = fromLonLat(position);
+
+	map.getView().animate({
+		center,
+		zoom: getAutoZoom(category),
+		duration: animate ? 900 : 0,
+	});
+}
+
+function closeAutoPopup() {
+	if (!autoCategory.value || !autoTarget.value) return;
+
+	getAutoLayer(autoCategory.value).closeAutoPopup(
+		getAutoId(autoCategory.value, autoTarget.value),
+	);
+}
+
+function clearAutoTarget() {
+	closeAutoPopup();
+	autoCategory.value = null;
+	autoTarget.value = null;
+	autoTargetKey = null;
+}
+
+function stopAutoMode() {
+	if (autoInterval) {
+		clearInterval(autoInterval);
+		autoInterval = undefined as any;
+	}
+
+	clearAutoTarget();
+
+	autoMode.value = false;
+	autoKnown = {};
+	autoLastKeys = new Set();
+
+	saveAutoMode();
+}
+
+function getAutoObjects(): AutoObject[] {
+	const objects: AutoObject[] = [];
+
+	for (const category of AUTO_CATEGORIES) {
+		if (!activeOverlays.value.has(category)) continue;
+
+		const layer = getAutoLayer(category);
+		if (!layer.visible) continue;
+
+		const targets = layer.getAutoCandidates(
+			current.value.latitude,
+			current.value.longitude,
+		);
+
+		for (const target of targets) {
+			const id = getAutoId(category, target);
+			const key = `${category}:${id}`;
+			const priority = category !== 'satellites' && layer.isPriority(target);
+
+			if (!autoKnown[key]) {
+				autoKnown[key] = {
+					category,
+					id,
+					discoveredAt: Date.now(),
+					priority,
+				};
+			} else {
+				autoKnown[key].priority = priority;
+			}
+
+			objects.push(autoKnown[key]);
+		}
+	}
+
+	return objects;
+}
+
+function getAutoDistance(object: AutoObject): number {
+	const target = getAutoTarget(object.category, object.id);
+	if (!target) return Infinity;
+
+	return getAutoLayer(object.category).getAutoDistance(
+		current.value.latitude,
+		current.value.longitude,
+		target,
+	);
+}
+
+function getNewest(objects: AutoObject[]): AutoObject | null {
+	return objects
+		.slice()
+		.sort((a, b) => b.discoveredAt - a.discoveredAt)[0] ?? null;
+}
+
+function getClosest(objects: AutoObject[]): AutoObject | null {
+	return objects
+		.slice()
+		.sort((a, b) => getAutoDistance(a) - getAutoDistance(b))[0] ?? null;
+}
+
+function setAutoTarget(object: AutoObject) {
+	const target = getAutoTarget(object.category, object.id);
+	if (!target) return;
+
+	clearAutoTarget();
+
+	autoCategory.value = object.category;
+	autoTarget.value = target;
+	autoTargetKey = `${object.category}:${object.id}`;
+
+	getAutoLayer(object.category).openAutoPopup(target);
+	focusAutoTarget(object.category, target);
+}
+
+function shouldNewTargetSteal(currentObject: AutoObject, newObject: AutoObject): boolean {
+	const currentDistance = getAutoDistance(currentObject);
+	const newDistance = getAutoDistance(newObject);
+
+	if (!isFinite(currentDistance)) return true;
+	if (!isFinite(newDistance)) return false;
+
+	return newDistance <= currentDistance * AUTO_DISTANCE_MARGIN;
+}
+
+function reconcileAutoMode() {
+	if (!autoMode.value) return;
+
+	const objects = getAutoObjects();
+	const currentKeys = new Set(objects.map(o => `${o.category}:${o.id}`));
+	const discovered = objects.filter(o => !autoLastKeys.has(`${o.category}:${o.id}`));
+
+	for (const key of Object.keys(autoKnown)) {
+		if (!currentKeys.has(key)) delete autoKnown[key];
+	}
+
+	autoLastKeys = currentKeys;
+
+	const military = objects
+		.filter(o => o.priority)
+		.sort((a, b) => getAutoDistance(a) - getAutoDistance(b));
+
+	if (military.length) {
+		const best: any = military[0];
+		const key = `${best.category}:${best.id}`;
+
+		if (key !== autoTargetKey) setAutoTarget(best);
+		return;
+	}
+
+	if (autoTargetKey && currentKeys.has(autoTargetKey)) {
+		const currentObject = autoKnown[autoTargetKey];
+
+		if (!currentObject) return;
+		if (!discovered.length) return;
+
+		const newest = getNewest(discovered);
+		if (!newest) return;
+		if (`${newest.category}:${newest.id}` === autoTargetKey) return;
+
+		if (shouldNewTargetSteal(currentObject, newest)) setAutoTarget(newest);
+
+		return;
+	}
+
+	if (objects.length) {
+		const newest = getNewest(objects);
+		if (newest) setAutoTarget(newest);
+	}
+}
+
+function startAutoMode() {
+	if (autoMode.value) return;
+
+	autoMode.value = true;
+	saveAutoMode();
+
+	autoKnown = {};
+	autoLastKeys = new Set();
+	clearAutoTarget();
+
+	reconcileAutoMode();
+
+	autoInterval = setInterval(() => {
+		reconcileAutoMode();
+
+		if (!autoCategory.value || !autoTarget.value) return;
+
+		const fresh = getAutoTarget(
+			autoCategory.value,
+			getAutoId(autoCategory.value, autoTarget.value),
+		);
+
+		if (!fresh) {
+			clearAutoTarget();
+			reconcileAutoMode();
+			return;
+		}
+
+		autoTarget.value = fresh;
+		focusAutoTarget(autoCategory.value, fresh);
+	}, AUTO_CHECK_MS);
+}
+
+function toggleAutoMode() {
+	if (autoMode.value) stopAutoMode();
+	else startAutoMode();
 }
 
 onMounted(async () => {
-	const position = await api.position()
+	activeOverlays.value = loadLayers();
+
+	const savedMapState = loadMapState();
+	const position = await api.position();
+
 	current.value = {
 		latitude: position?.latitude || 0,
 		longitude: position?.longitude || 0,
-	}
+	};
 
-	stationLayer = buildStationLayer(current.value.latitude, current.value.longitude, props.dark)
+	stationLayer = buildStationLayer(
+		current.value.latitude,
+		current.value.longitude,
+		props.dark,
+	);
+
+	const initialLatitude = savedMapState?.latitude ?? current.value.latitude;
+	const initialLongitude = savedMapState?.longitude ?? current.value.longitude;
+	const initialZoom = savedMapState?.zoom ?? 8;
 
 	map = new Map({
 		target: mapEl.value!,
-		layers: [buildBaseLayer(props.dark), stationLayer],
-		interactions: defaultInteractions({ altShiftDragRotate: false, pinchRotate: false }),
-		view: new View({ center: fromLonLat([current.value.longitude, current.value.latitude]), zoom: 8, maxZoom: 13 }),
+		layers: [
+			buildBaseLayer(props.dark),
+			stationLayer,
+		],
+		interactions: defaultInteractions({
+			altShiftDragRotate: false,
+			pinchRotate: false,
+		}),
+		view: new View({
+			center: fromLonLat([initialLongitude, initialLatitude]),
+			zoom: initialZoom,
+			maxZoom: 13,
+		}),
 		controls: [],
-	})
+	});
 
-	aisLayer = new AISLayer(map)
-	aisLayer.show()
-	airTraffic = new AirTrafficLayer(map)
-	airTraffic.show()
-	sats = new SatsLayer(map)
-	sats.show();
-	aurora = new Aurora(map)
-	range = new RangeLayer(map)
-	range.show()
+	map.on('moveend', saveMapState);
 
-	refreshRain()
-	radarInterval = setInterval(refreshRain, 5 * 60 * 1000)
-})
+	aisLayer = new AISLayer(map);
+	airTraffic = new AirTrafficLayer(map);
+	sats = new SatsLayer(map);
+	aurora = new Aurora(map);
+	range = new RangeLayer(map);
+
+	restoreOverlayState();
+
+	radarInterval = setInterval(refreshRain, 5 * 60 * 1000);
+
+	if (loadAutoMode()) {
+		setTimeout(() => {
+			if (!autoMode.value) startAutoMode();
+		}, 1_000);
+	}
+});
 
 onUnmounted(() => {
-	clearInterval(radarInterval)
-	airTraffic.hide()
-})
+	stopAutoMode();
+	clearInterval(radarInterval);
+
+	if (map) saveMapState();
+
+	airTraffic?.hide();
+	aisLayer?.hide();
+	sats?.hide();
+	aurora?.hide();
+	range?.hide();
+});
 
 watch(() => props.dark, dark => {
-	map.getLayers().setAt(0, buildBaseLayer(dark))
-	map.removeLayer(stationLayer)
-	const lat = (current.value.latitude as number) || 0
-	const lon = (current.value.longitude as number) || 0
-	stationLayer = buildStationLayer(lat, lon, dark)
-	map.addLayer(stationLayer)
-})
+	if (!map) return;
+
+	map.getLayers().setAt(0, buildBaseLayer(dark));
+	map.removeLayer(stationLayer);
+
+	stationLayer = buildStationLayer(
+		current.value.latitude || 0,
+		current.value.longitude || 0,
+		dark,
+	);
+
+	map.addLayer(stationLayer);
+});
 </script>
 
 <style scoped lang="scss">
@@ -264,9 +735,29 @@ watch(() => props.dark, dark => {
 	z-index: 10;
 }
 
+.overlay-toggles {
+	position: absolute;
+	bottom: 16px;
+	left: 50%;
+	transform: translateX(-50%);
+	display: flex;
+	gap: 8px;
+	z-index: 100;
+	background: var(--surface);
+	border-radius: 99px;
+	padding: 6px 10px;
+	box-shadow: 0 2px 12px rgba(0,0,0,0.2);
+	backdrop-filter: blur(8px);
+}
+
+.overlay-group {
+	position: relative;
+}
+
 .overlay-btn {
 	display: flex;
 	align-items: center;
+	justify-content: center;
 	gap: 4px;
 	padding: 6px 12px;
 	border-radius: 99px;
@@ -284,24 +775,91 @@ watch(() => props.dark, dark => {
 		color: #fff;
 	}
 
-	&:hover:not(.active) { background: var(--hover); }
+	&:hover:not(.active) {
+		background: var(--hover);
+	}
 }
 
-.overlay-toggles {
+.group-btn {
+	position: relative;
+
+	&.has-active {
+		border-color: var(--accent);
+	}
+}
+
+.group-indicator {
+	font-size: 9px;
+	opacity: 0.7;
+	margin-left: 2px;
+}
+
+.overlay-submenu {
 	position: absolute;
-	bottom: 16px;
+	bottom: calc(100% + 8px);
 	left: 50%;
 	transform: translateX(-50%);
 	display: flex;
-	gap: 8px;
-	z-index: 100;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 130px;
 	background: var(--surface);
-	border-radius: 99px;
-	padding: 6px 10px;
+	border: 1px solid var(--border);
+	border-radius: 12px;
+	padding: 6px;
 	box-shadow: 0 2px 12px rgba(0,0,0,0.2);
 	backdrop-filter: blur(8px);
 }
 
+.submenu-btn {
+	width: 100%;
+	justify-content: flex-start;
+	border: none;
+	border-radius: 8px;
+	padding: 8px 10px;
+
+	&.active {
+		background: var(--accent);
+		color: #fff;
+	}
+}
+
+.auto-btn {
+	&.active {
+		background: var(--accent);
+		border-color: var(--accent);
+		color: #fff;
+	}
+}
+
+.auto-status {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+	font-size: 11px;
+	font-weight: 600;
+	white-space: nowrap;
+	padding: 0 4px;
+}
+
+.auto-dot {
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: var(--accent);
+	animation: auto-pulse 1.5s infinite;
+}
+
+@keyframes auto-pulse {
+	0%, 100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.35;
+	}
+}
+
 .layers-menu {
 	position: absolute;
 	bottom: 16px;
@@ -329,6 +887,7 @@ watch(() => props.dark, dark => {
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
+	align-items: stretch;
 	background: var(--surface);
 	border-radius: 12px;
 	padding: 8px;
@@ -336,14 +895,43 @@ watch(() => props.dark, dark => {
 	backdrop-filter: blur(8px);
 }
 
-.desktop { display: flex; }
-.mobile  { display: none; }
+.mobile-group {
+	position: relative;
+}
+
+.mobile-submenu {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin-top: 4px;
+	padding-left: 8px;
+}
+
+.mobile-submenu .overlay-btn {
+	width: 100%;
+	justify-content: flex-start;
+}
+
+.desktop {
+	display: flex;
+}
+
+.mobile {
+	display: none;
+}
 
 @media (max-width: 768px) {
-	.desktop { display: none; }
-	.mobile  { display: flex; }
-	.overlay-toggles { bottom: 10px; }
-	.layers-menu { bottom: 10px; }
+	.desktop {
+		display: none;
+	}
+
+	.mobile {
+		display: flex;
+	}
+
+	.layers-menu {
+		bottom: 10px;
+	}
 }
 </style>
 
@@ -351,22 +939,26 @@ watch(() => props.dark, dark => {
 	<div class="map-wrap">
 		<div ref="mapEl" class="map-el" />
 
-		<iframe
-			v-if="showWind"
-			class="wind-iframe"
-			:src="windSrc"
-			frameborder="0"
-			allowfullscreen
-		/>
+		<iframe v-if="showWind" class="wind-iframe" :src="windSrc" frameborder="0" allowfullscreen/>
 
 		<div class="overlay-toggles desktop">
-			<button
-				v-for="o in OVERLAYS" :key="o.id"
-				class="overlay-btn"
-				:class="{ active: activeOverlays.has(o.id) }"
-				@click="toggleOverlay(o.id)"
-			>
-				{{ o.icon }} {{ o.label }}
+			<div v-for="group in OVERLAY_GROUPS" :key="group.id" class="overlay-group">
+				<button class="overlay-btn group-btn" :class="{'has-active': group.items.some(item =>activeOverlays.has(item.id),),}" @click="toggleMenu(group.id)">
+					{{ group.icon }} {{ group.label }}
+					<span class="group-indicator">
+                    {{ openMenu === group.id ? '▲' : '▼' }}
+                </span>
+				</button>
+
+				<div v-if="openMenu === group.id" class="overlay-submenu">
+					<button v-for="item in group.items" :key="item.id" class="overlay-btn submenu-btn" :class="{active: activeOverlays.has(item.id)}" @click="toggleOverlay(item.id)">
+						{{ item.icon }} {{ item.label }}
+					</button>
+				</div>
+			</div>
+
+			<button class="overlay-btn auto-btn" :class="{active: autoMode}" @click="toggleAutoMode">
+				{{ autoMode ? '⏹' : '▶' }} Auto
 			</button>
 		</div>
 
@@ -374,14 +966,25 @@ watch(() => props.dark, dark => {
 			<button class="layers-btn" @click="showOverlays = !showOverlays">
 				⚙️ Layers
 			</button>
+
 			<div v-if="showOverlays" class="layers-dropdown">
-				<button
-					v-for="o in OVERLAYS" :key="o.id"
-					class="overlay-btn"
-					:class="{ active: activeOverlays.has(o.id) }"
-					@click="toggleOverlay(o.id)"
-				>
-					{{ o.icon }} {{ o.label }}
+				<div v-for="group in OVERLAY_GROUPS" :key="group.id" class="mobile-group">
+					<button class="overlay-btn" :class="{active: group.items.some(item =>activeOverlays.has(item.id),),}" @click="toggleMenu(group.id)">
+						{{ group.icon }} {{ group.label }}
+						<span class="group-indicator">
+                       {{ openMenu === group.id ? '▲' : '▼' }}
+                   </span>
+					</button>
+
+					<div v-if="openMenu === group.id" class="mobile-submenu">
+						<button v-for="item in group.items" :key="item.id" class="overlay-btn" :class="{active: activeOverlays.has(item.id)}" @click="toggleOverlay(item.id)">
+							{{ item.icon }} {{ item.label }}
+						</button>
+					</div>
+				</div>
+
+				<button class="overlay-btn auto-btn" :class="{active: autoMode}" @click="toggleAutoMode">
+					{{ autoMode ? '⏹ Stop Auto' : '▶ Auto Mode' }}
 				</button>
 			</div>
 		</div>
diff --git a/client/src/services/adsb.ts b/client/src/services/adsb.ts
index fa39e70..b16e9f0 100644
--- a/client/src/services/adsb.ts
+++ b/client/src/services/adsb.ts
@@ -1,213 +1,346 @@
-import { BASE } from '@/services/api.ts'
-import { h, render as vueRender } from 'vue'
-import Map from 'ol/Map'
-import { Feature } from 'ol'
-import Point from 'ol/geom/Point'
-import LineString from 'ol/geom/LineString'
-import { fromLonLat } from 'ol/proj'
-import { Style, Icon, Stroke } from 'ol/style'
-import { Vector as VectorLayer } from 'ol/layer'
-import { Vector as VectorSource } from 'ol/source'
-import { adjustedInterval } from '@ztimson/utils'
-import AircraftPopup from '@/components/Aircraft.vue'
-import { bringToFront } from './zindex'
+import {BASE} from '@/services/api.ts';
+import {h, render as vueRender} from 'vue';
+import Map from 'ol/Map';
+import {Feature} from 'ol';
+import Point from 'ol/geom/Point';
+import LineString from 'ol/geom/LineString';
+import {fromLonLat} from 'ol/proj';
+import {Style, Icon, Stroke} from 'ol/style';
+import {Vector as VectorLayer} from 'ol/layer';
+import {Vector as VectorSource} from 'ol/source';
+import {adjustedInterval} from '@ztimson/utils';
+import AircraftPopup from '@/components/Aircraft.vue';
+import {bringToFront} from './zindex';
 
-const API = BASE + '/api'
+const API = BASE + '/api';
+const EARTH_R = 6371;
+const AUTO_RANGE = 92.6;
+
+function greatCircleDist(lat1: number, lon1: number, lat2: number, lon2: number): number {
+	const toRad = (d: number) => d * Math.PI / 180;
+	const dLat = toRad(lat2 - lat1), dLon = toRad(lon2 - lon1);
+	const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2;
+	return EARTH_R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+}
+
+function isPriorityAircraft(plane: any): boolean {
+	if (plane.military === true || plane.is_military === true || plane.sar === true || plane.is_sar === true) return true;
+
+	const text = [
+		plane.type,
+		plane.category,
+		plane.aircraft_type,
+		plane.operator,
+		plane.owner,
+		plane.flight,
+		plane.callsign,
+		plane.description,
+	].filter(Boolean).join(' ').toLowerCase();
+
+	return /\b(military|mil|sar|search and rescue|rescue|coast guard|navy|army|air force|airforce|usaf|rcaf)\b/.test(text);
+}
 
 function getAltColor(alt: number): [number, number, number] {
-	const a = Math.max(0, alt)
-	if (a < 10)    return [0, 0, 0]
-	if (a < 10000) return [135, 206, 250]
+	const a = Math.max(0, alt);
+	if (a < 10) return [0, 0, 0];
+	if (a < 10000) return [135, 206, 250];
+
 	if (a < 25000) {
-		const r = (a - 10000) / 15000
-		return [Math.round(135 * (1-r)), Math.round(206 * (1-r)), Math.round(250 * (1-r) + 255 * r)]
+		const r = (a - 10000) / 15000;
+		return [Math.round(135 * (1 - r)), Math.round(206 * (1 - r)), Math.round(250 * (1 - r) + 255 * r)];
 	}
+
 	if (a < 40000) {
-		const r = (a - 25000) / 15000
-		return [0, 0, Math.round(255 * (1-r) + 139 * r)]
+		const r = (a - 25000) / 15000;
+		return [0, 0, Math.round(255 * (1 - r) + 139 * r)];
 	}
-	const r = Math.min((a - 40000) / 10000, 1)
-	return [Math.round(128 * r), 0, 139]
+
+	const r = Math.min((a - 40000) / 10000, 1);
+	return [Math.round(128 * r), 0, 139];
 }
 
 export class AirTrafficLayer {
-	private map:          Map
-	private layer!:       VectorLayer<VectorSource>
-	private traceLayers:  Record<string, VectorLayer<VectorSource>> = {}
-	private traceSegs:    Record<string, Feature[]>                 = {}
-	private popups: any            = {}
-	private historyCache: any                     = {}
-	private data:         any[]                                     = []
-	private clickHandler: ((e: any) => void) | null                 = null
-	private refreshTimer: any                                       = null
-	visible = false
+	private map: Map;
+	private layer!: VectorLayer<VectorSource>;
+	private traceLayers: Record<string, VectorLayer<VectorSource>> = {};
+	private traceSegs: Record<string, Feature[]> = {};
+	private popups: any = {};
+	private historyCache: any = {};
+	private data: any[] = [];
+	private clickHandler: ((e: any) => void) | null = null;
+	private refreshTimer: any = null;
+	visible = false;
 
-	constructor(map: Map) { this.map = map }
+	constructor(map: Map) {
+		this.map = map;
+	}
 
 	async show() {
-		if (this.visible) return
-		this.visible = true
-		this.layer = new VectorLayer({ source: new VectorSource(), zIndex: 100 })
-		this.map.addLayer(this.layer)
-		await this._fetch()
-		this._draw()
-		this._attachClick()
+		if (this.visible) return;
+
+		this.visible = true;
+		this.layer = new VectorLayer({source: new VectorSource(), zIndex: 100});
+		this.map.addLayer(this.layer);
+
+		await this._fetch();
+		this._draw();
+		this._attachClick();
+
 		this.refreshTimer = adjustedInterval(async () => {
 			try {
-				await this._fetch()
-				this._draw()
-				this._refreshPopups()
+				await this._fetch();
+				this._draw();
+				this._refreshPopups();
 			} catch (err) {
-				console.error(err)
+				console.error(err);
 			}
-		}, 1_000)
+		}, 1_000);
 	}
 
 	hide() {
-		if (!this.visible) return
-		this.visible = false
-		if (this.refreshTimer) { clearInterval(this.refreshTimer); this.refreshTimer = null }
-		if (this.clickHandler) { this.map.un('singleclick', this.clickHandler); this.clickHandler = null }
-		for (const icao of Object.keys(this.popups)) this._closePopup(icao)
-		this.map.removeLayer(this.layer)
-		Object.values(this.traceLayers).forEach(l => this.map.removeLayer(l))
-		this.traceLayers = {}
-		this.traceSegs   = {}
+		if (!this.visible) return;
+
+		this.visible = false;
+
+		if (this.refreshTimer) {
+			clearInterval(this.refreshTimer);
+			this.refreshTimer = null;
+		}
+
+		if (this.clickHandler) {
+			this.map.un('singleclick', this.clickHandler);
+			this.clickHandler = null;
+		}
+
+		for (const icao of Object.keys(this.popups)) this._closePopup(icao);
+		if (this.layer) this.map.removeLayer(this.layer);
+		Object.values(this.traceLayers).forEach(l => this.map.removeLayer(l));
+
+		this.traceLayers = {};
+		this.traceSegs = {};
+	}
+
+	getClosest(latitude: number, longitude: number): any | null {
+		let closest: any = null;
+		let closestDistance = Infinity;
+
+		for (const plane of this.data) {
+			if (plane.latitude == null || plane.longitude == null) continue;
+
+			const distance = greatCircleDist(latitude, longitude, plane.latitude, plane.longitude);
+			if (distance < closestDistance) {
+				closestDistance = distance;
+				closest = plane;
+			}
+		}
+
+		return closest;
+	}
+
+	getAutoCandidates(latitude: number, longitude: number, limit = Infinity): any[] {
+		return this.data.filter(plane => {
+			if (plane.latitude == null || plane.longitude == null) return false;
+			return greatCircleDist(latitude, longitude, plane.latitude, plane.longitude) <= AUTO_RANGE;
+		}).sort((a, b) => {
+			const priority = Number(isPriorityAircraft(b)) - Number(isPriorityAircraft(a));
+			if (priority) return priority;
+
+			return greatCircleDist(latitude, longitude, a.latitude, a.longitude) - greatCircleDist(latitude, longitude, b.latitude, b.longitude);
+		}).slice(0, limit);
+	}
+
+	isPriority(plane: any): boolean {
+		return isPriorityAircraft(plane);
+	}
+
+	getAutoDistance(latitude: number, longitude: number, plane: any): number {
+		return greatCircleDist(latitude, longitude, plane.latitude, plane.longitude);
+	}
+
+	getById(icao: string): any | null {
+		return this.data.find(p => String(p.icao) === String(icao)) ?? null;
+	}
+
+	openAutoPopup(plane: any) {
+		this._openPopup(plane);
+	}
+
+	closeAutoPopup(icao: string) {
+		this._closePopup(String(icao));
 	}
 
 	private async _fetch() {
 		const j = await fetch(`${API}/adsb`).then(r => r.ok ? r.json() : []);
 		this.data = (j || []).map((a: any) => ({
 			...a,
-			icao:      a.hex,
-			latitude:  a.lat,
+			icao: a.hex,
+			latitude: a.lat,
 			longitude: a.lon,
-			heading:   a.track,
-			speed:     a.gs,
-			climb:     a.baro_rate ?? a.geom_rate ?? 0,
-			name:      a.flight?.trim(),
-		}))
+			heading: a.track,
+			speed: a.gs,
+			climb: a.baro_rate ?? a.geom_rate ?? 0,
+			name: a.flight?.trim(),
+		}));
 	}
 
 	private _draw() {
-		const source = this.layer.getSource()!
-		source.clear()
+		const source = this.layer.getSource()!;
+		source.clear();
+
 		for (const plane of this.data) {
-			if (plane.latitude == null) continue
-			const coord = fromLonLat([plane.longitude, plane.latitude])
-			const f = new Feature({ geometry: new Point(coord) })
-			f.set('icao',      plane.icao)
-			f.set('planeData', plane)
+			if (plane.latitude == null || plane.longitude == null) continue;
+
+			const coord = fromLonLat([plane.longitude, plane.latitude]);
+			const f = new Feature({geometry: new Point(coord)});
+
+			f.set('icao', plane.icao);
+			f.set('planeData', plane);
 			f.setStyle(new Style({
 				image: new Icon({
-					src:      `data:image/svg+xml,${encodeURIComponent(plane.icon)}`,
-					scale:    1.25,
+					src: `data:image/svg+xml,${encodeURIComponent(plane.icon)}`,
+					scale: 1.25,
 					rotation: (plane.heading ?? 0) * (Math.PI / 180),
-					anchor:   [0.5, 0.5],
+					anchor: [0.5, 0.5],
 				}),
-			}))
-			source.addFeature(f)
+			}));
+
+			source.addFeature(f);
 		}
 	}
 
 	private async _fetchTrace(plane: any) {
-		const icao = plane.icao
-		if (!this.historyCache[icao]) {
-			const j = await fetch(`${API}/adsb/${icao}`).then(r => r.json())
-			this.historyCache[icao] = j.history || []
-		}
-		const history = this.historyCache[icao]
-		const cur      = { latitude: plane.latitude, longitude: plane.longitude, altitude: plane.alt_baro ?? plane.alt_geom ?? 0 }
-		const last     = history[history.length - 1]
-		if (!last || last.latitude !== cur.latitude || last.longitude !== cur.longitude) history.push(cur)
-		if (history.length < 2) return
+		const icao = plane.icao;
 
-		let traceLayer = this.traceLayers[icao]
-		let vs: VectorSource
+		if (!this.historyCache[icao]) {
+			const j = await fetch(`${API}/adsb/${icao}`).then(r => r.json());
+			this.historyCache[icao] = j.history || [];
+		}
+
+		const history = this.historyCache[icao];
+		const cur = {
+			latitude: plane.latitude,
+			longitude: plane.longitude,
+			altitude: plane.alt_baro ?? plane.alt_geom ?? 0,
+		};
+
+		const last = history[history.length - 1];
+		if (!last || last.latitude !== cur.latitude || last.longitude !== cur.longitude) history.push(cur);
+		if (history.length < 2) return;
+
+		let traceLayer = this.traceLayers[icao];
+		let vs: VectorSource;
 
 		if (!traceLayer) {
-			vs         = new VectorSource()
-			traceLayer = new VectorLayer({ source: vs, zIndex: 99 })
-			this.map.addLayer(traceLayer)
-			this.traceLayers[icao] = traceLayer
-			this.traceSegs[icao]   = []
+			vs = new VectorSource();
+			traceLayer = new VectorLayer({source: vs, zIndex: 99});
+			this.map.addLayer(traceLayer);
+			this.traceLayers[icao] = traceLayer;
+			this.traceSegs[icao] = [];
 		} else {
-			vs = traceLayer.getSource()!
+			vs = traceLayer.getSource()!;
 		}
 
-		// Only draw segments that haven't been drawn yet
-		const segs  = <any>this.traceSegs[icao]
-		const start = segs.length
-		for (let i = start; i < history.length - 1; i++) {
-			const s   = history[i], e = history[i + 1]
-			const sc  = getAltColor(s.altitude || 0)
-			const ec  = getAltColor(e.altitude || 0)
-			const avg = sc.map((v, idx) => Math.round((v + (ec[idx] as any)) / 2))
-			const f   = new Feature(new LineString([fromLonLat([s.longitude, s.latitude]), fromLonLat([e.longitude, e.latitude])]))
-			f.setStyle(new Style({ stroke: new Stroke({ color: `rgba(${avg.join(',')},0.8)`, width: 3 }) }))
-			vs.addFeature(f)
-			segs.push(f)
-		}
-	}
+		const segs: any = this.traceSegs[icao];
 
-	private _calcPopupPos(plane: any): { x: number; y: number } {
-		const pixel: any = this.map.getPixelFromCoordinate(fromLonLat([plane.longitude, plane.latitude]))
-		if (!pixel) return { x: 10, y: 60 }
-		const rect = (this.map.getTargetElement() as HTMLElement).getBoundingClientRect()
-		return { x: rect.left + pixel[0] + 16, y: rect.top + pixel[1] - 16 }
+		for (let i = segs.length; i < history.length - 1; i++) {
+			const s = history[i], e = history[i + 1];
+			const sc = getAltColor(s.altitude || 0), ec: any = getAltColor(e.altitude || 0);
+			const avg = sc.map((v, idx) => Math.round((v + ec[idx]) / 2));
+
+			const f = new Feature(new LineString([
+				fromLonLat([s.longitude, s.latitude]),
+				fromLonLat([e.longitude, e.latitude]),
+			]));
+
+			f.setStyle(new Style({
+				stroke: new Stroke({
+					color: `rgba(${avg.join(',')},0.8)`,
+					width: 3,
+				}),
+			}));
+
+			vs.addFeature(f);
+			segs.push(f);
+		}
 	}
 
 	private _openPopup(plane: any) {
-		const icao = plane.icao
-		if (this.popups[icao]) return
+		const icao = String(plane.icao);
+		if (this.popups[icao]) return;
 
-		const container = document.createElement('div')
-		document.body.appendChild(container)
-		const mobile = window.innerWidth <= 768
+		const container = document.createElement('div');
+		document.body.appendChild(container);
 
+		const mobile = window.innerWidth <= 768;
 		const makeProps = (p: any) => ({
-			plane:          p,
-			position:       mobile ? { x: window.innerWidth / 2 - 180, y: window.innerHeight - 540 - 16 } : { x: 16, y: 16 },
-			onClose:        () => this._closePopup(icao),
+			plane: p,
+			position: mobile
+				? {x: window.innerWidth / 2 - 180, y: window.innerHeight - 540 - 16}
+				: {x: 16, y: 16},
+			onClose: () => this._closePopup(icao),
 			onBringToFront: () => bringToFront(container),
-		})
+		});
 
-		vueRender(h(AircraftPopup, makeProps(plane)), container)
+		vueRender(h(AircraftPopup, makeProps(plane)), container);
 
 		this.popups[icao] = {
-			update:  (p: any) => vueRender(h(AircraftPopup, makeProps(p)), container),
-			unmount: () => { vueRender(null, container); container.remove() },
-		}
-		this._fetchTrace(plane)
+			update: (p: any) => vueRender(h(AircraftPopup, makeProps(p)), container),
+			unmount: () => {
+				vueRender(null, container);
+				container.remove();
+			},
+		};
+
+		this._fetchTrace(plane);
 	}
 
 	private _closePopup(icao: string) {
-		const popup = this.popups[icao]
-		if (popup) { popup.unmount(); delete this.popups[icao] }
-		const segs  = this.traceSegs[icao]
-		const layer = this.traceLayers[icao]
-		if (segs && layer) segs.forEach(f => layer.getSource()!.removeFeature(f))
-		if (layer) { this.map.removeLayer(layer); delete this.traceLayers[icao] }
-		delete this.traceSegs[icao]
+		const popup = this.popups[icao];
+
+		if (popup) {
+			popup.unmount();
+			delete this.popups[icao];
+		}
+
+		const segs = this.traceSegs[icao], layer = this.traceLayers[icao];
+		if (segs && layer) segs.forEach(f => layer.getSource()!.removeFeature(f));
+
+		if (layer) {
+			this.map.removeLayer(layer);
+			delete this.traceLayers[icao];
+		}
+
+		delete this.traceSegs[icao];
 	}
 
 	private _refreshPopups() {
 		for (const icao of Object.keys(this.popups)) {
-			const plane = this.data.find(p => p.icao === icao)
-			if (!plane) { this._closePopup(icao); continue }
-			this.popups[icao].update(plane)
-			this._fetchTrace(plane)
+			const plane = this.data.find(p => p.icao === icao);
+
+			if (!plane) {
+				this._closePopup(icao);
+				continue;
+			}
+
+			this.popups[icao].update(plane);
+			this._fetchTrace(plane);
 		}
 	}
 
 	private _attachClick() {
-		this.clickHandler = (evt) => {
-			const f = this.map.forEachFeatureAtPixel(evt.pixel, f => f.get('planeData') ? f : null)
-			if (!f) return
-			const plane = f.get('planeData')
-			if (this.popups[plane.icao]) { this._closePopup(plane.icao); return }
-			this._openPopup(plane)
-		}
-		this.map.on('singleclick', this.clickHandler)
+		this.clickHandler = evt => {
+			const f = this.map.forEachFeatureAtPixel(evt.pixel, f => f.get('planeData') ? f : null);
+			if (!f) return;
+
+			const plane = f.get('planeData');
+			if (this.popups[plane.icao]) {
+				this._closePopup(plane.icao);
+				return;
+			}
+
+			this._openPopup(plane);
+		};
+
+		this.map.on('singleclick', this.clickHandler);
 	}
 }
diff --git a/client/src/services/ais.ts b/client/src/services/ais.ts
index 2d9d842..1487420 100644
--- a/client/src/services/ais.ts
+++ b/client/src/services/ais.ts
@@ -1,31 +1,59 @@
-import { BASE } from '@/services/api.ts'
-import { h, render as vueRender } from 'vue'
-import Map from 'ol/Map'
-import { Feature } from 'ol'
-import Point from 'ol/geom/Point'
-import { fromLonLat } from 'ol/proj'
-import { Style, Icon } from 'ol/style'
-import { Vector as VectorLayer } from 'ol/layer'
-import { Vector as VectorSource } from 'ol/source'
-import { adjustedInterval } from '@ztimson/utils'
-import ShipPopup from '@/components/Ship.vue'
-import { bringToFront } from './zindex'
+import {BASE} from '@/services/api.ts';
+import {h, render as vueRender} from 'vue';
+import Map from 'ol/Map';
+import {Feature} from 'ol';
+import Point from 'ol/geom/Point';
+import {fromLonLat} from 'ol/proj';
+import {Style, Icon} from 'ol/style';
+import {Vector as VectorLayer} from 'ol/layer';
+import {Vector as VectorSource} from 'ol/source';
+import {adjustedInterval} from '@ztimson/utils';
+import ShipPopup from '@/components/Ship.vue';
+import {bringToFront} from './zindex';
 
-const API = BASE + '/api'
+const API = BASE + '/api';
+const EARTH_R = 6371;
+const AUTO_RANGE = 100;
 
 const SHIP_COLORS: Record<string, string> = {
-	'Base Station':   '#ffffff',
-	'Class A':        '#00ff00',
-	'Class B':        '#8450ea',
-	'SAR Aircraft':   '#ff0000',
-	'AtoN':           '#ffffff',
-	'Class B/CS':     '#8450ea',
+	'Base Station': '#ffffff',
+	'Class A': '#00ff00',
+	'Class B': '#8450ea',
+	'SAR Aircraft': '#ff0000',
+	'AtoN': '#ffffff',
+	'Class B/CS': '#8450ea',
 	'Sart/Epirb/MOB': '#00aaff',
-	'Unknown':        '#fad106',
+	'Unknown': '#fad106',
+};
+
+function greatCircleDist(lat1: number, lon1: number, lat2: number, lon2: number): number {
+	const toRad = (d: number) => d * Math.PI / 180;
+	const dLat = toRad(lat2 - lat1), dLon = toRad(lon2 - lon1);
+	const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2;
+	return EARTH_R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+}
+
+function isPriorityBoat(boat: any): boolean {
+	if (boat.military === true || boat.is_military === true || boat.sar === true || boat.is_sar === true) return true;
+
+	const text = [
+		boat.type,
+		boat.vesselType,
+		boat.category,
+		boat.name,
+		boat.shipname,
+		boat.operator,
+		boat.owner,
+		boat.callsign,
+		boat.description,
+	].filter(Boolean).join(' ').toLowerCase();
+
+	return /\b(military|mil|sar|search and rescue|rescue|coast guard|navy|army|air force|airforce|rcaf)\b/.test(text);
 }
 
 function buildBoatIcon(boat: any): string {
-	const color = SHIP_COLORS[boat.type] || SHIP_COLORS['Unknown']
+	const color = SHIP_COLORS[boat.type] || SHIP_COLORS['Unknown'];
+
 	if (['Base Station', 'AtoN'].includes(boat.type)) {
 		return `data:image/svg+xml,${encodeURIComponent(`
             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -35,8 +63,9 @@ function buildBoatIcon(boat: any): string {
                 <line x1="11" y1="12" x2="21" y2="12" stroke="#000" stroke-width="1.8"/>
                 <path d="M9,18 Q16,26 23,18" fill="none" stroke="#000" stroke-width="1.5"/>
             </svg>
-        `)}`
+        `)}`;
 	}
+
 	return `data:image/svg+xml,${encodeURIComponent(`
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32">
             <polygon points="12,0 24,30 12,24 0,30" fill="${color}" stroke="#000" stroke-width="1.5"/>
@@ -45,125 +74,207 @@ function buildBoatIcon(boat: any): string {
             <line x1="8" y1="14" x2="16" y2="14" stroke="#000" stroke-width="1.5"/>
             <path d="M7,17 Q12,24 17,17" fill="none" stroke="#000" stroke-width="1.3"/>
         </svg>
-    `)}`
+    `)}`;
 }
 
 export class AISLayer {
-	private map:          Map
-	private layer!:       VectorLayer<VectorSource>
-	private popups:       any                       = {}
-	private data:         any[]                     = []
-	private clickHandler: ((e: any) => void) | null = null
-	private refreshTimer: any                       = null
-	visible = false
+	private map: Map;
+	private layer!: VectorLayer<VectorSource>;
+	private popups: any = {};
+	private data: any[] = [];
+	private clickHandler: ((e: any) => void) | null = null;
+	private refreshTimer: any = null;
+	visible = false;
 
-	constructor(map: Map) { this.map = map }
+	constructor(map: Map) {
+		this.map = map;
+	}
 
 	async show() {
-		if (this.visible) return
-		this.visible = true
-		this.layer   = new VectorLayer({ source: new VectorSource(), zIndex: 100 })
-		this.map.addLayer(this.layer)
-		await this._fetch()
-		this._draw()
-		this._attachClick()
+		if (this.visible) return;
+
+		this.visible = true;
+		this.layer = new VectorLayer({source: new VectorSource(), zIndex: 100});
+		this.map.addLayer(this.layer);
+
+		await this._fetch();
+		this._draw();
+		this._attachClick();
+
 		this.refreshTimer = adjustedInterval(async () => {
 			try {
-				await this._fetch()
-				this._draw()
-				this._refreshPopups()
+				await this._fetch();
+				this._draw();
+				this._refreshPopups();
 			} catch (err) {
 				console.error(err);
 			}
-		}, 5_000)
+		}, 5_000);
 	}
 
 	hide() {
-		if (!this.visible) return
-		this.visible = false
-		if (this.refreshTimer) { clearInterval(this.refreshTimer); this.refreshTimer = null }
-		if (this.clickHandler) { this.map.un('singleclick', this.clickHandler); this.clickHandler = null }
-		for (const mmsi of Object.keys(this.popups)) this._closePopup(mmsi)
-		this.map.removeLayer(this.layer)
+		if (!this.visible) return;
+
+		this.visible = false;
+
+		if (this.refreshTimer) {
+			clearInterval(this.refreshTimer);
+			this.refreshTimer = null;
+		}
+
+		if (this.clickHandler) {
+			this.map.un('singleclick', this.clickHandler);
+			this.clickHandler = null;
+		}
+
+		for (const mmsi of Object.keys(this.popups)) this._closePopup(mmsi);
+		if (this.layer) this.map.removeLayer(this.layer);
+	}
+
+	getClosest(latitude: number, longitude: number): any | null {
+		let closest: any = null;
+		let closestDistance = Infinity;
+
+		for (const boat of this.data) {
+			if (boat.lat == null || boat.lon == null) continue;
+
+			const distance = greatCircleDist(latitude, longitude, boat.lat, boat.lon);
+			if (distance < closestDistance) {
+				closestDistance = distance;
+				closest = boat;
+			}
+		}
+
+		return closest;
+	}
+
+	getAutoCandidates(latitude: number, longitude: number, limit = Infinity): any[] {
+		return this.data.filter(boat => {
+			if (boat.lat == null || boat.lon == null) return false;
+			return greatCircleDist(latitude, longitude, boat.lat, boat.lon) <= AUTO_RANGE;
+		}).sort((a, b) => {
+			const priority = Number(isPriorityBoat(b)) - Number(isPriorityBoat(a));
+			if (priority) return priority;
+
+			return greatCircleDist(latitude, longitude, a.lat, a.lon) - greatCircleDist(latitude, longitude, b.lat, b.lon);
+		}).slice(0, limit);
+	}
+
+	isPriority(boat: any): boolean {
+		return isPriorityBoat(boat);
+	}
+
+	getAutoDistance(latitude: number, longitude: number, boat: any): number {
+		return greatCircleDist(latitude, longitude, boat.lat, boat.lon);
+	}
+
+	getById(mmsi: string): any | null {
+		return this.data.find(b => String(b.mmsi) === String(mmsi)) ?? null;
+	}
+
+	openAutoPopup(boat: any) {
+		this._openPopup(boat);
+	}
+
+	closeAutoPopup(mmsi: string) {
+		this._closePopup(String(mmsi));
 	}
 
 	private async _fetch() {
-		this.data = await fetch(`${API}/ais`).then(r => r.json()) || []
+		this.data = await fetch(`${API}/ais`).then(r => r.json()) || [];
 	}
 
 	private _draw() {
-		const source = this.layer.getSource()!
-		source.clear()
+		const source = this.layer.getSource()!;
+		source.clear();
+
 		for (const boat of this.data) {
-			if (boat.lat == null || boat.lon == null) continue
-			const coord = fromLonLat([boat.lon, boat.lat])
-			const f     = new Feature({ geometry: new Point(coord) })
-			f.set('mmsi',     boat.mmsi)
-			f.set('boatData', boat)
+			if (boat.lat == null || boat.lon == null) continue;
+
+			const coord = fromLonLat([boat.lon, boat.lat]);
+			const f = new Feature({geometry: new Point(coord)});
+
+			f.set('mmsi', boat.mmsi);
+			f.set('boatData', boat);
 			f.setStyle(new Style({
 				image: new Icon({
-					src:      buildBoatIcon(boat),
-					scale:    0.8,
+					src: buildBoatIcon(boat),
+					scale: 0.8,
 					rotation: (boat.heading ?? boat.bearing ?? boat.cog ?? boat.course ?? 0) * (Math.PI / 180),
-					anchor:   [0.5, 0.5],
+					anchor: [0.5, 0.5],
 				}),
-			}))
-			source.addFeature(f)
-		}
-	}
+			}));
 
-	private _calcPopupPos(boat: any): { x: number; y: number } {
-		const pixel: any = this.map.getPixelFromCoordinate(fromLonLat([boat.lon, boat.lat]))
-		if (!pixel) return { x: 10, y: 60 }
-		const rect = (this.map.getTargetElement() as HTMLElement).getBoundingClientRect()
-		return { x: rect.left + pixel[0] + 16, y: rect.top + pixel[1] - 16 }
+			source.addFeature(f);
+		}
 	}
 
 	private _openPopup(boat: any) {
-		const mmsi = String(boat.mmsi)
-		if (this.popups[mmsi]) return
+		const mmsi = String(boat.mmsi);
+		if (this.popups[mmsi]) return;
 
-		const container = document.createElement('div')
-		document.body.appendChild(container)
-		const mobile = window.innerWidth <= 768
+		const container = document.createElement('div');
+		document.body.appendChild(container);
 
+		const mobile = window.innerWidth <= 768;
 		const makeProps = (b: any) => ({
-			boat:           b,
-			position:       mobile ? { x: window.innerWidth / 2 - 180, y: window.innerHeight - 540 - 16 } : { x: 16, y: 16 },
-			onClose:        () => this._closePopup(mmsi),
+			boat: b,
+			position: mobile
+				? {x: window.innerWidth / 2 - 180, y: window.innerHeight - 540 - 16}
+				: {x: 16, y: 16},
+			onClose: () => this._closePopup(mmsi),
 			onBringToFront: () => bringToFront(container),
-		})
+		});
 
-		vueRender(h(ShipPopup, makeProps(boat)), container)
+		vueRender(h(ShipPopup, makeProps(boat)), container);
 
 		this.popups[mmsi] = {
-			update:  (b: any) => vueRender(h(ShipPopup, makeProps(b)), container),
-			unmount: () => { vueRender(null, container); container.remove() },
-		}
+			update: (b: any) => vueRender(h(ShipPopup, makeProps(b)), container),
+			unmount: () => {
+				vueRender(null, container);
+				container.remove();
+			},
+		};
 	}
 
 	private _closePopup(mmsi: string) {
-		const popup = this.popups[mmsi]
-		if (popup) { popup.unmount(); delete this.popups[mmsi] }
+		const popup = this.popups[mmsi];
+
+		if (popup) {
+			popup.unmount();
+			delete this.popups[mmsi];
+		}
 	}
 
 	private _refreshPopups() {
 		for (const mmsi of Object.keys(this.popups)) {
-			const boat = this.data.find(b => String(b.mmsi) === mmsi)
-			if (!boat) { this._closePopup(mmsi); continue }
-			this.popups[mmsi].update(boat)
+			const boat = this.data.find(b => String(b.mmsi) === mmsi);
+
+			if (!boat) {
+				this._closePopup(mmsi);
+				continue;
+			}
+
+			this.popups[mmsi].update(boat);
 		}
 	}
 
 	private _attachClick() {
-		this.clickHandler = (evt) => {
-			const f = this.map.forEachFeatureAtPixel(evt.pixel, f => f.get('boatData') ? f : null)
-			if (!f) return
-			const boat = f.get('boatData')
-			const mmsi = String(boat.mmsi)
-			if (this.popups[mmsi]) { this._closePopup(mmsi); return }
-			this._openPopup(boat)
-		}
-		this.map.on('singleclick', this.clickHandler)
+		this.clickHandler = evt => {
+			const f = this.map.forEachFeatureAtPixel(evt.pixel, f => f.get('boatData') ? f : null);
+			if (!f) return;
+
+			const boat = f.get('boatData');
+			const mmsi = String(boat.mmsi);
+
+			if (this.popups[mmsi]) {
+				this._closePopup(mmsi);
+				return;
+			}
+
+			this._openPopup(boat);
+		};
+
+		this.map.on('singleclick', this.clickHandler);
 	}
 }
diff --git a/client/src/services/sats.ts b/client/src/services/sats.ts
index 312993b..333bc33 100644
--- a/client/src/services/sats.ts
+++ b/client/src/services/sats.ts
@@ -1,238 +1,380 @@
 import {api, BASE} from '@/services/api.ts';
-import { h, render as vueRender } from 'vue'
-import Map from 'ol/Map'
-import { Feature } from 'ol'
-import { LineString, Point, Circle as CircleGeom } from 'ol/geom'
-import { fromLonLat } from 'ol/proj'
-import { Style, Stroke, Icon, Fill } from 'ol/style'
-import { Vector as VectorLayer } from 'ol/layer'
-import { Vector as VectorSource } from 'ol/source'
-import { adjustedInterval } from '@ztimson/utils'
-import TinyGSPopup from '@/components/Satellite.vue'
-import { bringToFront } from './zindex'
+import {h, render as vueRender} from 'vue';
+import Map from 'ol/Map';
+import {Feature} from 'ol';
+import {LineString, Point, Circle as CircleGeom} from 'ol/geom';
+import {fromLonLat} from 'ol/proj';
+import {Style, Stroke, Icon, Fill} from 'ol/style';
+import {Vector as VectorLayer} from 'ol/layer';
+import {Vector as VectorSource} from 'ol/source';
+import {adjustedInterval} from '@ztimson/utils';
+import TinyGSPopup from '@/components/Satellite.vue';
+import {bringToFront} from './zindex';
 
-const API = BASE + '/api'
-const EARTH_R = 6371 // km
+const API = BASE + '/api';
+const EARTH_R = 6371;
+const AUTO_ELEVATION = 70;
 
 interface TinyGSReading {
-	timestamp: number
-	freqMHz: number
-	satellite: string
-	latitude: number
-	longitude: number
-	az: number
-	el: number
-	packetRssi: number
-	packetSnr: number
-	freqError: number
-	crcOk: boolean
+	timestamp: number;
+	freqMHz: number;
+	satellite: string;
+	latitude: number;
+	longitude: number;
+	az: number;
+	el: number;
+	packetRssi: number;
+	packetSnr: number;
+	freqError: number;
+	crcOk: boolean;
 }
 
 interface TinyGSSatellite extends TinyGSReading {
-	history: TinyGSReading[]
+	history: TinyGSReading[];
 }
 
 interface RangeEstimate {
-	altitude:      number // km, derived from az/el geometry
-	slantRange:    number // km, straight-line distance to satellite
-	horizonRadius: number // km, max ground radius satellite is visible from at this altitude
-	groundDist:    number // km, great-circle distance to subpoint
+	altitude: number;
+	slantRange: number;
+	horizonRadius: number;
+	groundDist: number;
 }
 
 function greatCircleDist(lat1: number, lon1: number, lat2: number, lon2: number): number {
-	const toRad = (d: number) => d * Math.PI / 180
-	const dLat  = toRad(lat2 - lat1), dLon = toRad(lon2 - lon1)
-	const a     = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2
-	return EARTH_R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+	const toRad = (d: number) => d * Math.PI / 180;
+	const dLat = toRad(lat2 - lat1), dLon = toRad(lon2 - lon1);
+	const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2;
+	return EARTH_R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
 }
 
-/** Derives altitude/slant range from ground station + satellite subpoint + observed elevation (no TLE required). */
 function estimateRange(gsLat: number, gsLon: number, satLat: number, satLon: number, elDeg: number): RangeEstimate | null {
-	const d     = greatCircleDist(gsLat, gsLon, satLat, satLon)
-	const gamma = d / EARTH_R
-	const el    = elDeg * Math.PI / 180
-	const k     = Math.cos(gamma) - Math.tan(el) * Math.sin(gamma)
-	if (k <= 0) return null // inconsistent geometry (noisy reading)
+	const d = greatCircleDist(gsLat, gsLon, satLat, satLon);
+	const gamma = d / EARTH_R;
+	const el = elDeg * Math.PI / 180;
+	const k = Math.cos(gamma) - Math.tan(el) * Math.sin(gamma);
 
-	const altitude      = EARTH_R * (1 - k) / k
-	const slantRange    = Math.sqrt(EARTH_R ** 2 + (EARTH_R + altitude) ** 2 - 2 * EARTH_R * (EARTH_R + altitude) * Math.cos(gamma))
-	const horizonRadius = Math.sqrt(2 * EARTH_R * altitude + altitude ** 2)
-	return { altitude, slantRange, horizonRadius, groundDist: d }
+	if (k <= 0) return null;
+
+	const altitude = EARTH_R * (1 - k) / k;
+	const slantRange = Math.sqrt(EARTH_R ** 2 + (EARTH_R + altitude) ** 2 - 2 * EARTH_R * (EARTH_R + altitude) * Math.cos(gamma));
+	const horizonRadius = Math.sqrt(2 * EARTH_R * altitude + altitude ** 2);
+
+	return {altitude, slantRange, horizonRadius, groundDist: d};
 }
 
-/** Linear regression on recent elevation history to project time until satellite sets below horizon (el = 0). */
 function estimateEtaOut(history: TinyGSReading[]): number | null {
-	const pts = <any>history.slice(-6)
-	if (pts.length < 2) return null
+	const pts: any = history.slice(-6);
+	if (pts.length < 2) return null;
 
-	const t0 = pts[0].timestamp
-	const xs = pts.map(p => (p.timestamp - t0) / 1000)
-	const ys = pts.map(p => p.el)
-	const n  = xs.length
-	const sumX = xs.reduce((a, b) => a + b, 0), sumY = ys.reduce((a, b) => a + b, 0)
-	const sumXY = xs.reduce((a, x, i) => a + x * ys[i], 0), sumXX = xs.reduce((a, x) => a + x * x, 0)
-	const slope = (n * sumXY - sumX * sumY) / (n * sumXX - sumX * sumX)
-	if (!isFinite(slope) || slope >= 0) return null // rising or flat, can't predict setting
+	const t0 = pts[0].timestamp;
+	const xs = pts.map(p => (p.timestamp - t0) / 1000);
+	const ys = pts.map(p => p.el);
+	const n = xs.length;
+	const sumX = xs.reduce((a, b) => a + b, 0);
+	const sumY = ys.reduce((a, b) => a + b, 0);
+	const sumXY = xs.reduce((a, x, i) => a + x * ys[i], 0);
+	const sumXX = xs.reduce((a, x) => a + x * x, 0);
+	const slope = (n * sumXY - sumX * sumY) / (n * sumXX - sumX * sumX);
 
-	const lastEl = ys[ys.length - 1], lastX = xs[xs.length - 1]
-	const secsFromNow = (lastX - lastEl / slope) - lastX
-	return secsFromNow > 0 ? secsFromNow * 1000 : null
+	if (!isFinite(slope) || slope >= 0) return null;
+
+	const lastEl: any = ys[ys.length - 1], lastX: any = xs[xs.length - 1];
+	const secsFromNow = (lastX - lastEl / slope) - lastX;
+
+	return secsFromNow > 0 ? secsFromNow * 1000 : null;
 }
 
 export class SatsLayer {
-	private map:              Map
-	private layer!:           VectorLayer<VectorSource>
-	private popups:           any = {}
-	private receptionCircles: Record<string, VectorLayer<VectorSource>> = {}
-	private data:             TinyGSSatellite[] = []
-	private clickHandler:     ((e: any) => void) | null = null
-	private refreshTimer:     any = null
-	visible = false
-	gs;
+	private map: Map;
+	private layer!: VectorLayer<VectorSource>;
+	private popups: any = {};
+	private receptionCircles: Record<string, VectorLayer<VectorSource>> = {};
+	private data: TinyGSSatellite[] = [];
+	private clickHandler: ((e: any) => void) | null = null;
+	private refreshTimer: any = null;
+	visible = false;
+	gs: any;
 
 	constructor(map: Map) {
-		this.map = map
+		this.map = map;
 		api.position().then(gs => this.gs = gs);
 	}
 
 	async show() {
-		if (this.visible) return
-		this.visible = true
-		this.layer   = new VectorLayer({ source: new VectorSource(), zIndex: 105 })
-		this.map.addLayer(this.layer)
-		await this._fetch()
-		this._draw()
-		this._attachClick()
+		if (this.visible) return;
+
+		this.visible = true;
+		this.layer = new VectorLayer({source: new VectorSource(), zIndex: 105});
+		this.map.addLayer(this.layer);
+
+		await this._fetch();
+		this._draw();
+		this._attachClick();
+
 		this.refreshTimer = adjustedInterval(async () => {
 			try {
-				await this._fetch()
-				this._draw()
-				this._refreshPopups()
+				await this._fetch();
+				this._draw();
+				this._refreshPopups();
 			} catch (err) {
-				console.error(err)
+				console.error(err);
 			}
-		}, 5_000)
+		}, 5_000);
 	}
 
 	hide() {
-		if (!this.visible) return
-		this.visible = false
-		if (this.refreshTimer) { clearInterval(this.refreshTimer); this.refreshTimer = null }
-		if (this.clickHandler) { this.map.un('singleclick', this.clickHandler); this.clickHandler = null }
-		for (const name of Object.keys(this.popups)) this._closePopup(name)
-		this.map.removeLayer(this.layer)
+		if (!this.visible) return;
+
+		this.visible = false;
+
+		if (this.refreshTimer) {
+			clearInterval(this.refreshTimer);
+			this.refreshTimer = null;
+		}
+
+		if (this.clickHandler) {
+			this.map.un('singleclick', this.clickHandler);
+			this.clickHandler = null;
+		}
+
+		for (const name of Object.keys(this.popups)) this._closePopup(name);
+		if (this.layer) this.map.removeLayer(this.layer);
+	}
+
+	getClosest(lat: number, lng: number): TinyGSSatellite | null {
+		if (!this.data.length) return null;
+
+		let closest: TinyGSSatellite | null = null;
+		let closestDistance = Infinity;
+
+		for (const sat of this.data) {
+			if (sat.latitude == null || sat.longitude == null) continue;
+
+			const range = this._calcRange(sat);
+
+			if (range && range.slantRange < closestDistance) {
+				closestDistance = range.slantRange;
+				closest = sat;
+			}
+		}
+
+		if (closest || !this.gs) return closest;
+
+		closestDistance = Infinity;
+
+		for (const sat of this.data) {
+			const distance = greatCircleDist(this.gs.latitude, this.gs.longitude, sat.latitude, sat.longitude);
+
+			if (distance < closestDistance) {
+				closestDistance = distance;
+				closest = sat;
+			}
+		}
+
+		return closest;
+	}
+
+	getAutoCandidates(lat: number, lng: number, limit = Infinity): TinyGSSatellite[] {
+		return this.data.filter(sat => {
+			if (sat.latitude == null || sat.longitude == null) return false;
+			return sat.el >= AUTO_ELEVATION;
+		}).sort((a, b) => {
+			const ar = this._calcRange(a), br = this._calcRange(b);
+			const ad = ar?.slantRange ?? greatCircleDist(lat, lng, a.latitude, a.longitude);
+			const bd = br?.slantRange ?? greatCircleDist(lat, lng, b.latitude, b.longitude);
+
+			return ad - bd;
+		}).slice(0, limit);
+	}
+
+	isPriority(sat: TinyGSSatellite): boolean {
+		return false;
+	}
+
+	getAutoDistance(lat: number, lng: number, sat: TinyGSSatellite): number {
+		return this._calcRange(sat)?.slantRange ?? greatCircleDist(lat, lng, sat.latitude, sat.longitude);
+	}
+
+	getRange(sat: TinyGSSatellite): number | null {
+		return this._calcRange(sat)?.slantRange ?? null;
+	}
+
+	getById(name: string): TinyGSSatellite | null {
+		return this.data.find(s => s.satellite === name) ?? null;
+	}
+
+	openAutoPopup(sat: TinyGSSatellite) {
+		this._openPopup(sat);
+	}
+
+	closeAutoPopup(name: string) {
+		this._closePopup(name);
 	}
 
 	private async _fetch() {
-		this.data = await fetch(`${API}/sats`).then(r => r.json()) || []
+		this.data = await fetch(`${API}/sats`).then(r => r.json()) || [];
 	}
 
 	private _draw() {
-		const source = this.layer.getSource()!
-		source.clear()
+		const source = this.layer.getSource()!;
+		source.clear();
 
 		for (const sat of this.data) {
-			if (sat.latitude == null || sat.longitude == null) continue
+			if (sat.latitude == null || sat.longitude == null) continue;
+
+			const points: any = [...sat.history, sat].map(r => fromLonLat([r.longitude, r.latitude]));
 
-			const points = <any>[...sat.history, sat].map(r => fromLonLat([r.longitude, r.latitude]))
 			if (points.length > 1) {
-				const trail = new Feature({ geometry: new LineString(points) })
-				trail.setStyle(new Style({ stroke: new Stroke({ color: 'rgba(212,164,255,0.5)', width: 2, lineDash: [6, 4] }) }))
-				source.addFeature(trail)
+				const trail = new Feature({geometry: new LineString(points)});
+				trail.setStyle(new Style({
+					stroke: new Stroke({
+						color: 'rgba(212,164,255,0.5)',
+						width: 2,
+						lineDash: [6, 4],
+					}),
+				}));
+
+				source.addFeature(trail);
 			}
 
-			const marker = new Feature({ geometry: new Point(points[points.length - 1]) })
-			marker.set('satellite', sat.satellite)
-			marker.set('satData', sat)
+			const marker = new Feature({geometry: new Point(points[points.length - 1])});
+			marker.set('satellite', sat.satellite);
+			marker.set('satData', sat);
 			marker.setStyle(new Style({
 				image: new Icon({
 					src: '/satellite.png',
 					scale: 0.1,
 					anchor: [0.5, 0.5],
 				}),
-			}))
-			source.addFeature(marker)
+			}));
+
+			source.addFeature(marker);
 		}
 	}
 
 	private _calcRange(sat: TinyGSSatellite): RangeEstimate | null {
-		if (!this.gs) return null
-		return estimateRange(this.gs.latitude, this.gs.longitude, sat.latitude, sat.longitude, sat.el)
+		if (!this.gs) return null;
+		return estimateRange(this.gs.latitude, this.gs.longitude, sat.latitude, sat.longitude, sat.el);
 	}
 
 	private _drawReceptionCircle(sat: TinyGSSatellite, radiusKm?: number | null) {
-		this._removeReceptionCircle(sat.satellite)
-		if (!radiusKm) return
-		const feature = new Feature({ geometry: new CircleGeom(fromLonLat([sat.longitude, sat.latitude]), radiusKm * 1000) })
+		this._removeReceptionCircle(sat.satellite);
+		if (!radiusKm) return;
+
+		const feature = new Feature({
+			geometry: new CircleGeom(fromLonLat([sat.longitude, sat.latitude]), radiusKm * 1000),
+		});
+
 		feature.setStyle(new Style({
-			stroke: new Stroke({ color: 'rgba(212,164,255,0.6)', width: 2 }),
-			fill:   new Fill({ color: 'rgba(212,164,255,0.12)' }),
-		}))
-		const layer = new VectorLayer({ source: new VectorSource({ features: [feature] }), zIndex: 104 })
-		this.map.addLayer(layer)
-		this.receptionCircles[sat.satellite] = layer
+			stroke: new Stroke({
+				color: 'rgba(212,164,255,0.6)',
+				width: 2,
+			}),
+			fill: new Fill({color: 'rgba(212,164,255,0.12)'}),
+		}));
+
+		const layer = new VectorLayer({
+			source: new VectorSource({features: [feature]}),
+			zIndex: 104,
+		});
+
+		this.map.addLayer(layer);
+		this.receptionCircles[sat.satellite] = layer;
 	}
 
 	private _removeReceptionCircle(name: string) {
-		const l = this.receptionCircles[name]
-		if (l) { this.map.removeLayer(l); delete this.receptionCircles[name] }
-	}
+		const layer = this.receptionCircles[name];
 
-	private _openPopup(sat: TinyGSSatellite) {
-		if (this.popups[sat.satellite]) return
-
-		const history = [...sat.history, sat]
-		const range   = this._calcRange(sat)
-		const eta     = estimateEtaOut(history)
-		this._drawReceptionCircle(sat, range?.horizonRadius)
-
-		const container = document.createElement('div')
-		document.body.appendChild(container)
-		const mobile = window.innerWidth <= 768
-
-		const makeProps = (h_: any, r: any, e: any) => ({
-			history:        h_,
-			range:          r,
-			eta:            e,
-			position:       mobile ? { x: window.innerWidth / 2 - 180, y: window.innerHeight - 540 - 16 } : { x: 16, y: 16 },
-			onClose:        () => this._closePopup(sat.satellite),
-			onBringToFront: () => bringToFront(container),
-		})
-
-		vueRender(h(TinyGSPopup, makeProps(history, range, eta)), container)
-
-		this.popups[sat.satellite] = {
-			container,
-			update:  (h_: any, r: any, e: any) => vueRender(h(TinyGSPopup, makeProps(h_, r, e)), container),
-			unmount: () => { vueRender(null, container); container.remove() },
+		if (layer) {
+			this.map.removeLayer(layer);
+			delete this.receptionCircles[name];
 		}
 	}
 
+	private _openPopup(sat: TinyGSSatellite) {
+		if (this.popups[sat.satellite]) return;
+
+		const history = [...sat.history, sat];
+		const range = this._calcRange(sat);
+		const eta = estimateEtaOut(history);
+
+		this._drawReceptionCircle(sat, range?.horizonRadius);
+
+		const container = document.createElement('div');
+		document.body.appendChild(container);
+
+		const mobile = window.innerWidth <= 768;
+		const makeProps = (h_: TinyGSReading[], r: RangeEstimate | null, e: number | null) => ({
+			history: h_,
+			range: r,
+			eta: e,
+			position: mobile
+				? {x: window.innerWidth / 2 - 180, y: window.innerHeight - 540 - 16}
+				: {x: 16, y: 16},
+			onClose: () => this._closePopup(sat.satellite),
+			onBringToFront: () => bringToFront(container),
+		});
+
+		vueRender(h(TinyGSPopup, makeProps(history, range, eta)), container);
+
+		this.popups[sat.satellite] = {
+			container,
+			update: (h_: TinyGSReading[], r: RangeEstimate | null, e: number | null) => vueRender(h(TinyGSPopup, makeProps(h_, r, e)), container),
+			unmount: () => {
+				vueRender(null, container);
+				container.remove();
+			},
+		};
+	}
+
 	private _closePopup(name: string) {
-		const popup = this.popups[name]
-		if (popup) { popup.unmount(); delete this.popups[name] }
-		this._removeReceptionCircle(name)
+		const popup = this.popups[name];
+
+		if (popup) {
+			popup.unmount();
+			delete this.popups[name];
+		}
+
+		this._removeReceptionCircle(name);
 	}
 
 	private _refreshPopups() {
 		for (const name of Object.keys(this.popups)) {
-			const sat = this.data.find(s => s.satellite === name)
-			if (!sat) { this._closePopup(name); continue }
-			const history = [...sat.history, sat]
-			const range   = this._calcRange(sat)
-			this.popups[name].update(history, range, estimateEtaOut(history))
-			this._drawReceptionCircle(sat, range?.horizonRadius)
+			const sat = this.data.find(s => s.satellite === name);
+
+			if (!sat) {
+				this._closePopup(name);
+				continue;
+			}
+
+			const history = [...sat.history, sat];
+			const range = this._calcRange(sat);
+
+			this.popups[name].update(
+				history,
+				range,
+				estimateEtaOut(history),
+			);
+
+			this._drawReceptionCircle(sat, range?.horizonRadius);
 		}
 	}
 
 	private _attachClick() {
-		this.clickHandler = (evt) => {
-			const f = this.map.forEachFeatureAtPixel(evt.pixel, f => f.get('satData') ? f : null)
-			if (!f) return
-			const sat = f.get('satData') as TinyGSSatellite
-			if (this.popups[sat.satellite]) { this._closePopup(sat.satellite); return }
-			this._openPopup(sat)
-		}
-		this.map.on('singleclick', this.clickHandler)
+		this.clickHandler = evt => {
+			const f = this.map.forEachFeatureAtPixel(evt.pixel, f => f.get('satData') ? f : null);
+			if (!f) return;
+
+			const sat = f.get('satData') as TinyGSSatellite;
+
+			if (this.popups[sat.satellite]) {
+				this._closePopup(sat.satellite);
+				return;
+			}
+
+			this._openPopup(sat);
+		};
+
+		this.map.on('singleclick', this.clickHandler);
 	}
 }
diff --git a/server/src/radiosonde.mjs b/server/src/radiosonde.mjs
new file mode 100644
index 0000000..7e8fa99
--- /dev/null
+++ b/server/src/radiosonde.mjs
@@ -0,0 +1,54 @@
+import {cfg} from './config.mjs';
+
+let sondeCache = null;
+let sondeCacheTs = 0;
+const SONDE_TTL = 1000;
+
+export async function getSondes() {
+	if (sondeCache && Date.now() - sondeCacheTs < SONDE_TTL) return sondeCache;
+	const {ADSB_URL} = cfg();
+	if (!ADSB_URL) return {data: []};
+
+	const r = await fetch(`${ADSB_URL}:9989/get_telemetry_archive`);
+	const data = await r.json();
+
+	sondeCache = Object.entries(data).map(([id, sonde]) => {
+		const t = sonde.latest_telem ?? {};
+		const path = sonde.path ?? [];
+
+		return {
+			id,
+			type: t.type,
+			subtype: t.subtype,
+			lat: t.lat,
+			lon: t.lon,
+			altitude: t.alt,
+			heading: t.heading,
+			speed: t.vel_h,
+			vertical_speed: t.vel_v,
+			sats: t.sats,
+			timestamp: t.datetime ? Date.parse(t.datetime) : sonde.timestamp * 1000,
+			datetime: t.datetime,
+			frame: t.frame,
+			battery: t.batt,
+			temperature: t.temp,
+			humidity: t.humidity,
+			pressure: t.pressure,
+			frequency: t.freq_float,
+			frequency_hz: t.tx_frequency,
+			snr: t.snr,
+			ppm: t.ppm,
+			aprsid: t.aprsid?.trim(),
+			rs41_mainboard: t.rs41_mainboard,
+			rs41_mainboard_fw: t.rs41_mainboard_fw,
+			version: t.version,
+			ref_datetime: t.ref_datetime,
+			ref_position: t.ref_position,
+			sdr_device_idx: t.sdr_device_idx,
+			path
+		};
+	});
+
+	sondeCacheTs = Date.now();
+	return sondeCache;
+}
diff --git a/server/src/server.mjs b/server/src/server.mjs
index ab4a6bf..b5d8805 100644
--- a/server/src/server.mjs
+++ b/server/src/server.mjs
@@ -15,6 +15,7 @@ import {dailyWeather, hourlyWeather} from './openmeteo.mjs';
 import {getTinyGSData} from './sats.mjs';
 import {getSpaceWeather} from './space.mjs';
 import {Aurora} from './aurora.mjs';
+import {getSondes} from './radiosonde.mjs';
 
 // ── Uncaught error handlers ───────────────────────────────────────────────────
 
@@ -152,7 +153,7 @@ app.get('/api/space', async (req, res) => {
 	res.json(filterFields(await getSpaceWeather(), fields));
 });
 
-// ── ADSB/AIS/SAT Proxy ────────────────────────────────────────────────────────────
+// ── ADSB/AIS/SAT/RadioSonde Proxy ────────────────────────────────────────────────────────────
 
 app.get('/api/adsb', asyncHandler(async (req, res) => res.json(await getADSB())));
 app.get('/api/adsb/:icao/image', asyncHandler(async (req, res) => {
@@ -167,6 +168,8 @@ app.get('/api/ais/:mmsi/image', asyncHandler(async (req, res) => {
 	res.contentType('image/jpeg').send(buffer)
 }));
 
+app.get('/api/sondes', asyncHandler(async (req, res) => res.json(await getSondes())));
+
 app.get('/api/sats', (_req, res) => res.json(getTinyGSData()));
 
 // ── DOCS ──────────────────────────────────────────────────────────────────────