past weather

src/routes/weather/14-day/[location]/+page.svelte

@@ -154,6 +154,11 @@
 		fetchedData ? fetchedData.timestamps.slice(0, validLength).map((t) => t / 1000) : []
 	);
 
+	// Surface a note when the chosen model's ensemble stops short of the request.
+	let fullHours = $derived.by(() => (fetchedData ? fetchedData.timestamps.length : 0));
+	let validDays = $derived(Math.max(0, Math.round(validLength / 24)));
+	let isTrimmed = $derived(fetchedData != null && validLength > 0 && validLength < fullHours - 1);
+
 	interface ChartDef {
 		title?: string;
 		subtitle?: string;
@@ -210,14 +215,6 @@
 					bandTo: varData.min,
 					format: (v) => `${v.toFixed(1)} ${unit}`
 				},
-				{
-					name: 'Min',
-					type: 'line',
-					color: BAND_COLOR,
-					data: varData.min,
-					width: 1,
-					format: (v) => `${v.toFixed(1)} ${unit}`
-				},
 				{
 					name: 'Mean',
 					type: isColumn ? 'bar' : 'line',
@@ -226,6 +223,14 @@
 					width: 3,
 					dashed: !isColumn,
 					format: (v) => `${v.toFixed(1)} ${unit}`
+				},
+				{
+					name: 'Min',
+					type: 'line',
+					color: BAND_COLOR,
+					data: varData.min,
+					width: 1,
+					format: (v) => `${v.toFixed(1)} ${unit}`
 				}
 			];
 
@@ -285,6 +290,30 @@
 
 <!-- ─── Chart Area ─────────────────────────────────────────────────────────── -->
 
+{#if isTrimmed}
+	<div
+		class="mb-4 flex items-start gap-2 rounded-md border border-amber-300/60 bg-amber-50 px-3.5 py-2.5 text-sm text-amber-800 dark:border-amber-800/50 dark:bg-amber-950/30 dark:text-amber-200"
+	>
+		<svg
+			class="mt-0.5 h-4 w-4 shrink-0"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			stroke-width="2"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"
+			/>
+		</svg>
+		<span>
+			This model's ensemble only reaches about <strong>{validDays} days</strong> ahead — the spread is
+			trimmed to its available range.
+		</span>
+	</div>
+{/if}
+
 {#if loadError}
 	<div
 		class="mb-4 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive"