compare panel, docs update, wind visualisation

src/routes/predict/+page.svelte

@@ -12,6 +12,7 @@
 		WorkspaceRenderer,
 		workspacesStore,
 	} from '$features/workspaces';
+	import { WindRenderer } from '$features/wind';
 	import { SettingsPanel } from '$features/settings';
 	import { TimeLine } from '$features/timeline';
 	import { t } from '$i18n';
@@ -72,6 +73,7 @@
 	<div style="height: var(--navbar-height);"></div>
 	<MapView bind:this={mapComponent} onReady={handleMapReady}>
 		<WorkspaceRenderer />
+		<WindRenderer />
 
 		<PanelContainer position="left">
 			<TabBar

src/routes/track/+page.svelte

@@ -1,11 +1,20 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { Map as MapView, plotAnimatedMarker, type IMap } from '$map';
+	import { Map as MapView, plotAnimatedMarker, plotPrediction, type IMap } from '$map';
 	import { Navbar } from '$features/auth';
-	import { PanelContainer } from '$ui';
-	import { TelemetryPanel, telemetryStore } from '$features/tracking';
+	import { PanelContainer, CollapsibleCard } from '$ui';
+	import { TelemetryPanel, DeviationChart, telemetryStore } from '$features/tracking';
+	import { workspacesStore } from '$features/workspaces';
+	import { t } from '$i18n';
 	import { requireAuthenticated } from '$auth';
 	import { parseTelemetry } from '$domain';
+	import type { Prediction } from '$domain';
+
+	let selectedId = $state('');
+	const workspacesWithResult = $derived($workspacesStore.items.filter((w) => w.result !== null));
+	const selectedPrediction = $derived<Prediction | null>(
+		workspacesWithResult.find((w) => w.id === selectedId)?.result ?? null,
+	);
 
 	let map = $state<IMap | null>(null);
 	// Tracks whether we've already fitted the map to the initial history load.
@@ -18,6 +27,17 @@
 
 	onDestroy(() => {
 		map?.disposeScene('telemetry');
+		map?.disposeScene('prediction');
+	});
+
+	$effect(() => {
+		if (!map) return;
+		const scene = map.scene('prediction');
+		if (selectedPrediction) {
+			plotPrediction(scene, selectedPrediction, { color: '#1565C0', opacity: 0.7 });
+		} else {
+			scene.clear();
+		}
 	});
 
 	function onMapReady(m: IMap) {
@@ -76,5 +96,24 @@
 		<PanelContainer position="left">
 			<TelemetryPanel />
 		</PanelContainer>
+		<PanelContainer position="right">
+			<CollapsibleCard title={$t('tracking.deviation')}>
+				<div class="mb-2">
+					<label for="forecast-select" class="form-label small mb-1">{$t('tracking.selectForecast')}</label>
+					<select
+						id="forecast-select"
+						class="form-select form-select-sm"
+						bind:value={selectedId}
+						disabled={workspacesWithResult.length === 0}
+					>
+						<option value="">{$t('tracking.noForecast')}</option>
+						{#each workspacesWithResult as w (w.id)}
+							<option value={w.id}>{w.name}</option>
+						{/each}
+					</select>
+				</div>
+				<DeviationChart points={telemetryStore.points} prediction={selectedPrediction} />
+			</CollapsibleCard>
+		</PanelContainer>
 	</MapView>
 </main>