diff --git a/weather-voodoo/src/lib/components/MapView.svelte b/weather-voodoo/src/lib/components/MapView.svelte
index b4f252b..3b43cb9 100644
--- a/weather-voodoo/src/lib/components/MapView.svelte
+++ b/weather-voodoo/src/lib/components/MapView.svelte
@@ -3,6 +3,23 @@
 	import maplibregl, { type Map as MlMap, type Marker } from 'maplibre-gl';
 	import 'maplibre-gl/dist/maplibre-gl.css';
 	import type { LatLng } from '$lib/types';
+	import type { RelativeWindClass } from '$lib/wind';
+	import { mapViewport } from '$lib/map-viewport.svelte';
+
+	export type WindChevron = {
+		point: LatLng;
+		/** Bearing of travel at this point (deg from N). Used for tooltip context. */
+		headingDeg: number;
+		/** Wind speed at the selected hour, knots. */
+		windKn: number;
+		/** Meteorological wind direction (from), deg from N. Used to orient the arrow. */
+		windDirDeg: number;
+		/** Wind angle relative to heading, in [-180, 180]. */
+		relWindDeg: number;
+		cls: RelativeWindClass;
+		/** Localized class label for tooltip ("Head", "Tail-Cross", …). */
+		classLabel: string;
+	};
 
 	type Props = {
 		markers?: LatLng[];
@@ -17,6 +34,17 @@
 		draggableMarkers?: boolean;
 		highlightIdx?: number | null;
 		height?: string;
+		/**
+		 * Wind chevrons rendered along the route — one per sample point, sized
+		 * for handlebar/glance-able use on mobile. Color = relative-wind class,
+		 * arrow direction = absolute wind direction (where the wind is going).
+		 */
+		windChevrons?: WindChevron[];
+		/** Show user's live GPS position as a pulsing blue dot. */
+		showUserLocation?: boolean;
+		/** Suppress auto-fitBounds. Use during editing when markers change
+		 *  incrementally and the user is positioning the map manually. */
+		suppressAutoFit?: boolean;
 	};
 
 	let {
@@ -31,12 +59,19 @@
 		polylineColor = '#38bdf8',
 		draggableMarkers = false,
 		highlightIdx = null,
-		height = '440px'
+		height = '600px',
+		windChevrons,
+		showUserLocation = false,
+		suppressAutoFit = false
 	}: Props = $props();
 
 	let el: HTMLDivElement | null = null;
 	let map: MlMap | null = null;
 	let drawn: Marker[] = [];
+	let drawnChevrons: Marker[] = [];
+	let userLocMarker: Marker | null = null;
+	let geoWatchId: number | null = null;
+	let lastFitKey = '';
 
 	const STYLE = {
 		version: 8 as const,
@@ -51,13 +86,51 @@
 		layers: [{ id: 'osm', type: 'raster' as const, source: 'osm' }]
 	};
 
+	let locating = $state(false);
+
+	function locateMe() {
+		if (!map || !('geolocation' in navigator)) return;
+		locating = true;
+		navigator.geolocation.getCurrentPosition(
+			(pos) => {
+				if (!map) return;
+				const { latitude: lat, longitude: lon } = pos.coords;
+				map.flyTo({ center: [lon, lat], zoom: Math.max(map.getZoom(), 12), duration: 600 });
+				mapViewport.center = { lat, lon };
+				mapViewport.zoom = Math.max(map.getZoom(), 12);
+				locating = false;
+			},
+			() => { locating = false; },
+			{ enableHighAccuracy: true, timeout: 10_000 }
+		);
+	}
+
 	onMount(() => {
 		if (!el) return;
+
+		// Use shared viewport if available (persisted from another tab), else
+		// fall back to markers or the default view.
+		const initCenter: [number, number] = mapViewport.center
+			? [mapViewport.center.lon, mapViewport.center.lat]
+			: markers.length
+				? [markers[0].lon, markers[0].lat]
+				: [98.85, 7.9];
+		const initZoom = mapViewport.zoom
+			?? (markers.length ? 9 : 4);
+
 		map = new maplibregl.Map({
 			container: el,
 			style: STYLE,
-			center: markers.length ? [markers[0].lon, markers[0].lat] : [98.85, 7.9],
-			zoom: markers.length ? 9 : 4
+			center: initCenter,
+			zoom: initZoom
+		});
+
+		// Write viewport changes back to the shared store on every move/zoom.
+		map.on('moveend', () => {
+			if (!map) return;
+			const c = map.getCenter();
+			mapViewport.center = { lat: c.lat, lon: c.lng };
+			mapViewport.zoom = map.getZoom();
 		});
 
 		if (interactive) {
@@ -89,6 +162,8 @@
 		}
 
 		renderMarkersAndLine();
+		renderWindChevrons();
+		startGeolocation();
 
 		// Re-measure when the container itself resizes (e.g. fullscreen toggle,
 		// orientation change). maplibre listens to window resize but not
@@ -105,6 +180,9 @@
 
 	onDestroy(() => {
 		drawn.forEach((m) => m.remove());
+		drawnChevrons.forEach((m) => m.remove());
+		userLocMarker?.remove();
+		if (geoWatchId !== null) navigator.geolocation.clearWatch(geoWatchId);
 		resizeObs?.disconnect();
 		resizeObs = null;
 		map?.remove();
@@ -121,6 +199,39 @@
 		renderMarkersAndLine();
 	});
 
+	$effect(() => {
+		void windChevrons;
+		renderWindChevrons();
+	});
+
+	function buildUserDot(): HTMLElement {
+		const dot = document.createElement('div');
+		dot.className = 'user-loc-dot';
+		dot.setAttribute('aria-label', 'Your location');
+		dot.innerHTML = '<div class="user-loc-pulse"></div><div class="user-loc-core"></div>';
+		return dot;
+	}
+
+	function startGeolocation() {
+		if (!showUserLocation || !map || !('geolocation' in navigator)) return;
+		geoWatchId = navigator.geolocation.watchPosition(
+			(pos) => {
+				if (!map) return;
+				const lng = pos.coords.longitude;
+				const lat = pos.coords.latitude;
+				if (!userLocMarker) {
+					userLocMarker = new maplibregl.Marker({ element: buildUserDot(), anchor: 'center' })
+						.setLngLat([lng, lat])
+						.addTo(map);
+				} else {
+					userLocMarker.setLngLat([lng, lat]);
+				}
+			},
+			() => {},
+			{ enableHighAccuracy: true, maximumAge: 10_000, timeout: 15_000 }
+		);
+	}
+
 	function renderMarkersAndLine() {
 		if (!map) return;
 		drawn.forEach((m) => m.remove());
@@ -150,17 +261,22 @@
 			drawn.push(marker);
 		}
 
-		// Camera fits don't require the style to be loaded — run them eagerly so
-		// shared links open already framed on the route. Prefer polyline bounds
-		// (a routed sea/trail polyline can detour well outside the markers' bbox)
-		// and fall back to marker bounds when no route line is available yet.
-		const fitTarget = polyline && polyline.length >= 2 ? polyline : markers;
-		if (fitTarget.length >= 2) {
-			const bounds = new maplibregl.LngLatBounds();
-			fitTarget.forEach((p) => bounds.extend([p.lon, p.lat]));
-			map.fitBounds(bounds, { padding: 60, maxZoom: 11, duration: 400 });
-		} else if (markers.length === 1) {
-			map.flyTo({ center: [markers[0].lon, markers[0].lat], zoom: 11, duration: 400 });
+		// Only fit bounds when the markers/polyline actually change (new route).
+		// If the user panned or zoomed manually (or the shared viewport is set),
+		// don't override their position on every re-render.
+		if (!suppressAutoFit) {
+			const fitTarget = polyline && polyline.length >= 2 ? polyline : markers;
+			const fitKey = fitTarget.map((p) => `${p.lat.toFixed(4)},${p.lon.toFixed(4)}`).join('|');
+			if (fitKey && fitKey !== lastFitKey) {
+				lastFitKey = fitKey;
+				if (fitTarget.length >= 2) {
+					const bounds = new maplibregl.LngLatBounds();
+					fitTarget.forEach((p) => bounds.extend([p.lon, p.lat]));
+					map.fitBounds(bounds, { padding: 60, maxZoom: 11, duration: 400 });
+				} else if (markers.length === 1) {
+					map.flyTo({ center: [markers[0].lon, markers[0].lat], zoom: 11, duration: 400 });
+				}
+			}
 		}
 
 		// The route source/layer needs the MapLibre style to be loaded first; on a
@@ -173,6 +289,50 @@
 		}
 	}
 
+	function buildChevronElement(c: WindChevron): HTMLElement {
+		// Where the wind is going in absolute compass terms (meteo windDir is
+		// the direction the wind is FROM, so the arrow points to windDir + 180).
+		const arrowRot = c.windDirDeg + 180;
+		const speed = Math.round(c.windKn);
+		const wrap = document.createElement('div');
+		wrap.className = 'wind-chevron';
+		wrap.dataset.cls = c.cls;
+		const tooltipParts = [
+			`${c.classLabel} · ${speed} kn`,
+			`wind from ${Math.round(((c.windDirDeg % 360) + 360) % 360)}°`,
+			`heading ${Math.round(((c.headingDeg % 360) + 360) % 360)}°`,
+			`relative ${Math.round(c.relWindDeg)}°`
+		];
+		const tooltip = tooltipParts.join(' · ');
+		wrap.setAttribute('title', tooltip);
+		wrap.setAttribute('aria-label', tooltip);
+		wrap.setAttribute('role', 'img');
+		wrap.innerHTML = `
+			<div class="wc-ring">
+				<svg viewBox="0 0 24 24" style="transform: rotate(${arrowRot}deg)" aria-hidden="true">
+					<path d="M12 3 L12 21 M5 10 L12 3 L19 10" fill="none" stroke="#fff"
+						stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/>
+				</svg>
+			</div>
+			<div class="wc-label">${speed}<span class="wc-unit">kn</span></div>
+		`;
+		return wrap;
+	}
+
+	function renderWindChevrons() {
+		if (!map) return;
+		drawnChevrons.forEach((m) => m.remove());
+		drawnChevrons = [];
+		if (!windChevrons || windChevrons.length === 0) return;
+		for (const c of windChevrons) {
+			const element = buildChevronElement(c);
+			const marker = new maplibregl.Marker({ element, anchor: 'center' })
+				.setLngLat([c.point.lon, c.point.lat])
+				.addTo(map);
+			drawnChevrons.push(marker);
+		}
+	}
+
 	function renderRouteLayer() {
 		if (!map) return;
 		if (map.getLayer('route-line')) map.removeLayer('route-line');
@@ -200,9 +360,78 @@
 	}
 </script>
 
-<div bind:this={el} class="map" style="height: {height}"></div>
+<div class="map-wrap" style="height: {height}">
+	<div bind:this={el} class="map"></div>
+	{#if interactive}
+		<button
+			type="button"
+			class="locate-btn"
+			class:locating
+			onclick={locateMe}
+			aria-label="Go to my location"
+		>
+			<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+				<circle cx="12" cy="12" r="4" />
+				<line x1="12" y1="2" x2="12" y2="6" />
+				<line x1="12" y1="18" x2="12" y2="22" />
+				<line x1="2" y1="12" x2="6" y2="12" />
+				<line x1="18" y1="12" x2="22" y2="12" />
+			</svg>
+		</button>
+	{/if}
+</div>
 
 <style>
+	.map-wrap {
+		position: relative;
+		width: 100%;
+		border-radius: 8px;
+		overflow: hidden;
+	}
+	.map {
+		width: 100%;
+		height: 100%;
+	}
+	@media (max-width: 720px) {
+		.map-wrap {
+			max-height: 55vh;
+		}
+	}
+	.locate-btn {
+		all: unset;
+		position: absolute;
+		bottom: 32px;
+		right: 12px;
+		z-index: 10;
+		width: 40px;
+		height: 40px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgba(15, 23, 42, 0.9);
+		border: 1.5px solid rgba(148, 163, 184, 0.3);
+		border-radius: 8px;
+		color: #e2e8f0;
+		cursor: pointer;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+		transition: background 120ms, border-color 120ms;
+	}
+	.locate-btn:hover {
+		background: rgba(15, 23, 42, 1);
+		border-color: rgba(255, 255, 255, 0.4);
+		color: #fff;
+	}
+	.locate-btn:active {
+		background: rgba(59, 130, 246, 0.3);
+	}
+	.locate-btn.locating {
+		color: #3b82f6;
+		animation: loc-btn-pulse 1s ease-in-out infinite;
+	}
+	@keyframes loc-btn-pulse {
+		0%, 100% { opacity: 1; }
+		50% { opacity: 0.5; }
+	}
 	:global(.marker-highlighted) {
 		filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.9));
 		transform-origin: center bottom;
@@ -211,4 +440,121 @@
 		transform: scale(1.3);
 		transform-origin: center bottom;
 	}
+
+	/*
+	 * Wind chevrons — sized for handlebar-mounted glance use. Dark backdrop
+	 * survives bright sun and water/land tile transitions; the colored ring
+	 * carries the head/tail/cross meaning while the white arrow stays readable
+	 * against any background.
+	 */
+	:global(.wind-chevron) {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 2px;
+		pointer-events: auto;
+		cursor: help;
+		user-select: none;
+		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
+		transition: transform 160ms ease;
+	}
+	:global(.wind-chevron:hover) {
+		transform: scale(1.08);
+		z-index: 30;
+	}
+	:global(.wind-chevron .wc-ring) {
+		width: 48px;
+		height: 48px;
+		border-radius: 50%;
+		background: rgba(15, 23, 42, 0.88);
+		border: 4px solid var(--wc-color, #cbd5e1);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+	}
+	:global(.wind-chevron .wc-ring svg) {
+		width: 28px;
+		height: 28px;
+		transition: transform 220ms ease;
+		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
+	}
+	:global(.wind-chevron .wc-label) {
+		font-size: 12px;
+		font-weight: 800;
+		color: #fff;
+		line-height: 1;
+		padding: 2px 6px;
+		background: rgba(15, 23, 42, 0.9);
+		border-radius: 6px;
+		border: 1.5px solid var(--wc-color, #cbd5e1);
+		font-variant-numeric: tabular-nums;
+		letter-spacing: 0.2px;
+		white-space: nowrap;
+	}
+	:global(.wind-chevron .wc-unit) {
+		font-size: 9px;
+		font-weight: 600;
+		opacity: 0.8;
+		margin-left: 1px;
+	}
+	:global(.wind-chevron[data-cls='head']) {
+		--wc-color: #ff5555;
+	}
+	:global(.wind-chevron[data-cls='head-cross']) {
+		--wc-color: #b45309;
+	}
+	:global(.wind-chevron[data-cls='cross']) {
+		--wc-color: #64748b;
+	}
+	:global(.wind-chevron[data-cls='tail-cross']) {
+		--wc-color: #65a30d;
+	}
+	:global(.wind-chevron[data-cls='tail']) {
+		--wc-color: #4ade80;
+	}
+	/* Live GPS blue dot — pulsing ring + solid core */
+	:global(.user-loc-dot) {
+		position: relative;
+		width: 20px;
+		height: 20px;
+		z-index: 15;
+	}
+	:global(.user-loc-core) {
+		position: absolute;
+		top: 4px;
+		left: 4px;
+		width: 12px;
+		height: 12px;
+		background: #3b82f6;
+		border: 2.5px solid #fff;
+		border-radius: 50%;
+		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+	}
+	:global(.user-loc-pulse) {
+		position: absolute;
+		inset: -6px;
+		border-radius: 50%;
+		background: rgba(59, 130, 246, 0.25);
+		animation: loc-pulse 2s ease-out infinite;
+	}
+	@keyframes loc-pulse {
+		0% { transform: scale(0.6); opacity: 1; }
+		100% { transform: scale(2.2); opacity: 0; }
+	}
+	@media (max-width: 720px) {
+		:global(.wind-chevron .wc-ring) {
+			width: 42px;
+			height: 42px;
+			border-width: 3px;
+		}
+		:global(.wind-chevron .wc-ring svg) {
+			width: 24px;
+			height: 24px;
+		}
+		:global(.wind-chevron .wc-label) {
+			font-size: 11px;
+			padding: 1.5px 5px;
+		}
+	}
 </style>
diff --git a/weather-voodoo/src/lib/components/RouteView.svelte b/weather-voodoo/src/lib/components/RouteView.svelte
index 766d372..015f8e4 100644
--- a/weather-voodoo/src/lib/components/RouteView.svelte
+++ b/weather-voodoo/src/lib/components/RouteView.svelte
@@ -3,13 +3,17 @@
 	import PlaceSearch from './PlaceSearch.svelte';
 	import PlacesChips from './PlacesChips.svelte';
 	import MapView from './MapView.svelte';
+	import WindMapOverlay from './WindMapOverlay.svelte';
+	import WindCompass from './WindCompass.svelte';
 	import DayTabs from './DayTabs.svelte';
 	import ForecastTable from './ForecastTable.svelte';
 	import TripFinder from './TripFinder.svelte';
 	import { filterHoursForDay, localIsoDate } from '$lib/time';
 	import { addRecent } from '$lib/client/recentPlaces.svelte';
 	import { t } from '$lib/i18n/index.svelte';
-	import type { DaylightDay, FusedHour, LabeledPoint, DayKey } from '$lib/types';
+	import { chevronsForHour, pickNowHour, worstClass } from '$lib/wind-map';
+	import type { RelativeWindClass } from '$lib/wind';
+	import type { DaylightDay, FusedHour, LabeledPoint, DayKey, WindSample } from '$lib/types';
 
 	let loading = $state(false);
 	let error = $state<string | null>(null);
@@ -23,8 +27,13 @@
 		daylight: DaylightDay[];
 		polyline: { lat: number; lon: number }[];
 		route: RouteMeta;
+		windSamples: WindSample[];
 	} | null>(null);
 
+	// Currently-selected hour for the on-map wind chevron overlay. null = auto
+	// (use the first hour >= now). Resets when a new route loads.
+	let mapHour = $state<string | null>(null);
+
 	const markers = $derived(
 		[view.from, view.to].filter((m): m is LabeledPoint => m !== null)
 	);
@@ -58,6 +67,7 @@
 					daylight?: DaylightDay[];
 					polyline?: { lat: number; lon: number }[];
 					route?: RouteMeta;
+					windSamples?: WindSample[];
 				};
 				result = {
 					hours: data.hours,
@@ -67,8 +77,11 @@
 						{ lat: from.lat, lon: from.lon },
 						{ lat: to.lat, lon: to.lon }
 					],
-					route: data.route ?? { kind: 'straight' }
+					route: data.route ?? { kind: 'straight' },
+					windSamples: data.windSamples ?? []
 				};
+				// Reset scrubber to "now" whenever a new route comes in.
+				mapHour = null;
 			})
 			.catch((e: unknown) => {
 				if (e instanceof DOMException && e.name === 'AbortError') return;
@@ -87,6 +100,34 @@
 	);
 	const activeMode = $derived(eff.mode);
 
+	// Wind-overlay scrubber state.
+	const hourTimes = $derived(result?.windSamples?.[0]?.hours.map((h) => h.time) ?? []);
+	const nowTime = $derived(hourTimes.length > 0 ? pickNowHour(hourTimes) : null);
+	const selectedTime = $derived(mapHour ?? nowTime ?? hourTimes[0] ?? '');
+	const classLabelMap = $derived<Record<RelativeWindClass, string>>({
+		head: t('wind.head'),
+		'head-cross': t('wind.headCross'),
+		cross: t('wind.cross'),
+		'tail-cross': t('wind.tailCross'),
+		tail: t('wind.tail')
+	});
+	const chevrons = $derived(
+		result && selectedTime
+			? chevronsForHour(result.windSamples, selectedTime, (c) => classLabelMap[c])
+			: []
+	);
+	const verdictKeyMap = $derived<Record<RelativeWindClass, string>>({
+		head: 'windMap.verdict.head',
+		'head-cross': 'windMap.verdict.headCross',
+		cross: 'windMap.verdict.cross',
+		'tail-cross': 'windMap.verdict.tailCross',
+		tail: 'windMap.verdict.tail'
+	});
+	const verdict = $derived.by(() => {
+		const w = worstClass(chevrons);
+		return w ? t(verdictKeyMap[w]) : undefined;
+	});
+
 	let lastFocused: 'from' | 'to' | null = $state(null);
 
 	function pickFrom(p: LabeledPoint) {
@@ -119,6 +160,14 @@
 		view.day = d;
 	}
 
+	let compassVisible = $state(
+		typeof localStorage !== 'undefined' ? localStorage.getItem('wx-compass') !== 'hidden' : true
+	);
+	function setCompassVisible(v: boolean) {
+		compassVisible = v;
+		if (typeof localStorage !== 'undefined') localStorage.setItem('wx-compass', v ? 'visible' : 'hidden');
+	}
+
 	let fullscreen = $state(false);
 	function toggleFullscreen() {
 		fullscreen = !fullscreen;
@@ -176,7 +225,44 @@
 </div>
 
 <div class="card map-card" class:loading-overlay={loading} style="padding: 0;">
-	<MapView {markers} {polyline} onPick={onMapPick} height={fullscreen ? '100%' : undefined} />
+	<MapView
+		{markers}
+		{polyline}
+		onPick={onMapPick}
+		height={fullscreen ? '100%' : undefined}
+		showUserLocation={chevrons.length > 0}
+	/>
+	{#if chevrons.length > 0 && hourTimes.length > 0 && selectedTime}
+		<WindMapOverlay
+			{hourTimes}
+			{selectedTime}
+			{nowTime}
+			timezone={result?.timezone}
+			{verdict}
+			onSelect={(t) => (mapHour = t)}
+		/>
+	{/if}
+	{#if chevrons.length > 0}
+		<div class="wind-compass-anchor">
+			{#if compassVisible}
+				<WindCompass
+					relWindDeg={chevrons[0].relWindDeg}
+					windKn={chevrons[0].windKn}
+					cls={chevrons[0].cls}
+					classLabel={chevrons[0].classLabel}
+					onHide={() => setCompassVisible(false)}
+				/>
+			{:else}
+				<button
+					type="button"
+					class="wc-show-btn"
+					onclick={() => setCompassVisible(true)}
+					title={t('windMap.showCompass')}
+					aria-label={t('windMap.showCompass')}
+				>🧭</button>
+			{/if}
+		</div>
+	{/if}
 	{#if loading && view.from && view.to}
 		<div class="map-loading" aria-live="polite">
 			<span class="spinner" aria-hidden="true"></span>
@@ -258,6 +344,31 @@
 	.map-card {
 		position: relative;
 	}
+	.wc-show-btn {
+		all: unset;
+		width: 44px;
+		height: 44px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 22px;
+		background: rgba(15, 23, 42, 0.88);
+		border: 1.5px solid rgba(148, 163, 184, 0.25);
+		border-radius: 50%;
+		cursor: pointer;
+		filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
+	}
+	.wc-show-btn:hover {
+		background: rgba(15, 23, 42, 0.95);
+		border-color: rgba(255, 255, 255, 0.3);
+	}
+	.wind-compass-anchor {
+		position: absolute;
+		bottom: 14px;
+		left: 14px;
+		z-index: 12;
+		pointer-events: auto;
+	}
 	.map-loading {
 		position: absolute;
 		top: 0.6rem;
diff --git a/weather-voodoo/src/lib/components/WaypointsView.svelte b/weather-voodoo/src/lib/components/WaypointsView.svelte
index 5133e27..77f3a78 100644
--- a/weather-voodoo/src/lib/components/WaypointsView.svelte
+++ b/weather-voodoo/src/lib/components/WaypointsView.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
 	import { view, toggleExpanded, effectiveConfig, setDayOverride, resetDayOverride } from '$lib/state.svelte';
 	import MapView from './MapView.svelte';
+	import WindMapOverlay from './WindMapOverlay.svelte';
+	import WindCompass from './WindCompass.svelte';
 	import DayTabs from './DayTabs.svelte';
 	import ForecastTable from './ForecastTable.svelte';
 	import TripFinder from './TripFinder.svelte';
 	import { filterHoursForDay, localIsoDate } from '$lib/time';
 	import { t } from '$lib/i18n/index.svelte';
-	import type { DaylightDay, FusedHour, LabeledPoint, DayKey } from '$lib/types';
+	import { chevronsForHour, pickNowHour, worstClass } from '$lib/wind-map';
+	import type { RelativeWindClass } from '$lib/wind';
+	import type { DaylightDay, FusedHour, LabeledPoint, DayKey, WindSample } from '$lib/types';
 
 	type RouteMeta = {
 		kind: 'waypoints';
@@ -25,8 +29,11 @@
 		daylight: DaylightDay[];
 		polyline: { lat: number; lon: number }[];
 		route: RouteMeta;
+		windSamples: WindSample[];
 	} | null>(null);
 
+	let mapHour = $state<string | null>(null);
+
 	// Edit-mode buffer. While `editing === true`, taps on the map mutate
 	// `draft` only — we don't fetch routes or forecasts until the user
 	// presses Done. On Done we commit `draft` into `view.waypoints`, which
@@ -96,14 +103,17 @@
 					daylight?: DaylightDay[];
 					polyline: { lat: number; lon: number }[];
 					route: RouteMeta;
+					windSamples?: WindSample[];
 				};
 				result = {
 					hours: data.hours,
 					timezone: data.timezone,
 					daylight: data.daylight ?? [],
 					polyline: data.polyline,
-					route: data.route
+					route: data.route,
+					windSamples: data.windSamples ?? []
 				};
+				mapHour = null;
 			})
 			.catch((e: unknown) => {
 				if (e instanceof DOMException && e.name === 'AbortError') return;
@@ -120,6 +130,37 @@
 	const dayHours = $derived(result ? filterHoursForDay(result.hours, view.day, todayIso) : []);
 	const activeMode = $derived(eff.mode);
 
+	// Wind-overlay scrubber state. Chevrons are hidden while editing the
+	// track (the polyline isn't real yet).
+	const hourTimes = $derived(
+		!editing ? (result?.windSamples?.[0]?.hours.map((h) => h.time) ?? []) : []
+	);
+	const nowTime = $derived(hourTimes.length > 0 ? pickNowHour(hourTimes) : null);
+	const selectedTime = $derived(mapHour ?? nowTime ?? hourTimes[0] ?? '');
+	const classLabelMap = $derived<Record<RelativeWindClass, string>>({
+		head: t('wind.head'),
+		'head-cross': t('wind.headCross'),
+		cross: t('wind.cross'),
+		'tail-cross': t('wind.tailCross'),
+		tail: t('wind.tail')
+	});
+	const chevrons = $derived(
+		!editing && result && selectedTime
+			? chevronsForHour(result.windSamples, selectedTime, (c) => classLabelMap[c])
+			: []
+	);
+	const verdictKeyMap = $derived<Record<RelativeWindClass, string>>({
+		head: 'windMap.verdict.head',
+		'head-cross': 'windMap.verdict.headCross',
+		cross: 'windMap.verdict.cross',
+		'tail-cross': 'windMap.verdict.tailCross',
+		tail: 'windMap.verdict.tail'
+	});
+	const verdict = $derived.by(() => {
+		const w = worstClass(chevrons);
+		return w ? t(verdictKeyMap[w]) : undefined;
+	});
+
 	let selectedIdx: number | null = $state(null);
 	let hoveredIdx: number | null = $state(null);
 	// Marker to visually highlight on the map: selection wins over hover.
@@ -192,6 +233,16 @@
 		removeDraft(selectedIdx);
 	}
 
+	let showHelpDialog = $state(false);
+
+	let compassVisible = $state(
+		typeof localStorage !== 'undefined' ? localStorage.getItem('wx-compass') !== 'hidden' : true
+	);
+	function setCompassVisible(v: boolean) {
+		compassVisible = v;
+		if (typeof localStorage !== 'undefined') localStorage.setItem('wx-compass', v ? 'visible' : 'hidden');
+	}
+
 	function onDay(d: DayKey) {
 		view.day = d;
 	}
@@ -206,7 +257,14 @@
 	<div class="wp-header">
 		<div class="muted wp-help">
 			{#if editing}
-				{@html t('waypoints.editHelp')}
+				<span>{t('waypoints.editHelpShort')}</span>
+				<button
+					type="button"
+					class="wp-help-btn"
+					onclick={() => (showHelpDialog = true)}
+					title={t('waypoints.editHelpTitle')}
+					aria-label={t('waypoints.editHelpTitle')}
+				>?</button>
 			{:else}
 				{@html t('waypoints.committedHelp')}
 			{/if}
@@ -307,13 +365,46 @@
 		polylineColor={editing ? '#ef4444' : '#38bdf8'}
 		highlightIdx={editing ? mapHighlightIdx : null}
 		height={fullscreen ? '100%' : undefined}
+		suppressAutoFit={editing}
+		showUserLocation={chevrons.length > 0}
 	/>
+	{#if chevrons.length > 0 && hourTimes.length > 0 && selectedTime}
+		<WindMapOverlay
+			{hourTimes}
+			{selectedTime}
+			{nowTime}
+			timezone={result?.timezone}
+			{verdict}
+			onSelect={(t) => (mapHour = t)}
+		/>
+	{/if}
 	{#if !editing && loading && view.waypoints.length >= 2}
 		<div class="map-loading" aria-live="polite">
 			<span class="spinner" aria-hidden="true"></span>
 			{t('route.computing')}
 		</div>
 	{/if}
+	{#if chevrons.length > 0}
+		<div class="wind-compass-anchor">
+			{#if compassVisible}
+				<WindCompass
+					relWindDeg={chevrons[0].relWindDeg}
+					windKn={chevrons[0].windKn}
+					cls={chevrons[0].cls}
+					classLabel={chevrons[0].classLabel}
+					onHide={() => setCompassVisible(false)}
+				/>
+			{:else}
+				<button
+					type="button"
+					class="wc-show-btn"
+					onclick={() => setCompassVisible(true)}
+					title={t('windMap.showCompass')}
+					aria-label={t('windMap.showCompass')}
+				>🧭</button>
+			{/if}
+		</div>
+	{/if}
 	{#if editing && selectedIdx !== null && draft[selectedIdx]}
 		<div class="wp-popup" role="dialog" aria-label={t('waypoints.editAriaLabel')}>
 			<div class="wp-popup-title">
@@ -388,6 +479,28 @@
 	</div>
 {/if}
 
+{#if showHelpDialog}
+	<div
+		class="wp-help-backdrop"
+		role="presentation"
+		onclick={() => (showHelpDialog = false)}
+		onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') showHelpDialog = false; }}
+	>
+		<div
+			class="wp-help-dialog"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="wp-help-title"
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => e.stopPropagation()}
+		>
+			<h3 id="wp-help-title">{t('waypoints.editHelpTitle')}</h3>
+			<div class="wp-help-body">{@html t('waypoints.editHelp')}</div>
+			<button type="button" class="btn-ghost" onclick={() => (showHelpDialog = false)}>OK</button>
+		</div>
+	</div>
+{/if}
+
 <style>
 	/* .map-stage + .map-fs-btn live in app.css */
 	.wp-header {
@@ -401,6 +514,66 @@
 		flex: 1 1 240px;
 		font-size: 0.88em;
 		line-height: 1.4;
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		flex-wrap: wrap;
+	}
+	.wp-help-btn {
+		all: unset;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 22px;
+		height: 22px;
+		font-size: 13px;
+		font-weight: 700;
+		border-radius: 50%;
+		border: 1.5px solid var(--fg-dim, #94a3b8);
+		color: var(--fg-dim, #94a3b8);
+		cursor: pointer;
+		flex-shrink: 0;
+	}
+	.wp-help-btn:hover {
+		background: rgba(255, 255, 255, 0.08);
+		color: var(--fg);
+		border-color: var(--fg);
+	}
+	.wp-help-btn:focus-visible {
+		outline: 2px solid var(--good, #38bdf8);
+		outline-offset: 2px;
+	}
+	.wp-help-backdrop {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.55);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 1rem;
+		z-index: 1000;
+	}
+	.wp-help-dialog {
+		background: var(--bg-elev, var(--bg));
+		color: var(--fg);
+		border: 1px solid var(--border);
+		border-radius: 12px;
+		padding: 1rem 1.2rem;
+		max-width: 24rem;
+		width: 100%;
+		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+	}
+	.wp-help-dialog h3 {
+		margin: 0 0 0.5rem 0;
+		font-size: 1rem;
+	}
+	.wp-help-body {
+		font-size: 0.9em;
+		line-height: 1.5;
+		margin-bottom: 0.8rem;
+	}
+	.wp-help-dialog .btn-ghost {
+		padding: 0.35rem 0.8rem;
 	}
 	.wp-cta {
 		display: flex;
@@ -549,6 +722,31 @@
 	.map-card {
 		position: relative;
 	}
+	.wind-compass-anchor {
+		position: absolute;
+		bottom: 14px;
+		left: 14px;
+		z-index: 12;
+		pointer-events: auto;
+	}
+	.wc-show-btn {
+		all: unset;
+		width: 44px;
+		height: 44px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 22px;
+		background: rgba(15, 23, 42, 0.88);
+		border: 1.5px solid rgba(148, 163, 184, 0.25);
+		border-radius: 50%;
+		cursor: pointer;
+		filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
+	}
+	.wc-show-btn:hover {
+		background: rgba(15, 23, 42, 0.95);
+		border-color: rgba(255, 255, 255, 0.3);
+	}
 	.map-loading {
 		position: absolute;
 		top: 0.6rem;
diff --git a/weather-voodoo/src/lib/components/WindCompass.svelte b/weather-voodoo/src/lib/components/WindCompass.svelte
new file mode 100644
index 0000000..5982cb5
--- /dev/null
+++ b/weather-voodoo/src/lib/components/WindCompass.svelte
@@ -0,0 +1,314 @@
+<script lang="ts">
+	import type { RelativeWindClass } from '$lib/wind';
+	import { t } from '$lib/i18n/index.svelte';
+
+	type Props = {
+		relWindDeg: number;
+		windKn: number;
+		cls: RelativeWindClass;
+		classLabel: string;
+		onHide: () => void;
+	};
+
+	let { relWindDeg, windKn, cls, classLabel, onHide }: Props = $props();
+
+	const CX = 80;
+	const CY = 80;
+	const R = 74;
+	const RING = 18;
+	const RI = R - RING / 2;
+	const INNER_R = 26;
+
+	function arc(startDeg: number, endDeg: number): string {
+		const toRad = (d: number) => ((d - 90) * Math.PI) / 180;
+		const x1 = CX + RI * Math.cos(toRad(startDeg));
+		const y1 = CY + RI * Math.sin(toRad(startDeg));
+		const x2 = CX + RI * Math.cos(toRad(endDeg));
+		const y2 = CY + RI * Math.sin(toRad(endDeg));
+		const large = endDeg - startDeg > 180 ? 1 : 0;
+		return `M ${x1.toFixed(1)} ${y1.toFixed(1)} A ${RI} ${RI} 0 ${large} 1 ${x2.toFixed(1)} ${y2.toFixed(1)}`;
+	}
+
+	function labelPos(deg: number, r: number): { x: number; y: number } {
+		const rad = (deg - 90) * Math.PI / 180;
+		return { x: CX + r * Math.cos(rad), y: CY + r * Math.sin(rad) };
+	}
+
+	const zones: { start: number; end: number; color: string; id: RelativeWindClass; label: string }[] = [
+		{ start: -30, end: 30, color: '#ff5555', id: 'head', label: 'H' },
+		{ start: 30, end: 60, color: '#b45309', id: 'head-cross', label: '' },
+		{ start: -60, end: -30, color: '#b45309', id: 'head-cross', label: '' },
+		{ start: 60, end: 120, color: '#64748b', id: 'cross', label: '×' },
+		{ start: -120, end: -60, color: '#64748b', id: 'cross', label: '×' },
+		{ start: 120, end: 150, color: '#65a30d', id: 'tail-cross', label: '' },
+		{ start: -150, end: -120, color: '#65a30d', id: 'tail-cross', label: '' },
+		{ start: 150, end: 210, color: '#4ade80', id: 'tail', label: 'T' }
+	];
+
+	const arrowAngle = $derived(relWindDeg + 180);
+
+	const ARROW_START = INNER_R + 5;
+	const ARROW_TIP = R - RING + 2;
+
+	const COLORS: Record<RelativeWindClass, string> = {
+		head: '#ff5555',
+		'head-cross': '#b45309',
+		cross: '#64748b',
+		'tail-cross': '#65a30d',
+		tail: '#4ade80'
+	};
+
+	const labelColor = $derived(COLORS[cls]);
+
+	let showDetail = $state(false);
+</script>
+
+<div class="wc-wrap">
+	<button
+		type="button"
+		class="wc-hide-btn"
+		onclick={(e) => { e.stopPropagation(); onHide(); }}
+		aria-label={t('windMap.hideCompass')}
+		title={t('windMap.hideCompass')}
+	>×</button>
+
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="wc-compass"
+		onclick={() => (showDetail = !showDetail)}
+		onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') showDetail = !showDetail; }}
+		role="button"
+		tabindex="0"
+		aria-label="{classLabel} · {Math.round(windKn)} kn"
+	>
+		<svg viewBox="0 0 160 160" aria-hidden="true">
+			<defs>
+				<filter id="arrow-glow">
+					<feDropShadow dx="0" dy="0" stdDeviation="2.5" flood-color="{labelColor}" flood-opacity="0.7" />
+				</filter>
+				<filter id="zone-glow">
+					<feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="{labelColor}" flood-opacity="0.5" />
+				</filter>
+			</defs>
+
+			<!-- Dark background -->
+			<circle cx={CX} cy={CY} r={R} fill="rgba(15, 23, 42, 0.93)" />
+
+			<!-- Inner glow matching active class -->
+			<circle cx={CX} cy={CY} r={R - RING - 1} fill={labelColor} opacity="0.08" />
+
+			<!-- Zone arcs — inactive very dim, active glows -->
+			{#each zones as z}
+				<path
+					d={arc(z.start, z.end)}
+					stroke={z.color}
+					stroke-width={RING}
+					fill="none"
+					stroke-linecap="butt"
+					opacity={z.id === cls ? 1 : 0.15}
+					filter={z.id === cls ? 'url(#zone-glow)' : 'none'}
+				/>
+			{/each}
+
+			<!-- Zone dividers -->
+			{#each [-150, -120, -60, -30, 30, 60, 120, 150] as deg}
+				{@const rad = (deg - 90) * Math.PI / 180}
+				<line
+					x1={CX + (RI - RING / 2) * Math.cos(rad)}
+					y1={CY + (RI - RING / 2) * Math.sin(rad)}
+					x2={CX + (RI + RING / 2) * Math.cos(rad)}
+					y2={CY + (RI + RING / 2) * Math.sin(rad)}
+					stroke="rgba(15, 23, 42, 0.85)"
+					stroke-width="2"
+				/>
+			{/each}
+
+			<!-- Zone labels on the ring -->
+			{#each zones as z}
+				{#if z.label}
+					{@const mid = (z.start + z.end) / 2}
+					{@const pos = labelPos(mid, RI)}
+					<text
+						x={pos.x} y={pos.y}
+						text-anchor="middle" dominant-baseline="central"
+						fill={z.id === cls ? '#fff' : z.color}
+						font-size="11" font-weight="800"
+						font-family="system-ui, sans-serif"
+						opacity={z.id === cls ? 1 : 0.5}
+					>{z.label}</text>
+				{/if}
+			{/each}
+
+			<!-- "YOU" heading triangle at top -->
+			<polygon points="{CX},{CY - R + 2} {CX - 7},{CY - R + 13} {CX + 7},{CY - R + 13}"
+				fill="white" opacity="0.95" />
+
+			<!-- Wind arrow — bold, glowing with the class color -->
+			<g transform="rotate({arrowAngle}, {CX}, {CY})" class="wc-arrow" filter="url(#arrow-glow)">
+				<line
+					x1={CX} y1={CY - ARROW_START}
+					x2={CX} y2={CY - ARROW_TIP + 12}
+					stroke="white"
+					stroke-width="5.5"
+					stroke-linecap="round"
+				/>
+				<polygon
+					points="{CX},{CY - ARROW_TIP} {CX - 9},{CY - ARROW_TIP + 16} {CX + 9},{CY - ARROW_TIP + 16}"
+					fill="white"
+				/>
+			</g>
+
+			<!-- Center speed — just the number, big -->
+			<text x={CX} y={CY + 2} text-anchor="middle" dominant-baseline="central"
+				fill="white" font-size="30" font-weight="900" font-family="system-ui, sans-serif"
+				style="font-variant-numeric: tabular-nums;"
+			>{Math.round(windKn)}</text>
+		</svg>
+		<div class="wc-class" style="color: {labelColor}; border-color: {labelColor}">{classLabel}</div>
+	</div>
+</div>
+
+{#if showDetail}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="wc-detail-backdrop"
+		onclick={() => (showDetail = false)}
+		onkeydown={(e) => { if (e.key === 'Escape') showDetail = false; }}
+	>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="wc-detail" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
+			<div class="wc-detail-row">
+				<span class="wc-detail-label">{t('wind.head')}/{t('wind.tail')}</span>
+				<span class="wc-detail-value" style="color: {labelColor}">{classLabel}</span>
+			</div>
+			<div class="wc-detail-row">
+				<span class="wc-detail-label">{t('table.windGust')}</span>
+				<span class="wc-detail-value">{Math.round(windKn)} kn</span>
+			</div>
+			<div class="wc-detail-row">
+				<span class="wc-detail-label">{t('windMap.verdict.relAngle')}</span>
+				<span class="wc-detail-value">{Math.round(relWindDeg)}°</span>
+			</div>
+			<button type="button" class="btn-ghost wc-detail-close" onclick={() => (showDetail = false)}>OK</button>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.wc-wrap {
+		position: relative;
+	}
+	.wc-hide-btn {
+		all: unset;
+		position: absolute;
+		top: -4px;
+		right: -4px;
+		z-index: 2;
+		width: 26px;
+		height: 26px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 15px;
+		font-weight: 700;
+		color: #94a3b8;
+		background: rgba(15, 23, 42, 0.9);
+		border: 1.5px solid rgba(148, 163, 184, 0.3);
+		border-radius: 50%;
+		cursor: pointer;
+		line-height: 1;
+	}
+	.wc-hide-btn:hover {
+		color: #fff;
+		border-color: rgba(255, 255, 255, 0.4);
+	}
+	.wc-compass {
+		width: 160px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 3px;
+		filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
+		cursor: pointer;
+		user-select: none;
+	}
+	.wc-compass:focus-visible {
+		outline: 2px solid #38bdf8;
+		outline-offset: 4px;
+		border-radius: 50%;
+	}
+	.wc-compass svg {
+		width: 160px;
+		height: 160px;
+	}
+	:global(.wc-arrow) {
+		transition: transform 280ms ease;
+	}
+	.wc-class {
+		font-size: 14px;
+		font-weight: 800;
+		text-transform: uppercase;
+		letter-spacing: 1px;
+		text-align: center;
+		padding: 4px 12px;
+		background: rgba(15, 23, 42, 0.92);
+		border: 1.5px solid;
+		border-radius: 6px;
+		line-height: 1;
+	}
+	.wc-detail-backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: 1100;
+		display: flex;
+		align-items: flex-end;
+		justify-content: center;
+		padding: 1rem;
+		background: rgba(0, 0, 0, 0.4);
+	}
+	.wc-detail {
+		background: var(--bg-elev, var(--bg, #1e293b));
+		color: var(--fg, #e2e8f0);
+		border: 1px solid var(--border, #334155);
+		border-radius: 12px;
+		padding: 0.8rem 1rem;
+		width: 100%;
+		max-width: 20rem;
+		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
+		display: flex;
+		flex-direction: column;
+		gap: 0.4rem;
+	}
+	.wc-detail-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 0.92em;
+	}
+	.wc-detail-label {
+		color: var(--fg-dim, #94a3b8);
+		font-weight: 500;
+	}
+	.wc-detail-value {
+		font-weight: 700;
+		font-variant-numeric: tabular-nums;
+	}
+	.wc-detail-close {
+		margin-top: 0.3rem;
+		align-self: center;
+		padding: 0.3rem 1rem;
+	}
+	@media (max-width: 720px) {
+		.wc-compass {
+			width: 136px;
+		}
+		.wc-compass svg {
+			width: 136px;
+			height: 136px;
+		}
+		.wc-class {
+			font-size: 12px;
+			padding: 3px 9px;
+		}
+	}
+</style>
diff --git a/weather-voodoo/src/lib/components/WindIndicator.svelte b/weather-voodoo/src/lib/components/WindIndicator.svelte
index 58aa140..4c12a5d 100644
--- a/weather-voodoo/src/lib/components/WindIndicator.svelte
+++ b/weather-voodoo/src/lib/components/WindIndicator.svelte
@@ -54,24 +54,24 @@
 		transform-origin: 50% 50%;
 	}
 	.rw[data-cls='head'] {
-		background: rgba(248, 113, 113, 0.18);
-		color: #fca5a5;
+		background: rgba(255, 85, 85, 0.22);
+		color: #ff8888;
 	}
 	.rw[data-cls='head-cross'] {
-		background: rgba(251, 146, 60, 0.18);
-		color: #fdba74;
+		background: rgba(180, 83, 9, 0.18);
+		color: #d97706;
 	}
 	.rw[data-cls='cross'] {
-		background: rgba(148, 163, 184, 0.18);
-		color: #cbd5e1;
+		background: rgba(100, 116, 139, 0.18);
+		color: #94a3b8;
 	}
 	.rw[data-cls='tail-cross'] {
-		background: rgba(132, 204, 22, 0.2);
-		color: #bef264;
+		background: rgba(101, 163, 13, 0.18);
+		color: #84cc16;
 	}
 	.rw[data-cls='tail'] {
-		background: rgba(34, 197, 94, 0.22);
-		color: #86efac;
+		background: rgba(74, 222, 128, 0.25);
+		color: #4ade80;
 	}
 	@media (max-width: 720px) {
 		.rw {
diff --git a/weather-voodoo/src/lib/components/WindMapOverlay.svelte b/weather-voodoo/src/lib/components/WindMapOverlay.svelte
new file mode 100644
index 0000000..7697b8b
--- /dev/null
+++ b/weather-voodoo/src/lib/components/WindMapOverlay.svelte
@@ -0,0 +1,245 @@
+<script lang="ts">
+	import { t } from '$lib/i18n/index.svelte';
+
+	type Props = {
+		/** All hour timestamps (ISO local) available to scrub through. */
+		hourTimes: string[];
+		/** Currently selected hour (must be in hourTimes). */
+		selectedTime: string;
+		/** "Now" hour (the first hourTimes entry that is >= now). */
+		nowTime: string | null;
+		timezone?: string;
+		/** Optional one-line forecast verdict from the parent. */
+		verdict?: string;
+		onSelect: (time: string) => void;
+	};
+
+	let { hourTimes, selectedTime, nowTime, timezone, verdict, onSelect }: Props = $props();
+
+	const idx = $derived(hourTimes.indexOf(selectedTime));
+	const canPrev = $derived(idx > 0);
+	const canNext = $derived(idx >= 0 && idx < hourTimes.length - 1);
+	const isNow = $derived(selectedTime === nowTime);
+
+	function fmtLabel(iso: string): string {
+		if (!iso) return '';
+		const d = new Date(iso + ':00Z');
+		if (Number.isNaN(d.getTime())) {
+			const m = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/.exec(iso);
+			if (!m) return iso;
+			return `${m[2]}-${m[3]} ${m[4]}:${m[5]}`;
+		}
+		// Use the iso strings directly — they're already in destination tz.
+		const m = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/.exec(iso);
+		if (!m) return iso;
+		const dayName = new Date(`${m[1]}-${m[2]}-${m[3]}T12:00:00Z`).toLocaleDateString(undefined, {
+			weekday: 'short'
+		});
+		return `${dayName.toUpperCase()} ${m[4]}:${m[5]}`;
+	}
+
+	function step(dir: -1 | 1) {
+		const j = idx + dir;
+		if (j >= 0 && j < hourTimes.length) onSelect(hourTimes[j]);
+	}
+
+	function jumpToNow() {
+		if (nowTime) onSelect(nowTime);
+	}
+</script>
+
+<div
+	class="wm-overlay"
+	role="group"
+	aria-label={t('windMap.regionLabel')}
+>
+	<div class="wm-pill">
+		<button
+			type="button"
+			class="wm-step"
+			disabled={!canPrev}
+			onclick={(e) => {
+				e.stopPropagation();
+				step(-1);
+			}}
+			aria-label={t('windMap.prevHour')}
+			title={t('windMap.prevHour')}
+		>
+			◀
+		</button>
+		<button
+			type="button"
+			class="wm-label"
+			onclick={(e) => {
+				e.stopPropagation();
+				jumpToNow();
+			}}
+			class:is-now={isNow}
+			title={isNow ? t('windMap.nowTitle') : t('windMap.jumpNowTitle')}
+		>
+			{#if isNow}
+				<span class="wm-now-badge">{t('windMap.now')}</span>
+			{/if}
+			<span class="wm-time">{fmtLabel(selectedTime)}</span>
+			{#if timezone}
+				<span class="wm-tz">{timezone}</span>
+			{/if}
+		</button>
+		<button
+			type="button"
+			class="wm-step"
+			disabled={!canNext}
+			onclick={(e) => {
+				e.stopPropagation();
+				step(1);
+			}}
+			aria-label={t('windMap.nextHour')}
+			title={t('windMap.nextHour')}
+		>
+			▶
+		</button>
+	</div>
+	{#if verdict}
+		<div class="wm-verdict" aria-live="polite">{verdict}</div>
+	{/if}
+</div>
+
+<style>
+	.wm-overlay {
+		position: absolute;
+		top: 12px;
+		left: 50%;
+		transform: translateX(-50%);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+		pointer-events: none;
+		z-index: 12;
+		max-width: calc(100% - 100px); /* leave room for map controls */
+	}
+	.wm-overlay > * {
+		pointer-events: auto;
+	}
+	.wm-pill {
+		display: flex;
+		align-items: stretch;
+		background: rgba(15, 23, 42, 0.88);
+		backdrop-filter: blur(8px);
+		-webkit-backdrop-filter: blur(8px);
+		border: 1px solid rgba(255, 255, 255, 0.12);
+		border-radius: 999px;
+		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+		overflow: hidden;
+	}
+	.wm-step {
+		all: unset;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 48px;
+		min-height: 48px;
+		font-size: 1rem;
+		color: #fff;
+		cursor: pointer;
+		opacity: 0.95;
+		transition: background 120ms ease, opacity 120ms ease;
+	}
+	.wm-step:hover:not(:disabled) {
+		background: rgba(255, 255, 255, 0.08);
+	}
+	.wm-step:active:not(:disabled) {
+		background: rgba(255, 255, 255, 0.16);
+	}
+	.wm-step:disabled {
+		opacity: 0.3;
+		cursor: not-allowed;
+	}
+	.wm-step:focus-visible {
+		outline: 2px solid #38bdf8;
+		outline-offset: -2px;
+	}
+	.wm-label {
+		all: unset;
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 4px 12px;
+		min-width: 130px;
+		min-height: 48px;
+		color: #fff;
+		line-height: 1.05;
+		text-align: center;
+		transition: background 120ms ease;
+	}
+	.wm-label:hover {
+		background: rgba(255, 255, 255, 0.06);
+	}
+	.wm-label.is-now {
+		background: rgba(34, 197, 94, 0.18);
+	}
+	.wm-label:focus-visible {
+		outline: 2px solid #38bdf8;
+		outline-offset: -2px;
+	}
+	.wm-now-badge {
+		display: inline-block;
+		padding: 1px 7px;
+		font-size: 9px;
+		font-weight: 800;
+		letter-spacing: 0.8px;
+		background: #4ade80;
+		color: #052e16;
+		border-radius: 4px;
+		margin-bottom: 2px;
+	}
+	.wm-time {
+		font-size: 15px;
+		font-weight: 700;
+		font-variant-numeric: tabular-nums;
+		letter-spacing: 0.3px;
+	}
+	.wm-tz {
+		font-size: 10px;
+		opacity: 0.65;
+		margin-top: 1px;
+		letter-spacing: 0.2px;
+	}
+	.wm-verdict {
+		background: rgba(15, 23, 42, 0.85);
+		backdrop-filter: blur(6px);
+		-webkit-backdrop-filter: blur(6px);
+		color: #e2e8f0;
+		font-size: 12px;
+		font-weight: 500;
+		padding: 5px 12px;
+		border-radius: 999px;
+		border: 1px solid rgba(255, 255, 255, 0.08);
+		max-width: 100%;
+		text-align: center;
+		line-height: 1.3;
+	}
+	@media (max-width: 720px) {
+		.wm-overlay {
+			top: 8px;
+			gap: 6px;
+		}
+		.wm-step {
+			min-width: 44px;
+			min-height: 44px;
+		}
+		.wm-label {
+			min-width: 110px;
+			min-height: 44px;
+			padding: 3px 10px;
+		}
+		.wm-time {
+			font-size: 13px;
+		}
+		.wm-tz {
+			display: none;
+		}
+	}
+</style>
diff --git a/weather-voodoo/src/lib/i18n/en.ts b/weather-voodoo/src/lib/i18n/en.ts
index 8e7f276..51dfa38 100644
--- a/weather-voodoo/src/lib/i18n/en.ts
+++ b/weather-voodoo/src/lib/i18n/en.ts
@@ -77,6 +77,8 @@ export type Dict = {
 	};
 	waypoints: {
 		editHelp: string;
+		editHelpShort: string;
+		editHelpTitle: string;
 		committedHelp: string;
 		cancel: string;
 		done: string;
@@ -302,6 +304,24 @@ export type Dict = {
 		tail: string;
 		relativeTooltip: string;
 	};
+	windMap: {
+		regionLabel: string;
+		now: string;
+		nowTitle: string;
+		jumpNowTitle: string;
+		prevHour: string;
+		nextHour: string;
+		hideCompass: string;
+		showCompass: string;
+		relAngle: string;
+		verdict: {
+			head: string;
+			headCross: string;
+			cross: string;
+			tailCross: string;
+			tail: string;
+		};
+	};
 };
 
 export const en: Dict = {
@@ -390,6 +410,8 @@ export const en: Dict = {
 	},
 	waypoints: {
 		editHelp: '<strong>Tap the map</strong> to add a waypoint. To edit one, <strong>tap its red marker</strong> on the map or <strong>tap its chip in the list below</strong> — reorder, delete and move-to options open in a dialog. You can also drag a red marker directly (long-press on mobile). Straight-line preview shown while editing — press <strong>✓ Done</strong> to compute the real route and forecast.',
+		editHelpShort: 'Tap the map to add waypoints. Press ✓ Done when ready.',
+		editHelpTitle: 'How to use waypoints',
 		committedHelp: '<strong>Track committed.</strong> Press <strong>✎ Change waypoints</strong> to edit.',
 		cancel: 'Cancel',
 		done: '✓ Done',
@@ -623,5 +645,23 @@ export const en: Dict = {
 		tailCross: 'Tail-Cross',
 		tail: 'Tail',
 		relativeTooltip: '{cls} wind ({deg}° relative to direction of travel)'
+	},
+	windMap: {
+		regionLabel: 'Wind along route — use arrow keys to scrub through hours',
+		now: 'NOW',
+		nowTitle: 'Showing wind for the current hour',
+		jumpNowTitle: 'Jump back to the current hour',
+		prevHour: 'Previous hour',
+		nextHour: 'Next hour',
+		hideCompass: 'Hide wind compass',
+		showCompass: 'Show wind compass',
+		relAngle: 'Relative angle',
+		verdict: {
+			head: 'Head wind along the route — tough going',
+			headCross: 'Head-cross wind — fighting it',
+			cross: 'Cross wind — watch your balance',
+			tailCross: 'Tail-cross wind — pushing you along',
+			tail: 'Tail wind — free speed'
+		}
 	}
 };
diff --git a/weather-voodoo/src/lib/i18n/ro.ts b/weather-voodoo/src/lib/i18n/ro.ts
index 9f21b87..588693c 100644
--- a/weather-voodoo/src/lib/i18n/ro.ts
+++ b/weather-voodoo/src/lib/i18n/ro.ts
@@ -86,6 +86,8 @@ export const ro: Dict = {
 	},
 	waypoints: {
 		editHelp: '<strong>Apasă pe hartă</strong> pentru a adăuga un punct de trecere. Pentru a edita unul, <strong>apasă pinul roșu</strong> de pe hartă sau <strong>apasă chip-ul din lista de mai jos</strong> — opțiunile de reordonare, ștergere și mutare se deschid într-un dialog. Poți și trage direct un pin roșu (apăsare lungă pe mobil). Previzualizare în linie dreaptă în timpul editării — apasă <strong>✓ Gata</strong> pentru a calcula ruta și prognoza reale.',
+		editHelpShort: 'Apasă pe hartă pentru a adăuga puncte. Apasă ✓ Gata când ești pregătit.',
+		editHelpTitle: 'Cum se folosesc punctele de trecere',
 		committedHelp: '<strong>Traseu confirmat.</strong> Apasă <strong>✎ Modifică punctele</strong> pentru a edita.',
 		cancel: 'Anulează',
 		done: '✓ Gata',
@@ -319,5 +321,23 @@ export const ro: Dict = {
 		tailCross: 'Spate-lateral',
 		tail: 'Spate',
 		relativeTooltip: '{cls} ({deg}° față de direcția de deplasare)'
+	},
+	windMap: {
+		regionLabel: 'Vânt de-a lungul rutei — folosește săgețile pentru a parcurge orele',
+		now: 'ACUM',
+		nowTitle: 'Se afișează vântul pentru ora curentă',
+		jumpNowTitle: 'Revino la ora curentă',
+		prevHour: 'Ora anterioară',
+		nextHour: 'Ora următoare',
+		hideCompass: 'Ascunde busola vânt',
+		showCompass: 'Arată busola vânt',
+		relAngle: 'Unghi relativ',
+		verdict: {
+			head: 'Vânt din față pe traseu — pedalat greu',
+			headCross: 'Vânt din față-lateral — te lupți cu el',
+			cross: 'Vânt lateral — atenție la echilibru',
+			tailCross: 'Vânt din spate-lateral — te împinge înainte',
+			tail: 'Vânt din spate — viteză gratuită'
+		}
 	}
 };
diff --git a/weather-voodoo/src/lib/i18n/th.ts b/weather-voodoo/src/lib/i18n/th.ts
index b653b39..5b7102a 100644
--- a/weather-voodoo/src/lib/i18n/th.ts
+++ b/weather-voodoo/src/lib/i18n/th.ts
@@ -86,6 +86,8 @@ export const th: Dict = {
 	},
 	waypoints: {
 		editHelp: '<strong>แตะแผนที่</strong>เพื่อเพิ่มจุดผ่าน หากต้องการแก้ไข <strong>แตะหมุดสีแดง</strong>บนแผนที่หรือ<strong>แตะชิปในรายการด้านล่าง</strong> — ตัวเลือกจัดลำดับ ลบ และย้ายจะเปิดในกล่องโต้ตอบ คุณสามารถลากหมุดสีแดงโดยตรงได้ (กดค้างบนมือถือ) แสดงเส้นตรงตัวอย่างขณะแก้ไข — กด <strong>✓ เสร็จ</strong> เพื่อคำนวณเส้นทางและพยากรณ์จริง',
+		editHelpShort: 'แตะแผนที่เพื่อเพิ่มจุดผ่าน กด ✓ เสร็จ เมื่อพร้อม',
+		editHelpTitle: 'วิธีใช้จุดผ่าน',
 		committedHelp: '<strong>บันทึกเส้นทางแล้ว</strong> กด <strong>✎ เปลี่ยนจุดผ่าน</strong> เพื่อแก้ไข',
 		cancel: 'ยกเลิก',
 		done: '✓ เสร็จ',
@@ -319,5 +321,23 @@ export const th: Dict = {
 		tailCross: 'ลมส่งเฉียง',
 		tail: 'ลมส่ง',
 		relativeTooltip: '{cls} ({deg}° เทียบกับทิศทางการเดินทาง)'
+	},
+	windMap: {
+		regionLabel: 'ลมตามเส้นทาง — ใช้ปุ่มลูกศรเพื่อเลื่อนชั่วโมง',
+		now: 'ตอนนี้',
+		nowTitle: 'กำลังแสดงลมสำหรับชั่วโมงปัจจุบัน',
+		jumpNowTitle: 'กลับไปยังชั่วโมงปัจจุบัน',
+		prevHour: 'ชั่วโมงก่อนหน้า',
+		nextHour: 'ชั่วโมงถัดไป',
+		hideCompass: 'ซ่อนเข็มทิศลม',
+		showCompass: 'แสดงเข็มทิศลม',
+		relAngle: 'มุมสัมพัทธ์',
+		verdict: {
+			head: 'ลมต้านตลอดเส้นทาง — ปั่นยาก',
+			headCross: 'ลมต้านเฉียง — ฝืนพอตัว',
+			cross: 'ลมข้าง — ระวังการทรงตัว',
+			tailCross: 'ลมส่งเฉียง — ดันคุณไปข้างหน้า',
+			tail: 'ลมส่ง — ฟรีแรง'
+		}
 	}
 };
diff --git a/weather-voodoo/src/lib/map-viewport.svelte.ts b/weather-voodoo/src/lib/map-viewport.svelte.ts
new file mode 100644
index 0000000..3fc7fd6
--- /dev/null
+++ b/weather-voodoo/src/lib/map-viewport.svelte.ts
@@ -0,0 +1,15 @@
+/**
+ * Shared reactive map viewport — persists center + zoom across tab switches
+ * (Route / Fixed / Waypoints) so the user doesn't lose their position when
+ * switching views. Not URL-serialized (viewport is ephemeral).
+ */
+
+let _center = $state<{ lat: number; lon: number } | null>(null);
+let _zoom = $state<number | null>(null);
+
+export const mapViewport = {
+	get center() { return _center; },
+	set center(v) { _center = v; },
+	get zoom() { return _zoom; },
+	set zoom(v) { _zoom = v; },
+};
diff --git a/weather-voodoo/src/lib/types.ts b/weather-voodoo/src/lib/types.ts
index 762dc7c..dae7519 100644
--- a/weather-voodoo/src/lib/types.ts
+++ b/weather-voodoo/src/lib/types.ts
@@ -73,6 +73,18 @@ export type FusedHour = ForecastHour & {
 	relWindDeg?: number;
 };
 
+/**
+ * Per-sample-point wind timeseries returned by the route APIs. Powers the
+ * on-map wind chevron overlay (#37 sketch 3) — one chevron per sample point,
+ * oriented and colored by the wind at the currently-selected hour.
+ */
+export type WindSample = {
+	point: LatLng;
+	/** Direction of travel at this sample point, in degrees clockwise from north. */
+	headingDeg: number;
+	hours: { time: string; windDirDeg: number; windKn: number; gustKn: number }[];
+};
+
 export type DaylightDay = { date: string; sunrise: string; sunset: string };
 
 export type Activity =
diff --git a/weather-voodoo/src/lib/wind-map.ts b/weather-voodoo/src/lib/wind-map.ts
new file mode 100644
index 0000000..6957b26
--- /dev/null
+++ b/weather-voodoo/src/lib/wind-map.ts
@@ -0,0 +1,70 @@
+/**
+ * Helpers that turn the API's per-sample-point wind timeseries into the
+ * data shape MapView's chevron overlay consumes (and a small verdict string
+ * for the scrubber overlay).
+ */
+import type { WindChevron } from './components/MapView.svelte';
+import type { WindSample } from './types';
+import { classifyRelativeWind, relativeWindDeg, type RelativeWindClass } from './wind';
+
+/**
+ * Pick the chevron data for a specific hour. Returns null if the hour is not
+ * present in any sample's timeseries (e.g. samples disagree on hour range).
+ */
+export function chevronsForHour(
+	samples: WindSample[],
+	time: string,
+	classLabel: (cls: RelativeWindClass) => string
+): WindChevron[] {
+	const out: WindChevron[] = [];
+	for (const s of samples) {
+		const h = s.hours.find((x) => x.time === time);
+		if (!h) continue;
+		const rel = relativeWindDeg(h.windDirDeg, s.headingDeg);
+		const cls = classifyRelativeWind(rel);
+		out.push({
+			point: s.point,
+			headingDeg: s.headingDeg,
+			windDirDeg: h.windDirDeg,
+			windKn: h.windKn,
+			relWindDeg: rel,
+			cls,
+			classLabel: classLabel(cls)
+		});
+	}
+	return out;
+}
+
+/**
+ * Pick the default scrubber hour: the first hour timestamp that is
+ * >= the current wall clock. Falls back to the first hour if all are past.
+ * Hour strings are local ISO ("YYYY-MM-DDTHH:00") in the destination's
+ * timezone; for picking "now" we compare to local UTC-ish wall clock which
+ * is good enough for the common case where the user is at/near the route.
+ */
+export function pickNowHour(hourTimes: string[]): string | null {
+	if (hourTimes.length === 0) return null;
+	const now = new Date();
+	// Match local-ish format YYYY-MM-DDTHH:00 against `now`.
+	const pad = (n: number) => n.toString().padStart(2, '0');
+	const nowIso = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(now.getHours())}:00`;
+	for (const t of hourTimes) {
+		if (t >= nowIso) return t;
+	}
+	return hourTimes[0];
+}
+
+/**
+ * Tiny natural-language verdict for the scrubber: the worst relative-wind
+ * class observed across all chevrons at the selected hour. Picks vocabulary
+ * keyed by class — caller maps to localized strings.
+ */
+export function worstClass(chevrons: WindChevron[]): RelativeWindClass | null {
+	if (chevrons.length === 0) return null;
+	const order: RelativeWindClass[] = ['head', 'head-cross', 'cross', 'tail-cross', 'tail'];
+	let worst: RelativeWindClass = 'tail';
+	for (const c of chevrons) {
+		if (order.indexOf(c.cls) < order.indexOf(worst)) worst = c.cls;
+	}
+	return worst;
+}
diff --git a/weather-voodoo/src/routes/api/multi-route/+server.ts b/weather-voodoo/src/routes/api/multi-route/+server.ts
index 129b33f..5589eac 100644
--- a/weather-voodoo/src/routes/api/multi-route/+server.ts
+++ b/weather-voodoo/src/routes/api/multi-route/+server.ts
@@ -107,6 +107,16 @@ export const GET: RequestHandler = async ({ url }) => {
 			})
 		);
 		const hours = fuseRoute(results);
+		const windSamples = results.map((r, i) => ({
+			point: samplePoints[i],
+			headingDeg: sampleHeadings[i],
+			hours: r.forecast.map((h) => ({
+				time: h.time,
+				windDirDeg: h.windDirDeg,
+				windKn: h.windKn,
+				gustKn: h.gustKn
+			}))
+		}));
 		return json(
 			{
 				timezone: results[0]?.timezone ?? 'UTC',
@@ -114,6 +124,7 @@ export const GET: RequestHandler = async ({ url }) => {
 				hours,
 				daylight: results[0]?.daylight ?? [],
 				polyline,
+				windSamples,
 				route: {
 					kind: 'waypoints',
 					legCount: legs.length,
diff --git a/weather-voodoo/src/routes/api/route/+server.ts b/weather-voodoo/src/routes/api/route/+server.ts
index 9e26132..3c56853 100644
--- a/weather-voodoo/src/routes/api/route/+server.ts
+++ b/weather-voodoo/src/routes/api/route/+server.ts
@@ -94,6 +94,16 @@ export const GET: RequestHandler = async ({ url }) => {
 			})
 		);
 		const hours = fuseRoute(results);
+		const windSamples = results.map((r, i) => ({
+			point: points[i],
+			headingDeg: headings[i],
+			hours: r.forecast.map((h) => ({
+				time: h.time,
+				windDirDeg: h.windDirDeg,
+				windKn: h.windKn,
+				gustKn: h.gustKn
+			}))
+		}));
 		return json(
 			{
 				timezone: results[0]?.timezone ?? 'UTC',
@@ -101,7 +111,8 @@ export const GET: RequestHandler = async ({ url }) => {
 				hours,
 				daylight: results[0]?.daylight ?? [],
 				polyline: routePolyline,
-				route: routeMeta
+				route: routeMeta,
+				windSamples
 			},
 			{ headers: { 'cache-control': 'public, s-maxage=600, stale-while-revalidate=3600' } }
 		);
diff --git a/weather-voodoo/tests/wind-map.test.ts b/weather-voodoo/tests/wind-map.test.ts
new file mode 100644
index 0000000..a5b7c98
--- /dev/null
+++ b/weather-voodoo/tests/wind-map.test.ts
@@ -0,0 +1,82 @@
+import { describe, it, expect } from 'vitest';
+import { chevronsForHour, worstClass } from '../src/lib/wind-map';
+import type { WindSample } from '../src/lib/types';
+import type { RelativeWindClass } from '../src/lib/wind';
+
+const labelOf = (c: RelativeWindClass): string =>
+	({
+		head: 'Head',
+		'head-cross': 'Head-Cross',
+		cross: 'Cross',
+		'tail-cross': 'Tail-Cross',
+		tail: 'Tail'
+	})[c];
+
+describe('wind-map', () => {
+	it('chevronsForHour pairs each sample with its hourly wind and classifies', () => {
+		const samples: WindSample[] = [
+			{
+				point: { lat: 7.74, lon: 98.78 },
+				headingDeg: 0, // heading north
+				hours: [
+					{ time: '2026-05-24T08:00', windDirDeg: 0, windKn: 12, gustKn: 18 }, // wind FROM north = head
+					{ time: '2026-05-24T09:00', windDirDeg: 180, windKn: 10, gustKn: 14 } // tail
+				]
+			},
+			{
+				point: { lat: 8.05, lon: 98.81 },
+				headingDeg: 0,
+				hours: [
+					{ time: '2026-05-24T08:00', windDirDeg: 90, windKn: 14, gustKn: 20 }, // cross (right)
+					{ time: '2026-05-24T09:00', windDirDeg: 135, windKn: 8, gustKn: 12 } // tail-cross
+				]
+			}
+		];
+		const chevrons = chevronsForHour(samples, '2026-05-24T08:00', labelOf);
+		expect(chevrons.length).toBe(2);
+		expect(chevrons[0].cls).toBe('head');
+		expect(chevrons[0].classLabel).toBe('Head');
+		expect(chevrons[1].cls).toBe('cross');
+	});
+
+	it('chevronsForHour skips samples that have no matching hour', () => {
+		const samples: WindSample[] = [
+			{
+				point: { lat: 0, lon: 0 },
+				headingDeg: 0,
+				hours: [{ time: '2026-05-24T08:00', windDirDeg: 0, windKn: 10, gustKn: 15 }]
+			},
+			{
+				point: { lat: 1, lon: 1 },
+				headingDeg: 0,
+				hours: [] // empty
+			}
+		];
+		const chevrons = chevronsForHour(samples, '2026-05-24T08:00', labelOf);
+		expect(chevrons.length).toBe(1);
+	});
+
+	it('worstClass picks the most head-on class across chevrons', () => {
+		expect(worstClass([])).toBeNull();
+		const samples: WindSample[] = [
+			{
+				point: { lat: 0, lon: 0 },
+				headingDeg: 0,
+				hours: [
+					{ time: '2026-05-24T08:00', windDirDeg: 180, windKn: 8, gustKn: 12 }, // tail
+					{ time: '2026-05-24T09:00', windDirDeg: 45, windKn: 8, gustKn: 12 } // head-cross
+				]
+			},
+			{
+				point: { lat: 1, lon: 1 },
+				headingDeg: 0,
+				hours: [
+					{ time: '2026-05-24T08:00', windDirDeg: 0, windKn: 10, gustKn: 15 }, // head
+					{ time: '2026-05-24T09:00', windDirDeg: 170, windKn: 10, gustKn: 15 } // tail
+				]
+			}
+		];
+		expect(worstClass(chevronsForHour(samples, '2026-05-24T08:00', labelOf))).toBe('head');
+		expect(worstClass(chevronsForHour(samples, '2026-05-24T09:00', labelOf))).toBe('head-cross');
+	});
+});