From 1ee386949c33337d66a3c64ecf48f60edf42187d Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Fri, 26 Jun 2026 00:05:28 -0400
Subject: [PATCH] Cleanup

---
 client/src/components/AirQuality.vue    |   6 +-
 client/src/components/Aircraft.vue      | 344 ++++++++++++++++++++++++
 client/src/components/Moon.vue          |  45 ++--
 client/src/components/Precipitation.vue |  10 +-
 client/src/components/Seismic.vue       |  23 +-
 client/src/components/Sun.vue           |  89 +++---
 client/src/components/Wind.vue          |  10 +-
 client/src/services/adsb.ts             | 265 ++++--------------
 client/src/services/api.ts              |  31 ++-
 client/src/views/Dashboard.vue          |   3 +-
 server/src/server.mjs                   |  21 +-
 11 files changed, 521 insertions(+), 326 deletions(-)
 create mode 100644 client/src/components/Aircraft.vue

diff --git a/client/src/components/AirQuality.vue b/client/src/components/AirQuality.vue
index 0569204..a0639c7 100644
--- a/client/src/components/AirQuality.vue
+++ b/client/src/components/AirQuality.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import {ref, onMounted} from 'vue';
-import {api} from '../services/api';
+import {useWeather} from '../services/api';
 import MetricRow from './MetricRow.vue';
 
-const d = ref<any>(null);
-onMounted(async () => d.value = await api.current());
+const {current: d} = useWeather();
 </script>
 
 <template>
diff --git a/client/src/components/Aircraft.vue b/client/src/components/Aircraft.vue
new file mode 100644
index 0000000..9d2cc40
--- /dev/null
+++ b/client/src/components/Aircraft.vue
@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const BASE_SPEED_UNITS = {
+	knots: { label: 'KTS', convert: (v: number) => Math.round(v) },
+	kph:   { label: 'KPH', convert: (v: number) => Math.round(v * 1.852) },
+	mph:   { label: 'MPH', convert: (v: number) => Math.round(v * 1.15078) },
+}
+const BASE_ALTITUDE_UNITS = {
+	meters: { label: 'M',  convert: (v: number) => Math.round(v * 0.3048) },
+	feet:   { label: 'FT', convert: (v: number) => v },
+}
+const BASE_VERTICAL_UNITS = {
+	mps: { label: 'M/S',  convert: (v: number) => Math.round(v * 0.3048) },
+	fps: { label: 'FT/S', convert: (v: number) => v },
+}
+
+const UNIT_KEY = 'at_units'
+function loadUnits() {
+	const s = localStorage.getItem(UNIT_KEY)
+	return s ? JSON.parse(s) : { speed: 'knots', altitude: 'meters', vertical: 'mps' }
+}
+
+const props = defineProps<{ plane: any; position: { x: number; y: number } }>()
+const emit  = defineEmits<{ (e: 'close'): void; (e: 'bringToFront'): void }>()
+
+// ── Units ─────────────────────────────────────────────────────────────────────
+const prefs = ref(loadUnits())
+function saveAndSet(p: any) {
+	prefs.value = { ...p }
+	localStorage.setItem(UNIT_KEY, JSON.stringify(prefs.value))
+}
+function cycleSpeed()    { const keys = Object.keys(BASE_SPEED_UNITS);    const p = loadUnits(); p.speed    = keys[(keys.indexOf(p.speed)    + 1) % keys.length]; saveAndSet(p) }
+function cycleAltitude() { const keys = Object.keys(BASE_ALTITUDE_UNITS); const p = loadUnits(); p.altitude = keys[(keys.indexOf(p.altitude) + 1) % keys.length]; p.vertical = p.altitude === 'meters' ? 'mps' : 'fps'; saveAndSet(p) }
+function cycleVertical() { const keys = Object.keys(BASE_VERTICAL_UNITS); const p = loadUnits(); p.vertical = keys[(keys.indexOf(p.vertical) + 1) % keys.length]; p.altitude = p.vertical === 'mps' ? 'meters' : 'feet'; saveAndSet(p) }
+
+const speed    = computed(() => BASE_SPEED_UNITS[prefs.value.speed       as keyof typeof BASE_SPEED_UNITS])
+const altitude = computed(() => BASE_ALTITUDE_UNITS[prefs.value.altitude as keyof typeof BASE_ALTITUDE_UNITS])
+const vertical = computed(() => BASE_VERTICAL_UNITS[prefs.value.vertical as keyof typeof BASE_VERTICAL_UNITS])
+
+// ── Plane data ────────────────────────────────────────────────────────────────
+const callsign    = computed(() => props.plane.name?.trim() || props.plane.flight?.trim())
+const altitudeVal = computed(() => props.plane.alt_baro ?? props.plane.alt_geom ?? 0)
+const speedVal    = computed(() => speed.value.convert(props.plane.speed || props.plane.gs || 0))
+const altVal      = computed(() => props.plane.landed ? 'LANDED' : altitude.value.convert(altitudeVal.value))
+const altUnit     = computed(() => props.plane.landed ? '' : altitude.value.label)
+const climbVal    = computed(() => { const v = vertical.value.convert(props.plane.climb || props.plane.baro_rate || 0); return v >= 0 ? `+${v}` : String(v) })
+const description = computed(() => props.plane.desc || [props.plane.manufacturer, props.plane.model].filter(Boolean).join(' ') || '')
+const operator    = computed(() => props.plane.operator || props.plane.owner || '')
+
+// ── Drag ──────────────────────────────────────────────────────────────────────
+const pos            = ref({ ...props.position })
+const isDragging     = ref(false)
+const dragStart      = ref({ mx: 0, my: 0, ex: 0, ey: 0 })
+const longPressTimer = ref<number | null>(null)
+const header         = ref<HTMLElement | null>(null)
+
+function onMouseDown(e: MouseEvent) {
+	if ((e.target as HTMLElement).classList.contains('ap-close')) return
+	emit('bringToFront')
+	isDragging.value  = true
+	dragStart.value   = { mx: e.clientX, my: e.clientY, ex: pos.value.x, ey: pos.value.y }
+	e.preventDefault()
+}
+function onMouseMove(e: MouseEvent) {
+	if (!isDragging.value) return
+	pos.value.x = dragStart.value.ex + (e.clientX - dragStart.value.mx)
+	pos.value.y = dragStart.value.ey + (e.clientY - dragStart.value.my)
+}
+function onMouseUp() { isDragging.value = false }
+
+function onTouchStart(e: TouchEvent) {
+	if ((e.target as HTMLElement).classList.contains('ap-close')) return
+	const touch = e.touches[0]
+	const sx = touch.clientX, sy = touch.clientY
+	longPressTimer.value = window.setTimeout(() => {
+		emit('bringToFront')
+		isDragging.value = true
+		dragStart.value  = { mx: sx, my: sy, ex: pos.value.x, ey: pos.value.y }
+		if (header.value) header.value.style.opacity = '0.8'
+	}, 500)
+}
+function onTouchMove(e: TouchEvent) {
+	if (!isDragging.value) return
+	const touch = e.touches[0]
+	pos.value.x = dragStart.value.ex + (touch.clientX - dragStart.value.mx)
+	pos.value.y = dragStart.value.ey + (touch.clientY - dragStart.value.my)
+	e.preventDefault()
+}
+function onTouchEnd() {
+	if (longPressTimer.value) { clearTimeout(longPressTimer.value); longPressTimer.value = null }
+	if (isDragging.value && header.value) header.value.style.opacity = '1'
+	isDragging.value = false
+}
+
+onMounted(() => {
+	document.addEventListener('mousemove', onMouseMove)
+	document.addEventListener('mouseup',   onMouseUp)
+	document.addEventListener('touchmove', onTouchMove, { passive: false })
+	document.addEventListener('touchend',  onTouchEnd)
+	document.addEventListener('touchcancel', onTouchEnd)
+})
+onUnmounted(() => {
+	document.removeEventListener('mousemove', onMouseMove)
+	document.removeEventListener('mouseup',   onMouseUp)
+	document.removeEventListener('touchmove', onTouchMove)
+	document.removeEventListener('touchend',  onTouchEnd)
+	document.removeEventListener('touchcancel', onTouchEnd)
+})
+
+// ── Navball ───────────────────────────────────────────────────────────────────
+const navball = computed(() => {
+	const data           = props.plane
+	const heading        = data.heading ?? data.track ?? 0
+	const airspeedKnots  = data.speed || data.gs || 0
+	const vertRateFps    = data.climb || data.baro_rate || 0
+	const groundSpeedFps = airspeedKnots * 1.68781
+	const pitchRad       = groundSpeedFps > 0 ? Math.atan(vertRateFps / groundSpeedFps) : 0
+	const pitch          = Math.max(-25, Math.min(25, pitchRad * (180 / Math.PI)))
+
+	const pitchLines: string[] = []
+	for (let p = -30; p <= 30; p += 5) {
+		if (p === 0) continue
+		const isMajor      = p % 10 === 0
+		const [start, end] = [85, 115]
+		if (isMajor) {
+			pitchLines.push(`
+        <text x="${start - Math.abs(p) - 5}" y="${104 + pitch * 2.5 - p * 2.5}" fill="#fff" font-size="8" font-weight="bold" text-anchor="end">${Math.abs(p)}</text>
+        <line x1="${start - Math.abs(p)}" y1="${100 + pitch * 2.5 - p * 2.5}" x2="${end + Math.abs(p)}" y2="${100 + pitch * 2.5 - p * 2.5}" stroke="#fff" stroke-width="2"/>
+        <text x="${end + Math.abs(p) + 5}" y="${104 + pitch * 2.5 - p * 2.5}" fill="#fff" font-size="8" font-weight="bold">${Math.abs(p)}</text>
+      `)
+		} else {
+			pitchLines.push(`<line x1="${start}" y1="${100 + pitch * 2.5 - p * 2.5}" x2="${end}" y2="${100 + pitch * 2.5 - p * 2.5}" stroke="#fff" stroke-width="2"/>`)
+		}
+	}
+
+	const rollTicks: string[] = []
+	for (const angle of [-90, -60, -45, -30, -20, -10, 0, 10, 20, 30, 45, 60, 90]) {
+		const rad = angle * Math.PI / 180
+		const a   = Math.abs(angle)
+		if (a === 45) {
+			rollTicks.push(`<circle cx="${100 + 78 * Math.sin(rad)}" cy="${100 - 78 * Math.cos(rad)}" r="2.5" fill="#fff"/>`)
+		} else {
+			const inner = (a === 0 || a % 30 === 0) ? 72 : 77
+			const sw    = (a === 0 || a % 30 === 0) ? 2.5 : 1.5
+			rollTicks.push(`<line x1="${100 + inner * Math.sin(rad)}" y1="${100 - inner * Math.cos(rad)}" x2="${100 + 85 * Math.sin(rad)}" y2="${100 - 85 * Math.cos(rad)}" stroke="#fff" stroke-width="${sw}"/>`)
+		}
+	}
+
+	const compassLabels = [-60, -45, -30, -15, 0, 15, 30, 45, 60].map(offset => {
+		const rad = offset * Math.PI / 180
+		const x   = 100 + 90 * Math.sin(rad)
+		const y   = 100 - 90 * Math.cos(rad)
+		const h   = Math.round((offset + 360) % 360)
+		const lbl = ({ 0: 'N', 90: 'E', 180: 'S', 270: 'W' } as any)[h] || ''
+		return lbl ? `<text x="${x}" y="${y + 4}" text-anchor="middle" fill="#0f0" font-size="13" font-weight="bold">${lbl}</text>` : ''
+	}).join('')
+
+	return `
+    <svg width="200" height="220" viewBox="0 0 200 220">
+      <defs>
+        <clipPath id="navballClip"><circle cx="100" cy="100" r="85"/></clipPath>
+        <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%"   style="stop-color:#1e90ff"/>
+          <stop offset="100%" style="stop-color:#4169e1"/>
+        </linearGradient>
+        <linearGradient id="groundGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%"   style="stop-color:#8b4513"/>
+          <stop offset="100%" style="stop-color:#654321"/>
+        </linearGradient>
+      </defs>
+      <rect x="77" y="5" width="46" height="18" fill="rgba(0,0,0,0.95)" stroke="#0f0" stroke-width="2" rx="2"/>
+      <text x="100" y="18" text-anchor="middle" fill="#0f0" font-size="14" font-weight="bold">${heading.toFixed(0).padStart(3, '0')}°</text>
+      <g transform="translate(0,25)" clip-path="url(#navballClip)">
+        <rect x="15" y="${15 + pitch * 2.5 - 200}" width="170" height="285" fill="url(#skyGrad)"/>
+        <rect x="15" y="${100 + pitch * 2.5}" width="170" height="285" fill="url(#groundGrad)"/>
+        <line x1="15" y1="${100 + pitch * 2.5}" x2="185" y2="${100 + pitch * 2.5}" stroke="#fff" stroke-width="3"/>
+        ${pitchLines.join('')}
+      </g>
+      <g transform="translate(0,25)">${rollTicks.join('')}</g>
+      <circle cx="100" cy="125" r="85" fill="none" stroke="#0f0" stroke-width="2.5"/>
+      <line x1="40"  y1="125" x2="80"  y2="125" stroke="#ff0" stroke-width="3.5"/>
+      <line x1="120" y1="125" x2="160" y2="125" stroke="#ff0" stroke-width="3.5"/>
+      <circle cx="100" cy="125" r="4" fill="none" stroke="#ff0" stroke-width="2.5"/>
+      <g transform="rotate(${-heading} 100 125)">${compassLabels}</g>
+      <polygon points="100,37 95,30 105,30" fill="#ff0"/>
+    </svg>
+  `
+})
+</script>
+
+<template>
+	<div class="aircraft-popup" :style="{ left: pos.x + 'px', top: pos.y + 'px' }">
+
+		<!-- Header (drag handle) -->
+		<div ref="header" class="ap-header" @mousedown="onMouseDown" @touchstart.passive="onTouchStart">
+			<h3 class="ap-callsign">
+				✈️
+				<a v-if="callsign" :href="`https://www.flightaware.com/live/flight/${callsign}`" target="_blank" @click.stop>{{ callsign.toUpperCase() }}</a>
+				<span v-else>N/A</span>
+				<span style="color: white"> / {{ (plane.icao || plane.hex || '').toUpperCase() }}</span>
+			</h3>
+			<button class="ap-close" @click.stop="emit('close')">×</button>
+		</div>
+
+		<!-- Body -->
+		<div class="ap-meta flex-r justify-between">
+			<div class="flex-c">
+				<span>{{ operator }}</span>
+				<span>{{ plane.country || 'Unknown Country' }}</span>
+			</div>
+			<div class="flex-c align-x-end">
+				<span>{{ description }}</span>
+				<span style="text-transform: capitalize">{{ plane.class || 'Unknown' }} • {{ plane.type || 'Unknown' }}</span>
+			</div>
+		</div>
+		<div class="ap-body">
+			<div class="ap-gauges">
+				<div class="ap-gauge-wrap">
+					<div class="ap-gauge-label">Air Speed</div>
+					<div class="ap-gauge" @click.stop="cycleSpeed">
+						<span class="ap-gauge-val">{{ speedVal }}</span>
+						<span class="ap-gauge-unit">{{ speed.label }}</span>
+					</div>
+				</div>
+				<div class="ap-gauge-wrap">
+					<div class="ap-gauge-label">Altitude</div>
+					<div class="ap-gauge" @click.stop="cycleAltitude">
+						<span class="ap-gauge-val">{{ altVal }}</span>
+						<span class="ap-gauge-unit">{{ altUnit }}</span>
+					</div>
+				</div>
+				<div class="ap-gauge-wrap">
+					<div class="ap-gauge-label">Climb</div>
+					<div class="ap-gauge" @click.stop="cycleVertical">
+						<span class="ap-gauge-val">{{ climbVal }}</span>
+						<span class="ap-gauge-unit">{{ vertical.label }}</span>
+					</div>
+				</div>
+			</div>
+			<div class="ap-navball" v-html="navball" />
+		</div>
+
+	</div>
+</template>
+
+<style scoped>
+.aircraft-popup {
+	position: fixed;
+	z-index: 9999;
+	pointer-events: auto;
+	background: rgba(0,0,0,0.88);
+	border: 1px solid rgba(200,200,220,0.3);
+	border-radius: 8px;
+	box-shadow: 0 4px 24px rgba(0,0,0,0.5);
+	overflow: hidden;
+	font-family: monospace;
+	color: #ccc;
+	min-width: 320px;
+}
+
+.ap-header {
+	position: relative;
+	padding: 12px 16px;
+	border-bottom: 1px solid rgba(200,200,220,0.2);
+	cursor: move;
+	user-select: none;
+	-webkit-user-select: none;
+}
+
+.ap-callsign {
+	margin: 0 24px 0 0;
+	color: #7eeee1;
+	font-size: 16px;
+}
+.ap-callsign a { color: #6bb6ff; text-decoration: none; }
+
+.ap-meta {
+	font-size: 11px;
+	color: #888;
+	margin-top: 4px;
+	display: flex;
+	justify-content: space-between;
+	gap: 8px;
+	padding: 12px 16px;
+	border-bottom: 1px solid rgba(200,200,220,0.2);
+}
+.ap-meta--detail { margin-top: 3px; }
+
+.ap-icao    { text-align: right; }
+.ap-operator { text-align: right; color: #aaa; }
+
+.ap-close {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	background: rgba(255,255,255,0.2);
+	border: none;
+	color: white;
+	width: 24px;
+	height: 24px;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: background 0.2s;
+}
+.ap-close:hover { background: rgba(255,255,255,0.35); }
+
+.ap-body {
+	display: flex;
+	gap: 16px;
+	padding: 12px 16px;
+}
+
+.ap-gauges     { flex: 0 0 110px; }
+.ap-gauge-wrap { margin-bottom: 12px; }
+
+.ap-gauge-label {
+	color: #888;
+	font-size: 11px;
+	font-weight: bold;
+	margin-bottom: 3px;
+}
+
+.ap-gauge {
+	padding: 6px;
+	background: rgba(0,0,0,0.95);
+	border: 2px solid #0f0;
+	border-radius: 3px;
+	cursor: pointer;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+	gap: 4px;
+	transition: border-color 0.15s;
+}
+.ap-gauge:hover  { border-color: #0ff; }
+.ap-gauge-val    { font-size: 20px; font-weight: bold; color: #0f0; }
+.ap-gauge-unit   { font-size: 11px; color: #0f0; margin-bottom: 2px; }
+.ap-navball      { flex: 1; }
+</style>
diff --git a/client/src/components/Moon.vue b/client/src/components/Moon.vue
index 7c329f0..118284e 100644
--- a/client/src/components/Moon.vue
+++ b/client/src/components/Moon.vue
@@ -1,23 +1,11 @@
 <script setup lang="ts">
+import Loading from '@/components/Loading.vue';
 import {formatDate} from '@ztimson/utils';
-import {ref, onMounted, computed, watchEffect} from 'vue';
-import {api} from '../services/api';
+import {ref, watchEffect} from 'vue';
+import {useWeather} from '../services/api';
 import MetricRow from './MetricRow.vue';
 
-const d = ref<any>(null);
-onMounted(async () => d.value = await api.current());
-
-const moonIcon = computed(() => {
-	if(!d.value) return '🌑';
-	const phase = d.value.moon_phase as string;
-	const map: Record<string, string> = {
-		'New Moon': '🌑', 'Waxing Crescent': '🌒', 'First Quarter': '🌓',
-		'Waxing Gibbous': '🌔', 'Full Moon': '🌕', 'Waning Gibbous': '🌖',
-		'Last Quarter': '🌗', 'Waning Crescent': '🌘',
-	};
-	return map[phase] ?? '🌕';
-});
-
+const {current: d} = useWeather();
 const canvasRef = ref<HTMLCanvasElement | null>(null);
 
 watchEffect(() => {
@@ -80,20 +68,31 @@ watchEffect(() => {
 </script>
 
 <template>
-	<div class="card" v-if="d">
+	<div class="card">
 		<div class="card-title">🌙 Moon</div>
 
 		<div class="flex-r align-items-center gap-3 p-2">
-			<canvas ref="canvasRef" style="width: 40px; height: 40px; border-radius: 50%;" />
-			<div class="flex-c">
-				<span style="font-size: 13px; font-weight: 600; color: var(--text)">{{ d.moon_phase }}</span>
-				<span style="font-size: 11px; color: var(--text-muted)">{{ d.moon_illumination?.toFixed(1) }}% illuminated</span>
+			<div v-if="!d" class="w-100 pos-rel br-2 overflow-hidden" style="height: 40px">
+				<Loading />
 			</div>
+			<template v-else>
+				<canvas ref="canvasRef" style="width: 40px; height: 40px; border-radius: 50%;" />
+				<div class="flex-c">
+					<span style="font-size: 13px; font-weight: 600; color: var(--text)">{{ d.moon_phase }}</span>
+					<span style="font-size: 11px; color: var(--text-muted)">{{ d.moon_illumination?.toFixed(1) }}% illuminated</span>
+				</div>
+			</template>
 		</div>
 
 		<div class="divider" />
 
-		<MetricRow label="Next Full Moon" :value="formatDate('MMM D', d.moon_full)" />
-		<MetricRow label="Next New Moon" :value="formatDate('MMM D', d.moon_new)" />
+		<div v-if="!d" class="flex-c p-2 gap-2">
+			<div class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
+			<div class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
+		</div>
+		<template v-else>
+			<MetricRow label="Next Full Moon" :value="formatDate('MMM D', d.moon_full)" />
+			<MetricRow label="Next New Moon" :value="formatDate('MMM D', d.moon_new)" />
+		</template>
 	</div>
 </template>
diff --git a/client/src/components/Precipitation.vue b/client/src/components/Precipitation.vue
index d887af1..8ed9c57 100644
--- a/client/src/components/Precipitation.vue
+++ b/client/src/components/Precipitation.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import Loading from '@/components/Loading.vue';
-import { inject, onMounted, ref } from 'vue';
-import { api } from '../services/api';
+import {inject} from 'vue';
+import {useWeather} from '../services/api';
 
-const d = ref<any>(null);
 const openGraph = inject<(key: string) => void>('openGraph');
-
-onMounted(async () => d.value = await api.current());
+const {current: d} = useWeather();
 </script>
 
 <style scoped lang="scss">
@@ -59,7 +57,7 @@ onMounted(async () => d.value = await api.current());
 </style>
 
 <template>
-	<div class="precip-card" v-if="d">
+	<div class="precip-card">
 		<div class="card-title">🌧️ Precipitation</div>
 
 		<div class="stat-grid">
diff --git a/client/src/components/Seismic.vue b/client/src/components/Seismic.vue
index 3414968..1cd2125 100644
--- a/client/src/components/Seismic.vue
+++ b/client/src/components/Seismic.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Loading from '@/components/Loading.vue';
 import {ref, onMounted, onUnmounted} from 'vue';
 import {api} from '../services/api';
 import MetricRow from './MetricRow.vue';
@@ -49,15 +50,19 @@ svg { width: 100%; height: 60px; overflow: visible; }
 </style>
 
 <template>
-	<div class="card" v-if="d">
+	<div class="card">
 		<div class="card-title">🫨 Seismic</div>
-
-		<MetricRow label="Magnitude" :value="d.magnitude?.toFixed(1)" metric-key="magnitude" :data="d" />
-
-		<svg :viewBox="`0 0 ${W} ${H}`" preserveAspectRatio="none">
-			<line :x1="0" :y1="H/2" :x2="W" :y2="H/2" stroke="var(--border)" stroke-width="1" />
-			<path :d="toPath(history)" fill="none" stroke="var(--accent)" stroke-width="1.5" />
-		</svg>
-
+		<div v-if="!d" class="p-2">
+			<div class="w-100 pos-rel br-2 overflow-hidden" style="height: 80px">
+				<Loading />
+			</div>
+		</div>
+		<template v-else>
+			<MetricRow label="Magnitude" :value="d.magnitude?.toFixed(1)" metric-key="magnitude" :data="d" />
+			<svg :viewBox="`0 0 ${W} ${H}`" preserveAspectRatio="none">
+				<line :x1="0" :y1="H/2" :x2="W" :y2="H/2" stroke="var(--border)" stroke-width="1" />
+				<path :d="toPath(history)" fill="none" stroke="var(--accent)" stroke-width="1.5" />
+			</svg>
+		</template>
 	</div>
 </template>
diff --git a/client/src/components/Sun.vue b/client/src/components/Sun.vue
index b3b0a10..b813721 100644
--- a/client/src/components/Sun.vue
+++ b/client/src/components/Sun.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import Loading from '@/components/Loading.vue';
-import { inject, onMounted, ref, computed } from 'vue';
-import { api } from '../services/api';
+import {inject, computed } from 'vue';
+import {useWeather} from '../services/api';
 
-const data = ref<any>(null);
 const openGraph = inject<(key: string) => void>('openGraph');
-
-onMounted(async () => data.value = await api.current());
+const {current: data} = useWeather();
 
 const W = 320, H = 120, HORIZON = 45;
 
@@ -22,41 +20,42 @@ const arc = computed(() => {
 	const start  = noon - 12 * 3600 * 1000;
 	const end    = noon + 12 * 3600 * 1000;
 
-	const riseT = (rise - start) / (end - start);
-	const setT  = (set  - start) / (end - start);
-	const dayPct = Math.max(0, Math.min(1, (now - rise) / dayLen));
+	const riseT   = (rise - start) / (end - start);
+	const setT    = (set  - start) / (end - start);
+	const dayPct  = Math.max(0, Math.min(1, (now - rise) / dayLen));
+	const sunT    = riseT + dayPct * (setT - riseT);
+
+	// After sunset, continue tracking sun below horizon
+	const totalPct = Math.max(0, Math.min(1, (now - start) / (end - start)));
 
 	const x1 = 0, x2 = W;
 	const totalW = x2 - x1;
+	const amplitude = H * 0.45;
+	const midY = H / 2;
+
+	const sineY = (t: number) => midY - Math.sin(t * Math.PI * 2 - Math.PI / 2) * amplitude;
+	const horizonY = sineY(riseT);
 
 	const pts = Array.from({ length: 201 }, (_, i) => {
 		const t = i / 200;
-		const x = x1 + totalW * t;
-		// Remap t so the arc peaks between riseT and setT only
-		const arcT = (t - riseT) / (setT - riseT);
-		const y = arcT >= 0 && arcT <= 1
-			? HORIZON - Math.sin(arcT * Math.PI) * HORIZON
-			: HORIZON + Math.abs(Math.sin(arcT * Math.PI)) * (HORIZON * 0.3); // subtle below-horizon dip
-		return { x, y };
+		return { x: x1 + totalW * t, y: sineY(t) };
 	});
 
-	const sunT   = riseT + dayPct * (setT - riseT);
-	const splitIdx = Math.round(sunT * 200);
-	const { x: cx, y: cy } = pts[splitIdx];
+	const splitIdx = Math.round(totalPct * 200);
+	const { x: cx, y: cy } = pts[Math.min(splitIdx, 200)];
 
 	const traveledPts = pts.slice(0, splitIdx + 1);
 	const filledPath = traveledPts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ')
-		+ ` L${traveledPts[traveledPts.length - 1].x.toFixed(1)},${HORIZON}`
-		+ ` L${x1},${HORIZON} Z`;
+		+ ` L${traveledPts[traveledPts.length - 1].x.toFixed(1)},${horizonY}`
+		+ ` L${x1},${horizonY} Z`;
 
 	const remainPts = pts.slice(splitIdx);
 	const remainPath = remainPts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
 
 	const riseX = x1 + totalW * riseT;
 	const setX  = x1 + totalW * setT;
-	const noonX = x1 + totalW * 0.5;
 
-	return { filledPath, remainPath, cx, cy, pct: dayPct, riseX, setX, noonX };
+	return { filledPath, remainPath, cx, cy, pct: dayPct, riseX, setX, horizonY };
 });
 </script>
 
@@ -64,28 +63,32 @@ const arc = computed(() => {
 	<div class="sun-card">
 		<div class="card-title">🌅 Sun</div>
 
-		<!-- Top labels -->
-		<div class="sun-top-labels" v-if="data">
-			<div>
-				<div class="stat-label">Sunrise</div>
-				<div class="stat-value">{{ new Date(data.sunrise).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}</div>
-			</div>
-			<div style="text-align:right">
-				<div class="stat-label">Sunset</div>
-				<div class="stat-value">{{ new Date(data.sunset).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}</div>
-			</div>
-		</div>
+		<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden mx-auto" style="width: 100%; aspect-ratio: 1.5"><Loading /></div>
 
-		<svg :viewBox="`0 0 ${W} ${H}`" preserveAspectRatio="none">
-			<!-- Filled traveled area -->
-			<path v-if="arc.filledPath" :d="arc.filledPath" fill="#3b82f6" opacity="0.35" />
-			<!-- Remaining curve stroke -->
-			<path v-if="arc.remainPath" :d="arc.remainPath" fill="none" stroke="#94a3b8" stroke-width="1.5" opacity="0.5" />
-			<!-- Horizon line -->
-			<line :x1="0" :y1="HORIZON" :x2="W" :y2="HORIZON" stroke="var(--border)" stroke-width="1" />
-			<!-- Sun dot -->
-			<circle v-if="data" :cx="arc.cx" :cy="arc.cy" r="8" fill="#f59e0b" class="sun-dot" />
-		</svg>
+		<template v-else>
+			<!-- Top labels -->
+			<div class="sun-top-labels" v-if="data">
+				<div>
+					<div class="stat-label">Sunrise</div>
+					<div class="stat-value">{{ new Date(data.sunrise).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}</div>
+				</div>
+				<div style="text-align:right">
+					<div class="stat-label">Sunset</div>
+					<div class="stat-value">{{ new Date(data.sunset).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}</div>
+				</div>
+			</div>
+
+			<svg :viewBox="`0 0 ${W} ${H}`" preserveAspectRatio="none">
+				<!-- Filled traveled area -->
+				<path v-if="arc.filledPath" :d="arc.filledPath" fill="#3b82f6" opacity="0.35" />
+				<!-- Remaining curve stroke -->
+				<path v-if="arc.remainPath" :d="arc.remainPath" fill="none" stroke="#94a3b8" stroke-width="1.5" opacity="0.5" />
+				<!-- Horizon line -->
+				<line :x1="0" :y1="arc.horizonY" :x2="W" :y2="arc.horizonY" stroke="var(--border)" stroke-width="1" />
+				<!-- Sun dot -->
+				<circle v-if="data" :cx="arc.cx" :cy="arc.cy" r="8" fill="#f59e0b" class="sun-dot" />
+			</svg>
+		</template>
 
 		<div class="divider" />
 
diff --git a/client/src/components/Wind.vue b/client/src/components/Wind.vue
index c9dabd9..e37d7fd 100644
--- a/client/src/components/Wind.vue
+++ b/client/src/components/Wind.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import Loading from '@/components/Loading.vue';
-import { inject, onMounted, ref } from 'vue';
-import { api } from '../services/api';
+import {inject} from 'vue';
+import {useWeather} from '../services/api';
 
-const d = ref<any>(null);
 const openGraph = inject<(key: string) => void>('openGraph');
+const {current: d} = useWeather();
 
 function dir(deg: number) {
 	if(deg > 22.5 && deg <= 67.5) return 'North-East';
@@ -16,8 +16,6 @@ function dir(deg: number) {
 	if(deg > 292.5 && deg <= 337.5) return 'North-West';
 	return 'North';
 }
-
-onMounted(async () => d.value = await api.current());
 </script>
 
 <style scoped lang="scss">
@@ -70,7 +68,7 @@ onMounted(async () => d.value = await api.current());
 </style>
 
 <template>
-	<div class="wind-card" v-if="d">
+	<div class="wind-card">
 		<div class="card-title">🍃 Wind</div>
 
 		<div class="stat-grid">
diff --git a/client/src/services/adsb.ts b/client/src/services/adsb.ts
index 29b6a93..c97c416 100644
--- a/client/src/services/adsb.ts
+++ b/client/src/services/adsb.ts
@@ -1,4 +1,5 @@
-import {BASE} from '@/services/api.ts';
+import { BASE } from '@/services/api.ts'
+import { createApp, ref } from 'vue'
 import Map from 'ol/Map'
 import { Feature } from 'ol'
 import Point from 'ol/geom/Point'
@@ -7,32 +8,12 @@ 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 { adjustedInterval } from '@ztimson/utils'
+import AircraftPopup from '@/components/Aircraft.vue'
 
 const API = BASE + '/api'
 
-const SPEED_UNITS = {
-	knots: { label: 'KTS', convert: (v: number) => Math.round(v) },
-	kph:   { label: 'KPH', convert: (v: number) => Math.round(v * 1.852) },
-	mph:   { label: 'MPH', convert: (v: number) => Math.round(v * 1.15078) },
-}
-
-const ALTITUDE_UNITS = {
-	meters: { label: 'M',   convert: (v: number) => Math.round(v * 0.3048) },
-	feet:   { label: 'FT',  convert: (v: number) => v },
-}
-
-const VERTICAL_UNITS = {
-	mps: { label: 'M/S',  convert: (v: number) => Math.round(v * 0.3048) },
-	fps: { label: 'FT/S', convert: (v: number) => v },
-}
-
-const UNIT_KEY = 'at_units'
-function getUnits() {
-	const s = localStorage.getItem(UNIT_KEY)
-	return s ? JSON.parse(s) : { speed: 'knots', altitude: 'meters', vertical: 'mps' }
-}
-function saveUnits(p: any) { localStorage.setItem(UNIT_KEY, JSON.stringify(p)) }
+let highestZIndex = 1000
 
 function getAltColor(alt: number): [number, number, number] {
 	const a = Math.max(0, alt)
@@ -50,127 +31,10 @@ function getAltColor(alt: number): [number, number, number] {
 	return [Math.round(128 * r), 0, 139]
 }
 
-function buildNavballSvg(data: any): string {
-	const heading         = data.heading ?? 0
-	const airspeedKnots   = data.speed || 0
-	const verticalRateFps = data.climb || 0
-	const groundSpeedFps  = airspeedKnots * 1.68781
-	const pitchRad        = groundSpeedFps > 0 ? Math.atan(verticalRateFps / groundSpeedFps) : 0
-	const pitch           = Math.max(-25, Math.min(25, pitchRad * (180 / Math.PI)))
-
-	const pitchLines: string[] = []
-	for (let p = -30; p <= 30; p += 5) {
-		if (p === 0) continue
-		const isMajor = p % 10 === 0
-		const [start, end] = [85, 115]
-		if (isMajor) {
-			pitchLines.push(`
-                <text x="${start - Math.abs(p) - 5}" y="${104 + pitch * 2.5 - p * 2.5}" fill="#fff" font-size="8" font-weight="bold" text-anchor="end">${Math.abs(p)}</text>
-                <line x1="${start - Math.abs(p)}" y1="${100 + pitch * 2.5 - p * 2.5}" x2="${end + Math.abs(p)}" y2="${100 + pitch * 2.5 - p * 2.5}" stroke="#fff" stroke-width="2"/>
-                <text x="${end + Math.abs(p) + 5}" y="${104 + pitch * 2.5 - p * 2.5}" fill="#fff" font-size="8" font-weight="bold">${Math.abs(p)}</text>
-            `)
-		} else {
-			pitchLines.push(`<line x1="${start}" y1="${100 + pitch * 2.5 - p * 2.5}" x2="${end}" y2="${100 + pitch * 2.5 - p * 2.5}" stroke="#fff" stroke-width="2"/>`)
-		}
-	}
-
-	const rollTicks: string[] = []
-	for (const angle of [-90, -60, -45, -30, -20, -10, 0, 10, 20, 30, 45, 60, 90]) {
-		const rad = angle * Math.PI / 180
-		const a   = Math.abs(angle)
-		if (a === 45) {
-			rollTicks.push(`<circle cx="${100 + 78 * Math.sin(rad)}" cy="${100 - 78 * Math.cos(rad)}" r="2.5" fill="#fff"/>`)
-		} else {
-			const inner = (a === 0 || a % 30 === 0) ? 72 : 77
-			const sw    = (a === 0 || a % 30 === 0) ? 2.5 : 1.5
-			rollTicks.push(`<line x1="${100 + inner * Math.sin(rad)}" y1="${100 - inner * Math.cos(rad)}" x2="${100 + 85 * Math.sin(rad)}" y2="${100 - 85 * Math.cos(rad)}" stroke="#fff" stroke-width="${sw}"/>`)
-		}
-	}
-
-	const compassLabels = [-60, -45, -30, -15, 0, 15, 30, 45, 60].map(offset => {
-		const rad = offset * Math.PI / 180
-		const x   = 100 + 90 * Math.sin(rad)
-		const y   = 100 - 90 * Math.cos(rad)
-		const h   = Math.round((offset + 360) % 360)
-		const lbl = ({ 0: 'N', 90: 'E', 180: 'S', 270: 'W' } as any)[h] || ''
-		return lbl ? `<text x="${x}" y="${y + 4}" text-anchor="middle" fill="#0f0" font-size="13" font-weight="bold">${lbl}</text>` : ''
-	}).join('')
-
-	return `
-        <svg width="200" height="220" viewBox="0 0 200 220">
-            <defs>
-                <clipPath id="navballClip"><circle cx="100" cy="100" r="85"/></clipPath>
-                <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-                    <stop offset="0%"   style="stop-color:#1e90ff"/>
-                    <stop offset="100%" style="stop-color:#4169e1"/>
-                </linearGradient>
-                <linearGradient id="groundGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-                    <stop offset="0%"   style="stop-color:#8b4513"/>
-                    <stop offset="100%" style="stop-color:#654321"/>
-                </linearGradient>
-            </defs>
-            <rect x="77" y="5" width="46" height="18" fill="rgba(0,0,0,0.95)" stroke="#0f0" stroke-width="2" rx="2"/>
-            <text x="100" y="18" text-anchor="middle" fill="#0f0" font-size="14" font-weight="bold">${heading.toFixed(0).padStart(3, '0')}°</text>
-            <g transform="translate(0,25)" clip-path="url(#navballClip)">
-                <rect x="15" y="${15 + pitch * 2.5 - 200}" width="170" height="285" fill="url(#skyGrad)"/>
-                <rect x="15" y="${100 + pitch * 2.5}" width="170" height="285" fill="url(#groundGrad)"/>
-                <line x1="15" y1="${100 + pitch * 2.5}" x2="185" y2="${100 + pitch * 2.5}" stroke="#fff" stroke-width="3"/>
-                ${pitchLines.join('')}
-            </g>
-            <g transform="translate(0,25)">${rollTicks.join('')}</g>
-            <circle cx="100" cy="125" r="85" fill="none" stroke="#0f0" stroke-width="2.5"/>
-            <line x1="40" y1="125" x2="80"  y2="125" stroke="#ff0" stroke-width="3.5"/>
-            <line x1="120" y1="125" x2="160" y2="125" stroke="#ff0" stroke-width="3.5"/>
-            <circle cx="100" cy="125" r="4" fill="none" stroke="#ff0" stroke-width="2.5"/>
-            <g transform="rotate(${-heading} 100 125)">${compassLabels}</g>
-            <polygon points="100,37 95,30 105,30" fill="#ff0"/>
-        </svg>
-    `
-}
-
-function buildGaugeHtml(label: string, value: any, unit: string, type: string): string {
-	return `
-        <div style="margin-bottom:12px">
-            <div style="color:#888;font-size:11px;font-weight:bold;margin-bottom:3px">${label}</div>
-            <div class="at-gauge" data-gauge="${type}" style="padding:6px;background:rgba(0,0,0,0.95);border:2px solid #0f0;border-radius:3px;cursor:pointer;display:flex;align-items:end;justify-content:center;gap:4px">
-                <span style="font-size:20px;font-weight:bold;color:#0f0">${value}</span>
-                <span style="font-size:11px;color:#0f0;margin-bottom:2px">${unit}</span>
-            </div>
-        </div>
-    `
-}
-
-function buildPopupHtml(data: any): string {
-	const prefs    = getUnits()
-	const speed    = SPEED_UNITS[prefs.speed as keyof typeof SPEED_UNITS]
-	const alt      = ALTITUDE_UNITS[prefs.altitude as keyof typeof ALTITUDE_UNITS]
-	const vert     = VERTICAL_UNITS[prefs.vertical as keyof typeof VERTICAL_UNITS]
-	const callsign = data.name?.trim()
-	const altitude = data.alt_baro ?? data.alt_geom ?? 0
-
-	return `
-        <div style="font-family:monospace;color:#ccc;min-width:320px">
-            <div style="padding:12px 16px;border-bottom:1px solid rgba(200,200,220,0.2)">
-                <h3 style="margin:0;color:#7eeee1;font-size:16px">
-                    ✈️ ${callsign
-		? `<a href="https://www.flightaware.com/live/flight/${callsign}" target="_blank" style="color:#6bb6ff;text-decoration:none">${callsign.toUpperCase()}</a>`
-		: 'N/A'}
-                </h3>
-                <div style="font-size:11px;color:#888;margin-top:4px">
-                    ${data.country || ''} • ${data.class || 'Unknown'} • ${data.type || ''}
-                    <span style="float:right">ICAO: ${(data.icao || '').toUpperCase()}</span>
-                </div>
-            </div>
-            <div style="display:flex;gap:16px;padding:12px 16px">
-                <div style="flex:0 0 110px">
-                    ${buildGaugeHtml('Air Speed', speed.convert(data.speed || 0),                                                                      speed.label, 'speed')}
-                    ${buildGaugeHtml('Altitude',  data.landed ? 'LANDED' : alt.convert(altitude), data.landed ? '' : alt.label,   'altitude')}
-                    ${buildGaugeHtml('Climb',     vert.convert(data.climb || 0) >= 0 ? `+${vert.convert(data.climb || 0)}` : vert.convert(data.climb || 0), vert.label, 'vertical')}
-                </div>
-                <div style="flex:1">${buildNavballSvg(data)}</div>
-            </div>
-        </div>
-    `
+interface PopupInstance {
+	planeRef: ReturnType<typeof ref>
+	posRef:   ReturnType<typeof ref>
+	unmount:  () => void
 }
 
 export class AirTrafficLayer {
@@ -178,28 +42,25 @@ export class AirTrafficLayer {
 	private layer!:       VectorLayer<VectorSource>
 	private traceLayers:  Record<string, VectorLayer<VectorSource>> = {}
 	private traceSegs:    Record<string, Feature[]>                 = {}
-	private popups:       Record<string, { el: HTMLDivElement, destroy: () => void }> = {}
-	private historyCache: Record<string, any[]>                     = {}
-	private data:         any[] = []
-	private clickHandler: ((e: any) => void) | null = null
-	private refreshTimer: any = null;
+	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 }
 
-	// ── Public ────────────────────────────────────────────────────────────────
+	// ── Public ──────────────────────────────────────────────────────────────────
 
 	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()
-
 		this.refreshTimer = adjustedInterval(async () => {
 			await this._fetch()
 			this._draw()
@@ -210,19 +71,16 @@ export class AirTrafficLayer {
 	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   = {}
 	}
 
-	// ── Private ───────────────────────────────────────────────────────────────
+	// ── Private ──────────────────────────────────────────────────────────────────
 
 	private async _fetch() {
 		const j = await fetch(`${API}/adsb`).then(r => r.json())
@@ -241,7 +99,6 @@ export class AirTrafficLayer {
 	private _draw() {
 		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])
@@ -266,8 +123,7 @@ export class AirTrafficLayer {
 			const j = await fetch(`${API}/adsb/${icao}`).then(r => r.json())
 			this.historyCache[icao] = j.history || []
 		}
-
-		const history = [...(<any>this.historyCache[icao])]
+		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)
@@ -292,7 +148,7 @@ export class AirTrafficLayer {
 			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 + <any>ec[idx]) / 2))
+			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)
@@ -301,67 +157,46 @@ export class AirTrafficLayer {
 		this.traceSegs[icao] = segs
 	}
 
+	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 }
+	}
+
 	private _openPopup(plane: any) {
 		const icao = plane.icao
 		if (this.popups[icao]) return
 
-		const el    = document.createElement('div')
-		el.style.cssText = `
-            position:absolute; z-index:9999; pointer-events:auto;
-            background:rgba(0,0,0,0.88); border:1px solid rgba(200,200,220,0.3);
-            border-radius:8px; box-shadow:0 4px 24px rgba(0,0,0,0.5); overflow:hidden;
-        `
+		const planeRef = ref(plane)
+		const posRef   = ref(this._calcPopupPos(plane))
 
-		const close         = document.createElement('button')
-		close.innerHTML     = '✕'
-		close.style.cssText = 'position:absolute;top:8px;right:8px;background:none;border:none;color:#888;font-size:14px;cursor:pointer;z-index:1'
-		close.onclick       = () => this._closePopup(icao)
+		const container = document.createElement('div')
+		document.body.appendChild(container)
 
-		el.innerHTML = buildPopupHtml(plane)
-		el.appendChild(close)
-		document.body.appendChild(el)
-		this._positionPopup(el, plane)
-
-		el.querySelectorAll('.at-gauge').forEach(g => {
-			g.addEventListener('click', (e) => {
-				const prefs = getUnits()
-				const type  = (e.currentTarget as HTMLElement).dataset.gauge!
-				if (type === 'speed') {
-					const keys = Object.keys(SPEED_UNITS)
-					prefs.speed = keys[(keys.indexOf(prefs.speed) + 1) % keys.length]
-				} else if (type === 'altitude') {
-					const keys = Object.keys(ALTITUDE_UNITS)
-					prefs.altitude = keys[(keys.indexOf(prefs.altitude) + 1) % keys.length]
-					prefs.vertical = prefs.altitude === 'meters' ? 'mps' : 'fps'
-				} else if (type === 'vertical') {
-					const keys = Object.keys(VERTICAL_UNITS)
-					prefs.vertical = keys[(keys.indexOf(prefs.vertical) + 1) % keys.length]
-					prefs.altitude = prefs.vertical === 'mps' ? 'meters' : 'feet'
-				}
-				saveUnits(prefs)
-				el.innerHTML = buildPopupHtml(plane)
-				el.appendChild(close)
-			})
-			g.addEventListener('mouseenter', e => (e.currentTarget as HTMLElement).style.borderColor = '#0ff')
-			g.addEventListener('mouseleave', e => (e.currentTarget as HTMLElement).style.borderColor = '#0f0')
+		const app = createApp(AircraftPopup, {
+			plane:          planeRef.value,
+			position:       posRef.value,
+			onClose:        () => this._closePopup(icao),
+			onBringToFront: () => {
+				highestZIndex++
+				container.style.zIndex = String(highestZIndex)
+			},
 		})
 
-		this.popups[icao] = { el, destroy: () => el.remove() }
-		this._fetchTrace(plane)
-	}
+		app.mount(container)
 
-	private _positionPopup(el: HTMLDivElement, plane: any) {
-		const pixel = this.map.getPixelFromCoordinate(fromLonLat([plane.longitude, plane.latitude]))
-		if (!pixel) return
-		const rect        = (this.map.getTargetElement() as HTMLElement).getBoundingClientRect()
-		el.style.left     = `${rect.left + <any>pixel[0] + 16}px`
-		el.style.top      = `${rect.top  + <any>pixel[1] - 16}px`
+		this.popups[icao] = {
+			planeRef,
+			posRef,
+			unmount: () => { app.unmount(); container.remove() },
+		}
+		this._fetchTrace(plane)
 	}
 
 	private _closePopup(icao: string) {
 		const popup = this.popups[icao]
-		if (popup) { popup.destroy(); delete 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))
@@ -373,14 +208,8 @@ export class AirTrafficLayer {
 		for (const icao of Object.keys(this.popups)) {
 			const plane = this.data.find(p => p.icao === icao)
 			if (!plane) { this._closePopup(icao); continue }
-			const { el } = <any>this.popups[icao]
-			el.innerHTML  = buildPopupHtml(plane)
-			const close   = document.createElement('button')
-			close.innerHTML     = '✕'
-			close.style.cssText = 'position:absolute;top:8px;right:8px;background:none;border:none;color:#888;font-size:14px;cursor:pointer;z-index:1'
-			close.onclick       = () => this._closePopup(icao)
-			el.appendChild(close)
-			this._positionPopup(el, plane)
+			this.popups[icao].planeRef.value = plane
+			// Don't reposition — user may have dragged it 🎯
 			this._fetchTrace(plane)
 		}
 	}
diff --git a/client/src/services/api.ts b/client/src/services/api.ts
index 2de095f..2ddf213 100644
--- a/client/src/services/api.ts
+++ b/client/src/services/api.ts
@@ -1,8 +1,16 @@
-export const BASE = import.meta.env.DEV ? 'http://10.69.5.23' : '';
+import {ref, onUnmounted} from 'vue';
 
 export type DataRow = Record<string, number | string | null>
 
+export const BASE = import.meta.env.DEV ? 'http://10.69.5.23' : '';
+
 const cache: any = {};
+const current = ref<any>(null);
+const hourly = ref<any[]>([]);
+const daily = ref<any[]>([]);
+
+let interval: ReturnType<typeof setInterval>;
+let refCount = 0;
 
 async function get<T>(path: string, params: Record<string, string> = {}): Promise<T> {
 	const url = new URL(`${BASE}${path}`, window.location.origin);
@@ -29,3 +37,24 @@ export const api = {
 		...(fields ? {fields} : {})
 	}),
 };
+
+async function refresh() {
+	const start = new Date(), end = new Date();
+	start.setDate(start.getDate() + 1);
+	end.setDate(end.getDate() + 5);
+	current.value = await api.current();
+	return {current}
+}
+
+export function useWeather(ms = 5 * 60_000) {
+	if(++refCount === 1) {
+		refresh();
+		interval = setInterval(refresh, ms);
+	}
+
+	onUnmounted(() => {
+		if(--refCount === 0) clearInterval(interval);
+	});
+
+	return {current, hourly, daily, refresh};
+}
diff --git a/client/src/views/Dashboard.vue b/client/src/views/Dashboard.vue
index 37b6679..4aad0e2 100644
--- a/client/src/views/Dashboard.vue
+++ b/client/src/views/Dashboard.vue
@@ -6,7 +6,7 @@ import Precipitation from '@/components/Precipitation.vue';
 import Seismic from '@/components/Seismic.vue';
 import Sun from '@/components/Sun.vue';
 import Wind from '@/components/Wind.vue';
-import {BASE} from '@/services/api.ts';
+import {BASE, useWeather} from '@/services/api.ts';
 import {formatDate} from '@ztimson/utils';
 import {onMounted, onUnmounted, provide, ref} from 'vue';
 import MapView from '../components/MapView.vue';
@@ -23,6 +23,7 @@ let clock: ReturnType<typeof setInterval>;
 provide('openGraph', (key: string) => selectedMetric.value = key);
 
 onMounted(async () => {
+	useWeather();
 	clock = setInterval(() => {
 		day.value = formatDate('dddd');
 		date.value = formatDate('MMMM D');
diff --git a/server/src/server.mjs b/server/src/server.mjs
index 0fb95cc..f645aaf 100644
--- a/server/src/server.mjs
+++ b/server/src/server.mjs
@@ -56,20 +56,11 @@ app.get('/api/current', async (req, res) => {
 	const space     = getCelestialCurrent(coords.latitude, coords.longitude)
 	const condition = getWeatherCondition(Object.assign(sensors, space))
 
-	const forecast = await getForecast();
-	const merged = {
-		...(forecast?.summary ? {
-			precipitation_chance: forecast.summary.precipitation_chance,
-			temperature_max:      forecast.summary.temperature_max,
-			temperature_min:      forecast.summary.temperature_min,
-			uv_index_max:         forecast.summary.uv_index,
-		} : {}),
+	res.json(filterFields({
 		...condition,
 		...sensors,
 		...space,
-	}
-
-	res.json(filterFields(merged, fields))
+	}, fields))
 })
 
 // ── Hourly ────────────────────────────────────────────────────────────────────
@@ -148,10 +139,10 @@ app.get('/api/position', async (req, res) => {
 // ── Space ─────────────────────────────────────────────────────────────────────
 
 // app.get('/api/aurora', async (req, res) => res.json(await Aurora.get()));
-app.get('/api/space', async (req, res) => {
-	const {fields} = req.query;
-	res.json(filterFields(await getSpaceWeather(), fields));
-});
+// app.get('/api/space', async (req, res) => {
+// 	const {fields} = req.query;
+// 	res.json(filterFields(await getSpaceWeather(), fields));
+// });
 
 // ── ADSB Proxy ────────────────────────────────────────────────────────────────